@fusion.dev/helix-headless 0.142.1 → 0.144.0

package/dist/navigation/root/navigation-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';
 /**
  * @summary A set of destinations, with a marker on the current one.
@@ -15,7 +15,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * The component moves a marker to the current item. It finds the current item
  * by reading `aria-current`, so the attribute that screen readers announce also
- * places the marker.
+ * places the marker. Any value but `false` counts, so a sidebar of sections on
+ * one page can mark the section in view with `aria-current="location"`. Where
+ * several are marked, `page` wins.
  *
  * Set `orientation="vertical"` to stack the destinations in a column, for a
  * sidebar.
@@ -35,8 +37,14 @@ export declare class HelixHeadlessNavigation extends HelixElement {
     private readonly indicator;
     /**
      * The landmark's name, read by screen readers.
+     *
+     * An `aria-label` or `aria-labelledby` on the host names the landmark too,
+     * and wins over this, so a footer navigation written the usual way is not a
+     * second "Main".
      */
     label: string;
+    /** Carries a host `aria-label` and `aria-labelledby` to the `<nav>`. */
+    protected readonly aria: AriaForwardController;
     /**
      * Stacks the destinations in a column, for a sidebar, where unset is a row
      * for a header or a footer. The marker follows the current destination down

package/dist/navigation/root/navigation-root.js

@@ -4,19 +4,30 @@ 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, HelixElement, IndicatorController } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixElement, IndicatorController, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement {
     constructor() {
         super(...arguments);
         this.indicator = new IndicatorController(this, {
-            active: () => this.items.find((item) => item.getAttribute('aria-current') === 'page'),
+            active: () => {
+                const items = this.items;
+                const marked = (item) => {
+                    const current = item.getAttribute('aria-current');
+                    return current !== null && current !== 'false';
+                };
+                return (items.find((item) => item.getAttribute('aria-current') === 'page') ?? items.find(marked));
+            },
             indicator: () => this.partNamed('indicator'),
             observe: () => this.items,
             surface: () => this.partNamed('nav'),
         });
         this.label = 'Main';
+        this.aria = new AriaForwardController(this, {
+            label: true,
+            target: () => this.partNamed('nav'),
+        });
     }
     get items() {
         const slot = this.renderRoot.querySelector('slot');

package/dist/notifications/feed-keys.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Where a key moves focus in a feed of `count` rows, from the row at `at`, or
+ * `undefined` for a key the feed does not take.
+ *
+ * `onRow` says whether focus is on the row's own box. The arrows and `Home` and
+ * `End` move only from there, so a control inside a row keeps its keys.
+ * `PageDown` and `PageUp` move from anywhere in a row, which is how the APG feed
+ * pattern moves on from inside an article. The answer stays inside the feed.
+ */
+export declare const feedStep: (key: string, at: number, count: number, onRow: boolean) => number | undefined;

package/dist/notifications/feed-keys.js

@@ -0,0 +1,14 @@
+export const feedStep = (key, at, count, onRow) => {
+    if (count <= 0) {
+        return undefined;
+    }
+    const anywhere = { PageDown: at + 1, PageUp: at - 1 };
+    const fromRow = {
+        ArrowDown: at + 1,
+        ArrowUp: at - 1,
+        End: count - 1,
+        Home: 0,
+    };
+    const to = anywhere[key] ?? (onRow ? fromRow[key] : undefined);
+    return to === undefined ? undefined : Math.max(0, Math.min(to, count - 1));
+};

package/dist/notifications/group/notification-group.d.ts

