@skdx/web-components 0.27.0 → 0.28.0

package/dist/split-button/SplitButtonTrigger.d.ts

@@ -1,11 +1,11 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-split-button-trigger>` — the small button within a
- * `<skdx-split-button>` that opens a menu of related actions. Renders a
- * native `<button type="button" aria-haspopup="menu">` in shadow DOM
- * (`delegatesFocus`) — style it via `skdx-split-button-trigger::part(trigger)`.
- * Carries no open/close logic itself — wrap it with an actual menu's
- * trigger (e.g. `<skdx-dropdown-menu-trigger>`) to open the attached menu.
+ * `<skdx-split-button-trigger>` opens a menu of related actions within `<skdx-split-button>`. Renders `<button aria-haspopup="menu">` in shadow DOM with `delegatesFocus`; style via `::part(trigger)`. Does not nest inside `<skdx-dropdown-menu-trigger>` (produces invalid button-in-button markup). Give it `aria-label` for icon-only usage.
+ *
+ * @example
+ * ```html
+ * <skdx-split-button-trigger aria-label="More deploy options">▾</skdx-split-button-trigger>
+ * ```
  *
  * @csspart trigger - The native `<button>` element inside the shadow root.
  */
@@ -14,6 +14,12 @@ export declare class SkdxSplitButtonTrigger extends LitElement {
     static styles: import("lit").CSSResult[];
     /** Disables the trigger, excluding it from the tab order and blocking activation. @default false */
     disabled: boolean;
+    /**
+     * Accessible name forwarded to the shadow `<button>` so screen readers announce it. The host is a nameless wrapper with no role.
+     *
+     * @default null — the button takes its name from projected content, if any
+     */
+    ariaLabel: string | null;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/split-button/SplitButtonTrigger.js

@@ -1,9 +1,15 @@
-var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var n=(r,o,a,s)=>{for(var t=s>1?void 0:s?m(o,a):o,l=r.length-1,i;l>=0;l--)(i=r[l])&&(t=(s?i(o,a,t):i(t))||t);return s&&t&&d(o,a,t),t};import{css as p,html as b,LitElement as c}from"lit";import{property as f}from"lit/decorators.js";import{customElement as h}from"../internal/define.js";import{controlBoxOnHost as u,delegatesFocusShadowRootOptions as y,hiddenHostStyles as v,resetNativeControl as E}from"../internal/styles.js";var e=class extends c{constructor(){super(...arguments);this.disabled=!1}render(){return b`
-      <button part="trigger" type="button" aria-haspopup="menu" ?disabled=${this.disabled}>
+var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var s=(r,o,l,a)=>{for(var t=a>1?void 0:a?m(o,l):o,i=r.length-1,n;i>=0;i--)(n=r[i])&&(t=(a?n(o,l,t):n(t))||t);return a&&t&&d(o,l,t),t};import{css as p,html as c,LitElement as h,nothing as u}from"lit";import{property as b}from"lit/decorators.js";import{customElement as f}from"../internal/define.js";import{controlBoxOnHost as y,delegatesFocusShadowRootOptions as v,hiddenHostStyles as L,resetNativeControl as E}from"../internal/styles.js";var e=class extends h{constructor(){super(...arguments);this.disabled=!1;this.ariaLabel=null}render(){return c`
+      <button
+        part="trigger"
+        type="button"
+        aria-haspopup="menu"
+        aria-label=${this.ariaLabel??u}
+        ?disabled=${this.disabled}
+      >
         <slot></slot>
       </button>
-    `}};e.shadowRootOptions=y,e.styles=[E,v,p`
+    `}};e.shadowRootOptions=v,e.styles=[E,L,p`
       :host {
         display: inline-block;
       }
-    `,u],n([f({type:Boolean,reflect:!0})],e.prototype,"disabled",2),e=n([h("skdx-split-button-trigger","split-button","trigger")],e);export{e as SkdxSplitButtonTrigger};
+    `,y],s([b({type:Boolean,reflect:!0})],e.prototype,"disabled",2),s([b({type:String,attribute:"aria-label"})],e.prototype,"ariaLabel",2),e=s([f("skdx-split-button-trigger","split-button","trigger")],e);export{e as SkdxSplitButtonTrigger};

package/dist/split-button/index.cjs

@@ -1 +1 @@
-"use strict";var x=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var l=(o,t)=>{for(var p in t)x(o,p,{get:t[p],enumerable:!0})},m=(o,t,p,S)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of f(t))!k.call(o,r)&&r!==p&&x(o,r,{get:()=>t[r],enumerable:!(S=d(t,r))||S.enumerable});return o};var u=o=>m(x({},"__esModule",{value:!0}),o);var B={};l(B,{SkdxSplitButton:()=>i.SkdxSplitButton,SkdxSplitButtonAction:()=>e.SkdxSplitButtonAction,SkdxSplitButtonTrigger:()=>n.SkdxSplitButtonTrigger});module.exports=u(B);var i=require("./SplitButton.cjs"),e=require("./SplitButtonAction.cjs"),n=require("./SplitButtonTrigger.cjs");0&&(module.exports={SkdxSplitButton,SkdxSplitButtonAction,SkdxSplitButtonTrigger});
+"use strict";var r=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var l=(o,t)=>{for(var e in t)r(o,e,{get:t[e],enumerable:!0})},m=(o,t,e,S)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of d(t))!k.call(o,p)&&p!==e&&r(o,p,{get:()=>t[p],enumerable:!(S=x(t,p))||S.enumerable});return o};var n=o=>m(r({},"__esModule",{value:!0}),o);var u={};l(u,{SkdxSplitButton:()=>i.SkdxSplitButton});module.exports=n(u);var i=require("./SplitButton.cjs");0&&(module.exports={SkdxSplitButton});

package/dist/split-button/index.d.cts

@@ -1,3 +1 @@
-export { SkdxSplitButton } from './SplitButton.cjs';
-export { SkdxSplitButtonAction } from './SplitButtonAction.cjs';
-export { SkdxSplitButtonTrigger } from './SplitButtonTrigger.cjs';
+export { SkdxSplitButton, type SkdxSplitButtonItemDescriptor } from './SplitButton.cjs';

package/dist/split-button/index.d.ts

@@ -1,3 +1 @@
-export { SkdxSplitButton } from './SplitButton.js';
-export { SkdxSplitButtonAction } from './SplitButtonAction.js';
-export { SkdxSplitButtonTrigger } from './SplitButtonTrigger.js';
+export { SkdxSplitButton, type SkdxSplitButtonItemDescriptor } from './SplitButton.js';

package/dist/split-button/index.js

@@ -1 +1 @@
-import{SkdxSplitButton as r}from"./SplitButton.js";import{SkdxSplitButtonAction as x}from"./SplitButtonAction.js";import{SkdxSplitButtonTrigger as i}from"./SplitButtonTrigger.js";export{r as SkdxSplitButton,x as SkdxSplitButtonAction,i as SkdxSplitButtonTrigger};
+import{SkdxSplitButton as p}from"./SplitButton.js";export{p as SkdxSplitButton};

package/dist/split-button/primitives.cjs

@@ -0,0 +1 @@
+"use strict";var p=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var g=(o,t)=>{for(var i in t)p(o,i,{get:t[i],enumerable:!0})},k=(o,t,i,x)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of d(t))!f.call(o,r)&&r!==i&&p(o,r,{get:()=>t[r],enumerable:!(x=n(t,r))||x.enumerable});return o};var l=o=>k(p({},"__esModule",{value:!0}),o);var m={};g(m,{SkdxSplitButtonAction:()=>S.SkdxSplitButtonAction,SkdxSplitButtonTrigger:()=>e.SkdxSplitButtonTrigger});module.exports=l(m);var S=require("./SplitButtonAction.cjs"),e=require("./SplitButtonTrigger.cjs");0&&(module.exports={SkdxSplitButtonAction,SkdxSplitButtonTrigger});

package/dist/split-button/primitives.d.cts

@@ -0,0 +1,17 @@
+/**
+ * Primitives for split-button (action plus dropdown). Use when anatomy's structure doesn't fit.
+ * Chevron trigger, controlled menu. Imports from this path; tags are global.
+ *
+ * @example
+ * ```ts
+ * import * as SplitButton from '@skdx/web-components/primitives/split-button';
+ * ```
+ * ```html
+ * <skdx-split-button aria-label="Deploy">
+ *   <skdx-split-button-action>Deploy</skdx-split-button-action>
+ *   <skdx-split-button-trigger aria-label="More deploy options">▾</skdx-split-button-trigger>
+ * </skdx-split-button>
+ * ```
+ */
+export { SkdxSplitButtonAction } from './SplitButtonAction.cjs';
+export { SkdxSplitButtonTrigger } from './SplitButtonTrigger.cjs';

package/dist/split-button/primitives.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Primitives for split-button (action plus dropdown). Use when anatomy's structure doesn't fit.
+ * Chevron trigger, controlled menu. Imports from this path; tags are global.
+ *
+ * @example
+ * ```ts
+ * import * as SplitButton from '@skdx/web-components/primitives/split-button';
+ * ```
+ * ```html
+ * <skdx-split-button aria-label="Deploy">
+ *   <skdx-split-button-action>Deploy</skdx-split-button-action>
+ *   <skdx-split-button-trigger aria-label="More deploy options">▾</skdx-split-button-trigger>
+ * </skdx-split-button>
+ * ```
+ */
+export { SkdxSplitButtonAction } from './SplitButtonAction.js';
+export { SkdxSplitButtonTrigger } from './SplitButtonTrigger.js';

package/dist/split-button/primitives.js

@@ -0,0 +1 @@
+import{SkdxSplitButtonAction as r}from"./SplitButtonAction.js";import{SkdxSplitButtonTrigger as p}from"./SplitButtonTrigger.js";export{r as SkdxSplitButtonAction,p as SkdxSplitButtonTrigger};

package/dist/steps/Steps.cjs

@@ -1,6 +1,12 @@
-"use strict";var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var v=(n,i)=>{for(var e in i)d(n,e,{get:i[e],enumerable:!0})},y=(n,i,e,t)=>{if(i&&typeof i=="object"||typeof i=="function")for(let s of g(i))!b.call(n,s)&&s!==e&&d(n,s,{get:()=>i[s],enumerable:!(t=u(i,s))||t.enumerable});return n};var _=n=>y(d({},"__esModule",{value:!0}),n),a=(n,i,e,t)=>{for(var s=t>1?void 0:t?u(i,e):i,h=n.length-1,p;h>=0;h--)(p=n[h])&&(s=(t?p(i,e,s):p(s))||s);return t&&s&&d(i,e,s),s};var L={};v(L,{SkdxSteps:()=>r});module.exports=_(L);var l=require("lit"),o=require("lit/decorators.js"),c=require("../internal/define.cjs"),m=require("../internal/part.cjs"),f=require("./steps-core.cjs");var r=class extends l.LitElement{constructor(){super(...arguments);this.orientation="horizontal";this.navigationMode="linear";this.completedLabel="Completed";this.currentLabel="Current step";this.incompleteLabel="Not completed";this.disabledLabel="Disabled";this._items=[];this._triggers=new Set}connectedCallback(){super.connectedCallback(),this._uncontrolledValue===void 0&&(this._uncontrolledValue=this.defaultValue)}getCurrentValue(){return this.value!==void 0?this.value:this._uncontrolledValue}statusLabel(e){return e==="completed"?this.completedLabel:e==="current"?this.currentLabel:e==="disabled"?this.disabledLabel:this.incompleteLabel}getItemState(e){return this._resolveItems().find(t=>t.value===e)}canActivate(e){return(0,f.canActivateStep)(this._resolveItems(),e,this.getCurrentValue(),this.navigationMode)}activate(e){this.canActivate(e)&&this.getCurrentValue()!==e&&(this.value===void 0&&(this._uncontrolledValue=e),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this._refreshDescendants())}registerItem(e){this._items.push(e)}unregisterItem(e){let t=this._items.indexOf(e);t!==-1&&this._items.splice(t,1)}registerTrigger(e){this._triggers.add(e)}unregisterTrigger(e){this._triggers.delete(e)}refreshDescendants(e){this._refreshDescendants(e)}_resolveItems(){return this._items.map(e=>({value:e.value,completed:e.completed,disabled:e.disabled}))}_refreshDescendants(e){for(let t of this._items)t!==e&&t.refresh();for(let t of this._triggers)t!==e&&t.refresh()}updated(e){(e.has("value")||e.has("navigationMode")||e.has("orientation"))&&this._refreshDescendants(),(0,m.reflectHostState)(this,{"data-orientation":this.orientation})}render(){return l.html`<ol part="steps" data-orientation=${this.orientation}>
-      <slot></slot>
-    </ol>`}};r.styles=l.css`
+"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var _=Object.prototype.hasOwnProperty;var S=(o,r)=>{for(var e in r)d(o,e,{get:r[e],enumerable:!0})},L=(o,r,e,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of y(r))!_.call(o,a)&&a!==e&&d(o,a,{get:()=>r[a],enumerable:!(t=c(r,a))||t.enumerable});return o};var A=o=>L(d({},"__esModule",{value:!0}),o),s=(o,r,e,t)=>{for(var a=t>1?void 0:t?c(r,e):r,p=o.length-1,u;p>=0;p--)(u=o[p])&&(a=(t?u(r,e,a):u(a))||a);return t&&a&&d(r,e,a),a};var I={};S(I,{SkdxSteps:()=>i});module.exports=A(I);var l=require("lit"),n=require("lit/decorators.js"),f=require("../internal/authored.cjs"),m=require("../internal/define.cjs"),b=require("../internal/part.cjs"),g=require("../utils/is-dev-mode.cjs"),v=require("./steps-core.cjs"),h=require("./StepsAnatomy.cjs");var i=class extends l.LitElement{constructor(){super(...arguments);this.orientation="horizontal";this.navigationMode="linear";this.completedLabel="Completed";this.currentLabel="Current step";this.incompleteLabel="Not completed";this.disabledLabel="Disabled";this.errorLabel="Error";this._items=[];this._triggers=new Set;this.fillAnatomy=()=>{(0,f.hasAuthoredParts)(this,h.STEPS_ANATOMY_GENERATED)||(0,h.fillStepsAnatomy)(this)}}connectedCallback(){super.connectedCallback(),this._uncontrolledValue===void 0&&(this._uncontrolledValue=this.defaultValue),queueMicrotask(this.fillAnatomy)}firstUpdated(){!this.getAttribute("aria-label")&&!this.getAttribute("aria-labelledby")&&(0,g.isDevMode)()&&console.warn('[skdx] Steps: the root <ol> has no accessible name. Give it an aria-label ("Checkout progress") or an aria-labelledby pointing at a visible heading \u2014 a list takes no name from its items, so the step captions inside cannot supply one.')}getCurrentValue(){return this.value!==void 0?this.value:this.current!==void 0?String(this.current):this._uncontrolledValue}statusLabel(e){return e==="completed"?this.completedLabel:e==="current"?this.currentLabel:e==="error"?this.errorLabel:e==="disabled"?this.disabledLabel:this.incompleteLabel}getItemState(e){return this._resolveItems().find(t=>t.value===e)}canActivate(e){return(0,v.canActivateStep)(this._resolveItems(),e,this.getCurrentValue(),this.navigationMode)}activate(e){this.canActivate(e)&&this.getCurrentValue()!==e&&(this.value===void 0&&(this._uncontrolledValue=e),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this._refreshDescendants())}registerItem(e){this._items.push(e)}unregisterItem(e){let t=this._items.indexOf(e);t!==-1&&this._items.splice(t,1)}registerTrigger(e){this._triggers.add(e)}unregisterTrigger(e){this._triggers.delete(e)}refreshDescendants(e){this._refreshDescendants(e)}_resolveItems(){return this._items.map(e=>({value:e.value,completed:e.completed,disabled:e.disabled}))}_refreshDescendants(e){for(let t of this._items)t!==e&&t.refresh();for(let t of this._triggers)t!==e&&t.refresh()}updated(e){(e.has("items")||e.has("current"))&&this.fillAnatomy(),e.has("current")&&this._refreshDescendants(),(e.has("value")||e.has("navigationMode")||e.has("orientation"))&&this._refreshDescendants(),(0,b.reflectHostState)(this,{"data-orientation":this.orientation})}render(){let e=this.getAttribute("aria-label"),t=this.getAttribute("aria-labelledby");return l.html`<ol
+      part="steps"
+      role="list"
+      aria-label=${e??l.nothing}
+      aria-labelledby=${t??l.nothing}
+      data-orientation=${this.orientation}
+    >
+      <slot @slotchange=${this.fillAnatomy}></slot>
+    </ol>`}};i.styles=l.css`
     :host {
       display: contents;
     }
