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

package/dist/collection/option-field.template.d.ts

@@ -0,0 +1,44 @@
+import { type TemplateResult } from '@oddkin/core/template';
+import type { OptionRecord } from './collection.js';
+import type { OddkinOptionField } from './option-field.js';
+/** Rows the popup review shows before View N more (Figma's Inline selection panel). */
+export declare const REVIEW_ROWS = 3;
+/**
+ * The chosen values of a multiple option field as chips (chip module; component-contracts.md
+ * §3.3): a list named by `strings.selected` of `part="chip"` items, each with a
+ * `part="chip-remove"` button unless `readonly`, and the `part="more"` count ("+N", read as
+ * `strings.more`) that stands for the chips that do not fit while collapsed (two rows of chips and
+ * "+N more" with `view="expandable"`).
+ */
+export declare const chipsTemplate: (field: OddkinOptionField, readonly: boolean, disabled: boolean) => TemplateResult;
+/**
+ * The chosen values as a multiple option field's `view` shows them in the field box: chips (also
+ * `auto` up to four values, and `expandable`), the count after the user glyph or a sentence
+ * (`part="value"`), initials (`part="avatar"` items and "+N"), or a chip per option group
+ * ("Design · 12", or the total when they do not fit). Nothing while no value is chosen.
+ */
+export declare const valueTemplate: (field: OddkinOptionField, readonly: boolean, disabled: boolean) => TemplateResult | null;
+/**
+ * Below the field with `view="expandable"`: Show all (`part="show-all"`, a disclosure for the
+ * review) and the review of every chosen value (`part="review"`: the count and every chip, each
+ * removable, in a bounded area that scrolls).
+ */
+export declare const reviewTemplate: (field: OddkinOptionField, readonly: boolean, disabled: boolean) => TemplateResult | null;
+/**
+ * The top of a multiple field's popup (Figma `multiselect/SelectionPanel`), each part opt-in:
+ * - `summary`: the count (`part="summary"`) and Clear all (`part="clear-all"`), for a popup
+ *   without a footer that has them;
+ * - `review`: the chosen values (`part="selected"`): the disclosure "Selected (N)"
+ *   (`part="selected-toggle"`), the first three as rows (`part="selected-option"`), each with a
+ *   remove button (`part="selected-remove"`) unless read-only, and View N more
+ *   (`part="view-more"`, Show less once open);
+ * - `selectAll`: the Select all check box (`part="select-all"`, mixed while some are chosen) over
+ *   `options`, the usable options shown.
+ */
+export declare const selectionTemplate: (field: OddkinOptionField, options: readonly OptionRecord[], summary: boolean) => TemplateResult | null;
+/**
+ * The end of the field box: the clear button (`part="clear"`, shown while there is a value the
+ * user may clear; out of the Tab order, as the keyboard clears otherwise) and an optional chevron.
+ */
+export declare const fieldEndTemplate: (field: OddkinOptionField, chevron?: TemplateResult) => TemplateResult;
+//# sourceMappingURL=option-field.template.d.ts.map

package/dist/collection/option-field.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-field.template.d.ts","sourceRoot":"","sources":["../../src/collection/option-field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AASnF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,uFAAuF;AACvF,eAAO,MAAM,WAAW,IAAI,CAAC;AA8C7B;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,UAAW,iBAAiB,YAAY,OAAO,YAAY,OAAO,mBAY3F,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,UAAW,iBAAiB,YAAY,OAAO,YAAY,OAAO,0BAmD3F,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc,UAAW,iBAAiB,YAAY,OAAO,YAAY,OAAO,0BA6B5F,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,iBAAiB,UACrB,iBAAiB,WACf,SAAS,YAAY,EAAE,WACvB,OAAO,0BAmHjB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,UAAW,iBAAiB,YAAY,cAAc,mBAazE,CAAC"}

package/dist/collection/option-field.template.js

