ember-primitives 0.50.0 → 0.51.0

package/declarations/color-scheme.d.ts

@@ -22,6 +22,8 @@ export declare const colorScheme: {
      * the current valuel of the "color scheme"
      */
     current: string | undefined;
+    readonly isDark: boolean;
+    readonly isLight: boolean;
 };
 /**
  * Synchronizes state of `colorScheme` with the users preferences as well as reconciles with previously set theme in local storage.
@@ -36,8 +38,8 @@ export declare function sync(): void;
 export declare const prefers: {
     dark: () => boolean;
     light: () => boolean;
-    custom: (name: string) => boolean;
     none: () => boolean;
+    custom: (name: string) => boolean;
 };
 /**
  * Helper methods for working with the color scheme preference in local storage

package/declarations/color-scheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-scheme.d.ts","sourceRoot":"","sources":["../src/color-scheme.ts"],"names":[],"mappings":"AAgBA;;GAEG;AACH,eAAO,MAAM,WAAW;IACtB;;OAEG;oBACa,MAAM;;QAOpB;;WAEG;2BACgB,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI;;;QAKhD;;WAEG;2BACgB,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI;;IAKlD;;OAEG;aACY,MAAM,GAAG,SAAS;CAelC,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,IAAI,SAyBnB;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO;;;mBAGH,MAAM;;CAEtB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,eAAe;;;oBAGV,MAAM;;CAEvB,CAAC;AAEF;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,CAAC,EAAE,WAAW,UAInD;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;AAC1E,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;AAkBpD;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,CAAC,EAAE,WAAW,QAItD"}
+{"version":3,"file":"color-scheme.d.ts","sourceRoot":"","sources":["../src/color-scheme.ts"],"names":[],"mappings":"AAgBA;;GAEG;AACH,eAAO,MAAM,WAAW;IACtB;;OAEG;oBACa,MAAM;;QAOpB;;WAEG;2BACgB,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI;;;QAKhD;;WAEG;2BACgB,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI;;IAKlD;;OAEG;aACY,MAAM,GAAG,SAAS;;;CAsBlC,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,IAAI,SAyBnB;AAcD;;;GAGG;AACH,eAAO,MAAM,OAAO;;;;mBAIH,MAAM;CACtB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,eAAe;;;oBAGV,MAAM;;CAEvB,CAAC;AAEF;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,CAAC,EAAE,WAAW,UAInD;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;AAC1E,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;AAkBpD;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,CAAC,EAAE,WAAW,QAItD"}

package/declarations/components/breadcrumb.d.ts

@@ -0,0 +1,58 @@
+import type { TOC } from "@ember/component/template-only";
+declare const Separator: TOC<{
+    Element: HTMLSpanElement;
+    Blocks: {
+        default: [];
+    };
+}>;
+export interface Signature {
+    Element: HTMLElement;
+    Args: {
+        /**
+         * The accessible label for the breadcrumb navigation.
+         * Defaults to "Breadcrumb"
+         */
+        label?: string;
+    };
+    Blocks: {
+        default: [
+            {
+                /**
+                 * A separator component to place between breadcrumb items.
+                 * Typically renders as "/" or ">" with aria-hidden="true".
+                 */
+                Separator: typeof Separator;
+            }
+        ];
+    };
+}
+/**
+ * A breadcrumb navigation component that displays the current page's location within a navigational hierarchy.
+ *
+ * Breadcrumbs help users understand their current location and provide a way to navigate back through the hierarchy.
+ *
+ * For example:
+ *
+ * ```gjs live preview
+ * import { Breadcrumb } from 'ember-primitives';
+ *
+ * <template>
+ *   <Breadcrumb as |b|>
+ *     <li>
+ *       <a href="/">Home</a>
+ *     </li>
+ *     <b.Separator>/</b.Separator>
+ *     <li>
+ *       <a href="/docs">Docs</a>
+ *     </li>
+ *     <b.Separator>/</b.Separator>
+ *     <li aria-current="page">
+ *       Breadcrumb
+ *     </li>
+ *   </Breadcrumb>
+ * </template>
+ * ```
+ */
+export declare const Breadcrumb: TOC<Signature>;
+export default Breadcrumb;
+//# sourceMappingURL=breadcrumb.d.ts.map

package/declarations/components/breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../src/components/breadcrumb.gts"],"names":[],"mappings":"AA2EA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAE1D,QAAA,MAAM,SAAS,EAAE,GAAG,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC;IACzB,MAAM,EAAE;QACN,OAAO,EAAE,EAAE,CAAC;KACb,CAAC;CACH,CAYC,CAAC;AAEH,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE;QACJ;;;WAGG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;gBACE;;;mBAGG;gBACH,SAAS,EAAE,OAAO,SAAS,CAAC;aAC7B;SACF,CAAC;KACH,CAAC;CACH;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,UAAU,EAAE,GAAG,CAAC,SAAS,CAiBpC,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/declarations/components/drawer.d.ts

@@ -0,0 +1,128 @@
+import Component from "@glimmer/component";
+import type { TOC } from "@ember/component/template-only";
+import type { ModifierLike, WithBoundArgs } from "@glint/template";
+declare const DrawerElement: TOC<{
+    Element: HTMLDialogElement;
+    Args: {
+        /**
+         * @internal
+         */
+        open: boolean | undefined;
+        /**
+         * @internal
+         */
+        onClose: () => void;
+        /**
+         * @internal
+         */
+        register: ModifierLike<{
+            Element: HTMLDialogElement;
+        }>;
+    };
+    Blocks: {
+        default: [];
+    };
+}>;
+export interface Signature {
+    Args: {
+        /**
+         * Optionally set the open state of the drawer
+         * The state will still be managed internally,
+         * so this does not need to be a maintained value, but whenever it changes,
+         * the drawer element will reflect that change accordingly.
+         */
+        open?: boolean;
+        /**
+         * When the drawer is closed, this function will be called
+         * and the drawer's `returnValue` will be passed.
+         *
+         * This can be used to determine which button was clicked to close the drawer
+         *
+         * Note though that this value is only populated when using
+         * `<form method='dialog'>`
+         */
+        onClose?: (returnValue: string) => void;
+    };
+    Blocks: {
+        default: [
+            {
+                /**
+                 * Represents the open state of the drawer element.
+                 */
+                isOpen: boolean;
+                /**
+                 * Closes the drawer element
+                 * Will throw an error if `Drawer` is not rendered.
+                 */
+                close: () => void;
+                /**
+                 * Opens the drawer element.
+                 * Will throw an error if `Drawer` is not rendered.
+                 */
+                open: () => void;
+                /**
+                 * This modifier should be applied to the button that opens the Drawer so that it can be re-focused when the drawer closes.
+                 *
+                 * Example:
+                 *
+                 * ```gjs
+                 * <template>
+                 *   <Drawer as |d|>
+                 *     <button {{d.focusOnClose}} {{on "click" d.open}}>Open</button>
+                 *
+                 *     <d.Drawer>...</d.Drawer>
+                 *   </Drawer>
+                 * </template>
+                 * ```
+                 */
+                focusOnClose: ModifierLike<{
+                    Element: HTMLElement;
+                }>;
+                /**
+                 * This is the `<dialog>` element (with some defaults pre-wired).
+                 * This is required to be rendered.
+                 */
+                Drawer: WithBoundArgs<typeof DrawerElement, "onClose" | "register" | "open">;
+            }
+        ];
+    };
+}
+declare class DrawerDialog extends Component<Signature> {
+    #private;
+    _isOpen: boolean;
+    get isOpen(): boolean;
+    set isOpen(val: boolean);
+    refocus: import("ember-modifier").FunctionBasedModifier<{
+        Args: {
+            Positional: unknown[];
+            Named: import("ember-modifier/-private/signature").EmptyObject;
+        };
+        Element: Element;
+    }>;
+    drawerElement: HTMLDialogElement | undefined;
+    register: import("ember-modifier").FunctionBasedModifier<{
+        Args: {
+            Positional: unknown[];
+            Named: import("ember-modifier/-private/signature").EmptyObject;
+        };
+        Element: HTMLDialogElement;
+    }>;
+    /**
+     * Closes the drawer -- this will throw an error in development if the drawer element was not rendered
+     */
+    close: () => void;
+    /**
+     * @internal
+     *
+     * handles the <dialog> element's native close behavior.
+     * listened to via addEventListener('close', ...);
+     */
+    handleClose: () => void;
+    /**
+     * Opens the drawer -- this will throw an error in development if the drawer element was not rendered
+     */
+    open: () => void;
+}
+export declare const Drawer: typeof DrawerDialog;
+export default DrawerDialog;
+//# sourceMappingURL=drawer.d.ts.map