@@ -24,4 +30,4 @@
       padding: 0;
       list-style: none;
     }
-  `,a([(0,o.property)({type:String})],r.prototype,"value",2),a([(0,o.property)({type:String,attribute:"default-value"})],r.prototype,"defaultValue",2),a([(0,o.property)({type:String,reflect:!0})],r.prototype,"orientation",2),a([(0,o.property)({type:String,attribute:"navigation-mode"})],r.prototype,"navigationMode",2),a([(0,o.property)({type:String,attribute:"completed-label"})],r.prototype,"completedLabel",2),a([(0,o.property)({type:String,attribute:"current-label"})],r.prototype,"currentLabel",2),a([(0,o.property)({type:String,attribute:"incomplete-label"})],r.prototype,"incompleteLabel",2),a([(0,o.property)({type:String,attribute:"disabled-label"})],r.prototype,"disabledLabel",2),a([(0,o.state)()],r.prototype,"_uncontrolledValue",2),r=a([(0,c.customElement)("skdx-steps","steps","root")],r);0&&(module.exports={SkdxSteps});
+  `,s([(0,n.property)({type:String})],i.prototype,"value",2),s([(0,n.property)({type:String,attribute:"default-value"})],i.prototype,"defaultValue",2),s([(0,n.property)({attribute:!1})],i.prototype,"items",2),s([(0,n.property)({type:Number})],i.prototype,"current",2),s([(0,n.property)({type:String,reflect:!0})],i.prototype,"orientation",2),s([(0,n.property)({type:String,attribute:"navigation-mode"})],i.prototype,"navigationMode",2),s([(0,n.property)({type:String,attribute:"completed-label"})],i.prototype,"completedLabel",2),s([(0,n.property)({type:String,attribute:"current-label"})],i.prototype,"currentLabel",2),s([(0,n.property)({type:String,attribute:"incomplete-label"})],i.prototype,"incompleteLabel",2),s([(0,n.property)({type:String,attribute:"disabled-label"})],i.prototype,"disabledLabel",2),s([(0,n.property)({type:String,attribute:"error-label"})],i.prototype,"errorLabel",2),s([(0,n.state)()],i.prototype,"_uncontrolledValue",2),i=s([(0,m.customElement)("skdx-steps","steps","root")],i);0&&(module.exports={SkdxSteps});

