@oddkin/components 0.0.0-stage → 1.0.0-beta.1

package/dist/side-nav/kinds.js

@@ -0,0 +1,36 @@
+import { OddkinError } from '@oddkin/core/diagnostics';
+const NAME = /^[a-z][a-z0-9]*(-[a-z0-9]+)+$/;
+const registries = new WeakSet();
+/** True for registries made by `navigationKinds` and its `extend()`. */
+export const isNavigationKinds = (value) => typeof value === 'object' && value !== null && registries.has(value);
+function registry(kinds) {
+    const value = Object.freeze({
+        names: Object.freeze([...kinds.keys()]),
+        get: (kind) => kinds.get(kind),
+        extend(added) {
+            const next = new Map(kinds);
+            for (const [name, kind] of Object.entries(added)) {
+                const shape = kind?.model?.kind === 'object' ? kind.model.shape : {};
+                const field = { link: 'href', action: 'action' }[kind?.semantics];
+                if (!NAME.test(name) ||
+                    next.has(name) ||
+                    !shape['id'] ||
+                    !shape['label'] ||
+                    !field ||
+                    !shape[field] ||
+                    typeof kind.render !== 'function')
+                    throw new OddkinError('navigation.kind.invalid', `Navigation kind "${name}" needs a new hyphenated name, an m.object model with id, label, and href (semantics "link") or action (semantics "action"), and a render function.`);
+                next.set(name, Object.freeze({ ...kind }));
+            }
+            return registry(next);
+        },
+    });
+    registries.add(value);
+    return value;
+}
+/**
+ * The navigation's built-in kinds (`link`, `action`, `group`) need no registration. Extend this
+ * registry with project kinds and pass the result to one element as `.kinds`; nothing is global.
+ */
+export const navigationKinds = registry(new Map());
+//# sourceMappingURL=kinds.js.map

package/dist/side-nav/kinds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kinds.js","sourceRoot":"","sources":["../../src/side-nav/kinds.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAiDvD,MAAM,IAAI,GAAG,+BAA+B,CAAC;AAC7C,MAAM,UAAU,GAAG,IAAI,OAAO,EAAmB,CAAC;AAElD,wEAAwE;AACxE,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAc,EAA4B,EAAE,CAC5E,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,UAAU,CAAC,GAAG,CAAC,KAAwB,CAAC,CAAC;AAE1F,SAAS,QAAQ,CAAC,KAA0C;IAC1D,MAAM,KAAK,GAAoB,MAAM,CAAC,MAAM,CAAC;QAC3C,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;QACvC,GAAG,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;QACtC,MAAM,CAAC,KAA+C;YACpD,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC;YAC5B,KAAK,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;gBACjD,MAAM,KAAK,GAAG,IAAI,EAAE,KAAK,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;gBACrE,MAAM,KAAK,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;gBAClE,IACE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;oBAChB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;oBACd,CAAC,KAAK,CAAC,IAAI,CAAC;oBACZ,CAAC,KAAK,CAAC,OAAO,CAAC;oBACf,CAAC,KAAK;oBACN,CAAC,KAAK,CAAC,KAAK,CAAC;oBACb,OAAO,IAAI,CAAC,MAAM,KAAK,UAAU;oBAEjC,MAAM,IAAI,WAAW,CACnB,yBAAyB,EACzB,oBAAoB,IAAI,qJAAqJ,CAC9K,CAAC;gBACJ,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;YAC7C,CAAC;YACD,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC;KACF,CAAC,CAAC;IACH,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACtB,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAoB,QAAQ,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC"}

package/dist/side-nav/side-nav.d.ts

