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

package/dist/tree/tree.d.ts

@@ -0,0 +1,82 @@
+import { OddkinElement, type ElementEvents } from '@oddkin/core/element';
+import type { Readable } from '@oddkin/core/reactive';
+import type { Scope } from '@oddkin/core/scope';
+import type { TreeItemRecord } from '../collection/collection.js';
+import { treeToggleEvent, type TreeRow } from '../collection/tree-model.js';
+export type { TreeItemRecord } from '../collection/collection.js';
+export type { TreeRow } from '../collection/tree-model.js';
+export declare const TREE_STRINGS: {
+    loading: string;
+    empty: string;
+};
+/** The user asked to expand or collapse an item; cancel it to keep the current state. */
+export { treeToggleEvent };
+/** The user selected an item (`value`, or `values` with `multiple`). */
+export declare const treeInputEvent: import("@oddkin/core/element").EventDefinition<void>;
+/** Dispatched after `input` for each user selection (native `change` is not composed). */
+export declare const treeChangeEvent: import("@oddkin/core/element").EventDefinition<void>;
+declare const OddkinTree_base: import("@oddkin/core/element").WithProps<typeof OddkinElement, {
+    readonly label: import("@oddkin/core/element").PropDefinition<string>;
+    readonly items: import("@oddkin/core/element").PropDefinition<readonly TreeItemRecord[] | undefined>;
+    readonly expanded: import("@oddkin/core/element").PropDefinition<readonly string[] | undefined>;
+    readonly value: import("@oddkin/core/element").PropDefinition<string>;
+    readonly values: import("@oddkin/core/element").PropDefinition<readonly string[] | undefined>;
+    readonly multiple: import("@oddkin/core/element").PropDefinition<boolean>;
+    readonly loading: import("@oddkin/core/element").PropDefinition<boolean>;
+    readonly strings: import("@oddkin/core/element").PropDefinition<Partial<{
+        loading: string;
+        empty: string;
+    }> | undefined>;
+}>;
+/**
+ * A hierarchy the user browses and selects in (APG tree view): rows of items that expand and
+ * collapse, from `items`. Items holding a selected item start expanded. Children of a `lazy` item
+ * load when it first expands: listen to `odd-toggle`, then assign new `items` in which that item
+ * has `children`.
+ *
+ * @slot empty - Shown when there are no items and nothing is loading (default `strings.empty`).
+ * @slot status - Status content such as an error and a retry button.
+ * @csspart base - The surface.
+ * @csspart tree - The `role="tree"` list of rows.
+ * @csspart item - Each row (`role="treeitem"`).
+ * @csspart loading - The busy row while `loading`.
+ * @csspart empty - The wrapper of the empty slot.
+ * @a11y A `tree` named by `label`, `aria-multiselectable` with `multiple`, `aria-busy` while loading. Each row is a `treeitem` with `aria-level`, `aria-setsize`, `aria-posinset`, `aria-expanded` when it has children, `aria-selected`, and `aria-busy` while its lazy children load. Selection is marked by a bar and weight, not colour alone. Disabled rows are skipped by the keyboard.
+ * @keyboard Tab reaches the selected row (or the first). Up and Down move between shown rows; Home and End go to the first and last. Right expands a closed row, or moves into an open one; Left collapses an open row, or moves to its parent (mirrored right to left). `*` expands every sibling. Enter or Space selects (with `multiple`, toggles). Typing moves to the next row whose label starts with the typed characters.
+ * @previewRole tree
+ * @useFor Browsing and choosing in nested data: files, folders, categories, an outline.
+ * @notFor Site navigation (use odd-side-nav); a flat list of choices (use odd-listbox); content sections (use odd-disclosure).
+ * @category Collections
+ * @customization 1 2 3
+ */
+export declare class OddkinTree extends OddkinTree_base {
+    #private;
+    static events: {
+        'odd-toggle': import("@oddkin/core/element").EventDefinition<import("../side-nav/side-nav.js").NavigationToggleDetail>;
+        input: import("@oddkin/core/element").EventDefinition<void>;
+        change: import("@oddkin/core/element").EventDefinition<void>;
+    };
+    readonly _events?: ElementEvents<typeof OddkinTree>;
+    /** @internal The shown rows, in order. */
+    readonly _rows: Readable<readonly TreeRow[]>;
+    /** @internal Localized strings. */
+    get _strings(): typeof TREE_STRINGS;
+    /** @internal Whether the item is selected. */
+    _isSelected(item: TreeItemRecord): boolean;
+    /** @internal The row elements, in the order of `_rows`. */
+    _rowElements(): HTMLElement[];
+    /** @internal Selects the item (with `multiple`, toggles it) and reports it. */
+    _select(item: TreeItemRecord): void;
+    /** @internal Template handler: a click on the chevron toggles; elsewhere on a row it selects. */
+    readonly _onClick: (event: MouseEvent) => void;
+    /** @internal Template handler: APG tree keys beyond the roving focus (Up, Down, Home, End). */
+    readonly _onKeydown: (event: KeyboardEvent) => void;
+    protected mounted(scope: Scope): void;
+    protected updated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-tree': OddkinTree;
+    }
+}
+//# sourceMappingURL=tree.d.ts.map

