@fusion.dev/helix-headless 0.154.0 → 0.155.0

package/dist/speed-dial/item/speed-dial-item.js

@@ -12,7 +12,11 @@ let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixE
     constructor() {
         super(...arguments);
         this.disabled = false;
+        this.download = false;
+        this.href = '';
+        this.rel = '';
         this.shortcut = '';
+        this.target = '';
         this.value = '';
         this.isSpeedDialItem = true;
         this.hasShortcut = false;
@@ -22,6 +26,16 @@ let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixE
         this.handleClick = () => {
             this.choose();
         };
+        this.handleKeydown = (event) => {
+            if (event.key !== ' ') {
+                return;
+            }
+            const link = this.renderRoot.querySelector('a[part="item"]');
+            if (link) {
+                event.preventDefault();
+                link.click();
+            }
+        };
     }
     focus(options) {
         this.partNamed('item')?.focus(options);
@@ -55,6 +69,27 @@ let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixE
     }
     render() {
         const keys = this.shortcut === '' ? nothing : ariaChord(this.shortcut, !this.hydrating && onApple());
+        const inside = html `<span part="icon"><slot name="icon"></slot></span>
+      <span part="label"><slot></slot><span
+          part="shortcut"
+          aria-hidden="true"
+          ?hidden=${!this.hasShortcut && this.shortcut === ''}
+        >${this.renderShortcut()}</span
+      ></span>`;
+        if (this.href !== '' && !this.disabled) {
+            return html `<a
+        part="item"
+        href=${this.href}
+        target=${this.target || nothing}
+        rel=${this.rel || nothing}
+        ?download=${this.download}
+        role="menuitem"
+        aria-keyshortcuts=${keys}
+        tabindex="-1"
+        @click=${this.handleClick}
+        @keydown=${this.handleKeydown}
+      >${inside}</a>`;
+        }
         return html `<button
       part="item"
       role="menuitem"
@@ -65,13 +100,7 @@ let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixE
       tabindex="-1"
       @click=${this.handleClick}
     >
-      <span part="icon"><slot name="icon"></slot></span>
-      <span part="label"><slot></slot><span
-          part="shortcut"
-          aria-hidden="true"
-          ?hidden=${!this.hasShortcut && this.shortcut === ''}
-        >${this.renderShortcut()}</span
-      ></span>
+      ${inside}
     </button>`;
     }
     renderShortcut() {
@@ -89,9 +118,21 @@ let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixE
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessSpeedDialItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessSpeedDialItem.prototype, "download", void 0);
+__decorate([
+    property()
+], HelixHeadlessSpeedDialItem.prototype, "href", void 0);
+__decorate([
+    property()
+], HelixHeadlessSpeedDialItem.prototype, "rel", void 0);
 __decorate([
     property()
 ], HelixHeadlessSpeedDialItem.prototype, "shortcut", void 0);
+__decorate([
+    property()
+], HelixHeadlessSpeedDialItem.prototype, "target", void 0);
 __decorate([
     property()
 ], HelixHeadlessSpeedDialItem.prototype, "value", void 0);

package/dist/speed-dial/root/speed-dial-root.d.ts

