@fusion.dev/helix-headless 0.143.0 → 0.145.0

package/dist/slider/root/slider-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, customElement, fillTemplate, HelixFormElement, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, fillTemplate, formatNumber, HelixFormElement, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue(MixinField(HelixFormElement)) {
@@ -14,12 +14,14 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
             target: () => this.partNamed('control'),
         });
         this.announcesInput = true;
+        this.locale = '';
         this.markerLabels = false;
         this.markers = 0;
         this.max = 100;
         this.maximumLabel = 'maximum';
         this.min = 0;
         this.minimumLabel = 'minimum';
+        this.minStepsBetweenThumbs = 0;
         this.range = false;
         this.showValue = false;
         this.step = 1;
@@ -29,9 +31,10 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
             if (this.range) {
                 const [start, end] = this.bounds;
                 const moved = Number(control.value);
+                const gap = this.gap;
                 const pair = control.dataset.thumb === 'start'
-                    ? [Math.min(moved, end), end]
-                    : [start, Math.max(moved, start)];
+                    ? [Math.min(moved, end - gap), end]
+                    : [start, Math.max(moved, start + gap)];
                 this.requestValue(pair.join(','));
                 restoreValue(control, String(control.dataset.thumb === 'start' ? this.bounds[0] : this.bounds[1]));
                 return;
@@ -47,7 +50,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         this.valueText = '';
     }
     get reserve() {
-        const widest = Math.max(String(this.min).length, String(this.max).length);
+        const widest = Math.max(this.said(this.min).length, this.said(this.max).length);
         return this.range ? widest * 2 + ' to '.length : widest;
     }
     get precision() {
@@ -141,8 +144,27 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         const at = Number.isFinite(parsed) ? parsed : this.min + (this.max - this.min) / 2;
         return String(this.settled(at));
     }
