@fusion.dev/helix-headless 0.170.0 → 0.171.0

package/dist/combobox/root/combobox-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, afterLinkFollowed, countLabel, customElement, DelayController, drawAutofill, drawStatus, formatWords, HelixCreateEvent, HelixFilterEvent, HelixFormElement, handedLocale, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, onApple, PopoverController, reportValues, StatusController, submitImplicitly, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, chosenValues, countLabel, customElement, DelayController, drawAutofill, drawStatus, formatWords, HelixCreateEvent, HelixFilterEvent, HelixFormElement, handedLocale, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, onApple, PopoverController, reportValues, StatusController, submitImplicitly, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -69,6 +69,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             placement: 'bottom-start',
             surface: () => this.partNamed('surface'),
         });
+        this.created = new Set();
         this.handleInput = (event) => {
             event.stopPropagation();
             const typed = event.target.value;
@@ -252,7 +253,11 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         return this.partNamed('listbox');
     }
     get values() {
-        return this.value === '' ? [] : this.value.split(',');
+        const known = new Set(this.created);
+        for (const option of optionsAmong(this.knownChildren)) {
+            known.add(option.value);
+        }
+        return chosenValues(this.value, known, this.multiple);
     }
     get chosen() {
         const options = optionsAmong(this.knownChildren);
@@ -296,6 +301,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             return;
         }
         const next = this.multiple ? [...this.values, wanted].join(',') : wanted;
+        this.created.add(wanted);
         if (!this.requestValue(next)) {
             return;
         }
@@ -343,6 +349,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         }
         const named = (this.listbox?.options ?? []).find((option) => option.text.trim().toLowerCase() === typed.toLowerCase());
         const answer = named?.value ?? typed;
