@skdx/web-components 0.26.0

package/dist/spinner/index.d.ts

@@ -0,0 +1 @@
+export { SkdxSpinner } from './Spinner.js';

package/dist/spinner/index.js

@@ -0,0 +1 @@
+import{SkdxSpinner as n}from"./Spinner.js";export{n as SkdxSpinner};

package/dist/split-button/SplitButton.cjs

@@ -0,0 +1,5 @@
+"use strict";var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var v=(r,e)=>{for(var s in e)c(r,s,{get:e[s],enumerable:!0})},f=(r,e,s,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of p(e))!u.call(r,t)&&t!==s&&c(r,t,{get:()=>e[t],enumerable:!(o=m(e,t))||o.enumerable});return r};var g=r=>f(c({},"__esModule",{value:!0}),r),d=(r,e,s,o)=>{for(var t=o>1?void 0:o?m(e,s):e,n=r.length-1,i;n>=0;n--)(i=r[n])&&(t=(o?i(e,s,t):i(t))||t);return o&&t&&c(e,s,t),t};var h={};v(h,{SkdxSplitButton:()=>l});module.exports=g(h);var a=require("lit"),b=require("../internal/define.cjs");var l=class extends a.LitElement{connectedCallback(){super.connectedCallback(),this.setAttribute("role","group")}render(){return a.html`<slot></slot>`}};l.styles=a.css`
+    :host {
+      display: contents;
+    }
+  `,l=d([(0,b.customElement)("skdx-split-button","split-button","root")],l);0&&(module.exports={SkdxSplitButton});

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

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-split-button>` — the Web Components implementation of the shared
+ * SplitButton contract (see `@skdx/shared`'s `splitButtonContract`).
+ * Groups a primary action button with a small trigger that opens a menu of
+ * related actions. Sets `role="group"` on itself and renders `display:
+ * contents` — deliberately stateless, it owns no open/menu state; wrap
+ * `<skdx-split-button-trigger>` with an actual menu's trigger (e.g.
+ * `<skdx-dropdown-menu-trigger>`), which owns open/close behavior.
+ *
+ * @example
+ * ```html
+ * <skdx-split-button>
+ *   <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 declare class SkdxSplitButton extends LitElement {
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-split-button': SkdxSplitButton;
+    }
+}

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

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-split-button>` — the Web Components implementation of the shared
+ * SplitButton contract (see `@skdx/shared`'s `splitButtonContract`).
+ * Groups a primary action button with a small trigger that opens a menu of
+ * related actions. Sets `role="group"` on itself and renders `display:
+ * contents` — deliberately stateless, it owns no open/menu state; wrap
+ * `<skdx-split-button-trigger>` with an actual menu's trigger (e.g.
+ * `<skdx-dropdown-menu-trigger>`), which owns open/close behavior.
+ *
+ * @example
+ * ```html
+ * <skdx-split-button>
+ *   <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 declare class SkdxSplitButton extends LitElement {
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-split-button': SkdxSplitButton;
+    }
+}

package/dist/split-button/SplitButton.js

@@ -0,0 +1,5 @@
+var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var n=(o,r,l,s)=>{for(var e=s>1?void 0:s?m(r,l):r,a=o.length-1,c;a>=0;a--)(c=o[a])&&(e=(s?c(r,l,e):c(e))||e);return s&&e&&i(r,l,e),e};import{css as d,html as b,LitElement as p}from"lit";import{customElement as u}from"../internal/define.js";var t=class extends p{connectedCallback(){super.connectedCallback(),this.setAttribute("role","group")}render(){return b`<slot></slot>`}};t.styles=d`
+    :host {
+      display: contents;
+    }
+  `,t=n([u("skdx-split-button","split-button","root")],t);export{t as SkdxSplitButton};

package/dist/split-button/SplitButtonAction.cjs