@@ -0,0 +1,269 @@
+import { html, nothing, repeat } from '@oddkin/core/template';
+import { checkGlyph, chevronDownGlyph, chevronUpGlyph, closeGlyph, minusGlyph, userGlyph, } from '../styles/glyphs.js';
+/** Rows the popup review shows before View N more (Figma's Inline selection panel). */
+export const REVIEW_ROWS = 3;
+/** One chosen value as a chip (`part="chip"`), with its remove button unless `readonly`. */
+const chip = (field, value, shown, readonly, disabled) => {
+    const label = field._labelOf(value);
+    return html `<span role="listitem" part="chip" class=${shown ? 'chip item' : 'chip item overflow'}
+    ><span class="chip-text">${label}</span>${readonly
+        ? nothing
+        : html `<button
+            part="chip-remove"
+            class="remove"
+            type="button"
+            tabindex="-1"
+            aria-label=${field._removeLabel(label)}
+            ?disabled=${disabled}
+            @click=${() => field._onChipRemove(value)}
+            @keydown=${(event) => field._onChipKeydown(event, value)}
+          >
+            ${closeGlyph}
+          </button>`}</span
+  >`;
+};
+/** The "+N" item (`part="more"`) for the items that do not fit while collapsed. */
+const more = (field, hidden, collapsed, words = false) => html `<span
+    role="listitem"
+    part="more"
+    class=${hidden ? 'chip more' : 'chip more empty'}
+    ?hidden=${!collapsed}
+    >${words
+    ? html `+${field._moreLabel(hidden)}`
+    : html `<span aria-hidden="true">+${hidden}</span
+            ><span class="visually-hidden">${field._moreLabel(hidden)}</span>`}</span
+  >`;
+/**
+ * The chosen values of a multiple option field as chips (chip module; component-contracts.md
+ * §3.3): a list named by `strings.selected` of `part="chip"` items, each with a
+ * `part="chip-remove"` button unless `readonly`, and the `part="more"` count ("+N", read as
+ * `strings.more`) that stands for the chips that do not fit while collapsed (two rows of chips and
+ * "+N more" with `view="expandable"`).
+ */
+export const chipsTemplate = (field, readonly, disabled) => {
+    const selected = field._selected.value;
+    const collapsed = field._collapsed.value;
+    const shown = collapsed ? field._shown.value : Number.POSITIVE_INFINITY;
+    const hidden = Math.max(0, selected.length - shown);
+    return html `<span class="chips" role="list" aria-label=${field._strings.selected}
+    >${repeat(selected, (value) => value, (value, index) => chip(field, value, index < shown, readonly, disabled))}${more(field, hidden, collapsed, field._view.value === 'expandable')}</span
+  >`;
+};
+/**
+ * The chosen values as a multiple option field's `view` shows them in the field box: chips (also
+ * `auto` up to four values, and `expandable`), the count after the user glyph or a sentence
+ * (`part="value"`), initials (`part="avatar"` items and "+N"), or a chip per option group
+ * ("Design · 12", or the total when they do not fit). Nothing while no value is chosen.
+ */
+export const valueTemplate = (field, readonly, disabled) => {
+    const selected = field._selected.value;
+    if (!selected.length)
+        return nothing;
+    const strings = field._strings;
+    switch (field._view.value) {
+        case 'count':
+            return html `<span part="value" class="value count"
+        >${userGlyph}<span class="value-text">${field._countText}</span></span
+      >`;
+        case 'text':
+            return html `<span part="value" class="value">${field._sentence}</span>`;
+        case 'avatars': {
+            const shown = field._shown.value;
+            const hidden = Math.max(0, selected.length - shown);
+            return html `<span class="avatars" role="list" aria-label=${strings.selected}
+        >${repeat(selected, (value) => value, (value, index) => {
+                const label = field._labelOf(value);
+                return html `<span
+              role="listitem"
+              class=${index < shown ? 'avatar item' : 'avatar item overflow'}
+              ><odd-avatar part="avatar" label=${label}></odd-avatar
+            ></span>`;
+            })}${more(field, hidden, true)}</span
+      >`;
+        }
+        case 'grouped': {
+            const groups = field._groups;
+            const fits = field._shown.value >= groups.length;
+            return html `<span class="chips" role="list" aria-label=${strings.selected}
+        >${repeat(groups, (group) => group.label, (group) => html `<span
+              role="listitem"
+              part="group-summary"
+              class=${fits ? 'chip tag item' : 'chip tag item overflow'}
+              >${field._format(strings.group, { group: group.label, count: group.count })}</span
+            >`)}<span role="listitem" part="more" class="chip more" ?hidden=${fits}
+          >${field._format(strings.total, { count: selected.length })}</span
+        ></span
+      >`;
+        }
+        default:
+            return chipsTemplate(field, readonly, disabled);
+    }
+};
+/**
+ * Below the field with `view="expandable"`: Show all (`part="show-all"`, a disclosure for the
+ * review) and the review of every chosen value (`part="review"`: the count and every chip, each
+ * removable, in a bounded area that scrolls).
+ */
+export const reviewTemplate = (field, readonly, disabled) => {
+    const selected = field._selected.value;
+    if (field._view.value !== 'expandable' || !selected.length)
+        return nothing;
+    const reviewing = field._reviewing.value;
+    const strings = field._strings;
+    return html `<div class="review-bar">
+      <button
+        part="show-all"
+        class="odd-button show-all"
+        type="button"
+        data-appearance="ghost"
+        data-size="sm"
+        aria-expanded=${String(reviewing)}
+        aria-controls="review"
+        @click=${field._onReview}
+      >
+        ${reviewing ? strings.showLess : strings.showAll}
+      </button>
+    </div>
+    <div part="review" id="review" class="review panel" ?hidden=${!reviewing}>
+      <span class="review-count">${field._countText}</span>
+      <span class="chips" role="list" aria-label=${strings.selected}
+        >${repeat(reviewing ? selected : [], (value) => value, (value) => chip(field, value, true, readonly, disabled))}</span
+      >
+    </div>`;
+};
+/**
+ * The top of a multiple field's popup (Figma `multiselect/SelectionPanel`), each part opt-in:
+ * - `summary`: the count (`part="summary"`) and Clear all (`part="clear-all"`), for a popup
+ *   without a footer that has them;
+ * - `review`: the chosen values (`part="selected"`): the disclosure "Selected (N)"
+ *   (`part="selected-toggle"`), the first three as rows (`part="selected-option"`), each with a
+ *   remove button (`part="selected-remove"`) unless read-only, and View N more
+ *   (`part="view-more"`, Show less once open);
+ * - `selectAll`: the Select all check box (`part="select-all"`, mixed while some are chosen) over
+ *   `options`, the usable options shown.
+ */
+export const selectionTemplate = (field, options, summary) => {
+    if (!field.multiple || !(field.review || field.selectAll))
+        return nothing;
+    const selected = field._selected.value;
+    const strings = field._strings;
+    const editable = field._changeable;
+    const head = summary
+        ? html `<div class="selection-summary spread">
+        <span part="summary" class="summary">${field._countText}</span>
+        <button
+          part="clear-all"
+          class="odd-button"
+          type="button"
+          data-appearance="ghost"
+          data-size="sm"
+          ?disabled=${!editable || !selected.length}
+          @click=${field._onClear}
+        >
+          ${strings.clearAll}
+        </button>
+      </div>`
+        : nothing;
+    let review = nothing;
+    if (field.review && selected.length) {
+        const open = field._reviewOpen.value;
+        const all = field._reviewAll.value;
+        const shown = all ? selected : selected.slice(0, REVIEW_ROWS);
+        const hidden = selected.length - REVIEW_ROWS;
+        review = html `<div part="selected" class="selected-section">
+      <button
+        part="selected-toggle"
+        class="selected-toggle spread"
+        type="button"
+        aria-expanded=${String(open)}
+        aria-controls="selected-list"
+        @click=${field._onReviewToggle}
+      >
+        <span class="selected-heading"
+          >${field._format(strings.selectedCount, { count: selected.length })}</span
+        ><span class="chevron" aria-hidden="true">${open ? chevronUpGlyph : chevronDownGlyph}</span>
+      </button>
+      <div
+        id="selected-list"
+        class=${all ? 'selected-list all' : 'selected-list'}
+        role="list"
+        aria-label=${strings.selected}
+        ?hidden=${!open}
+      >
+        ${repeat(shown, (value) => value, (value) => {
+            const label = field._labelOf(value);
+            return html `<div role="listitem" part="selected-option" class="selected-option spread">
+              <span class="option-label">${label}</span>${editable
+                ? html `<button
+                      part="selected-remove"
+                      class="remove"
+                      type="button"
+                      aria-label=${field._removeLabel(label)}
+                      @click=${(event) => field._onReviewRemove(event, value)}
+                    >
+                      ${closeGlyph}
+                    </button>`
+                : nothing}
+            </div>`;
+        })}
+      </div>
+      ${hidden > 0 && open
+            ? html `<button
+              part="view-more"
+              class="view-more"
+              type="button"
+              aria-expanded=${String(all)}
+              aria-controls="selected-list"
+              @click=${field._onViewMore}
+            >
+              ${all ? strings.showLess : field._format(strings.viewMore, { count: hidden })}
+            </button>`
+            : nothing}
+    </div>`;
+    }
+    let selectAll = nothing;
+    const usable = options.filter((option) => !option.disabled);
+    if (field.selectAll && usable.length) {
+        const chosen = usable.filter((option) => selected.includes(option.value)).length;
+        const state = !chosen ? null : chosen === usable.length ? 'checked' : 'mixed';
+        selectAll = html `<button
+      part="select-all"
+      class="option select-all"
+      type="button"
+      role="checkbox"
+      aria-checked=${state === 'checked' ? 'true' : state === 'mixed' ? 'mixed' : 'false'}
+      ?disabled=${!editable}
+      @click=${() => field._selectAll(options)}
+    >
+      <span class="option-start indicator" aria-hidden="true"
+        ><span class="indicator-box" data-state=${state}></span
+        ><span class="indicator-mark indicator-check">${checkGlyph}</span
+        ><span class="indicator-mark indicator-mixed">${minusGlyph}</span></span
+      ><span class="option-label"
+        >${field._format(strings.selectAll, { count: usable.length })}</span
+      >
+    </button>`;
+    }
+    const panel = head === nothing && review === nothing
+        ? nothing
+        : html `<div class="selection panel">${head}${review}</div>`;
+    return html `${panel}${selectAll}`;
+};
+/**
+ * The end of the field box: the clear button (`part="clear"`, shown while there is a value the
+ * user may clear; out of the Tab order, as the keyboard clears otherwise) and an optional chevron.
+ */
+export const fieldEndTemplate = (field, chevron) => html `<span class="control-end">
+    <button
+      part="clear"
+      class="clear"
+      type="button"
+      tabindex="-1"
+      aria-label=${field._strings.clear}
+      ?hidden=${!field._clearable}
+      @click=${field._onClear}
+    >
+      ${closeGlyph}</button
+    >${chevron ? html `<span class="chevron" aria-hidden="true">${chevron}</span>` : nothing}
+  </span>`;
+//# sourceMappingURL=option-field.template.js.map

