@fusion.dev/helix-headless 0.145.0 → 0.147.0

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

@@ -10,190 +10,8 @@ import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { snapTo } from '../snap.js';
 const STACK_BELOW = 512;
+const channel = new WeakMap();
 let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitter extends HelixElement {
-    constructor() {
-        super(...arguments);
-        this.collapsedLabel = 'Collapsed';
-        this.collapsedSize = 0;
-        this.cornerLabel = 'Resize both';
-        this.defaultPosition = 50;
-        this.label = 'Resize panes';
-        this.aria = new AriaForwardController(this, {
-            label: true,
-            target: () => this.partNamed('separator'),
-        });
-        this.max = 100;
-        this.min = 0;
-        this.snap = '';
-        this.snapThreshold = 12;
-        this.step = 2;
-        this.positionState = undefined;
-        this.collapsedState = undefined;
-        this.opened = undefined;
-        this.began = undefined;
-        this.reached = undefined;
-        this.dragging = false;
-        this.crossings = [];
-        this.outer = null;
-        this.crossedAt = undefined;
-        this.cornerOrigin = null;
-        this.origin = null;
-        this.stacked = false;
-        this.handlePointerDown = (event) => {
-            const separator = event.currentTarget;
-            const box = this.getBoundingClientRect();
-            this.origin = this.vertical
-                ? { length: box.height, start: box.top }
-                : { length: box.width, start: box.left };
-            capturePointer(separator, event.pointerId);
-            this.opened = this.collapsed ? undefined : this.position;
-            this.began = this.position;
-            this.reached = undefined;
-            this.dragging = true;
-            event.preventDefault();
-        };
-        this.handlePointerMove = (event) => {
-            const origin = this.origin;
-            if (!origin || origin.length === 0) {
-                return;
-            }
-            const along = this.vertical ? event.clientY : event.clientX;
-            const raw = ((along - origin.start) / origin.length) * 100;
-            const rtl = !this.vertical && isRtl(this);
-            this.move(this.snapped(rtl ? 100 - raw : raw, origin.length));
-        };
-        this.handlePointerUp = (event) => {
-            if (!this.origin) {
-                return;
-            }
-            const separator = event.currentTarget;
-            if (separator.hasPointerCapture(event.pointerId)) {
-                separator.releasePointerCapture(event.pointerId);
-            }
-            this.origin = null;
-            this.dragging = false;
-            this.settle(this.reached ?? this.position);
-        };
-        this.handleKeydown = (event) => {
-            if (event.key === 'Enter') {
-                this.toggleCollapse();
-                event.preventDefault();
-                return;
-            }
-            const toward = this.travel(event.key);
-            let next;
-            if (toward !== 0) {
-                next = this.position + toward * this.step;
-            }
-            else if (event.key === 'Home') {
-                next = this.minPercent;
-            }
-            else if (event.key === 'End') {
-                next = this.maxPercent;
-            }
-            else {
-                return;
-            }
-            this.settle(next);
-            event.preventDefault();
-        };
-        this.handleDoubleClick = () => {
-            this.reset();
-        };
-        this.handleCornerDoubleClick = (event) => {
-            const crossing = this.crossings[Number(event.currentTarget.dataset.cross)];
-            if (!crossing) {
-                return;
-            }
-            this.reset();
-            crossing.by.reset();
-            this.leaveSeparator(event);
-        };
-        this.handleCornerDown = (event) => {
-            const handle = event.currentTarget;
-            const crossing = this.crossings[Number(handle.dataset.cross)];
-            if (!crossing) {
-                return;
-            }
-            const mine = this.getBoundingClientRect();
-            const theirs = crossing.by.getBoundingClientRect();
-            this.cornerOrigin = {
-                by: crossing.by,
-                inner: crossing.by.vertical
-                    ? { length: theirs.height, start: theirs.top }
-                    : { length: theirs.width, start: theirs.left },
-                outer: this.vertical
-                    ? { length: mine.height, start: mine.top }
-                    : { length: mine.width, start: mine.left },
-            };
-            capturePointer(handle, event.pointerId);
-            this.opened = this.collapsed ? undefined : this.position;
-            crossing.by.opened = crossing.by.collapsed ? undefined : crossing.by.position;
-            this.began = this.position;
-            crossing.by.began = crossing.by.position;
-            this.reached = undefined;
-            crossing.by.reached = undefined;
-            this.dragging = true;
-            crossing.by.dragging = true;
-            this.leaveSeparator(event);
-        };
-        this.handleCornerMove = (event) => {
-            const origin = this.cornerOrigin;
-            if (!origin) {
-                return;
-            }
-            const rtl = isRtl(this);
-            const along = (box, at, inline) => {
-                if (box.length === 0) {
-                    return undefined;
-                }
-                const raw = ((at - box.start) / box.length) * 100;
-                return inline && rtl ? 100 - raw : raw;
-            };
-            const mine = along(origin.outer, this.vertical ? event.clientY : event.clientX, !this.vertical);
-            const theirs = along(origin.inner, origin.by.vertical ? event.clientY : event.clientX, !origin.by.vertical);
-            if (mine !== undefined) {
-                this.moveTo(mine);
-            }
-            if (theirs !== undefined) {
-                origin.by.moveTo(theirs);
-            }
-            this.leaveSeparator(event);
-        };
-        this.handleCornerUp = (event) => {
-            const origin = this.cornerOrigin;
-            if (!origin) {
-                return;
-            }
-            const handle = event.currentTarget;
-            if (handle.hasPointerCapture(event.pointerId)) {
-                handle.releasePointerCapture(event.pointerId);
-            }
-            this.cornerOrigin = null;
-            this.moveTo(this.reached ?? this.position, true);
-            origin.by.moveTo(origin.by.reached ?? origin.by.position, true);
-            this.leaveSeparator(event);
-        };
-        this.handleCornerKeydown = (event) => {
-            const crossing = this.crossings[Number(event.currentTarget.dataset.cross)];
-            if (!crossing) {
-                return;
-            }
-            const inner = crossing.by;
-            const mine = this.travel(event.key);
-            const theirs = inner.travel(event.key);
-            if (mine !== 0) {
-                this.moveTo(this.position + mine * this.step, true);
-            }
-            else if (theirs !== 0) {
-                inner.moveTo(inner.position + theirs * inner.step, true);
-            }
-            else {
-                return;
-            }
-            this.leaveSeparator(event);
-        };
-    }
     get collapsed() {
         const held = this.collapsedState;
         if (held === undefined) {
@@ -309,6 +127,7 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         this.positionState = wanted;
         this.collapsedState = 'none';
         this.requestUpdate('position', previous);
+        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
     }
     settle(next) {
         const wanted = this.clamp(next);
@@ -388,26 +207,211 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         const home = this.clamp(this.defaultPosition);
         this.settle(home);
     }
-    cross(by, at) {
-        const found = this.crossings.find((crossing) => crossing.by === by);
-        if (found) {
-            if (found.at === at) {
+    constructor() {
+        super();
+        this.collapsedLabel = 'Collapsed';
+        this.collapsedSize = 0;
+        this.cornerLabel = 'Resize both';
+        this.defaultPosition = 50;
+        this.label = 'Resize panes';
+        this.aria = new AriaForwardController(this, {
+            label: true,
+            target: () => this.partNamed('separator'),
+        });
+        this.max = 100;
+        this.min = 0;
+        this.snap = '';
+        this.snapThreshold = 12;
+        this.step = 2;
+        this.positionState = undefined;
+        this.collapsedState = undefined;
+        this.opened = undefined;
+        this.began = undefined;
+        this.reached = undefined;
+        this.dragging = false;
+        this.crossings = [];
+        this.outer = null;
+        this.crossedAt = undefined;
+        this.cornerOrigin = null;
+        this.origin = null;
+        this.stacked = false;
+        this.handlePointerDown = (event) => {
+            const separator = event.currentTarget;
+            const box = this.getBoundingClientRect();
+            this.origin = this.vertical
+                ? { length: box.height, start: box.top }
+                : { length: box.width, start: box.left };
+            capturePointer(separator, event.pointerId);
+            this.opened = this.collapsed ? undefined : this.position;
+            this.began = this.position;
+            this.reached = undefined;
+            this.dragging = true;
+            event.preventDefault();
+        };
+        this.handlePointerMove = (event) => {
+            const origin = this.origin;
+            if (!origin || origin.length === 0) {
                 return;
             }
-            found.at = at;
-        }
-        else {
-            this.crossings.push({ at, by });
-        }
-        this.requestUpdate();
-    }
-    uncross(by) {
-        const at = this.crossings.findIndex((crossing) => crossing.by === by);
-        if (at === -1) {
-            return;
-        }
-        this.crossings.splice(at, 1);
-        this.requestUpdate();
+            const along = this.vertical ? event.clientY : event.clientX;
+            const raw = ((along - origin.start) / origin.length) * 100;
+            const rtl = !this.vertical && isRtl(this);
+            this.move(this.snapped(rtl ? 100 - raw : raw, origin.length));
+        };
+        this.handlePointerUp = (event) => {
+            if (!this.origin) {
+                return;
+            }
+            const separator = event.currentTarget;
+            if (separator.hasPointerCapture(event.pointerId)) {
+                separator.releasePointerCapture(event.pointerId);
+            }
+            this.origin = null;
+            this.dragging = false;
+            this.settle(this.reached ?? this.position);
+        };
+        this.handleKeydown = (event) => {
+            if (event.key === 'Enter') {
+                this.toggleCollapse();
+                event.preventDefault();
+                return;
+            }
+            const toward = this.travel(event.key);
+            let next;
+            if (toward !== 0) {
+                next = this.position + toward * this.step;
+            }
+            else if (event.key === 'Home') {
+                next = this.minPercent;
+            }
+            else if (event.key === 'End') {
+                next = this.maxPercent;
+            }
+            else {
+                return;
+            }
+            this.settle(next);
+            event.preventDefault();
+        };
+        this.handleDoubleClick = () => {
+            this.reset();
+        };
+        this.handleCornerDoubleClick = (event) => {
+            const crossing = this.crossings[Number(event.currentTarget.dataset.cross)];
+            if (!crossing) {
+                return;
+            }
+            this.reset();
+            crossing.by.reset();
+            this.leaveSeparator(event);
+        };
+        this.handleCornerDown = (event) => {
+            const handle = event.currentTarget;
+            const crossing = this.crossings[Number(handle.dataset.cross)];
+            if (!crossing) {
+                return;
+            }
+            const mine = this.getBoundingClientRect();
+            const theirs = crossing.by.getBoundingClientRect();
+            this.cornerOrigin = {
+                by: crossing.by,
+                inner: crossing.by.vertical
+                    ? { length: theirs.height, start: theirs.top }
+                    : { length: theirs.width, start: theirs.left },
+                outer: this.vertical
+                    ? { length: mine.height, start: mine.top }
+                    : { length: mine.width, start: mine.left },
+            };
+            capturePointer(handle, event.pointerId);
+            this.opened = this.collapsed ? undefined : this.position;
+            crossing.by.opened = crossing.by.collapsed ? undefined : crossing.by.position;
+            this.began = this.position;
+            crossing.by.began = crossing.by.position;
+            this.reached = undefined;
+            crossing.by.reached = undefined;
+            this.dragging = true;
+            crossing.by.dragging = true;
+            this.leaveSeparator(event);
+        };
+        this.handleCornerMove = (event) => {
+            const origin = this.cornerOrigin;
+            if (!origin) {
+                return;
+            }
+            const rtl = isRtl(this);
+            const along = (box, at, inline) => {
+                if (box.length === 0) {
+                    return undefined;
+                }
+                const raw = ((at - box.start) / box.length) * 100;
+                return inline && rtl ? 100 - raw : raw;
+            };
+            const mine = along(origin.outer, this.vertical ? event.clientY : event.clientX, !this.vertical);
+            const theirs = along(origin.inner, origin.by.vertical ? event.clientY : event.clientX, !origin.by.vertical);
+            if (mine !== undefined) {
+                this.moveTo(mine);
+            }
+            if (theirs !== undefined) {
+                origin.by.moveTo(theirs);
+            }
+            this.leaveSeparator(event);
+        };
+        this.handleCornerUp = (event) => {
+            const origin = this.cornerOrigin;
+            if (!origin) {
+                return;
+            }
+            const handle = event.currentTarget;
+            if (handle.hasPointerCapture(event.pointerId)) {
+                handle.releasePointerCapture(event.pointerId);
+            }
+            this.cornerOrigin = null;
+            this.moveTo(this.reached ?? this.position, true);
+            origin.by.moveTo(origin.by.reached ?? origin.by.position, true);
+            this.leaveSeparator(event);
+        };
+        this.handleCornerKeydown = (event) => {
+            const crossing = this.crossings[Number(event.currentTarget.dataset.cross)];
+            if (!crossing) {
+                return;
+            }
+            const inner = crossing.by;
+            const mine = this.travel(event.key);
+            const theirs = inner.travel(event.key);
+            if (mine !== 0) {
+                this.moveTo(this.position + mine * this.step, true);
+            }
+            else if (theirs !== 0) {
+                inner.moveTo(inner.position + theirs * inner.step, true);
+            }
+            else {
+                return;
+            }
+            this.leaveSeparator(event);
+        };
+        channel.set(this, {
+            cross: (by, at) => {
+                const found = this.crossings.find((crossing) => crossing.by === by);
+                if (found) {
+                    if (found.at === at) {
+                        return;
+                    }
+                    found.at = at;
+                }
+                else {
+                    this.crossings.push({ at, by });
+                }
+                this.requestUpdate();
+            },
+            uncross: (by) => {
+                const at = this.crossings.findIndex((crossing) => crossing.by === by);
+                if (at === -1) {
+                    return;
+                }
+                this.crossings.splice(at, 1);
+                this.requestUpdate();
+            },
+        });
     }
     findOuter() {
         const outer = closestInstance(this.parentElement, HelixHeadlessSplitter_1);
@@ -416,7 +420,7 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         }
         this.outer = outer;
         this.crossedAt = this.position;
-        outer.cross(this, this.position);
+        channel.get(outer)?.cross(this, this.position);
     }
     leaveSeparator(event) {
         event.stopPropagation();
@@ -433,7 +437,9 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         super.disconnectedCallback();
         this.sizes?.disconnect();
         this.sizes = undefined;
-        this.outer?.uncross(this);
+        if (this.outer) {
+            channel.get(this.outer)?.uncross(this);
+        }
         this.outer = null;
         this.crossedAt = undefined;
     }
@@ -461,11 +467,12 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         }
         if (this.outer && this.showing !== this.crossedAt) {
             this.crossedAt = this.showing;
-            this.outer.cross(this, this.showing);
+            channel.get(this.outer)?.cross(this, this.showing);
         }
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        this.toggleState('dragging', this.dragging);
     }
     render() {
         const position = this.showing;

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

@@ -12,6 +12,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * add an attribute after upgrade, which markup rendered on the server by React
  * does not have.
  *
+ * **A stat with a label is a group named by it**, so a reader moving through a
+ * dashboard hears "Revenue, group" and then the figure, its unit and its
+ * trend as one reading, rather than a run of loose words. The role and the name
+ * are set through `ElementInternals` once the label is known, which writes no
+ * 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.
+ *
  * @since 0.1.0
  * @status stable
  * @category data
@@ -19,7 +26,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/stat
  *
  * @slot - The value.
- * @slot label - What the value measures.
+ * @slot label - What the value measures, which also names the stat for a screen reader.
+ * @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.
@@ -40,10 +48,9 @@ export declare class HelixHeadlessStat extends HelixElement {
      * the value's baseline whichever way the pair goes, and only this element
      * knows which of its children the unit belongs to.
      *
-     * **`Trend` has a `direction` too, and there it means which way a number
-     * moved:** `up`, `down` or `neutral`. A Stat and a Trend are often written
-     * side by side, so watch for the mix-up. On a Stat those three words are not
-     * layouts, and the pair stays the column.
+     * The name and the values are `Flex`'s, which lays out the same way. Which
+     * way a number moved is `Trend`'s `movement`. On a Stat, `up`, `down` and
+     * `neutral` are not layouts, and the pair stays the column.
      *
      * **Optional rather than defaulted to `column`, which is not a style
      * preference.** A reflecting property with a default writes its attribute onto
@@ -54,6 +61,8 @@ export declare class HelixHeadlessStat extends HelixElement {
      * carries nothing nobody wrote.
      */
     direction?: 'column-reverse' | 'row' | 'row-reverse';
+    protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }

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

@@ -4,10 +4,25 @@ 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, reportRuntime } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria, reportRuntime, slottedWords, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessStat = class HelixHeadlessStat extends HelixElement {
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        const labels = this.knownChildren.filter((child) => child.slot === 'label');
+        hostAria(this.internals, {
+            label: labels.length > 0 && !('ariaLabelledByElements' in this.internals)
+                ? slottedWords(this, ['label'])
+                : '',
+            labelledBy: labels,
+            role: labels.length > 0 ? 'group' : '',
+        });
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
     updated(changed) {
         super.updated(changed);
         const given = this.direction;
@@ -15,16 +30,17 @@ let HelixHeadlessStat = class HelixHeadlessStat extends HelixElement {
             reportRuntime({
                 kind: 'misread-direction',
                 message: `<${this.localName} direction="${given}"> lays out as the column: \`${given}\` is a ` +
-                    "direction of Trend's, which says which way a number moved. Put it on the " +
-                    '`helix-trend` beside the stat.',
+                    "`movement` of Trend's, which says which way a number moved. Put it on the " +
+                    "`helix-trend` in the stat's `trend` slot.",
                 tag: this.localName,
             });
         }
     }
     render() {
-        return html `<slot name="label"></slot>
+        return html `<slot name="label" @slotchange=${() => this.requestUpdate()}></slot>
       <slot part="value"></slot>
-      <slot name="unit"></slot>`;
+      <slot name="unit"></slot>
+      <slot name="trend"></slot>`;
     }
 };
 __decorate([

package/dist/steps/reach.d.ts

@@ -13,3 +13,8 @@ export interface ReachableStep {
  * complete or optional, so no stage is passed unfinished.
  */
 export declare const canReach: (steps: readonly ReachableStep[], from: number, to: number) => 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.
+ */
+export declare const progressOf: (steps: readonly Pick<ReachableStep, 'complete'>[]) => number;

package/dist/steps/reach.js

@@ -10,3 +10,6 @@ export const canReach = (steps, from, to) => {
     }
     return true;
 };
+export const progressOf = (steps) => steps.length === 0
+    ? 0
+    : Math.round((steps.filter((step) => step.complete).length / steps.length) * 100);

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

@@ -1,5 +1,6 @@
 import { HelixElement } 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;
 /**
  * @summary A sequence of stages that shows which stage the user is on.
@@ -16,9 +17,27 @@ declare const HelixHeadlessSteps_base: (new (...args: any[]) => import("@fusion.
  * `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.
+ * allowed. `next()` and `previous()` move one stage either way, under the
+ * same rules, for your own buttons.
+ *
+ * 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`
+ * does. Moving forward asks it about the stage the reader is on, and where it
+ * answers `false` the reader stays and the stage is `:state(invalid)` until it
+ * answers `true`. An `optional` stage is not asked. `helix-before-activate`
+ * is still sent for every move, for a check of your own.
+ *
+ * `progress` is how far through the sequence is, from 0 to 100: the share of
+ * its stages that are `complete`. The `progress` part carries it as a
+ * `progressbar` and as `--steps-progress`, and is hidden until a stylesheet
+ * gives it a `display`, so a bar of your own costs nothing until you draw it.
+ * A screen reader hears it as `progress-label` says, "33% complete" unless
+ * set, as Ark UI's steps write it. The sequence is `:state(complete)` once
+ * every stage is.
+ *
+ * The sequence is a list named by `label`, and each step a list item. The
+ * current stage's button says `aria-current="step"`, and a finished stage's
+ * button is described by its `complete-label`.
  *
  * @since 0.1.0
  * @status stable
@@ -31,6 +50,12 @@ declare const HelixHeadlessSteps_base: (new (...args: any[]) => import("@fusion.
  * @event {HelixActivateEvent} helix-activate - Fired after the current step changes, when the element already holds the new step.
  * @event {HelixBeforeActivateEvent} helix-before-activate - Fired before the active step changes. Cancelable: cancel it to keep the current step.
  * @event {HelixSelectEvent} helix-select - Fired when a step is pressed. The step dispatches it, and you can listen for it on the sequence. Cancelable: cancel it to keep the current step.
+ *
+ * @csspart progress - How far through the sequence is, as a `progressbar` carrying `--steps-progress`. Hidden until a stylesheet gives it a `display`.
+ *
+ * @cssproperty --steps-progress - How far through the sequence is, as a percentage, written on the `progress` part.
+ *
+ * @cssstate complete - Every stage is complete.
  */
 export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
     /**
@@ -59,6 +84,22 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
      * catches people out.
      */
     orientation?: 'vertical';
+    /**
+     * What the `progress` part says to a screen reader, with `{percent}` filled
+     * in with `progress`.
+     */
+    progressLabel: string;
+    /**
+     * A function that answers whether a stage is valid, asked about the stage a
+     * reader is on before they move forward from it. Return `false` to keep them
+     * there. Not asked of an `optional` stage, nor for a move back.
+     */
+    validate?: (step: HelixHeadlessStep) => boolean;
+    /**
+     * How far through the sequence is, from 0 to 100: the share of its stages
+     * that are `complete`, rounded to a whole number.
+     */
+    get progress(): number;
     /**
      * What each step is marked with.
      *
@@ -86,6 +127,12 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
     previous(): boolean;
     /** Moves `delta` stages, skipping disabled ones. */
     private step;
+    /**
+     * Whether the stage the reader is on lets them go to the stage at `index`,
+     * by `validate`. Only a move forward is asked, and an `optional` stage is
+     * never asked. The stage is marked invalid while the answer is no.
+     */
+    private valid;
     /** 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. */
@@ -108,7 +155,13 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
     private readonly handleSlotChange;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * The steps where they can be known, and none on a server or while
+     * hydrating, so the progress drawn first is the server's.
+     */
+    private get known();
     protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }