@fusion.dev/helix-headless 0.155.0 → 0.156.0

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

@@ -69,6 +69,23 @@ import { type ListSelectionBehavior, type ListSelectionMode } from '../selection
  * no `start` counts down from the number of rows, which a server cannot know,
  * so served markup counts from one until the list runs.
  *
+ * **An empty list.** Set `empty-label`, or put your own content in the `empty`
+ * slot, for a row shown while the list has no rows and none are loading, such
+ * as "No files yet" and a link to add one. Without either, an empty list shows
+ * nothing. The list takes the `empty` state while it has no rows, whatever it
+ * shows.
+ *
+ * **Loading more.** `load-more` sends `helix-load-more` once the end of the
+ * list comes within a screen of view, in the box that scrolls it or the page,
+ * once for each number of rows: add rows and it can send it again. While you
+ * fetch, set `loading`: the list is busy, and a row after the last says
+ * "Loading more" (`loading-label`, or your own content in the `loading`
+ * slot). The list asks for nothing while `loading` is set.
+ *
+ * An interactive list with no name is reported once in a development build,
+ * since a screen reader announces it as a grid and nothing more. Name it with
+ * `label` or `aria-label`.
+ *
  * @since 0.1.0
  * @status stable
  * @category data
@@ -76,18 +93,26 @@ import { type ListSelectionBehavior, type ListSelectionMode } from '../selection
  * @documentation https://fusion.dev/helix/components/list
  *
  * @slot - The rows.
+ * @slot empty - Content for the row shown while the list has no rows and none are loading. Falls back to `empty-label`.
+ * @slot loading - Content for the row after the last while `loading` is set. Falls back to `loading-label`.
  *
  * @event {Event} change - Fired once a press has changed which rows are selected.
  * @event {HelixActionEvent} helix-action - Sent from a row when the reader acts on it: Enter, or a press in a list that selects nothing. Read the row from `target`. A row with `href` follows its link instead.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired before a press changes which rows are selected, with the `value` it would leave. Cancelable.
  * @event {HelixBeforeReorderEvent} helix-before-reorder - Fired when a row is dropped at a new place, in a `reorderable` list, with every row's value in the new order. Cancelable: cancel it to keep the row where it is.
+ * @event {HelixLoadMoreEvent} helix-load-more - Fired, in a list with `load-more`, when the end of the list comes within a screen of view, once for each number of rows.
  * @event {HelixReorderEvent} helix-reorder - Fired after `helix-before-reorder` when nobody canceled it. Move your rows to the order in `keys`. Cancelable: cancel it to say the move did not happen.
  *
  * @csspart drag-preview - A copy of the row a pointer drags, which follows the pointer in the top layer until the row is let go, in a `reorderable` list. Hidden from assistive technology.
+ * @csspart empty - The row shown while the list has no rows and none are loading, where `empty-label` or the `empty` slot gives it content. A grid row with one cell in a list that selects.
  * @csspart live - The region that says each step of a move to screen readers, in a `reorderable` list. Drawn from the first move. Visually hidden in the styled tier.
+ * @csspart loading - The row after the last while `loading` is set. A grid row with one cell in a list that selects.
  *
  * @cssproperty --list-first - The number of the first row, written where `start` or `reversed` moves it.
  * @cssproperty --list-step - What each row adds to the number before it: `1`, or `-1` where `reversed`.