package/declarations/components/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/components/drawer.gts"],"names":[],"mappings":"AAyOA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAa3C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEnE,QAAA,MAAM,aAAa,EAAE,GAAG,CAAC;IACvB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE;QACJ;;WAEG;QACH,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;QAC1B;;WAEG;QACH,OAAO,EAAE,MAAM,IAAI,CAAC;QAEpB;;WAEG;QACH,QAAQ,EAAE,YAAY,CAAC;YAAE,OAAO,EAAE,iBAAiB,CAAA;SAAE,CAAC,CAAC;KACxD,CAAC;IACF,MAAM,EAAE;QAAE,OAAO,EAAE,EAAE,CAAA;KAAE,CAAC;CACzB,CAcC,CAAC;AAEH,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE;QACJ;;;;;WAKG;QACH,IAAI,CAAC,EAAE,OAAO,CAAC;QACf;;;;;;;;WAQG;QACH,OAAO,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;KACzC,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;gBACE;;mBAEG;gBACH,MAAM,EAAE,OAAO,CAAC;gBAEhB;;;mBAGG;gBACH,KAAK,EAAE,MAAM,IAAI,CAAC;gBAElB;;;mBAGG;gBACH,IAAI,EAAE,MAAM,IAAI,CAAC;gBAEjB;;;;;;;;;;;;;;mBAcG;gBACH,YAAY,EAAE,YAAY,CAAC;oBAAE,OAAO,EAAE,WAAW,CAAA;iBAAE,CAAC,CAAC;gBAErD;;;mBAGG;gBACH,MAAM,EAAE,aAAa,CAAC,OAAO,aAAa,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;aAC9E;SACF,CAAC;KACH,CAAC;CACH;AAED,cAAM,YAAa,SAAQ,SAAS,CAAC,SAAS,CAAC;;IAab,OAAO,EAAE,OAAO,CAAC;IAEjD,IAAI,MAAM,IAMM,OAAO,CADtB;IACD,IAAI,MAAM,CAAC,GAAG,EAAE,OAAO,EAEtB;IAGD,OAAO;;;;;;OAQJ;IAEc,aAAa,EAAE,iBAAiB,GAAG,SAAS,CAAC;IAE9D,QAAQ;;;;;;OAiBL;IAEH;;OAEG;IACH,KAAK,aAkBH;IAEF;;;;;OAKG;IACH,WAAW,aAUT;IAEF;;OAEG;IACH,IAAI,aAkBF;CACH;AAED,eAAO,MAAM,MAAM,qBAAe,CAAC;AAEnC,eAAe,YAAY,CAAC"}

package/declarations/index.d.ts

@@ -1,7 +1,9 @@
 export { Accordion } from './components/accordion';
 export type { AccordionContentExternalSignature, AccordionHeaderExternalSignature, AccordionItemExternalSignature, AccordionTriggerExternalSignature, } from './components/accordion/public.ts';
 export { Avatar } from './components/avatar';
+export { Breadcrumb } from './components/breadcrumb';
 export { Dialog, Dialog as Modal } from './components/dialog';
+export { Drawer } from './components/drawer';
 export { ExternalLink } from './components/external-link';
 export { Form } from './components/form';
 export { Key, KeyCombo } from './components/keys';

package/declarations/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,YAAY,EACV,iCAAiC,EACjC,gCAAgC,EAChC,8BAA8B,EAC9B,iCAAiC,GAClC,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,YAAY,EACV,iCAAiC,EACjC,gCAAgC,EAChC,8BAA8B,EAC9B,iCAAiC,GAClC,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,cAAc,cAAc,CAAC"}

package/dist/color-scheme.js

@@ -51,6 +51,12 @@ const colorScheme = {
     }
     localPreference.update(value);
     setColorScheme(value);
+  },
+  get isDark() {
+    return _colorScheme.current === 'dark';
+  },
+  get isLight() {
+    return _colorScheme.current !== 'dark';
   }
 };
 
@@ -82,16 +88,25 @@ function sync() {
     _colorScheme.current = 'light';
   }
 }
+const queries = {
+  dark: window.matchMedia('(prefers-color-scheme: dark)'),
+  light: window.matchMedia('(prefers-color-scheme: light)'),
+  none: window.matchMedia('(prefers-color-scheme: no-preference)')
+};
+queries.dark.addEventListener('change', e => {
+  const mode = e.matches ? 'dark' : 'light';
+  colorScheme.update(mode);
+});
 
 /**
  * Helper methods to determining what the user's preferred color scheme is
  * based on the system preferences rather than the users explicit preference.
  */
 const prefers = {
-  dark: () => window.matchMedia('(prefers-color-scheme: dark)').matches,
-  light: () => window.matchMedia('(prefers-color-scheme: light)').matches,
-  custom: name => window.matchMedia(`(prefers-color-scheme: ${name})`).matches,
-  none: () => window.matchMedia('(prefers-color-scheme: no-preference)').matches
+  dark: () => queries.dark.matches,
+  light: () => queries.light.matches,
+  none: () => queries.none.matches,
+  custom: name => window.matchMedia(`(prefers-color-scheme: ${name})`).matches
 };
 const LOCAL_PREF_KEY = 'ember-primitives/color-scheme#local-preference';
 
@@ -137,6 +152,7 @@ function styleOf(element) {
   }
   return document.documentElement.style;
 }
+sync();
 
 export { colorScheme, getColorScheme, localPreference, prefers, removeColorScheme, setColorScheme, sync };
 //# sourceMappingURL=color-scheme.js.map

