@skdx/web-components 0.28.0 → 0.29.0

package/dist/stepper/Stepper.d.cts

@@ -0,0 +1,137 @@
+import { LitElement, type TemplateResult } from 'lit';
+import { type StepperItemState, type StepperNavigationMode, type StepperOrientation, type StepStatus } from './stepper-core.cjs';
+/** One step of a derived `<skdx-stepper>`: the whole of what `items` takes. */
+export interface SkdxStepperStepDescriptor {
+    /** 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;
+}
+/** The subset of `<skdx-stepper-item>` the root needs in order to resolve step state. */
+export interface StepperItemLike extends RefreshableStep {
+    value: string;
+    completed: boolean;
+    disabled: boolean;
+    error: boolean;
+}
+/**
+ * Renders an `<ol>` list of steps with a controlled or uncontrolled current step, deriving steps from `items` or accepting hand-composed children.
+ *
+ * @example
+ * ```html
+ * <skdx-stepper aria-label="Checkout progress" current="1"></skdx-stepper>
+ * ```
+ * ```ts
+ * steps.items = [{ label: 'Cart' }, { label: 'Shipping' }];
+ * ```
+ *
+ * @csspart stepper - The native `<ol>` element inside the shadow root.
+ *
+ * @fires value-change - Fired when the step changes. Suppressed for steps blocked by navigation mode or disabled state.
+ */
+export declare class SkdxStepper extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Current step value for controlled usage. Listen for `value-change`.
+     * @default undefined — uncontrolled, tracks internally.
+     */
+    value?: string;
+    /**
+     * Initial current step value for uncontrolled usage.
+     * @default undefined — no step is current until one is activated.
+     */
+    defaultValue?: string;
+    /**
+     * Stepper to derive as Item/Trigger pairs (property only).
+     * @default undefined — nothing is derived; hand-composed children are used.
+     */
+    items?: readonly SkdxStepperStepDescriptor[];
+    /**
+     * 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: StepperOrientation;
+    /**
+     * `'linear'` restricts to completed, current, and next incomplete steps;
+     * `'non-linear'` allows any non-disabled step.
+     * @default 'linear'
+     */
+    navigationMode: StepperNavigationMode;
+    /**
+     * Visually-hidden status text for a completed step.
+     * @default 'Completed'
+     */
+    completedLabel: string;
+    /**
+     * Visually-hidden status text for the current step.
+     * @default 'Current step'
+     */
+    currentLabel: string;
+    /**
+     * Visually-hidden status text for a step that is neither completed nor current.
+     * @default 'Not completed'
+     */
+    incompleteLabel: string;
+    /**
+     * Visually-hidden status text for a disabled step.
+     * @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;
+    protected firstUpdated(): void;
+    /** The current step's value, resolving controlled vs. uncontrolled. */
+    getCurrentValue(): string | undefined;
+    /**
+     * The visually-hidden text announced for a given status.
+     * @internal
+     */
+    statusLabel(status: StepStatus): string;
+    /**
+     * The registered step's live state, or `undefined` before it has registered.
+     * @internal
+     */
+    getItemState(value: string): StepperItemState | undefined;
+    /** Whether a trigger for `value` may activate its step under the current navigation mode. */
+    canActivate(value: string): boolean;
+    /** Activates `value` when {@link SkdxStepper.canActivate} allows it, firing `value-change`; a no-op otherwise. */
+    activate(value: string): void;
+    /** @internal Called by a mounting `<skdx-stepper-item>`. */
+    registerItem(el: StepperItemLike): void;
+    /** @internal Called by an unmounting `<skdx-stepper-item>`. */
+    unregisterItem(el: StepperItemLike): void;
+    /** @internal Called by a mounting `<skdx-stepper-trigger>`. */
+    registerTrigger(el: RefreshableStep): void;
+    /** @internal Called by an unmounting `<skdx-stepper-trigger>`. */
+    unregisterTrigger(el: RefreshableStep): void;
+    /** @internal Re-syncs every step and trigger, skipping `except` since it is already mid-update. */
+    refreshDescendants(except?: StepperItemLike | RefreshableStep): void;
+    private _resolveItems;
+    private _refreshDescendants;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-stepper': SkdxStepper;
+    }
+}