@@ -0,0 +1,102 @@
+import { OddkinElement, type ElementEvents } from '@oddkin/core/element';
+import type { Scope } from '@oddkin/core/scope';
+import type { NavigationItem } from '../models/navigation.js';
+import { type CustomNavigationItem, type NavigationEntry, type NavigationKinds, type NavigationLabelContext } from './kinds.js';
+export type { NavigationLabelContext } from './kinds.js';
+export interface NavigationActionDetail {
+    readonly id: string;
+    readonly action: string;
+}
+export interface NavigationToggleDetail {
+    readonly id: string;
+    readonly expanded: boolean;
+}
+/**
+ * Renders the content of an entry's label. The element keeps the link, button, or disclosure
+ * wrapper and its ARIA; the content must include the entry's visible name.
+ */
+export type NavigationLabelRenderer = (item: NavigationItem, context: NavigationLabelContext) => unknown;
+/** The user activated an action entry. The host runs it; nothing happens implicitly. */
+export declare const actionEvent: import("@oddkin/core/element").EventDefinition<NavigationActionDetail>;
+/** The user asked to expand or collapse a group. Cancel it to keep the current state. */
+export declare const toggleEvent: import("@oddkin/core/element").EventDefinition<NavigationToggleDetail>;
+type Group = Extract<NavigationItem, {
+    kind: 'group';
+}>;
+type LinkEntry = Extract<NavigationItem, {
+    kind: 'link';
+}> | CustomNavigationItem;
+type ActionEntry = Extract<NavigationItem, {
+    kind: 'action';
+}> | CustomNavigationItem;
+declare const OddkinSideNav_base: import("@oddkin/core/element").WithProps<typeof OddkinElement, {
+    readonly label: import("@oddkin/core/element").PropDefinition<string>;
+    readonly items: import("@oddkin/core/element").PropDefinition<readonly NavigationEntry[] | undefined>;
+    readonly current: import("@oddkin/core/element").PropDefinition<string>;
+    readonly expanded: import("@oddkin/core/element").PropDefinition<readonly string[] | undefined>;
+    readonly renderLabel: import("@oddkin/core/element").PropDefinition<NavigationLabelRenderer | undefined>;
+    readonly kinds: import("@oddkin/core/element").PropDefinition<NavigationKinds>;
+}>;
+/**
+ * Side navigation: links, actions, and expandable groups from `.items` (or native links in the
+ * default slot), arranged by the `side-nav` layout recipe, which responds to the element's own
+ * width with container queries only.
+ *
+ * @slot header - Content above the entries, e.g. a product name.
+ * @slot - Declarative entries (native links or lists) when `items` is not set.
+ * @slot footer - Content below the entries.
+ * @csspart base - The `<nav>` landmark.
+ * @csspart header - Wrapper of the header slot.
+ * @csspart list - The list of entries.
+ * @csspart link - A link entry.
+ * @csspart action - An action entry.
+ * @csspart group-toggle - The button that expands or collapses a group.
+ * @csspart group - The list inside a group.
+ * @csspart badge - A link's badge.
+ * @csspart footer - Wrapper of the footer slot.
+ * @a11y A `<nav>` landmark named by `label`. Links are native, so modified clicks, new tabs, and context menus work; the current link has `aria-current="page"` and a visible marker, not colour alone. Groups follow the disclosure pattern (`aria-expanded`, `aria-controls`).
+ * @keyboard Tab moves through links, actions, and group toggles in order; Enter follows a link; Enter or Space activates an action or toggles a group.
+ * @previewRole navigation
+ * @useFor Primary or section navigation with links, a few actions, and one or two levels of groups.
+ * @notFor Menus of commands (use a menu), tabs, or trees with selection; page layout.
+ * @limitation Entries are replaced, not mutated: assign a new `items` array to change them.
+ * @category Navigation
+ * @customization 1 2 3
+ */
+export declare class OddkinSideNav extends OddkinSideNav_base {
+    #private;
+    static events: {
+        'odd-action': import("@oddkin/core/element").EventDefinition<NavigationActionDetail>;
+        'odd-toggle': import("@oddkin/core/element").EventDefinition<NavigationToggleDetail>;
+    };
+    readonly _events?: ElementEvents<typeof OddkinSideNav>;
+    /** @internal True while the header slot has content; read by the template. */
+    readonly _hasHeader: import("@oddkin/core/reactive").Signal<boolean>;
+    /** @internal True while the footer slot has content; read by the template. */
+    readonly _hasFooter: import("@oddkin/core/reactive").Signal<boolean>;
+    /** @internal Whether a group is expanded (controlled, toggled, or its default). */
+    _isExpanded(group: Group): boolean;
+    /** @internal A stable element id for a group's list (data ids may contain spaces). */
+    _groupId(id: string): string;
+    /** @internal The link's `href`, or `null` for disabled entries, script URLs, and non-strings. */
+    _href(item: LinkEntry): string | null;
+    /** @internal Template handler: an action entry was activated. */
+    _action(item: ActionEntry): void;
+    /** @internal An entry whose kind is neither built in nor registered: reported once per kind. */
+    _unknownKind(kind: string): void;
+    /** @internal Template handler: a group toggle was activated. */
+    _toggle(group: Group): void;
+    /** @internal Slot change handler used by the template. */
+    readonly _onSlotChange: () => void;
+    protected mounted(scope: Scope): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-side-nav': OddkinSideNav;
+    }
+    interface GlobalEventHandlersEventMap {
+        'odd-action': CustomEvent<NavigationActionDetail>;
+        'odd-toggle': CustomEvent<NavigationToggleDetail>;
+    }
+}
+//# sourceMappingURL=side-nav.d.ts.map

