### Setup ember-primitives

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/6-utils/createStore.md

Installs the ember-primitives package using pnpm. This is the initial step to use the createStore utility.

```bash
pnpm add ember-primitives
```

--------------------------------

### Install ember-primitives

Source: https://github.com/universal-ember/ember-primitives/blob/main/CONTRIBUTING.md

Clone the repository and install dependencies using pnpm.

```bash
git clone <repository-url>
cd ember-primitives
pnpm install
```

--------------------------------

### Install ember-primitives

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/6-utils/on-resize.md

Installs the ember-primitives package using pnpm. This package includes the on-resize utility.

```bash
pnpm add ember-primitives
```

--------------------------------

### Install ember-primitives

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/6-utils/qp.md

Installs the ember-primitives package using pnpm. This is the first step to using the query parameter utilities.

```bash
pnpm add ember-primitives
```

--------------------------------

### Install `should-handle-link`

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/6-utils/should-handle-link.md

Installs the `should-handle-link` package using pnpm. This is a prerequisite for using the utility in your project.

```bash
pnpm add should-handle-link
```

--------------------------------

### Install ember-primitives

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/6-utils/load.md

Installs the ember-primitives package using pnpm. This is the first step to using the 'load' utility.

```bash
pnpm add ember-primitives
```

--------------------------------

### Install ember-primitives

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/6-utils/dom-context.md

This command installs the ember-primitives package using pnpm. Ensure you have pnpm installed or use your preferred package manager.

```bash
pnpm add ember-primitives
```

--------------------------------

### Ember Primitives Test Setup and Manifest Loading

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/tests/index.html

This snippet demonstrates the core setup for testing in the Ember Primitives project. It imports essential testing modules, fetches a manifest file to load page data, and filters this data based on specific criteria. It also configures a global buffer object and initializes the Ember testing application.

```javascript
import "ember-testing";
window.Buffer = globalThis.Buffer = { isBuffer: () => false };
let response = await fetch("/kolay-manifest/manifest.json");
let json = await response.json();
let pages = json.groups[0].list;
// The accessibility page deliberately
// has violations for demonstration
window.__pages__ = pages.filter((page) => !page.path.includes("accessibility"));
import { start } from "./test-helper";
import.meta.glob("./**/*.{js,ts,gjs,gts}", { eager: true });
await start();
```

--------------------------------

### Install Dependencies

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/README.md

Installs the necessary project dependencies using npm. This is a standard step after cloning a project.

```bash
npm install
```

--------------------------------

### Run ember-primitives Test Application

Source: https://github.com/universal-ember/ember-primitives/blob/main/CONTRIBUTING.md

Start the test application to view and interact with the addon locally.

```bash
cd test-app
pnpm start
```

--------------------------------

### Install Dependencies

Source: https://github.com/universal-ember/ember-primitives/blob/main/test-app/README.md

Installs the necessary project dependencies using npm. This is a standard step after cloning a Node.js-based project.

```bash
npm install
```

--------------------------------

### Serve Application

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/README.md

Starts the Ember development server and makes the application accessible at http://localhost:4200. It also provides a link to the test runner.

```bash
ember serve
```

--------------------------------

### Install form-data-utils (Bash)

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/6-utils/data-from-event.md

This command installs the `form-data-utils` package using pnpm. This package provides utilities for handling form data, and it is also included with `ember-primitives` when using the `<Form />` component.

```bash
pnpm add form-data-utils
```

--------------------------------

### Install ember-primitives

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/5-floaty-bits/anchor-to.md

Installs the ember-primitives package using pnpm, which provides the anchorTo modifier and other UI primitives.

```bash
pnpm add ember-primitives
```

--------------------------------

### Install ember-primitives

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/5-floaty-bits/floating-ui.md

This command installs the ember-primitives package using pnpm, which is required to use the FloatingUI component and its related functionalities.

```bash
pnpm add ember-primitives
```

--------------------------------

### Install ember-primitives

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/1-get-started/index.md

This snippet shows the command to add the ember-primitives package to your project using pnpm. It's a standard installation command for Node.js projects managed with pnpm.

```bash
pnpm add ember-primitives
```

--------------------------------

### KeyCombo Usage Examples

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/3-ui/key-combo.md