package/dist/stepper/Stepper.d.ts

@@ -0,0 +1,137 @@
+import { LitElement, type TemplateResult } from 'lit';
+import { type StepperItemState, type StepperNavigationMode, type StepperOrientation, type StepStatus } from './stepper-core.js';
+/** One step of a derived `<skdx-stepper>`: the whole of what `items` takes. */
+export interface SkdxStepperStepDescriptor {
+    /** 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;
+}
+/** The subset of `<skdx-stepper-item>` the root needs in order to resolve step state. */
+export interface StepperItemLike extends RefreshableStep {
+    value: string;
+    completed: boolean;
+    disabled: boolean;
+    error: boolean;
+}
+/**
+ * Renders an `<ol>` list of steps with a controlled or uncontrolled current step, deriving steps from `items` or accepting hand-composed children.
+ *
+ * @example
+ * ```html
+ * <skdx-stepper aria-label="Checkout progress" current="1"></skdx-stepper>
+ * ```
+ * ```ts
+ * steps.items = [{ label: 'Cart' }, { label: 'Shipping' }];
+ * ```
+ *
+ * @csspart stepper - The native `<ol>` element inside the shadow root.
+ *
+ * @fires value-change - Fired when the step changes. Suppressed for steps blocked by navigation mode or disabled state.
+ */
+export declare class SkdxStepper extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Current step value for controlled usage. Listen for `value-change`.
+     * @default undefined — uncontrolled, tracks internally.
+     */
+    value?: string;
+    /**
+     * Initial current step value for uncontrolled usage.
+     * @default undefined — no step is current until one is activated.
+     */
+    defaultValue?: string;
+    /**
+     * Stepper to derive as Item/Trigger pairs (property only).
+     * @default undefined — nothing is derived; hand-composed children are used.
+     */
+    items?: readonly SkdxStepperStepDescriptor[];
+    /**
+     * 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: StepperOrientation;
+    /**
+     * `'linear'` restricts to completed, current, and next incomplete steps;
+     * `'non-linear'` allows any non-disabled step.
+     * @default 'linear'
+     */
+    navigationMode: StepperNavigationMode;
+    /**
+     * Visually-hidden status text for a completed step.
+     * @default 'Completed'
+     */
+    completedLabel: string;
+    /**
+     * Visually-hidden status text for the current step.
+     * @default 'Current step'
+     */
+    currentLabel: string;
+    /**
+     * Visually-hidden status text for a step that is neither completed nor current.
+     * @default 'Not completed'
+     */
+    incompleteLabel: string;
+    /**
+     * Visually-hidden status text for a disabled step.
+     * @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;
+    protected firstUpdated(): void;
+    /** The current step's value, resolving controlled vs. uncontrolled. */
+    getCurrentValue(): string | undefined;
+    /**
+     * The visually-hidden text announced for a given status.
+     * @internal
+     */
+    statusLabel(status: StepStatus): string;
+    /**
+     * The registered step's live state, or `undefined` before it has registered.
+     * @internal
+     */
+    getItemState(value: string): StepperItemState | undefined;
+    /** Whether a trigger for `value` may activate its step under the current navigation mode. */
+    canActivate(value: string): boolean;
+    /** Activates `value` when {@link SkdxStepper.canActivate} allows it, firing `value-change`; a no-op otherwise. */
+    activate(value: string): void;
+    /** @internal Called by a mounting `<skdx-stepper-item>`. */
+    registerItem(el: StepperItemLike): void;
+    /** @internal Called by an unmounting `<skdx-stepper-item>`. */
+    unregisterItem(el: StepperItemLike): void;
+    /** @internal Called by a mounting `<skdx-stepper-trigger>`. */
+    registerTrigger(el: RefreshableStep): void;
+    /** @internal Called by an unmounting `<skdx-stepper-trigger>`. */
+    unregisterTrigger(el: RefreshableStep): void;
+    /** @internal Re-syncs every step and trigger, skipping `except` since it is already mid-update. */
+    refreshDescendants(except?: StepperItemLike | RefreshableStep): void;
+    private _resolveItems;
+    private _refreshDescendants;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-stepper': SkdxStepper;
+    }
+}

