@fusion.dev/helix-headless 0.146.0 → 0.148.0

package/dist/notifications/root/notifications-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, deepContains, focusableElements, HelixElement, HelixLoadMoreEvent, HelixReadEvent, hostAria, MixinCollection, markRegion, rovingStop, whenHydrated, } from '@fusion.dev/helix-core';
+import { assignSlots, ChildrenController, customElement, deepContains, focusableElements, HelixElement, HelixLoadMoreEvent, HelixReadEvent, hostAria, MixinCollection, markRegion, rovingStop, whenHydrated, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { feedStep } from '../feed-keys.js';
@@ -12,6 +12,7 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
     constructor() {
         super(...arguments);
         this.label = '';
+        this.loadError = '';
         this.loadMore = false;
         this.loadMoreLabel = 'Load more';
         this.markAll = false;
@@ -20,6 +21,7 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
             this.assign();
             this.requestUpdate();
         };
+        this.childWatch = new ChildrenController(this, this.handleSlotChange);
         this.handleRead = () => {
             queueMicrotask(() => this.requestUpdate());
         };
@@ -138,11 +140,8 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
             }
             return;
         }
-        list.assign(...this.rows);
-        for (const name of ['header', 'footer']) {
-            const slot = root?.querySelector?.(`slot[name="${name}"]`);
-            slot?.assign?.(...[...this.children].filter((child) => child.getAttribute('slot') === name));
-        }
+        const rows = this.rows;
+        assignSlots(root, this.children, (child) => rows.includes(child) ? 'items' : child.getAttribute('slot') === 'items' ? '' : undefined);
     }
     get reachable() {
         return this.items.filter((row) => !('assignedSlot' in row) || row.assignedSlot !== null);
@@ -178,6 +177,34 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label || 'Notifications', role: 'region' });
+        const failed = this.failed;
+        this.toggleState('error', failed);
+        this.toggleState('loading', this.loading);
+        this.toggleState('empty', !this.loading && !failed && this.childrenKnown && this.items.length === 0);
+    }
+    renderStatus(hasContent) {
+        if (this.failed) {
+            return html `<p part="error"><slot name="error">${this.loadError}</slot></p>`;
+        }
+        if (!this.loading && hasContent) {
+            return nothing;
+        }
+        return this.loading
+            ? html `<p part="loading"><slot name="loading">${this.loadingText}</slot></p>`
+            : html `<p part="empty"><slot name="empty">${this.emptyText}</slot></p>`;
+    }
+    renderLive(hasContent) {
+        const said = this.failed
+            ? this.loadError
+            : this.loading
+                ? this.loadingText
+                : hasContent
+                    ? this.announced
+                    : this.emptyText;
+        return html `<span part="live" role="status">${said}</span>`;
+    }
+    get failed() {
+        return Boolean(this.loadError);
     }
     markMedia() {
         this.toggleState('media', this.items.some((item) => item.querySelector(':scope > [slot="media"]') !== null));
@@ -238,6 +265,9 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
 __decorate([
     property()
 ], HelixHeadlessNotifications.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'load-error' })
+], HelixHeadlessNotifications.prototype, "loadError", void 0);
 __decorate([
     property({ attribute: 'load-more', type: Boolean })
 ], HelixHeadlessNotifications.prototype, "loadMore", void 0);

package/dist/number-input/grain.d.ts

@@ -0,0 +1,28 @@
+/**
+ * The steps a number field takes when `step` is not set, read off its format.
+ *
+ * React Aria's NumberField does not round a typed number to whole steps when
+ * no step is given: it keeps the fraction the format shows. A field showing
+ * dollars keeps cents, and one showing a percent steps by one percent.
+ */
+/**
+ * The smallest amount a format shows, which is the grid a typed number is
+ * rounded to when no `step` is set: `0.01` for a currency in dollars, `0.001`
+ * for a plain decimal, and `0.01` for a whole percent, since a percent shows
+ * the number a hundred times over.
+ */
+export declare const formatGrain: (locale: string, options: Intl.NumberFormatOptions) => number;
+/**
+ * How far one press moves when no `step` is set: one percent for a percent,
+ * as React Aria does, and one otherwise.
+ */
+export declare const strideOf: (options: Intl.NumberFormatOptions | undefined) => number;
+/**
+ * How many decimal places a number is written with.
+ *
+ * Read off the string rather than computed, because the question is about how
+ * the consumer wrote the step and not about what the binary can represent.
+ * `1e-7` is handled separately: its string form has no dot at all, so counting
+ * after one would say zero and round every result to a whole number.
+ */
+export declare const decimals: (value: number) => number;