package/dist/color-scheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-scheme.js","sources":["../src/color-scheme.ts"],"sourcesContent":["import { waitForPromise } from '@ember/test-waiters';\n\nimport { cell } from 'ember-resources';\n\nconst _colorScheme = cell<string | undefined>();\n\nlet callbacks: Set<(colorScheme: string) => void> = new Set();\n\nasync function runCallbacks(theme: string) {\n  await Promise.resolve();\n\n  for (const callback of callbacks.values()) {\n    callback(theme);\n  }\n}\n\n/**\n * Object for managing the color scheme\n */\nexport const colorScheme = {\n  /**\n   * Set's the current color scheme to the passed value\n   */\n  update: (value: string) => {\n    colorScheme.current = value;\n\n    void waitForPromise(runCallbacks(value));\n  },\n\n  on: {\n    /**\n     * register a function to be called when the color scheme changes.\n     */\n    update: (callback: (colorScheme: string) => void) => {\n      callbacks.add(callback);\n    },\n  },\n  off: {\n    /**\n     * unregister a function that would have been called when the color scheme changes.\n     */\n    update: (callback: (colorScheme: string) => void) => {\n      callbacks.delete(callback);\n    },\n  },\n\n  /**\n   * the current valuel of the \"color scheme\"\n   */\n  get current(): string | undefined {\n    return _colorScheme.current;\n  },\n  set current(value: string | undefined) {\n    _colorScheme.current = value;\n\n    if (!value) {\n      localPreference.delete();\n\n      return;\n    }\n\n    localPreference.update(value);\n    setColorScheme(value);\n  },\n};\n\n/**\n * Synchronizes state of `colorScheme` with the users preferences as well as reconciles with previously set theme in local storage.\n *\n * This may only be called once per app.\n */\nexport function sync() {\n  /**\n   * reset the callbacks\n   */\n  callbacks = new Set();\n\n  /**\n   * If local prefs are set, then we don't care what prefers-color-scheme is\n   */\n  const userPreference = localPreference.read();\n\n  if (userPreference) {\n    setColorScheme(userPreference);\n    _colorScheme.current = userPreference;\n\n    return;\n  }\n\n  if (prefers.dark()) {\n    setColorScheme('dark');\n    _colorScheme.current = 'dark';\n  } else if (prefers.light()) {\n    setColorScheme('light');\n    _colorScheme.current = 'light';\n  }\n}\n\n/**\n * Helper methods to determining what the user's preferred color scheme is\n * based on the system preferences rather than the users explicit preference.\n */\nexport const prefers = {\n  dark: () => window.matchMedia('(prefers-color-scheme: dark)').matches,\n  light: () => window.matchMedia('(prefers-color-scheme: light)').matches,\n  custom: (name: string) => window.matchMedia(`(prefers-color-scheme: ${name})`).matches,\n  none: () => window.matchMedia('(prefers-color-scheme: no-preference)').matches,\n};\n\nconst LOCAL_PREF_KEY = 'ember-primitives/color-scheme#local-preference';\n\n/**\n * Helper methods for working with the color scheme preference in local storage\n */\nexport const localPreference = {\n  isSet: () => Boolean(localPreference.read()),\n  read: () => localStorage.getItem(LOCAL_PREF_KEY),\n  update: (value: string) => localStorage.setItem(LOCAL_PREF_KEY, value),\n  delete: () => localStorage.removeItem(LOCAL_PREF_KEY),\n};\n\n/**\n * For the given element, returns the `color-scheme` of that element.\n */\nexport function getColorScheme(element?: HTMLElement) {\n  const style = styleOf(element);\n\n  return style.getPropertyValue('color-scheme');\n}\n\nexport function setColorScheme(element: HTMLElement, value: string): void;\nexport function setColorScheme(value: string): void;\n\nexport function setColorScheme(...args: [string] | [HTMLElement, string]): void {\n  if (typeof args[0] === 'string') {\n    styleOf().setProperty('color-scheme', args[0]);\n\n    return;\n  }\n\n  if (typeof args[1] === 'string') {\n    styleOf(args[0]).setProperty('color-scheme', args[1]);\n\n    return;\n  }\n\n  throw new Error(`Invalid arity, expected up to 2 args, received ${args.length}`);\n}\n\n/**\n * Removes the `color-scheme` from the given element\n */\nexport function removeColorScheme(element?: HTMLElement) {\n  const style = styleOf(element);\n\n  style.removeProperty('color-scheme');\n}\n\nfunction styleOf(element?: HTMLElement) {\n  if (element) {\n    return element.style;\n  }\n\n  return document.documentElement.style;\n}\n"],"names":["_colorScheme","cell","callbacks","Set","runCallbacks","theme","Promise","resolve","callback","values","colorScheme","update","value","current","waitForPromise","on","add","off","delete","localPreference","setColorScheme","sync","userPreference","read","prefers","dark","light","window","matchMedia","matches","custom","name","none","LOCAL_PREF_KEY","isSet","Boolean","localStorage","getItem","setItem","removeItem","getColorScheme","element","style","styleOf","getPropertyValue","args","setProperty","Error","length","removeColorScheme","removeProperty","document","documentElement"],"mappings":"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"}
+{"version":3,"file":"color-scheme.js","sources":["../src/color-scheme.ts"],"sourcesContent":["import { waitForPromise } from '@ember/test-waiters';\n\nimport { cell } from 'ember-resources';\n\nconst _colorScheme = cell<string | undefined>();\n\nlet callbacks: Set<(colorScheme: string) => void> = new Set();\n\nasync function runCallbacks(theme: string) {\n  await Promise.resolve();\n\n  for (const callback of callbacks.values()) {\n    callback(theme);\n  }\n}\n\n/**\n * Object for managing the color scheme\n */\nexport const colorScheme = {\n  /**\n   * Set's the current color scheme to the passed value\n   */\n  update: (value: string) => {\n    colorScheme.current = value;\n\n    void waitForPromise(runCallbacks(value));\n  },\n\n  on: {\n    /**\n     * register a function to be called when the color scheme changes.\n     */\n    update: (callback: (colorScheme: string) => void) => {\n      callbacks.add(callback);\n    },\n  },\n  off: {\n    /**\n     * unregister a function that would have been called when the color scheme changes.\n     */\n    update: (callback: (colorScheme: string) => void) => {\n      callbacks.delete(callback);\n    },\n  },\n\n  /**\n   * the current valuel of the \"color scheme\"\n   */\n  get current(): string | undefined {\n    return _colorScheme.current;\n  },\n  set current(value: string | undefined) {\n    _colorScheme.current = value;\n\n    if (!value) {\n      localPreference.delete();\n\n      return;\n    }\n\n    localPreference.update(value);\n    setColorScheme(value);\n  },\n\n  get isDark() {\n    return _colorScheme.current === 'dark';\n  },\n  get isLight() {\n    return _colorScheme.current !== 'dark';\n  },\n};\n\n/**\n * Synchronizes state of `colorScheme` with the users preferences as well as reconciles with previously set theme in local storage.\n *\n * This may only be called once per app.\n */\nexport function sync() {\n  /**\n   * reset the callbacks\n   */\n  callbacks = new Set();\n\n  /**\n   * If local prefs are set, then we don't care what prefers-color-scheme is\n   */\n  const userPreference = localPreference.read();\n\n  if (userPreference) {\n    setColorScheme(userPreference);\n    _colorScheme.current = userPreference;\n\n    return;\n  }\n\n  if (prefers.dark()) {\n    setColorScheme('dark');\n    _colorScheme.current = 'dark';\n  } else if (prefers.light()) {\n    setColorScheme('light');\n    _colorScheme.current = 'light';\n  }\n}\n\nconst queries = {\n  dark: window.matchMedia('(prefers-color-scheme: dark)'),\n  light: window.matchMedia('(prefers-color-scheme: light)'),\n  none: window.matchMedia('(prefers-color-scheme: no-preference)'),\n};\n\nqueries.dark.addEventListener('change', (e) => {\n  const mode = e.matches ? 'dark' : 'light';\n\n  colorScheme.update(mode);\n});\n\n/**\n * Helper methods to determining what the user's preferred color scheme is\n * based on the system preferences rather than the users explicit preference.\n */\nexport const prefers = {\n  dark: () => queries.dark.matches,\n  light: () => queries.light.matches,\n  none: () => queries.none.matches,\n  custom: (name: string) => window.matchMedia(`(prefers-color-scheme: ${name})`).matches,\n};\n\nconst LOCAL_PREF_KEY = 'ember-primitives/color-scheme#local-preference';\n\n/**\n * Helper methods for working with the color scheme preference in local storage\n */\nexport const localPreference = {\n  isSet: () => Boolean(localPreference.read()),\n  read: () => localStorage.getItem(LOCAL_PREF_KEY),\n  update: (value: string) => localStorage.setItem(LOCAL_PREF_KEY, value),\n  delete: () => localStorage.removeItem(LOCAL_PREF_KEY),\n};\n\n/**\n * For the given element, returns the `color-scheme` of that element.\n */\nexport function getColorScheme(element?: HTMLElement) {\n  const style = styleOf(element);\n\n  return style.getPropertyValue('color-scheme');\n}\n\nexport function setColorScheme(element: HTMLElement, value: string): void;\nexport function setColorScheme(value: string): void;\n\nexport function setColorScheme(...args: [string] | [HTMLElement, string]): void {\n  if (typeof args[0] === 'string') {\n    styleOf().setProperty('color-scheme', args[0]);\n\n    return;\n  }\n\n  if (typeof args[1] === 'string') {\n    styleOf(args[0]).setProperty('color-scheme', args[1]);\n\n    return;\n  }\n\n  throw new Error(`Invalid arity, expected up to 2 args, received ${args.length}`);\n}\n\n/**\n * Removes the `color-scheme` from the given element\n */\nexport function removeColorScheme(element?: HTMLElement) {\n  const style = styleOf(element);\n\n  style.removeProperty('color-scheme');\n}\n\nfunction styleOf(element?: HTMLElement) {\n  if (element) {\n    return element.style;\n  }\n\n  return document.documentElement.style;\n}\n\nsync();\n"],"names":["_colorScheme","cell","callbacks","Set","runCallbacks","theme","Promise","resolve","callback","values","colorScheme","update","value","current","waitForPromise","on","add","off","delete","localPreference","setColorScheme","isDark","isLight","sync","userPreference","read","prefers","dark","light","queries","window","matchMedia","none","addEventListener","e","mode","matches","custom","name","LOCAL_PREF_KEY","isSet","Boolean","localStorage","getItem","setItem","removeItem","getColorScheme","element","style","styleOf","getPropertyValue","args","setProperty","Error","length","removeColorScheme","removeProperty","document","documentElement"],"mappings":"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"}