@@ -33,6 +33,7 @@ declare const HelixHeadlessNotificationGroup_base: (new (...args: any[]) => impo
  *
  * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the group collapses. Cancelable.
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the group expands. Cancelable: cancel it to keep the group collapsed.
+ * @event {ToggleEvent} toggle - The group expanded or collapsed. The event carries `newState` and `oldState`.
  *
  * @csspart actions - The trailing region of the header.
  * @csspart count - The number of notifications in the group.

package/dist/notifications/notification/notification.d.ts

@@ -79,6 +79,12 @@ export declare class HelixHeadlessNotification extends HelixHeadlessNotification
      * Empty is the runtime's own.
      */
     locale: string;
+    /**
+     * @internal Set by the feed: this row's place in it, counting from one, read
+     * as `aria-posinset`. Zero leaves the place to the browser, which counts the
+     * rows it can see.
+     */
+    position: number;
     /**
      * Whether the notification has been read.
      *
@@ -96,6 +102,24 @@ export declare class HelixHeadlessNotification extends HelixHeadlessNotification
      */
     get read(): boolean;
     set read(next: boolean);
+    /**
+     * @internal Set by the feed: how many rows the feed holds in all, read as
+     * `aria-setsize`, and `-1` when nobody knows. Zero leaves it to the browser.
+     */
+    setSize: number;
+    /**
+     * @internal Set by the feed: whether `Tab` stops on this row. Every row is a
+     * stop until the feed has chosen one, which is also what a server sends, so
+     * the first render on the client is the server's.
+     */
+    stop: boolean;
+    /**
+     * What a screen reader hears before an unread notification's text.
+     *
+     * The unread mark is drawn, so a reader who cannot see it hears this word in
+     * its place. Translate it with the rest of your interface.
+     */
+    unreadLabel: string;
     /**
      * @internal Read by the list to identify its children across the light DOM,
      * which is cheaper than `instanceof` and is why this is public rather than
@@ -192,6 +216,11 @@ export declare class HelixHeadlessNotification extends HelixHeadlessNotification
     protected render(): TemplateResult;
     private readonly handleActions;
     private readonly handleDismiss;
+    /**
+     * Where focus goes when this row leaves: the next row's first control, the
+     * one before, then the first control left in the feed.
+     */
+    private neighbor;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/notifications/notification/notification.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, HelixElement, HelixReadEvent, hostAria, MixinDismissible, requestChange, slotFilled, } from '@fusion.dev/helix-core';
+import { customElement, deepActiveElement, deepContains, focusableElements, HelixElement, HelixReadEvent, hostAria, MixinDismissible, requestChange, slotFilled, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -17,6 +17,10 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
         this.at = '';
         this.defaultRead = false;
         this.locale = '';
+        this.position = 0;
+        this.setSize = 0;
+        this.stop = true;
+        this.unreadLabel = 'Unread';
         this.isNotification = true;
         this.readState = undefined;
         this.handleActions = () => {
@@ -25,7 +29,9 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
         this.handleDismiss = (event) => {
             event.stopPropagation();
             if (this.dismiss()) {
+                const next = deepContains(this, deepActiveElement()) ? this.neighbor() : null;
                 this.remove();
+                next?.focus();
             }
         };
     }
@@ -55,6 +61,8 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'listitem' });
+        this.internals.ariaPosInSet = this.position > 0 ? String(this.position) : null;
+        this.internals.ariaSetSize = this.setSize === 0 ? null : String(this.setSize);
         this.toggleState('read', this.read);
     }
     updated(changed) {
@@ -102,10 +110,15 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
     ></${stamp}>`;
     }
     render() {
-        return html `<div part="item">
+        return html `<div
+      part="item"
+      role="group"
+      aria-labelledby="label"
+      tabindex=${this.stop ? 0 : -1}
+    >
       <span part="media"><slot name="media"></slot></span>
       <div part="body">
-        <div part="label"><slot></slot></div>
+        <div id="label" part="label">${this.read ? nothing : html `<span role="img" aria-label=${this.unreadLabel}></span>`}<slot></slot></div>
         <slot name="description"></slot>
         <slot name="detail"></slot>
         <span part="actions"><slot name="actions" @slotchange=${this.handleActions}></slot></span>
@@ -116,6 +129,29 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
       </div>
     </div>`;
     }
+    neighbor() {
+        let feed = this.parentElement;
+        while (feed && !('markEveryoneRead' in feed)) {
+            feed = feed.parentElement;
+        }
+        const rows = feed
+            ? feed.items
+            : [...(this.parentElement?.children ?? [])].filter((one) => 'isNotification' in one);
+        const at = rows.indexOf(this);
+        const order = [...rows.slice(at + 1), ...rows.slice(0, Math.max(at, 0)).reverse()];
+        for (const row of order) {
+            const target = row.shadowRoot?.querySelector('[part="dismiss"]') ?? focusableElements(row)[0];
+            if (target) {
+                return target;
+            }
+        }
+        if (!feed) {
+            return null;
+        }
+        return (feed.shadowRoot?.querySelector('[part="mark-all"]') ??
+            focusableElements(feed).find((one) => !this.contains(one)) ??
+            null);
+    }
 };
 __decorate([
     property()
@@ -126,9 +162,21 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessNotification.prototype, "locale", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessNotification.prototype, "position", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessNotification.prototype, "read", null);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessNotification.prototype, "setSize", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessNotification.prototype, "stop", void 0);
+__decorate([
+    property({ attribute: 'unread-label' })
+], HelixHeadlessNotification.prototype, "unreadLabel", void 0);
 HelixHeadlessNotification = __decorate([
     customElement('helix-headless-notification')
 ], HelixHeadlessNotification);

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