package/dist/collection/option-field.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-field.template.js","sourceRoot":"","sources":["../../src/collection/option-field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAuB,MAAM,uBAAuB,CAAC;AACnF,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,UAAU,EACV,SAAS,GACV,MAAM,qBAAqB,CAAC;AAI7B,uFAAuF;AACvF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,CAAC;AAE7B,4FAA4F;AAC5F,MAAM,IAAI,GAAG,CACX,KAAwB,EACxB,KAAa,EACb,KAAc,EACd,QAAiB,EACjB,QAAiB,EACjB,EAAE;IACF,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpC,OAAO,IAAI,CAAA,2CAA2C,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,oBAAoB;+BACnE,KAAK,UAC9B,QAAQ;QACN,CAAC,CAAC,OAAO;QACT,CAAC,CAAC,IAAI,CAAA;;;;;yBAKW,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC;wBAC1B,QAAQ;qBACX,GAAG,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;uBAC9B,CAAC,KAAoB,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC;;cAErE,UAAU;oBAEpB;IACA,CAAC;AACL,CAAC,CAAC;AAEF,mFAAmF;AACnF,MAAM,IAAI,GAAG,CAAC,KAAwB,EAAE,MAAc,EAAE,SAAkB,EAAE,KAAK,GAAG,KAAK,EAAE,EAAE,CAC3F,IAAI,CAAA;;;YAGM,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB;cACtC,CAAC,SAAS;OAElB,KAAK;IACH,CAAC,CAAC,IAAI,CAAA,IAAI,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE;IACpC,CAAC,CAAC,IAAI,CAAA,6BAA6B,MAAM;6CACJ,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,SACjE;IACA,CAAC;AAEL;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAwB,EAAE,QAAiB,EAAE,QAAiB,EAAE,EAAE;IAC9F,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;IACvC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;IACzC,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC;IACxE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC;IACpD,OAAO,IAAI,CAAA,8CAA8C,KAAK,CAAC,QAAQ,CAAC,QAAQ;OAC3E,MAAM,CACP,QAAQ,EACR,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAChB,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CACxE,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK,YAAY,CAAC;IACtE,CAAC;AACL,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAwB,EAAE,QAAiB,EAAE,QAAiB,EAAE,EAAE;IAC9F,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;IACvC,IAAI,CAAC,QAAQ,CAAC,MAAM;QAAE,OAAO,OAAO,CAAC;IACrC,MAAM,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC;IAC/B,QAAQ,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;QAC1B,KAAK,OAAO;YACV,OAAO,IAAI,CAAA;WACN,SAAS,4BAA4B,KAAK,CAAC,UAAU;QACxD,CAAC;QACL,KAAK,MAAM;YACT,OAAO,IAAI,CAAA,oCAAoC,KAAK,CAAC,SAAS,SAAS,CAAC;QAC1E,KAAK,SAAS,EAAE,CAAC;YACf,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC;YACpD,OAAO,IAAI,CAAA,gDAAgD,OAAO,CAAC,QAAQ;WACtE,MAAM,CACP,QAAQ,EACR,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAChB,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBACf,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBACpC,OAAO,IAAI,CAAA;;sBAED,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,sBAAsB;iDAC3B,KAAK;qBACjC,CAAC;YACZ,CAAC,CACF,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC;QAC7B,CAAC;QACL,CAAC;QACD,KAAK,SAAS,EAAE,CAAC;YACf,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC;YAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,MAAM,CAAC;YACjD,OAAO,IAAI,CAAA,8CAA8C,OAAO,CAAC,QAAQ;WACpE,MAAM,CACP,MAAM,EACN,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,EACtB,CAAC,KAAK,EAAE,EAAE,CACR,IAAI,CAAA;;;sBAGM,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,wBAAwB;iBACtD,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC;cAC3E,CACL,+DAA+D,IAAI;aAC/D,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,MAAM,EAAE,CAAC;;QAE7D,CAAC;QACL,CAAC;QACD;YACE,OAAO,aAAa,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IACpD,CAAC;AACH,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAwB,EAAE,QAAiB,EAAE,QAAiB,EAAE,EAAE;IAC/F,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;IACvC,IAAI,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK,YAAY,IAAI,CAAC,QAAQ,CAAC,MAAM;QAAE,OAAO,OAAO,CAAC;IAC3E,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;IACzC,MAAM,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC;IAC/B,OAAO,IAAI,CAAA;;;;;;;wBAOW,MAAM,CAAC,SAAS,CAAC;;iBAExB,KAAK,CAAC,SAAS;;UAEtB,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO;;;kEAGU,CAAC,SAAS;mCACzC,KAAK,CAAC,UAAU;mDACA,OAAO,CAAC,QAAQ;WACxD,MAAM,CACP,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EACzB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAChB,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC,CACxD;;WAEE,CAAC;AACZ,CAAC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,KAAwB,EACxB,OAAgC,EAChC,OAAgB,EAChB,EAAE;IACF,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,SAAS,CAAC;QAAE,OAAO,OAAO,CAAC;IAC1E,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;IACvC,MAAM,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC;IAC/B,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC;IACnC,MAAM,IAAI,GAAG,OAAO;QAClB,CAAC,CAAC,IAAI,CAAA;+CACqC,KAAK,CAAC,UAAU;;;;;;;sBAOzC,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,MAAM;mBAChC,KAAK,CAAC,QAAQ;;YAErB,OAAO,CAAC,QAAQ;;aAEf;QACT,CAAC,CAAC,OAAO,CAAC;IACZ,IAAI,MAAM,GAAoC,OAAO,CAAC;IACtD,IAAI,KAAK,CAAC,MAAM,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;QACpC,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;QACrC,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;QACnC,MAAM,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC;QAC9D,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,GAAG,WAAW,CAAC;QAC7C,MAAM,GAAG,IAAI,CAAA;;;;;wBAKO,MAAM,CAAC,IAAI,CAAC;;iBAEnB,KAAK,CAAC,eAAe;;;aAGzB,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,aAAa,EAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,MAAM,EAAE,CAAC;oDACzB,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB;;;;gBAI5E,GAAG,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,eAAe;;qBAEtC,OAAO,CAAC,QAAQ;kBACnB,CAAC,IAAI;;UAEb,MAAM,CACN,KAAK,EACL,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAChB,CAAC,KAAK,EAAE,EAAE;YACR,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACpC,OAAO,IAAI,CAAA;2CACoB,KAAK,UAChC,QAAQ;gBACN,CAAC,CAAC,IAAI,CAAA;;;;mCAIW,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC;+BAC7B,CAAC,KAAY,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC;;wBAE5D,UAAU;8BACJ;gBACZ,CAAC,CAAC,OACN;mBACK,CAAC;QACV,CAAC,CACF;;QAGD,MAAM,GAAG,CAAC,IAAI,IAAI;YAChB,CAAC,CAAC,IAAI,CAAA;;;;8BAIc,MAAM,CAAC,GAAG,CAAC;;uBAElB,KAAK,CAAC,WAAW;;gBAExB,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;sBACrE;YACZ,CAAC,CAAC,OACN;WACK,CAAC;IACV,CAAC;IACD,IAAI,SAAS,GAAoC,OAAO,CAAC;IACzD,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC5D,IAAI,KAAK,CAAC,SAAS,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;QACrC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;QACjF,MAAM,KAAK,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;QAC9E,SAAS,GAAG,IAAI,CAAA;;;;;qBAKC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;kBACvE,CAAC,QAAQ;eACZ,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC;;;kDAGI,KAAK;wDACC,UAAU;wDACV,UAAU;;WAEvD,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC;;cAEvD,CAAC;IACb,CAAC;IACD,MAAM,KAAK,GACT,IAAI,KAAK,OAAO,IAAI,MAAM,KAAK,OAAO;QACpC,CAAC,CAAC,OAAO;QACT,CAAC,CAAC,IAAI,CAAA,gCAAgC,IAAI,GAAG,MAAM,QAAQ,CAAC;IAChE,OAAO,IAAI,CAAA,GAAG,KAAK,GAAG,SAAS,EAAE,CAAC;AACpC,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAwB,EAAE,OAAwB,EAAE,EAAE,CACrF,IAAI,CAAA;;;;;;mBAMa,KAAK,CAAC,QAAQ,CAAC,KAAK;gBACvB,CAAC,KAAK,CAAC,UAAU;eAClB,KAAK,CAAC,QAAQ;;QAErB,UAAU;OACX,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,4CAA4C,OAAO,SAAS,CAAC,CAAC,CAAC,OAAO;UACjF,CAAC"}