package/dist/components/breadcrumb.js

@@ -0,0 +1,45 @@
+import { hash } from '@ember/helper';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+
+const Separator = setComponentTemplate(precompileTemplate("<span aria-hidden=\"true\" ...attributes>\n  {{yield}}\n</span>", {
+  strictMode: true
+}), templateOnly());
+/**
+ * A breadcrumb navigation component that displays the current page's location within a navigational hierarchy.
+ *
+ * Breadcrumbs help users understand their current location and provide a way to navigate back through the hierarchy.
+ *
+ * For example:
+ *
+ * ```gjs live preview
+ * import { Breadcrumb } from 'ember-primitives';
+ *
+ * <template>
+ *   <Breadcrumb as |b|>
+ *     <li>
+ *       <a href="/">Home</a>
+ *     </li>
+ *     <b.Separator>/</b.Separator>
+ *     <li>
+ *       <a href="/docs">Docs</a>
+ *     </li>
+ *     <b.Separator>/</b.Separator>
+ *     <li aria-current="page">
+ *       Breadcrumb
+ *     </li>
+ *   </Breadcrumb>
+ * </template>
+ * ```
+ */
+const Breadcrumb = setComponentTemplate(precompileTemplate("<nav aria-label={{if @label @label \"Breadcrumb\"}} ...attributes>\n  <ol>\n    {{yield (hash Separator=Separator)}}\n  </ol>\n</nav>", {
+  strictMode: true,
+  scope: () => ({
+    hash,
+    Separator
+  })
+}), templateOnly());
+
+export { Breadcrumb, Breadcrumb as default };
+//# sourceMappingURL=breadcrumb.js.map

package/dist/components/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","sources":["../../src/components/breadcrumb.gts"],"sourcesContent":["import { hash } from \"@ember/helper\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\nconst Separator: TOC<{\n  Element: HTMLSpanElement;\n  Blocks: {\n    default: [];\n  };\n}> = <template>\n  <span aria-hidden=\"true\" ...attributes>\n    {{yield}}\n  </span>\n</template>;\n\nexport interface Signature {\n  Element: HTMLElement;\n  Args: {\n    /**\n     * The accessible label for the breadcrumb navigation.\n     * Defaults to \"Breadcrumb\"\n     */\n    label?: string;\n  };\n  Blocks: {\n    default: [\n      {\n        /**\n         * A separator component to place between breadcrumb items.\n         * Typically renders as \"/\" or \">\" with aria-hidden=\"true\".\n         */\n        Separator: typeof Separator;\n      },\n    ];\n  };\n}\n\n/**\n * A breadcrumb navigation component that displays the current page's location within a navigational hierarchy.\n *\n * Breadcrumbs help users understand their current location and provide a way to navigate back through the hierarchy.\n *\n * For example:\n *\n * ```gjs live preview\n * import { Breadcrumb } from 'ember-primitives';\n *\n * <template>\n *   <Breadcrumb as |b|>\n *     <li>\n *       <a href=\"/\">Home</a>\n *     </li>\n *     <b.Separator>/</b.Separator>\n *     <li>\n *       <a href=\"/docs\">Docs</a>\n *     </li>\n *     <b.Separator>/</b.Separator>\n *     <li aria-current=\"page\">\n *       Breadcrumb\n *     </li>\n *   </Breadcrumb>\n * </template>\n * ```\n */\nexport const Breadcrumb: TOC<Signature> = <template>\n  <nav aria-label={{if @label @label \"Breadcrumb\"}} ...attributes>\n    <ol>\n      {{yield (hash Separator=Separator)}}\n    </ol>\n  </nav>\n</template>;\n\nexport default Breadcrumb;\n"],"names":["Separator","setComponentTemplate","precompileTemplate","strictMode","templateOnly","Breadcrumb","scope","hash"],"mappings":";;;;;AAIA,MAAMA,SAKD,GAAAC,oBAAA,CAAAC,kBAAA,CAAA,iEAAA,EAIL;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA,CAAA;AAwBV;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BC;MACYC,UAAgB,GAAAJ,oBAAA,CAAaC,kBAAA,CAAA,uIAAA,EAM1C;EAAAC,UAAA,EAAA,IAAA;AAAAG,EAAAA,KAAA,EAAAA,OAAA;IAAAC,IAAA;AAAAP,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAI,YAAA,EAAA;;;;"}