package/dist/stepper/Stepper.js

@@ -0,0 +1,27 @@
+var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var i=(l,s,e,t)=>{for(var n=t>1?void 0:t?h(s,e):s,o=l.length-1,d;o>=0;o--)(d=l[o])&&(n=(t?d(s,e,n):d(n))||n);return t&&n&&u(s,e,n),n};import{css as f,html as m,LitElement as b,nothing as p}from"lit";import{property as a,state as c}from"lit/decorators.js";import{hasAuthoredParts as g}from"../internal/authored.js";import{customElement as v}from"../internal/define.js";import{isDevMode as y}from"../internal/dev-mode.js";import{emit as _}from"../internal/events.js";import{reflectHostState as S}from"../internal/part.js";import{canActivateStep as L}from"./stepper-core.js";import{fillStepsAnatomy as A,STEPPER_ANATOMY_GENERATED as I}from"./StepperAnatomy.js";var r=class extends b{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,I)||A(this)}}connectedCallback(){super.connectedCallback(),this._uncontrolledValue===void 0&&(this._uncontrolledValue=this.defaultValue),queueMicrotask(this.fillAnatomy)}firstUpdated(){!this.getAttribute("aria-label")&&!this.getAttribute("aria-labelledby")&&y()&&console.warn("[skdx] Stepper: the root <ol> has no accessible name. Give it an aria-label or an aria-labelledby pointing at a visible heading.")}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 L(this._resolveItems(),e,this.getCurrentValue(),this.navigationMode)}activate(e){this.canActivate(e)&&this.getCurrentValue()!==e&&(this.value===void 0&&(this._uncontrolledValue=e),_(this,"value-change",e),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,error:e.error}))}_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(),S(this,{"data-orientation":this.orientation})}render(){let e=this.getAttribute("aria-label"),t=this.getAttribute("aria-labelledby");return m`<ol
+      part="stepper"
+      role="list"
+      aria-label=${e??p}
+      aria-labelledby=${t??p}
+      data-orientation=${this.orientation}
+    >
+      <slot @slotchange=${this.fillAnatomy}></slot>
+    </ol>`}};r.styles=f`
+    :host {
+      display: contents;
+    }
+
+    /*
+     * The skin's flex layout targets the host, but slotted items are children
+     * of this <ol> in the flattened tree, so the list mirrors it by inheriting.
+     */
+    ol {
+      display: inherit;
+      flex-direction: inherit;
+      align-items: inherit;
+      gap: inherit;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+  `,i([a({type:String})],r.prototype,"value",2),i([a({type:String,attribute:"default-value"})],r.prototype,"defaultValue",2),i([a({attribute:!1})],r.prototype,"items",2),i([a({type:Number})],r.prototype,"current",2),i([a({type:String,reflect:!0})],r.prototype,"orientation",2),i([a({type:String,attribute:"navigation-mode"})],r.prototype,"navigationMode",2),i([a({type:String,attribute:"completed-label"})],r.prototype,"completedLabel",2),i([a({type:String,attribute:"current-label"})],r.prototype,"currentLabel",2),i([a({type:String,attribute:"incomplete-label"})],r.prototype,"incompleteLabel",2),i([a({type:String,attribute:"disabled-label"})],r.prototype,"disabledLabel",2),i([a({type:String,attribute:"error-label"})],r.prototype,"errorLabel",2),i([c()],r.prototype,"_uncontrolledValue",2),r=i([v("skdx-stepper","stepper","root")],r);export{r as SkdxStepper};

package/dist/stepper/StepperAnatomy.cjs

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

package/dist/stepper/StepperAnatomy.d.cts