+    get gap() {
+        return Math.max(0, this.minStepsBetweenThumbs) * this.step;
+    }
+    get formats() {
+        return this.formatter !== undefined || this.formatOptions !== undefined;
+    }
+    said(at) {
+        const number = typeof at === 'number' ? at : Number.parseFloat(at);
+        if (!Number.isFinite(number)) {
+            return String(at);
+        }
+        if (this.formatter) {
+            return this.formatter(number);
+        }
+        return this.formatOptions ? formatNumber(number, this.locale, this.formatOptions) : String(at);
+    }
     spoken(at) {
-        return this.valueText ? fillTemplate(this.valueText, { value: at }) : nothing;
+        if (this.valueText) {
+            return fillTemplate(this.valueText, { value: this.said(at) });
+        }
+        return this.formats ? this.said(at) : nothing;
     }
     updated(changed) {
         super.updated(changed);
@@ -161,8 +183,8 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         step=${this.step}
         .value=${String(at)}
         aria-labelledby=${this.labeled ? `${this.labelId} ${which}-name` : `${which}-name`}
-        aria-valuemin=${which === 'end' ? start : nothing}
-        aria-valuemax=${which === 'start' ? end : nothing}
+        aria-valuemin=${which === 'end' ? start + this.gap : nothing}
+        aria-valuemax=${which === 'start' ? end - this.gap : nothing}
         aria-valuetext=${this.spoken(at)}
         aria-describedby=${this.describedBy ?? nothing}
         aria-invalid=${this.invalidity ?? nothing}
@@ -207,7 +229,9 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
               ${this.markerValues.map((at) => html `<span
                     part="marker"
                     style="--slider-marker-at: ${((at - this.min) / (this.max - this.min)) * 100}%"
-                    >${this.markerLabels ? html `<span part="marker-label">${at}</span>` : nothing}</span
+                    >${this.markerLabels
+                ? html `<span part="marker-label">${this.said(at)}</span>`
+                : nothing}</span
                   >`)}
             </div>`
             : nothing}
@@ -217,13 +241,22 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
               for=${this.range ? 'control control-end' : 'control'}
               aria-hidden="true"
               style=${`--_slider-output-reserve: ${this.reserve}ch`}
-              >${this.range ? `${start} to ${end}` : this.value}</output
+              >${this.range ? `${this.said(start)} to ${this.said(end)}` : this.said(this.value)}</output
             >`
             : nothing}
     </div>
     ${this.renderHint()}${this.renderFeedback()}`;
     }
 };
+__decorate([
+    property({ attribute: 'format-options', type: Object })
+], HelixHeadlessSlider.prototype, "formatOptions", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessSlider.prototype, "formatter", void 0);
+__decorate([
+    property()
+], HelixHeadlessSlider.prototype, "locale", void 0);
 __decorate([
     property({ attribute: 'marker-labels', reflect: true, type: Boolean })
 ], HelixHeadlessSlider.prototype, "markerLabels", void 0);
@@ -242,6 +275,9 @@ __decorate([
 __decorate([
     property({ attribute: 'minimum-label' })
 ], HelixHeadlessSlider.prototype, "minimumLabel", void 0);
+__decorate([
+    property({ attribute: 'min-steps-between-thumbs', type: Number })
+], HelixHeadlessSlider.prototype, "minStepsBetweenThumbs", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessSlider.prototype, "orientation", void 0);

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

@@ -179,6 +179,17 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      */
     get position(): number;
     set position(next: number);
+    /**
+     * Where a dragged divider snaps, comma separated, as Web Awesome's split
+     * panel does: a bare number is a percentage and a length such as `240px` is
+     * measured along the splitter, so `snap="25, 50, 75"` or `snap="240px, 50"`.
+     * The arrow keys move by `step` and do not snap.
+     */
+    snap: string;
+    /**
+     * How close a drag has to come to a snap point to land on it, in pixels.
+     */
+    snapThreshold: number;
     /**
      * How far one arrow key press moves the divider, as a percentage.
      */
@@ -434,6 +445,8 @@ export declare class HelixHeadlessSplitter extends HelixElement {
     private settle;
     private readonly handlePointerDown;
     private readonly handlePointerMove;
+    /** Where a drag at `position` lands once `snap` has had its say. */
+    private snapped;
     private readonly handlePointerUp;
     /**
      * The keys a separator answers.

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

@@ -5,9 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessSplitter_1;
-import { AriaForwardController, capturePointer, closestInstance, customElement, HelixBeforeCollapseEvent, HelixBeforeResizeEvent, HelixCollapseEvent, HelixElement, HelixResizedEvent, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
+import { AriaForwardController, capturePointer, closestInstance, commaList, customElement, HelixBeforeCollapseEvent, HelixBeforeResizeEvent, HelixCollapseEvent, HelixElement, HelixResizedEvent, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { snapTo } from '../snap.js';
 const STACK_BELOW = 512;
 let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitter extends HelixElement {
     constructor() {
@@ -23,6 +24,8 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         });
         this.max = 100;
         this.min = 0;
+        this.snap = '';
+        this.snapThreshold = 12;
         this.step = 2;
         this.positionState = undefined;
         this.collapsedState = undefined;
@@ -57,7 +60,7 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
             const along = this.vertical ? event.clientY : event.clientX;
             const raw = ((along - origin.start) / origin.length) * 100;
             const rtl = !this.vertical && isRtl(this);
-            this.move(rtl ? 100 - raw : raw);
+            this.move(this.snapped(rtl ? 100 - raw : raw, origin.length));
         };
         this.handlePointerUp = (event) => {
             if (!this.origin) {
@@ -345,6 +348,15 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
             });
         }
     }
+    snapped(position, length) {
+        if (this.snap === '' || length <= 0) {
+            return position;
+        }
+        const points = commaList(this.snap)
+            .map((point) => this.toPercent(point, Number.NaN))
+            .filter((point) => Number.isFinite(point));
+        return snapTo(position, points, (this.snapThreshold / length) * 100);
+    }
     travel(key) {
         if (!this.vertical) {
             return inlineStep(this, key);
@@ -541,6 +553,12 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessSplitter.prototype, "position", null);
+__decorate([
+    property()
+], HelixHeadlessSplitter.prototype, "snap", void 0);
+__decorate([
+    property({ attribute: 'snap-threshold', type: Number })
+], HelixHeadlessSplitter.prototype, "snapThreshold", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessSplitter.prototype, "step", void 0);

package/dist/splitter/snap.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Where a dragged divider lands: on the nearest snap point within `threshold`,
+ * or where the pointer is.
+ *
+ * Every number is a percentage of the splitter's box, so the caller turns a
+ * point written as a length, and the threshold, into one first. Ties go to the
+ * point written first.
+ */
+export declare const snapTo: (position: number, points: readonly number[], threshold: number) => number;

package/dist/splitter/snap.js

@@ -0,0 +1,12 @@
+export const snapTo = (position, points, threshold) => {
+    let best;
+    let distance = Number.POSITIVE_INFINITY;
+    for (const point of points) {
+        const away = Math.abs(point - position);
+        if (away <= threshold && away < distance) {
+            best = point;
+            distance = away;
+        }
+    }
+    return best ?? position;
+};

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

@@ -21,6 +21,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot - The value.
  * @slot label - What the value measures.
  * @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.
  */
 export declare class HelixHeadlessStat extends HelixElement {
     /**

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

@@ -23,7 +23,7 @@ let HelixHeadlessStat = class HelixHeadlessStat extends HelixElement {
     }
     render() {
         return html `<slot name="label"></slot>
