@fusion.dev/helix-headless 0.163.0 → 0.165.0

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

@@ -26,6 +26,7 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * | Key | What it does |
  * |---|---|
  * | Down, Up | On a closed field, opens the list on the chosen option, or the first or the last. In the open list, moves the highlight, round from the last option to the first. |
+ * | Alt with Down, Alt with Up | Opens the list without moving the highlight, and closes it, choosing nothing. |
  * | Page Down, Page Up | In the open list, moves the highlight by as many options as the list shows at once. |
  * | Enter | Chooses the highlighted option. With nothing left in the list, creates what was typed with `creatable`, or takes it with `allows-custom-value`. On a closed field, submits the form. |
  * | Escape | Closes the list and puts the chosen words back. On a closed field, a second Escape clears a single choice. |

package/dist/combobox/root/combobox-root.js

@@ -154,7 +154,11 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                 return;
             }
             if (!this.open) {
-                if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                if (event.key === 'ArrowDown' && event.altKey) {
+                    event.preventDefault();
+                    this.requestOpen(true);
+                }
+                else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
                     event.preventDefault();
                     const fallback = event.key === 'ArrowDown' ? 'first' : 'last';
                     this.opening = this.values.length > 0 ? 'selected' : fallback;
@@ -162,6 +166,11 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                 }
                 return;
             }