@@ -0,0 +1,10 @@
+import type { SkdxStepper } from './Stepper.cjs';
+import './StepperItem.cjs';
+import './StepperTrigger.cjs';
+/** @internal Marks a direct child generated by this module. Written literally in the template. */
+export declare const STEPPER_ANATOMY_GENERATED = "data-skdx-stepper-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: SkdxStepper): void;

package/dist/stepper/StepperAnatomy.d.ts

@@ -0,0 +1,10 @@
+import type { SkdxStepper } from './Stepper.js';
+import './StepperItem.js';
+import './StepperTrigger.js';
+/** @internal Marks a direct child generated by this module. Written literally in the template. */
+export declare const STEPPER_ANATOMY_GENERATED = "data-skdx-stepper-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: SkdxStepper): void;

package/dist/stepper/StepperAnatomy.js

@@ -0,0 +1,21 @@
+import{html as s,render as i,nothing as n}from"lit";import{repeat as d}from"lit/directives/repeat.js";import"./StepperItem.js";import"./StepperTrigger.js";var k="data-skdx-stepper-generated";function _(t){let r=t.current,a=t.items??[];i(d(a,(p,e)=>e,(p,e)=>s`
+        <skdx-stepper-item
+          data-skdx-stepper-generated
+          value=${String(e)}
+          ?completed=${r!==void 0&&e<r}
+        >
+          <skdx-stepper-trigger value=${String(e)}>
+            <span
+              class="skdx-stepper__indicator"
+              aria-hidden="true"
+              >${e+1}</span
+            >
+            <span class="skdx-stepper__title">${p.label}</span>
+          </skdx-stepper-trigger>
+          ${p.description===void 0?n:s`<span class="skdx-stepper__description">${p.description}</span>`}
+          ${e<a.length-1?s`<span
+                  class="skdx-stepper__separator"
+                  aria-hidden="true"
+                ></span>`:n}
+        </skdx-stepper-item>
+      `),t,{host:t})}export{k as STEPPER_ANATOMY_GENERATED,_ as fillStepsAnatomy};

package/dist/stepper/StepperItem.cjs

@@ -0,0 +1,8 @@
+"use strict";var n=Object.defineProperty;var h=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=h(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?h(e,t):e,u=r.length-1,p;u>=0;u--)(p=r[u])&&(s=(a?p(e,t,s):p(s))||s);return a&&s&&n(e,t,s),s};var A={};y(A,{SkdxStepperItem:()=>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("./stepper-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-stepper");t?(0,c.whenUpgraded)(t,()=>{t.registerItem(this),this._sync()}):this._sync()}disconnectedCallback(){super.disconnectedCallback(),this.closest("skdx-stepper")?.unregisterItem(this)}refresh(){this._sync(),this.requestUpdate()}get status(){let t=customElements.get("skdx-stepper")?this.closest("skdx-stepper"):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-stepper")?.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-stepper")?.refreshDescendants(this)}render(){let t=this.status;return l.html`<slot></slot>
+      <skdx-visually-hidden data-state-text=${t}
+        >${this.closest("skdx-stepper")?.statusLabel(t)??""}</skdx-visually-hidden
+      >`}};i.styles=[m.hiddenHostStyles,l.css`
+      :host {
+        display: block;
+      }
+    `],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-stepper-item","stepper","item")],i);0&&(module.exports={SkdxStepperItem});

package/dist/stepper/StepperItem.d.cts

@@ -0,0 +1,52 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '../utils/visually-hidden.cjs';
+import { type StepStatus } from './stepper-core.cjs';
+/**
+ * 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
+ * <skdx-stepper-item value="shipping" completed>Shipping</skdx-stepper-item>
+ * ```
+ */
+export declare class SkdxStepperItem extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Unique identifier matched against the root's `value` and a `<skdx-stepper-trigger>`'s `value`. */
+    value: string;
+    /**
+     * 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. 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-stepper>` whenever the current step changes. */
+    refresh(): void;
+    /** @internal The step's resolved status, also used for its visually-hidden label. */
+    get status(): StepStatus;
+    private _sync;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-stepper-item': SkdxStepperItem;
+    }
+}