-      <slot></slot>
+      <slot part="value"></slot>
       <slot name="unit"></slot>`;
     }
 };

package/dist/steps/reach.d.ts

@@ -0,0 +1,15 @@
+/** What linear mode reads of a step. */
+export interface ReachableStep {
+    /** Whether the stage is finished. */
+    complete: boolean;
+    /** Whether a reader may pass the stage without finishing it. */
+    optional: boolean;
+}
+/**
+ * Whether a reader on step `from` may go to step `to`, in a linear sequence.
+ *
+ * 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.
+ */
+export declare const canReach: (steps: readonly ReachableStep[], from: number, to: number) => boolean;

package/dist/steps/reach.js

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

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

@@ -13,6 +13,13 @@ 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.
  *
+ * `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. To check a stage before a reader leaves it, cancel
+ * `helix-before-activate` while it is not valid. `next()` and `previous()` move
+ * one stage either way, under the same rules, for your own buttons.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -33,6 +40,11 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
      * needs a name of its own rather than borrowing the heading above it.
      */
     label: string;
+    /**
+     * Whether a reader has to finish each stage, or pass an `optional` one,
+     * before going on to the next.
+     */
+    linear: boolean;
     /**
      * Which way the steps run.
      *
@@ -62,6 +74,24 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
     variant?: 'numeric';
     /** The steps, in the order the consumer wrote them. */
     private get steps();