package/dist/number-input/grain.js

@@ -0,0 +1,14 @@
+export const formatGrain = (locale, options) => {
+    const { maximumFractionDigits = 0 } = new Intl.NumberFormat(locale || undefined, options).resolvedOptions();
+    const places = maximumFractionDigits + (options.style === 'percent' ? 2 : 0);
+    return Number(`1e-${places}`);
+};
+export const strideOf = (options) => options?.style === 'percent' ? 0.01 : 1;
+export const decimals = (value) => {
+    const text = String(value);
+    const exponent = /e-(\d+)$/.exec(text);
+    if (exponent) {
+        return Number(exponent[1]);
+    }
+    return (text.split('.')[1] ?? '').length;
+};

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

@@ -77,6 +77,7 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
  * @csspart label - The label above the field. It is also the grip you drag when `scrub` is set.
  *
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
+ * @cssstate scrubbing - The label is being dragged to change the value, under `scrub`, as Zag's scrubber says while it is held.
  */
 export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_base {
     protected readonly aria: AriaForwardController;
@@ -182,8 +183,14 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
     /**
      * How far one step moves. A value off the step grid, counted from `min`, is
      * invalid, as it is in a native number field.
+     *
+     * Unset, a step moves by one, or by one percent under a percent format, and
+     * a typed number is rounded to the smallest amount `format-options` shows
+     * rather than to whole steps, as React Aria's NumberField does: a field
+     * showing dollars keeps the cents typed into it. Without `format-options`
+     * the grid is whole numbers, as in a native number field.
      */
-    step: number;
+    step?: number;
     /**
      * The message the browser shows when the number is off the step grid, with
      * `{below}` and `{above}` filled in with the nearest valid values.
@@ -222,6 +229,15 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
     private get control();
     /** The value as a number, or `null` where the field holds nothing usable. */
     private get numeric();
+    /** The grain last read off the format, with the locale and options it was read for. */
+    private grainOf?;
+    /** How far one press moves: `step`, or the stride the format implies. */
+    private get stride();
+    /**
+     * The grid a typed number is rounded to: `step` where it is set, and
+     * otherwise the smallest amount the format shows, or whole numbers.
+     */
+    private get grid();
     /** Whether `value` is on the step grid, counted from `min`. */
     private onStep;
     /**

package/dist/number-input/root/number-input-root.js

@@ -9,6 +9,7 @@ import { minus, plus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { decimals, formatGrain, strideOf } from '../grain.js';
 const SCRUB_PITCH = 4;
 const SCRUB_FINE = 16;
 let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinControllerValue(MixinField(HelixFormElement)) {
@@ -25,7 +26,6 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         this.placeholder = '';
         this.readOnly = false;
         this.scrub = false;
-        this.step = 1;
         this.valueText = '';
         this.wheel = false;
         this.editing = false;
@@ -57,6 +57,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             this.scrubFrom = event.clientX;
             this.scrubValue = this.numeric ?? this.min ?? 0;
             this.scrubStart = this.value;
+            this.toggleState('scrubbing', true);
             event.preventDefault();
         };
         this.handleScrubMove = (event) => {
@@ -64,7 +65,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             if (!grip.hasPointerCapture(event.pointerId)) {
                 return;
             }
-            const step = Math.abs(this.step) || 1;
+            const step = this.stride;
             const unit = event.shiftKey ? (this.largeStep ?? 10) * step : step;
             const pitch = event.altKey ? SCRUB_FINE : SCRUB_PITCH;
             const steps = Math.round((event.clientX - this.scrubFrom) / pitch);
@@ -75,7 +76,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             this.requestValue(next);
             const control = this.control;
             if (control) {
-                restoreValue(control, this.value);
+                restoreValue(control, this.shown);
             }
         };
         this.handleScrubEnd = (event) => {
@@ -84,6 +85,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
                 return;
             }
             grip.releasePointerCapture(event.pointerId);
+            this.toggleState('scrubbing', false);
             if (this.value !== this.scrubStart) {
                 this.announceChange();
             }
@@ -92,7 +94,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             event.stopPropagation();
             const control = event.target;
             this.requestValue(control.value);
-            restoreValue(control, this.value);
+            restoreValue(control, this.shown);
         };
         this.handleBlur = () => {
             this.editing = false;
@@ -158,14 +160,31 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         }
         return parseNumber(text, this.locale, this.formatOptions);
     }
+    get stride() {
+        return Math.abs(this.step ?? 0) || strideOf(this.formatOptions);
+    }
+    get grid() {
+        const step = Math.abs(this.step ?? 0);
+        const options = this.formatOptions;
+        if (step || !options) {
+            return step || 1;
+        }
+        const [locale, read, grain] = this.grainOf ?? [];
+        if (locale === this.locale && read === options && grain !== undefined) {
+            return grain;
+        }
+        const fresh = formatGrain(this.locale, options);
+        this.grainOf = [this.locale, options, fresh];
+        return fresh;
+    }
     onStep(value) {
-        const step = Math.abs(this.step) || 1;
+        const step = this.grid;
         const anchor = this.min ?? 0;
         const steps = (value - anchor) / step;
         return Math.abs(steps - Math.round(steps)) < 1e-9;
     }
     clamp(value) {
-        const step = Math.abs(this.step) || 1;
+        const step = this.grid;
         const anchor = this.min ?? 0;
         const stepped = anchor + Math.round((value - anchor) / step) * step;
         const floored = this.min === undefined ? stepped : Math.max(this.min, stepped);
@@ -177,7 +196,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         if (this.isDisabled || this.readOnly) {
             return;
         }
-        const step = Math.abs(this.step) || 1;
+        const step = this.stride;
         const from = this.numeric ?? this.min ?? 0;
         const next = this.clamp(this.numeric === null ? from : from + steps * step);
         this.land(String(next));
@@ -187,7 +206,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         const applied = this.requestValue(next);
         const control = this.control;
         if (control) {
-            restoreValue(control, this.value);
+            restoreValue(control, this.shown);
         }
         if (applied && this.value !== before) {
             this.announceChange();
@@ -223,7 +242,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         }
         const before = this.value;
         this.requestValue(String(this.clamp(parsed)));
-        restoreValue(control, this.value);
+        restoreValue(control, this.shown);
         return this.value !== before;
     }
     sync() {
@@ -253,7 +272,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             }), control);
         }
         else if (parsed !== null && !this.onStep(parsed)) {
-            const step = Math.abs(this.step) || 1;
+            const step = this.grid;
             const anchor = this.min ?? 0;
             const below = this.clamp(anchor + Math.floor((parsed - anchor) / step) * step);
             const above = this.clamp(anchor + Math.ceil((parsed - anchor) / step) * step);
@@ -431,11 +450,3 @@ HelixHeadlessNumberInput = __decorate([
     customElement('helix-headless-number-input')
 ], HelixHeadlessNumberInput);
 export { HelixHeadlessNumberInput };
-const decimals = (value) => {
-    const text = String(value);
-    const exponent = /e-(\d+)$/.exec(text);
-    if (exponent) {
-        return Number(exponent[1]);
-    }
-    return (text.split('.')[1] ?? '').length;
-};

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

@@ -23,6 +23,7 @@ import { type Row } from '../rows.js';
  * | Right | Opens a closed branch, or moves into an open one. Left on a right-to-left page. |
  * | Left | Closes an open branch, or moves to the parent. Right on a right-to-left page. |
  * | Home, End | Moves to the first or the last row. |
+ * | Page Down, Page Up | Moves a box's height of rows, so the row at one edge lands at the other. |
  * | Enter, Space | Opens or closes a branch. |
  * | `*` | Opens every branch beside the active row. |
  * | A letter or a word | Moves to the next row whose key starts with what you typed. |
@@ -90,6 +91,7 @@ import { type Row } from '../rows.js';
  * @csspart copy-button - The button inside the copy control.
  * @csspart copy-live - The live region inside the copy button, which says its `pending-label` when the copy becomes pending under focus.
  * @csspart copy-mark - The clipboard icon, and the confirmation icon that replaces it.
+ * @csspart copy-spinner - The ring the copy button turns while it is pending.
  * @csspart copy-text - The words on that button, trimmed to their capitals and baseline.
  * @csspart copy-tooltip - The tooltip, forwarded from the copy button's tooltip.
  * @csspart copy-tooltip-arrow - The tooltip's arrow, pointing at the copy button.
@@ -254,7 +256,7 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     /** Whether a row held focus as this update began, so a row the render moved gets it back. */
     private hadFocus;
     /** What has been typed toward a key, and when the last letter came. */
-    private typed;
+    private readonly typed;
     /** The branches of the last value seen, by path, so a new value can tell old ones from new. */
     private branches;
     /** Carries a host `aria-label` and `aria-labelledby` to the tree, which is what takes focus. */
@@ -338,13 +340,18 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     private move;
     private readonly handleKeydown;
     /**
-     * Moves to the next row whose key starts with what was typed.
-     *
-     * Letters typed within half a second of each other run together, so `me`
-     * finds `meta` past `message`. A repeated single letter cycles through the
-     * keys that start with it.
+     * Moves to the next row whose key starts with what was typed, through core's
+     * `Typeahead`: letters within half a second run together, so `me` finds
+     * `meta` past `message`, and a repeated letter cycles through the keys that
+     * start with it.
      */
     private typeahead;
+    /**
+     * How many rows Page Down and Page Up move: the rows that fit in the tree's
+     * box, or in the window where the box does not scroll, less one, so the row
+     * at one edge lands at the other.
+     */
+    private pageStep;
     /** A press opens or closes the row it lands on, once that row is the active one. */
     private handleRowClick;
     /** Text typed in the filter field, asked for before the tree narrows to it. */
@@ -373,6 +380,10 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     private renderRow;
     /** Whether a row of the tree holds focus. */
     private hasFocusedRow;
+    /** Where the row holding focus is among the visible rows, or nothing while none does. */
+    private focusedIndex;
+    /** Focus on the tree itself, its stop while the active row is not drawn, goes on to that row. */
+    private readonly handleTreeFocus;
     /**
      * A row that takes focus some other way than the keys, from a script or a
      * screen reader, becomes the active row, so focus and the keys agree.

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

@@ -5,7 +5,7 @@ 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, HelixBeforeCloseEvent, HelixBeforeOpenEvent, HelixElement, HelixFilterEvent, HelixFilteredEvent, inlineStep, requestChange, StatusController, scrollItemIntoView, searchableById, treeArrow, VirtualizeController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, CopyController, countLabel, customElement, drawStatus, elementById, fillTemplate, formatNumbers, HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeCloseEvent, HelixBeforeOpenEvent, HelixElement, HelixFilterEvent, HelixFilteredEvent, inlineStep, pageRows, requestChange, StatusController, scrollItemIntoView, scrollRoom, searchableById, Typeahead, 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';
@@ -41,7 +41,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         this.revealing = false;
         this.focusing = false;
         this.hadFocus = false;
-        this.typed = { at: 0, text: '' };
+        this.typed = new Typeahead();
         this.branches = new Set();
         this.aria = new AriaForwardController(this, {
             label: true,
@@ -84,6 +84,12 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
                 case 'End':
                     this.move(rows.length - 1);
                     break;
+                case 'PageDown':
+                    this.move(this.cursor + this.pageStep());
+                    break;
+                case 'PageUp':
+                    this.move(this.cursor - this.pageStep());
+                    break;
                 case 'ArrowRight':
                 case 'ArrowLeft':
                     switch (treeArrow(row, inlineStep(this, event.key) === 1 ? 1 : -1)) {
@@ -147,6 +153,11 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
                 this.requestUpdate();
             }
         };
+        this.handleTreeFocus = () => {
+            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) {
@@ -361,25 +372,18 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         }
         this.revealing = true;
         this.focusing = true;
+        this.requestUpdate();
         return true;
     }
     typeahead(letter) {
-        const now = Date.now();
-        const text = now - this.typed.at < 500 ? this.typed.text + letter : letter;
-        this.typed = { at: now, text };
-        const wanted = text.toLocaleLowerCase();
-        const repeated = [...wanted].every((one) => one === wanted[0]);
-        const rows = this.rows;
-        const start = wanted.length === 1 || repeated ? this.cursor + 1 : this.cursor;
-        for (let step = 0; step < rows.length; step += 1) {
-            const at = (start + step) % rows.length;
-            const key = rows[at]?.key?.toLocaleLowerCase();
-            if (key?.startsWith(repeated ? (wanted[0] ?? '') : wanted)) {
-                this.move(at);
-                return;
-            }
+        const at = this.typed.match(letter, this.rows.map((row) => row.key ?? ''), this.cursor);
+        if (at >= 0) {
+            this.move(at);
         }
     }
+    pageStep() {
+        return pageRows(scrollRoom(this.partNamed('tree')), this.virtualize.sizeOf(this.cursor) || HelixHeadlessObjectInspector_1.ESTIMATE);
+    }
     handleRowClick(index, row) {
         if (this.move(index) && row.branch) {
             this.toggle(row);
@@ -445,13 +449,16 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
     </div>`;
     }
     hasFocusedRow() {
+        return this.focusedIndex() !== undefined;
+    }
+    focusedIndex() {
         const focused = this.shadowRoot?.activeElement;
-        return focused?.getAttribute?.('role') === 'row';
+        return focused?.getAttribute?.('role') === 'row' ? Number(focused.dataset.index) : undefined;
     }
     renderCopyButton(row) {
         return staticHtml `<${this.tag('copy-button')}
       part="copy"
-      exportparts="button: copy-button, live: copy-live, text: copy-text, mark: copy-mark, tooltip: copy-tooltip,
+      exportparts="button: copy-button, live: copy-live, spinner: copy-spinner, text: copy-text, mark: copy-mark, tooltip: copy-tooltip,
         tooltip-arrow: copy-tooltip-arrow, tooltip-arrow-bottom: copy-tooltip-arrow-bottom,
         tooltip-arrow-left: copy-tooltip-arrow-left, tooltip-arrow-right: copy-tooltip-arrow-right,
         tooltip-arrow-top: copy-tooltip-arrow-top, tooltip-bottom: copy-tooltip-bottom,
@@ -463,8 +470,9 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
     render() {
         const rows = this.rows;
         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
+        const focused = this.focusedIndex();
+        const kept = this.windowed && focused !== undefined && (focused < first || focused >= last)
+            ? focused
             : undefined;
         const { after, before } = this.windowed
             ? this.virtualize.spacers(kept)
@@ -474,6 +482,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         if (kept !== undefined && keptRow) {
             shown.splice(kept < first ? 0 : shown.length, 0, [keptRow, kept]);
         }
+        const stopless = rows.length > 0 && !shown.some(([, at]) => at === this.cursor);
         return html `${this.label ? html `<div part="header"><span part="label">${this.label}</span></div>` : nothing}${this.filterable
             ? html `<input
             part="search-field"
@@ -493,8 +502,10 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
           id="tree"
           role="treegrid"
           ?data-scroller=${this.windowed}
+          tabindex=${stopless ? '0' : nothing}
           aria-label=${this.label || this.treeLabel}
           @keydown=${this.handleKeydown}
+          @focus=${this.handleTreeFocus}
           @focusin=${this.handleFocusIn}
           @focusout=${this.handleFocusOut}
           @scroll=${() => this.virtualize.measure()}

package/dist/option/index.d.ts

@@ -1,2 +1,3 @@
 export * from './group/option-group.js';
 export * from './root/option-root.js';
+export * from './separator/option-separator.js';

package/dist/option/index.js

@@ -1,2 +1,3 @@
 export * from './group/option-group.js';
 export * from './root/option-root.js';
+export * from './separator/option-separator.js';

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

@@ -0,0 +1,30 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues } from 'lit';
+/**
+ * @summary A rule between options or groups inside a listbox.
+ *
+ * @description
+ * Sets one run of options apart from the next where a heading would say too
+ * much, as React Aria's ListBox takes a `Separator`: actions apart from
+ * choices in a command palette, say, or the options a reader uses most apart
+ * from the rest.
+ *
+ * It has `role="separator"`, so a screen reader can say where one run ends,
+ * and it is no stop: the arrow keys move from the option before it to the one
+ * after. The list hides it while a filter is narrowing the options, since a
+ * rule between two runs of which only some options are left separates nothing.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Divider, ListBoxSeparator
+ * @documentation https://fusion.dev/helix/components/option
+ */
+export declare class HelixHeadlessOptionSeparator extends HelixElement {
+    protected willUpdate(changed: PropertyValues): void;
+    protected render(): typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-option-separator': HelixHeadlessOptionSeparator;
+    }
+}