+ *
+ * @cssstate empty - While the list has no rows.
+ * @cssstate loading - While `loading` is set.
  */
 export declare class HelixHeadlessList extends HelixElement {
     /**
@@ -102,6 +127,11 @@ export declare class HelixHeadlessList extends HelixElement {
     canceledLabel: string;
     /** What screen readers hear when a row is dropped, in a `reorderable` list. */
     droppedLabel: string;
+    /**
+     * The text of the row shown while the list has no rows, where the `empty`
+     * slot is empty. Empty, the default, shows no row.
+     */
+    emptyLabel: string;
     /**
      * The kind of list, which follows from the content.
      *
@@ -129,6 +159,18 @@ export declare class HelixHeadlessList extends HelixElement {
      * The list's name, read by screen readers.
      */
     label: string;
+    /**
+     * Marks the list as busy fetching more rows, and draws a row after the last
+     * that says so. The list asks for no more while it is set.
+     */
+    loading: boolean;
+    /** The text of the row drawn while `loading` is set, where the `loading` slot is empty. */
+    loadingLabel: string;
+    /**
+     * Sends `helix-load-more` once the end of the list comes within a screen of
+     * view, so you can add the next rows as a reader nears them.
+     */
+    loadMore: boolean;
     /**
      * What screen readers hear each time an arrow key moves a held row, in a
      * `reorderable` list. `{name}` is the row's words, `{position}` the place it
@@ -185,7 +227,7 @@ export declare class HelixHeadlessList extends HelixElement {
      */
     type?: '1' | 'a' | 'A' | 'i' | 'I';
     /**
-     * The selected rows' values, separated by commas, in a list that selects.
+     * The selected rows' values, separated by commas with no spaces, such as `a,c`, in a list that selects.
      *
      * Set it to start with rows selected. A row's value is its `value`, or its
      * words where it has none.
@@ -303,6 +345,37 @@ export declare class HelixHeadlessList extends HelixElement {
      */
     private get numbers();
     protected render(): TemplateResult;
+    /**
+     * The row shown while the list has no rows: a list item, or a grid row with
+     * one cell in a list that selects. Drawn only once the children are known,
+     * so a server and a hydrating render never claim an empty list, and hidden
+     * while it has neither `empty-label` nor content in the `empty` slot.
+     */
+    private drawEmpty;
+    /**
+     * The row after the last while `loading` is set: a list item, or a grid row
+     * with one cell in a list that selects. It is not one of the rows, so it
+     * carries no value and a key never lands on it.
+     */
+    private drawLoading;
+    /** Watches the end of a `load-more` list coming near the box that scrolls it. */
+    private endWatcher;
+    /** The end being watched, so a new one is watched again. */
+    private watchedEnd;
+    /** Whether the end of the list was in reach when last measured. */
+    private endInView;
+    /** The number of rows `helix-load-more` was last sent for. */
+    private askedAt;
+    /**
+     * Starts or stops watching the end of the list. The box it is measured
+     * against is the one that scrolls the list, or the page, and a screen of
+     * room is added below it, so the next rows are asked for before a reader
+     * reaches the last.
+     */
+    private watchEnd;
+    /** Sends `helix-load-more`, once for each number of rows, and never while loading. */
+    private askForMore;
+    private readonly handleEmptyChange;
     private readonly handleSlotChange;
 }
 declare global {

package/dist/list/root/list-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 { commaList, customElement, deepActiveElement, drawStatus, focusItemOf, formatWords, HelixActionEvent, HelixElement, hostAria, inlineStep, KeyboardNavigationController, placeKey, pressedOwnControl, ReorderController, requestReorder, requestValue, rovingStop, StatusController, scrollingAncestor, scrollRoom, selectsAll, typeaheadByWords, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { auditName, commaList, customElement, deepActiveElement, drawStatus, focusItemOf, formatWords, HelixActionEvent, HelixElement, HelixLoadMoreEvent, hostAria, inlineStep, KeyboardNavigationController, placeKey, pressedOwnControl, ReorderController, requestReorder, requestValue, rovingStop, StatusController, scrollingAncestor, scrollRoom, selectsAll, typeaheadByWords, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessListItem } from '../item/list-item.js';
@@ -15,7 +15,11 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         super(...arguments);
         this.canceledLabel = 'Canceled';
         this.droppedLabel = 'Dropped';
+        this.emptyLabel = '';
         this.label = '';
+        this.loading = false;
+        this.loadingLabel = 'Loading more';
+        this.loadMore = false;
         this.movedLabel = '{name} moved to position {position} of {count}';
         this.moveLabel = 'Move {name}';
         this.pickedUpLabel = 'Picked up {name}';
@@ -81,7 +85,7 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
             }
             if (selectsAll(event) && this.selectionMode === 'multiple') {
                 event.preventDefault();
-                const every = this.reachable.map((one) => this.valueFor(one)).join(', ');
+                const every = this.reachable.map((one) => this.valueFor(one)).join(',');
                 this.choose(every === this.value ? null : every);
             }
             else if (event.key === 'Escape' && this.value !== '' && this.selectionMode !== 'none') {
@@ -125,6 +129,10 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
                 this.sync();
             }
         };
