@fusion.dev/helix-headless 0.169.0 → 0.171.0

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. */

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

@@ -324,11 +324,17 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             this.announceChange();
         }
     }
-    stepUp(large = false) {
-        this.nudge(large ? (this.largeStep ?? 10) : 1);
+    stepUp(count = 1) {
+        this.nudge(this.stepsOf(count));
     }
-    stepDown(large = false) {
-        this.nudge(large ? -(this.largeStep ?? 10) : -1);
+    stepDown(count = 1) {
+        this.nudge(-this.stepsOf(count));
+    }
+    stepsOf(count) {
+        if (typeof count === 'boolean') {
+            return count ? (this.largeStep ?? 10) : 1;
+        }
+        return Number.isFinite(count) ? Math.trunc(count) : 1;
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -342,6 +348,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         return html `<label
       part="label"
       for=${this.controlId}
+      id=${this.labelId}
       ?data-hidden=${hidden !== null}
       @pointercancel=${this.handleScrubEnd}
       @pointerdown=${this.handleScrubDown}
@@ -455,8 +462,10 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
       <div part="field" role="group" aria-labelledby=${this.labeled ? this.labelId : nothing}>
         <button
           part="decrement"
+          id="decrement"
           type="button"
           aria-label=${this.decrementLabel}
+          aria-labelledby=${this.labeled ? `decrement ${this.labelId}` : nothing}
           tabindex="-1"
           ?disabled=${this.isDisabled || this.readOnly || atMin}
           @click=${this.handleStepperClick}
@@ -511,8 +520,10 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         <slot name="end"></slot>
         <button
           part="increment"
+          id="increment"
           type="button"
           aria-label=${this.incrementLabel}
+          aria-labelledby=${this.labeled ? `increment ${this.labelId}` : nothing}
           tabindex="-1"
           ?disabled=${this.isDisabled || this.readOnly || atMax}
           @click=${this.handleStepperClick}

package/dist/select/root/select-root.js

@@ -310,6 +310,8 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         }
         else {
             this.stopAligning();
+            this.toggleState('placed-bottom', false);
+            this.toggleState('placed-top', false);
             this.listbox?.requestFilter('');
         }
     }

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

@@ -1,4 +1,4 @@
-import { HelixElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
+import { CommandController, HelixElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import type { HelixHeadlessStep } from '../step/step.js';
 declare const HelixHeadlessSteps_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerActiveInterface) & typeof HelixElement;
@@ -14,12 +14,21 @@ declare const HelixHeadlessSteps_base: (new (...args: any[]) => import("@fusion.
  * sequence is correct in the server's markup, where the root cannot count its
  * slotted children.
  *
+ * `active` names a step by its `value`. A step with no `value` is named by its
+ * place, counted from 1, so a sequence written without values moves as one
+ * written with them, and `helix-activate` says `1`, `2` and so on. Give every
+ * step a value or none, because a value of `2` and the second place are one
+ * name.
+ *
  * `linear` keeps a reader from passing a stage they have not finished, as Ark
  * UI's linear steps do: a stage ahead is out of reach, and its button disabled,
  * until every stage before it is `complete` or `optional`. Going back is always
  * allowed. `next()` and `previous()` move one stage either way, under the
  * same rules, for your own buttons. `reset()` goes back to the first stage and
- * clears every stage's `complete`, as Ark UI's `resetStep` does.
+ * clears every stage's `complete`, as Ark UI's `resetStep` does. A button
+ * anywhere on the page calls them with no script, as Ark UI's previous and
+ * next triggers do: give it `commandfor` with the sequence's `id`, and
+ * `command="--previous"`, `"--next"` or `"--reset"`.
  *
  * `completion="passed"` marks a stage `complete` once a reader moves past it,
  * as Ark UI counts a stage before the current one as completed. Going back
@@ -46,11 +55,13 @@ declare const HelixHeadlessSteps_base: (new (...args: any[]) => import("@fusion.
  * button is described by its `complete-label`.
  *
  * **Keyboard.** Each stage's name is a button and its own tab stop, and Enter
- * or Space goes to the stage. Set `arrows` and the arrow keys move focus
- * between the names as well, as Ark UI's steps do: Left and Right along a row,
- * Up and Down a column, Home and End to the first and the last. The arrows
- * pass over a disabled stage and one a linear sequence holds out of reach,
- * and they move focus without going to the stage.
+ * or Space goes to the stage. Set `arrows` and the names are one tab stop, the
+ * current stage's, and the arrow keys move focus between them: Left and Right
+ * along a row, Up and Down a column, Home and End to the first and the last.
+ * The stop follows focus, so Tab leaves the sequence and Shift+Tab comes back
+ * to the name the reader left. The arrows pass over a disabled stage and one a
+ * linear sequence holds out of reach, and they move focus without going to the
+ * stage.
  *
  * @since 0.1.0
  * @status stable
@@ -78,7 +89,8 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
     static words: string;
     /**
      * Whether the arrow keys move focus between the stages' names, along the
-     * way the steps run. Off by default, so the arrows keep scrolling the page.
+     * way the steps run, and the names are one tab stop. Off by default, so the
+     * arrows keep scrolling the page.
      */
     arrows: boolean;
     /**
@@ -148,6 +160,7 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
      */
     variant?: 'numeric';
     protected readonly keys: KeyboardNavigationController;
+    protected readonly commands: CommandController;
     /** The steps, in the order the consumer wrote them. */
     private get steps();
     /**
@@ -158,6 +171,8 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
      * calls to `next()` in one task then move two stages.
      */
     private get at();
+    /** The step `active` names, by `value` or by place, or the first enabled one. */
+    private named;
     /**
      * Requests a new current stage, and returns whether it moved.
      *
@@ -207,6 +222,15 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
      */
     private sync;
     private readonly handleSelection;
+    /** The step whose name holds the sequence's one tab stop under `arrows`, once focus has chosen it. */
+    private holder;
+    /**
+     * Gives the one tab stop to a name, under `arrows`: the one focus last left,
+     * else the current stage's, else the first a reader can go to. Without
+     * `arrows` every name is its own stop. Client only.
+     */
+    private rove;
+    private readonly handleFocus;
     private readonly handleSlotChange;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/steps/root/steps-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, HelixElement, hostAria, KeyboardNavigationController, MixinControllerActive, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { CommandController, customElement, focusItemOf, formatWords, HelixElement, hostAria, KeyboardNavigationController, MixinControllerActive, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { canReach, progressOf } from '../reach.js';
@@ -19,6 +19,7 @@ const navigable = (step) => {
         },
     });
 };
+const keyOf = (step, index) => step.value || String(index + 1);
 let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(HelixElement) {
     constructor() {
         super(...arguments);
@@ -33,6 +34,13 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
             selects: () => false,
             wrap: false,
         });
+        this.commands = new CommandController(this, {
+            commands: {
+                '--next': () => this.next(),
+                '--previous': () => this.previous(),
+                '--reset': () => this.reset(),
+            },
+        });
         this.handleSelection = (event) => {
             if (!this.steps.includes(event.target)) {
                 return;
@@ -42,12 +50,27 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
                 if (event.defaultPrevented || !this.reachable(index) || !this.valid(index)) {
                     return;
                 }
-                this.requestActive(event.detail.value);
+                this.requestActive(keyOf(this.steps[index], index));
             });
         };
+        this.handleFocus = (event) => {
+            if (!this.arrows) {
+                return;
+            }
+            const path = event.composedPath();
+            const step = this.steps.find((one) => {
+                const name = one.shadowRoot?.querySelector('[part="label"]');
+                return name ? path.includes(name) : false;
+            });
+            if (step && step !== this.holder) {
+                this.holder = step;
+                this.rove();
+            }
+        };
         this.handleSlotChange = () => {
             this.sync();
             this.lock();
+            this.rove();
         };
     }
     static { this.words = 'helix-steps'; }
@@ -62,11 +85,20 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
         if (this.active === '') {
             return steps.findIndex((step) => step.current);
         }
-        const item = this.resolveActive(steps);
+        const item = this.named(steps);
         return item ? steps.indexOf(item) : -1;
     }
+    named(steps) {
+        const keyed = steps.map((step, index) => ({
+            disabled: step.disabled,
+            step,
+            value: keyOf(step, index),
+        }));
+        return this.resolveActive(keyed)?.step;
+    }
     requestActive(next, cause) {
-        const here = this.active === '' ? this.steps[this.at]?.value : undefined;
+        const at = this.active === '' ? this.at : -1;
+        const here = at === -1 ? undefined : keyOf(this.steps[at], at);
         if (here) {
             this.active = here;
         }
@@ -80,8 +112,8 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
     }
     reset() {
         const steps = this.steps;
-        const first = steps.find((one) => !one.disabled);
-        if (!first || !this.requestActive(first.value)) {
+        const first = steps.findIndex((one) => !one.disabled);
+        if (first === -1 || !this.requestActive(keyOf(steps[first], first))) {
             return false;
         }
         for (const one of steps) {
@@ -100,7 +132,7 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
         if (!target || !this.reachable(index) || !this.valid(index)) {
             return false;
         }
-        return this.requestActive(target.value);
+        return this.requestActive(keyOf(target, index));
     }
     valid(index) {
         const from = this.steps[this.at];
@@ -128,8 +160,8 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
             return;
         }
         const steps = this.steps;
-        const value = this.resolveActive(steps)?.value ?? '';
-        const reached = steps.findIndex((step) => step.value === value);
+        const named = this.named(steps);
+        const reached = named ? steps.indexOf(named) : -1;
         steps.forEach((step, index) => {
             const current = index === reached;
             const passed = this.completion === 'passed' && index < reached;
@@ -141,11 +173,30 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
             });
         });
     }
+    rove() {
+        const steps = this.steps;
+        const open = steps.filter((step, index) => !step.disabled && this.reachable(index));
+        const current = steps[this.at];
+        const holder = !this.arrows
+            ? undefined
+            : this.holder && open.includes(this.holder)
+                ? this.holder
+                : current && open.includes(current)
+                    ? current
+                    : open[0];
+        for (const step of steps) {
+            whenHydrated(step, () => {
+                step.stop = !this.arrows || step === holder;
+            });
+        }
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelection);
+        this.addEventListener('focusin', this.handleFocus);
         this.watcher = new MutationObserver(() => {
             this.lock();
+            this.rove();
             this.requestUpdate();
         });
         this.watcher.observe(this, {
@@ -157,6 +208,7 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.handleSelection);
+        this.removeEventListener('focusin', this.handleFocus);
         this.watcher?.disconnect();
         this.watcher = undefined;
     }
@@ -181,6 +233,15 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
         if (changed.has('linear') || changed.has('active') || changed.has('completion')) {
             this.lock();
         }
+        if (changed.has('active')) {
+            this.holder = undefined;
+        }
+        if (changed.has('arrows') ||
+            changed.has('linear') ||
+            changed.has('active') ||
+            changed.has('completion')) {
+            this.rove();
+        }
     }
     render() {
         const progress = progressOf(this.known);

package/dist/steps/step/step.d.ts

@@ -106,7 +106,15 @@ export declare class HelixHeadlessStep extends HelixElement {
      */
     optional: boolean;
     /**
-     * The value the step sends in `helix-select`.
+     * @internal Set by a sequence with `arrows`: whether the name holds the
+     * sequence's one tab stop. A property, because the sequence writes it after
+     * the step upgrades.
+     */
+    stop: boolean;
+    /**
+     * The value the step sends in `helix-select`, and what names the step in its
+     * sequence's `active`. Without one, the sequence names the step by its place,
+     * counted from 1.
      */
     value: string;
     /** Whether anything is slotted into `content`, which makes it a named group. */