@fusion.dev/helix-headless 0.145.0 → 0.147.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, 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';
+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,7 +39,9 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         this.opened = new Set();
         this.cursor = 0;
         this.revealing = false;
-        this.typed = { at: 0, text: '' };
+        this.focusing = false;
+        this.hadFocus = false;
+        this.typed = new Typeahead();
         this.branches = new Set();
         this.aria = new AriaForwardController(this, {
             label: true,
@@ -81,24 +84,31 @@ 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':
-                    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 +118,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 +146,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 +196,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 +228,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 +252,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 +292,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 +306,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,37 +366,21 @@ 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;
-        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);
@@ -391,18 +422,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,13 +442,17 @@ 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"
-      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,
@@ -429,10 +463,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 +492,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/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/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/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

@@ -20,6 +20,21 @@ 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.
+ *
+ * **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
@@ -73,6 +88,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 +176,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, scrollingAncestor, } 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,19 @@ 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 node = scrollingAncestor(link, { axis: 'y', overflowing: true, stop: this.page });
+        if (node && node !== sections && !node.contains(sections)) {
+            scrollItemIntoView(link, { scroller: node });
+        }
+    }
     get atEnd() {
         const doc = this.scroller;
         return Math.ceil(doc.scrollTop + doc.clientHeight) >= doc.scrollHeight - 1;
@@ -154,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) {
@@ -282,6 +283,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

@@ -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.
@@ -49,6 +54,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.