@fusion.dev/helix-headless 0.153.0 → 0.155.0

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/stat/group/stat-group.d.ts

@@ -4,9 +4,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @summary A row of related measurements.
  *
  * @description
- * Screen readers announce the stats as a group. The figures are read together
- * and their order has no meaning, so the group does not announce positions such
- * as "1 of 4".
+ * **A named group is a group**, so a screen reader announces the stats
+ * together under its name, such as "Usage, group". Name it with `label`,
+ * `aria-label` or `aria-labelledby`. An unnamed one has no role, since a group
+ * with no name only adds "group" to what a reader says, as an unnamed Card
+ * has none. The figures are read together and their order has no meaning, so
+ * the group does not announce positions such as "1 of 4".
  *
  * @since 0.1.0
  * @status stable
@@ -17,9 +20,25 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  */
 export declare class HelixHeadlessStatGroup extends HelixElement {
     /**
-     * Accessible name for the group.
+     * Accessible name for the group, which makes it a group.
+     *
+     * Absent leaves the stats with no group around them, unless `aria-label` or
+     * `aria-labelledby` names it.
      */
     label: string;
+    /**
+     * Hears a name written on the element, which no property mirrors.
+     *
+     * Lit observes the attributes of its own properties only, and `ariaLabel`
+     * and `ariaLabelledByElements` belong to the platform.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Called by the browser when an observed attribute changes. A name written
+     * or taken off asks for an update, because it decides whether the stats are
+     * a group.
+     */
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
     protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }

package/dist/stat/group/stat-group.js

@@ -12,9 +12,21 @@ let HelixHeadlessStatGroup = class HelixHeadlessStatGroup extends HelixElement {
         super(...arguments);
         this.label = '';
     }