+        this.created.add(answer);
         if (this.multiple) {
             if (!this.values.includes(answer)) {
                 this.requestValue([...this.values, answer].join(','));

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

@@ -55,7 +55,8 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
  * | `hotkey`, Command or Control with K by default | Opens the palette from anywhere on the page, or closes it. With `inline`, puts focus in its filter field. |
  * | Down, Up | Moves the highlight to the next or the previous command, round from the last to the first. |
  * | Page Down, Page Up | Moves the highlight by as many commands as the list shows at once. |
- * | Home, End, Left, Right | Move the caret in the filter field. |
+ * | Home, End | Move the caret in the filter field. With `home-end="list"`, move the highlight to the first or the last command. |
+ * | Left, Right | Move the caret in the filter field. |
  * | Enter | Runs the highlighted command, or follows it where it is a link, and closes the palette. On a command with `opens`, shows its page. |
  * | Command or Control with Enter | Takes the highlighted command's `alternate` destination, where it has one. |
  * | Backspace | In an empty filter on a page, goes back to the page before. |
@@ -144,6 +145,14 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      * property only, there being no way to write a function in markup.
      */
     filterMatch?: ((text: string, filter: string) => boolean) | undefined;
+    /**
+     * Where Home and End go from the filter field.
+     *
+     * Absent, they move the caret, as APG's combobox has them. `list` moves the
+     * highlight to the first or the last command, as React Aria's Autocomplete
+     * does, and Shift with either still selects the text.
+     */
+    homeEnd?: 'list';
     /**
      * The key that opens the palette, written as `mod+k`, `shift+p`, or `k`,
      * in Kbd's chord spelling: `mod` is Command or Control, `ctrl`, `cmd`,
@@ -178,6 +187,12 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      * Accessible name for the overlay, which has no visible heading.
      */
     label: string;
+    /**
+     * How the commands are laid out, as Listbox's `layout`: `grid` draws them in
+     * rows and columns, for a palette of icons or emoji, and the arrow keys
+     * follow the rows and the columns. Absent is one command under another.
+     */
+    layout?: 'grid' | 'stack';
     /**
      * What the list says when its commands could not be loaded, such as after a
      * request to a server fails. Empty, null or no attribute is no error, so

package/dist/command/root/command-root.js

@@ -246,6 +246,8 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         results-label=${this.resultsLabel}
         ?loading=${this.loading}
         .items=${this.items}
+        .fieldHomeEnd=${this.homeEnd === 'list'}
+        layout=${this.layout ?? nothing}
         filterable
         @helix-before-change=${this.handleChange}
         @helix-filter=${this.handleFilter}
@@ -299,6 +301,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessCommand.prototype, "filterMatch", void 0);
+__decorate([
+    property({ attribute: 'home-end' })
+], HelixHeadlessCommand.prototype, "homeEnd", void 0);
 __decorate([
     property()
 ], HelixHeadlessCommand.prototype, "hotkey", void 0);
@@ -312,6 +317,9 @@ __decorate([
     words,
     property()
 ], HelixHeadlessCommand.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessCommand.prototype, "layout", void 0);
 __decorate([
     property({ attribute: 'load-error' })
 ], HelixHeadlessCommand.prototype, "loadError", void 0);

package/dist/filter-input/chip/filter-chip.d.ts

@@ -28,9 +28,10 @@ declare const HelixHeadlessFilterChip_base: (new (...args: any[]) => import("@fu
  * press. `requestChange` documents the pattern.
  *
  * **Keyboard.** The remove button is a tab stop of its own, and Enter or Space
- * on it asks to remove the filter. In a `FilterInput`, Backspace in the empty
- * field asks to remove the last chip, the arrow keys move between the field
- * and the chips, and Delete or Backspace on a chip asks to remove it.
+ * on it asks to remove the filter. In a `FilterInput`, the field's text is the
+ * one tab stop: Backspace in the empty field asks to remove the last chip, the
+ * arrow keys move between the field and the chips, and Delete or Backspace on
+ * a chip asks to remove it.
  *
  * The remove button is named `dismiss-label` followed by the chip's words,
  * such as "Remove filter Status is not open", so a row of chips says which
@@ -78,6 +79,15 @@ export declare class HelixHeadlessFilterChip extends HelixHeadlessFilterChip_bas
      * closing a message.
      */
     dismissLabel: string;
+    /**
+     * Whether the remove button is a tab stop of its own.
+     *
+     * `FilterInput` writes `false` on the chips in its `tags` slot: the field's
+     * text is its one tab stop, and the arrow keys move from the text to the
+     * chips, as in a `multiple` Combobox. No attribute: it is coordination
+     * between elements, as `Tag.dismissTabStop` is.
+     */
+    dismissTabStop: boolean;
     /**
      * The name of the field the filter is on, as shown on the chip.
      *

package/dist/filter-input/chip/filter-chip.js

@@ -13,6 +13,7 @@ let HelixHeadlessFilterChip = class HelixHeadlessFilterChip extends MixinDismiss
     constructor() {
         super(...arguments);
         this.dismissLabel = 'Remove filter';
+        this.dismissTabStop = true;
         this.label = '';
         this.operatorLabel = '';
     }
@@ -43,6 +44,7 @@ let HelixHeadlessFilterChip = class HelixHeadlessFilterChip extends MixinDismiss
               part="dismiss"
               type="button"
               aria-label=${this.removeName}
+              tabindex=${this.dismissTabStop ? nothing : '-1'}
               @click=${() => this.dismiss()}
             >
               <svg part="dismiss-mark" fill="currentColor" viewBox=${x.viewBox} aria-hidden="true">
@@ -56,6 +58,9 @@ __decorate([
     words,
     property({ attribute: 'dismiss-label' })
 ], HelixHeadlessFilterChip.prototype, "dismissLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessFilterChip.prototype, "dismissTabStop", void 0);
 __decorate([
     property()
 ], HelixHeadlessFilterChip.prototype, "label", void 0);

package/dist/filter-input/menu/filter-menu.js

@@ -180,7 +180,6 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
                   part="divider"
                   exportparts="content: divider-content, line: divider-line"
                   slot="submenu"
-                  announced
                 ></${divider}>`
                 : nothing}
           ${offered.map((option) => html `<${item}

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

@@ -33,8 +33,9 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  * first colon, reads a leading `-` as the negation, and reads a word in
  * brackets before the colon as the comparison.
  *
- * **Keyboard.** Focus stays in the text. The text names the highlighted
- * suggestion as its `aria-activedescendant`.
+ * **Keyboard.** Focus stays in the text, which is the field's one tab stop. The
+ * text names the highlighted suggestion as its `aria-activedescendant`, and the
+ * arrow keys reach the tokens.
  *
  * | Key | What it does |
  * |---|---|
@@ -92,7 +93,8 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  *   and removing the chip alone would leave its value ticked in the hidden
  *   menu. Its dismissal is treated as the field being filtered by nothing, so
  *   it fires `helix-facet` like every other change, and the chip goes when the
- *   filter goes.
+ *   filter goes. Set `chips` and the field adds, updates, and removes those
+ *   chips itself, from every `helix-facet` you do not cancel.
  *
  * @since 0.1.0
  * @status stable
@@ -105,6 +107,8 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  * @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 label - The label, for content richer than the `label` text.
+ * @slot loading - What the panel shows while `loading` is set, for content richer than `loading-text`.
+ * @slot no-results - What the panel shows when `filter-suggestions` hides every suggestion, for content richer than `no-results-text`.
  * @slot start - Content before the text, such as a search icon.
  * @slot suggestions - Suggestions for what to type next, as `Option`s and `Option.Group`s.
  * @slot tags - The active filters, as `FilterChip`s or `Tag`s.
@@ -121,17 +125,21 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  *
  * @csspart clear - The button that empties the field.
  * @csspart control - The input itself.
+ * @csspart empty - Shown in the panel when `filter-suggestions` hides every suggestion.
  * @csspart feedback - The error message under the field.
  * @csspart field - The box that holds everything.
  * @csspart hint - The help text under the field, shown while there is no error.
  * @csspart label - The label above the field.
  * @csspart lead - The box before the text that holds the `start` slot.
  * @csspart live - The live region that says how many suggestions the open panel offers. It is rendered from the first time the panel opens with suggestions.
+ * @csspart loading - Shown in the panel while the suggestions load.
  * @csspart rest - The count of tokens that did not fit. It is a `<button>` with `expandable` and a `<span>` without it.
  * @csspart surface - The floating panel the suggestions sit in.
  * @csspart tags - The row the tokens sit in.
  *
  * @cssstate invalid - The field has an error to show, from the browser's validation or from your `feedback`.
+ * @cssstate loading - While `loading` is set.
+ * @cssstate no-results - `filter-suggestions` hid every suggestion, and `no-results-text` or the `no-results` slot says so.
  * @cssstate open - The suggestions are open.
  */
 export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_base {
@@ -143,6 +151,20 @@ export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_b
     protected readonly aria: AriaForwardController;
     /** Typed, so every keystroke is announced. See `announcesInput`. */
     protected readonly announcesInput = true;
+    /**
+     * Whether the field keeps a `FilterChip` for each filter in its `tags` slot,
+     * from the `helix-facet` events it hears.
+     *
+     * Off, you build the chips, which is what you do when your own model holds
+     * the filters. On, a filter typed, picked, or changed adds or updates the
+     * chip for its field, one with no values takes it away (unless its
+     * comparison takes none, such as "is empty"), and removing the chip clears
+     * the filter. A `helix-facet` you cancel changes no chip.
+     *
+     * The chips are elements the field adds to its own children, so leave this
+     * off where a framework renders those children and would remove them.
+     */
+    chips: boolean;
     /**
      * Shows a button that empties the field.
      *
@@ -163,6 +185,27 @@ export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_b
      * what you slot and you narrow it.
      */
     filterSuggestions: boolean;
+    /**
+     * Whether the suggestions are still loading, such as while a request for the
+     * values of a typed key is out.
+     *
+     * The panel opens on `loading-text`, or the `loading` slot, while the field
+     * has focus, and a screen reader hears it. Slot the options and clear this
+     * when they arrive.
+     */
+    loading: boolean;
+    /**
+     * Text the panel shows while the suggestions load.
+     */
+    loadingText: string;
+    /**
+     * Text the panel shows when `filter-suggestions` hides every suggestion, such
+     * as "No matching filters".
+     *
+     * Empty, or no `no-results` slot, and the panel closes instead, as it does
+     * when it has nothing to offer.
+     */
+    noResultsText: string;
     /**
      * The text shown while the field is empty.
      *
@@ -341,6 +384,16 @@ export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_b
      * else could have said it.
      */
     private announceFacet;
+    /**
+     * Keeps the chip for a filter in step with it, under `chips`.
+     *
+     * After every listener has had its turn, so a consumer's `preventDefault()`
+     * on the same event, on this element or above it, is read: `dispatchEvent`
+     * runs them all before the microtask does.
+     */
+    private readonly handleFacet;
+    /** Adds, updates or removes the chip for one filter. See `chips`. */
+    private drawChip;
     /**
      * A chip asking to go, answered as the filter going.
      *
@@ -413,6 +466,12 @@ export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_b
      * is why `settleOpen` is not called from here.
      */
     private refreshSuggesting;
+    /**
+     * Whether `filter-suggestions` has hidden every suggestion there is, where a
+     * `no-results-text` or a `no-results` slot says so. The panel stays open on
+     * it, and `:state(no-results)` is on the host.
+     */
+    private get unmatched();
     /** The panel again, whenever what is in it changes. */
     private readonly handleSuggestions;
     /** Focus arriving in the field is a reader asking what they can type. */
@@ -426,7 +485,15 @@ export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_b
     private readonly handleFocusOut;
     /** The leading box again, whenever what is in front of the text changes. */
     private readonly handleLeading;
-    /** The row again, whenever what is in it changes. */
+    /**
+     * The row again, whenever what is in it changes.
+     *
+     * **And the text is the field's one tab stop.** Each token's remove button
+     * was a stop of its own, so Tab through a field with five filters took six
+     * presses. A `Tag` or `FilterChip` takes `dismissTabStop` for this, as the
+     * tags of a `multiple` Combobox do, and the arrow keys still reach every one.
+     * A token not yet defined is told once it is.
+     */
     private readonly handleTokens;
     /** The tokens slotted in `tags`, which the arrow keys reach from the text. */
     protected tokenElements(): HTMLElement[];

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

@@ -21,9 +21,13 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
             target: () => this.partNamed('control'),
         });
         this.announcesInput = true;
+        this.chips = false;
         this.clearable = false;
         this.clearLabel = 'Clear';
         this.filterSuggestions = false;
+        this.loading = false;
+        this.loadingText = 'Loading';
+        this.noResultsText = '';
         this.placeholder = '';
         this.suggestionsLabel = '{count, plural, one {# suggestion} other {# suggestions}}';
         this.status = new StatusController(this);
@@ -59,6 +63,17 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
             event.stopPropagation();
             this.announceChange();
         };