@@ -21,6 +21,14 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * the items and written to an attribute, so a stylesheet and a badge can both
  * use it without counting.
  *
+ * **The feed is one `Tab` stop for its rows.** Each row takes focus itself and
+ * is read by its label. `ArrowDown` and `ArrowUp` move to the next and the
+ * previous row, `Home` and `End` to the first and the last, and `PageDown` and
+ * `PageUp` move a row on or back from anywhere inside one, as in the APG feed
+ * pattern. The controls inside a row stay in the `Tab` order. Set `total` when
+ * the feed holds one page of a longer list, and each row says its place in the
+ * whole of it.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback
@@ -67,6 +75,14 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
      * Label for the mark-all control.
      */
     markAllLabel: string;
+    /**
+     * How many notifications there are in all, where the feed holds only some of
+     * them, read as each row's `aria-setsize`. `-1` says the count is unknown.
+     *
+     * Unset, the browser counts the rows it can see, which is right for a feed
+     * that holds everything.
+     */
+    total?: number;
     /**
      * How many items are unread, counted from the items themselves.
      *
@@ -158,6 +174,32 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
      */
     private readonly handleRead;
     private assign;
+    /** The row `Tab` stops on, once a reader has been to one. */
+    private stopRow;
+    /**
+     * The rows a reader can reach with the keys: every row in the feed, in order,
+     * less the ones a folded group renders nowhere.
+     */
+    private get reachable();
+    /** The row whose own box is the element focus is on, if it is one. */
+    private rowFocused;
+    /** A row taking focus becomes the feed's stop, so `Tab` comes back to it. */
+    private readonly handleFocusIn;
+    /**
+     * Moves between rows.
+     *
+     * The arrows and `Home` and `End` only from a row's own box, so a control in
+     * a row keeps its keys. `PageDown` and `PageUp` from anywhere in a row, which
+     * is how the APG feed pattern moves on from inside an article.
+     */
+    private readonly handleKeydown;
+    /**
+     * Tells each row whether it is the stop, and where it sits in the feed.
+     *
+     * Through each row's own properties, written once it has hydrated, so a
+     * server's markup stays the server's: every row is a stop until this runs.
+     */
+    private rove;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
@@ -202,6 +244,13 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
     private markEmpty;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
+    /**
+     * Marks everything read, and keeps focus in the feed.
+     *
+     * The button shows only while something is unread, so the press that
+     * succeeds removes the button it was made on. Focus moves to the first row's
+     * control, or the first control left in the feed.
+     */
     private readonly handleMarkAll;
 }
 declare global {

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

@@ -4,9 +4,10 @@ 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, HelixElement, HelixReadEvent, hostAria, MixinCollection, markRegion, } from '@fusion.dev/helix-core';
+import { customElement, deepContains, focusableElements, HelixElement, HelixReadEvent, hostAria, MixinCollection, markRegion, rovingStop, whenHydrated, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { feedStep } from '../feed-keys.js';
 let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
@@ -20,8 +21,53 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
         this.handleRead = () => {
             queueMicrotask(() => this.requestUpdate());
         };
-        this.handleMarkAll = () => {
+        this.handleFocusIn = (event) => {
+            const row = this.rowFocused(event.composedPath()[0]);
+            if (row && row !== this.stopRow) {
+                this.stopRow = row;
+                this.rove();
+            }
+        };
+        this.handleKeydown = (event) => {
+            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) {
+                return;
+            }
+            const rows = this.reachable;
+            const from = event.composedPath()[0];
+            const own = this.rowFocused(from);
+            const inside = own ?? rows.find((row) => from instanceof Node && deepContains(row, from));
+            if (!inside) {
+                return;
+            }
+            const to = feedStep(event.key, rows.indexOf(inside), rows.length, own !== undefined);
+            if (to === undefined) {
+                return;
+            }
+            event.preventDefault();
+            const next = rows[to];
+            if (next) {
+                this.stopRow = next;
+                this.rove();
+                rowBox(next)?.focus();
+            }
+        };
+        this.handleMarkAll = (event) => {
+            const button = event.currentTarget;
+            const focused = this.shadowRoot?.activeElement === button;
             this.markEveryoneRead();
+            if (!focused) {
+                return;
+            }
+            void this.updateComplete.then(() => {
+                if (button.isConnected) {
+                    return;
+                }
+                const target = this.items
+                    .map((row) => row.shadowRoot?.querySelector('[part="dismiss"]') ??
+                    focusableElements(row)[0])
+                    .find((one) => one !== undefined) ?? focusableElements(this)[0];
+                target?.focus();
+            });
         };
     }
     static { this.shadowRootOptions = {
@@ -91,13 +137,36 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
             slot?.assign?.(...[...this.children].filter((child) => child.getAttribute('slot') === name));
         }
     }