Illustrates various ways to use the KeyCombo component, including single keys, macOS specific shortcuts, and key combinations provided as an array.

```gjs
import { Key, KeyCombo } from 'ember-primitives';

<template>
    <Key>ctrl</Key>
    <Key>anything here</Key>

    <KeyCombo @key="ctrl+x" />
    <KeyCombo @key="ctrl+x" @mac="command+x" />
    <KeyCombo @key={{array "ctrl" "x"}} @mac={{array "command" "x"}} />
</template>
```

--------------------------------

### Serve Ember Application

Source: https://github.com/universal-ember/ember-primitives/blob/main/test-app/README.md

Starts the Ember development server, allowing you to view and interact with the application locally. The app is typically accessible at http://localhost:4200.

```bash
ember serve
```

--------------------------------

### Example Usage of Plain Anchor Links

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/4-routing/proper-links.md

Provides a live preview example showcasing the use of plain `<a>` tags for navigation after the `@properLinks` decorator has been applied. It includes links to internal routes, a hash link, and an external URL.

```gjs
<template>
  <nav id="example" style="display: flex; gap: 0.5rem">
    <a href="/">Home</a>
    <a href="#example">Link using a hash</a>
    <a href="/4-routing/link">Link docs</a>
    <a href="/4-routing/external-link">ExternalLink docs</a>
    <a href="https://developer.mozilla.org">MDN ➚</a>
  </nav>
</template>
```

--------------------------------

### Basic PortalTargets Usage

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/5-floaty-bits/portal-targets.md

A minimal example demonstrating the basic usage of the PortalTargets component within a template.

```gjs
import { PortalTargets } from 'ember-primitives/components/portal-targets';

<template>
  <PortalTargets />
</template>
```

--------------------------------

### Header Popover Example

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/5-floaty-bits/popover.md

This example demonstrates using the Popover component within a site header. It includes nested popovers, dynamic content display based on state, and custom styling for the popover elements and trigger buttons. It utilizes `ember-primitives` for the Popover and PortalTargets, `ember-resources` for state management, and `ember-focus-trap` for focus management.

```gjs
import { PortalTargets, Popover } from 'ember-primitives';
import { hash } from '@ember/helper';
import { loremIpsum } from 'lorem-ipsum';
import { cell } from 'ember-resources';
import { on } from '@ember/modifier';
import { focusTrap } from 'ember-focus-trap';

const settings = cell(true);

<template>
    <div class="site">
      <PortalTargets />

        <header>
            <span>My App</span>

            <Popover @offsetOptions={{8}} as |p|>
              <button class="hook" {{p.reference}} {{on 'click' settings.toggle}}>
                Settings
              </button>
              {{#if settings.current}}
                <p.Content @as="dialog" open class="floatybit">
                  <PortalTargets />
                  <ul>
                    <li>a</li>
                    <li>not so big list</li>
                    <li>
                      things<br>

                      <Popover @placement="left" @offsetOptions={{16}} as |pp|>
                        <button {{pp.reference}}>view profile</button>

                        <pp.Content class="floatybit">
                          View or edit your profile settings
                          <div class="arrow" {{pp.arrow}}></div>
                        </pp.Content>
                      </Popover>
                    </li>
                  </ul>
                  <div class="arrow" {{p.arrow}}></div>
                </p.Content>
              {{/if}}
            </Popover>

        </header>

        <div class="main">
          {{loremIpsum (hash count=2 units="paragraphs")}}
        </div>
    </div>

  <style>
    .floatybit {
      width: max-content;
      position: absolute;
      top: 0;
      left: 0;
      background: #222;
      color: white;
      font-weight: bold;
      padding: 0.5rem;
      border-radius: 4px;
      font-size: 90%;
      filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.4));
      z-index: 10;
    }
    .floatybit .floatybit {
      background: #eee;
      color: black;
    }
    .floatybit .floatybit .arrow {
      background: #eee;
    }
    ul {
      padding-left: 1rem;
      margin: 0;
    }
    .arrow {
      position: absolute;
      background: #222;
      width: 8px;
      height: 8px;
      transform: rotate(45deg);
    }
    .hook {
      padding: 0.5rem;
      border: 1px solid;
      display: inline-block;
      color: black;
    }
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: white;
      position: sticky;
      top: 0;
      width: 100%;
      padding: 0.25rem;
      filter: drop-shadow(0px 3px 6px #000000aa);
    }
    .main {
      padding: 0.5rem;
    }
    .site {
      max-height: 200px;
      overflow-y: auto;
      border: 1px solid;
    }
    * { box-sizing: border-box; }
  </style>
</template>

```