+        this.handleFacet = (event) => {
+            if (!this.chips) {
+                return;
+            }
+            const facet = event.detail;
+            queueMicrotask(() => {
+                if (!event.defaultPrevented) {
+                    this.drawChip(facet);
+                }
+            });
+        };
         this.handleDismiss = (event) => {
             const chip = event.composedPath()[0];
             if (!(chip instanceof HTMLElement) || chip.slot !== 'tags') {
@@ -161,6 +176,20 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         };
         this.handleTokens = () => {
             this.over = this.hideOverflow(this.tokens);
+            for (const token of this.tokenElements()) {
+                const quiet = () => {
+                    if ('dismissTabStop' in token) {
+                        ;
+                        token.dismissTabStop = false;
+                    }
+                };
+                if (token.localName.includes('-') && !customElements.get(token.localName)) {
+                    void customElements.whenDefined(token.localName).then(quiet);
+                }
+                else {
+                    quiet();
+                }
+            }
         };
     }
     static { this.words = 'helix-filter-input'; }
@@ -181,14 +210,22 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         }
     }
     sayCount() {
-        const count = this.open && this.suggesting ? this.suggestions.length : -1;
+        const count = this.open && this.suggesting ? (this.loading ? -2 : this.suggestions.length) : -1;
         if (count === this.saidCount) {
             return;
         }
         this.saidCount = count;
+        if (count === -2) {
+            this.status.sayNow(this.loadingText);
+            return;
+        }
         if (count < 0) {
             return;
         }
+        if (count === 0 && this.noResultsText !== '') {
+            this.status.sayNow(this.noResultsText);
+            return;
+        }
         this.status.sayNow(this.suggestionLabel
             ? countLabel(count, this.suggestionLabel, this.suggestionsLabel, wordsLocale(this))
             : formatWords(this, 'suggestionsLabel', { count }));
@@ -259,6 +296,25 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
             ? menu.apply(facet.field, facet.values, facet.operator)
             : this.dispatchEvent(new HelixFacetEvent(facet));
     }