package/dist/tree/tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../src/tree/tree.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAe,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEtF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAa,eAAe,EAAE,KAAK,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAEvF,YAAY,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAClE,YAAY,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAE3D,eAAO,MAAM,YAAY;IAAK,OAAO;IAAc,KAAK;CAAwB,CAAC;AAEjF,yFAAyF;AACzF,OAAO,EAAE,eAAe,EAAE,CAAC;AAC3B,wEAAwE;AACxE,eAAO,MAAM,cAAc,sDAMzB,CAAC;AACH,0FAA0F;AAC1F,eAAO,MAAM,eAAe,sDAK1B,CAAC;;;;;;;;;;;;;;AAEH;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,UAAW,SAAQ,eAqB9B;;IACA,OAAgB,MAAM;QACpB,YAAY;QACZ,KAAK;QACL,MAAM;MACN;IACF,SAAiB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,UAAU,CAAC,CAAC;IAqB5D,0CAA0C;IAC1C,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,SAAS,OAAO,EAAE,CAAC,CAAoB;IAEhE,mCAAmC;IACnC,IAAI,QAAQ,IAAI,OAAO,YAAY,CAElC;IAED,8CAA8C;IAC9C,WAAW,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO,CAEzC;IAED,2DAA2D;IAC3D,YAAY,IAAI,WAAW,EAAE,CAE5B;IAiBD,+EAA+E;IAC/E,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,CAalC;IAED,iGAAiG;IACjG,QAAQ,CAAC,QAAQ,UAAW,UAAU,KAAG,IAAI,CAQ3C;IAEF,+FAA+F;IAC/F,QAAQ,CAAC,UAAU,UAAW,aAAa,KAAG,IAAI,CAsBhD;IAEF,UAAmB,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAU7C;IAID,UAAmB,OAAO,IAAI,IAAI,CAKjC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,UAAU,CAAC;KACxB;CACF"}

package/dist/tree/tree.define.d.ts

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

package/dist/tree/tree.define.d.ts.map

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

package/dist/tree/tree.define.js

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

package/dist/tree/tree.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.define.js","sourceRoot":"","sources":["../../src/tree/tree.define.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,CAAC,cAAc,CAAC,CAAC"}

package/dist/tree/tree.definition.d.ts

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

package/dist/tree/tree.definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.definition.d.ts","sourceRoot":"","sources":["../../src/tree/tree.definition.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAKvC,eAAO,MAAM,cAAc,8DAgBzB,CAAC"}

package/dist/tree/tree.definition.js