@@ -0,0 +1,9 @@
+"use strict";var n=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var u=(o,e)=>{for(var s in e)n(o,s,{get:e[s],enumerable:!0})},v=(o,e,s,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!y.call(o,t)&&t!==s&&n(o,t,{get:()=>e[t],enumerable:!(l=b(e,t))||l.enumerable});return o};var g=o=>v(n({},"__esModule",{value:!0}),o),p=(o,e,s,l)=>{for(var t=l>1?void 0:l?b(e,s):e,d=o.length-1,m;d>=0;d--)(m=o[d])&&(t=(l?m(e,s,t):m(t))||t);return l&&t&&n(e,s,t),t};var E={};u(E,{SkdxSplitButtonAction:()=>r});module.exports=g(E);var i=require("lit"),c=require("lit/decorators.js"),f=require("../internal/define.cjs"),a=require("../internal/styles.cjs");var r=class extends i.LitElement{constructor(){super(...arguments);this.disabled=!1}render(){return i.html`
+      <button part="action" type="button" ?disabled=${this.disabled}>
+        <slot></slot>
+      </button>
+    `}};r.shadowRootOptions=a.delegatesFocusShadowRootOptions,r.styles=[a.resetNativeControl,a.hiddenHostStyles,i.css`
+      :host {
+        display: inline-block;
+      }
+    `,a.controlBoxOnHost],p([(0,c.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),r=p([(0,f.customElement)("skdx-split-button-action","split-button","action")],r);0&&(module.exports={SkdxSplitButtonAction});

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-split-button-action>` — the primary action button within a
+ * `<skdx-split-button>`. Renders a native `<button type="button">` in
+ * shadow DOM (`delegatesFocus`) — style it via
+ * `skdx-split-button-action::part(action)`.
+ *
+ * @csspart action - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxSplitButtonAction extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Disables the action button, excluding it from the tab order and blocking clicks. @default false */
+    disabled: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-split-button-action': SkdxSplitButtonAction;
+    }
+}

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-split-button-action>` — the primary action button within a
+ * `<skdx-split-button>`. Renders a native `<button type="button">` in
+ * shadow DOM (`delegatesFocus`) — style it via
+ * `skdx-split-button-action::part(action)`.
+ *
+ * @csspart action - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxSplitButtonAction extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Disables the action button, excluding it from the tab order and blocking clicks. @default false */
+    disabled: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-split-button-action': SkdxSplitButtonAction;
+    }
+}

package/dist/split-button/SplitButtonAction.js

@@ -0,0 +1,9 @@
+var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var n=(r,o,a,s)=>{for(var e=s>1?void 0:s?m(o,a):o,l=r.length-1,i;l>=0;l--)(i=r[l])&&(e=(s?i(o,a,e):i(e))||e);return s&&e&&d(o,a,e),e};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 y,delegatesFocusShadowRootOptions as u,hiddenHostStyles as v,resetNativeControl as g}from"../internal/styles.js";var t=class extends c{constructor(){super(...arguments);this.disabled=!1}render(){return b`
+      <button part="action" type="button" ?disabled=${this.disabled}>
+        <slot></slot>
+      </button>
+    `}};t.shadowRootOptions=u,t.styles=[g,v,p`
+      :host {
+        display: inline-block;
+      }
+    `,y],n([f({type:Boolean,reflect:!0})],t.prototype,"disabled",2),t=n([h("skdx-split-button-action","split-button","action")],t);export{t as SkdxSplitButtonAction};

package/dist/split-button/SplitButtonTrigger.cjs

@@ -0,0 +1,9 @@
+"use strict";var n=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var y=(o,t)=>{for(var s in t)n(o,s,{get:t[s],enumerable:!0})},v=(o,t,s,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of h(t))!u.call(o,e)&&e!==s&&n(o,e,{get:()=>t[e],enumerable:!(l=b(t,e))||l.enumerable});return o};var E=o=>v(n({},"__esModule",{value:!0}),o),p=(o,t,s,l)=>{for(var e=l>1?void 0:l?b(t,s):t,d=o.length-1,m;d>=0;d--)(m=o[d])&&(e=(l?m(t,s,e):m(e))||e);return l&&e&&n(t,s,e),e};var H={};y(H,{SkdxSplitButtonTrigger:()=>r});module.exports=E(H);var i=require("lit"),c=require("lit/decorators.js"),f=require("../internal/define.cjs"),a=require("../internal/styles.cjs");var r=class extends i.LitElement{constructor(){super(...arguments);this.disabled=!1}render(){return i.html`
+      <button part="trigger" type="button" aria-haspopup="menu" ?disabled=${this.disabled}>
+        <slot></slot>
+      </button>
+    `}};r.shadowRootOptions=a.delegatesFocusShadowRootOptions,r.styles=[a.resetNativeControl,a.hiddenHostStyles,i.css`
+      :host {
+        display: inline-block;
+      }
+    `,a.controlBoxOnHost],p([(0,c.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),r=p([(0,f.customElement)("skdx-split-button-trigger","split-button","trigger")],r);0&&(module.exports={SkdxSplitButtonTrigger});

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

@@ -0,0 +1,23 @@
+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.
+ *
+ * @csspart trigger - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxSplitButtonTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Disables the trigger, excluding it from the tab order and blocking activation. @default false */
+    disabled: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-split-button-trigger': SkdxSplitButtonTrigger;
+    }
+}

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