package/dist/option/separator/option-separator.js

@@ -0,0 +1,21 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { nothing } from 'lit';
+let HelixHeadlessOptionSeparator = class HelixHeadlessOptionSeparator extends HelixElement {
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        hostAria(this.internals, { role: 'separator' });
+    }
+    render() {
+        return nothing;
+    }
+};
+HelixHeadlessOptionSeparator = __decorate([
+    customElement('helix-headless-option-separator')
+], HelixHeadlessOptionSeparator);
+export { HelixHeadlessOptionSeparator };

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

@@ -23,6 +23,18 @@ import { type Branch } from '../levels.js';
  * 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.
  *
+ * **Keyboard.** The links are your anchors, in the tab order as you wrote
+ * them, so the outline adds no keys of its own: Tab moves through the links
+ * and Enter follows one. Following a link moves focus to its section, so the
+ * next Tab goes on from the heading, also with `behavior` set.
+ *
+ * **What a screen reader hears.** A navigation landmark named by `label`, "On
+ * this page", or by the slotted heading. The links are lists, nested by level,
+ * so a reader hears how many links a level holds and where each one is. The
+ * link to the section in view carries `aria-current="location"`, read as
+ * "current location", and it moves as the page scrolls without announcing,
+ * which would interrupt the reading it follows.
+ *
  * 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

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, plainClick, reflectElements, scrollItemIntoView, } from '@fusion.dev/helix-core';
+import { customElement, elementById, HelixActivateEvent, HelixElement, IndicatorController, plainClick, reflectElements, scrollItemIntoView, scrollingAncestor, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { levelOf, nest } from '../levels.js';
@@ -148,16 +148,9 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     }
     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;