--------------------------------

### Accordion Example with Native Details Element

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/3-ui/accordion.md

Demonstrates how to create an accordion-like structure using the native HTML <details> and <summary> elements. This example includes styling with CSS to mimic component behavior and shows how to manage multiple collapsible sections.

```gjs
// No imports needed!
// If you need only one open a time, use the "name" attribute
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#name

<template>
  <div class="demo">
    <details>
      <summary>the header</summary>

      <span>
        Ember.js is a productive, battle-tested JavaScript framework for building modern web
        applications. It includes everything you need to build rich UIs that work on any device.
      </span>
    </details>

    <details>
      <summary>another header</summary>

      <span>
        Ember.js is a productive, battle-tested JavaScript framework for building modern web
        applications. It includes everything you need to build rich UIs that work on any device.
      </span>
    </details>

    <details>
      <summary>a third header</summary>

      <span>
        Ember.js is a productive, battle-tested JavaScript framework for building modern web
        applications. It includes everything you need to build rich UIs that work on any device.
      </span>
    </details>
  </div>

  <style>
    details {
      position: relative;
      padding-bottom: 1rem;
    }
    summary {
      cursor: pointer;
      margin-bottom: -1rem;
      transition-property: all;
      transition-duration: 150ms;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

      background: white;
      padding: 0.5rem;
      color: black;
      border: 1px solid;
      border-radius: 0.25rem;
      position: relative;
      z-index: 2;
    }
    details[open] > summary {
      background: #dcdcff; 
      font-weight: bold;
      margin-bottom: 1rem;
    }

    details > span {
      position: relative;
      z-index: 1;
    }

    .demo {
      margin: 1rem; 
      padding: 1rem;
      display: grid;
      gap: 1rem;
    }
  </style>
</template>
```

--------------------------------

### Glimmer Modal Example

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/5-floaty-bits/modal.md

Demonstrates the usage of the Modal component from ember-primitives in a Glimmer application. It includes basic modal functionality, event handling for opening and closing, and styling using Open Props CSS.

```gjs
import { Modal } from 'ember-primitives';

import { on } from '@ember/modifier';
import { cell } from 'ember-resources';
import { loremIpsum } from 'lorem-ipsum';

const returnValue = cell('');

<template>
  <Modal @onClose={{returnValue.set}} as |m|>
    <button {{on 'click' m.open}} {{m.focusOnClose}}>Open Modal</button>

    <br><br>
    isOpen: {{m.isOpen}}<br>
    return: {{returnValue.current}}

    <m.Dialog>
      <div>
        <header>
          <h2>Example Modal</h2>

          <button {{on 'click' m.close}}>Close</button>
        </header>

        <form method="dialog">
          <main>
            Modal content here
            <br>

           {{loremIpsum 1}}
          </main>

          <footer>
            <button type="submit" value="confirm">Confirm</button>
            <button type="submit" value="create">Create</button>
            <button type="reset" value="close" {{on 'click' m.close}}>Reset</button>
          </footer>
        </form>
      </div>
    </m.Dialog>
  </Modal>


  <link rel="stylesheet" href="https://unpkg.com/open-props/easings.min.css"/>
  <link rel="stylesheet" href="https://unpkg.com/open-props/animations.min.css"/>
  <style>
    dialog {
      border-radius: 0.25rem;
      animation: var(--animation-slide-in-up), var(--animation-fade-in);
      animation-timing-function: var(--ease-out-5);
      animation-duration: 0.2s;
    }
    dialog > div {
      display: grid;
      gap: 1rem;
    }
    dialog::backdrop {
      backdrop-filter: blur(1px);
    }
    dialog header {
      display: flex;
      justify-content: space-between;
    }
    dialog h2 {
      margin: 0;
    }

    dialog main {
      max-width: 300px;
    }
    form {
      display: grid;
      gap: 1rem;
    }
  </style>
</template>
```

--------------------------------

### Setup Proper Links in Ember Router

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/4-routing/proper-links.md

