@fusion.dev/helix-headless 0.145.0 → 0.146.0

package/dist/object-inspector/root/object-inspector-root.js

@@ -5,14 +5,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessObjectInspector_1;
-import { AriaForwardController, CopyController, countLabel, customElement, drawStatus, elementById, fillTemplate, formatNumbers, HelixActivateEvent, HelixBeforeActivateEvent, HelixElement, HelixFilterEvent, HelixFilteredEvent, inlineStep, requestChange, StatusController, scrollItemIntoView, searchableById, VirtualizeController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, CopyController, countLabel, customElement, drawStatus, elementById, fillTemplate, formatNumbers, HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeCloseEvent, HelixBeforeOpenEvent, HelixElement, HelixFilterEvent, HelixFilteredEvent, inlineStep, requestChange, StatusController, scrollItemIntoView, searchableById, treeArrow, VirtualizeController, } from '@fusion.dev/helix-core';
 import { caretDown, caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html as staticHtml } from 'lit/static-html.js';
 import '../../copy-button/index.js';
-import { ancestorsOf, entries, flatten, search, seed } from '../rows.js';
+import { cursorFor, entries, flatten, search, seed, siblingBranches, withAncestors, } from '../rows.js';
 let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends HelixElement {
     constructor() {
         super(...arguments);
@@ -38,6 +39,8 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         this.opened = new Set();
         this.cursor = 0;
         this.revealing = false;
+        this.focusing = false;
+        this.hadFocus = false;
         this.typed = { at: 0, text: '' };
         this.branches = new Set();
         this.aria = new AriaForwardController(this, {
@@ -83,22 +86,23 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
                     break;
                 case 'ArrowRight':
                 case 'ArrowLeft':
-                    if (inlineStep(this, event.key) === 1) {
-                        if (row.branch && !row.open) {
-                            this.toggle(row, true);
-                        }
-                        else if (row.open) {
+                    switch (treeArrow(row, inlineStep(this, event.key) === 1 ? 1 : -1)) {
+                        case 'open':
+                        case 'close':
+                            this.toggle(row, !row.open);
+                            break;
+                        case 'child':
                             this.move(this.cursor + 1);
+                            break;
+                        case 'parent': {
+                            const parent = rows.findLastIndex((candidate, at) => at < this.cursor && candidate.depth === row.depth - 1);
+                            if (parent >= 0) {
+                                this.move(parent);
+                            }
+                            break;
                         }
-                    }
-                    else if (row.open) {
-                        this.toggle(row, false);
-                    }
-                    else {
-                        const parent = rows.findLastIndex((candidate, at) => at < this.cursor && candidate.depth === row.depth - 1);
-                        if (parent >= 0) {
-                            this.move(parent);
-                        }
+                        default:
+                            break;
                     }
                     break;
                 case 'Enter':
@@ -108,7 +112,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
                     }
                     break;
                 case '*':
-                    this.openSiblings(row);
+                    this.requestOpen(siblingBranches(rows, row), true);
                     break;
                 default:
                     if (event.key.length !== 1 || event.altKey || event.ctrlKey || event.metaKey) {
@@ -136,9 +140,22 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             }
         };
         this.handleFilterKeydown = (event) => {
-            if (event.key === 'ArrowDown') {
+            if (event.key === 'ArrowDown' && this.rows.length > 0) {
                 event.preventDefault();
-                this.partNamed('tree')?.focus();
+                this.revealing = true;
+                this.focusing = true;
+                this.requestUpdate();
+            }
+        };
+        this.handleFocusIn = (event) => {
+            const index = Number(event.target.dataset?.index);
+            if (Number.isInteger(index) && index !== this.cursor) {
+                this.move(index);
+            }
+        };
+        this.handleFocusOut = () => {
+            if (this.windowed) {
+                this.requestUpdate();
             }
         };
     }
@@ -173,18 +190,11 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         }
     }
     openAround(paths) {
-        const opened = new Set(this.opened);
-        for (const path of paths) {
-            for (const above of ancestorsOf(path)) {
-                if (this.branches.has(above)) {
-                    opened.add(above);
-                }
-            }
-        }
-        this.opened = opened;
+        this.opened = withAncestors(this.opened, this.branches, paths);
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        this.hadFocus = this.hasFocusedRow();
         if (this.loadedFor !== this.for && searchableById(this) && !this.hydrating) {
             this.loadedFor = this.for;
             this.load();
@@ -212,26 +222,12 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             wanted !== undefined ||
             ['active', 'defaultDepth', 'expanded', 'filter', 'opened'].some((name) => changed.has(name))) {
             this.rows = flatten(this.root, this.opened, this.found);
-            this.cursor = this.place(wanted ?? was, changed.has('filter'));
+            this.cursor = cursorFor(this.rows, wanted ?? was, this.cursor, changed.has('filter'));
         }
         if (changed.has('filter') && this.hasUpdated) {
             this.tell();
         }
     }
-    place(path, filtered) {
-        const rows = this.rows;
-        const at = (one) => rows.findIndex((row) => row.path === one);
-        const own = path === undefined ? -1 : at(path);
-        if (own >= 0 || path === undefined) {
-            return own >= 0 ? own : Math.min(this.cursor, Math.max(0, rows.length - 1));
-        }
-        const match = filtered ? rows.findIndex((row) => row.match) : -1;
-        const around = ancestorsOf(path)
-            .reverse()
-            .map(at)
-            .find((one) => one >= 0);
-        return match >= 0 ? match : (around ?? 0);
-    }
     tell() {
         if (this.found) {
             this.status.say(countLabel(this.found.size, this.resultLabel, this.resultsLabel, this.lang));
@@ -250,6 +246,19 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             this.revealing = false;
             this.reveal();
         }
+        const lost = this.hadFocus &&
+            !this.hasFocusedRow() &&
+            this.ownerDocument.activeElement === this.ownerDocument.body;
+        if (this.focusing || lost) {
+            this.focusing = false;
+            this.focusActive();
+        }
+    }
+    focusActive() {
+        const row = this.partNamed('tree')?.querySelector(`[data-index="${this.cursor}"]`);
+        if (row && this.shadowRoot?.activeElement !== row) {
+            row.focus({ preventScroll: true });
+        }
     }
     load() {
         const text = this.for === '' ? '' : (elementById(this, this.for)?.textContent ?? '');
@@ -277,7 +286,10 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         const from = Number(this.cursor > Number(last.dataset.index) ? last.dataset.index : first.dataset.index);
         tree.scrollTop += (this.cursor - from) * height;
         this.virtualize.measure();
-        void this.updateComplete.then(() => this.reveal(attempts - 1));
+        void this.updateComplete.then(() => {
+            this.reveal(attempts - 1);
+            this.focusActive();
+        });
     }
     copyable(row) {
         if (!row) {
@@ -288,15 +300,44 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         }
         return JSON.stringify(row.value, null, 2) ?? String(row.value);
     }
-    toggle(row, open = !row.open) {
-        const opened = new Set(this.opened);
-        if (open) {
-            opened.add(row.path);
+    requestOpen(paths, open) {
+        if (paths.length === 0) {
+            return false;
         }
-        else {
-            opened.delete(row.path);
+        const applied = requestChange({
+            apply: () => {
+                const opened = new Set(this.opened);
+                for (const path of paths) {
+                    if (open) {
+                        opened.add(path);
+                    }
+                    else {
+                        opened.delete(path);
+                    }
+                }
+                this.opened = opened;
+            },
+            event: (next) => (next ? new HelixBeforeOpenEvent() : new HelixBeforeCloseEvent()),
+            host: this,
+            next: open,
+        });
+        if (applied) {
+            this.announceToggle(open);
         }
-        this.opened = opened;
+        return applied;
+    }
+    announceToggle(open) {
+        const states = { newState: open ? 'open' : 'closed', oldState: open ? 'closed' : 'open' };
+        if (typeof ToggleEvent === 'function') {
+            this.dispatchEvent(new ToggleEvent('toggle', states));
+            return;
+        }
+        const event = new Event('toggle', { bubbles: false, cancelable: false, composed: false });
+        Object.assign(event, states);
+        this.dispatchEvent(event);
+    }
+    toggle(row, open = !row.open) {
+        this.requestOpen([row.path], open);
     }
     move(to) {
         const at = Math.max(0, Math.min(to, this.rows.length - 1));
@@ -319,20 +360,9 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             this.dispatchEvent(new HelixActivateEvent({ value: path }));
         }
         this.revealing = true;
+        this.focusing = true;
         return true;
     }
-    openSiblings(row) {
-        const parent = row.path.slice(0, row.path.lastIndexOf('/'));
-        const opened = new Set(this.opened);
-        for (const one of this.rows) {
-            if (one.branch &&
-                one.depth === row.depth &&
-                one.path.slice(0, one.path.lastIndexOf('/')) === parent) {
-                opened.add(one.path);
-            }
-        }
-        this.opened = opened;
-    }
     typeahead(letter) {
         const now = Date.now();
         const text = now - this.typed.at < 500 ? this.typed.text + letter : letter;
@@ -391,18 +421,17 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         const active = index === this.cursor;
         return html `<div
       part="row${active ? ' row-active' : ''}${row.match ? ' row-match' : ''}"
-      role="treeitem"
+      role="row"
       id=${`row-${index}`}
       data-index=${index}
+      tabindex=${active ? '0' : '-1'}
       aria-level=${row.depth + 1}
       aria-posinset=${row.position}
-      aria-selected="false"
       aria-setsize=${row.siblings}
       aria-expanded=${row.branch ? String(row.open) : nothing}
       style=${`--object-inspector-level: ${row.depth}`}
       @click=${() => this.handleRowClick(index, row)}
-    >
-      ${row.branch
+    ><div role="gridcell" style="display: contents">${row.branch
             ? html `<svg
               part="toggle"
               ?data-mirror=${!row.open}
@@ -412,9 +441,13 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             >
               ${unsafeSVG((row.open ? caretDown : caretRight).content)}
             </svg>`
-            : nothing}${row.key === undefined ? nothing : html `<span part="key">${row.key}</span>: `}${this.renderValue(row)}
+            : nothing}${row.key === undefined ? nothing : html `<span part="key">${row.key}</span>: `}${this.renderValue(row)}</div>
     </div>`;
     }
+    hasFocusedRow() {
+        const focused = this.shadowRoot?.activeElement;
+        return focused?.getAttribute?.('role') === 'row';
+    }
     renderCopyButton(row) {
         return staticHtml `<${this.tag('copy-button')}
       part="copy"
@@ -429,10 +462,18 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
     }
     render() {
         const rows = this.rows;
-        const { after, before, first, last } = this.windowed
-            ? this.virtualize.window
-            : { after: 0, before: 0, first: 0, last: rows.length };
-        const shown = rows.slice(first, last);
+        const { first, last } = this.windowed ? this.virtualize.window : { first: 0, last: rows.length };
+        const kept = this.windowed && (this.cursor < first || this.cursor >= last) && this.hasFocusedRow()
+            ? this.cursor
+            : undefined;
+        const { after, before } = this.windowed
+            ? this.virtualize.spacers(kept)
+            : { after: 0, before: 0 };
+        const shown = rows.slice(first, last).map((row, at) => [row, first + at]);
+        const keptRow = kept === undefined ? undefined : rows[kept];
+        if (kept !== undefined && keptRow) {
+            shown.splice(kept < first ? 0 : shown.length, 0, [keptRow, kept]);
+        }
         return html `${this.label ? html `<div part="header"><span part="label">${this.label}</span></div>` : nothing}${this.filterable
             ? html `<input
             part="search-field"
@@ -450,16 +491,16 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         <div
           part="tree"
           id="tree"
-          role="tree"
-          tabindex="0"
+          role="treegrid"
           ?data-scroller=${this.windowed}
           aria-label=${this.label || this.treeLabel}
-          aria-activedescendant=${rows.length > 0 ? `row-${this.cursor}` : nothing}
           @keydown=${this.handleKeydown}
+          @focusin=${this.handleFocusIn}
+          @focusout=${this.handleFocusOut}
           @scroll=${() => this.virtualize.measure()}
         >
           ${this.windowed ? html `<div part="before" role="presentation" style="block-size: ${before}px"></div>` : nothing}
-          ${shown.map((row, at) => this.renderRow(row, first + at))}
+          ${repeat(shown, ([row]) => row.path, ([row, at]) => this.renderRow(row, at))}
           ${this.windowed ? html `<div part="after" role="presentation" style="block-size: ${after}px"></div>` : nothing}
         </div>
         ${this.noCopy ? nothing : this.renderCopyButton(rows[this.cursor])}

package/dist/object-inspector/rows.d.ts

@@ -55,3 +55,21 @@ export declare const seed: (root: unknown, depth: number, known?: Set<string>, o
     branches: Set<string>;
     opened: Set<string>;
 };
+/**
+ * Where the active row goes once the rows have moved, as an index into `rows`.
+ *
+ * Onto `path` where it is still shown. Where a filter just hid it
+ * (`filtered`), onto the first match. Otherwise onto the nearest branch around
+ * it that is shown. With no path to keep, `cursor` held inside the rows.
+ */
+export declare const cursorFor: (rows: readonly Row[], path: string | undefined, cursor: number, filtered: boolean) => number;
+/**
+ * The open branches with every branch around each of `paths` opened too,
+ * where the value has that branch (`branches`).
+ */
+export declare const withAncestors: (opened: ReadonlySet<string>, branches: ReadonlySet<string>, paths: Iterable<string>) => Set<string>;
+/**
+ * The branches `*` opens from `row`: every branch at its depth under the same
+ * parent, itself included, that is not open yet.
+ */
+export declare const siblingBranches: (rows: readonly Row[], row: Row) => string[];

package/dist/object-inspector/rows.js

@@ -84,3 +84,36 @@ export const seed = (root, depth, known = new Set(), opened = new Set()) => {
     visit(root, '', 0);
     return { branches, opened: open };
 };
+export const cursorFor = (rows, path, cursor, filtered) => {
+    const at = (one) => rows.findIndex((row) => row.path === one);
+    const own = path === undefined ? -1 : at(path);
+    if (own >= 0 || path === undefined) {
+        return own >= 0 ? own : Math.min(cursor, Math.max(0, rows.length - 1));
+    }
+    const match = filtered ? rows.findIndex((row) => row.match) : -1;
+    const around = ancestorsOf(path)
+        .reverse()
+        .map(at)
+        .find((one) => one >= 0);
+    return match >= 0 ? match : (around ?? 0);
+};
+export const withAncestors = (opened, branches, paths) => {
+    const next = new Set(opened);
+    for (const path of paths) {
+        for (const above of ancestorsOf(path)) {
+            if (branches.has(above)) {
+                next.add(above);
+            }
+        }
+    }
+    return next;
+};
+export const siblingBranches = (rows, row) => {
+    const parent = row.path.slice(0, row.path.lastIndexOf('/'));
+    return rows
+        .filter((one) => one.branch &&
+        !one.open &&
+        one.depth === row.depth &&
+        one.path.slice(0, one.path.lastIndexOf('/')) === parent)
+        .map((one) => one.path);
+};

package/dist/option/root/option-root.d.ts

@@ -63,9 +63,11 @@ export declare class HelixHeadlessOption extends HelixElement {
     /**
      * Whether this is the option the keyboard is on.
      *
-     * Written by the listbox, which writes it once a reader moves the highlight.
-     * It shows as `:state(active)`, and as a `data-active` attribute for the
-     * stylesheets written before the state existed.
+     * Written by the listbox once a reader moves the highlight. Style it with
+     * `:state(active)`, or `::part(item-active)` for an option inside another
+     * component's shadow root. The `data-active` attribute sets it from markup;
+     * it is also written back for stylesheets from before the state, and no
+     * stylesheet of the library's own selects it.
      */
     active: boolean;
     /**

package/dist/outline/root/outline-root.d.ts

@@ -20,6 +20,9 @@ import { type Branch } from '../levels.js';
  *
  * A heading slotted into `heading` names the navigation, in place of `label`.
  *
+ * In a contents rail with a scrollbar of its own, `follow` keeps the link of
+ * the section in view showing as the reader scrolls the page.
+ *
  * The current section is decided by the headings' positions. An
  * `IntersectionObserver` with a band near the top fails both ways: when
  * headings are far apart, none is in the band and no section is marked, and
@@ -73,6 +76,13 @@ export declare class HelixHeadlessOutline extends HelixElement {
      * JavaScript rather than CSS decides.
      */
     behavior: ScrollBehavior;
+    /**
+     * Keeps the link of the section in view in view itself, in an outline
+     * longer than the box it scrolls in, such as a contents rail with a
+     * scrollbar of its own. Only that box moves: never the page, and never the
+     * box the sections scroll in.
+     */
+    follow: boolean;
     /**
      * The navigation's name, read by screen readers. A heading in the `heading`
      * slot names it in place of this.
@@ -154,6 +164,14 @@ export declare class HelixHeadlessOutline extends HelixElement {
     private mark;
     /** Where the destination is set, whether measured or asked for. */
     private markTo;
+    /**
+     * Scrolls the box the links scroll in to show `link`, under `follow`.
+     *
+     * The nearest box above the link that scrolls, and only where it is the
+     * rail's own: the page, the box the sections scroll in, or a box holding it
+     * would move the reading under the reader, which is the scroll this marks.
+     */
+    private reveal;
     /**
      * Whether the page has no more scroll left.
      *

package/dist/outline/root/outline-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, elementById, HelixActivateEvent, HelixElement, IndicatorController, reflectElements, } from '@fusion.dev/helix-core';
+import { customElement, elementById, HelixActivateEvent, HelixElement, IndicatorController, plainClick, reflectElements, scrollItemIntoView, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { levelOf, nest } from '../levels.js';
@@ -18,6 +18,7 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
             surface: () => this.partNamed('nav'),
         });
         this.behavior = 'auto';
+        this.follow = false;
         this.label = 'On this page';
         this.offset = 0;
         this.reading = '';
@@ -32,10 +33,7 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
             });
         };
         this.handleClick = (event) => {
-            if (event.defaultPrevented || event.button !== 0) {
-                return;
-            }
-            if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+            if (event.defaultPrevented || !plainClick(event)) {
                 return;
             }
             const link = event.target?.closest?.('a[href^="#"]');
@@ -142,9 +140,26 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         if (next !== this.reading) {
             this.reading = next;
             this.indicator.place();
+            if (this.follow && active) {
+                this.reveal(active.link);
+            }
             this.dispatchEvent(new HelixActivateEvent({ value: next }));
         }
     }
+    reveal(link) {
+        const sections = this.scroller;
+        const page = this.page;
+        for (let node = link.parentElement; node && node !== page; node = node.parentElement) {
+            const { overflowY } = getComputedStyle(node);
+            if (!/auto|scroll|overlay/.test(overflowY) || node.scrollHeight <= node.clientHeight) {
+                continue;
+            }
+            if (node !== sections && !node.contains(sections)) {
+                scrollItemIntoView(link, { scroller: node });
+            }
+            return;
+        }
+    }
     get atEnd() {
         const doc = this.scroller;
         return Math.ceil(doc.scrollTop + doc.clientHeight) >= doc.scrollHeight - 1;
@@ -282,6 +297,9 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
 __decorate([
     property()
 ], HelixHeadlessOutline.prototype, "behavior", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessOutline.prototype, "follow", void 0);
 __decorate([
     property()
 ], HelixHeadlessOutline.prototype, "label", void 0);

package/dist/pagination/size/pagination-size.d.ts

@@ -49,6 +49,7 @@ import '../../select/index.js';
  * @csspart control-label - The label beside the number.
  * @csspart control-listbox - The list inside the panel.
  * @csspart control-listbox-empty - The text shown when the filter hides every option.
+ * @csspart control-listbox-error - The inner list's `error` part, shown while its `load-error` is set.
  * @csspart control-listbox-feedback - The inner list's message that says what is wrong with the value.
  * @csspart control-listbox-filter-icon - The icon beside the filter field.
  * @csspart control-listbox-filter-mark - The default icon beside the filter field, shown when none is slotted.

package/dist/pagination/size/pagination-size.js

@@ -93,7 +93,7 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
       part="control"
       exportparts="feedback: control-feedback, hint: control-hint, indicator: control-indicator,
         label: control-label, listbox: control-listbox, listbox-empty: control-listbox-empty,
-        listbox-feedback: control-listbox-feedback, listbox-filter-icon: control-listbox-filter-icon,
+        listbox-error: control-listbox-error, listbox-feedback: control-listbox-feedback, listbox-filter-icon: control-listbox-filter-icon,
         listbox-filter-mark: control-listbox-filter-mark, listbox-hint: control-listbox-hint,
         listbox-items: control-listbox-items, listbox-label: control-listbox-label,
         listbox-live: control-listbox-live, listbox-loading: control-listbox-loading, listbox-search: control-listbox-search,

package/dist/pin-input/code.d.ts

@@ -0,0 +1,10 @@
+import type { PinCase, PinType } from './root/pin-input-root.js';
+/**
+ * Typed or pasted text as the code's characters: trimmed, with what `type`
+ * refuses dropped, and its letters cased as `letterCase` asks. Web Awesome's
+ * OTP input takes the same `case`.
+ *
+ * `numeric` keeps digits, `alphanumeric` keeps ASCII letters and digits, and
+ * `text` keeps everything.
+ */
+export declare const cleanCode: (text: string, type: PinType, letterCase?: PinCase) => string;

package/dist/pin-input/code.js

@@ -0,0 +1,13 @@
+export const cleanCode = (text, type, letterCase = 'preserve') => {
+    const trimmed = text.trim();
+    const kept = type === 'numeric'
+        ? trimmed.replace(/\D/g, '')
+        : type === 'alphanumeric'
+            ? trimmed.replace(/[^0-9A-Za-z]/g, '')
+            : trimmed;
+    return letterCase === 'upper'
+        ? kept.toUpperCase()
+        : letterCase === 'lower'
+            ? kept.toLowerCase()
+            : kept;
+};

package/dist/pin-input/root/pin-input-root.d.ts

@@ -2,6 +2,8 @@ import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core'
 import { type PropertyValues, type TemplateResult } from 'lit';
 /** What a cell accepts, which decides the keyboard a phone offers. */
 export type PinType = 'alphanumeric' | 'numeric' | 'text';
+/** How typed letters are cased: as typed, or turned upper or lower case. */
+export type PinCase = 'lower' | 'preserve' | 'upper';
 declare const HelixHeadlessPinInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A field for a short code, with one box for each character.
@@ -33,6 +35,21 @@ declare const HelixHeadlessPinInput_base: (new (...args: any[]) => import("@fusi
  * and the right arrow moves to the next box. The label, hint, and feedback
  * follow the page's direction.
  *
+ * **Keyboard.** Each box is a tab stop of its own, as each is a real input.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | A character | Fills the box and moves to the next one. A longer run is read as a paste. |
+ * | Left, Right | Moves to the box before or after. |
+ * | Home, End | Moves to the first box, or to the box after the last character. |
+ * | Backspace | In an empty box, clears the box before it and moves there. |
+ * | Delete | Removes the character in the box and pulls the rest of the code back. |
+ * | Enter | Submits the form. |
+ *
+ * The row has `role="group"` and the field's name, and each box is named by
+ * `cell-label`, such as "Character 2 of 6". `helix-complete` is a
+ * `HelixCompleteEvent` sent once the last box is filled.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -55,6 +72,7 @@ declare const HelixHeadlessPinInput_base: (new (...args: any[]) => import("@fusi
  * @csspart label - The label above the boxes.
  * @csspart separator - The text `format` draws between two boxes.
  *
+ * @cssstate complete - Every box holds a character.
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
@@ -78,6 +96,12 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
      * took: a refused last character submits nothing.
      */
     autosubmit: boolean;
+    /**
+     * How typed and pasted letters are cased: `upper`, `lower`, or `preserve`
+     * to keep them as typed. Web Awesome's OTP input takes the same `case`, for
+     * a code a service reads in one case.
+     */
+    case: PinCase;
     /**
      * Accessible name for one box, with `{index}` and `{length}` filled in.
      */
@@ -147,7 +171,7 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
     private get cells();
     /** The code as characters, padded to the row so every box has one to show. */
     private get characters();
-    /** Everything this box would accept, with the rest dropped. */
+    /** Everything this box would accept, with the rest dropped and cased. */
     private clean;
     /**
      * Writes a run of characters from one box onward.