@fusion.dev/helix-headless 0.154.0 → 0.156.0

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/navigation/root/navigation-root.d.ts

@@ -36,6 +36,15 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * links and not a single control, and the keys across the other axis are
  * left to the page and to an open panel.
  *
+ * While a `Megamenu`, or another disclosure among the destinations, is open,
+ * the navigation is `:state(open)`, so a page can dim what lies under the
+ * panel, as Radix's navigation menu marks its open state.
+ *
+ * A screen reader lists the page's navigation landmarks by name, so two named
+ * alike cannot be told apart. Where another navigation in the same document
+ * has the same name, "Main" for two with no `label`, the later one warns once
+ * with the kind `duplicate-name`.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -47,6 +56,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @csspart indicator - The marker that moves to the current destination. It carries the destination's place and size as `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size`, and `data-placed` once it has been placed.
  * @csspart nav - The navigation landmark.
+ *
+ * @cssstate open - While a megamenu or another disclosure among the destinations is open.
  */
 export declare class HelixHeadlessNavigation extends HelixElement {
     /**
@@ -80,6 +91,21 @@ export declare class HelixHeadlessNavigation extends HelixElement {
      */
     orientation?: 'vertical';
     private current;
+    /** The disclosures among the destinations that are open. */
+    private readonly opened;
+    /**
+     * Hears a disclosure among the destinations open or close. In capture,
+     * because `toggle` does not bubble.
+     */
+    private readonly handleToggle;
+    /** The landmark's name as a screen reader lists it. */
+    private get landmarkName();
+    /**
+     * Warns once where another navigation in the same document has the same
+     * name, a task after the first render, so the page's other landmarks have
+     * rendered too.
+     */
+    private auditTwin;
     /**
      * The destinations the consumer slotted, and the items of a slotted list in
      * place of the list.

package/dist/navigation/root/navigation-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, customElement, focusableElements, focusItemOf, HelixElement, IndicatorController, KeyboardNavigationController, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, focusableElements, focusItemOf, HelixElement, IndicatorController, KeyboardNavigationController, reportRuntime, words, } 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"])';
@@ -23,6 +23,8 @@ const navigable = (item) => {
         },
     });
 };
+const connected = new Set();
+const warned = new WeakSet();
 let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement {
     constructor() {
         super(...arguments);
@@ -53,8 +55,56 @@ let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement
             label: true,
             target: () => this.partNamed('nav'),
         });
+        this.opened = new Set();
+        this.handleToggle = (event) => {
+            const target = event.target;
+            if (target === this || target === null) {
+                return;
+            }
+            if (event.newState === 'open') {
+                this.opened.add(target);
+            }
+            else {
+                this.opened.delete(target);
+            }
+            this.toggleState('open', this.opened.size > 0);
+        };
     }
     static { this.words = 'helix-navigation'; }
+    get landmarkName() {
+        const labeled = this.getAttribute('aria-labelledby');
+        if (labeled) {
+            const root = this.getRootNode();
+            return labeled
+                .split(/\s+/)
+                .map((id) => root.getElementById?.(id)?.textContent?.trim() ?? '')
+                .join(' ')
+                .trim();
+        }
+        return (this.getAttribute('aria-label') ?? this.label).trim();
+    }
+    auditTwin() {
+        setTimeout(() => {
+            if (!this.isConnected || warned.has(this)) {
+                return;
+            }
+            const name = this.landmarkName;
+            const root = this.getRootNode();
+            const twin = [...connected].some((other) => other !== this &&
+                other.isConnected &&
+                (other.compareDocumentPosition(this) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0 &&
+                other.getRootNode() === root &&
+                other.landmarkName === name);
+            if (twin) {
+                warned.add(this);
+                reportRuntime({
+                    kind: 'duplicate-name',
+                    message: `<${this.localName}> has the name "${name}", which another navigation on the page has too, so a screen reader lists the two alike. Give each a \`label\` that says what it holds, such as "Footer".`,
+                    tag: this.localName,
+                });
+            }
+        });
+    }
     get items() {
         const slot = this.renderRoot.querySelector('slot:not([name])');
         return (slot?.assignedElements() ?? []).flatMap((one) => isList(one) ? [...one.children] : [one]);
@@ -69,17 +119,24 @@ let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement
     }
     connectedCallback() {
         super.connectedCallback();
+        connected.add(this);
+        this.addEventListener('toggle', this.handleToggle, true);
         if (this.hasUpdated) {
             this.watch();
         }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        connected.delete(this);
+        this.removeEventListener('toggle', this.handleToggle, true);
+        this.opened.clear();
+        this.toggleState('open', false);
         this.current?.disconnect();
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.watch();
+        this.auditTwin();
     }
     render() {
         return html `<nav part="nav" aria-label=${this.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.