@@ -25,8 +25,9 @@ declare const HelixHeadlessSpeedDial_base: (new (...args: any[]) => import("@fus
  * action whose name starts with it. The actions are one tab stop, and Tab
  * closes the dial and moves on.
  *
- * **Keyboard.** On the trigger, Enter, Space or a press opens the dial on its
- * first action. With the dial open:
+ * **Keyboard.** On the trigger, Enter, Space, Down or a press opens the dial
+ * on its first action, and Up opens it on its last, as an APG menu button
+ * does. With the dial open:
  *
  * | Key | What it does |
  * |---|---|
@@ -50,6 +51,13 @@ declare const HelixHeadlessSpeedDial_base: (new (...args: any[]) => import("@fus
  * and a slotted one alike. A press that has opened the dial does not also do
  * the trigger's action.
  *
+ * **Open on hover.** With `open-on="hover"`, a mouse resting on the trigger
+ * opens the dial, as Material's speed dial does, and the dial closes a moment
+ * after the mouse leaves both the trigger and the actions. A press, a touch
+ * and the keyboard open it as under `click`, and a press on the trigger of a
+ * dial already open moves focus to its first action, so the press a mouse
+ * makes after hovering keeps the dial open.
+ *
  * @since 0.1.0
  * @status stable
  * @category actions
@@ -57,6 +65,7 @@ declare const HelixHeadlessSpeedDial_base: (new (...args: any[]) => import("@fus
  * @documentation https://fusion.dev/helix/components/speed-dial
  *
  * @slot - The actions.
+ * @slot icon - Replaces the plus on the button the dial draws when no trigger is slotted, such as with a pencil for a dial of ways to write.
  * @slot trigger - The control that opens the actions. Without one, a button named by `label` is drawn.
  *
  * @event {HelixBeforeCloseEvent} helix-before-close - The actions are about to close. Cancelable: cancel it to keep them open.
@@ -94,11 +103,13 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
      */
     offset: number;
     /**
-     * What opens the dial. `click` opens it on a press of the trigger. Under
-     * `long-press`, a press is the trigger's own action, and the dial opens on a
-     * press held for half a second, or on Alt+Down or Alt+Up.
+     * What opens the dial. `click` opens it on a press of the trigger. `hover`
+     * also opens it while a mouse rests on the trigger, and closes it once the
+     * mouse has left. Under `long-press`, a press is the trigger's own action,
+     * and the dial opens on a press held for half a second, or on Alt+Down or
+     * Alt+Up.
      */
-    openOn: 'click' | 'long-press';
+    openOn: 'click' | 'hover' | 'long-press';
     /**
      * The direction the actions open in. They move to another side if that side
      * does not fit.
@@ -117,6 +128,10 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
      * wherever the reader is typing.
      */
     private focusOnOpen;
+    /** Whether the open under way puts focus on the last action, from Up. */
+    private focusLast;
+    /** The close a mouse leaving a hover dial has asked for, a moment from now. */
+    private leaving;
     protected readonly panel: PopoverController;
     /** Whatever the consumer slotted, or the button rendered in its place. */
     private get trigger();
@@ -128,6 +143,17 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
     /** Watches the trigger for a held press, under `open-on="long-press"`. */
     private readonly longPress;
     private get pressHeld();
+    /** Opens on a mouse coming over the trigger, under `open-on="hover"`. */
+    private readonly handleTriggerPointerOver;
+    /** Keeps a hover dial open while the mouse is back over it. */
+    private readonly handlePointerEnter;
+    /**
+     * Closes a hover dial a moment after the mouse leaves it, so a mouse
+     * crossing the gap between the trigger and the actions keeps it open.
+     * Focus inside the dial keeps it open too, as a reader is using it.
+     */
+    private readonly handlePointerLeave;
+    private stay;
     /**
      * Puts focus on the trigger, the slotted one or the button drawn in its
      * place, as a `focus()` on a native control would. The host itself takes no

package/dist/speed-dial/root/speed-dial-root.js

@@ -31,6 +31,7 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
             typeahead: typeaheadByWords(),
         });
         this.focusOnOpen = false;
+        this.focusLast = false;
         this.panel = new PopoverController(this, {
             anchor: () => this.trigger,
             boundary: () => this,
@@ -47,7 +48,35 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
                 }
             },
         });
+        this.handleTriggerPointerOver = (event) => {
+            if (this.openOn !== 'hover' || event.pointerType !== 'mouse') {
+                return;
+            }
+            this.stay();
+            if (!this.open) {
+                this.requestOpen(true);
+            }
+        };
+        this.handlePointerEnter = () => {
+            this.stay();
+        };
+        this.handlePointerLeave = (event) => {
+            if (this.openOn !== 'hover' || event.pointerType !== 'mouse' || !this.open) {
+                return;
+            }
+            this.stay();
+            this.leaving = setTimeout(() => {
+                this.leaving = undefined;
+                if (this.open && !this.matches(':focus-within')) {
+                    this.requestOpen(false);
+                }
+            }, 300);
+        };
         this.handleTriggerClick = () => {
+            if (this.open && this.openOn === 'hover') {
+                this.items.find((one) => !one.disabled)?.focusItem();
+                return;
+            }
             if (this.open) {
                 this.requestOpen(false);
                 return;
@@ -91,11 +120,11 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         };
         this.handleKeydown = (event) => {
             if (!this.open) {
-                if (this.pressHeld &&
-                    event.altKey &&
-                    (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+                const arrow = event.key === 'ArrowDown' || event.key === 'ArrowUp';
+                if (arrow && (this.pressHeld ? event.altKey : !event.altKey)) {
                     event.preventDefault();
                     this.focusOnOpen = this.requestOpen(true);
+                    this.focusLast = this.focusOnOpen && event.key === 'ArrowUp';
                 }
                 return;
             }
@@ -132,6 +161,10 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
     get pressHeld() {
         return this.openOn === 'long-press';
     }
+    stay() {
+        clearTimeout(this.leaving);
+        this.leaving = undefined;
+    }
     focus(options) {
         const trigger = this.trigger;
         if (trigger === this) {
@@ -151,6 +184,8 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         this.addEventListener('helix-select', this.handleSelect);
         this.addEventListener('keydown', this.handleKeydown);
         this.addEventListener('click', this.handleHeldClick, true);
+        this.addEventListener('pointerenter', this.handlePointerEnter);
+        this.addEventListener('pointerleave', this.handlePointerLeave);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -162,6 +197,9 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         this.removeEventListener('helix-select', this.handleSelect);
         this.removeEventListener('keydown', this.handleKeydown);
         this.removeEventListener('click', this.handleHeldClick, true);
+        this.removeEventListener('pointerenter', this.handlePointerEnter);
+        this.removeEventListener('pointerleave', this.handlePointerLeave);
+        this.stay();
     }
     announce() {
         const trigger = this.trigger;
@@ -191,11 +229,17 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         super.updated?.(changed);
         this.announce();
         this.describeTrigger();
+        if (!this.open) {
+            this.stay();
+        }
         if (this.open && this.focusOnOpen) {
             this.focusOnOpen = false;
+            const last = this.focusLast;
+            this.focusLast = false;
             this.updateComplete.then(() => {
                 if (this.open) {
-                    this.items.find((one) => !one.disabled)?.focusItem();
+                    const usable = this.items.filter((one) => !one.disabled);
+                    (last ? usable.at(-1) : usable[0])?.focusItem();
                 }
             });
         }
@@ -209,6 +253,7 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
       @focusin=${this.handleTriggerFocusIn}
       @pointercancel=${this.handleTriggerPointerCancel}
       @pointerdown=${this.handleTriggerPointerDown}
+      @pointerover=${this.handleTriggerPointerOver}
       @pointermove=${this.handleTriggerPointerMove}
       @pointerup=${this.handleTriggerPointerUp}
       @slotchange=${() => this.describeTrigger()}
@@ -222,7 +267,7 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         aria-label=${this.label}
       >
         ${''}
-        ${drawIcon(plus)}
+        <slot name="icon">${drawIcon(plus)}</slot>
       </button>
       ${held ? html `<span id="long-press" hidden>${this.longPressLabel}</span>` : nothing}
     </slot>`;

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

@@ -35,6 +35,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * takes all of the change, as Web Awesome's split panel does. Without it,
  * both panes keep their share.
  *
+ * **Three or more panes along one axis are splitters nested on that axis**, a
+ * splitter in the `end` pane of another for three columns. The nested one
+ * keeps the pane on its far side the size it was while the outer divider
+ * moves, so a divider resizes only the two panes beside it, as Zag's splitter
+ * does with any number of panels. Where the whole row is resized, every pane
+ * keeps its share, unless `primary` says otherwise.
+ *
  * **Keyboard.** The divider is one tab stop.
  *
  * | Key | What it does |
@@ -213,6 +220,21 @@ export declare class HelixHeadlessSplitter extends HelixElement {
     primary?: 'end' | 'start';
     /** Watches this element's length along its axis while `primary` is set. */
     private lengths;
+    /**
+     * The splitter this one is nested in on the same axis, and the pane of it
+     * this one is in, for a row of three or more panes.
+     */
+    private chain;
+    /** The length of the splitter this one is chained to, last seen. */
+    private chainLength;
+    /**
+     * The pane that keeps its pixels as this splitter's length changes:
+     * `primary`, or the far pane of one chained into another, whose divider
+     * would otherwise drag this one's along with it.
+     */
+    private get held();
+    /** The chained splitter's length along the shared axis, in pixels. */
+    private measureChain;
     /** The length along the axis last seen, in pixels. */
     private length;
     /**

package/dist/splitter/root/splitter-root.js

@@ -70,8 +70,15 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         this.reached = undefined;
         this.requestUpdate('position', previous);
     }
+    get held() {
+        return this.primary ?? this.chain?.side;
+    }
+    measureChain() {
+        const box = this.chain?.by.getBoundingClientRect();
+        return box ? (this.vertical ? box.height : box.width) : 0;
+    }
     watchLength() {
-        if (!this.primary || typeof ResizeObserver === 'undefined') {
+        if (!this.held || typeof ResizeObserver === 'undefined') {
             this.lengths?.disconnect();
             this.lengths = undefined;
             this.length = 0;
@@ -92,17 +99,26 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
     holdPrimary(length) {
         const before = this.length;
         this.length = length;
-        if (!this.primary || before <= 0 || length <= 0 || length === before) {
+        const held = this.held;
+        if (!this.primary && this.chain) {
+            const outer = this.measureChain();
+            const outerBefore = this.chainLength;
+            this.chainLength = outer;
+            if (outer !== outerBefore) {
+                return;
+            }
+        }
+        if (!held || before <= 0 || length <= 0 || length === before) {
             return;
         }
         if (this.collapsed || this.dragging) {
             return;
         }
         const position = this.position;
-        const kept = ((this.primary === 'start' ? position : 100 - position) / 100) * before;
+        const kept = ((held === 'start' ? position : 100 - position) / 100) * before;
         const share = (kept / length) * 100;
         const previous = position;
-        this.positionState = this.clamp(this.primary === 'start' ? share : 100 - share);
+        this.positionState = this.clamp(held === 'start' ? share : 100 - share);
         this.requestUpdate('position', previous);
     }
     get showing() {
@@ -261,6 +277,8 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         });
         this.max = 100;
         this.min = 0;
+        this.chain = null;
+        this.chainLength = 0;
         this.length = 0;
         this.handlePaneKeys = (event) => {
             if (event.key !== 'F6' ||
@@ -484,7 +502,17 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
     }
     findOuter() {
         const outer = closestInstance(this.parentElement, HelixHeadlessSplitter_1);
-        if (!outer || outer === this || outer.vertical === this.vertical) {
+        this.chain = null;
+        if (outer && outer !== this && outer.vertical === this.vertical) {
+            let node = this;
+            while (node.parentElement && node.parentElement !== outer) {
+                node = node.parentElement;
+            }
+            this.chain = { by: outer, side: node.slot === 'start' ? 'start' : 'end' };
+            this.chainLength = this.measureChain();
+            return;
+        }
+        if (!outer || outer === this) {
             return;
         }
         this.outer = outer;
@@ -499,8 +527,8 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         super.connectedCallback();
         if (this.hasUpdated) {
             this.watchWidth();
-            this.watchLength();
             this.findOuter();
+            this.watchLength();
         }
         this.addEventListener('keydown', this.handlePaneKeys);
     }
@@ -512,6 +540,7 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         this.lengths?.disconnect();
         this.lengths = undefined;
         this.length = 0;
+        this.chain = null;
         if (this.outer) {
             channel.get(this.outer)?.uncross(this);
         }
@@ -521,8 +550,8 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.watchWidth();
-        this.watchLength();
         this.findOuter();
+        this.watchLength();
         this.finishHydration();
     }
     updated(changed) {

package/dist/steps/reach.d.ts

@@ -11,8 +11,12 @@ export interface ReachableStep {
  * Back is always allowed, as Ark UI's linear steps allow it. Forward is allowed
  * only where every stage from the one the reader is on up to the target is
  * complete or optional, so no stage is passed unfinished.
+ *
+ * `passing` is a sequence whose stages are complete once a reader moves past
+ * them, so the stage the reader is on counts as finished and the next one is
+ * in reach.
  */
-export declare const canReach: (steps: readonly ReachableStep[], from: number, to: number) => boolean;
+export declare const canReach: (steps: readonly ReachableStep[], from: number, to: number, passing?: boolean) => boolean;
 /**
  * How far through a sequence is, from 0 to 100: the share of its stages that
  * are complete, rounded to a whole number. An empty sequence is at 0.

package/dist/steps/reach.js

@@ -1,8 +1,8 @@
-export const canReach = (steps, from, to) => {
+export const canReach = (steps, from, to, passing = false) => {
     if (to <= from) {
         return true;
     }
-    for (let at = Math.max(from, 0); at < to; at += 1) {
+    for (let at = Math.max(passing ? from + 1 : from, 0); at < to; at += 1) {
         const step = steps[at];
         if (step && !step.complete && !step.optional) {
             return false;

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { 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;
@@ -18,7 +18,13 @@ declare const HelixHeadlessSteps_base: (new (...args: any[]) => import("@fusion.
  * 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.
+ * 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.
+ *
+ * `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
+ * leaves it complete. In a `linear` sequence the next stage is then in reach
+ * from the current one, and `validate` decides whether the reader may go.
  *
  * To check a stage before a reader moves on from it, set `validate` to a
  * function that answers whether the stage is valid, as Ark UI's `isStepValid`
@@ -39,6 +45,13 @@ declare const HelixHeadlessSteps_base: (new (...args: any[]) => import("@fusion.
  * current stage's button says `aria-current="step"`, and a finished stage's
  * 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.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -63,6 +76,20 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
      * `registerWords('de', { 'helix-steps': { progressLabel: '{share, number, percent} erledigt' } })`.
      */
     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.
+     */
+    arrows: boolean;
+    /**
+     * What marks a stage `complete`.
+     *
+     * Absent, you do: each step's `complete` is yours, because a reader who
+     * steps back has finished more stages than the one they are on. `passed`
+     * marks every stage before the one a reader moves to, and leaves the marks
+     * when they go back.
+     */
+    completion?: 'passed';
     /**
      * The sequence's name, read by screen readers.
      *
@@ -120,6 +147,7 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
      * a reader is told to come back to by number.
      */
     variant?: 'numeric';
+    protected readonly keys: KeyboardNavigationController;
     /** The steps, in the order the consumer wrote them. */
     private get steps();
     /** The index of the stage the reader is on, or `-1`. */
@@ -132,6 +160,13 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
     next(): boolean;
     /** Moves to the stage before, as Ark UI's `goToPrevStep` does. Returns whether it moved. */
     previous(): boolean;
+    /**
+     * Goes back to the first stage that can be gone to, and clears `complete`
+     * and the invalid mark from every stage, as Ark UI's `resetStep` does.
+     * Returns whether it moved: a listener can refuse the move with
+     * `helix-before-activate`, and the stages then keep their marks.
+     */
+    reset(): boolean;
     /** Moves `delta` stages, skipping disabled ones. */
     private step;
     /**

package/dist/steps/root/steps-root.js

@@ -4,16 +4,35 @@ 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, formatWords, HelixElement, hostAria, MixinControllerActive, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { 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';
+const navigable = (step) => {
+    const label = () => step.shadowRoot?.querySelector('[part="label"]');
+    return focusItemOf(step, {
+        disabled: step.disabled || step.locked,
+        focus: () => step.focus(),
+        owns: (node) => {
+            const control = label();
+            return Boolean(control && node && (node === control || control.contains(node)));
+        },
+    });
+};
 let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(HelixElement) {
     constructor() {
         super(...arguments);
+        this.arrows = false;
         this.label = 'Steps';
         this.linear = false;
         this.progressLabel = '{share, number, percent} complete';
+        this.keys = new KeyboardNavigationController(this, {
+            items: () => (this.arrows ? this.steps.map(navigable) : []),
+            origin: 'focus',
+            reserved: () => this.orientation === 'vertical' ? ['ArrowLeft', 'ArrowRight'] : ['ArrowDown', 'ArrowUp'],
+            selects: () => false,
+            wrap: false,
+        });
         this.handleSelection = (event) => {
             if (event.defaultPrevented || !this.steps.includes(event.target)) {
                 return;
@@ -45,6 +64,18 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
     previous() {
         return this.step(-1);
     }
+    reset() {
+        const steps = this.steps;
+        const first = steps.find((one) => !one.disabled);
+        if (!first || !this.requestActive(first.value)) {
+            return false;
+        }
+        for (const one of steps) {
+            one.complete = false;
+            one.invalid = false;
+        }
+        return true;
+    }
     step(delta) {
         const steps = this.steps;
         let index = this.at + delta;
@@ -67,7 +98,7 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
         return valid;
     }
     reachable(index) {
-        return !this.linear || canReach(this.steps, this.at, index);
+        return !this.linear || canReach(this.steps, this.at, index, this.completion === 'passed');
     }
     lock() {
         const steps = this.steps;
@@ -84,12 +115,17 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
         }
         const steps = this.steps;
         const value = this.resolveActive(steps)?.value ?? '';
-        for (const step of steps) {
-            const current = step.value === value;
+        const reached = steps.findIndex((step) => step.value === value);
+        steps.forEach((step, index) => {
+            const current = index === reached;
+            const passed = this.completion === 'passed' && index < reached;
             whenHydrated(step, () => {
                 step.current = current;
+                if (passed) {
+                    step.complete = true;
+                }
             });
-        }
+        });
     }
     connectedCallback() {
         super.connectedCallback();
@@ -125,10 +161,10 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
     }
     updated(changed) {
         super.updated(changed);
-        if (changed.has('active')) {
+        if (changed.has('active') || changed.has('completion')) {
             this.sync();
         }
-        if (changed.has('linear') || changed.has('active')) {
+        if (changed.has('linear') || changed.has('active') || changed.has('completion')) {
             this.lock();
         }
     }
@@ -148,6 +184,12 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
       ></div>`;
     }
 };
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessSteps.prototype, "arrows", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessSteps.prototype, "completion", void 0);
 __decorate([
     words,
     property()

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

@@ -53,6 +53,7 @@ import '../../button/index.js';
  * @csspart state - The words that describe a finished stage's button. Hidden.
  *
  * @cssstate invalid - The sequence's `validate` last answered that this stage is not valid.
+ * @cssstate locked - A `linear` sequence holds this stage out of reach until the stages before it are finished.
  */
 export declare class HelixHeadlessStep extends HelixElement {
     /**
@@ -106,6 +107,11 @@ export declare class HelixHeadlessStep extends HelixElement {
     value: string;
     /** Says a stage was finished, from the first time one is. */
     private readonly status;
+    /**
+     * Puts focus on the step's name, the control a reader presses, as a
+     * `focus()` on a native control would.
+     */
+    focus(options?: FocusOptions): void;
     /**
      * Fires `helix-select` for the step, unless the step is `disabled` or a
      * linear sequence has it out of reach.