package/dist/stepper/StepperItem.d.ts

@@ -0,0 +1,52 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '../utils/visually-hidden.js';
+import { type StepStatus } from './stepper-core.js';
+/**
+ * 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
+ * <skdx-stepper-item value="shipping" completed>Shipping</skdx-stepper-item>
+ * ```
+ */
+export declare class SkdxStepperItem extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Unique identifier matched against the root's `value` and a `<skdx-stepper-trigger>`'s `value`. */
+    value: string;
+    /**
+     * 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. 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-stepper>` whenever the current step changes. */
+    refresh(): void;
+    /** @internal The step's resolved status, also used for its visually-hidden label. */
+    get status(): StepStatus;
+    private _sync;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-stepper-item': SkdxStepperItem;
+    }
+}

package/dist/stepper/StepperItem.js

@@ -0,0 +1,8 @@
+var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var r=(l,i,t,a)=>{for(var s=a>1?void 0:a?u(i,t):i,d=l.length-1,n;d>=0;d--)(n=l[d])&&(s=(a?n(i,t,s):n(s))||s);return a&&s&&c(i,t,s),s};import{css as p,html as h,LitElement as m}from"lit";import{property as o}from"lit/decorators.js";import{customElement as b,whenUpgraded as f}from"../internal/define.js";import{hiddenHostStyles as v}from"../internal/styles.js";import"../utils/visually-hidden.js";import{stepStatus as y}from"./stepper-core.js";var e=class extends m{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-stepper");t?f(t,()=>{t.registerItem(this),this._sync()}):this._sync()}disconnectedCallback(){super.disconnectedCallback(),this.closest("skdx-stepper")?.unregisterItem(this)}refresh(){this._sync(),this.requestUpdate()}get status(){let t=customElements.get("skdx-stepper")?this.closest("skdx-stepper"):null;return y({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-stepper")?.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-stepper")?.refreshDescendants(this)}render(){let t=this.status;return h`<slot></slot>
+      <skdx-visually-hidden data-state-text=${t}
+        >${this.closest("skdx-stepper")?.statusLabel(t)??""}</skdx-visually-hidden
+      >`}};e.styles=[v,p`
+      :host {
+        display: block;
+      }
+    `],r([o({type:String,reflect:!0})],e.prototype,"value",2),r([o({type:Boolean,reflect:!0})],e.prototype,"completed",2),r([o({type:Boolean,reflect:!0})],e.prototype,"disabled",2),r([o({type:Boolean,reflect:!0})],e.prototype,"error",2),e=r([b("skdx-stepper-item","stepper","item")],e);export{e as SkdxStepperItem};

package/dist/stepper/StepperTrigger.cjs

@@ -0,0 +1,12 @@
+"use strict";var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var f=(i,t)=>{for(var e in t)n(i,e,{get:t[e],enumerable:!0})},k=(i,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of v(t))!m.call(i,s)&&s!==e&&n(i,s,{get:()=>t[s],enumerable:!(r=u(t,s))||r.enumerable});return i};var y=i=>k(n({},"__esModule",{value:!0}),i),c=(i,t,e,r)=>{for(var s=r>1?void 0:r?u(t,e):t,a=i.length-1,p;a>=0;a--)(p=i[a])&&(s=(r?p(t,e,s):p(s))||s);return r&&s&&n(t,e,s),s};var _={};f(_,{SkdxStepperTrigger:()=>o});module.exports=y(_);var l=require("lit"),b=require("lit/decorators.js"),d=require("../internal/define.cjs"),h=require("./stepper-core.cjs");function g(i,t){if(!i)return{status:(0,h.stepStatus)({completed:!1,disabled:!1,error:!1},!1),orientation:"horizontal"};let e=i.getItemState(t),r=e?e.completed:!1,s=e?e.disabled:!1,a=e?e.error:!1;return{status:(0,h.stepStatus)({completed:r,disabled:s,error:a},i.getCurrentValue()===t),orientation:i.orientation}}var o=class extends l.LitElement{constructor(){super(...arguments);this.value="";this._handleClick=()=>{this.closest("skdx-stepper")?.activate(this.value)};this._handleKeydown=e=>{e.key!==" "&&e.key!=="Enter"||(e.preventDefault(),this.closest("skdx-stepper")?.activate(this.value))}}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._handleClick),this.addEventListener("keydown",this._handleKeydown);let e=this.closest("skdx-stepper");e?(0,d.whenUpgraded)(e,()=>{e.registerTrigger(this),this._sync()}):this._sync()}disconnectedCallback(){super.disconnectedCallback(),this.closest("skdx-stepper")?.unregisterTrigger(this),this.removeEventListener("click",this._handleClick),this.removeEventListener("keydown",this._handleKeydown)}refresh(){this._sync()}get _disabled(){return this.closest("skdx-stepper")?.getItemState(this.value)?.disabled??!1}get _blocked(){let e=this.closest("skdx-stepper");return!this._disabled&&!(e?.canActivate(this.value)??!1)}_sync(){let e=null;customElements.get("skdx-stepper")&&(e=this.closest("skdx-stepper"));let{status:r,orientation:s}=g(e,this.value);this.setAttribute("role","button"),this.setAttribute("data-state",r),this.setAttribute("data-value",this.value),this.setAttribute("data-orientation",s);let a=this._disabled;a?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),a||this._blocked?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),this.setAttribute("tabindex",a?"-1":"0")}updated(){this._sync()}render(){return l.html`<slot></slot>`}};o.styles=l.css`
+    :host {
+      display: inline-block;
+      cursor: pointer;
+      /* The host is the button here; the skin zeroes only the inline half of
+         the UA button padding the other frameworks' trigger renders with. */
+      padding-block: 1px;
+    }
+    :host([data-disabled]) {
+      cursor: default;
+    }
+  `,c([(0,b.property)({type:String,reflect:!0})],o.prototype,"value",2),o=c([(0,d.customElement)("skdx-stepper-trigger","stepper","trigger")],o);0&&(module.exports={SkdxStepperTrigger});

package/dist/stepper/StepperTrigger.d.cts

@@ -0,0 +1,34 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Optional interactive control making a step navigable. Sets `role="button"` and
+ * state attributes on the host. Blocked steps report `aria-disabled="true"` and
+ * refuse activation; disabled steps also leave the tab order.
+ *
+ * @example
+ * ```html
+ * <skdx-stepper-item value="payment">
+ *   <skdx-stepper-trigger value="payment">Payment</skdx-stepper-trigger>
+ * </skdx-stepper-item>
+ * ```
+ */
+export declare class SkdxStepperTrigger extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** The owning `<skdx-stepper-item>`'s `value` — the step this trigger activates. */
+    value: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Called by the parent `<skdx-stepper>` whenever the current step or the registry changes. */
+    refresh(): void;
+    private get _disabled();
+    private get _blocked();
+    private _sync;
+    private readonly _handleClick;
+    private readonly _handleKeydown;
+    protected updated(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-stepper-trigger': SkdxStepperTrigger;
+    }
+}

package/dist/stepper/StepperTrigger.d.ts

@@ -0,0 +1,34 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Optional interactive control making a step navigable. Sets `role="button"` and
+ * state attributes on the host. Blocked steps report `aria-disabled="true"` and
+ * refuse activation; disabled steps also leave the tab order.
+ *
+ * @example
+ * ```html
+ * <skdx-stepper-item value="payment">
+ *   <skdx-stepper-trigger value="payment">Payment</skdx-stepper-trigger>
+ * </skdx-stepper-item>
+ * ```
+ */
+export declare class SkdxStepperTrigger extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** The owning `<skdx-stepper-item>`'s `value` — the step this trigger activates. */
+    value: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Called by the parent `<skdx-stepper>` whenever the current step or the registry changes. */
+    refresh(): void;
+    private get _disabled();
+    private get _blocked();
+    private _sync;
+    private readonly _handleClick;
+    private readonly _handleKeydown;
+    protected updated(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-stepper-trigger': SkdxStepperTrigger;
+    }
+}

package/dist/stepper/StepperTrigger.js

@@ -0,0 +1,12 @@
+var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var n=(i,r,e,a)=>{for(var t=a>1?void 0:a?c(r,e):r,s=i.length-1,l;s>=0;s--)(l=i[s])&&(t=(a?l(r,e,t):l(t))||t);return a&&t&&p(r,e,t),t};import{css as h,html as u,LitElement as b}from"lit";import{property as v}from"lit/decorators.js";import{customElement as m,whenUpgraded as f}from"../internal/define.js";import{stepStatus as d}from"./stepper-core.js";function k(i,r){if(!i)return{status:d({completed:!1,disabled:!1,error:!1},!1),orientation:"horizontal"};let e=i.getItemState(r),a=e?e.completed:!1,t=e?e.disabled:!1,s=e?e.error:!1;return{status:d({completed:a,disabled:t,error:s},i.getCurrentValue()===r),orientation:i.orientation}}var o=class extends b{constructor(){super(...arguments);this.value="";this._handleClick=()=>{this.closest("skdx-stepper")?.activate(this.value)};this._handleKeydown=e=>{e.key!==" "&&e.key!=="Enter"||(e.preventDefault(),this.closest("skdx-stepper")?.activate(this.value))}}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._handleClick),this.addEventListener("keydown",this._handleKeydown);let e=this.closest("skdx-stepper");e?f(e,()=>{e.registerTrigger(this),this._sync()}):this._sync()}disconnectedCallback(){super.disconnectedCallback(),this.closest("skdx-stepper")?.unregisterTrigger(this),this.removeEventListener("click",this._handleClick),this.removeEventListener("keydown",this._handleKeydown)}refresh(){this._sync()}get _disabled(){return this.closest("skdx-stepper")?.getItemState(this.value)?.disabled??!1}get _blocked(){let e=this.closest("skdx-stepper");return!this._disabled&&!(e?.canActivate(this.value)??!1)}_sync(){let e=null;customElements.get("skdx-stepper")&&(e=this.closest("skdx-stepper"));let{status:a,orientation:t}=k(e,this.value);this.setAttribute("role","button"),this.setAttribute("data-state",a),this.setAttribute("data-value",this.value),this.setAttribute("data-orientation",t);let s=this._disabled;s?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),s||this._blocked?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),this.setAttribute("tabindex",s?"-1":"0")}updated(){this._sync()}render(){return u`<slot></slot>`}};o.styles=h`
+    :host {
+      display: inline-block;
+      cursor: pointer;
+      /* The host is the button here; the skin zeroes only the inline half of
+         the UA button padding the other frameworks' trigger renders with. */
+      padding-block: 1px;
+    }
+    :host([data-disabled]) {
+      cursor: default;
+    }
+  `,n([v({type:String,reflect:!0})],o.prototype,"value",2),o=n([m("skdx-stepper-trigger","stepper","trigger")],o);export{o as SkdxStepperTrigger};

package/dist/stepper/index.cjs

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

package/dist/stepper/index.d.cts

@@ -0,0 +1,2 @@
+export { SkdxStepper, type SkdxStepperStepDescriptor } from './Stepper.cjs';
+export type { StepStatus, StepperOrientation, StepperNavigationMode, StepperItemState, } from './stepper-core.cjs';

package/dist/stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { SkdxStepper, type SkdxStepperStepDescriptor } from './Stepper.js';
+export type { StepStatus, StepperOrientation, StepperNavigationMode, StepperItemState, } from './stepper-core.js';

package/dist/stepper/index.js

@@ -0,0 +1 @@
+import{SkdxStepper as p}from"./Stepper.js";export{p as SkdxStepper};

package/dist/stepper/primitives.cjs

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