Demonstrates how to import and apply the `@properLinks` decorator to the Ember Router class in `app/router.js` to enable plain `<a>` tag navigation.

```javascript
  // app/router.js
  import EmberRouter from "@ember/routing/router";

  import config from "docs-app/config/environment";
+ import { properLinks } from "ember-primitives/proper-links";

+ @properLinks
  export default class Router extends EmberRouter {
    location = config.locationType;
    rootURL = config.rootURL;
  }
```

--------------------------------

### Importing VisuallyHidden Component (JS)

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/6-utils/visually-hidden.md

Provides examples of importing the VisuallyHidden component from the 'ember-primitives' library in JavaScript (JS). It covers both standard import and a specific import for non-tree-shaking environments.

```js
import { VisuallyHidden } from 'ember-primitives';
```

```js
import { VisuallyHidden } from 'ember-primitives/components/dialog';
```

--------------------------------

### OTPInput Basic Usage

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/3-ui/one-time-password/otp-input.md

A simple example of how to use the OTPInput component within a template, including a label for accessibility. This demonstrates the basic rendering of the input field.

```gjs
import { OTPInput } from 'ember-primitives';

<template>

  <label>
    Enter OTP

    <OTPInput />
  </label>
</template>
```

--------------------------------

### Zoetrope Component Basic Usage

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/3-ui/zoetrope.md

A fundamental example of using the Zoetrope component with a header and content sections. It demonstrates the basic structure and props like `@gap` and `@offset`.

```gjs
import { Zoetrope } from "ember-primitives";

<template>
  <Zoetrope @gap={{8}} @offset={{40}}>
    <:header>
      <h2>Heading</h2>
    </:header>

    <:content>
      <a href="#" class="card">1</a>
      <a href="#" class="card">2</a>
      <a href="#" class="card">3</a>
      <a href="#" class="card">4</a>
      <a href="#" class="card">5</a>
      <a href="#" class="card">6</a>
    </:content>
  </Zoetrope>
</template>
```

--------------------------------

### Glimmer DSL for JavaScript Popover Example

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/5-floaty-bits/popover.md

This snippet demonstrates the usage of the Popover component from ember-primitives. It utilizes Glimmer DSL for JavaScript (gjs) and includes a template with a Popover, a reference element ('the hook'), and the popover content. It also incorporates PortalTargets for managing portal layering and includes inline styles for the popover's appearance and behavior.

```gjs
import { PortalTargets, Popover } from 'ember-primitives';
import { array, hash } from '@ember/helper';
import { loremIpsum } from 'lorem-ipsum';

<template>
  <PortalTargets />

  <div class="scroll-content" tabindex="0">
    {{loremIpsum (hash count=1 units="paragraphs")}}

    <Popover @placement="top" @offsetOptions={{8}} as |p|>
      <div class="hook" {{p.reference}}>
        the hook / anchor of the popover.
        <br>
        it sticks the boundary of this element.
      </div>
      <p.Content class="floatybit">
        The floaty bit here
        <div class="arrow" {{p.arrow}}></div>
      </p.Content>
    </Popover>

    {{loremIpsum (hash count=2 units="paragraphs")}}
  </div>

  <style>
    .floatybit {
      width: max-content;
      position: absolute;
      top: 0;
      left: 0;
      background: #222;
      color: white;
      font-weight: bold;
      padding: 5px;
      border-radius: 4px;
      font-size: 90%;
      filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.4));
      z-index: 10;
    }
    .arrow {
      position: absolute;
      background: #222;
      width: 8px;
      height: 8px;
      transform: rotate(45deg);
    }
    .hook {
      padding: 0.5rem;
      border: 1px solid;
      display: inline-block;
      color: black;
    }
    .scroll-content {
      max-height: 150px;
      overflow-y: auto;
      border: 1px solid;
      padding: 0.5rem;
    }
  </style>
</template>
```

--------------------------------

### Build ember-primitives Addon

Source: https://github.com/universal-ember/ember-primitives/blob/main/CONTRIBUTING.md

Build the ember-primitives addon for distribution or local use.

```bash
cd ember-primitives
pnpm build
```

--------------------------------

### Run ember-primitives Tests

Source: https://github.com/universal-ember/ember-primitives/blob/main/CONTRIBUTING.md

