@fusion.dev/helix-headless 0.164.0 → 0.166.0

package/dist/menu/root/menu-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 { AriaForwardController, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, focusTarget, HelixElement, inlineStep, KeyboardNavigationController, linkDescription, MixinCollection, MixinControllerOpen, onUnlessFalse, PopoverController, scrollItemIntoView, sideOf, slottedWords, tellDisclosure, typeaheadBy, unlinkDescription, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, filterKeeps, focusTarget, HelixElement, HelixFilterEvent, inlineStep, KeyboardNavigationController, linkDescription, MixinCollection, MixinControllerOpen, markMatches, onUnlessFalse, PopoverController, scrollItemIntoView, sideOf, slottedWords, tellDisclosure, typeaheadBy, unlinkDescription, words, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -33,8 +33,12 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.backLabel = 'Back';
         this.closeOnSelect = true;
         this.context = false;
+        this.filter = '';
+        this.filterable = false;
+        this.filterLabel = 'Filter';
         this.label = '';
         this.longPressLabel = 'Long press or press Alt+Down to show the menu';
+        this.noResultsText = 'No matches';
         this.offset = 4;
         this.longPress = new LongPress(this, {
             onLongPress: () => {
@@ -68,7 +72,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         });
         this.aria = new AriaForwardController(this, {
             label: true,
-            target: () => this.partNamed('surface'),
+            target: () => this.menuBox,
         });
         this.panel = new PopoverController(this, {
             anchor: () => this.context && this.point
@@ -89,6 +93,11 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             surface: () => this.partNamed('surface'),
         });
         this.settledOnce = false;
+        this.filterPage = null;
+        this.handleFilterInput = (event) => {
+            event.stopPropagation();
+            this.filterBy(event.target.value);
+        };
         this.handleContextMenu = (event) => {
             if (!this.context) {
                 return;
@@ -129,14 +138,9 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         };
         this.handleFocusIn = (event) => {
             const item = this.items.find((row) => row.contains(event.target));
-            if (!item) {
-                return;
+            if (item) {
+                this.revealRow(item);
             }
-            const holder = this.flies ? this.holderOf(item) : null;
-            const surface = holder
-                ? holder.shadowRoot?.querySelector('[part="surface"]')
-                : this.partNamed('surface');
-            scrollItemIntoView(item, { padding: 4, ...(surface ? { scroller: surface } : {}) });
         };
         this.handleKeydown = (event) => {
             if (!this.open) {
@@ -146,9 +150,23 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             const items = this.items;
             const at = items.findIndex((item) => item.active);
             const along = inlineStep(this, event.key);
+            const typing = this.filterable && event.composedPath()[0] === this.field;
+            const step = event.key === 'ArrowDown' ? 1 : event.key === 'ArrowUp' ? -1 : 0;
             if (event.key === 'Escape') {
                 event.stopPropagation();
-                this.leave();
+                if (!this.filterable || this.filter === '') {
+                    this.leave();
+                }
+                else {
+                    this.filterBy('');
+                }
+            }
+            else if (typing && step !== 0) {
+                const count = items.length;
+                this.reach(items[at < 0 ? (step > 0 ? 0 : count - 1) : (at + step + count) % count]);
+            }
+            else if (typing && event.key === 'Enter') {
+                items[at]?.renderRoot.querySelector('[part="item"]')?.click();
             }
             else if (along === 1 && items[at]?.hasSubmenu) {
                 this.enter(items[at]);
@@ -188,6 +206,14 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 this.longPress.down(event);
             }
         };
+        this.handleMouseDown = (event) => {
+            if (this.filterable &&
+                this.open &&
+                event.composedPath()[0] !== this.field &&
+                !this.fromTrigger(event)) {
+                event.preventDefault();
+            }
+        };
         this.handlePointerMove = (event) => {
             this.longPress.move(event);
         };
@@ -209,7 +235,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             }
         };
         this.handleHover = (event) => {
-            if (!this.flies || !this.open || event.pointerType !== 'mouse') {
+            if (!(this.flies || this.filterable) || !this.open || event.pointerType !== 'mouse') {
                 return;
             }
             const row = event
@@ -221,7 +247,10 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             this.hovered = row;
             this.grace = undefined;
             if (!row.disabled) {
-                row.focus();
+                this.reach(row);
+            }
+            if (!this.flies) {
+                return;
             }
             clearTimeout(this.hoverTimer);
             this.hoverTimer = setTimeout(() => {
@@ -334,7 +363,53 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     }
     get items() {
         const rows = this.flies ? this.rowsOf(this.keyPage) : this.drilldown.rows;
-        return rows.filter((row) => !row.disabled);
+        return rows.filter((row) => !row.disabled && this.kept(row));
+    }
+    get menuBox() {
+        return this.filterable
+            ? (this.renderRoot?.querySelector('#items') ?? null)
+            : this.partNamed('surface');
+    }
+    get field() {
+        return this.partNamed('search-field');
+    }
+    get filtering() {
+        return this.filterable && this.filter.trim() !== '' && this.filter !== this.refused;
+    }
+    kept(row) {
+        return (!this.filtering ||
+            this.holderOf(row) !== this.filterPage ||
+            filterKeeps(slottedWords(row, ['']), this.filter.trim(), this.filterMatch));
+    }
+    requestFilter(value) {
+        if (value === this.filter) {
+            return;
+        }
+        this.filterPage = this.flies ? this.keyPage : this.drilldown.page;
+        this.refused = this.dispatchEvent(new HelixFilterEvent({ value })) ? undefined : value;
+        this.filter = value;
+    }
+    filterBy(value) {
+        this.requestFilter(value);
+        void this.updateComplete.then(() => this.reach(this.items[0]));
+    }
+    reach(row) {
+        if (!this.filterable) {
+            row?.focus();
+            return;
+        }
+        if (this.highlighted && this.highlighted !== row) {
+            this.highlighted.highlighted = false;
+        }
+        this.highlighted = row;
+        const field = this.field;
+        if (field && 'ariaActiveDescendantElement' in field) {
+            field.ariaActiveDescendantElement = row ?? null;
+        }
+        if (row) {
+            row.highlighted = true;
+            this.revealRow(row);
+        }
     }
     show() {
         this.openAt('first');
@@ -345,7 +420,8 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         }
         this.updateComplete.then(() => {
             const items = this.items;
-            (end === 'first' ? items[0] : items[items.length - 1])?.focus();
+            this.field?.focus();
+            this.reach(end === 'first' ? items[0] : items[items.length - 1]);
         });
     }
     hide() {
@@ -355,6 +431,8 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.panel.hide();
         this.drilldown.reset();
         this.stopHover();
+        this.requestFilter('');
+        this.reach(undefined);
         if (deepContains(this, deepActiveElement())) {
             ;
             (this.context ? (this.returnTo ?? this.trigger) : this.trigger).focus();
@@ -377,18 +455,20 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         if (!this.drilldown.enter(item)) {
             return;
         }
+        this.requestFilter('');
         void this.updateComplete.then(async () => {
             if (!this.flies) {
-                this.items[0]?.focusItem();
+                this.reach(this.items[0]);
                 return;
             }
             await item.updateComplete;
             const first = this.rowsOf(item).find((row) => !row.disabled);
             await first?.updateComplete;
-            first?.focusItem();
+            this.reach(first);
         });
     }
     leave() {
+        this.requestFilter('');
         if (this.flies) {
             const holder = this.keyPage;
             if (!holder) {
@@ -396,7 +476,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 return;
             }
             this.openPage(this.holderOf(holder));
-            this.updateComplete.then(() => holder.focus());
+            this.updateComplete.then(() => this.reach(holder));
             return;
         }
         if (this.drilldown.atRoot) {
@@ -405,7 +485,14 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         }
         const leaving = this.drilldown.page;
         this.drilldown.back();
-        this.updateComplete.then(() => leaving?.focus());
+        this.updateComplete.then(() => this.reach(leaving ?? undefined));
+    }
+    revealRow(item) {
+        const holder = this.flies ? this.holderOf(item) : null;
+        const surface = holder
+            ? holder.shadowRoot?.querySelector('[part="surface"]')
+            : this.partNamed('surface');
+        scrollItemIntoView(item, { padding: 4, ...(surface ? { scroller: surface } : {}) });
     }
     handleClosedKeydown(event) {
         if (this.context && event.shiftKey && event.key === 'F10' && this.fromTrigger(event)) {
@@ -462,6 +549,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.addEventListener('focusin', this.handleFocusIn);
         this.addEventListener('contextmenu', this.handleContextMenu);
         this.addEventListener('pointerdown', this.handlePointerDown);
+        this.addEventListener('mousedown', this.handleMouseDown);
         this.addEventListener('pointermove', this.handlePointerMove);
         this.addEventListener('pointerup', this.handlePointerUp);
         this.addEventListener('pointercancel', this.handlePointerCancel);
@@ -484,6 +572,10 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.removeEventListener('focusin', this.handleFocusIn);
         this.removeEventListener('contextmenu', this.handleContextMenu);
         this.removeEventListener('pointerdown', this.handlePointerDown);
+        this.removeEventListener('mousedown', this.handleMouseDown);
+        if (this.filterable) {
+            markMatches(this, [], '');
+        }
         this.removeEventListener('pointermove', this.handlePointerMove);
         this.removeEventListener('pointerup', this.handlePointerUp);
         this.removeEventListener('pointercancel', this.handlePointerCancel);
@@ -505,7 +597,9 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         const top = this.flies || this.drilldown.atRoot;
         for (const child of this.children) {
             if (isSection(child)) {
-                child.onPage = top;
+                child.onPage =
+                    top &&
+                        (!this.filtering || [...child.children].some((row) => isItem(row) && this.kept(row)));
                 for (const row of child.children) {
                     if (row.isMenuItem === true) {
                         this.mark(row, top);
@@ -522,9 +616,18 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.toggleState('drilled', !this.flies && !this.drilldown.atRoot);
         this.markColumns();
         this.nameSurface();
+        if (this.filterable) {
+            markMatches(this, this.rowsOf(this.filterPage).filter((row) => this.kept(row)), this.filtering ? this.filter.trim() : '');
+            const items = this.items;
+            if (changed.has('filter') &&
+                this.open &&
+                !items.includes(this.highlighted)) {
+                this.reach(items[0]);
+            }
+        }
     }
     nameSurface() {
-        const surface = this.partNamed('surface');
+        const surface = this.menuBox;
         if (!surface || !('ariaLabelledByElements' in surface)) {
             return;
         }
@@ -544,7 +647,8 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     }
     mark(item, onPage) {
         const page = this.drilldown.page;
-        item.onPage = onPage;
+        item.onPage = onPage && this.kept(item);
+        item.virtual = this.filterable;
         const holds = page !== null && item.contains(page);
         item.flyout = this.flies;
         item.expanded = this.flies && holds;
@@ -553,7 +657,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             for (const child of item.children) {
                 const nested = child;
                 if (nested.isMenuItem === true && child.slot === 'submenu') {
-                    this.mark(nested, onPage && holds);
+                    this.mark(nested, item.onPage && holds);
                 }
             }
             return;
@@ -568,6 +672,32 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     }
     render() {
         const point = this.context && this.point;
+        const filtering = this.filtering;
+        const none = filtering && !this.rowsOf(this.filterPage).some((row) => this.kept(row));
+        this.announced = none ? this.noResultsText : '';
+        const rows = html `${this.flies || this.drilldown.atRoot
+            ? nothing
+            : html `<div part="header">
+            <button
+              part="back"
+              type="button"
+              role="menuitem"
+              tabindex="-1"
+              aria-label=${this.backLabel}
+              @click=${() => this.leave()}
+            >
+              <svg part="back-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
+                ${unsafeSVG(caretLeft.content)}
+              </svg>
+            </button>
+            <span part="title">${this.drilldown.label}</span>
+          </div>`}
+      <slot @slotchange=${(event) => this.countRows(event)}></slot>
+      ${none
+            ? html `<p part="empty"><slot name="no-results">${this.noResultsText}</slot></p>`
+            : this.renderStatus(this.hasRows)}`;
+        const busy = this.loading ? 'true' : nothing;
+        const label = this.label || nothing;
         return html `<slot name="trigger" @click=${this.handleTriggerClick}></slot>${point
             ? html `<span
             id="point"
@@ -578,31 +708,27 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
       <div
         part="surface"
         popover="manual"
-        role="menu"
-        aria-busy=${this.loading ? 'true' : nothing}
-        aria-label=${this.label || nothing}
+        role=${this.filterable ? nothing : 'menu'}
+        aria-busy=${this.filterable ? nothing : busy}
+        aria-label=${this.filterable ? nothing : label}
         data-drilled=${this.flies || this.drilldown.atRoot ? nothing : ''}
+        data-filtered=${filtering ? '' : nothing}
         ?hidden=${!this.open}
       >
-        ${this.flies || this.drilldown.atRoot
-            ? nothing
-            : html `<div part="header">
-                <button
-                  part="back"
-                  type="button"
-                  role="menuitem"
-                  tabindex="-1"
-                  aria-label=${this.backLabel}
-                  @click=${() => this.leave()}
-                >
-                  <svg part="back-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
-                    ${unsafeSVG(caretLeft.content)}
-                  </svg>
-                </button>
-                <span part="title">${this.drilldown.label}</span>
-              </div>`}
-        <slot @slotchange=${(event) => this.countRows(event)}></slot>
-        ${this.renderStatus(this.hasRows)}
+        ${this.filterable
+            ? html `<input
+                  part="search-field"
+                  type="text"
+                  autocomplete="off"
+                  spellcheck="false"
+                  .value=${this.filter}
+                  placeholder=${this.filterLabel}
+                  aria-label=${this.filterLabel}
+                  aria-autocomplete="list"
+                  aria-controls="items"
+                  @input=${this.handleFilterInput}
+                /><div id="items" role="menu" aria-busy=${busy} aria-label=${label}>${rows}</div>`
+            : rows}
       </div>${this.renderLive(this.hasRows)}`;
     }
 };
@@ -616,6 +742,19 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessMenu.prototype, "context", void 0);
+__decorate([
+    property()
+], HelixHeadlessMenu.prototype, "filter", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessMenu.prototype, "filterable", void 0);
+__decorate([
+    words,
+    property({ attribute: 'filter-label' })
+], HelixHeadlessMenu.prototype, "filterLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessMenu.prototype, "filterMatch", void 0);
 __decorate([
     property()
 ], HelixHeadlessMenu.prototype, "label", void 0);
@@ -623,6 +762,10 @@ __decorate([
     words,
     property({ attribute: 'long-press-label' })
 ], HelixHeadlessMenu.prototype, "longPressLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'no-results-text' })
+], HelixHeadlessMenu.prototype, "noResultsText", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessMenu.prototype, "offset", void 0);

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

@@ -8,7 +8,7 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
  * A separate family from `Input`'s `type="number"`. It renders two buttons,
  * binds four keys `Input` does not, and handles clamping and stepping.
  *
- * The field is `type="text"` with `inputmode="decimal"`. Tested in a real
+ * The field is `type="text"` with an `inputmode` for a number. Tested in a real
  * browser, `type="number"` fails in three ways:
  * - Typing `12e` gives a `.value` of `""`, so the element cannot see what you
  *   typed. A `type="text"` field keeps `"12e"`.
@@ -16,7 +16,11 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
  *   to 4, when you only meant to scroll the page.
  * - `selectionStart` is `null`, so the caret cannot be managed.
  *
- * `inputmode="decimal"` keeps the numeric keypad on phones.
+ * `inputmode` keeps a numeric keypad on phones, chosen as React Aria's
+ * NumberField chooses it: a keypad with a minus key where the number can be
+ * negative, and one with a decimal separator where the format shows a
+ * fraction. An iPhone has no keypad with a minus key, so a field that can be
+ * negative takes the full keyboard there.
  *
  * `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
@@ -85,6 +89,8 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
  * @csspart increment-mark - The icon on the step up button.
  * @csspart label - The label above the field. It is also the grip you drag when `scrub` is set.
  *
+ * @cssstate at-max - The number is at `max`, so it cannot step up, as React Aria's NumberField says with `canIncrement`.
+ * @cssstate at-min - The number is at `min`, so it cannot step down.
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  * @cssstate scrubbing - The label is being dragged to change the value, under `scrub`, as Zag's scrubber says while it is held.
  */
@@ -209,12 +215,13 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * invalid, as it is in a native number field.
      *
      * Unset, a step moves by one, or by one percent under a percent format, and
-     * a typed number is rounded to the smallest amount `format-options` shows
-     * rather than to whole steps, as React Aria's NumberField does: a field
-     * showing dollars keeps the cents typed into it. Without `format-options`
-     * the grid is whole numbers, as in a native number field.
+     * a typed number is rounded to the smallest amount the format shows, as
+     * React Aria's NumberField does: a field showing dollars keeps the cents
+     * typed into it, and one with no `format-options` keeps three decimal
+     * places. `any` puts the number on no grid, as it does in a native number
+     * field: a step moves by one, and any number in range is valid.
      */
-    step?: number;
+    step?: number | 'any';
     /**
      * The message the browser shows when the number is off the step grid, with
      * `{below}` and `{above}` filled in with the nearest valid values, written in
@@ -251,16 +258,30 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * has no navigator and renders the spinbutton.
      */
     private readonly touchApple;
+    /** The phone the field is on, read once on the client, for the keypad it offers. */
+    private readonly phone;
+    /**
+     * The keypad a phone shows, as React Aria's NumberField chooses it.
+     * `numeric` on Android has a minus key and a decimal separator, and
+     * `decimal` has no minus key. On an iPhone neither has a minus key, so a
+     * number that can be negative takes the full keyboard. Measured before
+     * this: `decimal` with `min="-10"`, so a phone could not type the minus.
+     */
+    private get keypad();
     private get control();
     /** The value as a number, or `null` where the field holds nothing usable. */
     private get numeric();
     /** The grain last read off the format, with the locale and options it was read for. */
     private grainOf?;
+    /** The step as a number, or zero where it is unset or `any`. */
+    private get stepSize();
     /** How far one press moves: `step`, or the stride the format implies. */
     private get stride();
     /**
-     * The grid a typed number is rounded to: `step` where it is set, and
-     * otherwise the smallest amount the format shows, or whole numbers.
+     * The grid a typed number is rounded to: `step` where it is set, nothing
+     * where it is `any`, and otherwise the smallest amount the format shows.
+     * Measured before this: with no step and no format, `2,75` typed in German
+     * became 3 on blur.
      */
     private get grid();
     /**
@@ -323,6 +344,8 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * `handleStepperClick`.
      */
     private readonly handleStepperDown;
+    /** Keeps a pressed stepper from taking focus from the field. */
+    private readonly handleStepperMouseDown;
     /**
      * Ends a hold. The click that follows a release arrives in the same task,
      * so the press is forgotten after it.

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

@@ -12,6 +12,20 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { decimals, formatGrain, strideOf } from '../grain.js';
 const SCRUB_PITCH = 4;
 const SCRUB_FINE = 16;
+const PLAIN_FORMAT = {};
+const stepConverter = {
+    fromAttribute: (text) => {
+        if (text === null) {
+            return undefined;
+        }
+        return text.trim().toLowerCase() === 'any' ? 'any' : Number(text);
+    },
+    toAttribute: (step) => step === undefined ? undefined : String(step),
+};
+const phoneOf = (platform) => {
+    const agent = platform?.userAgent ?? '';
+    return /iPhone|iPod/u.test(agent) ? 'iphone' : /android/iu.test(agent) ? 'android' : '';
+};
 const PLAIN = /^-?(\d+(\.\d*)?|\.\d+)$/;
 const REPEAT_DELAY = 400;
 const REPEAT_EVERY = 60;
@@ -53,6 +67,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             this.editing = true;
         };
         this.touchApple = appleTouch(typeof navigator === 'undefined' ? undefined : navigator);
+        this.phone = phoneOf(typeof navigator === 'undefined' ? undefined : navigator);
         this.pressStepped = false;
         this.handleStepperDown = (event) => {
             if (event.button !== 0) {
@@ -60,6 +75,9 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             }
             const button = event.currentTarget;
             const up = button.getAttribute('part') === 'increment';
+            if (event.pointerType === 'mouse' && this.control && !this.control.matches(':focus')) {
+                this.control.focus({ preventScroll: true });
+            }
             clearTimeout(this.repeat);
             this.pressStepped = true;
             button.setPointerCapture?.(event.pointerId);
@@ -79,6 +97,9 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
                 this.repeat = setTimeout(step, REPEAT_DELAY);
             }
         };
+        this.handleStepperMouseDown = (event) => {
+            event.preventDefault();
+        };
         this.stopRepeat = () => {
             clearTimeout(this.repeat);
             this.repeat = undefined;
@@ -217,6 +238,18 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         }
         return formatNumber(parsed, this.locale, this.formatOptions);
     }
+    get keypad() {
+        const negative = this.min === undefined || this.min < 0;
+        const grid = this.grid;
+        const fraction = grid === 0 || !Number.isInteger(grid);
+        if (this.phone === 'iphone') {
+            return negative ? 'text' : fraction ? 'decimal' : 'numeric';
+        }
+        if (this.phone === 'android') {
+            return negative ? 'numeric' : fraction ? 'decimal' : 'numeric';
+        }
+        return 'numeric';
+    }
     get control() {
         return this.partNamed('control');
     }
@@ -227,15 +260,18 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         }
         return parseNumber(text, this.locale, this.formatOptions);
     }
+    get stepSize() {
+        return typeof this.step === 'number' ? Math.abs(this.step) || 0 : 0;
+    }
     get stride() {
-        return Math.abs(this.step ?? 0) || strideOf(this.formatOptions);
+        return this.stepSize || strideOf(this.formatOptions);
     }
     get grid() {
-        const step = Math.abs(this.step ?? 0);
-        const options = this.formatOptions;
-        if (step || !options) {
-            return step || 1;
+        const step = this.stepSize;
+        if (step || this.step === 'any') {
+            return step;
         }
+        const options = this.formatOptions ?? PLAIN_FORMAT;
         const [locale, read, grain] = this.grainOf ?? [];
         if (locale === this.locale && read === options && grain !== undefined) {
             return grain;
@@ -252,6 +288,9 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
     }
     onStep(value) {
         const step = this.grid;
+        if (!step) {
+            return true;
+        }
         const anchor = this.min ?? 0;
         const steps = (value - anchor) / step;
         return Math.abs(steps - Math.round(steps)) < 1e-9;
@@ -259,11 +298,11 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
     clamp(value) {
         const step = this.grid;
         const anchor = this.min ?? 0;
-        const stepped = anchor + Math.round((value - anchor) / step) * step;
+        const stepped = step ? anchor + Math.round((value - anchor) / step) * step : value;
         const floored = this.min === undefined ? stepped : Math.max(this.min, stepped);
         const capped = this.max === undefined ? floored : Math.min(this.max, floored);
         const places = Math.max(decimals(step), decimals(anchor));
-        return Number(capped.toFixed(places));
+        return step ? Number(capped.toFixed(places)) : capped;
     }
     nudge(steps) {
         if (this.isDisabled || this.readOnly) {
@@ -387,6 +426,9 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         this.releaseCaret?.();
         this.releaseCaret = undefined;
         this.sync();
+        const parsed = this.numeric;
+        this.toggleState('at-min', parsed !== null && this.min !== undefined && parsed <= this.min);
+        this.toggleState('at-max', parsed !== null && this.max !== undefined && parsed >= this.max);
     }
     get blocksImplicitSubmission() {
         return true;
@@ -419,6 +461,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
           ?disabled=${this.isDisabled || this.readOnly || atMin}
           @click=${this.handleStepperClick}
           @lostpointercapture=${this.stopRepeat}
+          @mousedown=${this.handleStepperMouseDown}
           @pointercancel=${this.stopRepeat}
           @pointerdown=${this.handleStepperDown}
           @pointerup=${this.stopRepeat}
@@ -434,7 +477,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
           type="text"
           role=${this.touchApple ? nothing : 'spinbutton'}
           aria-roledescription=${this.touchApple || this.roleLabel === '' ? nothing : this.roleLabel}
-          inputmode="decimal"
+          inputmode=${this.keypad}
           autocomplete=${this.autocomplete || nothing}
           name=${this.name || nothing}
           placeholder=${this.placeholder || nothing}
@@ -474,6 +517,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
           ?disabled=${this.isDisabled || this.readOnly || atMax}
           @click=${this.handleStepperClick}
           @lostpointercapture=${this.stopRepeat}
+          @mousedown=${this.handleStepperMouseDown}
           @pointercancel=${this.stopRepeat}
           @pointerdown=${this.handleStepperDown}
           @pointerup=${this.stopRepeat}
@@ -542,7 +586,7 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessNumberInput.prototype, "scrub", void 0);
 __decorate([
-    property({ type: Number })
+    property({ converter: stepConverter })
 ], HelixHeadlessNumberInput.prototype, "step", void 0);
 __decorate([
     words,