@@ -0,0 +1,30 @@
+import { compose } from '@oddkin/core/element';
+import { iconDefinition } from '../icon/icon.definition.js';
+import { focusRingStyles } from '../styles/focus-ring.styles.js';
+import { glyphStyles } from '../styles/glyphs.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 { spinnerStyles } from '../styles/spinner.styles.js';
+import { OddkinTree } from './tree.js';
+import { treeStructuralStyles } from './tree.structural.styles.js';
+import { treeStyles } from './tree.styles.js';
+import { treeTemplate } from './tree.template.js';
+export const treeDefinition = compose({
+    name: 'odd-tree',
+    element: OddkinTree,
+    template: treeTemplate,
+    styles: [
+        hostStyles,
+        navRowStructuralStyles,
+        treeStructuralStyles,
+        glyphStyles,
+        spinnerStyles,
+        focusRingStyles,
+        navRowStyles,
+        treeStyles,
+    ],
+    // Item icons are drawn by odd-icon.
+    dependencies: { icon: iconDefinition },
+});
+//# sourceMappingURL=tree.definition.js.map

package/dist/tree/tree.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.definition.js","sourceRoot":"","sources":["../../src/tree/tree.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,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,6BAA6B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,OAAO,CAAC;IACpC,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,YAAY;IACtB,MAAM,EAAE;QACN,UAAU;QACV,sBAAsB;QACtB,oBAAoB;QACpB,WAAW;QACX,aAAa;QACb,eAAe;QACf,YAAY;QACZ,UAAU;KACX;IACD,oCAAoC;IACpC,YAAY,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;CACvC,CAAC,CAAC"}

package/dist/tree/tree.js