Execute the test suite for the ember-primitives project, either once or in watch mode.

```bash
cd test-app
pnpm test
pnpm test:watch
```

--------------------------------

### Switch Component Example (GJS)

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/2-accessibility/index.md

Illustrates the use of the Switch component in Glimmer.js (GJS). This example shows a Switch component rendered without an associated label, which is a common accessibility issue that ember-primitives highlights during development.

```gjs
import { Switch } from 'ember-primitives';

<template>
  <Switch style="display: inline-block" as |s|>
    <s.Control />
  </Switch>
</template>
```

--------------------------------

### Nested Portals Example

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/5-floaty-bits/portal.md

Demonstrates nesting of Portal components to create layered content, such as tooltips or popovers within other popovers. This example showcases how Portals can be targeted to specific DOM elements, creating a hierarchical structure for UI elements.

```gjs
import { Portal } from 'ember-primitives/components/portal';

<template>
  <div class="style-wrapper">
    <div data-portal-target></div>

    <button>main content</button>

    <Portal @to="[data-portal-target]">
      <div class="popover">
        <div data-portal-target></div>
        first layer

        <Portal @to="[data-portal-target]">
          <div class="popover">
            <div data-portal-target></div>
            second layer 

            <Portal @to="[data-portal-target]">
              <div class="popover">
                tooltip / third layer
              </div>
            </Portal>
          </div>
        </Portal>

      </div>
    </Portal>
  </div>

  <style>
    .popover {
      position: absolute;
      width: max-content;
      border: 1px solid;
      padding: 1rem;
      color: black;
      margin: 1.25rem;
      background: #fefefe;
      filter: invert(1)  drop-shadow(0 0 0.75rem rgba(0,0,0,0.2));
      border-radius: 4px;
    }
    .button {
      padding: 0.5rem 1rem;
    }
    .style-wrapper {
      height: 100px;
      position: relative;
    }
  </style>
</template>
```

--------------------------------

### Build Ember Application

Source: https://github.com/universal-ember/ember-primitives/blob/main/test-app/README.md

Compiles the Ember application for deployment. The `--environment production` flag optimizes the build for production use.

```bash
ember build
```

```bash
ember build --environment production
```

--------------------------------

### Import Key and KeyCombo Components

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/3-ui/key-combo.md

Shows different ways to import the Key and KeyCombo components from the ember-primitives library, including a path for non-tree-shaking environments.

```js
import { Key, KeyCombo } from 'ember-primitives';
```

```js
import { Key, KeyCombo } from 'ember-primitives/components/keys';
```

--------------------------------

### Shadowed Component Example: Style Isolation

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/6-utils/shadowed.md

This example showcases the core functionality of the Shadowed component. It renders a paragraph element directly, which is affected by global styles, and then renders another paragraph within the Shadowed component, demonstrating its isolation from those same global styles.

```gjs
import { Shadowed } from 'ember-primitives';

<template>
  <style> 
    p {
      border: 1px solid;
      padding: 0.75rem;
      transform: skew(5deg, 5deg); 
      width: 100px;
    }
  </style>

  <p>
    This element is affected by the global styles
  </p>

  <Shadowed>
    <p>
      This element is not affected by global sytles
    </p>
  </Shadowed>
</template>
```

--------------------------------

### Build Application

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/README.md

Compiles the Ember application for deployment. The `--environment production` flag optimizes the build for production.

```bash
ember build
```

```bash
ember build --environment production
```

--------------------------------

### Dark/Light Theme Switch Example

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/3-ui/switch.md

Implements a dark/light theme toggle using the Ember Primitives Switch component. This example includes custom CSS for styling the switch and toggling a 'dark' class on the parent element to change the theme. It also incorporates SVG icons for sun and moon.