+        this.endInView = false;
+        this.handleEmptyChange = () => {
+            this.requestUpdate();
+        };
         this.handleSlotChange = () => {
             this.rowsChanged = true;
             this.requestUpdate();
@@ -306,9 +314,15 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         this.addEventListener('keydown', this.handleKeydown);
         this.addEventListener('click', this.handleClick);
         this.addEventListener('focusin', this.handleFocusin);
+        if (this.hasUpdated) {
+            this.watchEnd();
+        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.endWatcher?.disconnect();
+        this.endWatcher = undefined;
+        this.watchedEnd = undefined;
         this.removeEventListener('keydown', this.handleKeyCapture, true);
         this.removeEventListener('keydown', this.handleKeydown);
         this.removeEventListener('click', this.handleClick);
@@ -323,6 +337,17 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         if (this.interactive || changed.get('selectionMode') !== undefined) {
             this.sync();
         }
+        if (this.interactive) {
+            auditName(this, () => null, 'Give it a `label`, or an `aria-label` that says what the rows are.', () => this.label !== '');
+        }
+        if (this.childrenKnown) {
+            this.toggleState('empty', this.rows.length === 0);
+        }
+        this.toggleState('loading', this.loading);
+        this.watchEnd();
+        if (this.endInView) {
+            this.askForMore();
+        }
         if (this.reorderable || changed.get('reorderable') !== undefined) {
             this.syncMoves();
             this.refocus();
@@ -331,14 +356,64 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: this.interactive ? 'grid' : 'list' });
+        this.internals.ariaBusy = this.loading ? 'true' : null;
         this.internals.ariaMultiSelectable = this.selectionMode === 'multiple' ? 'true' : null;
     }
     get numbers() {
-        const counted = numbering(this.start, this.reversed, this.childrenKnown ? this.knownChildren.length : undefined);
+        const counted = numbering(this.start, this.reversed, this.childrenKnown
+            ? this.knownChildren.filter((child) => !child.hasAttribute('slot')).length
+            : undefined);
         return counted ? `--list-first: ${counted.first}; --list-step: ${counted.step}` : nothing;
     }
     render() {
-        return html `<slot style=${this.numbers} @slotchange=${this.handleSlotChange}></slot>${drawStatus(this.status)}${this.reorder.drawDragPreview()}`;
+        return html `<slot style=${this.numbers} @slotchange=${this.handleSlotChange}></slot>${this.drawLoading()}${this.drawEmpty()}${this.loadMore ? html `<span data-end aria-hidden="true"></span>` : nothing}${drawStatus(this.status)}${this.reorder.drawDragPreview()}`;
+    }
+    drawEmpty() {
+        if (!this.childrenKnown || this.rows.length > 0 || this.loading) {
+            return nothing;
+        }
+        const shown = this.emptyLabel !== '' || this.querySelector(':scope > [slot="empty"]') !== null;
+        const content = html `<slot name="empty" @slotchange=${this.handleEmptyChange}>${this.emptyLabel}</slot>`;
+        return this.interactive
+            ? html `<div part="empty" role="row" ?hidden=${!shown}><div role="gridcell">${content}</div></div>`
+            : html `<div part="empty" role="listitem" ?hidden=${!shown}>${content}</div>`;
+    }
+    drawLoading() {
+        if (!this.loading) {
+            return nothing;
+        }
+        const content = html `<slot name="loading">${this.loadingLabel}</slot>`;
+        return this.interactive
+            ? html `<div part="loading" role="row"><div role="gridcell">${content}</div></div>`
+            : html `<div part="loading" role="listitem">${content}</div>`;
+    }
+    watchEnd() {
+        const end = this.loadMore ? this.renderRoot.querySelector('[data-end]') : null;
+        if (end === this.watchedEnd) {
+            return;
+        }
+        this.endWatcher?.disconnect();
+        this.endWatcher = undefined;
+        this.endInView = false;
+        this.watchedEnd = end ?? undefined;
+        if (!end || typeof IntersectionObserver === 'undefined') {
+            return;
+        }
+        this.endWatcher = new IntersectionObserver((entries) => {
+            this.endInView = entries.some((entry) => entry.isIntersecting);
+            if (this.endInView) {
+                this.askForMore();
+            }
+        }, { root: scrollingAncestor(this, { axis: 'y' }), rootMargin: '0px 0px 100% 0px' });
+        this.endWatcher.observe(end);
+    }
+    askForMore() {
+        const count = this.rows.length;
+        if (!this.loadMore || this.loading || this.askedAt === count) {
+            return;
+        }
+        this.askedAt = count;
+        this.dispatchEvent(new HelixLoadMoreEvent());
     }
 };
 __decorate([
@@ -349,12 +424,25 @@ __decorate([
     words,
     property({ attribute: 'dropped-label' })
 ], HelixHeadlessList.prototype, "droppedLabel", void 0);
+__decorate([
+    property({ attribute: 'empty-label' })
+], HelixHeadlessList.prototype, "emptyLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessList.prototype, "kind", void 0);
 __decorate([
     property()
 ], HelixHeadlessList.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessList.prototype, "loading", void 0);
+__decorate([
+    words,
+    property({ attribute: 'loading-label' })
+], HelixHeadlessList.prototype, "loadingLabel", void 0);
+__decorate([
+    property({ attribute: 'load-more', type: Boolean })
+], HelixHeadlessList.prototype, "loadMore", void 0);
 __decorate([
     words,
     property({ attribute: 'moved-label' })

package/dist/list/selection.js

@@ -7,7 +7,7 @@ export const choiceValue = ({ anchor, arrived = false, behavior, extend = false,
     if (extend && mode === 'multiple') {
         const from = anchor === undefined ? -1 : shown.indexOf(anchor);
         const range = rangeAdd(now, shown, from, shown.indexOf(pressed));
-        return range ? range.join(', ') : null;
+        return range ? range.join(',') : null;
     }
     if (behavior === 'replace' && !toggle) {
         return now.length === 1 && now[0] === pressed ? null : pressed;
@@ -15,8 +15,8 @@ export const choiceValue = ({ anchor, arrived = false, behavior, extend = false,
     if (arrived) {
         return null;
     }
-    const next = pressedValue(mode, value, pressed);
-    return next === value ? null : next;
+    const next = commaList(pressedValue(mode, value, pressed)).join(',');
+    return next === commaList(value).join(',') ? null : next;
 };
 export const rowStop = (count, at, step) => {
     if (count <= 1) {

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

@@ -214,6 +214,12 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
      * above `0`.
      */
     pitch: number;
+    /**
+     * What a screen reader calls the map in place of its role, after its
+     * name: "Edinburgh, map". Said only where the map has a name of its
+     * own, since the fallback name is the same word. Empty leaves the role.
+     */
+    roleLabel: string;
     /** The rotate left button's label. */
     rotateLeftLabel: string;
     /** The rotate right button's label. */

package/dist/map/root/map-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, focusItemOf, formatWords, HelixActivateEvent, HelixBeforeChangeEvent, HelixBeforeToggleEvent, HelixElement, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixToggleEvent, hostAria, KeyboardNavigationController, MixinViewport, requestChange, words, } from '@fusion.dev/helix-core';
+import { auditName, customElement, focusItemOf, formatWords, HelixActivateEvent, HelixBeforeChangeEvent, HelixBeforeToggleEvent, HelixElement, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixToggleEvent, hostAria, KeyboardNavigationController, MixinViewport, requestChange, words, } from '@fusion.dev/helix-core';
 import { buildings, cloudRain, dotsNine, leaf, mountains, path, polygon, stack, target, } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -60,6 +60,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         this.movedUpLabel = 'Moved up';
         this.northLabel = 'Facing north';
         this.pitch = 0;
+        this.roleLabel = 'map';
         this.rotateLeftLabel = 'Rotate left';
         this.rotateRightLabel = 'Rotate right';
         this.satelliteLabel = 'Satellite';
@@ -340,6 +341,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
+        auditName(this, () => null, 'Give it a `label` that says what the map shows, such as "Stores in Edinburgh".', () => this.label !== '');
     }
     updated(changed) {
         super.updated(changed);
@@ -609,6 +611,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
       part="region"
       role="group"
       aria-label=${this.label || this.getAttribute('aria-label') || this.fallbackLabel}
+      aria-roledescription=${(this.label || this.getAttribute('aria-label')) && this.roleLabel ? this.roleLabel : nothing}
       aria-keyshortcuts=${this.keyShortcuts}
       tabindex="0"
       @focusin=${this.idle.stir}
@@ -705,6 +708,10 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessMap.prototype, "pitch", void 0);
+__decorate([
+    words,
+    property({ attribute: 'role-label' })
+], HelixHeadlessMap.prototype, "roleLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'rotate-left-label' })

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

@@ -25,17 +25,24 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
  * 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 plain text field, with no
- * `role="spinbutton"`, which VoiceOver reads as a slider you cannot type in,
- * and no role description, so VoiceOver says the field is required. React
- * Aria's NumberField does the same.
+ * The field and its two buttons sit in a `role="group"`, and the field carries
+ * `role-label`, "number field" in English, as its `aria-roledescription`, as
+ * React Aria's NumberField does. On iOS and iPadOS the field is a plain text
+ * field, with no `role="spinbutton"`, which VoiceOver reads as a slider you
+ * cannot type in, and no role description, so VoiceOver says the field is
+ * required. 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.
+ * it. While you type, the form holds the number the text reads as, so a field
+ * showing `$2,500.50` gives the form 2500.5, and text that is not a number
+ * gives it nothing, as a native number field does.
+ *
+ * Holding a stepper button down steps once, then again after 400 milliseconds,
+ * then every 60 milliseconds until you let go, as React Aria's NumberField does.
  *
  * **Keyboard.** The field is one tab stop, and the stepper buttons are not in
  * the tab order.
@@ -56,9 +63,11 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
  * @aliases NumberField, Stepper, InputNumber
  * @documentation https://fusion.dev/helix/components/number-input
  *
+ * @slot decrement-icon - Replaces the icon on the step down button.
  * @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 increment-icon - Replaces the icon on the step up button.
  * @slot label - The label, for content richer than the `label` text.
  * @slot start - Content before the number, such as a unit or an icon.
  *
@@ -70,7 +79,7 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
  * @csspart decrement - The button that steps the value down.
  * @csspart decrement-mark - The icon on the step down button.
  * @csspart feedback - The message that says what is wrong.
- * @csspart field - The box that holds the whole control.
+ * @csspart field - The box that holds the whole control, a `role="group"` around the field and its buttons.
  * @csspart hint - Help text under the field, shown while there is no feedback.
  * @csspart increment - The button that steps the value up.
  * @csspart increment-mark - The icon on the step up button.
@@ -175,6 +184,15 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * Prevents editing. The value is still submitted with the form.
      */
     readOnly: boolean;
+    /**
+     * The words screen readers announce for the field's role, set as its
+     * `aria-roledescription`. Translate it with the rest of your text, or empty
+     * it to leave the role as `spinbutton`.
+     *
+     * Never written on iOS and iPadOS, where a role description stops VoiceOver
+     * saying that the field is required.
+     */
+    roleLabel: string;
     /**
      * Makes the label a grip that changes the value when it is dragged.
      *
@@ -292,6 +310,26 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * having to repeat both.
      */
     stepDown(large?: boolean): void;
+    /** The timer of a held stepper button. */
+    private repeat;
+    /** Whether a pointer press stepped already, so the click that ends it does not step again. */
+    private pressStepped;
+    /**
+     * A stepper button pressed with a pointer steps at once, and again while it
+     * is held.
+     *
+     * Captured, so letting go outside the button still ends the hold. A click
+     * with no press before it, from a screen reader or a script, steps once in
+     * `handleStepperClick`.
+     */
+    private readonly handleStepperDown;
+    /**
+     * Ends a hold. The click that follows a release arrives in the same task,
+     * so the press is forgotten after it.
+     */
+    private readonly stopRepeat;
+    private readonly handleStepperClick;
+    disconnectedCallback(): void;
     /**
      * The label is the surface, which is where the convention already is.
      *
@@ -391,6 +429,17 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * what a reader pressing them meant.
      */
     private readonly handleKeydown;
+    /**
+     * What the form holds for the field: the number the text reads as.
+     *
+     * The text as written where it is already a plain number, so a value of
+     * `0.50` is sent as written. A number written in the locale or the format,
+     * `$2,500.50` or `1.234,5`, is sent as the number, 2500.5 or 1234.5, so a
+     * form read while the field still has focus gets what a submit would. Text
+     * that is not a number is sent as empty, as a native number field sends it.
+     * The text itself is the state the browser restores.
+     */
+    private submitted;
     /**
      * Reports the value and a verdict on it.
      *
@@ -433,6 +482,14 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
     private readonly handleKeypress;
     /** @internal A single line of text counts against implicit submission. */
     protected get blocksImplicitSubmission(): boolean;
+    /**
+     * The step down button's icon, as the `decrement-icon` slot's fallback, so an
+     * icon of your own replaces it by being slotted, and a tier above by
+     * overriding this.
+     */
+    protected renderDecrementIcon(): TemplateResult;
+    /** The step up button's icon, behind the same seam as `renderDecrementIcon`. */
+    protected renderIncrementIcon(): TemplateResult;
     protected render(): TemplateResult;
     /**
      * The value as a number, or `NaN` while the control is empty.