+    drawChip(facet) {
+        const tag = `${this.constructor.tier}filter-chip`;
+        const held = [...this.children].find((child) => child.localName === tag && child.getAttribute('name') === facet.field);
+        if (facet.values.length === 0 && facet.arity !== 'none') {
+            held?.remove();
+            return;
+        }
+        const chip = held ?? document.createElement(tag);
+        chip.slot = 'tags';
+        chip.dismissible = true;
+        chip.label = facet.label;
+        chip.setAttribute('name', facet.field);
+        chip.operator = facet.operator;
+        chip.operatorLabel = facet.operatorLabel;
+        chip.textContent = facet.values.join(', ');
+        if (!held) {
+            this.append(chip);
+        }
+    }
     readFilters() {
         const fields = this.fields;
         if (fields.length === 0) {
@@ -310,9 +366,13 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
     refreshSuggesting() {
         this.narrow();
         const options = this.suggestions;
-        this.suggesting = options.length > 0;
+        this.suggesting = options.length > 0 || this.loading || this.unmatched;
         this.activeAt = this.activeAt < options.length ? this.activeAt : -1;
     }
+    get unmatched() {
+        const said = this.noResultsText !== '' || this.knownChildren.some((child) => child.slot === 'no-results');
+        return said && !this.loading && this.options.length > 0 && this.suggestions.length === 0;
+    }
     tokenElements() {
         return (this.tokens?.assignedElements({ flatten: true }) ?? []);
     }
@@ -328,10 +388,12 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-dismiss', this.handleDismiss);
+        this.addEventListener(HelixFacetEvent.eventName, this.handleFacet);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-dismiss', this.handleDismiss);
+        this.removeEventListener(HelixFacetEvent.eventName, this.handleFacet);
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -348,6 +410,8 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         }
         this.handleTokens();
         this.refreshSuggesting();
+        this.toggleState('loading', this.loading);
+        this.toggleState('no-results', this.unmatched);
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -443,11 +507,22 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
       ?hidden=${!this.open}
     >
       <slot name="suggestions" @slotchange=${this.handleSuggestions}></slot>
+      <!-- Hidden from the tree, which a listbox keeps for its options: the
+           live region says these. -->
+      <div part="loading" aria-hidden="true" ?hidden=${!this.loading}>
+        <slot name="loading">${this.loadingText}</slot>
+      </div>
+      <div part="empty" aria-hidden="true" ?hidden=${!this.unmatched}>
+        <slot name="no-results">${this.noResultsText}</slot>
+      </div>
     </div>
     ${drawStatus(this.status)}
     ${this.renderHint()}${this.renderFeedback()}`;
     }
 };
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessFilterInput.prototype, "chips", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessFilterInput.prototype, "clearable", void 0);
@@ -458,6 +533,16 @@ __decorate([
 __decorate([
     property({ attribute: 'filter-suggestions', type: Boolean })
 ], HelixHeadlessFilterInput.prototype, "filterSuggestions", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessFilterInput.prototype, "loading", void 0);
+__decorate([
+    words,
+    property({ attribute: 'loading-text' })
+], HelixHeadlessFilterInput.prototype, "loadingText", void 0);
+__decorate([
+    property({ attribute: 'no-results-text' })
+], HelixHeadlessFilterInput.prototype, "noResultsText", void 0);
 __decorate([
     property()
 ], HelixHeadlessFilterInput.prototype, "placeholder", void 0);

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

@@ -15,7 +15,9 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * **`relative` shows the same reading in words**, such as "3 hours ago" at
  * `long`, "3 hr. ago" at `short` and "3h ago" at `narrow`, the styles
  * `sl-relative-time` offers. `numeric="always"` says "1 day ago" where the
- * default says "yesterday".
+ * default says "yesterday". Both readings round the count, as
+ * `sl-relative-time` does: 100 seconds ago is "2 minutes ago", and 59.6
+ * minutes is "1 hour".
  *
  * **`date-style` and `time-style` take each locale's own pattern**, such as
  * "Tuesday, August 4, 2026" at `full`, and stand in for the separate fields,

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

@@ -209,6 +209,12 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
     /** Where the selection starts, as an offset into the value. */
     get selectionStart(): number;
     set selectionStart(at: number);
+    /**
+     * Replaces a range of the text, as the native method does: the selection
+     * where `start` and `end` are left out, and `selectMode` says what is
+     * selected after. It sends no event, as the native method sends none.
+     */
+    setRangeText(replacement: string, start?: number, end?: number, selectMode?: SelectionMode): void;
     /**
      * Selects the range from `start` to `end` in one call, which setting
      * `selectionStart` and `selectionEnd` one at a time cannot always do.

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

@@ -97,6 +97,19 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
             control.selectionStart = at;
         }
     }
+    setRangeText(replacement, start, end, selectMode) {
+        const control = this.control;
+        if (!control) {
+            return;
+        }
+        if (start === undefined || end === undefined) {
+            control.setRangeText(replacement);
+        }
+        else {
+            control.setRangeText(replacement, start, end, selectMode);
+        }
+        this.value = control.value;
+    }
     setSelectionRange(start, end, direction) {
         this.control?.setSelectionRange(start, end, direction);
     }

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

@@ -154,6 +154,12 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     emptyText: string;
     /** What the list is narrowed to, whoever set it. */
     private filterState;
+    /**
+     * @internal Set by `Command` under `home-end="list"`: whether Home and End
+     * in the filter field move the highlight, without Shift, rather than the
+     * caret. A property, as coordination between elements.
+     */
+    fieldHomeEnd: boolean;
     /**
      * The text the list is filtered by, if any.
      *

package/dist/listbox/root/listbox-root.js

@@ -23,6 +23,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.defaultFilter = '';
         this.emptyText = 'No matches';
         this.filterState = undefined;
+        this.fieldHomeEnd = false;
         this.filterable = false;
         this.filterDelay = 0;
         this.filterLabel = 'Filter';
@@ -127,7 +128,8 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
                 (event.key === 'Home' || event.key === 'End');
             const grid = this.layout === 'grid' && !this.data.records;
             const along = grid && !typing ? inlineStep(this, event.key) : 0;
-            if (!fieldRange && !along && !(typing ? FIELD_MOVES : MOVES).has(event.key)) {
+            const fieldMoves = this.fieldHomeEnd && !event.shiftKey ? MOVES : FIELD_MOVES;
+            if (!fieldRange && !along && !(typing ? fieldMoves : MOVES).has(event.key)) {
                 return;
             }
             event.preventDefault();
@@ -673,6 +675,9 @@ __decorate([
     words,
     property({ attribute: 'empty-text' })
 ], HelixHeadlessListbox.prototype, "emptyText", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessListbox.prototype, "fieldHomeEnd", void 0);
 __decorate([
     property()
 ], HelixHeadlessListbox.prototype, "filter", null);

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

@@ -124,7 +124,9 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      */
     badInputMessage: string;
     /**
-     * The name of the step down button, read by screen readers.
+     * The name of the step down button, read by screen readers. The field's
+     * label follows it, so a reader hears "Decrease Quantity", as React Aria
+     * names its steppers.
      */
     decrementLabel: string;
     /**
@@ -138,7 +140,9 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      */
     formatOptions?: Intl.NumberFormatOptions;
     /**
-     * The name of the step up button, read by screen readers.
+     * The name of the step up button, read by screen readers. The field's
+     * label follows it, so a reader hears "Increase Quantity", as React Aria
+     * names its steppers.
      */
     incrementLabel: string;
     /**
@@ -321,16 +325,22 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * refused step, or one pinned at a bound, finished nothing.
      */
     private land;
-    /** Steps the value up, by `largeStep` steps when `large` is set. */
-    stepUp(large?: boolean): void;
     /**
-     * Steps the value down, by `largeStep` steps when `large` is set.
+     * Steps the value up by `step`, `count` times, as the native method and
+     * `Input.stepUp` do. `true` takes `largeStep` steps, as `PageUp` does.
+     */
+    stepUp(count?: number | boolean): void;
+    /**
+     * Steps the value down by `step`, `count` times. `true` takes `largeStep`
+     * steps, as `PageDown` does.
      *
      * The same path a press of the down arrow takes, so a consumer driving this
      * from their own control gets the clamping and the announcement rather than
      * having to repeat both.
      */
-    stepDown(large?: boolean): void;
+    stepDown(count?: number | boolean): void;
+    /** How many steps a `stepUp` argument asks for: a count, or `largeStep` for `true`. */
+    private stepsOf;
     /** 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. */