+    /** The index of the stage the reader is on, or `-1`. */
+    private get at();
+    /**
+     * Moves to the next stage that can be gone to, as Ark UI's `goToNextStep`
+     * does. Returns whether it moved: not past the last stage, not into a stage
+     * `linear` holds out of reach, and not where a listener refused.
+     */
+    next(): boolean;
+    /** Moves to the stage before, as Ark UI's `goToPrevStep` does. Returns whether it moved. */
+    previous(): boolean;
+    /** Moves `delta` stages, skipping disabled ones. */
+    private step;
+    /** Whether the stage at `index` can be gone to from where the reader is. */
+    private reachable;
+    /** Marks the stages a linear sequence holds out of reach. Client only. */
+    private lock;
+    /** Watches what decides a stage's reach: which is current, which are done. */
+    private watcher;
     /**
      * Puts `active` on whichever step owns it.
      *

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

@@ -7,23 +7,62 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, HelixElement, hostAria, MixinControllerActive, whenHydrated, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { canReach } from '../reach.js';
 let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(HelixElement) {
     constructor() {
         super(...arguments);
         this.label = 'Steps';
+        this.linear = false;
         this.handleSelection = (event) => {
             if (event.defaultPrevented || !this.steps.includes(event.target)) {
                 return;
             }
+            if (!this.reachable(this.steps.indexOf(event.target))) {
+                return;
+            }
             this.requestActive(event.detail.value);
         };
         this.handleSlotChange = () => {
             this.sync();
+            this.lock();
         };
     }
     get steps() {
         return [...this.querySelectorAll(':scope > *')].filter((one) => 'current' in one);
     }
+    get at() {
+        return this.steps.findIndex((step) => step.current);
+    }
+    next() {
+        return this.step(1);
+    }
+    previous() {
+        return this.step(-1);
+    }
+    step(delta) {
+        const steps = this.steps;
+        let index = this.at + delta;
+        while (steps[index]?.disabled) {
+            index += delta;
+        }
+        const target = steps[index];
+        if (!target || !this.reachable(index)) {
+            return false;
+        }
+        return this.requestActive(target.value);
+    }
+    reachable(index) {
+        return !this.linear || canReach(this.steps, this.at, index);
+    }
+    lock() {
+        const steps = this.steps;
+        steps.forEach((step, index) => {
+            const locked = !this.reachable(index);
+            whenHydrated(step, () => {
+                step.locked = locked;
+            });
+        });
+    }
     sync() {
         if (this.active === '') {
             return;
@@ -40,10 +79,18 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelection);
+        this.watcher = new MutationObserver(() => this.lock());
+        this.watcher.observe(this, {
+            attributeFilter: ['complete', 'current', 'optional'],
+            attributes: true,
+            subtree: true,
+        });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.handleSelection);
+        this.watcher?.disconnect();
+        this.watcher = undefined;
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -54,6 +101,9 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
         if (changed.has('active')) {
             this.sync();
         }
+        if (changed.has('linear') || changed.has('active')) {
+            this.lock();
+        }
     }
     render() {
         return html `<slot @slotchange=${this.handleSlotChange}></slot>`;
@@ -62,6 +112,9 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
 __decorate([
     property()
 ], HelixHeadlessSteps.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessSteps.prototype, "linear", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessSteps.prototype, "orientation", void 0);

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

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import type { PropertyValues, TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../button/index.js';
 /**
  * @summary One stage in a sequence.
@@ -21,6 +21,12 @@ import '../../button/index.js';
  * and `::after` from properties the list sets, so the step renders no extra
  * element for them.
  *
+ * A finished stage says so in words: the name's button is described by
+ * `complete-label`, "Complete" unless you translate it, and a stage that
+ * becomes complete while the page is open says it once in a polite live
+ * region. The current stage's button carries `aria-current="step"`, and only
+ * the button, so the state is said once, on the control.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Stage
@@ -38,15 +44,23 @@ import '../../button/index.js';
  * @csspart description - The line under the name.
  * @csspart label - The step's name, which is a control.
  * @csspart label-button - The button inside the label.
+ * @csspart label-live - The live region inside that button, rendered only from the first time the button is pending.
  * @csspart label-text - The words on that button, trimmed to their capitals and baseline.
+ * @csspart live - The live region that says a stage was completed, rendered from the first time one is.
  * @csspart mark - The glyph inside the marker: a tick, a dot, or an empty ring.
  * @csspart marker - The shape carrying the number or the check.
+ * @csspart state - The words that describe a finished stage's button. Hidden.
  */
 export declare class HelixHeadlessStep extends HelixElement {
     /**
      * Whether this stage is finished.
      */
     complete: boolean;
+    /**
+     * The words that tell a screen reader the stage is finished. Translate it
+     * with the page.
+     */
+    completeLabel: string;
     /**
      * Whether this is the current stage.
      */
@@ -55,11 +69,27 @@ export declare class HelixHeadlessStep extends HelixElement {
      * Whether the stage is disabled, so the user cannot go to it.
      */
     disabled: boolean;
+    /**
+     * @internal Set by a linear sequence: whether the stage is out of reach
+     * until the ones before it are finished. A property, because the sequence
+     * writes it after the step upgrades.
+     */
+    locked: boolean;
+    /**
+     * Whether a reader may pass the stage without finishing it, in a sequence
+     * with `linear`. Ark UI's skippable step.
+     */
+    optional: boolean;
     /**
      * The value the step sends in `helix-select`.
      */
     value: string;
-    /** Fires `helix-select` for the step, unless the step is `disabled`. */
+    /** Says a stage was finished, from the first time one is. */
+    private readonly status;
+    /**
+     * Fires `helix-select` for the step, unless the step is `disabled` or a
+     * linear sequence has it out of reach.
+     */
     select(): void;
     /**
      * The mark this stage's state calls for.
@@ -84,6 +114,13 @@ export declare class HelixHeadlessStep extends HelixElement {
      */
     protected renderMarker(): TemplateResult;
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Says a stage that was finished while the page is open, with its name.
+     *
+     * Only a change after the first update, so a sequence served with its done
+     * stages says nothing when it arrives.
+     */
+    protected updated(changed: PropertyValues): void;
     /**
      * The step's own label, which is a control because a step can be gone to, behind a seam the styled tier can move.
      *

package/dist/steps/step/step.js

@@ -4,8 +4,9 @@ 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, HelixSelectEvent, hostAria } from '@fusion.dev/helix-core';
+import { customElement, drawStatus, HelixElement, HelixSelectEvent, hostAria, StatusController, } from '@fusion.dev/helix-core';
 import { check, circle, record } from '@fusion.dev/helix-icons';
+import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
@@ -14,12 +15,16 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
     constructor() {
         super(...arguments);
         this.complete = false;
+        this.completeLabel = 'Complete';
         this.current = false;
         this.disabled = false;
+        this.locked = false;
+        this.optional = false;
         this.value = '';
+        this.status = new StatusController(this);
     }
     select() {
-        if (this.disabled) {
+        if (this.disabled || this.locked) {
             return;
         }
         this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
@@ -35,18 +40,26 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'listitem' });
-        this.internals.ariaCurrent = this.current ? 'step' : null;
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.get('complete') === false && this.complete) {
+            const name = (this.textContent ?? '').replace(/\s+/g, ' ').trim();
+            this.status.say(name === '' ? this.completeLabel : `${name}, ${this.completeLabel}`);
+        }
     }
     renderLabel() {
         return html `<${this.tag('button')}
       part="label"
-      exportparts="button: label-button, text: label-text"
+      exportparts="button: label-button, live: label-live, text: label-text"
       emphasis="ghost"
-      ?disabled=${this.disabled}
+      aria-current=${this.current ? 'step' : nothing}
+      aria-describedby=${this.complete ? 'state' : nothing}
+      ?disabled=${this.disabled || this.locked}
       @click=${this.select}
     >
       <slot></slot>
-    </${this.tag('button')}>`;
+    </${this.tag('button')}><span id="state" part="state" hidden>${this.complete ? this.completeLabel : ''}</span>`;
     }
     render() {
         return html `<span part="marker" aria-hidden="true">
@@ -56,18 +69,27 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
         ${this.renderLabel()}
         <span part="description"><slot name="description"></slot></span>
       </span>
-      <div part="content"><slot name="content"></slot></div>`;
+      <div part="content"><slot name="content"></slot></div>${drawStatus(this.status)}`;
     }
 };
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessStep.prototype, "complete", void 0);
+__decorate([
+    property({ attribute: 'complete-label' })
+], HelixHeadlessStep.prototype, "completeLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessStep.prototype, "current", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessStep.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessStep.prototype, "locked", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessStep.prototype, "optional", void 0);
 __decorate([
     property()
 ], HelixHeadlessStep.prototype, "value", void 0);

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

@@ -1,5 +1,5 @@
 import { AriaForwardController, HelixFormElement, HostClickController } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessSwitch_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerCheckedInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A control that turns something on or off.
@@ -40,7 +40,9 @@ declare const HelixHeadlessSwitch_base: (new (...args: any[]) => import("@fusion
  * @csspart track - The track. Draw the thumb on the track itself, with
  * `::part(track)::after` in your stylesheet. This tier ships no CSS, so it
  * renders no separate thumb element, which would be an empty child that costs
- * your layout as much as any other child. `ListItem` measured that cost.
+ * your layout as much as any other child. `ListItem` measured that cost. A
+ * subclass that draws one returns it from `renderThumb`, as the styled switch
+ * does.
  *
  * @cssstate checked - While it is on.
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
@@ -70,6 +72,14 @@ export declare class HelixHeadlessSwitch extends HelixHeadlessSwitch_base {
      * rendered, which React reports on hydration and does not patch up.
      */
     private markEmpty;
+    /**
+     * The thumb, drawn inside the track after the input: nothing on this tier.
+     *
+     * A seam for a tier that draws the thumb as an element, so it can be a part
+     * and hold icons. An element here would be an empty child on every page that
+     * loads only this tier, which is the cost the `track` part notes.
+     */
+    protected renderThumb(): TemplateResult | typeof nothing;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/switch/root/switch-root.js

@@ -43,6 +43,9 @@ let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerCheck
     markEmpty() {
         markRegion(this.renderRoot, 'label', ['']);
     }
+    renderThumb() {
+        return nothing;
+    }
     render() {
         return html `<label part="field">
       <span part="track">
@@ -55,9 +58,11 @@ let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerCheck
           ?required=${this.required}
           aria-describedby=${this.describedBy ?? nothing}
           aria-invalid=${this.invalidity ?? nothing}
+          aria-readonly=${this.readOnly ? 'true' : nothing}
           @change=${this.handleChange}
+          @click=${this.holdReadOnly}
           @input=${this.stopInner}
-        />
+        />${this.renderThumb()}
       </span>
       <span part="label"><slot>${this.label}</slot></span>
     </label>