@fusion.dev/helix-headless 0.146.0 → 0.147.0

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

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import type { HelixHeadlessNotificationGroup } from '../group/notification-group.js';
 import type { HelixHeadlessNotification } from '../notification/notification.js';
 declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & typeof HelixElement;
@@ -42,8 +42,10 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * @documentation https://fusion.dev/helix/components/notifications
  *
  * @slot - The notifications.
+ * @slot empty - Replaces the words of `empty-text` in the `empty` part, such as a picture and a line of your own. The live region still says `empty-text`.
  * @slot footer - Below the list, for a link to everything.
  * @slot header - Above the list, for a title and the mark-all control.
+ * @slot loading - Replaces the words of `loading-text` in the `loading` part, such as a loader. The live region still says `loading-text`.
  *
  * @event {HelixDismissEvent} helix-dismiss - Fired when the user dismisses a row. The row dispatches it, and you can listen for it on the feed. Cancelable: cancel it to keep the row.
  * @event {HelixLoadMoreEvent} helix-load-more - Fired when a reader presses the `load-more` button, asking for the next page of the feed.
@@ -58,6 +60,8 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * @csspart mark-all - The control that marks everything read.
  * @csspart more - The button after the list that asks for more, while `load-more` is set. It is `aria-disabled` while the feed is loading.
  *
+ * @cssstate empty - While the feed holds no notification and is not loading. Never on the server, which cannot count the rows.
+ * @cssstate loading - While `loading` is set.
  * @cssstate media - While a notification in the list holds something in its media slot, so every row keeps that column.
  */
 export declare class HelixHeadlessNotifications extends HelixHeadlessNotifications_base {
@@ -220,6 +224,11 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * The empty or the loading line, each around a slot of the same name whose
+     * fallback is the words, so a page can put its own in.
+     */
+    protected renderStatus(hasContent: boolean): TemplateResult | typeof nothing;
     /**
      * Says whether anything in the feed has media, so every item can hold the
      * column open whether or not it has one of its own.

package/dist/notifications/root/notifications-root.js

@@ -139,7 +139,7 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
             return;
         }
         list.assign(...this.rows);
-        for (const name of ['header', 'footer']) {
+        for (const name of ['header', 'footer', 'empty', 'loading']) {
             const slot = root?.querySelector?.(`slot[name="${name}"]`);
             slot?.assign?.(...[...this.children].filter((child) => child.getAttribute('slot') === name));
         }
@@ -178,6 +178,16 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label || 'Notifications', role: 'region' });
+        this.toggleState('loading', this.loading);
+        this.toggleState('empty', !this.loading && this.childrenKnown && this.items.length === 0);
+    }
+    renderStatus(hasContent) {
+        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>`;
     }
     markMedia() {
         this.toggleState('media', this.items.some((item) => item.querySelector(':scope > [slot="media"]') !== null));

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 pageRows;
     /** 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. */

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, requestChange, StatusController, scrollItemIntoView, 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.pageRows());
+                    break;
+                case 'PageUp':
+                    this.move(this.cursor - this.pageRows());
+                    break;
                 case 'ArrowRight':
                 case 'ArrowLeft':
                     switch (treeArrow(row, inlineStep(this, event.key) === 1 ? 1 : -1)) {
@@ -364,22 +370,17 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         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);
         }
     }
+    pageRows() {
+        const tree = this.partNamed('tree');
+        const room = tree && tree.scrollHeight > tree.clientHeight + 1 ? tree.clientHeight : window.innerHeight;
+        const tall = this.virtualize.sizeOf(this.cursor) || HelixHeadlessObjectInspector_1.ESTIMATE;
+        return Math.max(1, Math.floor(room / tall) - 1);
+    }
     handleRowClick(index, row) {
         if (this.move(index) && row.branch) {
             this.toggle(row);
@@ -451,7 +452,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
     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,

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.

package/dist/pagination/size/pagination-size.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, formatNumbers, HelixBeforeChangeEvent, HelixFormElement, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, formatNumbers, HelixBeforeChangeEvent, HelixFormElement, hostWords, requestChange, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -89,6 +89,7 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
     renderSelect() {
         const select = this.tag('select');
         const option = this.tag('option');
+        const named = this.isConnected ? hostWords(this) : '';
         return html `<${select}
       part="control"
       exportparts="feedback: control-feedback, hint: control-hint, indicator: control-indicator,
@@ -99,7 +100,8 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
         listbox-live: control-listbox-live, listbox-loading: control-listbox-loading, listbox-search: control-listbox-search,
         listbox-search-field: control-listbox-search-field, surface: control-surface,
         trigger: control-trigger, value: control-value"
-      label=${this.label}
+      label=${named ? '' : this.label}
+      aria-label=${named || nothing}
       ?disabled=${this.isDisabled}
       .value=${String(this.current)}
       @helix-before-change=${this.handleChange}

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

@@ -1,4 +1,7 @@
-import type { PinCase, PinType } from './root/pin-input-root.js';
+/** What a box 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';
 /**
  * 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
@@ -8,3 +11,27 @@ import type { PinCase, PinType } from './root/pin-input-root.js';
  * `text` keeps everything.
  */
 export declare const cleanCode: (text: string, type: PinType, letterCase?: PinCase) => string;
+/** A code after an edit, and the box the caret is in after it. */
+export interface CodeEdit {
+    /** The box the caret is in, from 0, never past the last box. */
+    caret: number;
+    /** The code's characters, as many as there are boxes at most. */
+    code: string;
+}
+/**
+ * What the one field holds after the platform edited it, as a code: `raw` is
+ * the field's text with the caret at `caret`, cleaned and cut at `count`, and
+ * the caret is moved past only the characters the code kept before it.
+ */
+export declare const readTyped: (raw: string, caret: number, type: PinType, letterCase: PinCase, count: number) => CodeEdit;
+/**
+ * A run of characters written over `code` from box `at` onward, which is what a
+ * paste does: the boxes it reaches take its characters and the rest keep
+ * theirs, and anything past the last box is dropped.
+ *
+ * **A code has no holes in it**, so the run starts no later than the end of
+ * the code: a whole code pasted into an empty field fills from the first box
+ * wherever the caret was, and two characters pasted into box three of a field
+ * holding two fill from box three.
+ */
+export declare const overwriteCode: (code: string, at: number, text: string, count: number) => CodeEdit;

package/dist/pin-input/code.js

@@ -11,3 +11,15 @@ export const cleanCode = (text, type, letterCase = 'preserve') => {
             ? kept.toLowerCase()
             : kept;
 };
+export const readTyped = (raw, caret, type, letterCase, count) => ({
+    caret: Math.min(cleanCode(raw.slice(0, caret), type, letterCase).length, count - 1),
+    code: cleanCode(raw, type, letterCase).slice(0, count),
+});
+export const overwriteCode = (code, at, text, count) => {
+    const start = Math.min(at, code.length);
+    const characters = [...code.slice(0, count)];
+    for (let offset = 0; offset < text.length && start + offset < count; offset += 1) {
+        characters[start + offset] = text[offset];
+    }
+    return { caret: Math.min(count - 1, start + text.length), code: characters.join('') };
+};