+    static get observedAttributes() {
+        return [...super.observedAttributes, 'aria-label', 'aria-labelledby'];
+    }
+    attributeChangedCallback(name, old, value) {
+        super.attributeChangedCallback(name, old, value);
+        if (name === 'aria-label' || name === 'aria-labelledby') {
+            this.requestUpdate();
+        }
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
-        hostAria(this.internals, { label: this.label, role: 'group' });
+        const named = this.label.trim() !== '' ||
+            Boolean(this.getAttribute?.('aria-label')?.trim()) ||
+            Boolean(this.getAttribute?.('aria-labelledby')?.trim());
+        hostAria(this.internals, { label: this.label, role: named ? 'group' : '' });
     }
     render() {
         return html `<slot></slot>`;

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

@@ -19,6 +19,19 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * attribute; a stat with no label has no role. Put a `Trend` in the `trend`
  * slot to have it read inside the group, after the figure it qualifies.
  *
+ * **Or give the figure as a number.** `value` is written with
+ * `Intl.NumberFormat`, in `locale` and with `format-options`, so
+ * `value="1234567" format-options='{"notation":"compact"}'` shows `1.2M`, and
+ * a server writes it as the browser does. A number in `value` takes the place
+ * of a slotted figure.
+ *
+ * **Each slot is a part of the same name**, and `value` for the figure, so a
+ * page reaches the label, the unit and the trend from outside. A slot draws no
+ * box, so a part passes inherited properties to what is slotted. **The stat
+ * says which pieces it holds**, as `:state(has-label)`, `:state(has-unit)` and
+ * `:state(has-trend)`, read in the browser, so a served stat carries none
+ * until the script runs.
+ *
  * @since 0.1.0
  * @status stable
  * @category data
@@ -30,7 +43,14 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot trend - How the value moved, usually a `Trend`, read after the value inside the stat's group.
  * @slot unit - The unit, shown beside the value.
  *
- * @csspart value - The slot the value is written in. A slot draws no box, so it takes the inherited properties, such as color and font, and passes them to the value.
+ * @csspart label - The slot the label arrives through, drawing no box, as `value` does.
+ * @csspart trend - The slot the trend arrives through, drawing no box, as `value` does.
+ * @csspart unit - The slot the unit arrives through, drawing no box, as `value` does.
+ * @csspart value - The slot the value is written in, or the figure `value` writes. A slot draws no box, so it takes the inherited properties, such as color and font, and passes them to the value.
+ *
+ * @cssstate has-label - Something is slotted into `label`.
+ * @cssstate has-trend - Something is slotted into `trend`.
+ * @cssstate has-unit - Something is slotted into `unit`.
  */
 export declare class HelixHeadlessStat extends HelixElement {
     /**
@@ -61,9 +81,34 @@ export declare class HelixHeadlessStat extends HelixElement {
      * carries nothing nobody wrote.
      */
     direction?: 'column-reverse' | 'row' | 'row-reverse';
+    /**
+     * `Intl.NumberFormat` options `value` is written with, such as
+     * `{"notation":"compact"}` for `1.2M` or `{"style":"percent"}` for `98%`,
+     * written as JSON in the attribute.
+     *
+     * Absent writes the number as the locale writes any number.
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /**
+     * The locale `value` is written in, such as `de` for `1.234.567`.
+     *
+     * Absent reads the nearest `lang`, then the runtime's own. Set it on a page
+     * rendered on a server, so the server and the browser write the figure
+     * alike.
+     */
+    locale: string;
+    /**
+     * The figure as a number, written with `format-options` in `locale` in
+     * place of a slotted value.
+     *
+     * Absent leaves the figure to the slot.
+     */
+    value?: number;
     protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    /** Says which pieces the stat holds, one call apiece so each pairs with its `@cssstate`. */
+    private readonly readPieces;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/stat/root/stat-root.js

@@ -4,10 +4,20 @@ 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, HelixElement, hostAria, reportRuntime, slottedWords, } from '@fusion.dev/helix-core';
+import { customElement, formatNumber, HelixElement, hostAria, reportRuntime, slotFilled, slottedWords, wordsLocale, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessStat = class HelixHeadlessStat extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.locale = '';
+        this.readPieces = () => {
+            const filled = (name) => slotFilled(this.renderRoot?.querySelector(`slot[name="${name}"]`));
+            this.toggleState('has-label', filled('label'));
+            this.toggleState('has-unit', filled('unit'));
+            this.toggleState('has-trend', filled('trend'));
+        };
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         const labels = this.knownChildren.filter((child) => child.slot === 'label');
@@ -25,6 +35,7 @@ let HelixHeadlessStat = class HelixHeadlessStat extends HelixElement {
     }
     updated(changed) {
         super.updated(changed);
+        this.readPieces();
         const given = this.direction;
         if (changed.has('direction') && (given === 'up' || given === 'down' || given === 'neutral')) {
             reportRuntime({
@@ -37,15 +48,28 @@ let HelixHeadlessStat = class HelixHeadlessStat extends HelixElement {
         }
     }
     render() {
-        return html `<slot name="label" @slotchange=${() => this.requestUpdate()}></slot>
-      <slot part="value"></slot>
-      <slot name="unit"></slot>
-      <slot name="trend"></slot>`;
+        const value = this.value;
+        const figure = value === undefined || !Number.isFinite(value)
+            ? ''
+            : formatNumber(value, wordsLocale(this), this.formatOptions);
+        return html `<slot name="label" part="label" @slotchange=${() => this.requestUpdate()}></slot>
+      ${figure === '' ? html `<slot part="value"></slot>` : html `<span part="value">${figure}</span>`}
+      <slot name="unit" part="unit" @slotchange=${this.readPieces}></slot>
+      <slot name="trend" part="trend" @slotchange=${this.readPieces}></slot>`;
     }
 };
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessStat.prototype, "direction", void 0);
+__decorate([
+    property({ attribute: 'format-options', type: Object })
+], HelixHeadlessStat.prototype, "formatOptions", void 0);
+__decorate([
+    property()
+], HelixHeadlessStat.prototype, "locale", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessStat.prototype, "value", void 0);
 HelixHeadlessStat = __decorate([
     customElement('helix-headless-stat')
 ], HelixHeadlessStat);

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.

package/dist/steps/step/step.js

@@ -26,6 +26,9 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
         this.status = new StatusController(this);
     }
     static { this.words = 'helix-step'; }
+    focus(options) {
+        this.partNamed('label')?.focus(options);
+    }
     select() {
         if (this.disabled || this.locked) {
             return;
@@ -44,6 +47,7 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'listitem' });
         this.toggleState('invalid', this.invalid);
+        this.toggleState('locked', this.locked);
     }
     updated(changed) {
         super.updated(changed);