package/dist/side-nav/side-nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.d.ts","sourceRoot":"","sources":["../../src/side-nav/side-nav.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAe,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEtF,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAGL,KAAK,oBAAoB,EACzB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,sBAAsB,EAC5B,MAAM,YAAY,CAAC;AAEpB,YAAY,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEzD,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AACD,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED;;;GAGG;AACH,MAAM,MAAM,uBAAuB,GAAG,CACpC,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,sBAAsB,KAC5B,OAAO,CAAC;AAEb,wFAAwF;AACxF,eAAO,MAAM,WAAW,wEAMtB,CAAC;AACH,yFAAyF;AACzF,eAAO,MAAM,WAAW,wEAMtB,CAAC;AAEH,KAAK,KAAK,GAAG,OAAO,CAAC,cAAc,EAAE;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AACxD,KAAK,SAAS,GAAG,OAAO,CAAC,cAAc,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,GAAG,oBAAoB,CAAC;AAClF,KAAK,WAAW,GAAG,OAAO,CAAC,cAAc,EAAE;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,CAAC,GAAG,oBAAoB,CAAC;;;;;;;;;AAItF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBAAa,aAAc,SAAQ,kBAmCjC;;IACA,OAAgB,MAAM;QAAK,YAAY;QAAe,YAAY;MAAgB;IAClF,SAAiB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,aAAa,CAAC,CAAC;IAE/D,8EAA8E;IAC9E,QAAQ,CAAC,UAAU,kDAAiB;IACpC,8EAA8E;IAC9E,QAAQ,CAAC,UAAU,kDAAiB;IAOpC,mFAAmF;IACnF,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAMjC;IAED,sFAAsF;IACtF,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAI3B;IAED,iGAAiG;IACjG,KAAK,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,CAKpC;IAED,iEAAiE;IACjE,OAAO,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAE/B;IAED,gGAAgG;IAChG,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAM/B;IAED,gEAAgE;IAChE,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAO1B;IAED,0DAA0D;IAC1D,QAAQ,CAAC,aAAa,QAAO,IAAI,CAAoB;IAErD,UAAmB,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAa7C;CA2BF;AASD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,aAAa,CAAC;KAC/B;IAED,UAAU,2BAA2B;QACnC,YAAY,EAAE,WAAW,CAAC,sBAAsB,CAAC,CAAC;QAClD,YAAY,EAAE,WAAW,CAAC,sBAAsB,CAAC,CAAC;KACnD;CACF"}

package/dist/side-nav/side-nav.define.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="side-nav.d.ts" preserve="true" />
+export {};
+//# sourceMappingURL=side-nav.define.d.ts.map

package/dist/side-nav/side-nav.define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.define.d.ts","sourceRoot":"","sources":["../../src/side-nav/side-nav.define.ts"],"names":[],"mappings":""}

package/dist/side-nav/side-nav.define.js

@@ -0,0 +1,5 @@
+/// <reference path="./side-nav.ts" preserve="true" />
+import { define } from '@oddkin/core/element';
+import { sideNavDefinition } from './side-nav.definition.js';
+define(sideNavDefinition);
+//# sourceMappingURL=side-nav.define.js.map

package/dist/side-nav/side-nav.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.define.js","sourceRoot":"","sources":["../../src/side-nav/side-nav.define.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,MAAM,CAAC,iBAAiB,CAAC,CAAC"}

package/dist/side-nav/side-nav.definition.d.ts

@@ -0,0 +1,3 @@
+import { OddkinSideNav } from './side-nav.js';
+export declare const sideNavDefinition: import("@oddkin/core/element").ElementDefinition<OddkinSideNav>;
+//# sourceMappingURL=side-nav.definition.d.ts.map

package/dist/side-nav/side-nav.definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.definition.d.ts","sourceRoot":"","sources":["../../src/side-nav/side-nav.definition.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAQ9C,eAAO,MAAM,iBAAiB,iEAa5B,CAAC"}

package/dist/side-nav/side-nav.definition.js

@@ -0,0 +1,27 @@
+import { compose } from '@oddkin/core/element';
+import { focusRingStyles } from '../styles/focus-ring.styles.js';
+import { hostStyles } from '../styles/host.styles.js';
+import { navRowStructuralStyles } from '../styles/nav-row.structural.styles.js';
+import { navRowStyles } from '../styles/nav-row.styles.js';
+import { OddkinSideNav } from './side-nav.js';
+// The recipe's CSS, extracted at build time: registering the element never loads the recipe
+// engine. `side-nav.recipe.ts` stays the source (recipes.test.ts keeps them identical).
+import { sideNavRecipeStyles } from './side-nav.recipe.styles.js';
+import { sideNavStructuralStyles } from './side-nav.structural.styles.js';
+import { sideNavStyles } from './side-nav.styles.js';
+import { sideNavTemplate } from './side-nav.template.js';
+export const sideNavDefinition = compose({
+    name: 'odd-side-nav',
+    element: OddkinSideNav,
+    template: sideNavTemplate,
+    styles: [
+        hostStyles,
+        sideNavRecipeStyles,
+        navRowStructuralStyles,
+        sideNavStructuralStyles,
+        focusRingStyles,
+        navRowStyles,
+        sideNavStyles,
+    ],
+});
+//# sourceMappingURL=side-nav.definition.js.map