package/dist/collection/option-rows.template.d.ts

@@ -0,0 +1,11 @@
+import { type OptionRecord } from './collection.js';
+/**
+ * The option rows of a listbox (`odd-listbox`, `odd-combobox`, `odd-picker`; option-row module):
+ * each `role="option"` row (`part="option"`) with its label, description, and the check of a
+ * selected row, or with `indicator` the control indicator's decorative box at the start instead;
+ * a group's rows in a `role="group"` named by its `part="group"` heading. `active` is the index of
+ * the active row (`.active`). Rows are keyed by value, so the active option stays the same element
+ * while the options change.
+ */
+export declare const optionListTemplate: (options: readonly OptionRecord[], selected: readonly string[], active: number, indicator?: boolean) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=option-rows.template.d.ts.map

package/dist/collection/option-rows.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-rows.template.d.ts","sourceRoot":"","sources":["../../src/collection/option-rows.template.ts"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,YAAY,EAAkB,MAAM,iBAAiB,CAAC;AAE9E;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,YACpB,SAAS,YAAY,EAAE,YACtB,SAAS,MAAM,EAAE,UACnB,MAAM,wEA6Cf,CAAC"}

package/dist/collection/option-rows.template.js

@@ -0,0 +1,41 @@
+import { html, nothing, repeat } from '@oddkin/core/template';
+import { checkGlyph } from '../styles/glyphs.js';
+import { groupsOf } from './collection.js';
+/**
+ * The option rows of a listbox (`odd-listbox`, `odd-combobox`, `odd-picker`; option-row module):
+ * each `role="option"` row (`part="option"`) with its label, description, and the check of a
+ * selected row, or with `indicator` the control indicator's decorative box at the start instead;
+ * a group's rows in a `role="group"` named by its `part="group"` heading. `active` is the index of
+ * the active row (`.active`). Rows are keyed by value, so the active option stays the same element
+ * while the options change.
+ */
+export const optionListTemplate = (options, selected, active, indicator = false) => {
+    const rows = (each) => repeat(each, ({ option }) => option.value, ({ option, index }) => {
+        const chosen = selected.includes(option.value);
+        return html `<div
+          role="option"
+          part="option"
+          class=${index === active ? 'option active' : 'option'}
+          aria-selected=${chosen ? 'true' : 'false'}
+          aria-disabled=${option.disabled ? 'true' : null}
+        >
+          ${indicator
+            ? html `<span class="option-start indicator" aria-hidden="true"
+                  ><span class="indicator-box" data-state=${chosen ? 'checked' : null}></span
+                  ><span class="indicator-mark indicator-check">${checkGlyph}</span></span
+                >`
+            : nothing}<span class="option-label"
+            ><span class="option-text">${option.label}</span>${option.description
+            ? html `<span class="option-description">${option.description}</span>`
+            : nothing}</span
+          >${indicator ? nothing : html `<span class="option-check">${checkGlyph}</span>`}
+        </div>`;
+    });
+    return html `${repeat(groupsOf(options), (group, n) => group.label === undefined ? `option ${group.rows[0].option.value}` : `group ${n}`, (group, n) => group.label === undefined
+        ? rows(group.rows)
+        : html `<div role="group" class="group" aria-labelledby=${`group-${n}`}>
+            <div part="group" id=${`group-${n}`} class="group-label">${group.label}</div>
+            ${rows(group.rows)}
+          </div>`)}`;
+};
+//# sourceMappingURL=option-rows.template.js.map