@@ -0,0 +1,23 @@
+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.
+ *
+ * @csspart trigger - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxSplitButtonTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Disables the trigger, excluding it from the tab order and blocking activation. @default false */
+    disabled: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-split-button-trigger': SkdxSplitButtonTrigger;
+    }
+}

package/dist/split-button/SplitButtonTrigger.js

@@ -0,0 +1,9 @@
+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}>
+        <slot></slot>
+      </button>
+    `}};e.shadowRootOptions=y,e.styles=[E,v,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};

package/dist/split-button/index.cjs

@@ -0,0 +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});

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

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

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

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

package/dist/split-button/index.js

@@ -0,0 +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};

package/dist/steps/Steps.cjs

@@ -0,0 +1,27 @@
+"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`
+    :host {
+      display: contents;
+    }
+
+    /*
+     * steps.css lays the strip out on .skdx-steps — the host here — but the
+     * slotted items are children of *this* list in the flattened tree, not of
+     * the host. So the skin's flex container held exactly one item (this
+     * <ol>), and the UA's block-level list stacked every step on its own
+     * line, indented by the UA's 40px list padding. Inheriting the container
+     * properties keeps the skin authoritative: the layout is still declared
+     * once, in the stylesheet, and this list only mirrors it — including the
+     * column direction the skin switches to for data-orientation=vertical.
+     */
+    ol {
+      display: inherit;
+      flex-direction: inherit;
+      align-items: inherit;
+      gap: inherit;
+      margin: 0;
+      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});

package/dist/steps/Steps.d.cts