package/dist/components/drawer.js

@@ -0,0 +1,123 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { assert } from '@ember/debug';
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { modifier } from 'ember-modifier';
+import { localCopy } from 'tracked-toolbox';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+import { g, i } from 'decorator-transforms/runtime';
+
+const DrawerElement = setComponentTemplate(precompileTemplate("<dialog ...attributes open={{@open}} {{on \"close\" @onClose}} {{@register}}>\n  {{yield}}\n</dialog>", {
+  strictMode: true,
+  scope: () => ({
+    on
+  })
+}), templateOnly());
+class DrawerDialog extends Component {
+  static {
+    setComponentTemplate(precompileTemplate("{{yield (hash isOpen=this.isOpen open=this.open close=this.close focusOnClose=this.refocus Drawer=(component DrawerElement open=@open onClose=this.handleClose register=this.register))}}", {
+      strictMode: true,
+      scope: () => ({
+        hash,
+        DrawerElement
+      })
+    }), this);
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  static {
+    g(this.prototype, "_isOpen", [localCopy("args.open")]);
+  }
+  #_isOpen = (i(this, "_isOpen"), void 0);
+  get isOpen() {
+    /**
+    * Always fallback to false (closed)
+    */
+    return this._isOpen ?? false;
+  }
+  set isOpen(val) {
+    this._isOpen = val;
+  }
+  #lastIsOpen = false;
+  refocus = modifier(element => {
+    assert(`focusOnClose is only valid on a HTMLElement`, element instanceof HTMLElement);
+    if (!this.isOpen && this.#lastIsOpen) {
+      element.focus();
+    }
+    this.#lastIsOpen = this.isOpen;
+  });
+  static {
+    g(this.prototype, "drawerElement", [tracked]);
+  }
+  #drawerElement = (i(this, "drawerElement"), void 0);
+  register = modifier(element => {
+    /**
+    * This is very sad.
+    *
+    * But we need the element to be 'root state'
+    * so that when we read things like "isOpen",
+    * when the drawer is finally rendered, all the
+    * downstream properties render.
+    *
+    * This has to be an async / delayed a bit, so that
+    * the tracking frame can exit, and we don't infinite loop
+    */
+    void (async () => {
+      await Promise.resolve();
+      this.drawerElement = element;
+    })();
+  });
+  /**
+  * Closes the drawer -- this will throw an error in development if the drawer element was not rendered
+  */
+  close = () => {
+    assert("Cannot call `close` on <Drawer> without rendering the drawer element.", this.drawerElement);
+    /**
+    * If the element is already closed, don't run all this again
+    */
+    if (!this.drawerElement.hasAttribute("open")) {
+      return;
+    }
+    /**
+    * removes the `open` attribute
+    * handleClose will be called because the drawer has bound the `close` event.
+    */
+    this.drawerElement.close();
+  };
+  /**
+  * @internal
+  *
+  * handles the <dialog> element's native close behavior.
+  * listened to via addEventListener('close', ...);
+  */
+  handleClose = () => {
+    assert("Cannot call `handleClose` on <Drawer> without rendering the drawer element. This is likely a bug in ember-primitives. Please open an issue <3", this.drawerElement);
+    this.isOpen = false;
+    this.args.onClose?.(this.drawerElement.returnValue);
+    // the return value ends up staying... which is annoying
+    this.drawerElement.returnValue = "";
+  };
+  /**
+  * Opens the drawer -- this will throw an error in development if the drawer element was not rendered
+  */
+  open = () => {
+    assert("Cannot call `open` on <Drawer> without rendering the drawer element.", this.drawerElement);
+    /**
+    * If the element is already open, don't run all this again
+    */
+    if (this.drawerElement.hasAttribute("open")) {
+      return;
+    }
+    /**
+    * adds the `open` attribute
+    */
+    this.drawerElement.showModal();
+    this.isOpen = true;
+  };
+}
+const Drawer = DrawerDialog;
+
+export { Drawer, DrawerDialog as default };
+//# sourceMappingURL=drawer.js.map

package/dist/components/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","sources":["../../src/components/drawer.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { tracked } from \"@glimmer/tracking\";\nimport { assert } from \"@ember/debug\";\nimport { hash } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\n\nimport { modifier as eModifier } from \"ember-modifier\";\n// temp\n//  https://github.com/tracked-tools/tracked-toolbox/issues/38\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-expect-error\nimport { localCopy } from \"tracked-toolbox\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { ModifierLike, WithBoundArgs } from \"@glint/template\";\n\nconst DrawerElement: TOC<{\n  Element: HTMLDialogElement;\n  Args: {\n    /**\n     * @internal\n     */\n    open: boolean | undefined;\n    /**\n     * @internal\n     */\n    onClose: () => void;\n\n    /**\n     * @internal\n     */\n    register: ModifierLike<{ Element: HTMLDialogElement }>;\n  };\n  Blocks: { default: [] };\n}> = <template>\n  <dialog ...attributes open={{@open}} {{on \"close\" @onClose}} {{@register}}>\n    {{yield}}\n  </dialog>\n</template>;\n\nexport interface Signature {\n  Args: {\n    /**\n     * Optionally set the open state of the drawer\n     * The state will still be managed internally,\n     * so this does not need to be a maintained value, but whenever it changes,\n     * the drawer element will reflect that change accordingly.\n     */\n    open?: boolean;\n    /**\n     * When the drawer is closed, this function will be called\n     * and the drawer's `returnValue` will be passed.\n     *\n     * This can be used to determine which button was clicked to close the drawer\n     *\n     * Note though that this value is only populated when using\n     * `<form method='dialog'>`\n     */\n    onClose?: (returnValue: string) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        /**\n         * Represents the open state of the drawer element.\n         */\n        isOpen: boolean;\n\n        /**\n         * Closes the drawer element\n         * Will throw an error if `Drawer` is not rendered.\n         */\n        close: () => void;\n\n        /**\n         * Opens the drawer element.\n         * Will throw an error if `Drawer` is not rendered.\n         */\n        open: () => void;\n\n        /**\n         * This modifier should be applied to the button that opens the Drawer so that it can be re-focused when the drawer closes.\n         *\n         * Example:\n         *\n         * ```gjs\n         * <template>\n         *   <Drawer as |d|>\n         *     <button {{d.focusOnClose}} {{on \"click\" d.open}}>Open</button>\n         *\n         *     <d.Drawer>...</d.Drawer>\n         *   </Drawer>\n         * </template>\n         * ```\n         */\n        focusOnClose: ModifierLike<{ Element: HTMLElement }>;\n\n        /**\n         * This is the `<dialog>` element (with some defaults pre-wired).\n         * This is required to be rendered.\n         */\n        Drawer: WithBoundArgs<typeof DrawerElement, \"onClose\" | \"register\" | \"open\">;\n      },\n    ];\n  };\n}\n\nclass DrawerDialog extends Component<Signature> {\n  <template>\n    {{yield\n      (hash\n        isOpen=this.isOpen\n        open=this.open\n        close=this.close\n        focusOnClose=this.refocus\n        Drawer=(component DrawerElement open=@open onClose=this.handleClose register=this.register)\n      )\n    }}\n  </template>\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n  @localCopy(\"args.open\") declare _isOpen: boolean;\n\n  get isOpen() {\n    /**\n     * Always fallback to false (closed)\n     */\n    return this._isOpen ?? false;\n  }\n  set isOpen(val: boolean) {\n    this._isOpen = val;\n  }\n\n  #lastIsOpen = false;\n  refocus = eModifier((element) => {\n    assert(`focusOnClose is only valid on a HTMLElement`, element instanceof HTMLElement);\n\n    if (!this.isOpen && this.#lastIsOpen) {\n      element.focus();\n    }\n\n    this.#lastIsOpen = this.isOpen;\n  });\n\n  @tracked declare drawerElement: HTMLDialogElement | undefined;\n\n  register = eModifier((element: HTMLDialogElement) => {\n    /**\n     * This is very sad.\n     *\n     * But we need the element to be 'root state'\n     * so that when we read things like \"isOpen\",\n     * when the drawer is finally rendered, all the\n     * downstream properties render.\n     *\n     * This has to be an async / delayed a bit, so that\n     * the tracking frame can exit, and we don't infinite loop\n     */\n    void (async () => {\n      await Promise.resolve();\n\n      this.drawerElement = element;\n    })();\n  });\n\n  /**\n   * Closes the drawer -- this will throw an error in development if the drawer element was not rendered\n   */\n  close = () => {\n    assert(\n      \"Cannot call `close` on <Drawer> without rendering the drawer element.\",\n      this.drawerElement,\n    );\n\n    /**\n     * If the element is already closed, don't run all this again\n     */\n    if (!this.drawerElement.hasAttribute(\"open\")) {\n      return;\n    }\n\n    /**\n     * removes the `open` attribute\n     * handleClose will be called because the drawer has bound the `close` event.\n     */\n    this.drawerElement.close();\n  };\n\n  /**\n   * @internal\n   *\n   * handles the <dialog> element's native close behavior.\n   * listened to via addEventListener('close', ...);\n   */\n  handleClose = () => {\n    assert(\n      \"Cannot call `handleClose` on <Drawer> without rendering the drawer element. This is likely a bug in ember-primitives. Please open an issue <3\",\n      this.drawerElement,\n    );\n\n    this.isOpen = false;\n    this.args.onClose?.(this.drawerElement.returnValue);\n    // the return value ends up staying... which is annoying\n    this.drawerElement.returnValue = \"\";\n  };\n\n  /**\n   * Opens the drawer -- this will throw an error in development if the drawer element was not rendered\n   */\n  open = () => {\n    assert(\n      \"Cannot call `open` on <Drawer> without rendering the drawer element.\",\n      this.drawerElement,\n    );\n\n    /**\n     * If the element is already open, don't run all this again\n     */\n    if (this.drawerElement.hasAttribute(\"open\")) {\n      return;\n    }\n\n    /**\n     * adds the `open` attribute\n     */\n    this.drawerElement.showModal();\n    this.isOpen = true;\n  };\n}\n\nexport const Drawer = DrawerDialog;\n\nexport default DrawerDialog;\n"],"names":["DrawerElement","setComponentTemplate","precompileTemplate","strictMode","scope","on","templateOnly","DrawerDialog","Component","hash","g","prototype","localCopy","i","isOpen","_isOpen","val","refocus","eModifier","element","assert","HTMLElement","focus","tracked","register","Promise","resolve","drawerElement","close","hasAttribute","handleClose","args","onClose","returnValue","open","showModal","Drawer"],"mappings":"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"}