package/dist/side-nav/side-nav.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.definition.js","sourceRoot":"","sources":["../../src/side-nav/side-nav.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,4FAA4F;AAC5F,wFAAwF;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,MAAM,CAAC,MAAM,iBAAiB,GAAG,OAAO,CAAC;IACvC,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,aAAa;IACtB,QAAQ,EAAE,eAAe;IACzB,MAAM,EAAE;QACN,UAAU;QACV,mBAAmB;QACnB,sBAAsB;QACtB,uBAAuB;QACvB,eAAe;QACf,YAAY;QACZ,aAAa;KACd;CACF,CAAC,CAAC"}

package/dist/side-nav/side-nav.js

@@ -0,0 +1,170 @@
+import { FocusRecovery } from '@oddkin/core/controllers/focus';
+import { OddkinElement, event, prop } from '@oddkin/core/element';
+import { signal } from '@oddkin/core/reactive';
+import { isNavigationKinds, navigationKinds, } from './kinds.js';
+/** The user activated an action entry. The host runs it; nothing happens implicitly. */
+export const actionEvent = event('odd-action', {
+    bubbles: true,
+    composed: true,
+    cancelable: false,
+    intent: 'user',
+    description: 'An action entry was activated; `detail.action` names it.',
+});
+/** The user asked to expand or collapse a group. Cancel it to keep the current state. */
+export const toggleEvent = event('odd-toggle', {
+    bubbles: true,
+    composed: true,
+    cancelable: true,
+    intent: 'user',
+    description: 'A group is about to expand or collapse; cancelable in uncontrolled mode.',
+});
+const UNSAFE_SCHEME = /^(?:javascript|vbscript|data):/;
+/**
+ * Side navigation: links, actions, and expandable groups from `.items` (or native links in the
+ * default slot), arranged by the `side-nav` layout recipe, which responds to the element's own
+ * width with container queries only.
+ *
+ * @slot header - Content above the entries, e.g. a product name.
+ * @slot - Declarative entries (native links or lists) when `items` is not set.
+ * @slot footer - Content below the entries.
+ * @csspart base - The `<nav>` landmark.
+ * @csspart header - Wrapper of the header slot.
+ * @csspart list - The list of entries.
+ * @csspart link - A link entry.
+ * @csspart action - An action entry.
+ * @csspart group-toggle - The button that expands or collapses a group.
+ * @csspart group - The list inside a group.
+ * @csspart badge - A link's badge.
+ * @csspart footer - Wrapper of the footer slot.
+ * @a11y A `<nav>` landmark named by `label`. Links are native, so modified clicks, new tabs, and context menus work; the current link has `aria-current="page"` and a visible marker, not colour alone. Groups follow the disclosure pattern (`aria-expanded`, `aria-controls`).
+ * @keyboard Tab moves through links, actions, and group toggles in order; Enter follows a link; Enter or Space activates an action or toggles a group.
+ * @previewRole navigation
+ * @useFor Primary or section navigation with links, a few actions, and one or two levels of groups.
+ * @notFor Menus of commands (use a menu), tabs, or trees with selection; page layout.
+ * @limitation Entries are replaced, not mutated: assign a new `items` array to change them.
+ * @category Navigation
+ * @customization 1 2 3
+ */
+export class OddkinSideNav extends OddkinElement.with({
+    label: prop.string({
+        default: '',
+        description: 'Accessible name of the navigation landmark, e.g. "Primary".',
+    }),
+    items: prop.object({
+        description: 'Entries. When set (even to an empty array) it is the only source; slotted entries are not rendered.',
+    }),
+    current: prop.string({
+        default: '',
+        description: 'Id of the current link; it gets `aria-current="page"`.',
+    }),
+    expanded: prop.object({
+        description: 'Ids of expanded groups, owned by the caller. Omit it to let the element track expansion.',
+    }),
+    renderLabel: prop.custom({
+        default: () => undefined,
+        coerce: (value) => value === undefined || typeof value === 'function'
+            ? { ok: true, value: value }
+            : { ok: false, reason: 'expected a function or undefined' },
+        description: 'Renders label content for each entry; signals it reads stay live. The element keeps the link, button, or disclosure semantics.',
+    }),
+    kinds: prop.custom({
+        default: () => navigationKinds,
+        coerce: (value) => isNavigationKinds(value)
+            ? { ok: true, value }
+            : { ok: false, reason: 'expected a registry from navigationKinds.extend()' },
+        description: 'Project entry kinds for this element, from `navigationKinds.extend()`; built-in kinds need none.',
+    }),
+}) {
+    static events = { 'odd-action': actionEvent, 'odd-toggle': toggleEvent };
+    /** @internal True while the header slot has content; read by the template. */
+    _hasHeader = signal(false);
+    /** @internal True while the footer slot has content; read by the template. */
+    _hasFooter = signal(false);
+    // Groups the user toggled in uncontrolled mode; others follow their defaults.
+    #toggled = signal(new Map());
+    #groupIds = new Map();
+    #unknownKinds = new Set();
+    #warnedConflict = false;
+    /** @internal Whether a group is expanded (controlled, toggled, or its default). */
+    _isExpanded(group) {
+        const controlled = this.expanded;
+        if (controlled)
+            return controlled.includes(group.id);
+        return (this.#toggled.value.get(group.id) ?? (group.expanded || containsCurrent(group, this.current)));
+    }
+    /** @internal A stable element id for a group's list (data ids may contain spaces). */
+    _groupId(id) {
+        let value = this.#groupIds.get(id);
+        if (!value)
+            this.#groupIds.set(id, (value = `group-${this.#groupIds.size + 1}`));
+        return value;
+    }
+    /** @internal The link's `href`, or `null` for disabled entries, script URLs, and non-strings. */
+    _href(item) {
+        if (item.disabled || typeof item.href !== 'string')
+            return null;
+        // Browsers ignore control characters and spaces inside a scheme ("java\tscript:").
+        const scheme = item.href.replace(/[\u0000-\u0020]/g, '').toLowerCase();
+        return UNSAFE_SCHEME.test(scheme) ? null : item.href;
+    }
+    /** @internal Template handler: an action entry was activated. */
+    _action(item) {
+        if (!item.disabled)
+            this.emit(actionEvent, { id: item.id, action: String(item.action) });
+    }
+    /** @internal An entry whose kind is neither built in nor registered: reported once per kind. */
+    _unknownKind(kind) {
+        if (this.#unknownKinds.has(kind))
+            return;
+        this.#unknownKinds.add(kind);
+        console.warn(`[model.kind.unknown] <${this.localName}> has entries of kind "${kind}", which is not built in or registered in \`kinds\`; they are not rendered.`);
+    }
+    /** @internal Template handler: a group toggle was activated. */
+    _toggle(group) {
+        const next = !this._isExpanded(group);
+        const allowed = this.emit(toggleEvent, { id: group.id, expanded: next });
+        if (!allowed || this.expanded)
+            return;
+        const toggled = new Map(this.#toggled.peek());
+        toggled.set(group.id, next);
+        this.#toggled.value = toggled;
+    }
+    /** @internal Slot change handler used by the template. */
+    _onSlotChange = () => this.#refresh();
+    mounted(scope) {
+        // A focused entry that is removed, or hidden in a collapsing group, hands focus to the
+        // landmark instead of the document body; the next Tab continues with the entries.
+        scope.use(new FocusRecovery({
+            root: () => this.shadowRoot,
+            fallback: () => this.shadowRoot?.querySelector('nav'),
+        }));
+        scope.effect(() => {
+            this.items;
+            this.#refresh();
+        });
+    }
+    #refresh() {
+        const filled = (name) => {
+            const selector = name ? `slot[name="${name}"]` : 'slot:not([name])';
+            const slot = this.shadowRoot?.querySelector(selector);
+            return (slot
+                ?.assignedNodes({ flatten: true })
+                .some((n) => n.nodeType === Node.ELEMENT_NODE || !!n.textContent?.trim()) ?? false);
+        };
+        this._hasHeader.value = filled('header');
+        this._hasFooter.value = filled('footer');
+        // With `items` set the default slot is not rendered; look at the light DOM instead.
+        const declarative = [...this.childNodes].some((n) => (n.nodeType === Node.ELEMENT_NODE && !n.hasAttribute('slot')) ||
+            (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim()));
+        if (this.items && declarative && !this.#warnedConflict) {
+            this.#warnedConflict = true;
+            console.warn('[collection.source.conflict] <odd-side-nav> has both `items` and slotted entries; `items` wins and the slotted entries are not rendered.');
+        }
+    }
+}
+function containsCurrent(group, current) {
+    if (!current)
+        return false;
+    return group.items.some((item) => item.kind === 'group' ? containsCurrent(item, current) : item.id === current);
+}
+//# sourceMappingURL=side-nav.js.map

package/dist/side-nav/side-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.js","sourceRoot":"","sources":["../../src/side-nav/side-nav.ts"],"names":[],"mappings":"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"}

package/dist/side-nav/side-nav.recipe.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Arrangement of the side navigation. Narrow (the usual sidebar): one column. At 40rem of its
+ * own width (a drawer on a wide screen, a site map): top-level entries in three columns. The
+ * host is the size container, so this responds to the element, not the viewport.
+ */
+export declare const sideNavRecipe: import("../layout/index.js").LayoutRecipe;
+//# sourceMappingURL=side-nav.recipe.d.ts.map

package/dist/side-nav/side-nav.recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.recipe.d.ts","sourceRoot":"","sources":["../../src/side-nav/side-nav.recipe.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,aAAa,2CAexB,CAAC"}

package/dist/side-nav/side-nav.recipe.js

@@ -0,0 +1,24 @@
+import { token } from '@oddkin/tokens/refs';
+import { defineLayoutRecipe, grid, row, stack } from '../layout/index.js';
+/**
+ * Arrangement of the side navigation. Narrow (the usual sidebar): one column. At 40rem of its
+ * own width (a drawer on a wide screen, a site map): top-level entries in three columns. The
+ * host is the size container, so this responds to the element, not the viewport.
+ */
+export const sideNavRecipe = defineLayoutRecipe({
+    name: 'side-nav',
+    container: { name: 'side-nav' },
+    regions: {
+        root: stack({ gap: token('navigation.item.gap') }),
+        header: row({ justify: 'space-between', wrap: true }),
+        content: stack({ gap: token('navigation.item.gap') }),
+        'group-items': stack({ gap: token('navigation.item.gap') }),
+        footer: row({ wrap: true }),
+    },
+    when: {
+        '@container side-nav (min-inline-size: 40rem)': {
+            content: grid({ columns: 3, gap: token('navigation.item.gap') }),
+        },
+    },
+});
+//# sourceMappingURL=side-nav.recipe.js.map

package/dist/side-nav/side-nav.recipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.recipe.js","sourceRoot":"","sources":["../../src/side-nav/side-nav.recipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE1E;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,kBAAkB,CAAC;IAC9C,IAAI,EAAE,UAAU;IAChB,SAAS,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE;IAC/B,OAAO,EAAE;QACP,IAAI,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,qBAAqB,CAAC,EAAE,CAAC;QAClD,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QACrD,OAAO,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,qBAAqB,CAAC,EAAE,CAAC;QACrD,aAAa,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,qBAAqB,CAAC,EAAE,CAAC;QAC3D,MAAM,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;KAC5B;IACD,IAAI,EAAE;QACJ,8CAA8C,EAAE;YAC9C,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,qBAAqB,CAAC,EAAE,CAAC;SACjE;KACF;CACF,CAAC,CAAC"}

package/dist/side-nav/side-nav.recipe.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const sideNavRecipeStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=side-nav.recipe.styles.d.ts.map

package/dist/side-nav/side-nav.recipe.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.recipe.styles.d.ts","sourceRoot":"","sources":["../../src/side-nav/side-nav.recipe.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB,yCAE/B,CAAC"}

package/dist/side-nav/side-nav.recipe.styles.js

@@ -0,0 +1,5 @@
+// Generated from ./side-nav.recipe.ts by packages/components/test/recipes.test.ts (UPDATE_FIXTURES=1).
+// Do not edit: change the recipe and regenerate.
+import { unsafeCSS } from '@oddkin/core/styles';
+export const sideNavRecipeStyles = unsafeCSS('@layer odd.layout.base, odd.layout.variant, odd.layout.condition;\n@layer odd.layout.base {\n  :host {\n    display: block;\n    container-type: inline-size;\n    container-name: side-nav;\n  }\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: var(--odd-navigation-item-gap);\n    min-inline-size: 0;\n  }\n  .header {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--odd-layout-gap);\n    flex-wrap: wrap;\n    min-inline-size: 0;\n    justify-content: space-between;\n  }\n  .content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--odd-navigation-item-gap);\n    min-inline-size: 0;\n  }\n  .group-items {\n    display: flex;\n    flex-direction: column;\n    gap: var(--odd-navigation-item-gap);\n    min-inline-size: 0;\n  }\n  .footer {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--odd-layout-gap);\n    flex-wrap: wrap;\n    min-inline-size: 0;\n  }\n}\n@layer odd.layout.condition {\n  @container side-nav (min-inline-size: 40rem) {\n    .content {\n      display: grid;\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n}\n');
+//# sourceMappingURL=side-nav.recipe.styles.js.map

package/dist/side-nav/side-nav.recipe.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.recipe.styles.js","sourceRoot":"","sources":["../../src/side-nav/side-nav.recipe.styles.ts"],"names":[],"mappings":"AAAA,uGAAuG;AACvG,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,CAAC,MAAM,mBAAmB,GAAG,SAAS,CAC1C,spCAAspC,CACvpC,CAAC"}

package/dist/side-nav/side-nav.structural.styles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * What the navigation's behavior depends on beyond the shared navigation rows
+ * (`navRowStructuralStyles`): list resets, the hidden state of collapsed groups, slotted native
+ * links laid out as rows, and their forced-colors marker. No visual tokens; the arrangement comes
+ * from the `side-nav` recipe. The forced-colors marker is prefixed with `.root` to outrank a
+ * skin's state rules, which load later with equal specificity.
+ */
+export declare const sideNavStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=side-nav.structural.styles.d.ts.map

package/dist/side-nav/side-nav.structural.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.structural.styles.d.ts","sourceRoot":"","sources":["../../src/side-nav/side-nav.structural.styles.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,yCA0BnC,CAAC"}

package/dist/side-nav/side-nav.structural.styles.js

@@ -0,0 +1,36 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * What the navigation's behavior depends on beyond the shared navigation rows
+ * (`navRowStructuralStyles`): list resets, the hidden state of collapsed groups, slotted native
+ * links laid out as rows, and their forced-colors marker. No visual tokens; the arrangement comes
+ * from the `side-nav` recipe. The forced-colors marker is prefixed with `.root` to outrank a
+ * skin's state rules, which load later with equal specificity.
+ */
+export const sideNavStructuralStyles = css `
+  .content,
+  .group-items {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  ::slotted(a) {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    color: inherit;
+    text-decoration: none;
+    overflow-wrap: anywhere;
+  }
+  ::slotted(a[aria-current='page'])::before {
+    content: '';
+    position: absolute;
+    inset-inline-start: 0;
+  }
+  @media (forced-colors: active) {
+    .root ::slotted(a[aria-current='page'])::before {
+      background: Highlight;
+    }
+  }
+`;
+//# sourceMappingURL=side-nav.structural.styles.js.map

package/dist/side-nav/side-nav.structural.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.structural.styles.js","sourceRoot":"","sources":["../../src/side-nav/side-nav.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BzC,CAAC"}

package/dist/side-nav/side-nav.styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Oddkin's default visual styles for the side navigation, through `navigation.*` roles. Entry
+ * rows look as `navRowStyles` draws them; slotted native links take the same look here. A size
+ * container reports no content width, so in a shrink-to-fit parent the host takes a sidebar's.
+ */
+export declare const sideNavStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=side-nav.styles.d.ts.map

package/dist/side-nav/side-nav.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.styles.d.ts","sourceRoot":"","sources":["../../src/side-nav/side-nav.styles.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,aAAa,yCA8DzB,CAAC"}

package/dist/side-nav/side-nav.styles.js

@@ -0,0 +1,71 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * Oddkin's default visual styles for the side navigation, through `navigation.*` roles. Entry
+ * rows look as `navRowStyles` draws them; slotted native links take the same look here. A size
+ * container reports no content width, so in a shrink-to-fit parent the host takes a sidebar's.
+ */
+export const sideNavStyles = css `
+  :host {
+    contain-intrinsic-inline-size: ${token('layout.sidebar-width')};
+  }
+  .root {
+    color: ${token('color.text.primary')};
+    font-family: ${token('type.ui.family')};
+    font-size: ${token('type.ui.size')};
+    font-weight: ${token('type.ui.weight')};
+    line-height: ${token('type.ui.line-height')};
+    letter-spacing: ${token('type.ui.letter-spacing')};
+  }
+  .group-items {
+    margin-block-start: ${token('navigation.item.gap')};
+    padding-inline-start: ${token('navigation.indent')};
+  }
+  ::slotted(a) {
+    gap: ${token('navigation.item.gap')};
+    min-block-size: max(${token('navigation.item.min-height')}, ${token('target.min')});
+    padding: ${token('navigation.item.padding.block')} ${token('navigation.item.padding.inline')};
+    border-radius: ${token('control.radius')};
+    transition-property: background-color, color;
+    transition-duration: ${token('motion.duration.fast')};
+    transition-timing-function: ${token('motion.easing.standard')};
+  }
+  @media (hover: hover) {
+    ::slotted(a:hover) {
+      background: ${token('color.surface.hover')};
+    }
+  }
+  /* The current page is marked by a bar and weight, not colour alone. */
+  ::slotted(a[aria-current='page']) {
+    background: ${token('color.surface.hover')};
+    font-weight: ${token('font.weight.semibold')};
+  }
+  ::slotted(a[aria-current='page'])::before {
+    inset-block: ${token('navigation.item.padding.block')};
+    inline-size: ${token('border.width.strong')};
+    background: ${token('color.action.default')};
+  }
+  .badge {
+    flex: none;
+    padding-inline: ${token('space.xs')};
+    border-radius: ${token('radius.full')};
+    background: ${token('color.surface.sunken')};
+    color: ${token('color.text.secondary')};
+    font-size: ${token('type.small.size')};
+    line-height: ${token('type.small.line-height')};
+  }
+  /* Points down when collapsed and up when expanded, the same in either text direction. */
+  .chevron {
+    flex: none;
+    inline-size: 0.5em;
+    block-size: 0.5em;
+    border-inline-end: ${token('border.width.strong')} solid currentColor;
+    border-block-end: ${token('border.width.strong')} solid currentColor;
+    transform: translateY(-25%) rotate(45deg);
+    transition: transform ${token('motion.duration.fast')} ${token('motion.easing.standard')};
+  }
+  .toggle[aria-expanded='true'] .chevron {
+    transform: translateY(25%) rotate(-135deg);
+  }
+`;
+//# sourceMappingURL=side-nav.styles.js.map

package/dist/side-nav/side-nav.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.styles.js","sourceRoot":"","sources":["../../src/side-nav/side-nav.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;qCAEK,KAAK,CAAC,sBAAsB,CAAC;;;aAGrD,KAAK,CAAC,oBAAoB,CAAC;mBACrB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;sBACzB,KAAK,CAAC,wBAAwB,CAAC;;;0BAG3B,KAAK,CAAC,qBAAqB,CAAC;4BAC1B,KAAK,CAAC,mBAAmB,CAAC;;;WAG3C,KAAK,CAAC,qBAAqB,CAAC;0BACb,KAAK,CAAC,4BAA4B,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;eACtE,KAAK,CAAC,+BAA+B,CAAC,IAAI,KAAK,CAAC,gCAAgC,CAAC;qBAC3E,KAAK,CAAC,gBAAgB,CAAC;;2BAEjB,KAAK,CAAC,sBAAsB,CAAC;kCACtB,KAAK,CAAC,wBAAwB,CAAC;;;;oBAI7C,KAAK,CAAC,qBAAqB,CAAC;;;;;kBAK9B,KAAK,CAAC,qBAAqB,CAAC;mBAC3B,KAAK,CAAC,sBAAsB,CAAC;;;mBAG7B,KAAK,CAAC,+BAA+B,CAAC;mBACtC,KAAK,CAAC,qBAAqB,CAAC;kBAC7B,KAAK,CAAC,sBAAsB,CAAC;;;;sBAIzB,KAAK,CAAC,UAAU,CAAC;qBAClB,KAAK,CAAC,aAAa,CAAC;kBACvB,KAAK,CAAC,sBAAsB,CAAC;aAClC,KAAK,CAAC,sBAAsB,CAAC;iBACzB,KAAK,CAAC,iBAAiB,CAAC;mBACtB,KAAK,CAAC,wBAAwB,CAAC;;;;;;;yBAOzB,KAAK,CAAC,qBAAqB,CAAC;wBAC7B,KAAK,CAAC,qBAAqB,CAAC;;4BAExB,KAAK,CAAC,sBAAsB,CAAC,IAAI,KAAK,CAAC,wBAAwB,CAAC;;;;;CAK3F,CAAC"}

package/dist/side-nav/side-nav.template.d.ts

@@ -0,0 +1,10 @@
+import type { OddkinSideNav } from './side-nav.js';
+/**
+ * Anatomy: `part="base"` `<nav>` with the `header`, `list`, and `footer` regions of the
+ * `side-nav` recipe (classes `root`, `header`, `content`, `footer`). Entries render as native
+ * links, buttons for actions, and disclosure buttons with nested lists for groups. Item
+ * templates run outside the render's tracking, so state they show is bound as readables:
+ * changing `current` or expansion updates those attributes only.
+ */
+export declare const sideNavTemplate: (nav: OddkinSideNav) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=side-nav.template.d.ts.map

package/dist/side-nav/side-nav.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.template.d.ts","sourceRoot":"","sources":["../../src/side-nav/side-nav.template.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,QAAS,aAAa,mDAoBjD,CAAC"}