@fusion.dev/helix-headless 0.143.0 → 0.145.0

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

@@ -4,9 +4,24 @@ 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 { AriaForwardController, customElement, HelixElement, IndicatorController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, focusableElements, HelixElement, IndicatorController, KeyboardNavigationController, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+const FOCUSABLE = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])';
+const navigable = (item) => {
+    const control = () => item.navigationControl ??
+        (item.matches(FOCUSABLE) ? item : focusableElements(item)[0]);
+    return {
+        contains: (node) => {
+            const target = control();
+            return target !== undefined && node !== null && (node === target || target.contains(node));
+        },
+        disabled: false,
+        focusItem: () => control()?.focus(),
+        select: () => { },
+        selected: false,
+    };
+};
 let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement {
     constructor() {
         super(...arguments);
@@ -23,7 +38,15 @@ let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement
             observe: () => this.items,
             surface: () => this.partNamed('nav'),
         });
+        this.arrows = false;
         this.label = 'Main';
+        this.keys = new KeyboardNavigationController(this, {
+            items: () => (this.arrows ? this.items.map(navigable) : []),
+            origin: 'focus',
+            reserved: () => this.orientation === 'vertical' ? ['ArrowLeft', 'ArrowRight'] : ['ArrowDown', 'ArrowUp'],
+            selects: () => false,
+            wrap: false,
+        });
         this.aria = new AriaForwardController(this, {
             label: true,
             target: () => this.partNamed('nav'),
@@ -62,6 +85,9 @@ let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement
     </nav>`;
     }
 };
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessNavigation.prototype, "arrows", void 0);
 __decorate([
     property()
 ], HelixHeadlessNavigation.prototype, "label", void 0);

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/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,17 @@ 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.
      *

package/dist/notifications/notification/notification.js

@@ -17,6 +17,9 @@ 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;
@@ -58,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) {
@@ -105,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">${this.read ? nothing : html `<span role="img" aria-label=${this.unreadLabel}></span>`}<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>
@@ -152,9 +162,18 @@ __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);

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

@@ -21,6 +21,19 @@ 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.
+ *
+ * **`load-more` adds a button after the list** that sends `helix-load-more`,
+ * for a feed that holds one page of a longer list. Append the next page, set
+ * `loading` while it is on its way, and take `load-more` off once there is
+ * nothing more. The button is hidden while the feed is loading.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback
@@ -32,6 +45,7 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * @slot header - Above the list, for a title and the mark-all control.
  *
  * @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.
  * @event {HelixReadEvent} helix-read - Fired by an item when it is marked read or unread, and by the feed when everything is marked read. Cancelable.
  *
  * @csspart empty - Shown when there is nothing in the feed.
@@ -41,6 +55,7 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * @csspart live - A copy of the empty and loading messages, in a live region that screen readers announce when they change. Visually hidden in the styled tier.
  * @csspart loading - Shown while the feed is loading.
  * @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 and the feed is not loading.
  *
  * @cssstate media - While a notification in the list holds something in its media slot, so every row keeps that column.
  */
@@ -59,6 +74,15 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
      * The feed's name, read by screen readers.
      */
     label: string;
+    /**
+     * Whether to draw a button after the list that asks for the next page, by
+     * sending `helix-load-more`. Take it off once there is nothing more.
+     */
+    loadMore: boolean;
+    /**
+     * The text of the `load-more` button.
+     */
+    loadMoreLabel: string;
     /**
      * Whether to draw a control that marks everything read.
      */
@@ -67,6 +91,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 +190,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 +260,8 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
     private markEmpty;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
+    /** Asks for the next page, for the `load-more` button. */
+    private readonly askForMore;
     /**
      * Marks everything read, and keeps focus in the feed.
      *

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

@@ -4,13 +4,16 @@ 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, focusableElements, HelixElement, HelixReadEvent, hostAria, MixinCollection, markRegion, } from '@fusion.dev/helix-core';
+import { customElement, deepContains, focusableElements, HelixElement, HelixLoadMoreEvent, HelixReadEvent, hostAria, MixinCollection, markRegion, rovingStop, whenHydrated, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { feedStep } from '../feed-keys.js';
 let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
         this.label = '';
+        this.loadMore = false;
+        this.loadMoreLabel = 'Load more';
         this.markAll = false;
         this.markAllLabel = 'Mark all as read';
         this.handleSlotChange = () => {
@@ -20,6 +23,39 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
         this.handleRead = () => {
             queueMicrotask(() => this.requestUpdate());
         };
+        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.askForMore = () => {
+            this.dispatchEvent(new HelixLoadMoreEvent());
+        };
         this.handleMarkAll = (event) => {
             const button = event.currentTarget;
             const focused = this.shadowRoot?.activeElement === button;
@@ -106,13 +142,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);
@@ -130,6 +189,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) {
@@ -155,19 +215,34 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
         ${this.renderStatus(hasItems)}
       </div>
       ${this.renderLive(hasItems)}
+      ${this.loadMore && !this.loading
+            ? html `<button part="more" type="button" @click=${this.askForMore}>
+              ${this.loadMoreLabel}
+            </button>`
+            : nothing}
       <div part="footer"><slot name="footer"></slot></div>`;
     }
 };
 __decorate([
     property()
 ], HelixHeadlessNotifications.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'load-more', type: Boolean })