@@ -0,0 +1,142 @@
+import { LitElement } from 'lit';
+import { type StepsItemState, type StepsNavigationMode, type StepsOrientation, type StepStatus } from './steps-core.cjs';
+/** 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-steps-item>` the root needs in order to resolve step state. */
+export interface StepsItemLike extends RefreshableStep {
+    value: string;
+    completed: boolean;
+    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.
+ *
+ * @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>
+ * ```
+ *
+ * @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.
+ */
+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.
+     */
+    value?: string;
+    /**
+     * Initially current step's 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.
+     * @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.
+     * @default 'linear'
+     */
+    navigationMode: StepsNavigationMode;
+    /**
+     * 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;
+    private _uncontrolledValue?;
+    private readonly _items;
+    private readonly _triggers;
+    connectedCallback(): void;
+    /** The current step's value, resolving controlled vs. uncontrolled. */
+    getCurrentValue(): string | undefined;
+    /**
+     * The visually-hidden text announced for a given status.
+     *
+     * A call `<skdx-steps-item>` / `<skdx-steps-trigger>` makes on its root, not consumer API. It stays `public` to the compiler because those are instances of different classes, which `protected` cannot express.
+     *
+     * @internal
+     */
+    statusLabel(status: StepStatus): string;
+    /**
+     * The registered step's live state, or `undefined` before it has registered.
+     *
+     * A call `<skdx-steps-item>` / `<skdx-steps-trigger>` makes on its root, not consumer API. It stays `public` to the compiler because those are instances of different classes, which `protected` cannot express.
+     *
+     * @internal
+     */
+    getItemState(value: string): StepsItemState | undefined;
+    /** Whether a trigger for `value` may activate its step under the current navigation mode. */
+    canActivate(value: string): boolean;
+    /** Activates `value` when {@link SkdxSteps.canActivate} allows it, firing `value-change`; a no-op otherwise. */
+    activate(value: string): void;
+    /** @internal Called by a mounting `<skdx-steps-item>`. */
+    registerItem(el: StepsItemLike): void;
+    /** @internal Called by an unmounting `<skdx-steps-item>`. */
+    unregisterItem(el: StepsItemLike): void;
+    /** @internal Called by a mounting `<skdx-steps-trigger>`. */
+    registerTrigger(el: RefreshableStep): void;
+    /** @internal Called by an unmounting `<skdx-steps-trigger>`. */
+    unregisterTrigger(el: RefreshableStep): void;
+    /**
+     * @internal Re-syncs every step and trigger. Called whenever the current
+     * step changes, and whenever a step's own `completed`/`disabled` changes —
+     * a step's completion moves the linear frontier, which every *other*
+     * trigger's blocked state depends on.
+     *
+     * `except` is the element asking from inside its own `updated()`. It has
+     * already re-synced itself and Lit is mid-render on it, so refreshing it
+     * would only `requestUpdate()` during an update — Lit's change-in-update
+     * warning, which the skin gallery logged on every load.
+     */
+    refreshDescendants(except?: StepsItemLike | RefreshableStep): void;
+    private _resolveItems;
+    private _refreshDescendants;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-steps': SkdxSteps;
+    }
+}

package/dist/steps/Steps.d.ts

@@ -0,0 +1,142 @@
+import { LitElement } from 'lit';
+import { type StepsItemState, type StepsNavigationMode, type StepsOrientation, type StepStatus } from './steps-core.js';
+/** 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-steps-item>` the root needs in order to resolve step state. */
+export interface StepsItemLike extends RefreshableStep {
+    value: string;
+    completed: boolean;
+    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.
+ *
+ * @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>
+ * ```
+ *
+ * @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.
+ */
+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.
+     */
+    value?: string;
+    /**
+     * Initially current step's 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.
+     * @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.
+     * @default 'linear'
+     */
+    navigationMode: StepsNavigationMode;
+    /**
+     * 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;
+    private _uncontrolledValue?;
+    private readonly _items;
+    private readonly _triggers;
+    connectedCallback(): void;
+    /** The current step's value, resolving controlled vs. uncontrolled. */
+    getCurrentValue(): string | undefined;
+    /**
+     * The visually-hidden text announced for a given status.
+     *
+     * A call `<skdx-steps-item>` / `<skdx-steps-trigger>` makes on its root, not consumer API. It stays `public` to the compiler because those are instances of different classes, which `protected` cannot express.
+     *
+     * @internal
+     */
+    statusLabel(status: StepStatus): string;
+    /**
+     * The registered step's live state, or `undefined` before it has registered.
+     *
+     * A call `<skdx-steps-item>` / `<skdx-steps-trigger>` makes on its root, not consumer API. It stays `public` to the compiler because those are instances of different classes, which `protected` cannot express.
+     *
+     * @internal
+     */
+    getItemState(value: string): StepsItemState | undefined;
+    /** Whether a trigger for `value` may activate its step under the current navigation mode. */
+    canActivate(value: string): boolean;
+    /** Activates `value` when {@link SkdxSteps.canActivate} allows it, firing `value-change`; a no-op otherwise. */
+    activate(value: string): void;
+    /** @internal Called by a mounting `<skdx-steps-item>`. */
+    registerItem(el: StepsItemLike): void;
+    /** @internal Called by an unmounting `<skdx-steps-item>`. */
+    unregisterItem(el: StepsItemLike): void;
+    /** @internal Called by a mounting `<skdx-steps-trigger>`. */
+    registerTrigger(el: RefreshableStep): void;
+    /** @internal Called by an unmounting `<skdx-steps-trigger>`. */
+    unregisterTrigger(el: RefreshableStep): void;
+    /**
+     * @internal Re-syncs every step and trigger. Called whenever the current
+     * step changes, and whenever a step's own `completed`/`disabled` changes —
+     * a step's completion moves the linear frontier, which every *other*
+     * trigger's blocked state depends on.
+     *
+     * `except` is the element asking from inside its own `updated()`. It has
+     * already re-synced itself and Lit is mid-render on it, so refreshing it
+     * would only `requestUpdate()` during an update — Lit's change-in-update
+     * warning, which the skin gallery logged on every load.
+     */
+    refreshDescendants(except?: StepsItemLike | RefreshableStep): void;
+    private _resolveItems;
+    private _refreshDescendants;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-steps': SkdxSteps;
+    }
+}

package/dist/steps/Steps.js

@@ -0,0 +1,27 @@
+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`
+    :host {
+      display: contents;
+    }
+
+    /*
+     * steps.css lays the strip out on .skdx-steps — the host here — but the
+     * slotted items are children of *this* list in the flattened tree, not of
+     * the host. So the skin's flex container held exactly one item (this
+     * <ol>), and the UA's block-level list stacked every step on its own
+     * line, indented by the UA's 40px list padding. Inheriting the container
+     * properties keeps the skin authoritative: the layout is still declared
+     * once, in the stylesheet, and this list only mirrors it — including the
+     * column direction the skin switches to for data-orientation=vertical.
+     */
+    ol {
+      display: inherit;
+      flex-direction: inherit;
+      align-items: inherit;
+      gap: inherit;
+      margin: 0;
+      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};

package/dist/steps/StepsItem.cjs

@@ -0,0 +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}
+        >${this.closest("skdx-steps")?.statusLabel(t)??""}</skdx-visually-hidden
+      >`}};r.styles=[m.hiddenHostStyles,o.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});