+    get reachable() {
+        return this.items.filter((row) => !('assignedSlot' in row) || row.assignedSlot !== null);
+    }
+    rowFocused(target) {
+        return this.reachable.find((row) => rowBox(row) === target);
+    }
+    rove() {
+        const rows = this.reachable;
+        const stop = rovingStop(rows, this.stopRow);
+        const direct = this.rows;
+        for (const row of this.items) {
+            const position = direct.indexOf(row) + 1;
+            whenHydrated(row, () => {
+                row.stop = row === stop;
+                row.position = this.total === undefined ? 0 : position;
+                row.setSize = this.total ?? 0;
+            });
+        }
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-read', this.handleRead);
+        this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('keydown', this.handleKeydown);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-read', this.handleRead);
+        this.removeEventListener('focusin', this.handleFocusIn);
+        this.removeEventListener('keydown', this.handleKeydown);
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -115,6 +184,7 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
         this.assign();
         this.markEmpty();
         this.markMedia();
+        this.rove();
         const unread = this.unread > 0 ? String(this.unread) : null;
         if (this.getAttribute('unread') !== unread) {
             if (unread === null) {
@@ -152,7 +222,11 @@ __decorate([
 __decorate([
     property({ attribute: 'mark-all-label' })
 ], HelixHeadlessNotifications.prototype, "markAllLabel", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessNotifications.prototype, "total", void 0);
 HelixHeadlessNotifications = __decorate([
     customElement('helix-headless-notifications')
 ], HelixHeadlessNotifications);
 export { HelixHeadlessNotifications };
+const rowBox = (row) => row.shadowRoot?.querySelector('[part="item"]') ?? null;

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

@@ -18,8 +18,20 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
  *
  * `inputmode="decimal"` keeps the numeric keypad on phones.
  *
- * Validity still comes from the platform: `min`, `max`, and `step` are mirrored
- * onto the host's own `setValidity`.
+ * `format-options` shows the number with `Intl.NumberFormat` in `locale`, as a
+ * currency, a percent or a unit, while the field is not being edited. Focus
+ * shows the number itself, and a typed `$1,200` or `25%` is read back with the
+ * same options. The value stays the plain number: `1200`, or `0.25` for 25%.
+ * The locale's group separators are read in every field, so `1,234` is a
+ * number in `en-US`.
+ *
+ * On iOS and iPadOS the field is a text field described as a number field,
+ * with no `role="spinbutton"`, which VoiceOver reads as a slider you cannot
+ * type in. React Aria's NumberField does the same.
+ *
+ * Validity follows the platform's rules: `min`, `max`, and `step` are checked
+ * and reported through the host's own `setValidity`, under the platform's flag
+ * names.
  *
  * Stepping is separate from typing, so a number is not corrected while you type
  * it.
@@ -31,6 +43,9 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
  * @documentation https://fusion.dev/helix/components/number-input
  *
  * @slot end - Content after the number, such as a unit.
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
+ * @slot hint - Help under the control, for content richer than the `hint` text.
+ * @slot label - The label, for content richer than the `label` text.
  * @slot start - Content before the number, such as a unit or an icon.
  *
  * @event {Event} change - The user finished changing the value. Relayed from the native field.
@@ -76,6 +91,16 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * The name of the step down button, read by screen readers.
      */
     decrementLabel: string;
+    /**
+     * `Intl.NumberFormat` options the number is shown with while the field is
+     * not being edited: a currency, a percent, a unit, or a number of decimals.
+     * Written as JSON in the attribute.
+     *
+     * ```html
+     * <helix-number-input format-options='{"style":"currency","currency":"EUR"}'></helix-number-input>
+     * ```
+     */
+    formatOptions?: Intl.NumberFormatOptions;
     /**
      * The name of the step up button, read by screen readers.
      */
@@ -88,6 +113,15 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * what a reader wants from a whole key.
      */
     largeStep?: number;
+    /**
+     * The locale a typed number is read in, such as `de-DE`. Empty reads it in
+     * the browser's language.
+     *
+     * Where the locale writes a decimal comma, `1,5` is read as one and a half,
+     * which is what the decimal keypad on a phone in that locale types. A dot is
+     * read as a decimal point in every locale.
+     */
+    locale: string;
     /**
      * The largest value allowed.
      *
@@ -120,6 +154,11 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * Prevents editing. The value is still submitted with the form.
      */
     readOnly: boolean;
+    /**
+     * What the field is described as on iOS and iPadOS, where it carries no
+     * spinbutton role. See the class description.
+     */
+    roleDescription: string;
     /**
      * Makes the label a grip that changes the value when it is dragged.
      *
@@ -132,14 +171,50 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      */
     scrub: boolean;
     /**
-     * How far one step moves.
+     * How far one step moves. A value off the step grid, counted from `min`, is
+     * invalid, as it is in a native number field.
      */
     step: number;
-    /** Focus is delegated to the field, so the host is never the focus target. */
-    static shadowRootOptions: ShadowRootInit;
+    /**
+     * The message the browser shows when the number is off the step grid, with
+     * `{below}` and `{above}` filled in with the nearest valid values.
+     */
+    stepMismatchMessage?: string;
+    /**
+     * What a screen reader says for the value, with `{value}` filled in, such as
+     * `{value} kilograms`.
+     *
+     * A unit slotted into `end` is drawn beside the number and is not part of
+     * what the spinbutton announces, so it goes here too. Empty announces the
+     * number alone.
+     */
+    valueText: string;
+    /**
+     * Whether the mouse wheel steps the number while the field has focus, as
+     * React Aria's NumberField does unless told not to. Off, the wheel scrolls
+     * the page, which is what a reader passing over a form expects.
+     */
+    wheel: boolean;
+    /** Whether the field has focus, so it shows the number itself and not its format. */
+    private editing;
+    /**
+     * What the field shows: the value as written while it is edited, and with
+     * `format-options` once it is not.
+     */
+    private get shown();
+    /** Steps on the wheel, where asked, while the field has focus. */
+    private readonly handleWheel;
+    private readonly handleFocus;
+    /**
+     * Whether this is an iPhone or an iPad, read once on the client. A server
+     * has no navigator and renders the spinbutton.
+     */
+    private readonly touchApple;
     private get control();
     /** The value as a number, or `null` where the field holds nothing usable. */
     private get numeric();
+    /** Whether `value` is on the step grid, counted from `min`. */
+    private onStep;
     /**
      * A value pulled into range and onto the step grid.
      *
@@ -254,7 +329,19 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * the same as preventing one.
      */
     private readonly handleBlur;
-    /** Relayed, because `change` does not cross a shadow boundary on its own. */
+    /**
+     * Pulls a typed number into range and onto the step grid, and returns
+     * whether that moved the value.
+     */
+    private settle;
+    /**
+     * Relayed, because `change` does not cross a shadow boundary on its own.
+     *
+     * **Settled first.** The field's `change` arrives before its `blur`, so
+     * relaying it as it came announced the number as typed, 150 in a field whose
+     * `max` is 100, and the clamp that followed sent `input` alone: a consumer
+     * saving on `change` kept 150 while the form submitted 100.
+     */
     private readonly handleChange;
     /**
      * The four keys a spinner answers, which `Input` does not bind.
@@ -274,7 +361,13 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * message is what a native spinner would have said.
      */
     private sync;
-    /** Puts the cursor in the field. */
+    /**
+     * Puts the cursor in the field.
+     *
+     * **No `delegatesFocus`**, because the platform's delegate is the first
+     * focusable element, which is the Decrease stepper: a label pressed for the
+     * field landed on it, and the arrows then did nothing.
+     */
     focus(options?: FocusOptions): void;
     /** Selects the number, so typing replaces it. */
     select(): void;
@@ -287,6 +380,15 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
     private releaseCaret;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    /**
+     * Enter submits the form, as it does in a native text field.
+     *
+     * On `keypress`, where the platform runs its own implicit submission, so a
+     * consumer who prevents the `keydown` for Enter stops this too.
+     */
+    private readonly handleKeypress;
+    /** @internal A single line of text counts against implicit submission. */
+    protected get blocksImplicitSubmission(): boolean;
     protected render(): TemplateResult;
     /**
      * The value as a number, or `NaN` while the control is empty.