package/dist/collection/option-rows.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-rows.template.js","sourceRoot":"","sources":["../../src/collection/option-rows.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAqC,MAAM,iBAAiB,CAAC;AAE9E;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,OAAgC,EAChC,QAA2B,EAC3B,MAAc,EACd,SAAS,GAAG,KAAK,EACjB,EAAE;IACF,MAAM,IAAI,GAAG,CAAC,IAA0B,EAAE,EAAE,CAC1C,MAAM,CACJ,IAAI,EACJ,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAC5B,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;QACpB,MAAM,MAAM,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/C,OAAO,IAAI,CAAA;;;kBAGD,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ;0BACrC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;0BACzB,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;;YAG7C,SAAS;YACP,CAAC,CAAC,IAAI,CAAA;4DACwC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;kEACnB,UAAU;kBAC1D;YACJ,CAAC,CAAC,OACN;yCAC+B,MAAM,CAAC,KAAK,UACvC,MAAM,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA,oCAAoC,MAAM,CAAC,WAAW,SAAS;YACrE,CAAC,CAAC,OACN;aACC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,8BAA8B,UAAU,SAAS;eACzE,CAAC;IACV,CAAC,CACF,CAAC;IACJ,OAAO,IAAI,CAAA,GAAG,MAAM,CAClB,QAAQ,CAAC,OAAO,CAAC,EACjB,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CACX,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,KAAK,CAAC,IAAI,CAAC,CAAC,CAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,EACpF,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CACX,KAAK,CAAC,KAAK,KAAK,SAAS;QACvB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QAClB,CAAC,CAAC,IAAI,CAAA,mDAAmD,SAAS,CAAC,EAAE;mCAC1C,SAAS,CAAC,EAAE,wBAAwB,KAAK,CAAC,KAAK;cACpE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;iBACb,CACd,EAAE,CAAC;AACN,CAAC,CAAC"}