package/dist/index.js

@@ -1,7 +1,9 @@
 import { macroCondition, isDevelopingApp, importSync } from '@embroider/macros';
 export { Accordion } from './components/accordion.js';
 export { Avatar } from './components/avatar.js';
+export { Breadcrumb } from './components/breadcrumb.js';
 export { Dialog, Dialog as Modal } from './components/dialog.js';
+export { Drawer } from './components/drawer.js';
 export { ExternalLink } from './components/external-link.js';
 export { Form } from './components/form.js';
 export { Key, KeyCombo } from './components/keys.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * DANGER: this is a *barrel file*\n *\n * It forces the whole library to be loaded and all dependencies.\n *\n * If you have a small app, you probably don't want to import from here -- instead import from each sub-path.\n */\nimport { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';\n\nif (macroCondition(isDevelopingApp())) {\n  importSync('./components/violations.css');\n}\n\nexport { Accordion } from './components/accordion.gts';\nexport type {\n  AccordionContentExternalSignature,\n  AccordionHeaderExternalSignature,\n  AccordionItemExternalSignature,\n  AccordionTriggerExternalSignature,\n} from './components/accordion/public.ts';\nexport { Avatar } from './components/avatar.gts';\nexport { Dialog, Dialog as Modal } from './components/dialog.gts';\nexport { ExternalLink } from './components/external-link.gts';\nexport { Form } from './components/form.gts';\nexport { Key, KeyCombo } from './components/keys.gts';\nexport { StickyFooter } from './components/layout/sticky-footer.gts';\nexport { Link } from './components/link.gts';\nexport { Menu } from './components/menu.gts';\nexport { OTP, OTPInput } from './components/one-time-password.gts';\nexport { Popover } from './components/popover.gts';\nexport { Portal } from './components/portal.gts';\nexport { PortalTargets } from './components/portal-targets.gts';\nexport { TARGETS as PORTALS } from './components/portal-targets.gts';\nexport { Progress } from './components/progress.gts';\nexport { Rating } from './components/rating.gts';\nexport { Scroller } from './components/scroller.gts';\nexport { Shadowed } from './components/shadowed.gts';\nexport { Switch } from './components/switch.gts';\nexport { Toggle } from './components/toggle.gts';\nexport { ToggleGroup } from './components/toggle-group.gts';\nexport { VisuallyHidden } from './components/visually-hidden.gts';\nexport { Zoetrope } from './components/zoetrope.ts';\nexport * from './helpers.ts';\n"],"names":["macroCondition","isDevelopingApp","importSync"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,IAAIA,cAAc,CAACC,eAAe,EAAE,CAAC,EAAE;EACrCC,UAAU,CAAC,6BAA6B,CAAC;AAC3C"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * DANGER: this is a *barrel file*\n *\n * It forces the whole library to be loaded and all dependencies.\n *\n * If you have a small app, you probably don't want to import from here -- instead import from each sub-path.\n */\nimport { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';\n\nif (macroCondition(isDevelopingApp())) {\n  importSync('./components/violations.css');\n}\n\nexport { Accordion } from './components/accordion.gts';\nexport type {\n  AccordionContentExternalSignature,\n  AccordionHeaderExternalSignature,\n  AccordionItemExternalSignature,\n  AccordionTriggerExternalSignature,\n} from './components/accordion/public.ts';\nexport { Avatar } from './components/avatar.gts';\nexport { Breadcrumb } from './components/breadcrumb.gts';\nexport { Dialog, Dialog as Modal } from './components/dialog.gts';\nexport { Drawer } from './components/drawer.gts';\nexport { ExternalLink } from './components/external-link.gts';\nexport { Form } from './components/form.gts';\nexport { Key, KeyCombo } from './components/keys.gts';\nexport { StickyFooter } from './components/layout/sticky-footer.gts';\nexport { Link } from './components/link.gts';\nexport { Menu } from './components/menu.gts';\nexport { OTP, OTPInput } from './components/one-time-password.gts';\nexport { Popover } from './components/popover.gts';\nexport { Portal } from './components/portal.gts';\nexport { PortalTargets } from './components/portal-targets.gts';\nexport { TARGETS as PORTALS } from './components/portal-targets.gts';\nexport { Progress } from './components/progress.gts';\nexport { Rating } from './components/rating.gts';\nexport { Scroller } from './components/scroller.gts';\nexport { Shadowed } from './components/shadowed.gts';\nexport { Switch } from './components/switch.gts';\nexport { Toggle } from './components/toggle.gts';\nexport { ToggleGroup } from './components/toggle-group.gts';\nexport { VisuallyHidden } from './components/visually-hidden.gts';\nexport { Zoetrope } from './components/zoetrope.ts';\nexport * from './helpers.ts';\n"],"names":["macroCondition","isDevelopingApp","importSync"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,IAAIA,cAAc,CAACC,eAAe,EAAE,CAAC,EAAE;EACrCC,UAAU,CAAC,6BAA6B,CAAC;AAC3C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-primitives",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "description": "Making apps easier to build",
   "keywords": [
     "ember-addon"
@@ -17,19 +17,19 @@
   ],
   "bin": "./bin/index.mjs",
   "dependencies": {
-    "@babel/runtime": "^7.27.1",
-    "@embroider/addon-shim": "^1.10.0",
+    "@babel/runtime": "^7.28.4",
+    "@embroider/addon-shim": "^1.10.2",
     "@embroider/macros": "^1.19.6",
     "@floating-ui/dom": "^1.7.0",
     "decorator-transforms": "^2.3.0",
-    "ember-element-helper": ">= 0.8.6",
+    "ember-element-helper": "^0.8.8",
     "form-data-utils": "^0.6.0",
-    "reactiveweb": "^1.8.0",
+    "reactiveweb": "^1.9.1",
     "should-handle-link": "^1.2.2",
     "tabster": "^8.7.0",
     "tracked-built-ins": "^4.1.0",
     "tracked-toolbox": "^2.0.0",
-    "which-heading-do-i-need": "0.2.3"
+    "which-heading-do-i-need": "0.2.4"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.0",
@@ -58,7 +58,7 @@
     "concurrently": "^9.2.1",
     "ember-modifier": "^4.2.2",
     "ember-resources": "^7.0.7",
-    "ember-source": "6.9.0",
+    "ember-source": "^6.9.0",
     "ember-template-lint": "^7.9.3",
     "eslint": "^9.39.2",
     "execa": "^9.6.0",
@@ -66,7 +66,7 @@
     "prettier": "^3.7.4",
     "prettier-plugin-ember-template-tag": "^2.1.2",
     "publint": "^0.3.16",
-    "rollup": "~4.54.0",
+    "rollup": "^4.54.0",
     "rollup-plugin-copy": "^3.5.0",
     "typescript": "^5.9.3"
   },
@@ -144,6 +144,7 @@
     "lint:types": "ember-tsc --noEmit --declaration false --declarationMap false --emitDeclarationOnly false",
     "pack": "pnpm pack",
     "start": "rollup --config --watch",
+    "dev": "rollup --config --watch --no-watch.clearScreen",
     "test": "echo 'A v2 addon does not have tests, run tests in test-app'"
   }
 }