```gjs
import { Switch } from 'ember-primitives';
import { on } from '@ember/modifier';

const toggleTheme = (e)
  =>
  e.target.closest('div').classList.toggle("dark");

<template>
  <Switch as |s|>
    <s.Control {{on 'change' toggleTheme}} />
    <s.Label>
      <span class="sr-only">Toggle between light and dark mode</span>
      <Moon />
      <Sun />
      <span class="ball"></span>
    </s.Label>
  </Switch>

  <style>
    @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

    * {box-sizing: border-box;}

    div {
      padding: 1rem;
      font-family: "Montserrat", sans-serif;
      background-color: #eee;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
      margin: 0;
      transition: background 0.2s linear;
    }

    div.dark {background-color: #292c35;}
    div.dark label { background-color: #9b59b6; }


    input[type='checkbox'][role='switch'] {
      opacity: 0;
      position: absolute;
    }

    .sr-only {
      width: 0px;
      max-width: 0px;
      height: 0px;
      max-height: 0px;
      overflow: hidden;
      margin-left: -0.5rem;
    }

    label {
      background-color: #111;
      width: 50px;
      height: 26px;
      border-radius: 50px;
      position: relative;
      padding: 5px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem;
    }

    svg { fill: currentColor; }
    .fa-moon { color: #f1c40f; }
    .fa-sun { color: #f39c12; }

    label .ball {
      background-color: #fff;
      width: 22px;
      height: 22px;
      position: absolute;
      left: 2px;
      top: 2px;
      border-radius: 50%;
      transition: transform 0.2s linear;
    }

    input[type='checkbox'][role='switch']:checked + label .ball {
      transform: translateX(24px);
    }

  </style>
</template>

// 🎵 It's raining, it's pouring, ... 🎵
// https://www.youtube.com/watch?v=ll5ykbAumD4
const Sun = <template>
  <svg class="fa-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">{!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --}<path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"/></svg>
</template>;

const Moon = <template>
  <svg class="fa-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">{!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --}<path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></svg>
</template>;
```

--------------------------------

### Render Key and KeyCombo Components

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/3-ui/key-combo.md

Demonstrates the usage of Key and KeyCombo components for displaying single keys and key combinations. Includes styling for the <kbd> element.

```gjs
import { Key, KeyCombo } from 'ember-primitives';

<template>
  A single key:
  <Key>a</Key>
  <br><br>
  A combination of keys: 
  <KeyCombo @keys="ctrl+a" @mac="cmd+a" />

  <style>
    kbd {
      background-color: #eee;
      border-radius: 3px;
      border: 1px solid #b4b4b4;
      box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.2),
        0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
      color: #333;
      display: inline-block;
      font-size: 0.85em;
      font-weight: 700;
      line-height: 1;
      padding: 2px 4px;
      white-space: nowrap;
      /* CSS from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd */
    } 
  </style>
</template>
```

--------------------------------

### Lint ember-primitives

Source: https://github.com/universal-ember/ember-primitives/blob/main/CONTRIBUTING.md

Run linting checks to ensure code quality and style consistency.

```bash
pnpm lint
pnpm lint:fix
```

--------------------------------

### Utility for Application Singleton Store

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/6-utils/createStore.md

Provides a helper utility function to simplify the creation of application-wide singleton stores. This wraps the createStore call with getOwner.

```js
import { createStore } from 'ember-primitives/store';
import { getOwner } from '@ember/owner';

class MyState {}

function createState(context) {
  let owner = getOwner(this);
  return createStore(owner, MyState);
}

class Demo extends Component {
  // lazyily created upon access of `foo`.
  // will be the same instance everywhere in the application 
  get foo() {
    return createState(this);
  }
}
```

--------------------------------

### Basic Toggle Usage

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/3-ui/toggle.md

A simple example of how to render the Toggle component with basic accessibility attributes.

```gjs
import { Toggle } from 'ember-primitives';

<template>
  <Toggle aria-label="Toggle Bold Text">
    B
  </Toggle>
</template>
```

--------------------------------

### Add ember-focus-trap

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/5-floaty-bits/modal.md

This command installs the `ember-focus-trap` addon, which is used to manage focus within modals according to ARIA guidelines.

```bash
pnpm add ember-focus-trap
```

--------------------------------

### Ember Code Generation

Source: https://github.com/universal-ember/ember-primitives/blob/main/test-app/README.md

Demonstrates how to use Ember CLI's code generation capabilities. Running `ember help generate` provides a list of available generators.

```bash
ember help generate
```

--------------------------------

### Create Application Singleton Store

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/6-utils/createStore.md

Shows how to create a store instance that is shared across the entire application. This is achieved by passing the application owner obtained via getOwner.