+            if (event.key === 'ArrowUp' && event.altKey) {
+                event.preventDefault();
+                this.close();
+                return;
+            }
             if (this.moveAroundCreate(event)) {
                 void this.updateComplete.then(() => this.linkActive());
                 return;

package/dist/data-table/root/data-table-root.d.ts

@@ -215,6 +215,7 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  *
  * @cssstate empty - While there are no rows to show and none are loading.
  * @cssstate error - While `error-text` is set.
+ * @cssstate loading - While `loading` is set, as the rows are on their way.
  */
 export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base {
     /**

package/dist/data-table/root/data-table-root.js

@@ -984,6 +984,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.markEmpty();
         this.toggleState('error', this.errorText !== '');
         this.toggleState('empty', !this.loading && !this.hasRows);
+        this.toggleState('loading', this.loading);
         this.assign();
         this.announceSort();
         this.quietControls();

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

@@ -1,7 +1,7 @@
 import { AriaForwardController, type DateCalendar, HelixFormElement, type MonthCalendar, type MonthSystem } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../date-picker/index.js';
-import '../../tag/index.js';
+import '../../tag/root/index.js';
 declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSegmentedFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerEditingInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A date, typed or picked from a calendar.
@@ -474,8 +474,8 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
     /**
      * Each date, where `mode` holds several, sent one entry each.
      *
-     * One date that is text and no date, such as `August 5`, is sent as an empty
-     * entry, as a native date field sends a date it cannot read.
+     * Text that is no date, such as `August 5`, is sent as one empty entry, as
+     * a native date field sends a date it cannot read, in every mode.
      */
     protected get answers(): readonly string[] | undefined;
     /** What is wrong with the dates, which the text input cannot say. */

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

@@ -11,7 +11,7 @@ import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
 import '../../date-picker/index.js';
-import '../../tag/index.js';
+import '../../tag/root/index.js';
 const dates = (value) => value
     .replace(/\s+[–-]\s+/g, ',')
     .split(',')
@@ -70,9 +70,11 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         };
         this.handleTextCommit = (event) => {
             if (this.mode !== 'multiple') {
-                const held = this.mode === 'range' && /\s[–-]\s/.test(this.value)
-                    ? this.value.split(/\s+[–-]\s+/).map((one) => one.trim())
-                    : dates(this.value);
+                const held = this.mode !== 'range'
+                    ? [this.value.trim()].filter(Boolean)
+                    : /\s[–-]\s/.test(this.value)
+                        ? this.value.split(/\s+[–-]\s+/).map((one) => one.trim())
+                        : dates(this.value);
                 const read = held.map((one) => this.read(one));
                 if (held.length > 0 && !held.every(isDateValue) && read.every(Boolean)) {
                     this.requestValue(read.join(','));
@@ -220,7 +222,8 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
     }
     get answers() {
         if (this.mode !== undefined) {
-            return dates(this.value);
+            const held = dates(this.value);
+            return held.every(isDateValue) ? held : [''];
         }
         const text = this.value.trim();
         return text === '' || isDateValue(text) ? undefined : [''];

package/dist/element-events.generated.js

@@ -335,7 +335,13 @@ registerElementEvents({
         'volumechange',
         'waiting',
     ],
-    'helix-headless-video-playlist': ['helix-activate', 'helix-before-activate', 'helix-end'],
+    'helix-headless-video-playlist': [
+        'helix-activate',
+        'helix-before-activate',
+        'helix-before-reorder',
+        'helix-end',
+        'helix-reorder',
+    ],
     'helix-headless-video-playlist-item': ['helix-select'],
     'helix-headless-video-playlist-menu': ['helix-select'],
     'helix-headless-virtual-list': [

package/dist/format-date/root/format-date-root.d.ts

@@ -200,7 +200,9 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
      * `narrow` ("3h ago").
      *
      * The reading refreshes as it goes stale, as `elapsed` does, and the whole
-     * date is its title. `elapsed` wins where both are set.
+     * date is its title. `elapsed` wins where both are set. Written with no
+     * value, as `elapsed` is, or with a style `Intl` does not know, it reads
+     * `long`.
      */
     relative?: 'long' | 'narrow' | 'short';
     /**

package/dist/format-date/root/format-date-root.js

@@ -10,6 +10,7 @@ import { property } from 'lit/decorators.js';
 import { drawFields } from '../fields.js';
 import { formatOptions } from '../options.js';
 const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
+const STYLES = ['long', 'narrow', 'short'];
 let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement {
     constructor() {
         super(...arguments);
@@ -53,7 +54,9 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
             ? elapsedTime(this.language)(moment, now)
             : relativeTime(this.language, {
                 numeric: this.numeric ?? 'auto',
-                style: this.relative ?? 'long',
+                style: STYLES.includes(this.relative)
+                    ? this.relative
+                    : 'long',
             })(moment, now);
     }
     connectedCallback() {

package/dist/lightbox/item/lightbox-item.js

@@ -47,7 +47,9 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessLightboxItem.prototype, "current", void 0);
 __decorate([
-    property()
+    property({
+        converter: { fromAttribute: (value) => value ?? '' },
+    })
 ], HelixHeadlessLightboxItem.prototype, "label", void 0);
 __decorate([
     property({ attribute: false })

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

@@ -258,6 +258,32 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      * which is the first time anything asked it for its items on a server.
      */
     private get items();
+    /**
+     * The set changed: render it again.
+     *
+     * `items` is read on each render and nothing else marks a render as due when
+     * an item arrives or leaves, so an item appended after the first render had
+     * no role description, no place in the set, and no part in the count until
+     * some unrelated property changed.
+     */
+    private readonly handleSlotChange;
+    /**
+     * Watches each item's `label` and `value`, which no slot reports.
+     *
+     * `value` decides which item `active` names, and `label` fills `{label}` in
+     * `status-label` and `slide-label`. A change to either left the old item
+     * shown, or the old words in the counter, until some unrelated property
+     * changed. `Select` watches its options for the same reason.
+     *
+     * The subtree, since an observer on the host sees no attribute on its
+     * children otherwise. Only changes on the items themselves count: a `<progress
+     * value>` inside an item, updated while a video plays, would otherwise render
+     * the viewer again on each update.
+     *
+     * Made on connection, there being no `MutationObserver` on a server.
+     */
+    private itemWatch;
+    connectedCallback(): void;
     /** The native dialog, or nothing where there is no DOM to hold one. */
     private get dialog();
     /** Opens the viewer, which makes the rest of the page inert. */
@@ -322,6 +348,8 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     private zoomOut;
     /** Home and End, which are an index rather than a step. */
     private toEnd;
+    /** The item shown at the last update, whose zoom a different item does not keep. */
+    private zoomedItem;
     /** The item on screen: the one `active` names, or the first where it names none. */
     private get shown();
     /**

package/dist/lightbox/root/lightbox-root.js

@@ -92,6 +92,10 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
                 '--toggle': () => this.toggleOpen(),
             },
         });
+        this.handleSlotChange = () => {
+            this.requestUpdate();
+        };
+        this.itemWatch = undefined;
         this.handleCancel = (event) => {
             event.preventDefault();
             this.requestOpen(false);
@@ -129,6 +133,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
                 this.toEnd(this.items.length - 1);
             }
         };
+        this.zoomedItem = undefined;
         this.handleBackdrop = (event) => {
             if (this.dragged(event) || !this.onEmptyArea(event)) {
                 return;
@@ -177,6 +182,16 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
     get items() {
         return this.knownChildren.filter((child) => child instanceof HelixHeadlessLightboxItem);
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.itemWatch = new MutationObserver((records) => {
+            if (records.some((record) => record.target instanceof HelixHeadlessLightboxItem &&
+                record.target.parentElement === this)) {
+                this.requestUpdate();
+            }
+        });
+        this.itemWatch.observe(this, { attributeFilter: ['label', 'value'], subtree: true });
+    }
     get dialog() {
         return this.renderRoot?.querySelector('dialog') ?? null;
     }
@@ -292,16 +307,20 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         this.toggleState('fullscreen', this.filled);
         this.toggleState('idle', this.resting);
         this.toggleState('zoomable', this.maxZoom > 1);
-        if (changed.has('active') || (changed.has('open') && !this.open)) {
+        const shown = this.shown;
+        if (shown !== this.zoomedItem || (changed.has('open') && !this.open)) {
             this.quietZoom = true;
             this.zoomer.reset();
             this.quietZoom = false;
         }
+        this.zoomedItem = shown;
         this.say(changed);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         unlockScroll(this);
+        this.itemWatch?.disconnect();
+        this.itemWatch = undefined;
     }
     updated(changed) {
         super.updated(changed);
@@ -395,7 +414,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
     >
       <slot name="header" part="header"></slot>
       <div part="viewport">
-        <slot></slot>
+        <slot @slotchange=${this.handleSlotChange}></slot>
       </div>
       <slot name="footer" part="footer"></slot>
       ${this.controls ? this.renderControls() : nothing}

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,

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -99,6 +99,8 @@ export type ObjectInspectorRenderer = (value: unknown, entry: ObjectInspectorEnt
  * @aliases JSON viewer, Object viewer, Inspector, Data explorer
  * @documentation https://fusion.dev/helix/components/object-inspector
  *
+ * @slot empty - Shown in the tree while it has no entries to show. Defaults to `empty-label`, or `no-matches-label` while a filter matched none.
+ *
  * @event {HelixActivateEvent} helix-activate - The active row moved, by a key or a click. The detail's `value` is its path.
  * @event {HelixBeforeActivateEvent} helix-before-activate - The active row is about to move, with its new path. Cancelable: cancel it to keep the row where it is.
  * @event {HelixBeforeCloseEvent} helix-before-close - A reader is about to close the active branch. Cancelable: cancel it to keep the branch open.
@@ -128,6 +130,7 @@ export type ObjectInspectorRenderer = (value: unknown, entry: ObjectInspectorEnt
  * @csspart copy-tooltip-right - The tooltip while it is right of the copy button. Set alongside `copy-tooltip`.
  * @csspart copy-tooltip-top - The tooltip while it is above the copy button. Set alongside `copy-tooltip`.
  * @csspart count - The number of entries a branch holds.
+ * @csspart empty - The row shown in the tree while it has no entries to show: no value, or a filter that matched none. It holds the `empty` slot.
  * @csspart frame - The tree and the copy button beside it.
  * @csspart header - The bar that holds the label, when there is one.
  * @csspart key - A property name or an array index.
@@ -146,6 +149,10 @@ export type ObjectInspectorRenderer = (value: unknown, entry: ObjectInspectorEnt
  * @csspart value - What `renderValue` drew for an entry, in place of its own drawing.
  *
  * @cssproperty --object-inspector-level - How deep a row is, from 0 at the root, for indenting it.
+ *
+ * @cssstate empty - While the tree has no entries to show: no value, or a filter that matched none.
+ * @cssstate filtered - While `filter` holds text.
+ * @cssstate matched - While `filter` holds text and matched at least one entry.
  */
 export declare class HelixHeadlessObjectInspector extends HelixElement {
     /**
@@ -183,6 +190,11 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
      * wall of text this exists to avoid.
      */
     defaultDepth: number;
+    /**
+     * What the tree says while there is no value to show, such as before a
+     * fetch answers. The `empty` slot replaces it.
+     */
+    emptyLabel: string;
     /**
      * The open branches, by path, in no set order.
      *
@@ -254,6 +266,11 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
      * reach a value.
      */
     noCopy: boolean;
+    /**
+     * What the tree says while a filter matched no entry. The `empty` slot
+     * replaces it.
+     */
+    noMatchesLabel: string;
     /**
      * Draws an entry's value your way, given the value and its entry. Set it as
      * a property.
@@ -358,6 +375,12 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     private seed;
     /** Opens the branches around each path, where the value has them. */
     private openAround;
+    /**
+     * Whether the tree has no entries to show. Not while a value named by `for`
+     * is still to be read, as on a server and while hydrating what one sent,
+     * where it says nothing yet about the value.
+     */
+    private get blank();
     protected willUpdate(changed: PropertyValues): void;
     /**
      * A count in its plural message, `items-label`, `keys-label` or

package/dist/object-inspector/root/object-inspector-root.js

@@ -32,6 +32,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         this.copyLabel = 'Copy {name}';
         this.copyValueLabel = 'Copy value';
         this.defaultDepth = 1;
+        this.emptyLabel = 'Nothing to show';
         this.filter = '';
         this.filterable = false;
         this.filterLabel = 'Filter';
@@ -40,6 +41,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         this.keysLabel = '{count, plural, one {# key} other {# keys}}';
         this.label = '';
         this.noCopy = false;
+        this.noMatchesLabel = 'No matches';
         this.resultsLabel = '{count, plural, one {# result} other {# results}}';
         this.treeLabel = 'Value';
         this.value = undefined;
@@ -213,6 +215,9 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
     openAround(paths) {
         this.opened = withAncestors(this.opened, this.branches, paths);
     }
+    get blank() {
+        return this.rows.length === 0 && (this.for === '' || this.loadedFor === this.for);
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         this.hadFocus = this.hasFocusedRow();
@@ -248,6 +253,9 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         if (changed.has('filter') && this.hasUpdated) {
             this.tell();
         }
+        this.toggleState('empty', this.blank);
+        this.toggleState('filtered', this.found !== undefined);
+        this.toggleState('matched', (this.found?.size ?? 0) > 0);
     }
     counted(which, count) {
         const one = this[`${which}Label`];
@@ -526,7 +534,9 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
           @scroll=${() => this.virtualize.measure()}
         >
           ${this.windowed ? html `<div part="before" role="presentation" style="block-size: ${before}px"></div>` : nothing}
-          ${repeat(shown, ([row]) => row.path, ([row, at]) => this.renderRow(row, at))}
+          ${repeat(shown, ([row]) => row.path, ([row, at]) => this.renderRow(row, at))}${this.blank
+            ? html `<div part="empty" role="row"><div role="gridcell"><slot name="empty">${this.found ? this.noMatchesLabel : this.emptyLabel}</slot></div></div>`
+            : nothing}
           ${this.windowed ? html `<div part="after" role="presentation" style="block-size: ${after}px"></div>` : nothing}
         </div>
         ${this.noCopy ? nothing : this.renderCopyButton(rows[this.cursor])}
@@ -548,6 +558,10 @@ __decorate([
 __decorate([
     property({ attribute: 'default-depth', type: Number })
 ], HelixHeadlessObjectInspector.prototype, "defaultDepth", void 0);
+__decorate([
+    words,
+    property({ attribute: 'empty-label' })
+], HelixHeadlessObjectInspector.prototype, "emptyLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessObjectInspector.prototype, "expanded", null);
@@ -584,6 +598,10 @@ __decorate([
 __decorate([
     property({ attribute: 'no-copy', type: Boolean })
 ], HelixHeadlessObjectInspector.prototype, "noCopy", void 0);
+__decorate([
+    words,
+    property({ attribute: 'no-matches-label' })
+], HelixHeadlessObjectInspector.prototype, "noMatchesLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessObjectInspector.prototype, "renderValue", void 0);