ember-primitives 0.51.0 → 0.53.0

package/declarations/components/-private/utils.d.ts

@@ -2,5 +2,5 @@
  * If the user provides an onChange or similar function, use that,
  * otherwise fallback to the uncontrolled toggle
  */
-export declare function toggleWithFallback(uncontrolledToggle: (...args: unknown[]) => void, controlledToggle?: (...args: any[]) => void, ...args: unknown[]): void;
+export declare function toggleWithFallback(uncontrolledToggle: undefined | ((...args: any[]) => void) | (() => void), controlledToggle?: (...args: any[]) => void, ...args: unknown[]): void;
 //# sourceMappingURL=utils.d.ts.map

package/declarations/components/-private/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/-private/utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,kBAAkB,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,EAEhD,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,EAC3C,GAAG,IAAI,EAAE,OAAO,EAAE,QAOnB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/-private/utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,kBAAkB,EAAE,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,EACzE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,EAC3C,GAAG,IAAI,EAAE,OAAO,EAAE,QAOnB"}

package/declarations/components/breadcrumb.d.ts

@@ -1,10 +1,6 @@
+import { Separator } from './separator';
 import type { TOC } from "@ember/component/template-only";
-declare const Separator: TOC<{
-    Element: HTMLSpanElement;
-    Blocks: {
-        default: [];
-    };
-}>;
+import type { WithBoundArgs } from "@glint/template";
 export interface Signature {
     Element: HTMLElement;
     Args: {
@@ -19,9 +15,10 @@ export interface Signature {
             {
                 /**
                  * A separator component to place between breadcrumb items.
-                 * Typically renders as "/" or ">" with aria-hidden="true".
+                 * Typically renders as "/" or ">" and is decorative (aria-hidden="true").
+                 * Pre-configured to render as an `<li>` element for proper HTML structure.
                  */
-                Separator: typeof Separator;
+                Separator: WithBoundArgs<typeof Separator, "as" | "decorative">;
             }
         ];
     };

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

@@ -1 +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"}
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../src/components/breadcrumb.gts"],"names":[],"mappings":"AAoEA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,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;;;;mBAIG;gBACH,SAAS,EAAE,aAAa,CAAC,OAAO,SAAS,EAAE,IAAI,GAAG,YAAY,CAAC,CAAC;aACjE;SACF,CAAC;KACH,CAAC;CACH;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,UAAU,EAAE,GAAG,CAAC,SAAS,CAiBpC,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/declarations/components/separator.d.ts

@@ -0,0 +1,62 @@
+import type { TOC } from "@ember/component/template-only";
+type Orientation = "horizontal" | "vertical";
+export interface Signature {
+    Element: HTMLElement;
+    Args: {
+        /**
+         * The tag name to use for the separator element.
+         * Defaults to `<hr>` for non-decorative separators.
+         * You can override this (e.g. `"li"` in menus, or `"span"` for inline separators).
+         *
+         * For example, in breadcrumbs where separators are siblings to `<li>` elements:
+         * ```gjs
+         * <Separator @as="li" @decorative={{true}}>/</Separator>
+         * ```
+         */
+        as?: string;
+        /**
+         * When true, hides the separator from assistive technologies.
+         *
+         * Use this for purely decorative separators, such as breadcrumb slashes.
+         */
+        decorative?: boolean;
+        /**
+         * Sets `aria-orientation`. `separator` has an implicit orientation of `horizontal`.
+         * Provide this when the separator is vertical.
+         */
+        orientation?: Orientation;
+    };
+    Blocks: {
+        default: [];
+    };
+}
+/**
+ * A separator component that follows the ARIA `separator` role guidance.
+ *
+ * By default, this component renders a semantic separator (`<hr>`). When using a
+ * non-`hr` tag via `@as`, it adds `role="separator"`.
+ *
+ * For purely decorative separators (e.g. breadcrumb slashes), set `@decorative={{true}}`
+ * to apply `aria-hidden="true"`.
+ *
+ * For example:
+ *
+ * ```gjs live preview
+ * import { Separator } from 'ember-primitives';
+ *
+ * <template>
+ *   <nav>
+ *     <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0;">
+ *       <li><a href="/">Home</a></li>
+ *       <Separator @as="li" @decorative={{true}}>/</Separator>
+ *       <li><a href="/docs">Docs</a></li>
+ *       <Separator @as="li" @decorative={{true}}>/</Separator>
+ *       <li>Current</li>
+ *     </ol>
+ *   </nav>
+ * </template>
+ * ```
+ */
+export declare const Separator: TOC<Signature>;
+export default Separator;
+//# sourceMappingURL=separator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/components/separator.gts"],"names":[],"mappings":"AA8HA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAE1D,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AA0C7C,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE;QACJ;;;;;;;;;WASG;QACH,EAAE,CAAC,EAAE,MAAM,CAAC;QAEZ;;;;WAIG;QACH,UAAU,CAAC,EAAE,OAAO,CAAC;QAErB;;;WAGG;QACH,WAAW,CAAC,EAAE,WAAW,CAAC;KAC3B,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE,EAAE,CAAC;KACb,CAAC;CACH;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,SAAS,EAAE,GAAG,CAAC,SAAS,CAmCnC,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/declarations/components/switch.d.ts

@@ -1,3 +1,4 @@
+import { cell } from "ember-resources";
 import { Label } from './-private/typed-elements';
 import type { TOC } from "@ember/component/template-only";
 import type { WithBoundArgs } from "@glint/template";
@@ -18,13 +19,27 @@ export interface Signature {
     Blocks: {
         default?: [
             {
+                /**
+                 * The current state of the Switch.
+                 *
+                 * ```gjs
+                 * import { Switch } from 'ember-primitives/components/switch';
+                 *
+                 * <template>
+                 *   <Switch as |s|>
+                 *     {{s.isChecked}}
+                 *   </Switch>
+                 * </template>
+                 * ```
+                 */
+                isChecked: boolean;
                 /**
                  * The Switch Element.
                  * It has a pre-wired `id` so that the relevant Label is
                  * appropriately associated via the `for` property of the Label.
                  *
                  * ```gjs
-                 * import { Switch } from 'ember-primitives';
+                 * import { Switch } from 'ember-primitives/components/switch';
                  *
                  * <template>
                  *   <Switch as |s|>
@@ -39,7 +54,7 @@ export interface Signature {
                  * the association to the Control by setting the `for` attribute to the `id` of the Control
                  *
                  * ```gjs
-                 * import { Switch } from 'ember-primitives';
+                 * import { Switch } from 'ember-primitive/components/switchs';
                  *
                  * <template>
                  *   <Switch as |s|>
@@ -57,7 +72,7 @@ interface ControlSignature {
     Element: HTMLInputElement;
     Args: {
         id: string;
-        checked?: boolean;
+        checked?: ReturnType<typeof cell<boolean>>;
         onChange: () => void;
     };
 }

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

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/components/switch.gts"],"names":[],"mappings":"AA6GA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAGtD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,IAAI,EAAE;QACJ;;;;WAIG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB;;WAEG;QACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;KACrD,CAAC;IACF,MAAM,EAAE;QACN,OAAO,CAAC,EAAE;YACR;gBACE;;;;;;;;;;;;;;mBAcG;gBACH,OAAO,EAAE,aAAa,CAAC,OAAO,QAAQ,EAAE,SAAS,GAAG,IAAI,GAAG,UAAU,CAAC,CAAC;gBACvE;;;;;;;;;;;;;mBAaG;gBACH,KAAK,EAAE,aAAa,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,CAAC;aAC3C;SACF,CAAC;KACH,CAAC;CACH;AAED,UAAU,gBAAgB;IACxB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CAC/D;AAED,QAAA,MAAM,QAAQ,EAAE,GAAG,CAAC,gBAAgB,CA6BlC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,MAAM,EAAE,GAAG,CAAC,SAAS,CAwBhC,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/components/switch.gts"],"names":[],"mappings":"AA6HA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGvC,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAGtD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,IAAI,EAAE;QACJ;;;;WAIG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB;;WAEG;QACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;KACrD,CAAC;IACF,MAAM,EAAE;QACN,OAAO,CAAC,EAAE;YACR;gBACE;;;;;;;;;;;;mBAYG;gBACH,SAAS,EAAE,OAAO,CAAC;gBACnB;;;;;;;;;;;;;;mBAcG;gBACH,OAAO,EAAE,aAAa,CAAC,OAAO,QAAQ,EAAE,SAAS,GAAG,IAAI,GAAG,UAAU,CAAC,CAAC;gBACvE;;;;;;;;;;;;;mBAaG;gBACH,KAAK,EAAE,aAAa,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,CAAC;aAC3C;SACF,CAAC;KACH,CAAC;CACH;AAED,UAAU,gBAAgB;IACxB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CACxF;AAED,QAAA,MAAM,QAAQ,EAAE,GAAG,CAAC,gBAAgB,CAsBlC,CAAC;AAMH;;GAEG;AACH,eAAO,MAAM,MAAM,EAAE,GAAG,CAAC,SAAS,CAgChC,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/declarations/index.d.ts

@@ -18,6 +18,7 @@ export { TARGETS as PORTALS } from './components/portal-targets';
 export { Progress } from './components/progress';
 export { Rating } from './components/rating';
 export { Scroller } from './components/scroller';
+export { Separator } from './components/separator';
 export { Shadowed } from './components/shadowed';
 export { Switch } from './components/switch';
 export { Toggle } from './components/toggle';

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,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"}
+{"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,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,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/components/breadcrumb.js

@@ -1,11 +1,9 @@
 import { hash } from '@ember/helper';
+import { Separator } from './separator.js';
 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.
  *
@@ -33,7 +31,7 @@ const Separator = setComponentTemplate(precompileTemplate("<span aria-hidden=\"t
  * </template>
  * ```
  */
-const Breadcrumb = setComponentTemplate(precompileTemplate("<nav aria-label={{if @label @label \"Breadcrumb\"}} ...attributes>\n  <ol>\n    {{yield (hash Separator=Separator)}}\n  </ol>\n</nav>", {
+const Breadcrumb = setComponentTemplate(precompileTemplate("<nav aria-label={{if @label @label \"Breadcrumb\"}} ...attributes>\n  <ol>\n    {{yield (hash Separator=(component Separator as=\"li\" decorative=true))}}\n  </ol>\n</nav>", {
   strictMode: true,
   scope: () => ({
     hash,

package/dist/components/breadcrumb.js.map

@@ -1 +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;;;;"}
+{"version":3,"file":"breadcrumb.js","sources":["../../src/components/breadcrumb.gts"],"sourcesContent":["import { hash } from \"@ember/helper\";\n\nimport { Separator } from \"./separator.gts\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { WithBoundArgs } from \"@glint/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 \">\" and is decorative (aria-hidden=\"true\").\n         * Pre-configured to render as an `<li>` element for proper HTML structure.\n         */\n        Separator: WithBoundArgs<typeof Separator, \"as\" | \"decorative\">;\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=(component Separator as=\"li\" decorative=true))}}\n    </ol>\n  </nav>\n</template>;\n\nexport default Breadcrumb;\n"],"names":["Breadcrumb","setComponentTemplate","precompileTemplate","strictMode","scope","hash","Separator","templateOnly"],"mappings":";;;;;;AA8BA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BC;MACYA,UAAgB,GAAAC,oBAAA,CAAaC,kBAAA,CAAA,6KAAA,EAM1C;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,IAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}

package/dist/components/separator.js

@@ -0,0 +1,75 @@
+import { element } from 'ember-element-helper';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+
+function normalizeTagName(tagName) {
+  return tagName.trim().toLowerCase();
+}
+function getElementTag(tagName) {
+  if (tagName) return tagName;
+  return "hr";
+}
+function roleFor(tagName, decorative) {
+  if (decorative) return undefined;
+  // <hr> already has implicit role="separator".
+  if (normalizeTagName(tagName) === "hr") return undefined;
+  return "separator";
+}
+function ariaHiddenFor(decorative) {
+  return decorative ? "true" : undefined;
+}
+function ariaOrientationFor(orientation, decorative) {
+  if (decorative) return undefined;
+  // `separator` has an implicit aria-orientation of horizontal.
+  // Only specify when authors opt in (e.g. vertical separators).
+  return orientation;
+}
+function shouldYield(decorative, tagName) {
+  // `<hr>` is a void element and must not have children.
+  if (normalizeTagName(tagName) === "hr") return false;
+  // Content inside a `separator` is presentational to AT; only yield for decorative
+  // separators so consumers don't accidentally rely on it for semantics.
+  return Boolean(decorative);
+}
+/**
+ * A separator component that follows the ARIA `separator` role guidance.
+ *
+ * By default, this component renders a semantic separator (`<hr>`). When using a
+ * non-`hr` tag via `@as`, it adds `role="separator"`.
+ *
+ * For purely decorative separators (e.g. breadcrumb slashes), set `@decorative={{true}}`
+ * to apply `aria-hidden="true"`.
+ *
+ * For example:
+ *
+ * ```gjs live preview
+ * import { Separator } from 'ember-primitives';
+ *
+ * <template>
+ *   <nav>
+ *     <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0;">
+ *       <li><a href="/">Home</a></li>
+ *       <Separator @as="li" @decorative={{true}}>/</Separator>
+ *       <li><a href="/docs">Docs</a></li>
+ *       <Separator @as="li" @decorative={{true}}>/</Separator>
+ *       <li>Current</li>
+ *     </ol>
+ *   </nav>
+ * </template>
+ * ```
+ */
+const Separator = setComponentTemplate(precompileTemplate("{{#let (getElementTag @as) as |tagName|}}\n  {{#let (element tagName) as |El|}}\n    <El aria-hidden={{ariaHiddenFor @decorative}} role={{roleFor tagName @decorative}} aria-orientation={{ariaOrientationFor @orientation @decorative}} ...attributes>\n      {{#if (shouldYield @decorative tagName)}}\n        {{yield}}\n      {{/if}}\n    </El>\n  {{/let}}\n{{/let}}", {
+  strictMode: true,
+  scope: () => ({
+    getElementTag,
+    element,
+    ariaHiddenFor,
+    roleFor,
+    ariaOrientationFor,
+    shouldYield
+  })
+}), templateOnly());
+
+export { Separator, Separator as default };
+//# sourceMappingURL=separator.js.map

package/dist/components/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","sources":["../../src/components/separator.gts"],"sourcesContent":["import { element } from \"ember-element-helper\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\n\nfunction normalizeTagName(tagName: string) {\n  return tagName.trim().toLowerCase();\n}\n\nfunction getElementTag(tagName: undefined | string) {\n  if (tagName) return tagName;\n\n  return \"hr\";\n}\n\nfunction roleFor(tagName: string, decorative: undefined | boolean) {\n  if (decorative) return undefined;\n\n  // <hr> already has implicit role=\"separator\".\n  if (normalizeTagName(tagName) === \"hr\") return undefined;\n\n  return \"separator\";\n}\n\nfunction ariaHiddenFor(decorative: undefined | boolean) {\n  return decorative ? \"true\" : undefined;\n}\n\nfunction ariaOrientationFor(orientation: undefined | Orientation, decorative: undefined | boolean) {\n  if (decorative) return undefined;\n\n  // `separator` has an implicit aria-orientation of horizontal.\n  // Only specify when authors opt in (e.g. vertical separators).\n  return orientation;\n}\n\nfunction shouldYield(decorative: undefined | boolean, tagName: string) {\n  // `<hr>` is a void element and must not have children.\n  if (normalizeTagName(tagName) === \"hr\") return false;\n\n  // Content inside a `separator` is presentational to AT; only yield for decorative\n  // separators so consumers don't accidentally rely on it for semantics.\n  return Boolean(decorative);\n}\n\nexport interface Signature {\n  Element: HTMLElement;\n  Args: {\n    /**\n     * The tag name to use for the separator element.\n     * Defaults to `<hr>` for non-decorative separators.\n     * You can override this (e.g. `\"li\"` in menus, or `\"span\"` for inline separators).\n     *\n     * For example, in breadcrumbs where separators are siblings to `<li>` elements:\n     * ```gjs\n     * <Separator @as=\"li\" @decorative={{true}}>/</Separator>\n     * ```\n     */\n    as?: string;\n\n    /**\n     * When true, hides the separator from assistive technologies.\n     *\n     * Use this for purely decorative separators, such as breadcrumb slashes.\n     */\n    decorative?: boolean;\n\n    /**\n     * Sets `aria-orientation`. `separator` has an implicit orientation of `horizontal`.\n     * Provide this when the separator is vertical.\n     */\n    orientation?: Orientation;\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\n/**\n * A separator component that follows the ARIA `separator` role guidance.\n *\n * By default, this component renders a semantic separator (`<hr>`). When using a\n * non-`hr` tag via `@as`, it adds `role=\"separator\"`.\n *\n * For purely decorative separators (e.g. breadcrumb slashes), set `@decorative={{true}}`\n * to apply `aria-hidden=\"true\"`.\n *\n * For example:\n *\n * ```gjs live preview\n * import { Separator } from 'ember-primitives';\n *\n * <template>\n *   <nav>\n *     <ol style=\"display: flex; gap: 0.5rem; list-style: none; padding: 0;\">\n *       <li><a href=\"/\">Home</a></li>\n *       <Separator @as=\"li\" @decorative={{true}}>/</Separator>\n *       <li><a href=\"/docs\">Docs</a></li>\n *       <Separator @as=\"li\" @decorative={{true}}>/</Separator>\n *       <li>Current</li>\n *     </ol>\n *   </nav>\n * </template>\n * ```\n */\nexport const Separator: TOC<Signature> = <template>\n  {{#let (getElementTag @as) as |tagName|}}\n    {{#let (element tagName) as |El|}}\n      <El\n        aria-hidden={{ariaHiddenFor @decorative}}\n        role={{roleFor tagName @decorative}}\n        aria-orientation={{ariaOrientationFor @orientation @decorative}}\n        ...attributes\n      >\n        {{#if (shouldYield @decorative tagName)}}\n          {{yield}}\n        {{/if}}\n      </El>\n    {{/let}}\n  {{/let}}\n</template>;\n\nexport default Separator;\n"],"names":["normalizeTagName","tagName","trim","toLowerCase","getElementTag","roleFor","decorative","undefined","ariaHiddenFor","ariaOrientationFor","orientation","shouldYield","Boolean","Separator","setComponentTemplate","precompileTemplate","strictMode","scope","element","templateOnly"],"mappings":";;;;;AAMA,SAASA,gBAAAA,CAAiBC,OAAe,EAAA;EACvC,OAAOA,OAAA,CAAQC,IAAI,EAAA,CAAGC,WAAW,EAAA;AACnC;AAEA,SAASC,aAAAA,CAAcH,OAA2B,EAAA;EAChD,IAAIA,SAAS,OAAOA,OAAA;AAEpB,EAAA,OAAO,IAAA;AACT;AAEA,SAASI,QAAQJ,OAAe,EAAEK,UAA+B,EAAA;EAC/D,IAAIA,YAAY,OAAOC,SAAA;AAEvB;EACA,IAAIP,gBAAA,CAAiBC,OAAA,CAAA,KAAa,IAAA,EAAM,OAAOM,SAAA;AAE/C,EAAA,OAAO,WAAA;AACT;AAEA,SAASC,aAAAA,CAAcF,UAA+B,EAAA;AACpD,EAAA,OAAOA,aAAa,MAAA,GAASC,SAAA;AAC/B;AAEA,SAASE,kBAAAA,CAAmBC,WAAoC,EAAEJ,UAA+B,EAAA;EAC/F,IAAIA,YAAY,OAAOC,SAAA;AAEvB;AACA;AACA,EAAA,OAAOG,WAAA;AACT;AAEA,SAASC,YAAYL,UAA+B,EAAEL,OAAe,EAAA;AACnE;EACA,IAAID,gBAAA,CAAiBC,OAAA,CAAA,KAAa,IAAA,EAAM,OAAO,KAAA;AAE/C;AACA;EACA,OAAOW,OAAA,CAAQN,UAAA,CAAA;AACjB;AAmCA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BC;MACYO,SAAe,GAAAC,oBAAA,CAAaC,kBAAA,CAAA,6WAAA,EAezC;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAb,aAAA;IAAAc,OAAA;IAAAV,aAAA;IAAAH,OAAA;IAAAI,kBAAA;AAAAE,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAQ,YAAA,EAAA;;;;"}

package/dist/components/switch.js

@@ -5,7 +5,7 @@ import { uniqueId } from '../utils.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
-import { t as toggleWithFallback } from '../utils-D0v9WKmV.js';
+import { t as toggleWithFallback } from '../utils-BBQjrXDg.js';
 
 setComponentTemplate(precompileTemplate("<div ...attributes>{{yield}}</div>", {
   strictMode: true
@@ -14,22 +14,26 @@ const Label = setComponentTemplate(precompileTemplate("<label for={{@for}} ...at
   strictMode: true
 }), templateOnly());
 
-const Checkbox = setComponentTemplate(precompileTemplate("{{#let (cell @checked) as |checked|}}\n  <input id={{@id}} type=\"checkbox\" role=\"switch\" checked={{checked.current}} aria-checked={{checked.current}} data-state={{if checked.current \"on\" \"off\"}} {{on \"click\" (fn toggleWithFallback checked.toggle @onChange)}} ...attributes />\n{{/let}}", {
+const Checkbox = setComponentTemplate(precompileTemplate("<input id={{@id}} type=\"checkbox\" role=\"switch\" checked={{@checked.current}} aria-checked={{@checked.current}} data-state={{if @checked.current \"on\" \"off\"}} {{on \"click\" (fn toggleWithFallback @checked.toggle @onChange)}} ...attributes />", {
   strictMode: true,
   scope: () => ({
-    cell,
     on,
     fn,
     toggleWithFallback
   })
 }), templateOnly());
+function defaultFalse(value) {
+  return value ?? false;
+}
 /**
  * @public
  */
-const Switch = setComponentTemplate(precompileTemplate("<div ...attributes data-prim-switch>\n  {{!-- @glint-nocheck --}}\n  {{#let (uniqueId) as |id|}}\n    {{yield (hash Control=(component Checkbox checked=@checked id=id onChange=@onChange) Label=(component Label for=id))}}\n  {{/let}}\n</div>", {
+const Switch = setComponentTemplate(precompileTemplate("<div ...attributes data-prim-switch>\n  {{#let (uniqueId) as |id|}}\n    {{#let (cell (defaultFalse @checked)) as |checked|}}\n      {{!-- @glint-nocheck --}}\n      {{yield (hash isChecked=checked.current Control=(component Checkbox checked=checked id=id onChange=@onChange) Label=(component Label for=id))}}\n    {{/let}}\n  {{/let}}\n</div>", {
   strictMode: true,
   scope: () => ({
     uniqueId,
+    cell,
+    defaultFalse,
     hash,
     Checkbox,
     Label

package/dist/components/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sources":["../../src/components/-private/typed-elements.gts","../../src/components/switch.gts"],"sourcesContent":["import type { TOC } from \"@ember/component/template-only\";\n\nexport const Div: TOC<{ Element: HTMLDivElement; Blocks: { default: [] } }> = <template>\n  <div ...attributes>{{yield}}</div>\n</template>;\n\nexport const Label: TOC<{\n  Element: HTMLLabelElement;\n  Args: { for: string };\n  Blocks: { default: [] };\n}> = <template>\n  <label for={{@for}} ...attributes>{{yield}}</label>\n</template>;\n","import { fn, hash } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\n\nimport { cell } from \"ember-resources\";\n\nimport { uniqueId } from \"../utils.ts\";\nimport { Label } from \"./-private/typed-elements.gts\";\nimport { toggleWithFallback } from \"./-private/utils.ts\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { WithBoundArgs } from \"@glint/template\";\n\nexport interface Signature {\n  Element: HTMLInputElement;\n  Args: {\n    /**\n     * The initial checked value of the Switch.\n     * This value is reactive, so if the value that\n     * `@checked` is set to updates, the state of the Switch will also update.\n     */\n    checked?: boolean;\n    /**\n     * Callback when the Switch state is toggled\n     */\n    onChange?: (checked: boolean, event: Event) => void;\n  };\n  Blocks: {\n    default?: [\n      {\n        /**\n         * The Switch Element.\n         * It has a pre-wired `id` so that the relevant Label is\n         * appropriately associated via the `for` property of the Label.\n         *\n         * ```gjs\n         * import { Switch } from 'ember-primitives';\n         *\n         * <template>\n         *   <Switch as |s|>\n         *     <s.Control />\n         *   </Switch>\n         * </template>\n         * ```\n         */\n        Control: WithBoundArgs<typeof Checkbox, \"checked\" | \"id\" | \"onChange\">;\n        /**\n         * The Switch element requires a label, and this label already has\n         * the association to the Control by setting the `for` attribute to the `id` of the Control\n         *\n         * ```gjs\n         * import { Switch } from 'ember-primitives';\n         *\n         * <template>\n         *   <Switch as |s|>\n         *     <s.Label />\n         *   </Switch>\n         * </template>\n         * ```\n         */\n        Label: WithBoundArgs<typeof Label, \"for\">;\n      },\n    ];\n  };\n}\n\ninterface ControlSignature {\n  Element: HTMLInputElement;\n  Args: { id: string; checked?: boolean; onChange: () => void };\n}\n\nconst Checkbox: TOC<ControlSignature> = <template>\n  {{#let (cell @checked) as |checked|}}\n    <input\n      id={{@id}}\n      type=\"checkbox\"\n      role=\"switch\"\n      checked={{checked.current}}\n      aria-checked={{checked.current}}\n      data-state={{if checked.current \"on\" \"off\"}}\n      {{on \"click\" (fn toggleWithFallback checked.toggle @onChange)}}\n      ...attributes\n    />\n  {{/let}}\n</template>;\n\n/**\n * @public\n */\nexport const Switch: TOC<Signature> = <template>\n  <div ...attributes data-prim-switch>\n    {{! @glint-nocheck }}\n    {{#let (uniqueId) as |id|}}\n      {{yield\n        (hash\n          Control=(component Checkbox checked=@checked id=id onChange=@onChange)\n          Label=(component Label for=id)\n        )\n      }}\n    {{/let}}\n  </div>\n</template>;\n\nexport default Switch;\n"],"names":["precompileTemplate","strictMode","templateOnly","Label","Checkbox","setComponentTemplate","scope","cell","on","fn","toggleWithFallback","Switch","uniqueId","hash"],"mappings":";;;;;;;;;qBAE8EA,kBAAA,CAAA,oCAAA,EAE9E;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;AAEH,MAAMC,6BAIRH,kBAAA,CAAA,qDAAA,EAEL;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA,CAAA;;AC0DV,MAAME,QAAc,GAAAC,oBAAA,CAAoBL,kBAAA,CAAA,ySAAA,EAaxC;EAAAC,UAAA,EAAA,IAAA;AAAAK,EAAAA,KAAA,EAAAA,OAAA;IAAAC,IAAA;IAAAC,EAAA;IAAAC,EAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAR,YAAA,EAAA,CAAA;AAEV;;AAEC;MACYS,MAAY,GAAAN,oBAAA,CAAaL,kBAAA,CAAA,kPAAA,EAYtC;EAAAC,UAAA,EAAA,IAAA;AAAAK,EAAAA,KAAA,EAAAA,OAAA;IAAAM,QAAA;IAAAC,IAAA;IAAAT,QAAA;AAAAD,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAD,YAAA,EAAA;;;;"}
+{"version":3,"file":"switch.js","sources":["../../src/components/-private/typed-elements.gts","../../src/components/switch.gts"],"sourcesContent":["import type { TOC } from \"@ember/component/template-only\";\n\nexport const Div: TOC<{ Element: HTMLDivElement; Blocks: { default: [] } }> = <template>\n  <div ...attributes>{{yield}}</div>\n</template>;\n\nexport const Label: TOC<{\n  Element: HTMLLabelElement;\n  Args: { for: string };\n  Blocks: { default: [] };\n}> = <template>\n  <label for={{@for}} ...attributes>{{yield}}</label>\n</template>;\n","import { fn, hash } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\n\nimport { cell } from \"ember-resources\";\n\nimport { uniqueId } from \"../utils.ts\";\nimport { Label } from \"./-private/typed-elements.gts\";\nimport { toggleWithFallback } from \"./-private/utils.ts\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { WithBoundArgs } from \"@glint/template\";\n\nexport interface Signature {\n  Element: HTMLInputElement;\n  Args: {\n    /**\n     * The initial checked value of the Switch.\n     * This value is reactive, so if the value that\n     * `@checked` is set to updates, the state of the Switch will also update.\n     */\n    checked?: boolean;\n    /**\n     * Callback when the Switch state is toggled\n     */\n    onChange?: (checked: boolean, event: Event) => void;\n  };\n  Blocks: {\n    default?: [\n      {\n        /**\n         * The current state of the Switch.\n         *\n         * ```gjs\n         * import { Switch } from 'ember-primitives/components/switch';\n         *\n         * <template>\n         *   <Switch as |s|>\n         *     {{s.isChecked}}\n         *   </Switch>\n         * </template>\n         * ```\n         */\n        isChecked: boolean;\n        /**\n         * The Switch Element.\n         * It has a pre-wired `id` so that the relevant Label is\n         * appropriately associated via the `for` property of the Label.\n         *\n         * ```gjs\n         * import { Switch } from 'ember-primitives/components/switch';\n         *\n         * <template>\n         *   <Switch as |s|>\n         *     <s.Control />\n         *   </Switch>\n         * </template>\n         * ```\n         */\n        Control: WithBoundArgs<typeof Checkbox, \"checked\" | \"id\" | \"onChange\">;\n        /**\n         * The Switch element requires a label, and this label already has\n         * the association to the Control by setting the `for` attribute to the `id` of the Control\n         *\n         * ```gjs\n         * import { Switch } from 'ember-primitive/components/switchs';\n         *\n         * <template>\n         *   <Switch as |s|>\n         *     <s.Label />\n         *   </Switch>\n         * </template>\n         * ```\n         */\n        Label: WithBoundArgs<typeof Label, \"for\">;\n      },\n    ];\n  };\n}\n\ninterface ControlSignature {\n  Element: HTMLInputElement;\n  Args: { id: string; checked?: ReturnType<typeof cell<boolean>>; onChange: () => void };\n}\n\nconst Checkbox: TOC<ControlSignature> = <template>\n  <input\n    id={{@id}}\n    type=\"checkbox\"\n    role=\"switch\"\n    checked={{@checked.current}}\n    aria-checked={{@checked.current}}\n    data-state={{if @checked.current \"on\" \"off\"}}\n    {{on \"click\" (fn toggleWithFallback @checked.toggle @onChange)}}\n    ...attributes\n  />\n</template>;\n\nfunction defaultFalse(value: unknown) {\n  return value ?? false;\n}\n\n/**\n * @public\n */\nexport const Switch: TOC<Signature> = <template>\n  <div ...attributes data-prim-switch>\n    {{#let (uniqueId) as |id|}}\n      {{#let (cell (defaultFalse @checked)) as |checked|}}\n        {{! @glint-nocheck }}\n        {{yield\n          (hash\n            isChecked=checked.current\n            Control=(component Checkbox checked=checked id=id onChange=@onChange)\n            Label=(component Label for=id)\n          )\n        }}\n      {{/let}}\n    {{/let}}\n  </div>\n</template>;\n\nexport default Switch;\n"],"names":["precompileTemplate","strictMode","templateOnly","Label","Checkbox","setComponentTemplate","scope","on","fn","toggleWithFallback","defaultFalse","value","Switch","uniqueId","cell","hash"],"mappings":";;;;;;;;;qBAE8EA,kBAAA,CAAA,oCAAA,EAE9E;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;AAEH,MAAMC,6BAIRH,kBAAA,CAAA,qDAAA,EAEL;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA,CAAA;;ACwEV,MAAME,QAAc,GAAAC,oBAAA,CAAoBL,kBAAA,CAAA,0PAAA,EAWxC;EAAAC,UAAA,EAAA,IAAA;AAAAK,EAAAA,KAAA,EAAAA,OAAA;IAAAC,EAAA;IAAAC,EAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAP,YAAA,EAAA,CAAA;AAEV,SAASQ,YAAAA,CAAaC,KAAc,EAAA;EAClC,OAAOA,KAAA,IAAS,KAAA;AAClB;AAEA;;AAEC;MACYC,MAAY,GAAAP,oBAAA,CAAaL,kBAAA,CAAA,yVAAA,EAetC;EAAAC,UAAA,EAAA,IAAA;AAAAK,EAAAA,KAAA,EAAAA,OAAA;IAAAO,QAAA;IAAAC,IAAA;IAAAJ,YAAA;IAAAK,IAAA;IAAAX,QAAA;AAAAD,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAD,YAAA,EAAA;;;;"}

package/dist/components/toggle.js

@@ -1,7 +1,7 @@
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { cell } from 'ember-resources';
-import { t as toggleWithFallback } from '../utils-D0v9WKmV.js';
+import { t as toggleWithFallback } from '../utils-BBQjrXDg.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';

package/dist/index.js

@@ -17,6 +17,7 @@ export { TARGETS as PORTALS, PortalTargets } from './components/portal-targets.j
 export { Progress } from './components/progress.js';
 export { R as Rating } from './rating-BrIiwDLw.js';
 export { Scroller } from './components/scroller.js';
+export { Separator } from './components/separator.js';
 export { Shadowed } from './components/shadowed.js';
 export { Switch } from './components/switch.js';
 export { Toggle } from './components/toggle.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 { 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"}
+{"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 { Separator } from './components/separator.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/dist/{utils-D0v9WKmV.js → utils-BBQjrXDg.js}

@@ -6,8 +6,8 @@ function toggleWithFallback(uncontrolledToggle, controlledToggle, ...args) {
   if (controlledToggle) {
     return controlledToggle(...args);
   }
-  uncontrolledToggle(...args);
+  uncontrolledToggle?.(...args);
 }
 
 export { toggleWithFallback as t };
-//# sourceMappingURL=utils-D0v9WKmV.js.map
+//# sourceMappingURL=utils-BBQjrXDg.js.map

package/dist/utils-BBQjrXDg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils-BBQjrXDg.js","sources":["../src/components/-private/utils.ts"],"sourcesContent":["/**\n * If the user provides an onChange or similar function, use that,\n * otherwise fallback to the uncontrolled toggle\n */\nexport function toggleWithFallback(\n  uncontrolledToggle: undefined | ((...args: any[]) => void) | (() => void),\n  controlledToggle?: (...args: any[]) => void,\n  ...args: unknown[]\n) {\n  if (controlledToggle) {\n    return controlledToggle(...args);\n  }\n\n  uncontrolledToggle?.(...args);\n}\n"],"names":["toggleWithFallback","uncontrolledToggle","controlledToggle","args"],"mappings":"AAAA;AACA;AACA;AACA;AACO,SAASA,kBAAkBA,CAChCC,kBAAyE,EACzEC,gBAA2C,EAC3C,GAAGC,IAAe,EAClB;AACA,EAAA,IAAID,gBAAgB,EAAE;AACpB,IAAA,OAAOA,gBAAgB,CAAC,GAAGC,IAAI,CAAC;AAClC,EAAA;EAEAF,kBAAkB,GAAG,GAAGE,IAAI,CAAC;AAC/B;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-primitives",
-  "version": "0.51.0",
+  "version": "0.53.0",
   "description": "Making apps easier to build",
   "keywords": [
     "ember-addon"
@@ -28,8 +28,8 @@
     "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.4"
+    "tracked-toolbox": "^2.2.0",
+    "which-heading-do-i-need": "0.2.5"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.0",
@@ -48,9 +48,9 @@
     "@embroider/addon-dev": "^8.2.0",
     "@glimmer/component": "^2.0.0",
     "@glimmer/tracking": "^1.1.2",
-    "@glint/ember-tsc": "^1.0.8",
+    "@glint/ember-tsc": "^1.0.9",
     "@glint/template": "^1.7.3",
-    "@glint/tsserver-plugin": "^2.0.8",
+    "@glint/tsserver-plugin": "^2.0.9",
     "@nullvoxpopuli/eslint-configs": "^5.5.0",
     "@rollup/plugin-babel": "^6.1.0",
     "@tsconfig/ember": "^3.0.12",
@@ -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.10.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.55.1",
     "rollup-plugin-copy": "^3.5.0",
     "typescript": "^5.9.3"
   },

package/src/components/-private/utils.ts

@@ -3,8 +3,7 @@
  * otherwise fallback to the uncontrolled toggle
  */
 export function toggleWithFallback(
-  uncontrolledToggle: (...args: unknown[]) => void,
-
+  uncontrolledToggle: undefined | ((...args: any[]) => void) | (() => void),
   controlledToggle?: (...args: any[]) => void,
   ...args: unknown[]
 ) {
@@ -12,5 +11,5 @@ export function toggleWithFallback(
     return controlledToggle(...args);
   }
 
-  uncontrolledToggle(...args);
+  uncontrolledToggle?.(...args);
 }

package/src/components/breadcrumb.gts

@@ -1,17 +1,9 @@
 import { hash } from "@ember/helper";
 
-import type { TOC } from "@ember/component/template-only";
+import { Separator } from "./separator.gts";
 
-const Separator: TOC<{
-  Element: HTMLSpanElement;
-  Blocks: {
-    default: [];
-  };
-}> = <template>
-  <span aria-hidden="true" ...attributes>
-    {{yield}}
-  </span>
-</template>;
+import type { TOC } from "@ember/component/template-only";
+import type { WithBoundArgs } from "@glint/template";
 
 export interface Signature {
   Element: HTMLElement;
@@ -27,9 +19,10 @@ export interface Signature {
       {
         /**
          * A separator component to place between breadcrumb items.
-         * Typically renders as "/" or ">" with aria-hidden="true".
+         * Typically renders as "/" or ">" and is decorative (aria-hidden="true").
+         * Pre-configured to render as an `<li>` element for proper HTML structure.
          */
-        Separator: typeof Separator;
+        Separator: WithBoundArgs<typeof Separator, "as" | "decorative">;
       },
     ];
   };
@@ -65,7 +58,7 @@ export interface Signature {
 export const Breadcrumb: TOC<Signature> = <template>
   <nav aria-label={{if @label @label "Breadcrumb"}} ...attributes>
     <ol>
-      {{yield (hash Separator=Separator)}}
+      {{yield (hash Separator=(component Separator as="li" decorative=true))}}
     </ol>
   </nav>
 </template>;

package/src/components/separator.gts

@@ -0,0 +1,124 @@
+import { element } from "ember-element-helper";
+
+import type { TOC } from "@ember/component/template-only";
+
+type Orientation = "horizontal" | "vertical";
+
+function normalizeTagName(tagName: string) {
+  return tagName.trim().toLowerCase();
+}
+
+function getElementTag(tagName: undefined | string) {
+  if (tagName) return tagName;
+
+  return "hr";
+}
+
+function roleFor(tagName: string, decorative: undefined | boolean) {
+  if (decorative) return undefined;
+
+  // <hr> already has implicit role="separator".
+  if (normalizeTagName(tagName) === "hr") return undefined;
+
+  return "separator";
+}
+
+function ariaHiddenFor(decorative: undefined | boolean) {
+  return decorative ? "true" : undefined;
+}
+
+function ariaOrientationFor(orientation: undefined | Orientation, decorative: undefined | boolean) {
+  if (decorative) return undefined;
+
+  // `separator` has an implicit aria-orientation of horizontal.
+  // Only specify when authors opt in (e.g. vertical separators).
+  return orientation;
+}
+
+function shouldYield(decorative: undefined | boolean, tagName: string) {
+  // `<hr>` is a void element and must not have children.
+  if (normalizeTagName(tagName) === "hr") return false;
+
+  // Content inside a `separator` is presentational to AT; only yield for decorative
+  // separators so consumers don't accidentally rely on it for semantics.
+  return Boolean(decorative);
+}
+
+export interface Signature {
+  Element: HTMLElement;
+  Args: {
+    /**
+     * The tag name to use for the separator element.
+     * Defaults to `<hr>` for non-decorative separators.
+     * You can override this (e.g. `"li"` in menus, or `"span"` for inline separators).
+     *
+     * For example, in breadcrumbs where separators are siblings to `<li>` elements:
+     * ```gjs
+     * <Separator @as="li" @decorative={{true}}>/</Separator>
+     * ```
+     */
+    as?: string;
+
+    /**
+     * When true, hides the separator from assistive technologies.
+     *
+     * Use this for purely decorative separators, such as breadcrumb slashes.
+     */
+    decorative?: boolean;
+
+    /**
+     * Sets `aria-orientation`. `separator` has an implicit orientation of `horizontal`.
+     * Provide this when the separator is vertical.
+     */
+    orientation?: Orientation;
+  };
+  Blocks: {
+    default: [];
+  };
+}
+
+/**
+ * A separator component that follows the ARIA `separator` role guidance.
+ *
+ * By default, this component renders a semantic separator (`<hr>`). When using a
+ * non-`hr` tag via `@as`, it adds `role="separator"`.
+ *
+ * For purely decorative separators (e.g. breadcrumb slashes), set `@decorative={{true}}`
+ * to apply `aria-hidden="true"`.
+ *
+ * For example:
+ *
+ * ```gjs live preview
+ * import { Separator } from 'ember-primitives';
+ *
+ * <template>
+ *   <nav>
+ *     <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0;">
+ *       <li><a href="/">Home</a></li>
+ *       <Separator @as="li" @decorative={{true}}>/</Separator>
+ *       <li><a href="/docs">Docs</a></li>
+ *       <Separator @as="li" @decorative={{true}}>/</Separator>
+ *       <li>Current</li>
+ *     </ol>
+ *   </nav>
+ * </template>
+ * ```
+ */
+export const Separator: TOC<Signature> = <template>
+  {{#let (getElementTag @as) as |tagName|}}
+    {{#let (element tagName) as |El|}}
+      <El
+        aria-hidden={{ariaHiddenFor @decorative}}
+        role={{roleFor tagName @decorative}}
+        aria-orientation={{ariaOrientationFor @orientation @decorative}}
+        ...attributes
+      >
+        {{#if (shouldYield @decorative tagName)}}
+          {{yield}}
+        {{/if}}
+      </El>
+    {{/let}}
+  {{/let}}
+</template>;
+
+export default Separator;

package/src/components/switch.gts

@@ -27,13 +27,27 @@ export interface Signature {
   Blocks: {
     default?: [
       {
+        /**
+         * The current state of the Switch.
+         *
+         * ```gjs
+         * import { Switch } from 'ember-primitives/components/switch';
+         *
+         * <template>
+         *   <Switch as |s|>
+         *     {{s.isChecked}}
+         *   </Switch>
+         * </template>
+         * ```
+         */
+        isChecked: boolean;
         /**
          * The Switch Element.
          * It has a pre-wired `id` so that the relevant Label is
          * appropriately associated via the `for` property of the Label.
          *
          * ```gjs
-         * import { Switch } from 'ember-primitives';
+         * import { Switch } from 'ember-primitives/components/switch';
          *
          * <template>
          *   <Switch as |s|>
@@ -48,7 +62,7 @@ export interface Signature {
          * the association to the Control by setting the `for` attribute to the `id` of the Control
          *
          * ```gjs
-         * import { Switch } from 'ember-primitives';
+         * import { Switch } from 'ember-primitive/components/switchs';
          *
          * <template>
          *   <Switch as |s|>
@@ -65,37 +79,42 @@ export interface Signature {
 
 interface ControlSignature {
   Element: HTMLInputElement;
-  Args: { id: string; checked?: boolean; onChange: () => void };
+  Args: { id: string; checked?: ReturnType<typeof cell<boolean>>; onChange: () => void };
 }
 
 const Checkbox: TOC<ControlSignature> = <template>
-  {{#let (cell @checked) as |checked|}}
-    <input
-      id={{@id}}
-      type="checkbox"
-      role="switch"
-      checked={{checked.current}}
-      aria-checked={{checked.current}}
-      data-state={{if checked.current "on" "off"}}
-      {{on "click" (fn toggleWithFallback checked.toggle @onChange)}}
-      ...attributes
-    />
-  {{/let}}
+  <input
+    id={{@id}}
+    type="checkbox"
+    role="switch"
+    checked={{@checked.current}}
+    aria-checked={{@checked.current}}
+    data-state={{if @checked.current "on" "off"}}
+    {{on "click" (fn toggleWithFallback @checked.toggle @onChange)}}
+    ...attributes
+  />
 </template>;
 
+function defaultFalse(value: unknown) {
+  return value ?? false;
+}
+
 /**
  * @public
  */
 export const Switch: TOC<Signature> = <template>
   <div ...attributes data-prim-switch>
-    {{! @glint-nocheck }}
     {{#let (uniqueId) as |id|}}
-      {{yield
-        (hash
-          Control=(component Checkbox checked=@checked id=id onChange=@onChange)
-          Label=(component Label for=id)
-        )
-      }}
+      {{#let (cell (defaultFalse @checked)) as |checked|}}
+        {{! @glint-nocheck }}
+        {{yield
+          (hash
+            isChecked=checked.current
+            Control=(component Checkbox checked=checked id=id onChange=@onChange)
+            Label=(component Label for=id)
+          )
+        }}
+      {{/let}}
     {{/let}}
   </div>
 </template>;

package/src/index.ts

@@ -36,6 +36,7 @@ export { TARGETS as PORTALS } from './components/portal-targets.gts';
 export { Progress } from './components/progress.gts';
 export { Rating } from './components/rating.gts';
 export { Scroller } from './components/scroller.gts';
+export { Separator } from './components/separator.gts';
 export { Shadowed } from './components/shadowed.gts';
 export { Switch } from './components/switch.gts';
 export { Toggle } from './components/toggle.gts';

package/dist/utils-D0v9WKmV.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils-D0v9WKmV.js","sources":["../src/components/-private/utils.ts"],"sourcesContent":["/**\n * If the user provides an onChange or similar function, use that,\n * otherwise fallback to the uncontrolled toggle\n */\nexport function toggleWithFallback(\n  uncontrolledToggle: (...args: unknown[]) => void,\n\n  controlledToggle?: (...args: any[]) => void,\n  ...args: unknown[]\n) {\n  if (controlledToggle) {\n    return controlledToggle(...args);\n  }\n\n  uncontrolledToggle(...args);\n}\n"],"names":["toggleWithFallback","uncontrolledToggle","controlledToggle","args"],"mappings":"AAAA;AACA;AACA;AACA;AACO,SAASA,kBAAkBA,CAChCC,kBAAgD,EAEhDC,gBAA2C,EAC3C,GAAGC,IAAe,EAClB;AACA,EAAA,IAAID,gBAAgB,EAAE;AACpB,IAAA,OAAOA,gBAAgB,CAAC,GAAGC,IAAI,CAAC;AAClC,EAAA;EAEAF,kBAAkB,CAAC,GAAGE,IAAI,CAAC;AAC7B;;;;"}