package/dist/collection/tree-model.d.ts

@@ -0,0 +1,60 @@
+import { type Readable } from '@oddkin/core/reactive';
+import type { NavigationToggleDetail } from '../side-nav/side-nav.js';
+import type { TreeItemRecord } from './collection.js';
+/** The user asked to expand or collapse an item; cancel it to keep the current state. */
+export declare const treeToggleEvent: import("@oddkin/core/element").EventDefinition<NavigationToggleDetail>;
+/** A shown row: its item, place in the hierarchy, and state. */
+export interface TreeRow {
+    readonly item: TreeItemRecord;
+    /** 1 at the top. */
+    readonly level: number;
+    readonly size: number;
+    readonly position: number;
+    readonly parent: TreeItemRecord | undefined;
+    readonly expandable: boolean;
+    readonly expanded: boolean;
+    readonly selected: boolean;
+    /** Expanded while its lazy children load. */
+    readonly busy: boolean;
+}
+export interface TreeModelOptions {
+    /** The top-level items. */
+    readonly items: () => readonly TreeItemRecord[] | undefined;
+    /** Ids of expanded items when the caller owns expansion, else undefined. */
+    readonly expanded: () => readonly string[] | undefined;
+    /** Whether the item is selected (a reactive read). */
+    readonly selected: (item: TreeItemRecord) => boolean;
+    /** Reports a user's expand or collapse (`odd-toggle`); false when it was cancelled. */
+    readonly report: (detail: NavigationToggleDetail) => boolean;
+}
+/**
+ * What every element showing a hierarchy as `treeitem` rows shares (`odd-tree`, `odd-picker`):
+ * the shown rows from `items`, expansion (as the caller's `expanded` says; otherwise as the user
+ * left it, else open when it holds a selected item; selecting never expands or selects
+ * descendants), the user's toggles reported as `odd-toggle` (cancelable; a lazy item is busy until
+ * it has `children`), and the APG keys that act on the hierarchy. Focus is the element's: rows
+ * move with roving focus (`odd-tree`) or as the active descendant of a combobox (`odd-picker`).
+ * Internal to `@oddkin/components`.
+ */
+export declare class TreeModel {
+    #private;
+    /** The shown rows, in order. */
+    readonly rows: Readable<readonly TreeRow[]>;
+    constructor(options: TreeModelOptions);
+    /** Whether the item has (or will load) children. */
+    expandable(item: TreeItemRecord): boolean;
+    /** Whether the item is expanded. */
+    isExpanded(item: TreeItemRecord): boolean;
+    /** Expands or collapses an item after `odd-toggle`, unless that is cancelled. */
+    toggle(item: TreeItemRecord, expanded?: boolean): void;
+    /**
+     * The keys that act on the hierarchy (APG tree view): 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. `move` makes an item the focused or active row. False for other keys,
+     * and for Right on a row without children.
+     */
+    key(key: string, row: TreeRow, rtl: boolean, move: (item: TreeItemRecord) => void): boolean;
+    /** The item with `id` and its ancestors, outermost first; empty when there is none. */
+    path(id: string): TreeItemRecord[];
+}
+//# sourceMappingURL=tree-model.d.ts.map

