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

package/dist/picker/picker.js

@@ -0,0 +1,276 @@
+import { Typeahead } from '@oddkin/core/controllers/typeahead';
+import { prop } from '@oddkin/core/element';
+import { format, formatNumber, langOf, strings } from '@oddkin/core/i18n';
+import { optionChangeEvent, optionInputEvent } from '../collection/option-control.js';
+import { OddkinOptionField, OPTION_FIELD_STRINGS } from '../collection/option-field.js';
+import { TreeModel, treeToggleEvent } from '../collection/tree-model.js';
+export const PICKER_STRINGS = {
+    ...OPTION_FIELD_STRINGS,
+    loading: 'Loading…',
+    empty: 'No items available',
+    hint: 'Choose one item',
+    close: 'Close',
+    done: 'Done',
+    path: '{parent} / {label}',
+};
+/**
+ * A field that opens a list or a hierarchy to choose from (APG select-only combobox): a popup
+ * listbox of options, or, with `items`, a popup tree whose rows expand and collapse without
+ * selecting. Single: activating a row chooses it and closes. Multiple: rows toggle at once, the
+ * chosen values show in the field as `view` says (chips with "+N" by default, as on odd-combobox), and Done closes. Options
+ * come from `<option>` and `<optgroup>` children, written as for a native select, or from
+ * `options`; a hierarchy comes from `items`.
+ *
+ * @slot empty - Shown when there are no options or items and nothing is loading (default `strings.empty`).
+ * @slot status - Status content such as an error and a retry button, shown in the popup.
+ * @csspart field - Wrapper of label, description, control, and error.
+ * @csspart label - The visible label.
+ * @csspart description - Help text, referenced by `aria-describedby`.
+ * @csspart control - The field box holding the trigger and, with `multiple`, the chips.
+ * @csspart trigger - The `role="combobox"` element showing the chosen value or the placeholder; it keeps focus.
+ * @csspart value - The chosen item's text in the trigger (single).
+ * @csspart chip - Each chosen value with `multiple`.
+ * @csspart chip-remove - The button that removes a chip's value.
+ * @csspart more - The "+N" chip that stands for the chips not shown.
+ * @csspart clear - The button that clears the value, shown while there is one.
+ * @csspart popup - The popup surface holding the list or tree, the states, and the footer.
+ * @csspart listbox - The `role="listbox"` element (without `items`).
+ * @csspart option - Each option row.
+ * @csspart group - Each group's heading.
+ * @csspart tree - The `role="tree"` element (with `items`).
+ * @csspart item - Each tree row (`role="treeitem"`).
+ * @csspart loading - The busy row while `loading`.
+ * @csspart empty - The wrapper of the empty slot.
+ * @csspart footer - The popup's footer: the summary and its actions.
+ * @csspart summary - "Choose one item" (`strings.hint`), or with `multiple` the count (`strings.count`).
+ * @csspart clear-all - The footer's Clear button with `multiple`.
+ * @csspart close - The footer's Close button, or Done with `multiple`.
+ * @csspart error - The error message, referenced by `aria-describedby`.
+ * @cssstate user-invalid - The field shows its error: `error` is set, or nothing is chosen while `required` after the user left the field or a validity check failed.
+ * @a11y The trigger has `role="combobox"`, `aria-haspopup="tree"` with `items`, `aria-expanded`, and `aria-controls`; it keeps focus and names the active row with `aria-activedescendant`; `label` names it. Rows carry `aria-selected`; the listbox or tree has `aria-multiselectable` with `multiple`; tree rows carry `aria-level`, `aria-setsize`, `aria-posinset`, and `aria-expanded`. The active row's ring is drawn apart from the selection, which is a surface and check (options) or a bar and weight (tree rows), not colour alone. Chips are a list named by `strings.selected`, each remove button named by `strings.remove`.
+ * @keyboard Tab reaches the trigger, then the footer while the popup is open. Down, Up, Enter, Space, and Alt+Down open the popup on the chosen (or first) row; Home and End open it on the first and last; typing opens it on the next row whose label starts with the typed characters. In the popup: Up, Down, Home, and End move the active row; Enter or Space chooses it (single: closes; multiple: toggles and stays open); Escape and Alt+Up close without changing the value, and focus stays on the trigger. In a tree, 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), and `*` expands every sibling. On the closed trigger, Backspace removes the last value; with `multiple`, Left moves to the chips: Left and Right move between them, Backspace and Delete remove one, Escape returns.
+ * @previewRole picker
+ * @useFor Choosing from a fixed list or a hierarchy in a form: map layers, folders, categories, one or several.
+ * @notFor A short list of plain options (use odd-select); a long list to search (use odd-combobox); browsing a hierarchy without a form value (use odd-tree).
+ * @category Forms
+ * @customization 1 2 3
+ */
+export class OddkinPicker extends OddkinOptionField.with({
+    placeholder: prop.string({ default: '', description: 'Text shown while nothing is chosen.' }),
+    items: prop.object({
+        description: 'A hierarchy to choose from: when set, the popup is a tree, and `<option>` children and `options` are not shown.',
+    }),
+    expanded: prop.object({
+        description: 'Ids of expanded items with `items`, owned by the caller. Omit it to let the element track expansion.',
+    }),
+    strings: prop.object({
+        description: 'Localized string overrides; `remove` takes `{label}`, `more` and `count` take `{count}`, `path` takes `{parent}` and `{label}`.',
+    }),
+}) {
+    static events = {
+        input: optionInputEvent,
+        change: optionChangeEvent,
+        'odd-toggle': treeToggleEvent,
+    };
+    #model = new TreeModel({
+        items: () => this.items,
+        expanded: () => this.expanded,
+        selected: (item) => this._selected.value.includes(item.id),
+        report: (detail) => this.emit(treeToggleEvent, detail),
+    });
+    #typeahead = new Typeahead({
+        items: () => this._rowElements(),
+        active: () => this._active,
+        text: (row) => row.querySelector('.label, .option-text')?.textContent ?? '',
+        onMatch: (index) => this._setActive(index),
+    });
+    /** @internal The tree's shown rows (with `items`). */
+    _rows = this.#model.rows;
+    /** @internal Localized strings. */
+    get _strings() {
+        return strings(PICKER_STRINGS, this.strings);
+    }
+    /** @internal The footer's text: the hint, or with `multiple` the count. */
+    get _summary() {
+        const strings = this._strings;
+        if (!this.multiple)
+            return strings.hint;
+        const count = formatNumber(this._selected.value.length, langOf(this));
+        return format(strings.count, { count });
+    }
+    _overlayOptions() {
+        const options = super._overlayOptions();
+        return {
+            ...options,
+            // Below the field with no gap, as Figma joins them; the focus ring surrounds both.
+            offset: 0,
+            onPlace: ({ side, anchor }) => {
+                const popup = this._popup();
+                if (!popup)
+                    return;
+                popup.dataset.side = side;
+                popup.style.setProperty('--_anchor-block-size', `${anchor.height}px`);
+            },
+        };
+    }
+    /** @internal The chips stay on one line: Figma keeps "+N" while the popup is open. */
+    _collapses() {
+        return true;
+    }
+    /** @internal The label of a value: the item's (with `items`) or the option's, else the value. */
+    _labelOf(value) {
+        if (!this.items)
+            return super._labelOf(value);
+        return this.#model.path(value).at(-1)?.label ?? value;
+    }
+    /** @internal The single value as the trigger shows it: a tree item after its parent (`strings.path`). */
+    get _valueText() {
+        const value = this.value;
+        if (!value)
+            return '';
+        const path = this.items ? this.#model.path(value) : [];
+        const parent = path.at(-2);
+        if (!parent)
+            return this._labelOf(value);
+        return format(this._strings.path, { parent: parent.label, label: path.at(-1).label });
+    }
+    _anchor() {
+        return this._entry();
+    }
+    /** The row at `index` as a choice: a tree item or an option. */
+    #record(index) {
+        if (!this.items)
+            return this._options.peek()[index];
+        const item = this._rows.peek()[index]?.item;
+        return item && { value: item.id, label: item.label, disabled: !!item.disabled };
+    }
+    /** @internal Chooses the row at `index`: single selects and closes, multiple toggles. */
+    _choose(index) {
+        const record = this._usable(this.#record(index));
+        if (!record)
+            return;
+        this._toggle(record);
+        if (!this.multiple)
+            this._hide();
+    }
+    #activate(item) {
+        this._setActive(this._rows.peek().findIndex((row) => row.item === item));
+    }
+    /** @internal Template handler: the trigger's keys (the active row's arrows are the controller's). */
+    _onKeydown = (event) => {
+        if (event.defaultPrevented || event.isComposing || event.ctrlKey || event.metaKey)
+            return;
+        const key = event.key;
+        if (this._showing) {
+            const active = this._active;
+            if (event.altKey) {
+                if (key !== 'ArrowUp')
+                    return;
+                this._hide();
+            }
+            else if (key === 'Escape') {
+                this._hide();
+                // Only the popup closes, not a dialog around the picker.
+                event.stopPropagation();
+            }
+            else if (key === 'Enter' || (key === ' ' && !this.#typeahead.query)) {
+                if (active >= 0)
+                    this._choose(active);
+            }
+            else {
+                const row = this.items ? this._rows.peek()[active] : undefined;
+                const rtl = getComputedStyle(this).direction === 'rtl';
+                if (!row || !this.#model.key(key, row, rtl, (item) => this.#activate(item)))
+                    if (!this.#typeahead.type(key))
+                        return;
+            }
+        }
+        else {
+            switch (key) {
+                case 'ArrowDown':
+                case 'ArrowUp':
+                case 'Enter':
+                case ' ':
+                    this._show('selected');
+                    break;
+                case 'Home':
+                case 'End':
+                    if (event.altKey)
+                        return;
+                    this._show(key === 'Home' ? 'first' : 'last');
+                    break;
+                case 'Backspace': {
+                    const last = this._selected.peek().at(-1);
+                    if (last === undefined || !this._editable)
+                        return;
+                    this._remove(last);
+                    break;
+                }
+                case 'ArrowLeft':
+                case 'ArrowRight': {
+                    const rtl = getComputedStyle(this).direction === 'rtl';
+                    if (!this.multiple || key !== (rtl ? 'ArrowRight' : 'ArrowLeft'))
+                        return;
+                    if (!this._focusChips())
+                        return;
+                    break;
+                }
+                default:
+                    if (event.altKey || [...key].length !== 1 || !this._editable)
+                        return;
+                    this._show();
+                    this.#typeahead.type(key);
+            }
+        }
+        event.preventDefault();
+    };
+    /** @internal Template handler: presses in the field keep focus on the trigger. */
+    _onBoxPointerdown = (event) => {
+        if (event.button === 0)
+            event.preventDefault();
+    };
+    /** @internal Template handler: a click in the field (not on its buttons) opens or closes the popup. */
+    _onBoxClick = (event) => {
+        // The path as dispatched: a removed chip's button is no longer the target's ancestor.
+        if (event.composedPath().some((node) => node instanceof HTMLButtonElement))
+            return;
+        this._entry()?.focus();
+        if (this._showing)
+            this._hide();
+        else
+            this._show();
+    };
+    /** @internal Template handler: the label focuses the trigger, as a native label does. */
+    _onLabelClick = () => {
+        this._entry()?.focus();
+    };
+    /** @internal Template handler: a click on a row's chevron expands or collapses it; elsewhere it chooses. */
+    _onPopupClick = (event) => {
+        const path = event.composedPath();
+        const index = this._rowElements().findIndex((row) => path.includes(row));
+        if (index < 0)
+            return;
+        const row = this.items ? this._rows.peek()[index] : undefined;
+        if (row && path.some((node) => node.classList?.contains('toggle'))) {
+            this.#model.toggle(row.item);
+            return;
+        }
+        this._setActive(index, { scroll: false });
+        this._choose(index);
+    };
+    /** @internal Template handler: the footer's Clear (multiple). */
+    _onClearAll = () => {
+        if (this._editable)
+            this._clear();
+    };
+    /** @internal Template handler: the footer's Close or Done. */
+    _onDone = () => {
+        this._hide();
+        this._entry()?.focus();
+    };
+    mounted(scope) {
+        super.mounted(scope);
+        scope.use(this.#typeahead);
+    }
+}
+//# sourceMappingURL=picker.js.map

package/dist/picker/picker.js.map

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

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

@@ -0,0 +1,9 @@
+/**
+ * What the picker depends on beyond odd-combobox's field, chips, and popup width, the option and
+ * navigation rows, and the tree's indentation: a trigger that fills the field box and cuts its
+ * value short on one line, the whole field box as the press target, and a popup as wide as the
+ * field (`--_anchor-inline-size`) that stacks the scrolling content above the footer. The popup
+ * does not clip, so its focus ring can surround the field above it. No visual tokens.
+ */
+export declare const pickerStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=picker.structural.styles.d.ts.map

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

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

package/dist/picker/picker.structural.styles.js

@@ -0,0 +1,58 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * What the picker depends on beyond odd-combobox's field, chips, and popup width, the option and
+ * navigation rows, and the tree's indentation: a trigger that fills the field box and cuts its
+ * value short on one line, the whole field box as the press target, and a popup as wide as the
+ * field (`--_anchor-inline-size`) that stacks the scrolling content above the footer. The popup
+ * does not clip, so its focus ring can surround the field above it. No visual tokens.
+ */
+export const pickerStructuralStyles = css `
+  .box,
+  .control-box {
+    cursor: pointer;
+  }
+  /* As wide as the host: a long value is cut short rather than widening the field. */
+  .box {
+    min-inline-size: 0;
+  }
+  .combobox {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    min-inline-size: 0;
+  }
+  .value,
+  .placeholder {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .popup {
+    inline-size: var(--_anchor-inline-size, auto);
+    overflow: visible;
+  }
+  .popup:popover-open {
+    display: flex;
+    flex-direction: column;
+  }
+  .content {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    overflow-y: auto;
+  }
+  .footer {
+    display: flex;
+    flex: none;
+    align-items: center;
+  }
+  .summary {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+  .popup::before {
+    position: absolute;
+    pointer-events: none;
+  }
+`;
+//# sourceMappingURL=picker.structural.styles.js.map

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

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

package/dist/picker/picker.styles.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Oddkin's default picker look beyond odd-combobox's field and the shared rows and surfaces (Figma
+ * `Picker`: `multiselect/Field` in its Picker state, `popover` in its Picker state, `Tree` in its
+ * Picker states, `ListboxSurface`): the multiple field padded as a single one
+ * (`control.padding.inline.md`, no chip rows), the content `control.gap` apart and at least
+ * `control.height.md` high, the tree content padded by `space.sm` with rows
+ * `navigation.item.gap` apart in the UI type role, the active row's focus ring, the footer
+ * (`Picker actions`: `space.xs` and `control.padding.inline.md` padding, a default top border,
+ * the summary in the small type role and secondary text), and the keyboard focus ring (`focus.width`,
+ * `radius.lg`) around the field and the open popup as one surface. The field's own ring gives way
+ * to it while the popup is open.
+ */
+export declare const pickerStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=picker.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"picker.styles.d.ts","sourceRoot":"","sources":["../../src/picker/picker.styles.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,yCAyDxB,CAAC"}

package/dist/picker/picker.styles.js

@@ -0,0 +1,73 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * Oddkin's default picker look beyond odd-combobox's field and the shared rows and surfaces (Figma
+ * `Picker`: `multiselect/Field` in its Picker state, `popover` in its Picker state, `Tree` in its
+ * Picker states, `ListboxSurface`): the multiple field padded as a single one
+ * (`control.padding.inline.md`, no chip rows), the content `control.gap` apart and at least
+ * `control.height.md` high, the tree content padded by `space.sm` with rows
+ * `navigation.item.gap` apart in the UI type role, the active row's focus ring, the footer
+ * (`Picker actions`: `space.xs` and `control.padding.inline.md` padding, a default top border,
+ * the summary in the small type role and secondary text), and the keyboard focus ring (`focus.width`,
+ * `radius.lg`) around the field and the open popup as one surface. The field's own ring gives way
+ * to it while the popup is open.
+ */
+export const pickerStyles = css `
+  /* Figma's Picker field pads chips as it pads a value, without odd-combobox's chip rows. */
+  :host([multiple]) .box {
+    padding-block: 0;
+    padding-inline-start: ${token('control.padding.inline.md')};
+  }
+  .content {
+    gap: ${token('control.gap')};
+    min-block-size: ${token('control.height.md')};
+  }
+  .tree {
+    --_indent: ${token('navigation.indent')};
+    gap: ${token('navigation.item.gap')};
+    padding: ${token('space.sm')};
+    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')};
+  }
+  .entry.active {
+    outline: ${token('focus.width')} solid ${token('color.focus.ring')};
+    outline-offset: ${token('focus.offset')};
+  }
+  .footer {
+    gap: ${token('space.xs')};
+    padding: ${token('space.xs')} ${token('control.padding.inline.md')};
+    border-block-start: ${token('border.width.default')} solid ${token('color.border.default')};
+  }
+  .summary {
+    color: ${token('color.text.secondary')};
+    font-family: ${token('type.small.family')};
+    font-size: ${token('type.small.size')};
+    font-weight: ${token('type.small.weight')};
+    line-height: ${token('type.small.line-height')};
+    letter-spacing: ${token('type.small.letter-spacing')};
+  }
+  .box:has(.combobox[aria-expanded='true']:focus-visible) {
+    outline: none;
+  }
+  .field:has(.combobox:focus-visible) + .popup:popover-open::before {
+    content: '';
+    inset: calc(
+        -1 * (var(--_anchor-block-size, 0px) + ${token('focus.width')} + ${token('focus.offset')})
+      )
+      calc(-1 * (${token('focus.width')} + ${token('focus.offset')}))
+      calc(-1 * (${token('focus.width')} + ${token('focus.offset')}));
+    border: ${token('focus.width')} solid ${token('color.focus.ring')};
+    border-radius: ${token('radius.lg')};
+  }
+  .field:has(.combobox:focus-visible) + .popup[data-side='block-start']:popover-open::before {
+    inset: calc(-1 * (${token('focus.width')} + ${token('focus.offset')}))
+      calc(-1 * (${token('focus.width')} + ${token('focus.offset')}))
+      calc(
+        -1 * (var(--_anchor-block-size, 0px) + ${token('focus.width')} + ${token('focus.offset')})
+      );
+  }
+`;
+//# sourceMappingURL=picker.styles.js.map

package/dist/picker/picker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"picker.styles.js","sourceRoot":"","sources":["../../src/picker/picker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;4BAIH,KAAK,CAAC,2BAA2B,CAAC;;;WAGnD,KAAK,CAAC,aAAa,CAAC;sBACT,KAAK,CAAC,mBAAmB,CAAC;;;iBAG/B,KAAK,CAAC,mBAAmB,CAAC;WAChC,KAAK,CAAC,qBAAqB,CAAC;eACxB,KAAK,CAAC,UAAU,CAAC;mBACb,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,aAAa,CAAC,UAAU,KAAK,CAAC,kBAAkB,CAAC;sBAChD,KAAK,CAAC,cAAc,CAAC;;;WAGhC,KAAK,CAAC,UAAU,CAAC;eACb,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,2BAA2B,CAAC;0BAC5C,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,sBAAsB,CAAC;;;aAGjF,KAAK,CAAC,sBAAsB,CAAC;mBACvB,KAAK,CAAC,mBAAmB,CAAC;iBAC5B,KAAK,CAAC,iBAAiB,CAAC;mBACtB,KAAK,CAAC,mBAAmB,CAAC;mBAC1B,KAAK,CAAC,wBAAwB,CAAC;sBAC5B,KAAK,CAAC,2BAA2B,CAAC;;;;;;;;iDAQP,KAAK,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,cAAc,CAAC;;mBAE7E,KAAK,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,cAAc,CAAC;mBAC/C,KAAK,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,cAAc,CAAC;cACpD,KAAK,CAAC,aAAa,CAAC,UAAU,KAAK,CAAC,kBAAkB,CAAC;qBAChD,KAAK,CAAC,WAAW,CAAC;;;wBAGf,KAAK,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,cAAc,CAAC;mBACpD,KAAK,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,cAAc,CAAC;;iDAEjB,KAAK,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,cAAc,CAAC;;;CAG/F,CAAC"}

package/dist/picker/picker.template.d.ts

@@ -0,0 +1,15 @@
+import type { OddkinPicker } from './picker.js';
+/**
+ * Anatomy: odd-combobox's field (the `label`, `description`, and `error` parts, the field box
+ * `part="control"` with the chips before the trigger, the clear button, and the chevron, up while
+ * open), where the `role="combobox"` element is `part="trigger"`, a `div` that keeps focus and
+ * shows the chosen value (with `multiple`, the chips show it and the trigger names the values in
+ * hidden text) or the placeholder. The popup (`part="popup"`, a manual popover on the overlay
+ * surface, as wide as the field and joined to it) holds the content (`.content`, which scrolls):
+ * the `role="listbox"` of option rows (option-row module) or, with `items`, the `role="tree"` of
+ * odd-tree's rows (navigation-row module), the busy row, the empty state, and the `status` slot;
+ * then the footer (`part="footer"`): the summary (the hint or the count), Clear with `multiple`, and Close (Done
+ * with `multiple`), drawn by the native button module.
+ */
+export declare const pickerTemplate: (picker: OddkinPicker) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=picker.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"picker.template.d.ts","sourceRoot":"","sources":["../../src/picker/picker.template.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,WAAY,YAAY,mDA+IlD,CAAC"}

package/dist/picker/picker.template.js

@@ -0,0 +1,156 @@
+import { html, nothing, repeat } from '@oddkin/core/template';
+import { fieldEndTemplate, reviewTemplate, selectionTemplate, valueTemplate, } from '../collection/option-field.template.js';
+import { optionListTemplate } from '../collection/option-rows.template.js';
+import { externalDescriptionTemplate } from '../form-control/description.js';
+import { chevronDownGlyph, chevronUpGlyph } from '../styles/glyphs.js';
+import { spinnerTemplate } from '../styles/spinner.styles.js';
+import { treeItemTemplate } from '../tree/tree.template.js';
+/**
+ * Anatomy: odd-combobox's field (the `label`, `description`, and `error` parts, the field box
+ * `part="control"` with the chips before the trigger, the clear button, and the chevron, up while
+ * open), where the `role="combobox"` element is `part="trigger"`, a `div` that keeps focus and
+ * shows the chosen value (with `multiple`, the chips show it and the trigger names the values in
+ * hidden text) or the placeholder. The popup (`part="popup"`, a manual popover on the overlay
+ * surface, as wide as the field and joined to it) holds the content (`.content`, which scrolls):
+ * the `role="listbox"` of option rows (option-row module) or, with `items`, the `role="tree"` of
+ * odd-tree's rows (navigation-row module), the busy row, the empty state, and the `status` slot;
+ * then the footer (`part="footer"`): the summary (the hint or the count), Clear with `multiple`, and Close (Done
+ * with `multiple`), drawn by the native button module.
+ */
+export const pickerTemplate = (picker) => {
+    const tree = picker.items !== undefined;
+    const multiple = picker.multiple;
+    const selected = picker._selected.value;
+    const active = picker._activeIndex.value;
+    const open = picker._open.value;
+    const disabled = picker.disabled || picker._formDisabled.value;
+    const strings = picker._strings;
+    const rows = picker._rows.value;
+    const options = picker._options.value;
+    const count = tree ? rows.length : options.length;
+    const text = multiple ? '' : picker._valueText;
+    const content = tree
+        ? html `<div
+        part="tree"
+        id="content"
+        class="tree"
+        role="tree"
+        aria-labelledby=${picker.label ? 'label' : null}
+        aria-multiselectable=${multiple ? 'true' : null}
+        aria-busy=${picker.loading ? 'true' : null}
+        aria-disabled=${disabled ? 'true' : null}
+        ?hidden=${!count}
+      >
+        ${repeat(rows, (row) => row.item.id, (row, index) => treeItemTemplate(row, multiple, index === active))}
+      </div>`
+        : html `<div
+        part="listbox"
+        id="content"
+        class="listbox"
+        role="listbox"
+        aria-labelledby=${picker.label ? 'label' : null}
+        aria-multiselectable=${multiple ? 'true' : null}
+        aria-busy=${picker.loading ? 'true' : null}
+        aria-disabled=${disabled ? 'true' : null}
+        ?hidden=${!count}
+      >
+        ${optionListTemplate(options, selected, active)}
+      </div>`;
+    return html `<div part="field" class="field">
+      <span
+        part="label"
+        id="label"
+        class="label"
+        ?hidden=${!picker.label}
+        @click=${picker._onLabelClick}
+        >${picker.label}</span
+      >
+      <div part="description" id="description" class="description" ?hidden=${!picker.description}>
+        ${picker.description}
+      </div>
+      <div
+        class="control-box"
+        @pointerdown=${picker._onBoxPointerdown}
+        @click=${picker._onBoxClick}
+      >
+        <div
+          part="control"
+          class=${!multiple ? 'control box' : picker._view.value === 'expandable' ? 'control box two-rows' : 'control box collapsed'}
+        >
+          ${multiple ? valueTemplate(picker, false, disabled) : nothing}
+          <div
+            part="trigger"
+            id="control"
+            class="combobox"
+            role="combobox"
+            tabindex=${disabled ? null : '0'}
+            aria-labelledby=${picker.label ? 'label' : null}
+            aria-haspopup=${tree ? 'tree' : null}
+            aria-expanded=${String(open)}
+            aria-controls="content"
+            aria-required=${picker.required ? 'true' : null}
+            aria-describedby=${picker._describedBy}
+            aria-invalid=${picker._userInvalid.value ? 'true' : null}
+            aria-disabled=${disabled ? 'true' : null}
+            @keydown=${picker._onKeydown}
+          >
+            ${text
+        ? html `<span part="value" class="value">${text}</span>`
+        : selected.length
+            ? html `<span class="visually-hidden"
+                      >${selected.map((value) => picker._labelOf(value)).join(', ')}</span
+                    >`
+            : html `<span class="placeholder">${picker.placeholder}</span>`}
+          </div>
+        </div>
+        ${fieldEndTemplate(picker, open ? chevronUpGlyph : chevronDownGlyph)}
+      </div>
+      ${multiple ? reviewTemplate(picker, false, disabled) : nothing}
+      <div part="error" id="error" class="error" ?hidden=${!picker.error}>${picker.error}</div>
+      ${externalDescriptionTemplate(picker._externalDescription)}
+    </div>
+    <div
+      part="popup"
+      id="popup"
+      class="overlay-surface popup"
+      @pointerdown=${picker._onPopupPointerdown}
+      @click=${picker._onPopupClick}
+    >
+      <div class="content root">
+        ${selectionTemplate(picker, tree ? [] : options, false)} ${content}
+        <div part="loading" class="state" ?hidden=${!picker.loading}>
+          ${spinnerTemplate}${strings.loading}
+        </div>
+        <div part="empty" class="state" ?hidden=${count > 0 || picker.loading}>
+          <slot name="empty">${strings.empty}</slot>
+        </div>
+        <slot name="status"></slot>
+      </div>
+      <div part="footer" class="footer">
+        <span part="summary" class="summary">${picker._summary}</span>
+        ${multiple
+        ? html `<button
+                part="clear-all"
+                class="odd-button"
+                type="button"
+                data-appearance="ghost"
+                data-size="sm"
+                @click=${picker._onClearAll}
+              >
+                ${strings.clear}
+              </button>`
+        : nothing}
+        <button
+          part="close"
+          class="odd-button"
+          type="button"
+          data-appearance=${multiple ? 'primary' : 'ghost'}
+          data-size="sm"
+          @click=${picker._onDone}
+        >
+          ${multiple ? strings.done : strings.close}
+        </button>
+      </div>
+    </div>`;
+};
+//# sourceMappingURL=picker.template.js.map

package/dist/picker/picker.template.js.map

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