@fusion.dev/helix-headless 0.142.1 → 0.143.0

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

@@ -21,10 +21,12 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         this.autocomplete = '';
         this.decrementLabel = 'Decrease';
         this.incrementLabel = 'Increase';
+        this.locale = '';
         this.placeholder = '';
         this.readOnly = false;
         this.scrub = false;
         this.step = 1;
+        this.valueText = '';
         this.scrubFrom = 0;
         this.scrubValue = 0;
         this.scrubStart = '';
@@ -75,16 +77,13 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             restoreValue(control, this.value);
         };
         this.handleBlur = () => {
-            const control = this.control;
-            const parsed = this.numeric;
-            if (!control || parsed === null) {
-                return;
+            if (this.settle()) {
+                this.announceChange();
             }
-            this.requestValue(String(this.clamp(parsed)));
-            restoreValue(control, this.value);
         };
         this.handleChange = (event) => {
             event.stopPropagation();
+            this.settle();
             this.announceChange();
         };
         this.handleKeydown = (event) => {
@@ -117,21 +116,32 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             }
             event.preventDefault();
         };
+        this.handleKeypress = (event) => {
+            if (event.key === 'Enter' && !event.defaultPrevented) {
+                this.submitImplicitly();
+            }
+        };
     }
-    static { this.shadowRootOptions = {
-        ...HelixFormElement.shadowRootOptions,
-        delegatesFocus: true,
-    }; }
     get control() {
         return this.partNamed('control');
     }
     get numeric() {
-        if (this.value.trim() === '') {
+        const text = this.value.trim();
+        if (text === '') {
             return null;
         }
-        const parsed = Number(this.value);
+        const read = decimalComma(this.locale) && text.includes(',') && !text.includes('.')
+            ? text.replace(',', '.')
+            : text;
+        const parsed = read.includes(',') ? Number.NaN : Number(read);
         return Number.isFinite(parsed) ? parsed : null;
     }
+    onStep(value) {
+        const step = Math.abs(this.step) || 1;
+        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 anchor = this.min ?? 0;
@@ -168,13 +178,10 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         this.nudge(large ? -(this.largeStep ?? 10) : -1);
     }
     renderLabel() {
-        if (!this.scrub) {
+        if (!this.scrub || !this.labeled) {
             return super.renderLabel();
         }
         const hidden = this.label === '' ? this.getAttribute('aria-label') : null;
-        if (this.label === '' && !hidden) {
-            return nothing;
-        }
         return html `<label
       part="label"
       for=${this.controlId}
@@ -186,6 +193,17 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
       ><slot name="label">${this.label || hidden}</slot></label
     >`;
     }
+    settle() {
+        const control = this.control;
+        const parsed = this.numeric;
+        if (!control || parsed === null) {
+            return false;
+        }
+        const before = this.value;
+        this.requestValue(String(this.clamp(parsed)));
+        restoreValue(control, this.value);
+        return this.value !== before;
+    }
     sync() {
         const control = this.control;
         this.internals.setFormValue(this.value);
@@ -212,6 +230,14 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
                 max: this.max,
             }), control);
         }
+        else if (parsed !== null && !this.onStep(parsed)) {
+            const step = Math.abs(this.step) || 1;
+            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);
+            this.internals.setValidity({ stepMismatch: true }, fillTemplate(this.stepMismatchMessage ||
+                'Please enter a valid value. The two nearest valid values are {below} and {above}.', { above, below }), control);
+        }
         else {
             this.internals.setValidity({}, '', control);
         }
@@ -239,6 +265,9 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         this.releaseCaret = undefined;
         this.sync();
     }