package/src/color-scheme.ts

@@ -62,6 +62,13 @@ export const colorScheme = {
     localPreference.update(value);
     setColorScheme(value);
   },
+
+  get isDark() {
+    return _colorScheme.current === 'dark';
+  },
+  get isLight() {
+    return _colorScheme.current !== 'dark';
+  },
 };
 
 /**
@@ -96,15 +103,27 @@ export function sync() {
   }
 }
 
+const queries = {
+  dark: window.matchMedia('(prefers-color-scheme: dark)'),
+  light: window.matchMedia('(prefers-color-scheme: light)'),
+  none: window.matchMedia('(prefers-color-scheme: no-preference)'),
+};
+
+queries.dark.addEventListener('change', (e) => {
+  const mode = e.matches ? 'dark' : 'light';
+
+  colorScheme.update(mode);
+});
+
 /**
  * Helper methods to determining what the user's preferred color scheme is
  * based on the system preferences rather than the users explicit preference.
  */
 export const prefers = {
-  dark: () => window.matchMedia('(prefers-color-scheme: dark)').matches,
-  light: () => window.matchMedia('(prefers-color-scheme: light)').matches,
+  dark: () => queries.dark.matches,
+  light: () => queries.light.matches,
+  none: () => queries.none.matches,
   custom: (name: string) => window.matchMedia(`(prefers-color-scheme: ${name})`).matches,
-  none: () => window.matchMedia('(prefers-color-scheme: no-preference)').matches,
 };
 
 const LOCAL_PREF_KEY = 'ember-primitives/color-scheme#local-preference';
@@ -163,3 +182,5 @@ function styleOf(element?: HTMLElement) {
 
   return document.documentElement.style;
 }
+
+sync();

package/src/components/breadcrumb.gts

@@ -0,0 +1,73 @@
+import { hash } from "@ember/helper";
+
+import type { TOC } from "@ember/component/template-only";
+
+const Separator: TOC<{
+  Element: HTMLSpanElement;
+  Blocks: {
+    default: [];
+  };
+}> = <template>
+  <span aria-hidden="true" ...attributes>
+    {{yield}}
+  </span>
+</template>;
+
+export interface Signature {
+  Element: HTMLElement;
+  Args: {
+    /**
+     * The accessible label for the breadcrumb navigation.
+     * Defaults to "Breadcrumb"
+     */
+    label?: string;
+  };
+  Blocks: {
+    default: [
+      {
+        /**
+         * A separator component to place between breadcrumb items.
+         * Typically renders as "/" or ">" with aria-hidden="true".
+         */
+        Separator: typeof Separator;
+      },
+    ];
+  };
+}
+
+/**
+ * A breadcrumb navigation component that displays the current page's location within a navigational hierarchy.
+ *
+ * Breadcrumbs help users understand their current location and provide a way to navigate back through the hierarchy.
+ *
+ * For example:
+ *
+ * ```gjs live preview
+ * import { Breadcrumb } from 'ember-primitives';
+ *
+ * <template>
+ *   <Breadcrumb as |b|>
+ *     <li>
+ *       <a href="/">Home</a>
+ *     </li>
+ *     <b.Separator>/</b.Separator>
+ *     <li>
+ *       <a href="/docs">Docs</a>
+ *     </li>
+ *     <b.Separator>/</b.Separator>
+ *     <li aria-current="page">
+ *       Breadcrumb
+ *     </li>
+ *   </Breadcrumb>
+ * </template>
+ * ```
+ */
+export const Breadcrumb: TOC<Signature> = <template>
+  <nav aria-label={{if @label @label "Breadcrumb"}} ...attributes>
+    <ol>
+      {{yield (hash Separator=Separator)}}
+    </ol>
+  </nav>
+</template>;
+
+export default Breadcrumb;