package/dist/collection/tree-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-model.d.ts","sourceRoot":"","sources":["../../src/collection/tree-model.ts"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,yFAAyF;AACzF,eAAO,MAAM,eAAe,wEAO1B,CAAC;AAEH,gEAAgE;AAChE,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC;IAC9B,oBAAoB;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,SAAS,CAAC;IAC5C,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,6CAA6C;IAC7C,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,SAAS,cAAc,EAAE,GAAG,SAAS,CAAC;IAC5D,4EAA4E;IAC5E,QAAQ,CAAC,QAAQ,EAAE,MAAM,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IACvD,sDAAsD;IACtD,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,OAAO,CAAC;IACrD,uFAAuF;IACvF,QAAQ,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,OAAO,CAAC;CAC9D;AAED;;;;;;;;GAQG;AACH,qBAAa,SAAS;;IAKpB,gCAAgC;IAChC,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC,SAAS,OAAO,EAAE,CAAC,CAAC;IAE5C,YAAY,OAAO,EAAE,gBAAgB,EAuBpC;IAED,oDAAoD;IACpD,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO,CAExC;IAED,oCAAoC;IACpC,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO,CAKxC;IAQD,iFAAiF;IACjF,MAAM,CAAC,IAAI,EAAE,cAAc,EAAE,QAAQ,UAAyB,GAAG,IAAI,CAIpE;IAED;;;;;OAKG;IACH,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,GAAG,OAAO,CAqB1F;IAED,uFAAuF;IACvF,IAAI,CAAC,EAAE,EAAE,MAAM,GAAG,cAAc,EAAE,CAUjC;CACF"}