package/dist/steps/Steps.d.cts

@@ -1,5 +1,12 @@
 import { LitElement } from 'lit';
 import { type StepsItemState, type StepsNavigationMode, type StepsOrientation, type StepStatus } from './steps-core.cjs';
+/** One step of a derived `<skdx-steps>`: the whole of what `items` takes. */
+export interface SkdxStepsStepDescriptor {
+    /** The step's caption — the trigger's text. */
+    label: string;
+    /** Supporting text below the caption. @default undefined — nothing is rendered. */
+    description?: string;
+}
 /** A registered step or trigger that can be told to re-sync its own host attributes. */
 export interface RefreshableStep {
     refresh(): void;
@@ -11,56 +18,54 @@ export interface StepsItemLike extends RefreshableStep {
     disabled: boolean;
 }
 /**
- * `<skdx-steps>` — the Web Components implementation of the shared Steps
- * contract (see `@skdx/shared`'s `stepsContract`). Renders a real `<ol>`
- * inside shadow DOM (`:host { display: contents }`, the same technique
- * `<skdx-timeline>` uses) and owns which step is current;
- * `<skdx-steps-item>` and `<skdx-steps-trigger>` look it up via
- * `this.closest('skdx-steps')` (there is no cross-shadow-root context
- * mechanism in Web Components) and call its public methods directly.
- *
- * A Wizard is a *pattern* composed from Steps + Form + Dialog, not a
- * component.
+ * Renders an `<ol>` list of steps with controlled or uncontrolled current step.
+ * Provides context for nested `<skdx-steps-item>` / `<skdx-steps-trigger>` parts
+ * via `this.closest()`. Derives steps from `items` or accepts hand-composed children.
  *
  * @example
  * ```html
- * <skdx-steps aria-label="Checkout progress" default-value="cart">
- *   <skdx-steps-item value="cart" completed>
- *     <skdx-steps-trigger value="cart">Cart</skdx-steps-trigger>
- *   </skdx-steps-item>
- *   <skdx-steps-item value="shipping">
- *     <skdx-steps-trigger value="shipping">Shipping</skdx-steps-trigger>
- *   </skdx-steps-item>
- * </skdx-steps>
+ * <skdx-steps aria-label="Checkout progress" current="1"></skdx-steps>
+ * ```
+ * ```ts
+ * steps.items = [{ label: 'Cart' }, { label: 'Shipping' }];
  * ```
  *
  * @csspart steps - The native `<ol>` element inside the shadow root.
  *
- * @fires value-change - Fired with the `value` of the step that is now active. Suppressed for a step the current `linear`/`disabled` state does not allow activating.
+ * @fires value-change - Fired when the step changes. Suppressed for steps blocked by navigation mode or disabled state.
  */
 export declare class SkdxSteps extends LitElement {
     static styles: import("lit").CSSResult;
     /**
-     * Current step's value, for controlled usage. Listen for `value-change`.
-     * @default undefined — uncontrolled, tracks its own current step internally.
+     * Current step value for controlled usage. Listen for `value-change`.
+     * @default undefined — uncontrolled, tracks internally.
      */
     value?: string;
     /**
-     * Initially current step's value, for uncontrolled usage.
+     * Initial current step value for uncontrolled usage.
      * @default undefined — no step is current until one is activated.
      */
     defaultValue?: string;
     /**
-     * Layout axis, exposed as `data-orientation`. Purely a styling hook — each
-     * trigger is an ordinary tab stop, so there is no ARIA orientation and no
-     * arrow-key handling.
+     * Steps to derive as Item/Trigger pairs (property only).
+     * @default undefined — nothing is derived; hand-composed children are used.
+     */
+    items?: readonly SkdxStepsStepDescriptor[];
+    /**
+     * Index of the current step in `items`. Earlier steps derive as `completed`.
+     * This is the derived path's controlled value; `value` wins when both are set.
+     * @default undefined — no step is current, and only the first is reachable.
+     */
+    current?: number;
+    /**
+     * Layout axis, exposed as `data-orientation`. Styling hook only; no ARIA
+     * orientation or arrow-key handling.
      * @default 'horizontal'
      */
     orientation: StepsOrientation;
     /**
-     * `'linear'` restricts triggers to completed steps, the current step, and
-     * the first not-yet-completed step. `'non-linear'` lets a trigger activate
-     * any step that is not itself disabled.
+     * `'linear'` restricts to completed, current, and next incomplete steps;
+     * `'non-linear'` allows any non-disabled step.
      * @default 'linear'
      */
     navigationMode: StepsNavigationMode;
@@ -84,10 +89,25 @@ export declare class SkdxSteps extends LitElement {
      * @default 'Disabled'
      */
     disabledLabel: string;
+    /**
+     * Visually-hidden status text for a step in an error state.
+     * @default 'Error'
+     */
+    errorLabel: string;
     private _uncontrolledValue?;
     private readonly _items;
     private readonly _triggers;
     connectedCallback(): void;
+    private readonly fillAnatomy;
+    /**
+     * The contract requires the root to be named — an `<ol>` has no
+     * accessible name of its own, so an unnamed step list is a region a
+     * screen-reader user meets with no idea what it tracks. Nothing enforced it,
+     * and the name is written on the *host* here (the `<ol>` lives in the shadow
+     * root), so that is where it is looked for. A warning, not an error: the page
+     * still works, less well.
+     */
+    protected firstUpdated(): void;
     /** The current step's value, resolving controlled vs. uncontrolled. */
     getCurrentValue(): string | undefined;
     /**

package/dist/steps/Steps.d.ts

@@ -1,5 +1,12 @@
 import { LitElement } from 'lit';
 import { type StepsItemState, type StepsNavigationMode, type StepsOrientation, type StepStatus } from './steps-core.js';
+/** One step of a derived `<skdx-steps>`: the whole of what `items` takes. */
+export interface SkdxStepsStepDescriptor {
+    /** The step's caption — the trigger's text. */
+    label: string;
+    /** Supporting text below the caption. @default undefined — nothing is rendered. */
+    description?: string;
+}
 /** A registered step or trigger that can be told to re-sync its own host attributes. */
 export interface RefreshableStep {
     refresh(): void;
@@ -11,56 +18,54 @@ export interface StepsItemLike extends RefreshableStep {
     disabled: boolean;
 }
 /**
- * `<skdx-steps>` — the Web Components implementation of the shared Steps
- * contract (see `@skdx/shared`'s `stepsContract`). Renders a real `<ol>`
- * inside shadow DOM (`:host { display: contents }`, the same technique
- * `<skdx-timeline>` uses) and owns which step is current;
- * `<skdx-steps-item>` and `<skdx-steps-trigger>` look it up via
- * `this.closest('skdx-steps')` (there is no cross-shadow-root context
- * mechanism in Web Components) and call its public methods directly.
- *
- * A Wizard is a *pattern* composed from Steps + Form + Dialog, not a
- * component.
+ * Renders an `<ol>` list of steps with controlled or uncontrolled current step.
+ * Provides context for nested `<skdx-steps-item>` / `<skdx-steps-trigger>` parts
+ * via `this.closest()`. Derives steps from `items` or accepts hand-composed children.
  *
  * @example
  * ```html
- * <skdx-steps aria-label="Checkout progress" default-value="cart">
- *   <skdx-steps-item value="cart" completed>
- *     <skdx-steps-trigger value="cart">Cart</skdx-steps-trigger>
- *   </skdx-steps-item>
- *   <skdx-steps-item value="shipping">
- *     <skdx-steps-trigger value="shipping">Shipping</skdx-steps-trigger>
- *   </skdx-steps-item>
- * </skdx-steps>
+ * <skdx-steps aria-label="Checkout progress" current="1"></skdx-steps>
+ * ```
+ * ```ts
+ * steps.items = [{ label: 'Cart' }, { label: 'Shipping' }];
  * ```
  *
  * @csspart steps - The native `<ol>` element inside the shadow root.
  *
- * @fires value-change - Fired with the `value` of the step that is now active. Suppressed for a step the current `linear`/`disabled` state does not allow activating.
+ * @fires value-change - Fired when the step changes. Suppressed for steps blocked by navigation mode or disabled state.
  */
 export declare class SkdxSteps extends LitElement {
     static styles: import("lit").CSSResult;
     /**
-     * Current step's value, for controlled usage. Listen for `value-change`.
-     * @default undefined — uncontrolled, tracks its own current step internally.
+     * Current step value for controlled usage. Listen for `value-change`.
+     * @default undefined — uncontrolled, tracks internally.
      */
     value?: string;
     /**
-     * Initially current step's value, for uncontrolled usage.
+     * Initial current step value for uncontrolled usage.
      * @default undefined — no step is current until one is activated.
      */
     defaultValue?: string;
     /**
-     * Layout axis, exposed as `data-orientation`. Purely a styling hook — each
-     * trigger is an ordinary tab stop, so there is no ARIA orientation and no
-     * arrow-key handling.
+     * Steps to derive as Item/Trigger pairs (property only).
+     * @default undefined — nothing is derived; hand-composed children are used.
+     */
+    items?: readonly SkdxStepsStepDescriptor[];
+    /**
+     * Index of the current step in `items`. Earlier steps derive as `completed`.
+     * This is the derived path's controlled value; `value` wins when both are set.
+     * @default undefined — no step is current, and only the first is reachable.
+     */
+    current?: number;
+    /**
+     * Layout axis, exposed as `data-orientation`. Styling hook only; no ARIA
+     * orientation or arrow-key handling.
      * @default 'horizontal'
      */
     orientation: StepsOrientation;
     /**
-     * `'linear'` restricts triggers to completed steps, the current step, and
-     * the first not-yet-completed step. `'non-linear'` lets a trigger activate
-     * any step that is not itself disabled.
+     * `'linear'` restricts to completed, current, and next incomplete steps;
+     * `'non-linear'` allows any non-disabled step.
      * @default 'linear'
      */
     navigationMode: StepsNavigationMode;
@@ -84,10 +89,25 @@ export declare class SkdxSteps extends LitElement {
      * @default 'Disabled'
      */
     disabledLabel: string;
+    /**
+     * Visually-hidden status text for a step in an error state.
+     * @default 'Error'
+     */
+    errorLabel: string;
     private _uncontrolledValue?;
     private readonly _items;
     private readonly _triggers;
     connectedCallback(): void;
+    private readonly fillAnatomy;
+    /**
+     * The contract requires the root to be named — an `<ol>` has no
+     * accessible name of its own, so an unnamed step list is a region a
+     * screen-reader user meets with no idea what it tracks. Nothing enforced it,
+     * and the name is written on the *host* here (the `<ol>` lives in the shadow
+     * root), so that is where it is looked for. A warning, not an error: the page
+     * still works, less well.
+     */
+    protected firstUpdated(): void;
     /** The current step's value, resolving controlled vs. uncontrolled. */
     getCurrentValue(): string | undefined;
     /**

package/dist/steps/Steps.js

@@ -1,6 +1,12 @@
-var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var r=(o,a,e,t)=>{for(var n=t>1?void 0:t?p(a,e):a,l=o.length-1,d;l>=0;l--)(d=o[l])&&(n=(t?d(a,e,n):d(n))||n);return t&&n&&h(a,e,n),n};import{css as u,html as c,LitElement as m}from"lit";import{property as s,state as f}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{reflectHostState as b}from"../internal/part.js";import{canActivateStep as v}from"./steps-core.js";var i=class extends m{constructor(){super(...arguments);this.orientation="horizontal";this.navigationMode="linear";this.completedLabel="Completed";this.currentLabel="Current step";this.incompleteLabel="Not completed";this.disabledLabel="Disabled";this._items=[];this._triggers=new Set}connectedCallback(){super.connectedCallback(),this._uncontrolledValue===void 0&&(this._uncontrolledValue=this.defaultValue)}getCurrentValue(){return this.value!==void 0?this.value:this._uncontrolledValue}statusLabel(e){return e==="completed"?this.completedLabel:e==="current"?this.currentLabel:e==="disabled"?this.disabledLabel:this.incompleteLabel}getItemState(e){return this._resolveItems().find(t=>t.value===e)}canActivate(e){return v(this._resolveItems(),e,this.getCurrentValue(),this.navigationMode)}activate(e){this.canActivate(e)&&this.getCurrentValue()!==e&&(this.value===void 0&&(this._uncontrolledValue=e),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this._refreshDescendants())}registerItem(e){this._items.push(e)}unregisterItem(e){let t=this._items.indexOf(e);t!==-1&&this._items.splice(t,1)}registerTrigger(e){this._triggers.add(e)}unregisterTrigger(e){this._triggers.delete(e)}refreshDescendants(e){this._refreshDescendants(e)}_resolveItems(){return this._items.map(e=>({value:e.value,completed:e.completed,disabled:e.disabled}))}_refreshDescendants(e){for(let t of this._items)t!==e&&t.refresh();for(let t of this._triggers)t!==e&&t.refresh()}updated(e){(e.has("value")||e.has("navigationMode")||e.has("orientation"))&&this._refreshDescendants(),b(this,{"data-orientation":this.orientation})}render(){return c`<ol part="steps" data-orientation=${this.orientation}>
-      <slot></slot>
-    </ol>`}};i.styles=u`
+var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var r=(o,a,e,t)=>{for(var n=t>1?void 0:t?u(a,e):a,l=o.length-1,d;l>=0;l--)(d=o[l])&&(n=(t?d(a,e,n):d(n))||n);return t&&n&&p(a,e,n),n};import{css as c,html as f,LitElement as m,nothing as h}from"lit";import{property as s,state as b}from"lit/decorators.js";import{hasAuthoredParts as g}from"../internal/authored.js";import{customElement as v}from"../internal/define.js";import{reflectHostState as y}from"../internal/part.js";import{isDevMode as _}from"../utils/is-dev-mode.js";import{canActivateStep as S}from"./steps-core.js";import{fillStepsAnatomy as L,STEPS_ANATOMY_GENERATED as A}from"./StepsAnatomy.js";var i=class extends m{constructor(){super(...arguments);this.orientation="horizontal";this.navigationMode="linear";this.completedLabel="Completed";this.currentLabel="Current step";this.incompleteLabel="Not completed";this.disabledLabel="Disabled";this.errorLabel="Error";this._items=[];this._triggers=new Set;this.fillAnatomy=()=>{g(this,A)||L(this)}}connectedCallback(){super.connectedCallback(),this._uncontrolledValue===void 0&&(this._uncontrolledValue=this.defaultValue),queueMicrotask(this.fillAnatomy)}firstUpdated(){!this.getAttribute("aria-label")&&!this.getAttribute("aria-labelledby")&&_()&&console.warn('[skdx] Steps: the root <ol> has no accessible name. Give it an aria-label ("Checkout progress") or an aria-labelledby pointing at a visible heading \u2014 a list takes no name from its items, so the step captions inside cannot supply one.')}getCurrentValue(){return this.value!==void 0?this.value:this.current!==void 0?String(this.current):this._uncontrolledValue}statusLabel(e){return e==="completed"?this.completedLabel:e==="current"?this.currentLabel:e==="error"?this.errorLabel:e==="disabled"?this.disabledLabel:this.incompleteLabel}getItemState(e){return this._resolveItems().find(t=>t.value===e)}canActivate(e){return S(this._resolveItems(),e,this.getCurrentValue(),this.navigationMode)}activate(e){this.canActivate(e)&&this.getCurrentValue()!==e&&(this.value===void 0&&(this._uncontrolledValue=e),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this._refreshDescendants())}registerItem(e){this._items.push(e)}unregisterItem(e){let t=this._items.indexOf(e);t!==-1&&this._items.splice(t,1)}registerTrigger(e){this._triggers.add(e)}unregisterTrigger(e){this._triggers.delete(e)}refreshDescendants(e){this._refreshDescendants(e)}_resolveItems(){return this._items.map(e=>({value:e.value,completed:e.completed,disabled:e.disabled}))}_refreshDescendants(e){for(let t of this._items)t!==e&&t.refresh();for(let t of this._triggers)t!==e&&t.refresh()}updated(e){(e.has("items")||e.has("current"))&&this.fillAnatomy(),e.has("current")&&this._refreshDescendants(),(e.has("value")||e.has("navigationMode")||e.has("orientation"))&&this._refreshDescendants(),y(this,{"data-orientation":this.orientation})}render(){let e=this.getAttribute("aria-label"),t=this.getAttribute("aria-labelledby");return f`<ol
+      part="steps"
+      role="list"
+      aria-label=${e??h}
+      aria-labelledby=${t??h}
+      data-orientation=${this.orientation}
+    >
+      <slot @slotchange=${this.fillAnatomy}></slot>
+    </ol>`}};i.styles=c`
     :host {
       display: contents;
     }
@@ -24,4 +30,4 @@ var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var r=(o,a,e,t
       padding: 0;
       list-style: none;
     }
-  `,r([s({type:String})],i.prototype,"value",2),r([s({type:String,attribute:"default-value"})],i.prototype,"defaultValue",2),r([s({type:String,reflect:!0})],i.prototype,"orientation",2),r([s({type:String,attribute:"navigation-mode"})],i.prototype,"navigationMode",2),r([s({type:String,attribute:"completed-label"})],i.prototype,"completedLabel",2),r([s({type:String,attribute:"current-label"})],i.prototype,"currentLabel",2),r([s({type:String,attribute:"incomplete-label"})],i.prototype,"incompleteLabel",2),r([s({type:String,attribute:"disabled-label"})],i.prototype,"disabledLabel",2),r([f()],i.prototype,"_uncontrolledValue",2),i=r([g("skdx-steps","steps","root")],i);export{i as SkdxSteps};
+  `,r([s({type:String})],i.prototype,"value",2),r([s({type:String,attribute:"default-value"})],i.prototype,"defaultValue",2),r([s({attribute:!1})],i.prototype,"items",2),r([s({type:Number})],i.prototype,"current",2),r([s({type:String,reflect:!0})],i.prototype,"orientation",2),r([s({type:String,attribute:"navigation-mode"})],i.prototype,"navigationMode",2),r([s({type:String,attribute:"completed-label"})],i.prototype,"completedLabel",2),r([s({type:String,attribute:"current-label"})],i.prototype,"currentLabel",2),r([s({type:String,attribute:"incomplete-label"})],i.prototype,"incompleteLabel",2),r([s({type:String,attribute:"disabled-label"})],i.prototype,"disabledLabel",2),r([s({type:String,attribute:"error-label"})],i.prototype,"errorLabel",2),r([b()],i.prototype,"_uncontrolledValue",2),i=r([v("skdx-steps","steps","root")],i);export{i as SkdxSteps};

package/dist/steps/StepsAnatomy.cjs

@@ -0,0 +1,14 @@
+"use strict";var n=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var l=(t,e)=>{for(var r in e)n(t,r,{get:e[r],enumerable:!0})},m=(t,e,r,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of o(e))!c.call(t,s)&&s!==r&&n(t,s,{get:()=>e[s],enumerable:!(a=d(e,s))||a.enumerable});return t};var k=t=>m(n({},"__esModule",{value:!0}),t);var x={};l(x,{STEPS_ANATOMY_GENERATED:()=>_,fillStepsAnatomy:()=>g});module.exports=k(x);var p=require("lit"),i=require("lit/directives/repeat.js"),u=require("./StepsItem.cjs"),$=require("./StepsTrigger.cjs"),_="data-skdx-steps-generated";function g(t){let e=t.current,r=t.items??[];(0,p.render)((0,i.repeat)(r,(a,s)=>s,(a,s)=>p.html`
+        <skdx-steps-item
+          data-skdx-steps-generated
+          value=${String(s)}
+          ?completed=${e!==void 0&&s<e}
+        >
+          <skdx-steps-trigger value=${String(s)}>
+            <span class="skdx-steps__indicator" aria-hidden="true">${s+1}</span>
+            <span class="skdx-steps__title">${a.label}</span>
+          </skdx-steps-trigger>
+          ${a.description===void 0?p.nothing:p.html`<span class="skdx-steps__description">${a.description}</span>`}
+          ${s<r.length-1?p.html`<span class="skdx-steps__separator" aria-hidden="true"></span>`:p.nothing}
+        </skdx-steps-item>
+      `),t,{host:t})}0&&(module.exports={STEPS_ANATOMY_GENERATED,fillStepsAnatomy});

package/dist/steps/StepsAnatomy.d.cts

@@ -0,0 +1,10 @@
+import type { SkdxSteps } from './Steps.cjs';
+import './StepsItem.cjs';
+import './StepsTrigger.cjs';
+/** @internal Marks a direct child generated by this module. Written literally in the template. */
+export declare const STEPS_ANATOMY_GENERATED = "data-skdx-steps-generated";
+/**
+ * @internal Builds one Item per entry in `root.items`, with everything before
+ * `current` marked completed. Called only when the root has no consumer-authored composition.
+ */
+export declare function fillStepsAnatomy(root: SkdxSteps): void;

package/dist/steps/StepsAnatomy.d.ts

@@ -0,0 +1,10 @@
+import type { SkdxSteps } from './Steps.js';
+import './StepsItem.js';
+import './StepsTrigger.js';
+/** @internal Marks a direct child generated by this module. Written literally in the template. */
+export declare const STEPS_ANATOMY_GENERATED = "data-skdx-steps-generated";
+/**
+ * @internal Builds one Item per entry in `root.items`, with everything before
+ * `current` marked completed. Called only when the root has no consumer-authored composition.
+ */
+export declare function fillStepsAnatomy(root: SkdxSteps): void;

package/dist/steps/StepsAnatomy.js

@@ -0,0 +1,14 @@
+import{html as p,render as i,nothing as n}from"lit";import{repeat as d}from"lit/directives/repeat.js";import"./StepsItem.js";import"./StepsTrigger.js";var k="data-skdx-steps-generated";function _(t){let r=t.current,a=t.items??[];i(d(a,(e,s)=>s,(e,s)=>p`
+        <skdx-steps-item
+          data-skdx-steps-generated
+          value=${String(s)}
+          ?completed=${r!==void 0&&s<r}
+        >
+          <skdx-steps-trigger value=${String(s)}>
+            <span class="skdx-steps__indicator" aria-hidden="true">${s+1}</span>
+            <span class="skdx-steps__title">${e.label}</span>
+          </skdx-steps-trigger>
+          ${e.description===void 0?n:p`<span class="skdx-steps__description">${e.description}</span>`}
+          ${s<a.length-1?p`<span class="skdx-steps__separator" aria-hidden="true"></span>`:n}
+        </skdx-steps-item>
+      `),t,{host:t})}export{k as STEPS_ANATOMY_GENERATED,_ as fillStepsAnatomy};

package/dist/steps/StepsItem.cjs

@@ -1,8 +1,8 @@
-"use strict";var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var y=(i,e)=>{for(var t in e)d(i,t,{get:e[t],enumerable:!0})},k=(i,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of v(e))!f.call(i,s)&&s!==t&&d(i,s,{get:()=>e[s],enumerable:!(a=h(e,s))||a.enumerable});return i};var A=i=>k(d({},"__esModule",{value:!0}),i),l=(i,e,t,a)=>{for(var s=a>1?void 0:a?h(e,t):e,c=i.length-1,u;c>=0;c--)(u=i[c])&&(s=(a?u(e,t,s):u(s))||s);return a&&s&&d(e,t,s),s};var g={};y(g,{SkdxStepsItem:()=>r});module.exports=A(g);var o=require("lit"),n=require("lit/decorators.js"),p=require("../internal/define.cjs"),m=require("../internal/styles.cjs"),C=require("../utils/visually-hidden.cjs"),b=require("./steps-core.cjs");var r=class extends o.LitElement{constructor(){super(...arguments);this.value="";this.completed=!1;this.disabled=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listitem"),this.closest("skdx-steps")?.registerItem(this),this._sync()}disconnectedCallback(){super.disconnectedCallback(),this.closest("skdx-steps")?.unregisterItem(this)}refresh(){this._sync(),this.requestUpdate()}get status(){let t=this.closest("skdx-steps");return(0,b.stepStatus)({completed:this.completed,disabled:this.disabled},t?.getCurrentValue()===this.value)}_sync(){let t=this.status;this.setAttribute("data-status",t),this.setAttribute("data-value",this.value),this.setAttribute("data-orientation",this.closest("skdx-steps")?.orientation??"horizontal"),this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),t==="current"?this.setAttribute("aria-current","step"):this.removeAttribute("aria-current")}updated(t){this._sync(),(t.has("completed")||t.has("disabled"))&&this.closest("skdx-steps")?.refreshDescendants(this)}render(){let t=this.status;return o.html`<slot></slot>
-      <skdx-visually-hidden data-status-text=${t}
+"use strict";var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var y=(r,e)=>{for(var t in e)n(r,t,{get:e[t],enumerable:!0})},k=(r,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of f(e))!v.call(r,s)&&s!==t&&n(r,s,{get:()=>e[s],enumerable:!(a=p(e,s))||a.enumerable});return r};var g=r=>k(n({},"__esModule",{value:!0}),r),o=(r,e,t,a)=>{for(var s=a>1?void 0:a?p(e,t):e,u=r.length-1,h;u>=0;u--)(h=r[u])&&(s=(a?h(e,t,s):h(s))||s);return a&&s&&n(e,t,s),s};var A={};y(A,{SkdxStepsItem:()=>i});module.exports=g(A);var l=require("lit"),d=require("lit/decorators.js"),c=require("../internal/define.cjs"),m=require("../internal/styles.cjs"),C=require("../utils/visually-hidden.cjs"),b=require("./steps-core.cjs");var i=class extends l.LitElement{constructor(){super(...arguments);this.value="";this.completed=!1;this.disabled=!1;this.error=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listitem");let t=this.closest("skdx-steps");t?(0,c.whenUpgraded)(t,()=>{t.registerItem(this),this._sync()}):this._sync()}disconnectedCallback(){super.disconnectedCallback(),this.closest("skdx-steps")?.unregisterItem(this)}refresh(){this._sync(),this.requestUpdate()}get status(){let t=customElements.get("skdx-steps")?this.closest("skdx-steps"):null;return(0,b.stepStatus)({completed:this.completed,disabled:this.disabled,error:this.error},t?.getCurrentValue()===this.value)}_sync(){let t=this.status;this.setAttribute("data-state",t),this.setAttribute("data-value",this.value),this.setAttribute("data-orientation",this.closest("skdx-steps")?.orientation??"horizontal"),this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),t==="current"?this.setAttribute("aria-current","step"):this.removeAttribute("aria-current")}updated(t){this._sync(),(t.has("completed")||t.has("disabled")||t.has("error"))&&this.closest("skdx-steps")?.refreshDescendants(this)}render(){let t=this.status;return l.html`<slot></slot>
+      <skdx-visually-hidden data-state-text=${t}
         >${this.closest("skdx-steps")?.statusLabel(t)??""}</skdx-visually-hidden
-      >`}};r.styles=[m.hiddenHostStyles,o.css`
+      >`}};i.styles=[m.hiddenHostStyles,l.css`
       :host {
         display: block;
       }
-    `],l([(0,n.property)({type:String,reflect:!0})],r.prototype,"value",2),l([(0,n.property)({type:Boolean,reflect:!0})],r.prototype,"completed",2),l([(0,n.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),r=l([(0,p.customElement)("skdx-steps-item","steps","item")],r);0&&(module.exports={SkdxStepsItem});
+    `],o([(0,d.property)({type:String,reflect:!0})],i.prototype,"value",2),o([(0,d.property)({type:Boolean,reflect:!0})],i.prototype,"completed",2),o([(0,d.property)({type:Boolean,reflect:!0})],i.prototype,"disabled",2),o([(0,d.property)({type:Boolean,reflect:!0})],i.prototype,"error",2),i=o([(0,c.customElement)("skdx-steps-item","steps","item")],i);0&&(module.exports={SkdxStepsItem});

package/dist/steps/StepsItem.d.cts

@@ -2,15 +2,9 @@ import { LitElement } from 'lit';
 import '../utils/visually-hidden.cjs';
 import { type StepStatus } from './steps-core.cjs';
 /**
- * `<skdx-steps-item>` — a single step. Sets `role="listitem"` on the host (it
- * isn't a real `<li>`, since the ancestor `<skdx-steps>`' real `<ol>` lives
- * inside that element's own shadow root and this element is merely slotted
- * into it), together with `data-status`, `aria-current="step"` while it is
- * the current step, and `data-disabled`.
- *
- * Its visually-hidden status element lives in this element's shadow root, so
- * the status reaches assistive tech as text rather than only as colour or
- * position.
+ * A single step with `role="listitem"`, `data-state`, `aria-current="step"`
+ * (when current), and a visually-hidden status element announcing the state
+ * to assistive tech.
  *
  * @example
  * ```html
@@ -22,18 +16,25 @@ export declare class SkdxStepsItem extends LitElement {
     /** Unique identifier matched against the root's `value` and a `<skdx-steps-trigger>`'s `value`. */
     value: string;
     /**
-     * Whether this step has been completed. Drives `data-status` and, in linear
-     * mode, which steps a trigger may activate.
+     * Whether this step is completed. Drives `data-state` and, in linear mode,
+     * which steps a trigger may activate.
      * @default false
      */
     completed: boolean;
     /**
-     * Whether this step can be activated at all. A disabled step's trigger
-     * leaves the tab order and refuses activation, but the step does not move
-     * the linear frontier.
+     * Whether this step can be activated. A disabled step's trigger leaves the
+     * tab order and refuses activation, without moving the linear frontier.
      * @default false
      */
     disabled: boolean;
+    /**
+     * Whether this step is in an error state (form validation or upload failure).
+     * Drives `data-state="error"` and the `error-label` status text, announcing
+     * separately. Ranks below `current`: the current step announces as current
+     * even while failing.
+     * @default false
+     */
+    error: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /** @internal Called by the parent `<skdx-steps>` whenever the current step changes. */