```js
import { createStore } from 'ember-primitives/store';
import { getOwner } from '@ember/owner';

class MyState {}

class Demo extends Component {
  // lazyily created upon access of `foo`.
  // will be the same instance everywhere in the application 
  // 
  get foo() {
    return createStore(getOwner(this), MyState);
  }
}
```

--------------------------------

### Create Store with Arguments

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/6-utils/createStore.md

Illustrates creating a store instance with arguments passed to the state's constructor. The createStore utility accepts a factory function for this purpose.

```js
import { createStore } from 'ember-primitives/store';

class MyState {
  constructor(/* .. */) { /* ... */ }
}

class Demo extends Component {
  // or 
  get foo() {
    return createStore(this, () => new MyState(1, 2));
  }
}
```

--------------------------------

### Initialize Tabster Keyboard Support (TypeScript)

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/2-accessibility/index.md

Shows how to initialize tabster for keyboard support within an Ember application's route using TypeScript. It includes importing the setupTabster function and calling it in the `beforeModel` hook, passing `this` for proper cleanup.

```typescript
import Route from '@ember/routing/route';
import { service } from '@ember/service';
import{ setupTabster } from 'ember-primitives/tabster';

export default class Application extends Route {
  async beforeModel() {
    // the 'this' is passed so that tabster is cleaned up
    // when the route (or in this case: application)
    // is destroyed  or unmounted
    await setupTabster(this);
  }
}
```

--------------------------------

### Create Store with Service and Cleanup

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/6-utils/createStore.md

Demonstrates integrating services and managing cleanup for a store instance. Services can be accessed, and registerDestructor can be used for cleanup logic when the component is torn down.

```js
import { createStore } from 'ember-primitives/store';
import { service } from '@ember/service';

class MyState {
  @service router;

  constructor(/* .. */) { 
    registerDestructor(this, () => {
      // cleanup runs when Demo is torn down
    });  
  }
}

class Demo extends Component {
  // or 
  get foo() {
    return createStore(this, () => new MyState(/* ... */));
  }
}
```

--------------------------------

### Zoetrope with Custom Styled Controls

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/3-ui/zoetrope.md

Shows how to implement custom controls for the Zoetrope component with custom styling and placement. The example includes CSS to position the controls absolutely and style the buttons.

```gjs
import { Zoetrope } from "ember-primitives";
import { on } from "@ember/modifier";

<template>
  <Zoetrope @gap={{8}} @offset={{40}}>
    <:header>
      <h2>Custom Placement</h2>
    </:header>

    <:controls as |z|>
      <div class="my-controls">
        <button
          type="button"
          {{on "click" z.scrollLeft}}
          disabled={{z.cannotScrollLeft}}
        >&lt;</button>

        <button
          type="button"
          {{on "click" z.scrollRight}}
          disabled={{z.cannotScrollRight}}
        >&gt;</button>
      </div>
    </:controls>

    <:content>
      <a href="#" class="card">1</a>
      <a href="#" class="card">2</a>
      <a href="#" class="card">3</a>
      <a href="#" class="card">4</a>
      <a href="#" class="card">5</a>
      <a href="#" class="card">6</a>
      <a href="#" class="card">7</a>
      <a href="#" class="card">8</a>
      <a href="#" class="card">9</a>
      <a href="#" class="card">10</a>
      <a href="#" class="card">11</a>
      <a href="#" class="card">12</a>
    </:content>
  </Zoetrope>

  <style>
    .my-controls { display: flex; position: absolute; top: 50%; transform: translateY(-50%); height:
    40%; width: 100%; padding-top: 2rem; pointer-events: none; } .my-controls button { height: 100%;
    width: var(--zoetrope-offset); background: rgb(0 0 0 / 50%); pointer-events: auto; } 
    .my-controls button:nth-child(2) { margin-left: auto; } .my-controls button:disabled {
    visibility: hidden;
    }

  </style>
</template>
```

--------------------------------

### Bold Text Toggle Example

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/3-ui/toggle.md

Demonstrates how to use the Toggle component to create a bold text toggle button. Includes custom styling for visual feedback when the toggle is active.

```gjs
import { Toggle } from 'ember-primitives';

<template>
  <Toggle aria-label="Toggle Bold Text" class="bold-toggle">
    B
  </Toggle>

  <style>
    .bold-toggle {
      border: 1px solid;
      padding: 5px 10px;
      font-size: 1.25rem;
      line-height: 1rem;
    }
    .bold-toggle[aria-pressed="true"] {
      font-weight: bold;
      backdrop-filter: blur(25px);
      background: gray;
    }
  </style>
  
</template>
```