+        const node = scrollingAncestor(link, { axis: 'y', overflowing: true, stop: this.page });
+        if (node && node !== sections && !node.contains(sections)) {
+            scrollItemIntoView(link, { scroller: node });
         }
     }
     get atEnd() {
@@ -169,15 +162,8 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         return (doc.scrollingElement ?? doc.documentElement);
     }
     get scroller() {
-        const doc = globalThis.document;
         const first = this.sections[0]?.target;
-        for (let node = first?.parentElement; node && node !== doc.body && node !== doc.documentElement; node = node.parentElement) {
-            const { overflowY } = getComputedStyle(node);
-            if (/auto|scroll|overlay/.test(overflowY) && node.scrollHeight > node.clientHeight) {
-                return node;
-            }
-        }
-        return this.page;
+        return (first && scrollingAncestor(first, { axis: 'y', overflowing: true })) || this.page;
     }
     reach() {
         for (const { target } of this.sections) {

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

@@ -14,6 +14,11 @@ import '../../select/index.js';
  * `currentColor`, and the label is a real `<label for>` pointing at the
  * trigger's id.
  *
+ * A `<label for>` pointing at this element, or its own `aria-label` or
+ * `aria-labelledby`, names the select in place of `label`, so a reader hears
+ * the page's words for it, and the select draws no label of its own beside
+ * the page's.
+ *
  * The label sits on the same row as the select. `Select`'s host is a column,
  * and an outer-tree rule overrides a `:host` rule, so the row layout needs no
  * property on `Select` and nothing added to your markup.
@@ -60,6 +65,7 @@ import '../../select/index.js';
  * @csspart control-listbox-loading - The text shown while the options load.
  * @csspart control-listbox-search - The region that holds the filter field.
  * @csspart control-listbox-search-field - The filter field.
+ * @csspart control-live - The select's `live` part, the region a screen reader hears a choice made on the closed trigger from.
  * @csspart control-surface - The floating panel.
  * @csspart control-trigger - The closed control, which shows the chosen size.
  * @csspart control-value - The chosen size inside the trigger.