package/src/components/drawer.gts

@@ -0,0 +1,233 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { assert } from "@ember/debug";
+import { hash } from "@ember/helper";
+import { on } from "@ember/modifier";
+
+import { modifier as eModifier } from "ember-modifier";
+// temp
+//  https://github.com/tracked-tools/tracked-toolbox/issues/38
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+import { localCopy } from "tracked-toolbox";
+
+import type { TOC } from "@ember/component/template-only";
+import type { ModifierLike, WithBoundArgs } from "@glint/template";
+
+const DrawerElement: TOC<{
+  Element: HTMLDialogElement;
+  Args: {
+    /**
+     * @internal
+     */
+    open: boolean | undefined;
+    /**
+     * @internal
+     */
+    onClose: () => void;
+
+    /**
+     * @internal
+     */
+    register: ModifierLike<{ Element: HTMLDialogElement }>;
+  };
+  Blocks: { default: [] };
+}> = <template>
+  <dialog ...attributes open={{@open}} {{on "close" @onClose}} {{@register}}>
+    {{yield}}
+  </dialog>
+</template>;
+
+export interface Signature {
+  Args: {
+    /**
+     * Optionally set the open state of the drawer
+     * The state will still be managed internally,
+     * so this does not need to be a maintained value, but whenever it changes,
+     * the drawer element will reflect that change accordingly.
+     */
+    open?: boolean;
+    /**
+     * When the drawer is closed, this function will be called
+     * and the drawer's `returnValue` will be passed.
+     *
+     * This can be used to determine which button was clicked to close the drawer
+     *
+     * Note though that this value is only populated when using
+     * `<form method='dialog'>`
+     */
+    onClose?: (returnValue: string) => void;
+  };
+  Blocks: {
+    default: [
+      {
+        /**
+         * Represents the open state of the drawer element.
+         */
+        isOpen: boolean;
+
+        /**
+         * Closes the drawer element
+         * Will throw an error if `Drawer` is not rendered.
+         */
+        close: () => void;
+
+        /**
+         * Opens the drawer element.
+         * Will throw an error if `Drawer` is not rendered.
+         */
+        open: () => void;
+
+        /**
+         * This modifier should be applied to the button that opens the Drawer so that it can be re-focused when the drawer closes.
+         *
+         * Example:
+         *
+         * ```gjs
+         * <template>
+         *   <Drawer as |d|>
+         *     <button {{d.focusOnClose}} {{on "click" d.open}}>Open</button>
+         *
+         *     <d.Drawer>...</d.Drawer>
+         *   </Drawer>
+         * </template>
+         * ```
+         */
+        focusOnClose: ModifierLike<{ Element: HTMLElement }>;
+
+        /**
+         * This is the `<dialog>` element (with some defaults pre-wired).
+         * This is required to be rendered.
+         */
+        Drawer: WithBoundArgs<typeof DrawerElement, "onClose" | "register" | "open">;
+      },
+    ];
+  };
+}
+
+class DrawerDialog extends Component<Signature> {
+  <template>
+    {{yield
+      (hash
+        isOpen=this.isOpen
+        open=this.open
+        close=this.close
+        focusOnClose=this.refocus
+        Drawer=(component DrawerElement open=@open onClose=this.handleClose register=this.register)
+      )
+    }}
+  </template>
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  @localCopy("args.open") declare _isOpen: boolean;
+
+  get isOpen() {
+    /**
+     * Always fallback to false (closed)
+     */
+    return this._isOpen ?? false;
+  }
+  set isOpen(val: boolean) {
+    this._isOpen = val;
+  }
+
+  #lastIsOpen = false;
+  refocus = eModifier((element) => {
+    assert(`focusOnClose is only valid on a HTMLElement`, element instanceof HTMLElement);
+
+    if (!this.isOpen && this.#lastIsOpen) {
+      element.focus();
+    }
+
+    this.#lastIsOpen = this.isOpen;
+  });
+
+  @tracked declare drawerElement: HTMLDialogElement | undefined;
+
+  register = eModifier((element: HTMLDialogElement) => {
+    /**
+     * This is very sad.
+     *
+     * But we need the element to be 'root state'
+     * so that when we read things like "isOpen",
+     * when the drawer is finally rendered, all the
+     * downstream properties render.
+     *
+     * This has to be an async / delayed a bit, so that
+     * the tracking frame can exit, and we don't infinite loop
+     */
+    void (async () => {
+      await Promise.resolve();
+
+      this.drawerElement = element;
+    })();
+  });
+
+  /**
+   * Closes the drawer -- this will throw an error in development if the drawer element was not rendered
+   */
+  close = () => {
+    assert(
+      "Cannot call `close` on <Drawer> without rendering the drawer element.",
+      this.drawerElement,
+    );
+
+    /**
+     * If the element is already closed, don't run all this again
+     */
+    if (!this.drawerElement.hasAttribute("open")) {
+      return;
+    }
+
+    /**
+     * removes the `open` attribute
+     * handleClose will be called because the drawer has bound the `close` event.
+     */
+    this.drawerElement.close();
+  };
+
+  /**
+   * @internal
+   *
+   * handles the <dialog> element's native close behavior.
+   * listened to via addEventListener('close', ...);
+   */
+  handleClose = () => {
+    assert(
+      "Cannot call `handleClose` on <Drawer> without rendering the drawer element. This is likely a bug in ember-primitives. Please open an issue <3",
+      this.drawerElement,
+    );
+
+    this.isOpen = false;
+    this.args.onClose?.(this.drawerElement.returnValue);
+    // the return value ends up staying... which is annoying
+    this.drawerElement.returnValue = "";
+  };
+
+  /**
+   * Opens the drawer -- this will throw an error in development if the drawer element was not rendered
+   */
+  open = () => {
+    assert(
+      "Cannot call `open` on <Drawer> without rendering the drawer element.",
+      this.drawerElement,
+    );
+
+    /**
+     * If the element is already open, don't run all this again
+     */
+    if (this.drawerElement.hasAttribute("open")) {
+      return;
+    }
+
+    /**
+     * adds the `open` attribute
+     */
+    this.drawerElement.showModal();
+    this.isOpen = true;
+  };
+}
+
+export const Drawer = DrawerDialog;
+
+export default DrawerDialog;

package/src/index.ts

@@ -19,7 +19,9 @@ export type {
   AccordionTriggerExternalSignature,
 } from './components/accordion/public.ts';
 export { Avatar } from './components/avatar.gts';
+export { Breadcrumb } from './components/breadcrumb.gts';
 export { Dialog, Dialog as Modal } from './components/dialog.gts';
+export { Drawer } from './components/drawer.gts';
 export { ExternalLink } from './components/external-link.gts';
 export { Form } from './components/form.gts';
 export { Key, KeyCombo } from './components/keys.gts';