+    get blocksImplicitSubmission() {
+        return true;
+    }
     render() {
         const parsed = this.numeric;
         const atMin = parsed !== null && this.min !== undefined && parsed <= this.min;
@@ -274,6 +303,9 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
           aria-valuemin=${this.min ?? nothing}
           aria-valuemax=${this.max ?? nothing}
           aria-valuenow=${parsed ?? nothing}
+          aria-valuetext=${this.valueText && parsed !== null
+            ? fillTemplate(this.valueText, { value: this.value })
+            : nothing}
           ?disabled=${this.isDisabled}
           ?readonly=${this.readOnly}
           ?required=${this.required}
@@ -281,6 +313,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
           @change=${this.handleChange}
           @input=${this.handleInput}
           @keydown=${this.handleKeydown}
+          @keypress=${this.handleKeypress}
         />
         <slot name="end"></slot>
         <button
@@ -320,6 +353,9 @@ __decorate([
 __decorate([
     property({ attribute: 'large-step', type: Number })
 ], HelixHeadlessNumberInput.prototype, "largeStep", void 0);
+__decorate([
+    property()
+], HelixHeadlessNumberInput.prototype, "locale", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessNumberInput.prototype, "max", void 0);
@@ -344,10 +380,26 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessNumberInput.prototype, "step", void 0);
+__decorate([
+    property({ attribute: 'step-mismatch-message' })
+], HelixHeadlessNumberInput.prototype, "stepMismatchMessage", void 0);
+__decorate([
+    property({ attribute: 'value-text' })
+], HelixHeadlessNumberInput.prototype, "valueText", void 0);
 HelixHeadlessNumberInput = __decorate([
     customElement('helix-headless-number-input')
 ], HelixHeadlessNumberInput);
 export { HelixHeadlessNumberInput };
+const commas = new Map();
+const decimalComma = (locale) => {
+    let comma = commas.get(locale);
+    if (comma === undefined) {
+        const parts = new Intl.NumberFormat(locale || undefined).formatToParts(1.5);
+        comma = parts.find((part) => part.type === 'decimal')?.value === ',';
+        commas.set(locale, comma);
+    }
+    return comma;
+};
 const decimals = (value) => {
     const text = String(value);
     const exponent = /e-(\d+)$/.exec(text);

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../copy-button/index.js';
 /** One visible line of the tree: a value, where it sits, and whether it is open. */
@@ -28,9 +28,15 @@ interface Row {
  *
  * The tree is one tab stop. Up and Down move between rows, Right opens a branch
  * or moves into it, Left closes it or moves to its parent, and Home and End
- * move to the first and last rows. Focus stays on the tree, and
- * `aria-activedescendant` marks the active row. Each row carries its real
- * level, position, and set size, including in a windowed tree.
+ * move to the first and last rows. Typing moves to the next row whose key
+ * starts with what was typed, and `*` opens every branch beside the active
+ * row. Focus stays on the tree, and `aria-activedescendant` marks the active
+ * row. Each row carries its real level, position, and set size, including in
+ * a windowed tree.
+ *
+ * A new `value` keeps the branches a reader opened or closed, and the active
+ * row, where the new value still has them. A branch the old value did not have
+ * opens to `default-depth`.
  *
  * The copy button copies the active row, a branch as JSON and a string as its
  * text. So do Command+C and Control+C while the tree has focus and no text is
@@ -110,6 +116,14 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
      * page's markup should not take the page down over a comma.
      */
     for: string;
+    /** How an array of one entry counts it. `{count}` is replaced with the count. */
+    itemLabel: string;
+    /** How an array of any other number of entries counts them. `{count}` is replaced with the count. */
+    itemsLabel: string;
+    /** How an object of one key counts it. `{count}` is replaced with the count. */
+    keyLabel: string;
+    /** How an object of any other number of keys counts them. `{count}` is replaced with the count. */
+    keysLabel: string;
     /**
      * Accessible name for the tree, and the text of the header where there is one.
      */
@@ -128,6 +142,11 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
      * reach a value.
      */
     noCopy: boolean;
+    /**
+     * The tree's accessible name when `label` is empty and the host names it
+     * with neither `aria-label` nor `aria-labelledby`.
+     */
+    treeLabel: string;
     /**
      * The value to show, when your code already holds it as an object.
      *
@@ -152,6 +171,12 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     private active;
     /** Set by a keyboard move, so the next render brings the active row into view. */
     private revealing;
+    /** What has been typed toward a key, and when the last letter came. */
+    private 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. */
+    protected readonly aria: AriaForwardController;
     /**
      * How tall a row is taken to be before it has been drawn, in pixels.
      *
@@ -169,7 +194,15 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     private readonly copier;
     /** Every visible row, in order, for the tree as it stands. */
     private flatten;
-    /** Opens every branch shallower than `defaultDepth`. */
+    /**
+     * Opens every branch shallower than `defaultDepth`.
+     *
+     * `keep` is for a new value: a branch the last value also had keeps whether
+     * a reader opened or closed it, and only a new one takes the default.
+     * **Assigning a value used to close everything**, so an inspector showing
+     * live data, a polled response or a debug panel, threw away the reader's
+     * place on every update.
+     */
     private seed;
     protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
@@ -193,6 +226,16 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     private toggle;
     private move;
     private readonly handleKeydown;
+    /** Opens every branch at the active row's level under the same parent, as `*` asks. */
+    private openSiblings;
+    /**
+     * 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.
+     */
+    private typeahead;
     private handleRowClick;
     private renderValue;
     /**

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 { CopyController, customElement, elementById, fillTemplate, HelixElement, inlineStep, scrollItemIntoView, searchableById, VirtualizeController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, CopyController, customElement, elementById, fillTemplate, formatNumbers, HelixElement, inlineStep, scrollItemIntoView, searchableById, 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';
@@ -22,14 +22,25 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         this.copyValueLabel = 'Copy value';
         this.defaultDepth = 1;
         this.for = '';
+        this.itemLabel = '{count} item';
+        this.itemsLabel = '{count} items';
+        this.keyLabel = '{count} key';
+        this.keysLabel = '{count} keys';
         this.label = '';
         this.noCopy = false;
+        this.treeLabel = 'Value';
         this.value = undefined;
         this.windowed = false;
         this.read = undefined;
         this.opened = new Set();
         this.active = 0;
         this.revealing = false;
+        this.typed = { at: 0, text: '' };
+        this.branches = new Set();
+        this.aria = new AriaForwardController(this, {
+            label: true,
+            target: () => this.partNamed('tree'),
+        });
         this.virtualize = new VirtualizeController(this, {
             container: () => (this.windowed ? this.partNamed('tree') : null),
             count: () => this.rows.length,
@@ -92,8 +103,14 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
                         this.toggle(row);
                     }
                     break;
+                case '*':
+                    this.openSiblings(row);
+                    break;
                 default:
-                    return;
+                    if (event.key.length !== 1 || event.altKey || event.ctrlKey || event.metaKey) {
+                        return;
+                    }
+                    this.typeahead(event.key);
             }
             event.preventDefault();
         };
@@ -131,20 +148,28 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         visit(this.root, '', 0, 1, 1);
         return rows;
     }
-    seed() {
+    seed(keep) {
         const opened = new Set();
+        const branches = new Set();
         const visit = (value, path, depth) => {
-            if (!branchy(value) || depth >= this.defaultDepth) {
+            if (!branchy(value)) {
                 return;
             }
-            opened.add(path);
+            branches.add(path);
+            const known = keep && this.branches.has(path);
+            if (known ? this.opened.has(path) : depth < this.defaultDepth) {
+                opened.add(path);
+            }
             for (const [name, item] of entries(value)) {
                 visit(item, child(path, name), depth + 1);
             }
         };
         visit(this.root, '', 0);
+        this.branches = branches;
         this.opened = opened;
-        this.active = 0;
+        if (!keep) {
+            this.active = 0;
+        }
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -152,15 +177,17 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             this.loadedFor = this.for;
             this.load();
         }
+        const was = this.rows[this.active]?.path;
         if (changed.has('value') || changed.has('read') || changed.has('defaultDepth')) {
-            this.seed();
+            this.seed(!changed.has('defaultDepth'));
         }
         if (changed.has('value') ||
             changed.has('read') ||
             changed.has('opened') ||
             changed.has('defaultDepth')) {
             this.rows = this.flatten();
-            this.active = Math.min(this.active, Math.max(0, this.rows.length - 1));
+            const found = was === undefined ? -1 : this.rows.findIndex((row) => row.path === was);
+            this.active = found >= 0 ? found : Math.min(this.active, Math.max(0, this.rows.length - 1));
         }
     }
     firstUpdated(changed) {
@@ -229,6 +256,35 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         this.active = Math.max(0, Math.min(to, last));
         this.revealing = 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.active + 1 : this.active;
+        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;
+            }
+        }
+    }
     handleRowClick(index, row) {
         this.active = index;
         if (row.branch) {
@@ -240,9 +296,18 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         if (row.branch) {
             const count = entries(value).length;
             const array = Array.isArray(value);
-            const noun = array ? (count === 1 ? 'item' : 'items') : count === 1 ? 'key' : 'keys';
+            const one = new Intl.PluralRules(this.lang || undefined).select(count) === 'one';
+            const words = array
+                ? one
+                    ? this.itemLabel
+                    : this.itemsLabel
+                : one
+                    ? this.keyLabel
+                    : this.keysLabel;
             return html `<span part="summary">${array ? '[…]' : '{…}'}</span>
-        <span part="count" dir="auto">${`${count} ${noun}`}</span>`;
+        <span part="count" dir="auto"
+          >${fillTemplate(words, { count: formatNumbers(this.lang)(count) })}</span
+        >`;
         }
         if (typeof value === 'string') {
             return html `<span part="string" dir="ltr">${JSON.stringify(value)}</span>`;
@@ -310,7 +375,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
           role="tree"
           tabindex="0"
           ?data-scroller=${this.windowed}
-          aria-label=${this.label || 'Value'}
+          aria-label=${this.label || this.treeLabel}
           aria-activedescendant=${rows.length > 0 ? `row-${this.active}` : nothing}
           @keydown=${this.handleKeydown}
           @scroll=${() => this.virtualize.measure()}
@@ -335,12 +400,27 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessObjectInspector.prototype, "for", void 0);
+__decorate([
+    property({ attribute: 'item-label' })
+], HelixHeadlessObjectInspector.prototype, "itemLabel", void 0);
+__decorate([
+    property({ attribute: 'items-label' })
+], HelixHeadlessObjectInspector.prototype, "itemsLabel", void 0);
+__decorate([
+    property({ attribute: 'key-label' })
+], HelixHeadlessObjectInspector.prototype, "keyLabel", void 0);
+__decorate([
+    property({ attribute: 'keys-label' })
+], HelixHeadlessObjectInspector.prototype, "keysLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessObjectInspector.prototype, "label", void 0);
 __decorate([
     property({ attribute: 'no-copy', type: Boolean })
 ], HelixHeadlessObjectInspector.prototype, "noCopy", void 0);
+__decorate([
+    property({ attribute: 'tree-label' })
+], HelixHeadlessObjectInspector.prototype, "treeLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessObjectInspector.prototype, "value", void 0);

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

@@ -53,13 +53,16 @@ export declare const optionsAmong: (elements: readonly Element[]) => HelixHeadle
  * @csspart label - The option's label.
  * @csspart text - The label and the description under it, as one column.
  *
+ * @cssstate active - While the keyboard is on the option, which is the option `aria-activedescendant` names.
  * @cssstate selected - While the option is chosen.
  */
 export declare class HelixHeadlessOption extends HelixElement {
     /**
      * Whether this is the option the keyboard is on.
      *
-     * Written by the listbox.
+     * 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.
      */
     active: boolean;
     /**

package/dist/option/root/option-root.js

@@ -44,6 +44,7 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleState('selected', this.selected);
+        this.toggleState('active', this.active);
     }
     render() {
         this.internals.role = 'option';

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

@@ -11,6 +11,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * render one inside the outline's shadow root, and the hrefs are fragments on
  * the same page.
  *
+ * Write the anchors flat, with `data-level` for their depth, or nested in
+ * lists, `<ul><li><a>`. A screen reader hears a nested list's levels; it hears
+ * `data-level` as a flat run of links.
+ *
  * 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
@@ -22,7 +26,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @aliases Table of contents, On this page, Outline
  * @documentation https://fusion.dev/helix/components/outline
  *
- * @slot - The links, as anchors with fragment hrefs.
+ * @slot - The links, as anchors with fragment hrefs, or lists holding them.
  *
  * @event {HelixActivateEvent} helix-activate - Fired when the section in view changes, with its id as the value. It reports the scroll position and cannot be prevented.
  *
@@ -88,7 +92,14 @@ export declare class HelixHeadlessOutline extends HelixElement {
      */
     private reading;
     private observer;
-    /** The links, in document order. Empty on the server, which has no tree. */
+    /**
+     * The links, in document order. Empty on the server, which has no tree.
+     *
+     * **Anchors inside what is slotted count too.** A contents list is written
+     * `<ul><li><a>` more often than as a run of anchors, and reading only the
+     * anchors assigned to the slot found no sections in it: nothing was marked,
+     * nothing was announced, and nothing said why.
+     */
     private get links();
     /**
      * What each link points at, paired with the link, skipping anything missing.

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

@@ -78,8 +78,10 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     }
     get links() {
         const slot = this.renderRoot?.querySelector('slot');
-        return (slot?.assignedElements({ flatten: true }) ?? []).filter((element) => element instanceof HTMLAnchorElement &&
-            element.getAttribute('href')?.startsWith('#') === true);
+        const fragment = (element) => element instanceof HTMLAnchorElement && element.getAttribute('href')?.startsWith('#') === true;
+        return (slot?.assignedElements({ flatten: true }) ?? []).flatMap((element) => fragment(element)
+            ? [element]
+            : [...element.querySelectorAll('a[href^="#"]')].filter(fragment));
     }
     get sections() {
         return this.links.flatMap((link) => {

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

@@ -39,7 +39,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot next-icon - The glyph on the forward-one-page control, usually a caret.
  * @slot previous-icon - The glyph on the back-one-page control, usually a caret.
  *
- * @event {HelixNavigateEvent} helix-navigate - Fired before the page changes, and cancelable. Canceling it is the only way to stop a page change.
+ * @event {HelixActivateEvent} helix-activate - Fired after the page changes, with the new page as a string in `detail.value`. In `href` mode it comes a task after the click, once the page has moved.
+ * @event {HelixNavigateEvent} helix-navigate - Fired before the page changes, and cancelable. Canceling it is the only way to stop a page change. `detail.page` is the page asked for, as a number, and `detail.value` is the same page as a string.
  *
  * @csspart first - The control that jumps to the first page, under `ends`.
  * @csspart gap - The control in place of hidden pages, which jumps into them.
@@ -218,6 +219,11 @@ export declare class HelixHeadlessPagination extends HelixElement {
     private announced;
     /** The page on show, whoever set it, and `undefined` until somebody has. */
     private pageState;
+    /**
+     * The control a reader just used, while it held focus, and whether it was a
+     * gap. Read once by the update that follows, which decides where focus goes.
+     */
+    private used;
     /** Held across every component asking for the same locale. */
     private get numbers();
     /**
@@ -263,6 +269,18 @@ export declare class HelixHeadlessPagination extends HelixElement {
      * for both shapes rather than two that have to stay in step.
      */
     private readonly go;
+    private applyPage;
+    /**
+     * Puts focus back in the row after the control a reader used has gone.
+     *
+     * A page keeps its own control across a move, because the run is keyed by
+     * page, so focus stays on the page that was chosen. A gap points somewhere
+     * new once the run moves, and a step control is disabled at the end it
+     * reached, so after either of those focus goes to the current page, or in
+     * `compact` to the first step control that can still be used. Left alone,
+     * focus fell to the top of the document.
+     */
+    private restoreFocus;
     protected willUpdate(changed: PropertyValues): void;
     /**
      * Says where the reader now is, once they have moved.