--------------------------------

### Link with State Attributes

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/4-routing/link.md

Illustrates how to use the Link component and style it based on its active state using the `data-active` attribute. This example shows styling for the current page and a related page.

```gjs
import { Link } from 'ember-primitives';

<template>
  <style>
    [data-active] {
      color: red;
    }
    a { padding: 0.25rem 0.5rem; }
  </style>

  <Link @href="/4-routing/link" as |a|>
    This page
  </Link>
  |
  <Link @href="/4-routing/proper-links" as |a|>
    Related page
  </Link>
</template>
```

--------------------------------

### Create Store in Component (Eager)

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/6-utils/createStore.md

Shows how to eagerly create a store instance for a component. The store is initialized when the component instance is created.

```js
import { createStore } from 'ember-primitives/store';

class MyState {}

class Demo extends Component {
  // or eagrly created when `Demo` is created
  foo = createStore(this, MyState);
}
```

--------------------------------

### Switch Component with Styling (Glimmer)

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/3-ui/switch.md

Provides an example of using the Switch component with custom CSS styling in Glimmer. It demonstrates how to apply styles based on the component's state using the :has selector.

```gjs
import { Switch } from 'ember-primitives';

<template>
  <style>
    /* styles for the root element when checked */
    .my-switch:has(:checked) {
      font-style: italic;
    }
    .my-switch:has([data-state=on]) {
      font-weight: bold;
    }
  </style>

  <Switch class="my-switch" as |s|>
    <s.Control class="form-check-input" />
    <s.Label class="form-check-label">
      Toggle on or off
    </s.Label>
  </Switch>
</template>
```

--------------------------------

### Sticky Footer with Revealing Extra Footer

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/8-layout/sticky-footer.md

Implements a sticky footer that appears above a site-wide footer. As the user scrolls, more information in the sticky footer is revealed. This example showcases positioning and overflow handling for layered footers.

```gjs
import { StickyFooter } from 'ember-primitives';
import { on } from '@ember/modifier';
import { TrackedArray } from 'tracked-built-ins';
import { loremIpsum } from 'lorem-ipsum';

const content = new TrackedArray();
const addContent = () => content.push(loremIpsum({ count: 1, units: 'paragraph' }));
const removeContent = () => content.splice(-1);

<template>
  <div class="fake-window2">
    <StickyFooter class="container">
      <:content>
        <button {{on 'click' addContent}}>Add Content</button>
        <button {{on 'click' removeContent}}>Remove Content</button>
        <br>

        {{#each content as |paragraph|}}
          {{paragraph}}
        {{/each}}
      </:content>
      <:footer>
        <footer class="sticky-footer">
          This is the footer
          <br><br>
          some information can be hidden until scrolled to.
        </footer>
      </:footer>
    </StickyFooter>

    <footer class="site-footer">
      site-wide footer
    </footer>
  </div>
  <style>
    /* styles that demonstrate the UX */
    .container {
      max-height: 200px;
      overflow: auto;
      position: relative;
      padding-bottom: 60px;
    }
    .ember-primitives__sticky-footer__footer {
      position: sticky;
      bottom: -38px;
    }
    footer.sticky-footer, footer.site-footer { 
      border: 1px solid; background: #333; 
    }
    footer.site-footer { height: 38px; position: absolute; bottom: 0; left: 0; right: 0; }
    .fake-window2 {
      padding-bottom: 38px;
      min-height: 150px;
      max-height: 200px;
      position: relative;
      border: 1px solid;
      padding: 1rem;
      overflow: hidden;
    }
  </style>
</template>
```

--------------------------------

### Importing Modal and Dialog Components

Source: https://github.com/universal-ember/ember-primitives/blob/main/docs-app/public/docs/5-floaty-bits/modal.md

Shows how to import the Modal and Dialog components from the 'ember-primitives' library. It provides two import methods: a standard import and an import for non-tree-shaking environments.

```js
import { Modal, Dialog /* alias */ } from 'ember-primitives';
```

```js
import { Modal, Dialog /* alias */ } from 'ember-primitives/components/dialog';
```