package/dist/collection/tree-model.js

@@ -0,0 +1,122 @@
+import { event } from '@oddkin/core/element';
+import { computed, signal } from '@oddkin/core/reactive';
+/** The user asked to expand or collapse an item; cancel it to keep the current state. */
+export const treeToggleEvent = event('odd-toggle', {
+    bubbles: true,
+    composed: true,
+    cancelable: true,
+    intent: 'user',
+    description: 'An item is about to expand or collapse; cancelable. Load the children of a lazy item here.',
+});
+/**
+ * What every element showing a hierarchy as `treeitem` rows shares (`odd-tree`, `odd-picker`):
+ * the shown rows from `items`, expansion (as the caller's `expanded` says; otherwise as the user
+ * left it, else open when it holds a selected item; selecting never expands or selects
+ * descendants), the user's toggles reported as `odd-toggle` (cancelable; a lazy item is busy until
+ * it has `children`), and the APG keys that act on the hierarchy. Focus is the element's: rows
+ * move with roving focus (`odd-tree`) or as the active descendant of a combobox (`odd-picker`).
+ * Internal to `@oddkin/components`.
+ */
+export class TreeModel {
+    #options;
+    // Expansion the user chose while `expanded` is not set; other items follow the selection.
+    #toggled = signal(new Map());
+    /** The shown rows, in order. */
+    rows;
+    constructor(options) {
+        this.#options = options;
+        this.rows = computed(() => {
+            const rows = [];
+            const walk = (items, level, parent) => items.forEach((item, index) => {
+                const expanded = this.isExpanded(item);
+                rows.push({
+                    item,
+                    level,
+                    size: items.length,
+                    position: index + 1,
+                    parent,
+                    expandable: this.expandable(item),
+                    expanded,
+                    selected: options.selected(item),
+                    busy: expanded && !!item.lazy && !item.children,
+                });
+                if (expanded && item.children)
+                    walk(item.children, level + 1, item);
+            });
+            walk(options.items() ?? [], 1);
+            return rows;
+        });
+    }
+    /** Whether the item has (or will load) children. */
+    expandable(item) {
+        return item.children ? item.children.length > 0 : !!item.lazy;
+    }
+    /** Whether the item is expanded. */
+    isExpanded(item) {
+        if (!this.expandable(item))
+            return false;
+        const expanded = this.#options.expanded();
+        if (expanded)
+            return expanded.includes(item.id);
+        return this.#toggled.value.get(item.id) ?? this.#holdsSelected(item);
+    }
+    #holdsSelected(item) {
+        return !!item.children?.some((child) => this.#options.selected(child) || this.#holdsSelected(child));
+    }
+    /** Expands or collapses an item after `odd-toggle`, unless that is cancelled. */
+    toggle(item, expanded = !this.isExpanded(item)) {
+        if (item.disabled || !this.expandable(item) || expanded === this.isExpanded(item))
+            return;
+        if (!this.#options.report({ id: item.id, expanded }) || this.#options.expanded())
+            return;
+        this.#toggled.value = new Map(this.#toggled.peek()).set(item.id, expanded);
+    }
+    /**
+     * The keys that act on the hierarchy (APG tree view): 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. `move` makes an item the focused or active row. False for other keys,
+     * and for Right on a row without children.
+     */
+    key(key, row, rtl, move) {
+        const mirrored = { ArrowLeft: 'ArrowRight', ArrowRight: 'ArrowLeft' };
+        const { item } = row;
+        switch ((rtl && mirrored[key]) || key) {
+            case 'ArrowRight':
+                if (!row.expandable)
+                    return false;
+                if (!row.expanded)
+                    this.toggle(item, true);
+                else if (item.children?.[0])
+                    move(item.children[0]);
+                break;
+            case 'ArrowLeft':
+                if (row.expanded)
+                    this.toggle(item, false);
+                else if (row.parent)
+                    move(row.parent);
+                break;
+            case '*':
+                for (const sibling of row.parent?.children ?? this.#options.items() ?? [])
+                    this.toggle(sibling, true);
+                break;
+            default:
+                return false;
+        }
+        return true;
+    }
+    /** The item with `id` and its ancestors, outermost first; empty when there is none. */
+    path(id) {
+        const find = (items) => {
+            for (const item of items) {
+                if (item.id === id)
+                    return [item];
+                const below = item.children ? find(item.children) : [];
+                if (below.length)
+                    return [item, ...below];
+            }
+            return [];
+        };
+        return find(this.#options.items() ?? []);
+    }
+}
+//# sourceMappingURL=tree-model.js.map

package/dist/collection/tree-model.js.map

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