+], HelixHeadlessNotifications.prototype, "loadMore", void 0);
+__decorate([
+    property({ attribute: 'load-more-label' })
+], HelixHeadlessNotifications.prototype, "loadMoreLabel", void 0);
 __decorate([
     property({ attribute: 'mark-all', type: Boolean })
 ], HelixHeadlessNotifications.prototype, "markAll", void 0);
 __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,6 +18,17 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
  *
  * `inputmode="decimal"` keeps the numeric keypad on phones.
  *
+ * `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.
@@ -80,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.
      */
@@ -133,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.
      *
@@ -163,6 +189,27 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * 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();

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

@@ -4,10 +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 { AriaForwardController, valueAsNumber as asNumber, customElement, fillTemplate, numberAsValue as fromNumber, HelixFormElement, holdCaret, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
+import { AriaForwardController, appleTouch, valueAsNumber as asNumber, customElement, fillTemplate, formatNumber, numberAsValue as fromNumber, HelixFormElement, holdCaret, MixinControllerValue, MixinField, parseNumber, restoreValue, } from '@fusion.dev/helix-core';
 import { minus, plus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 const SCRUB_PITCH = 4;
 const SCRUB_FINE = 16;
@@ -24,9 +24,28 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         this.locale = '';
         this.placeholder = '';
         this.readOnly = false;
+        this.roleDescription = 'number field';
         this.scrub = false;
         this.step = 1;
         this.valueText = '';
+        this.wheel = false;
+        this.editing = false;
+        this.handleWheel = (event) => {
+            if (!this.wheel || !this.editing || event.deltaY === 0) {
+                return;
+            }
+            event.preventDefault();
+            if (event.deltaY < 0) {
+                this.stepUp();
+            }
+            else {
+                this.stepDown();
+            }
+        };
+        this.handleFocus = () => {
+            this.editing = true;
+        };
+        this.touchApple = appleTouch(typeof navigator === 'undefined' ? undefined : navigator);
         this.scrubFrom = 0;
         this.scrubValue = 0;
         this.scrubStart = '';
@@ -77,6 +96,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             restoreValue(control, this.value);
         };
         this.handleBlur = () => {
+            this.editing = false;
             if (this.settle()) {
                 this.announceChange();
             }
@@ -122,6 +142,13 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             }
         };
     }
+    get shown() {
+        const parsed = this.numeric;
+        if (this.editing || this.formatOptions === undefined || parsed === null) {
+            return this.value;
+        }
+        return formatNumber(parsed, this.locale, this.formatOptions);
+    }
     get control() {
         return this.partNamed('control');
     }
@@ -130,11 +157,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         if (text === '') {
             return null;
         }
-        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;
+        return parseNumber(text, this.locale, this.formatOptions);
     }
     onStep(value) {
         const step = Math.abs(this.step) || 1;
@@ -291,9 +314,10 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         <input
           part="control"
           id=${this.controlId}
-          .value=${this.value}
+          .value=${this.shown}
           type="text"
-          role="spinbutton"
+          role=${this.touchApple ? nothing : 'spinbutton'}
+          aria-roledescription=${this.touchApple ? this.roleDescription : nothing}
           inputmode="decimal"
           autocomplete=${this.autocomplete || nothing}
           name=${this.name || nothing}
@@ -303,17 +327,27 @@ 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}
+          aria-valuetext=${parsed === null
+            ? nothing
+            : this.valueText
+                ? fillTemplate(this.valueText, {
+                    value: this.formatOptions
+                        ? formatNumber(parsed, this.locale, this.formatOptions)
+                        : this.value,
+                })
+                : this.formatOptions
+                    ? formatNumber(parsed, this.locale, this.formatOptions)
+                    : nothing}
           ?disabled=${this.isDisabled}
           ?readonly=${this.readOnly}
           ?required=${this.required}
           @blur=${this.handleBlur}
           @change=${this.handleChange}
+          @focus=${this.handleFocus}
           @input=${this.handleInput}
           @keydown=${this.handleKeydown}
           @keypress=${this.handleKeypress}
+          @wheel=${this.handleWheel}
         />
         <slot name="end"></slot>
         <button
@@ -347,6 +381,9 @@ __decorate([
 __decorate([
     property({ attribute: 'decrement-label' })
 ], HelixHeadlessNumberInput.prototype, "decrementLabel", void 0);
+__decorate([
+    property({ attribute: 'format-options', type: Object })
+], HelixHeadlessNumberInput.prototype, "formatOptions", void 0);
 __decorate([
     property({ attribute: 'increment-label' })
 ], HelixHeadlessNumberInput.prototype, "incrementLabel", void 0);
@@ -374,6 +411,9 @@ __decorate([
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessNumberInput.prototype, "readOnly", void 0);
+__decorate([
+    property({ attribute: 'role-description' })
+], HelixHeadlessNumberInput.prototype, "roleDescription", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessNumberInput.prototype, "scrub", void 0);
@@ -386,20 +426,16 @@ __decorate([
 __decorate([
     property({ attribute: 'value-text' })
 ], HelixHeadlessNumberInput.prototype, "valueText", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessNumberInput.prototype, "wheel", void 0);
+__decorate([
+    state()
+], HelixHeadlessNumberInput.prototype, "editing", 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);