@@ -0,0 +1,192 @@
+import { FocusRecovery, RovingFocus } from '@oddkin/core/controllers/focus';
+import { Typeahead } from '@oddkin/core/controllers/typeahead';
+import { OddkinElement, event, prop } from '@oddkin/core/element';
+import { strings } from '@oddkin/core/i18n';
+import { TreeModel, treeToggleEvent } from '../collection/tree-model.js';
+export const TREE_STRINGS = { loading: 'Loading…', empty: 'No items available' };
+/** The user asked to expand or collapse an item; cancel it to keep the current state. */
+export { treeToggleEvent };
+/** The user selected an item (`value`, or `values` with `multiple`). */
+export const treeInputEvent = event('input', {
+    bubbles: true,
+    composed: true,
+    cancelable: false,
+    syncs: 'value',
+    intent: 'user',
+});
+/** Dispatched after `input` for each user selection (native `change` is not composed). */
+export const treeChangeEvent = event('change', {
+    bubbles: true,
+    composed: false,
+    cancelable: false,
+    intent: 'user',
+});
+/**
+ * A hierarchy the user browses and selects in (APG tree view): rows of items that expand and
+ * collapse, from `items`. Items holding a selected item start expanded. Children of a `lazy` item
+ * load when it first expands: listen to `odd-toggle`, then assign new `items` in which that item
+ * has `children`.
+ *
+ * @slot empty - Shown when there are no items and nothing is loading (default `strings.empty`).
+ * @slot status - Status content such as an error and a retry button.
+ * @csspart base - The surface.
+ * @csspart tree - The `role="tree"` list of rows.
+ * @csspart item - Each row (`role="treeitem"`).
+ * @csspart loading - The busy row while `loading`.
+ * @csspart empty - The wrapper of the empty slot.
+ * @a11y A `tree` named by `label`, `aria-multiselectable` with `multiple`, `aria-busy` while loading. Each row is a `treeitem` with `aria-level`, `aria-setsize`, `aria-posinset`, `aria-expanded` when it has children, `aria-selected`, and `aria-busy` while its lazy children load. Selection is marked by a bar and weight, not colour alone. Disabled rows are skipped by the keyboard.
+ * @keyboard Tab reaches the selected row (or the first). Up and Down move between shown rows; Home and End go to the first and last. Right expands a closed row, or moves into an open one; Left collapses an open row, or moves to its parent (mirrored right to left). `*` expands every sibling. Enter or Space selects (with `multiple`, toggles). Typing moves to the next row whose label starts with the typed characters.
+ * @previewRole tree
+ * @useFor Browsing and choosing in nested data: files, folders, categories, an outline.
+ * @notFor Site navigation (use odd-side-nav); a flat list of choices (use odd-listbox); content sections (use odd-disclosure).
+ * @category Collections
+ * @customization 1 2 3
+ */
+export class OddkinTree extends OddkinElement.with({
+    label: prop.string({ default: '', description: 'Names the tree.' }),
+    items: prop.object({
+        description: 'The top-level items; each may hold `children`, or be `lazy`.',
+    }),
+    expanded: prop.object({
+        description: 'Ids of expanded items, owned by the caller. Omit it to let the element track expansion.',
+    }),
+    value: prop.string({ default: '', description: 'Id of the selected item.' }),
+    values: prop.object({
+        description: 'Ids of the selected items with `multiple`.',
+    }),
+    multiple: prop.boolean({ reflect: true, description: 'Several items can be selected.' }),
+    loading: prop.boolean({
+        reflect: true,
+        description: 'Shows a busy row and marks the tree busy.',
+    }),
+    strings: prop.object({
+        description: 'Localized string overrides.',
+    }),
+}) {
+    static events = {
+        'odd-toggle': treeToggleEvent,
+        input: treeInputEvent,
+        change: treeChangeEvent,
+    };
+    #model = new TreeModel({
+        items: () => this.items,
+        expanded: () => this.expanded,
+        selected: (item) => this._isSelected(item),
+        report: (detail) => this.emit(treeToggleEvent, detail),
+    });
+    #roving = new RovingFocus({
+        target: () => this.#tree(),
+        items: () => this._rowElements(),
+        orientation: 'vertical',
+        wrap: false,
+    });
+    #typeahead = new Typeahead({
+        items: () => this._rowElements(),
+        active: () => this.#roving.activeIndex,
+        text: (row) => row.querySelector('.label')?.textContent ?? '',
+        onMatch: (index) => this.#roving.setActive(index, { focus: true }),
+    });
+    /** @internal The shown rows, in order. */
+    _rows = this.#model.rows;
+    /** @internal Localized strings. */
+    get _strings() {
+        return strings(TREE_STRINGS, this.strings);
+    }
+    /** @internal Whether the item is selected. */
+    _isSelected(item) {
+        return this.multiple ? (this.values ?? []).includes(item.id) : this.value === item.id;
+    }
+    /** @internal The row elements, in the order of `_rows`. */
+    _rowElements() {
+        return [...(this.shadowRoot?.querySelectorAll('[role="treeitem"]') ?? [])];
+    }
+    #tree() {
+        return this.shadowRoot?.querySelector('[part~="tree"]');
+    }
+    #rowOf(event) {
+        const elements = this._rowElements();
+        const index = elements.findIndex((row) => event.composedPath().includes(row));
+        return this._rows.peek()[index];
+    }
+    #focus(item) {
+        const index = this._rows.peek().findIndex((row) => row.item === item);
+        if (index >= 0)
+            this.#roving.setActive(index, { focus: true });
+    }
+    /** @internal Selects the item (with `multiple`, toggles it) and reports it. */
+    _select(item) {
+        if (item.disabled)
+            return;
+        if (this.multiple) {
+            const values = this.values ?? [];
+            this.values = values.includes(item.id)
+                ? values.filter((id) => id !== item.id)
+                : [...values, item.id];
+        }
+        else {
+            if (this.value === item.id)
+                return;
+            this.value = item.id;
+        }
+        this.emit(treeInputEvent);
+        this.emit(treeChangeEvent);
+    }
+    /** @internal Template handler: a click on the chevron toggles; elsewhere on a row it selects. */
+    _onClick = (event) => {
+        const row = this.#rowOf(event);
+        if (!row)
+            return;
+        const toggle = event
+            .composedPath()
+            .some((node) => node.classList?.contains('toggle'));
+        if (toggle)
+            this.#model.toggle(row.item);
+        else
+            this._select(row.item);
+    };
+    /** @internal Template handler: APG tree keys beyond the roving focus (Up, Down, Home, End). */
+    _onKeydown = (event) => {
+        if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const row = this.#rowOf(event);
+        if (!row || event.isComposing)
+            return;
+        const { item } = row;
+        const rtl = getComputedStyle(this).direction === 'rtl';
+        switch (event.key) {
+            case 'Enter':
+                this._select(item);
+                break;
+            case ' ':
+                // Space continues a typeahead query in progress; otherwise it selects.
+                if (!this.#typeahead.type(' '))
+                    this._select(item);
+                break;
+            default:
+                if (!this.#model.key(event.key, row, rtl, (to) => this.#focus(to)) &&
+                    !this.#typeahead.type(event.key))
+                    return;
+        }
+        event.preventDefault();
+    };
+    mounted(scope) {
+        const root = this.shadowRoot;
+        scope.use(this.#typeahead);
+        scope.use(this.#roving);
+        scope.use(new FocusRecovery({
+            root: () => root,
+            fallback: () => this._rowElements()[this.#roving.activeIndex],
+        }));
+    }
+    // After each render: the focused row keeps the Tab stop as rows come and go above it; with
+    // focus outside, the selected row takes it.
+    updated() {
+        const focused = this._rowElements().indexOf(this.shadowRoot?.activeElement);
+        const index = focused >= 0 ? focused : this._rows.peek().findIndex((row) => row.selected);
+        if (index >= 0)
+            this.#roving.setActive(index);
+        else
+            this.#roving.sync();
+    }
+}
+//# sourceMappingURL=tree.js.map

package/dist/tree/tree.js.map

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

package/dist/tree/tree.recipe.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Arrangement of the tree (layout-recipes.md §14): the surface's content and the rows in columns,
+ * and the busy and empty rows with the glyph beside the text. odd-picker's tree content shares them
+ * through the tree's structural sheet.
+ */
+export declare const treeRecipe: import("../layout/index.js").LayoutRecipe;
+//# sourceMappingURL=tree.recipe.d.ts.map

package/dist/tree/tree.recipe.d.ts.map

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

package/dist/tree/tree.recipe.js

@@ -0,0 +1,16 @@
+import { token } from '@oddkin/tokens/refs';
+import { defineLayoutRecipe, row, stack } from '../layout/index.js';
+/**
+ * Arrangement of the tree (layout-recipes.md §14): the surface's content and the rows in columns,
+ * and the busy and empty rows with the glyph beside the text. odd-picker's tree content shares them
+ * through the tree's structural sheet.
+ */
+export const treeRecipe = defineLayoutRecipe({
+    name: 'tree',
+    regions: {
+        root: stack({ gap: token('space.sm') }),
+        tree: stack({ gap: token('navigation.item.gap') }),
+        state: row({ gap: token('space.sm') }),
+    },
+});
+//# sourceMappingURL=tree.recipe.js.map

package/dist/tree/tree.recipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.recipe.js","sourceRoot":"","sources":["../../src/tree/tree.recipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAEpE;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAC;IAC3C,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE;QACP,IAAI,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC;QACvC,IAAI,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,qBAAqB,CAAC,EAAE,CAAC;QAClD,KAAK,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC;KACvC;CACF,CAAC,CAAC"}

package/dist/tree/tree.recipe.styles.d.ts

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

package/dist/tree/tree.recipe.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.recipe.styles.d.ts","sourceRoot":"","sources":["../../src/tree/tree.recipe.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,yCAE5B,CAAC"}

package/dist/tree/tree.recipe.styles.js

@@ -0,0 +1,5 @@
+// Generated from ./tree.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 treeRecipeStyles = unsafeCSS('@layer odd.layout.base, odd.layout.variant, odd.layout.condition;\n@layer odd.layout.base {\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: var(--odd-space-sm);\n    min-inline-size: 0;\n  }\n  .tree {\n    display: flex;\n    flex-direction: column;\n    gap: var(--odd-navigation-item-gap);\n    min-inline-size: 0;\n  }\n  .state {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--odd-space-sm);\n    flex-wrap: nowrap;\n    min-inline-size: 0;\n  }\n}\n');
+//# sourceMappingURL=tree.recipe.styles.js.map

package/dist/tree/tree.recipe.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.recipe.styles.js","sourceRoot":"","sources":["../../src/tree/tree.recipe.styles.ts"],"names":[],"mappings":"AAAA,mGAAmG;AACnG,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,CAAC,MAAM,gBAAgB,GAAG,SAAS,CACvC,wgBAAwgB,CACzgB,CAAC"}

package/dist/tree/tree.structural.styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * What the tree's behaviour depends on beyond the navigation rows (`navRowStructuralStyles`):
+ * a column of rows indented by their level, the chevron box (also the leaf rows' spacer, so labels
+ * at one level line up), and the state rows. No visual tokens; the skin sets `--_indent`.
+ */
+export declare const treeStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=tree.structural.styles.d.ts.map

package/dist/tree/tree.structural.styles.d.ts.map

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

package/dist/tree/tree.structural.styles.js

@@ -0,0 +1,26 @@
+import { css } from '@oddkin/core/styles';
+import { treeRecipeStyles } from './tree.recipe.styles.js';
+/**
+ * What the tree's behaviour depends on beyond the navigation rows (`navRowStructuralStyles`):
+ * a column of rows indented by their level, the chevron box (also the leaf rows' spacer, so labels
+ * at one level line up), and the state rows. No visual tokens; the skin sets `--_indent`.
+ */
+export const treeStructuralStyles = css `
+  ${treeRecipeStyles}
+  :host {
+    display: block;
+  }
+  .entry {
+    inline-size: auto;
+    margin-inline-start: calc(var(--_level, 0) * var(--_indent, 1em));
+  }
+  .toggle {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.25em;
+    block-size: 1.25em;
+  }
+`;
+//# sourceMappingURL=tree.structural.styles.js.map

package/dist/tree/tree.structural.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.structural.styles.js","sourceRoot":"","sources":["../../src/tree/tree.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;IACnC,gBAAgB;;;;;;;;;;;;;;;;CAgBnB,CAAC"}

package/dist/tree/tree.styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Oddkin's default visual styles for the tree: Figma `Tree`'s surface (the default surface, a
+ * default border, `card.radius`), rows as `navRowStyles` draws them indented by
+ * `navigation.indent`, and the empty and loading states in secondary text.
+ */
+export declare const treeStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=tree.styles.d.ts.map

package/dist/tree/tree.styles.d.ts.map

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

package/dist/tree/tree.styles.js

@@ -0,0 +1,27 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * Oddkin's default visual styles for the tree: Figma `Tree`'s surface (the default surface, a
+ * default border, `card.radius`), rows as `navRowStyles` draws them indented by
+ * `navigation.indent`, and the empty and loading states in secondary text.
+ */
+export const treeStyles = css `
+  .root {
+    --_indent: ${token('navigation.indent')};
+    padding: ${token('space.sm')};
+    border: ${token('border.width.default')} solid ${token('color.border.default')};
+    border-radius: ${token('card.radius')};
+    background: ${token('color.surface.default')};
+    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')};
+  }
+  .state {
+    padding: ${token('space.md')};
+    color: ${token('color.text.secondary')};
+  }
+`;
+//# sourceMappingURL=tree.styles.js.map

package/dist/tree/tree.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.styles.js","sourceRoot":"","sources":["../../src/tree/tree.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,UAAU,GAAG,GAAG,CAAA;;iBAEZ,KAAK,CAAC,mBAAmB,CAAC;eAC5B,KAAK,CAAC,UAAU,CAAC;cAClB,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,sBAAsB,CAAC;qBAC7D,KAAK,CAAC,aAAa,CAAC;kBACvB,KAAK,CAAC,uBAAuB,CAAC;aACnC,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;;;eAGtC,KAAK,CAAC,UAAU,CAAC;aACnB,KAAK,CAAC,sBAAsB,CAAC;;CAEzC,CAAC"}

package/dist/tree/tree.template.d.ts

@@ -0,0 +1,16 @@
+import type { TreeRow } from '../collection/tree-model.js';
+import type { OddkinTree } from './tree.js';
+/**
+ * One `treeitem` row (navigation-row module), shared with `odd-picker`'s tree: its place in the
+ * hierarchy, expansion, selection, and busy state; a chevron (`.toggle`, a click on it expands or
+ * collapses), an optional icon (`odd-icon`), and the label. `active` marks the active descendant.
+ */
+export declare const treeItemTemplate: (row: TreeRow, multiple: boolean, active?: boolean) => import("@oddkin/core/template").TemplateResult;
+/**
+ * Anatomy: `part="base"` surface holding the `part="tree"` rows (flat `treeitem` rows with their
+ * level, from the shown part of the hierarchy), the `part="loading"` busy row, the `part="empty"`
+ * state, and the `status` slot. A row is a chevron (`.toggle`; a click on it expands or
+ * collapses), an optional icon, and the label.
+ */
+export declare const treeTemplate: (tree: OddkinTree) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=tree.template.d.ts.map

package/dist/tree/tree.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.template.d.ts","sourceRoot":"","sources":["../../src/tree/tree.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAG3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAE5C;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,QAAS,OAAO,YAAY,OAAO,qEAoBvD,CAAC;AAEV;;;;;GAKG;AACH,eAAO,MAAM,YAAY,SAAU,UAAU,mDA6B5C,CAAC"}

package/dist/tree/tree.template.js

@@ -0,0 +1,62 @@
+import { styleMap } from '@oddkin/core/helpers/style-map';
+import { html, repeat } from '@oddkin/core/template';
+import { chevronDownGlyph, chevronEndGlyph } from '../styles/glyphs.js';
+import { spinnerTemplate } from '../styles/spinner.styles.js';
+/**
+ * One `treeitem` row (navigation-row module), shared with `odd-picker`'s tree: its place in the
+ * hierarchy, expansion, selection, and busy state; a chevron (`.toggle`, a click on it expands or
+ * collapses), an optional icon (`odd-icon`), and the label. `active` marks the active descendant.
+ */
+export const treeItemTemplate = (row, multiple, active = false) => html `<div
+    role="treeitem"
+    part="item"
+    class=${active ? 'entry active' : 'entry'}
+    aria-level=${row.level}
+    aria-setsize=${row.size}
+    aria-posinset=${row.position}
+    aria-expanded=${row.expandable ? String(row.expanded) : null}
+    aria-selected=${row.selected ? 'true' : multiple ? 'false' : null}
+    aria-disabled=${row.item.disabled ? 'true' : null}
+    aria-busy=${row.busy ? 'true' : null}
+    style=${styleMap({ '--_level': String(row.level - 1) })}
+  >
+    <span class="toggle" aria-hidden="true"
+      >${row.busy ? spinnerTemplate : row.expandable ? (row.expanded ? chevronDownGlyph : chevronEndGlyph) : null}</span
+    >${row.item.icon ? html `<odd-icon src=${row.item.icon} size="sm"></odd-icon>` : null}<span
+      class="label"
+      >${row.item.label}</span
+    >
+  </div>`;
+/**
+ * Anatomy: `part="base"` surface holding the `part="tree"` rows (flat `treeitem` rows with their
+ * level, from the shown part of the hierarchy), the `part="loading"` busy row, the `part="empty"`
+ * state, and the `status` slot. A row is a chevron (`.toggle`; a click on it expands or
+ * collapses), an optional icon, and the label.
+ */
+export const treeTemplate = (tree) => {
+    const rows = tree._rows.value;
+    const strings = tree._strings;
+    return html `<div part="base" class="root">
+    <div
+      part="tree"
+      class="tree"
+      role="tree"
+      aria-label=${tree.label || null}
+      aria-multiselectable=${tree.multiple ? 'true' : null}
+      aria-busy=${tree.loading ? 'true' : null}
+      ?hidden=${!rows.length}
+      @click=${tree._onClick}
+      @keydown=${tree._onKeydown}
+    >
+      ${repeat(rows, (each) => each.item.id, (each) => treeItemTemplate(each, tree.multiple))}
+    </div>
+    <div part="loading" class="state" ?hidden=${!tree.loading}>
+      ${spinnerTemplate}${strings.loading}
+    </div>
+    <div part="empty" class="state" ?hidden=${rows.length > 0 || tree.loading}>
+      <slot name="empty">${strings.empty}</slot>
+    </div>
+    <slot name="status"></slot>
+  </div>`;
+};
+//# sourceMappingURL=tree.template.js.map

package/dist/tree/tree.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.template.js","sourceRoot":"","sources":["../../src/tree/tree.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAErD,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAG9D;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,GAAY,EAAE,QAAiB,EAAE,MAAM,GAAG,KAAK,EAAE,EAAE,CAClF,IAAI,CAAA;;;YAGM,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO;iBAC5B,GAAG,CAAC,KAAK;mBACP,GAAG,CAAC,IAAI;oBACP,GAAG,CAAC,QAAQ;oBACZ,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI;oBAC5C,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI;oBACjD,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;gBACrC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;YAC5B,QAAQ,CAAC,EAAE,UAAU,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC;;;SAGlD,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,IAAI;OAC1G,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,iBAAiB,GAAG,CAAC,IAAI,CAAC,IAAI,wBAAwB,CAAC,CAAC,CAAC,IAAI;;SAE/E,GAAG,CAAC,IAAI,CAAC,KAAK;;SAEd,CAAC;AAEV;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAgB,EAAE,EAAE;IAC/C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC9B,OAAO,IAAI,CAAA;;;;;mBAKM,IAAI,CAAC,KAAK,IAAI,IAAI;6BACR,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;kBACxC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;gBAC9B,CAAC,IAAI,CAAC,MAAM;eACb,IAAI,CAAC,QAAQ;iBACX,IAAI,CAAC,UAAU;;QAExB,MAAM,CACN,IAAI,EACJ,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EACtB,CAAC,IAAI,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAChD;;gDAEyC,CAAC,IAAI,CAAC,OAAO;QACrD,eAAe,GAAG,OAAO,CAAC,OAAO;;8CAEK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO;2BAClD,OAAO,CAAC,KAAK;;;SAG/B,CAAC;AACV,CAAC,CAAC"}

package/dist/validation-summary/foundation.d.ts

@@ -0,0 +1,6 @@
+export { hostStyles } from '../styles/host.styles.js';
+export { glyphStyles } from '../styles/glyphs.js';
+export { OddkinValidationSummary, VALIDATION_SUMMARY_STRINGS, type ValidationEntry, } from './validation-summary.js';
+export { validationSummaryTemplate } from './validation-summary.template.js';
+export { validationSummaryStructuralStyles } from './validation-summary.structural.styles.js';
+//# sourceMappingURL=foundation.d.ts.map

package/dist/validation-summary/foundation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.d.ts","sourceRoot":"","sources":["../../src/validation-summary/foundation.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EACL,uBAAuB,EACvB,0BAA0B,EAC1B,KAAK,eAAe,GACrB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,iCAAiC,EAAE,MAAM,2CAA2C,CAAC"}

package/dist/validation-summary/foundation.js

@@ -0,0 +1,8 @@
+// Skin-free foundation: behavior, anatomy, and structural styles (shared host defaults first).
+// Loads no default visual styles and registers nothing (multi-product.md §4).
+export { hostStyles } from '../styles/host.styles.js';
+export { glyphStyles } from '../styles/glyphs.js';
+export { OddkinValidationSummary, VALIDATION_SUMMARY_STRINGS, } from './validation-summary.js';
+export { validationSummaryTemplate } from './validation-summary.template.js';
+export { validationSummaryStructuralStyles } from './validation-summary.structural.styles.js';
+//# sourceMappingURL=foundation.js.map

package/dist/validation-summary/foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["../../src/validation-summary/foundation.ts"],"names":[],"mappings":"AAAA,+FAA+F;AAC/F,8EAA8E;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EACL,uBAAuB,EACvB,0BAA0B,GAE3B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,iCAAiC,EAAE,MAAM,2CAA2C,CAAC"}

package/dist/validation-summary/index.d.ts

@@ -0,0 +1,6 @@
+export { OddkinValidationSummary, VALIDATION_SUMMARY_STRINGS, type ValidationEntry, } from './validation-summary.js';
+export { validationSummaryTemplate } from './validation-summary.template.js';
+export { validationSummaryStructuralStyles } from './validation-summary.structural.styles.js';
+export { validationSummaryStyles } from './validation-summary.styles.js';
+export { validationSummaryDefinition } from './validation-summary.definition.js';
+//# sourceMappingURL=index.d.ts.map