@skdx/web-components 0.26.0

package/dist/steps/StepsItem.d.cts

@@ -0,0 +1,51 @@
+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.
+ *
+ * @example
+ * ```html
+ * <skdx-steps-item value="shipping" completed>Shipping</skdx-steps-item>
+ * ```
+ */
+export declare class SkdxStepsItem extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** 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.
+     * @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.
+     * @default false
+     */
+    disabled: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Called by the parent `<skdx-steps>` 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(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-steps-item': SkdxStepsItem;
+    }
+}

package/dist/steps/StepsItem.d.ts

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+import '../utils/visually-hidden.js';
+import { type StepStatus } from './steps-core.js';
+/**
+ * `<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.
+ *
+ * @example
+ * ```html
+ * <skdx-steps-item value="shipping" completed>Shipping</skdx-steps-item>
+ * ```
+ */
+export declare class SkdxStepsItem extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** 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.
+     * @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.
+     * @default false
+     */
+    disabled: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Called by the parent `<skdx-steps>` 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(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-steps-item': SkdxStepsItem;
+    }
+}

package/dist/steps/StepsItem.js

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

package/dist/steps/StepsTrigger.cjs

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

package/dist/steps/StepsTrigger.d.cts

@@ -0,0 +1,41 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-steps-trigger>` — the optional interactive control that makes a step
+ * navigable. Sets `role="button"`, `tabindex` and the state attributes on
+ * **itself** (the host) rather than on a shadow-internal `<button>`, the same
+ * way `<skdx-tabs-trigger>` does, so the control the user focuses is the
+ * element the consumer styles and queries.
+ *
+ * A step the navigation mode blocks stays focusable and readable but reports
+ * `aria-disabled="true"` and refuses activation; a step whose
+ * `<skdx-steps-item>` is `disabled` reports `aria-disabled="true"` *and* leaves
+ * the tab order.
+ *
+ * @example
+ * ```html
+ * <skdx-steps-item value="payment">
+ *   <skdx-steps-trigger value="payment">Payment</skdx-steps-trigger>
+ * </skdx-steps-item>
+ * ```
+ */
+export declare class SkdxStepsTrigger extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** The owning `<skdx-steps-item>`'s `value` — the step this trigger activates. */
+    value: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Called by the parent `<skdx-steps>` 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(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-steps-trigger': SkdxStepsTrigger;
+    }
+}

package/dist/steps/StepsTrigger.d.ts

@@ -0,0 +1,41 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-steps-trigger>` — the optional interactive control that makes a step
+ * navigable. Sets `role="button"`, `tabindex` and the state attributes on
+ * **itself** (the host) rather than on a shadow-internal `<button>`, the same
+ * way `<skdx-tabs-trigger>` does, so the control the user focuses is the
+ * element the consumer styles and queries.
+ *
+ * A step the navigation mode blocks stays focusable and readable but reports
+ * `aria-disabled="true"` and refuses activation; a step whose
+ * `<skdx-steps-item>` is `disabled` reports `aria-disabled="true"` *and* leaves
+ * the tab order.
+ *
+ * @example
+ * ```html
+ * <skdx-steps-item value="payment">
+ *   <skdx-steps-trigger value="payment">Payment</skdx-steps-trigger>
+ * </skdx-steps-item>
+ * ```
+ */
+export declare class SkdxStepsTrigger extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** The owning `<skdx-steps-item>`'s `value` — the step this trigger activates. */
+    value: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Called by the parent `<skdx-steps>` 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(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-steps-trigger': SkdxStepsTrigger;
+    }
+}

package/dist/steps/StepsTrigger.js

@@ -0,0 +1,9 @@
+var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var o=(d,r,t,s)=>{for(var e=s>1?void 0:s?c(r,t):r,i=d.length-1,l;i>=0;i--)(l=d[i])&&(e=(s?l(r,t,e):l(e))||e);return s&&e&&n(r,t,e),e};import{css as h,html as u,LitElement as v}from"lit";import{property as b}from"lit/decorators.js";import{customElement as p}from"../internal/define.js";import{stepStatus as m}from"./steps-core.js";var a=class extends v{constructor(){super(...arguments);this.value="";this._handleClick=()=>{this.closest("skdx-steps")?.activate(this.value)};this._handleKeydown=t=>{t.key!==" "&&t.key!=="Enter"||(t.preventDefault(),this.closest("skdx-steps")?.activate(this.value))}}connectedCallback(){super.connectedCallback(),this.closest("skdx-steps")?.registerTrigger(this),this.addEventListener("click",this._handleClick),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){super.disconnectedCallback(),this.closest("skdx-steps")?.unregisterTrigger(this),this.removeEventListener("click",this._handleClick),this.removeEventListener("keydown",this._handleKeydown)}refresh(){this._sync()}get _disabled(){return this.closest("skdx-steps")?.getItemState(this.value)?.disabled??!1}get _blocked(){let t=this.closest("skdx-steps");return!this._disabled&&!(t?.canActivate(this.value)??!1)}_sync(){let t=this.closest("skdx-steps"),s=t?.getItemState(this.value),e=m({completed:s?.completed??!1,disabled:s?.disabled??!1},t?.getCurrentValue()===this.value);this.setAttribute("role","button"),this.setAttribute("data-status",e),this.setAttribute("data-value",this.value),this.setAttribute("data-orientation",t?.orientation??"horizontal");let i=this._disabled;i?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),i||this._blocked?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),this.setAttribute("tabindex",i?"-1":"0")}updated(){this._sync()}render(){return u`<slot></slot>`}};a.styles=h`
+    :host {
+      display: inline-block;
+      cursor: pointer;
+    }
+    :host([data-disabled]) {
+      cursor: default;
+    }
+  `,o([b({type:String,reflect:!0})],a.prototype,"value",2),a=o([p("skdx-steps-trigger","steps","trigger")],a);export{a as SkdxStepsTrigger};

package/dist/steps/index.cjs

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

package/dist/steps/index.d.cts

@@ -0,0 +1,4 @@
+export { SkdxSteps } from './Steps.cjs';
+export { SkdxStepsItem } from './StepsItem.cjs';
+export { SkdxStepsTrigger } from './StepsTrigger.cjs';
+export type { StepStatus, StepsOrientation, StepsNavigationMode, StepsItemState } from './steps-core.cjs';

package/dist/steps/index.d.ts

@@ -0,0 +1,4 @@
+export { SkdxSteps } from './Steps.js';
+export { SkdxStepsItem } from './StepsItem.js';
+export { SkdxStepsTrigger } from './StepsTrigger.js';
+export type { StepStatus, StepsOrientation, StepsNavigationMode, StepsItemState } from './steps-core.js';

package/dist/steps/index.js

@@ -0,0 +1 @@
+import{SkdxSteps as p}from"./Steps.js";import{SkdxStepsItem as r}from"./StepsItem.js";import{SkdxStepsTrigger as s}from"./StepsTrigger.js";export{p as SkdxSteps,r as SkdxStepsItem,s as SkdxStepsTrigger};

package/dist/steps/steps-core.cjs

@@ -0,0 +1 @@
+"use strict";var i=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var u=(t,e)=>{for(var r in e)i(t,r,{get:e[r],enumerable:!0})},s=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of p(e))!d.call(t,n)&&n!==r&&i(t,n,{get:()=>e[n],enumerable:!(o=l(e,n))||o.enumerable});return t};var c=t=>s(i({},"__esModule",{value:!0}),t);var m={};u(m,{canActivateStep:()=>f,stepStatus:()=>S});module.exports=c(m);function S(t,e){return e?"current":t.completed?"completed":t.disabled?"disabled":"incomplete"}function f(t,e,r,o){let n=t.find(a=>a.value===e);return!n||n.disabled?!1:o==="non-linear"||n.completed||n.value===r?!0:t.find(a=>!a.completed)?.value===e}0&&(module.exports={canActivateStep,stepStatus});

package/dist/steps/steps-core.d.cts

@@ -0,0 +1,30 @@
+/** The four mutually exclusive statuses a single step can be in. */
+export type StepStatus = 'completed' | 'current' | 'incomplete' | 'disabled';
+/** Layout axis of a Steps list: side-by-side (`'horizontal'`) or stacked (`'vertical'`). */
+export type StepsOrientation = 'horizontal' | 'vertical';
+/**
+ * How far a `<skdx-steps-trigger>` may jump. `'linear'` allows completed steps,
+ * the current step, and the first not-yet-completed step (the frontier);
+ * `'non-linear'` allows any step that is not itself disabled.
+ */
+export type StepsNavigationMode = 'linear' | 'non-linear';
+/** A step's completion/disabled state at one moment in time. */
+export interface StepsItemState {
+    value: string;
+    completed: boolean;
+    disabled: boolean;
+}
+/**
+ * @internal The one place a step's four-way status is derived, so every part
+ * agrees. Precedence is `current` → `completed` → `disabled` → `incomplete`:
+ * a completed-but-disabled step still announces "Completed", because being
+ * unreachable is already conveyed by the trigger's disabled state.
+ */
+export declare function stepStatus(item: Omit<StepsItemState, 'value'>, current: boolean): StepStatus;
+/**
+ * @internal The whole of linear-mode enforcement. A step is reachable when it
+ * is already completed, is the current step, or is the *frontier* — the first
+ * step that is not yet completed. A disabled step never activates, but it is
+ * not a wall either: it does not shift the frontier past itself.
+ */
+export declare function canActivateStep(items: readonly StepsItemState[], value: string, currentValue: string | undefined, navigationMode: StepsNavigationMode): boolean;

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

@@ -0,0 +1,30 @@
+/** The four mutually exclusive statuses a single step can be in. */
+export type StepStatus = 'completed' | 'current' | 'incomplete' | 'disabled';
+/** Layout axis of a Steps list: side-by-side (`'horizontal'`) or stacked (`'vertical'`). */
+export type StepsOrientation = 'horizontal' | 'vertical';
+/**
+ * How far a `<skdx-steps-trigger>` may jump. `'linear'` allows completed steps,
+ * the current step, and the first not-yet-completed step (the frontier);
+ * `'non-linear'` allows any step that is not itself disabled.
+ */
+export type StepsNavigationMode = 'linear' | 'non-linear';
+/** A step's completion/disabled state at one moment in time. */
+export interface StepsItemState {
+    value: string;
+    completed: boolean;
+    disabled: boolean;
+}
+/**
+ * @internal The one place a step's four-way status is derived, so every part
+ * agrees. Precedence is `current` → `completed` → `disabled` → `incomplete`:
+ * a completed-but-disabled step still announces "Completed", because being
+ * unreachable is already conveyed by the trigger's disabled state.
+ */
+export declare function stepStatus(item: Omit<StepsItemState, 'value'>, current: boolean): StepStatus;
+/**
+ * @internal The whole of linear-mode enforcement. A step is reachable when it
+ * is already completed, is the current step, or is the *frontier* — the first
+ * step that is not yet completed. A disabled step never activates, but it is
+ * not a wall either: it does not shift the frontier past itself.
+ */
+export declare function canActivateStep(items: readonly StepsItemState[], value: string, currentValue: string | undefined, navigationMode: StepsNavigationMode): boolean;

package/dist/steps/steps-core.js

@@ -0,0 +1 @@
+function i(e,t){return t?"current":e.completed?"completed":e.disabled?"disabled":"incomplete"}function l(e,t,o,a){let n=e.find(r=>r.value===t);return!n||n.disabled?!1:a==="non-linear"||n.completed||n.value===o?!0:e.find(r=>!r.completed)?.value===t}export{l as canActivateStep,i as stepStatus};

package/dist/switch/Switch.cjs

@@ -0,0 +1,22 @@
+"use strict";var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var g=(o,t)=>{for(var a in t)n(o,a,{get:t[a],enumerable:!0})},C=(o,t,a,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of k(t))!y.call(o,s)&&s!==a&&n(o,s,{get:()=>t[s],enumerable:!(c=p(t,s))||c.enumerable});return o};var $=o=>C(n({},"__esModule",{value:!0}),o),l=(o,t,a,c)=>{for(var s=c>1?void 0:c?p(t,a):t,h=o.length-1,u;h>=0;h--)(u=o[h])&&(s=(c?u(t,a,s):u(s))||s);return c&&s&&n(t,a,s),s};var q={};g(q,{SkdxSwitch:()=>e});module.exports=$(q);var r=require("lit"),i=require("lit/decorators.js"),m=require("../internal/aria-label.cjs"),b=require("../internal/define.cjs"),v=require("../internal/form-associated.cjs"),f=require("../internal/part.cjs"),d=require("../internal/styles.cjs");var e=class extends(0,v.FormAssociated)(r.LitElement){constructor(){super(...arguments);this.checked=!1;this.disabled=!1;this.required=!1;this.invalid=!1;this.value="on";this.hostLabel=null;this.handleClick=()=>{this.checked=!this.checked,this.dispatchEvent(new CustomEvent("checked-change",{detail:this.checked,bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),this.declaredChecked??(this.declaredChecked=this.checked),this.hostLabel=(0,m.takeHostAriaLabel)(this)}formResetCallback(){this.checked=this.declaredChecked??!1}syncFormState(){this.setFormValue(this.checked?this.value:null),this.setValueMissing(this.required&&!this.checked,"Please check this box if you want to proceed.",this.buttonEl)}updated(a){(a.has("checked")||a.has("required")||a.has("value"))&&this.syncFormState(),(0,f.reflectHostState)(this,{"data-state":this.checked?"checked":"unchecked","data-disabled":this.disabled?"":null})}render(){return r.html`
+      <button
+        part="switch"
+        type="button"
+        role="switch"
+        aria-label=${this.hostLabel??r.nothing}
+        aria-checked=${this.checked}
+        aria-required=${this.required?"true":r.nothing}
+        aria-invalid=${this.invalid?"true":r.nothing}
+        data-state=${this.checked?"checked":"unchecked"}
+        data-disabled=${this.disabled?"":r.nothing}
+        data-invalid=${this.invalid?"":r.nothing}
+        ?disabled=${this.disabled}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};e.shadowRootOptions=d.delegatesFocusShadowRootOptions,e.styles=[d.resetNativeControl,d.hiddenHostStyles,r.css`
+      :host {
+        display: inline-block;
+      }
+    `,d.controlBoxOnHost],l([(0,i.property)({type:Boolean,reflect:!0})],e.prototype,"checked",2),l([(0,i.property)({type:Boolean,reflect:!0})],e.prototype,"disabled",2),l([(0,i.property)({type:Boolean,reflect:!0})],e.prototype,"required",2),l([(0,i.property)({type:Boolean,reflect:!0})],e.prototype,"invalid",2),l([(0,i.property)({type:String,reflect:!0})],e.prototype,"name",2),l([(0,i.property)({type:String})],e.prototype,"value",2),l([(0,i.property)({attribute:"required-message"})],e.prototype,"requiredMessage",2),l([(0,i.query)("button")],e.prototype,"buttonEl",2),l([(0,i.state)()],e.prototype,"hostLabel",2),e=l([(0,b.customElement)("skdx-switch","switch","root")],e);0&&(module.exports={SkdxSwitch});

package/dist/switch/Switch.d.cts

@@ -0,0 +1,75 @@
+import { LitElement } from 'lit';
+declare const SkdxSwitch_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
+    formAssociated: boolean;
+};
+/**
+ * `<skdx-switch>` — the Web Components implementation of the shared Switch
+ * contract (see `@skdx/shared`'s `switchContract`). Renders a native
+ * `<button role="switch">` in shadow DOM: behavior and accessibility only,
+ * no visual style — style the inner button with `skdx-switch::part(switch)`.
+ *
+ * Form-associated through the shared `FormAssociated` mixin: when placed inside
+ * a `<form>` with a `name` attribute, its checked state participates in
+ * `FormData` the same way a native checkbox would, including `required`
+ * validity, `form.reset()` and a `<fieldset disabled>` ancestor.
+ *
+ * @example
+ * ```html
+ * <skdx-switch name="notifications">Notifications</skdx-switch>
+ * <script type="module">
+ *   import '@skdx/web-components/switch';
+ *   document.querySelector('skdx-switch').addEventListener('checked-change', (e) => {
+ *     console.log(e.detail); // boolean
+ *   });
+ * </script>
+ * ```
+ *
+ * @csspart switch - The native `<button>` element inside the shadow root.
+ *
+ * @fires checked-change - Fired with the new checked state (boolean) whenever the switch is toggled.
+ */
+export declare class SkdxSwitch extends SkdxSwitch_base {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Checked state. Reflects to the `checked` attribute. */
+    checked: boolean;
+    /** Disables the switch and excludes it from form submission. */
+    disabled: boolean;
+    /** Marks the switch as required for native form validation. */
+    required: boolean;
+    /** Marks the switch as invalid, exposed as `aria-invalid`/`data-invalid`. */
+    invalid: boolean;
+    /** Name used as the `FormData` entry key when inside a `<form>`. @default undefined */
+    name?: string;
+    /** Value submitted with the hidden checkbox input when the switch is checked. @default 'on' */
+    value: string;
+    /**
+     * Replaces the message the browser shows when a `required` switch is
+     * submitted off. Sealed inside the shadow root otherwise, so this is the
+     * only way to translate it or to name what has to be turned on.
+     * @default undefined — keeps `'Please check this box if you want to proceed.'`
+     */
+    requiredMessage?: string;
+    private buttonEl?;
+    /** Accessible name for the inner `<button>`, moved off this host — see `takeHostAriaLabel`. */
+    private hostLabel;
+    /**
+     * The state the `checked` attribute declared, captured before the property
+     * can reflect over it — a native checkbox's `defaultChecked`, which is what
+     * `form.reset()` restores.
+     */
+    private declaredChecked?;
+    connectedCallback(): void;
+    /** Restores the state the `checked` attribute declared, like a native checkbox's `defaultChecked`. */
+    formResetCallback(): void;
+    private handleClick;
+    private syncFormState;
+    updated(changed: Map<string, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-switch': SkdxSwitch;
+    }
+}
+export {};

package/dist/switch/Switch.d.ts

@@ -0,0 +1,75 @@
+import { LitElement } from 'lit';
+declare const SkdxSwitch_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
+    formAssociated: boolean;
+};
+/**
+ * `<skdx-switch>` — the Web Components implementation of the shared Switch
+ * contract (see `@skdx/shared`'s `switchContract`). Renders a native
+ * `<button role="switch">` in shadow DOM: behavior and accessibility only,
+ * no visual style — style the inner button with `skdx-switch::part(switch)`.
+ *
+ * Form-associated through the shared `FormAssociated` mixin: when placed inside
+ * a `<form>` with a `name` attribute, its checked state participates in
+ * `FormData` the same way a native checkbox would, including `required`
+ * validity, `form.reset()` and a `<fieldset disabled>` ancestor.
+ *
+ * @example
+ * ```html
+ * <skdx-switch name="notifications">Notifications</skdx-switch>
+ * <script type="module">
+ *   import '@skdx/web-components/switch';
+ *   document.querySelector('skdx-switch').addEventListener('checked-change', (e) => {
+ *     console.log(e.detail); // boolean
+ *   });
+ * </script>
+ * ```
+ *
+ * @csspart switch - The native `<button>` element inside the shadow root.
+ *
+ * @fires checked-change - Fired with the new checked state (boolean) whenever the switch is toggled.
+ */
+export declare class SkdxSwitch extends SkdxSwitch_base {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Checked state. Reflects to the `checked` attribute. */
+    checked: boolean;
+    /** Disables the switch and excludes it from form submission. */
+    disabled: boolean;
+    /** Marks the switch as required for native form validation. */
+    required: boolean;
+    /** Marks the switch as invalid, exposed as `aria-invalid`/`data-invalid`. */
+    invalid: boolean;
+    /** Name used as the `FormData` entry key when inside a `<form>`. @default undefined */
+    name?: string;
+    /** Value submitted with the hidden checkbox input when the switch is checked. @default 'on' */
+    value: string;
+    /**
+     * Replaces the message the browser shows when a `required` switch is
+     * submitted off. Sealed inside the shadow root otherwise, so this is the
+     * only way to translate it or to name what has to be turned on.
+     * @default undefined — keeps `'Please check this box if you want to proceed.'`
+     */
+    requiredMessage?: string;
+    private buttonEl?;
+    /** Accessible name for the inner `<button>`, moved off this host — see `takeHostAriaLabel`. */
+    private hostLabel;
+    /**
+     * The state the `checked` attribute declared, captured before the property
+     * can reflect over it — a native checkbox's `defaultChecked`, which is what
+     * `form.reset()` restores.
+     */
+    private declaredChecked?;
+    connectedCallback(): void;
+    /** Restores the state the `checked` attribute declared, like a native checkbox's `defaultChecked`. */
+    formResetCallback(): void;
+    private handleClick;
+    private syncFormState;
+    updated(changed: Map<string, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-switch': SkdxSwitch;
+    }
+}
+export {};

package/dist/switch/Switch.js

@@ -0,0 +1,22 @@
+var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var t=(d,r,s,l)=>{for(var a=l>1?void 0:l?u(r,s):r,c=d.length-1,n;c>=0;c--)(n=d[c])&&(a=(l?n(r,s,a):n(a))||a);return l&&a&&h(r,s,a),a};import{css as p,html as m,LitElement as b,nothing as o}from"lit";import{property as i,query as v,state as f}from"lit/decorators.js";import{takeHostAriaLabel as k}from"../internal/aria-label.js";import{customElement as y}from"../internal/define.js";import{FormAssociated as g}from"../internal/form-associated.js";import{reflectHostState as C}from"../internal/part.js";import{controlBoxOnHost as $,delegatesFocusShadowRootOptions as q,hiddenHostStyles as E,resetNativeControl as L}from"../internal/styles.js";var e=class extends g(b){constructor(){super(...arguments);this.checked=!1;this.disabled=!1;this.required=!1;this.invalid=!1;this.value="on";this.hostLabel=null;this.handleClick=()=>{this.checked=!this.checked,this.dispatchEvent(new CustomEvent("checked-change",{detail:this.checked,bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),this.declaredChecked??(this.declaredChecked=this.checked),this.hostLabel=k(this)}formResetCallback(){this.checked=this.declaredChecked??!1}syncFormState(){this.setFormValue(this.checked?this.value:null),this.setValueMissing(this.required&&!this.checked,"Please check this box if you want to proceed.",this.buttonEl)}updated(s){(s.has("checked")||s.has("required")||s.has("value"))&&this.syncFormState(),C(this,{"data-state":this.checked?"checked":"unchecked","data-disabled":this.disabled?"":null})}render(){return m`
+      <button
+        part="switch"
+        type="button"
+        role="switch"
+        aria-label=${this.hostLabel??o}
+        aria-checked=${this.checked}
+        aria-required=${this.required?"true":o}
+        aria-invalid=${this.invalid?"true":o}
+        data-state=${this.checked?"checked":"unchecked"}
+        data-disabled=${this.disabled?"":o}
+        data-invalid=${this.invalid?"":o}
+        ?disabled=${this.disabled}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};e.shadowRootOptions=q,e.styles=[L,E,p`
+      :host {
+        display: inline-block;
+      }
+    `,$],t([i({type:Boolean,reflect:!0})],e.prototype,"checked",2),t([i({type:Boolean,reflect:!0})],e.prototype,"disabled",2),t([i({type:Boolean,reflect:!0})],e.prototype,"required",2),t([i({type:Boolean,reflect:!0})],e.prototype,"invalid",2),t([i({type:String,reflect:!0})],e.prototype,"name",2),t([i({type:String})],e.prototype,"value",2),t([i({attribute:"required-message"})],e.prototype,"requiredMessage",2),t([v("button")],e.prototype,"buttonEl",2),t([f()],e.prototype,"hostLabel",2),e=t([y("skdx-switch","switch","root")],e);export{e as SkdxSwitch};

package/dist/switch/SwitchThumb.cjs

@@ -0,0 +1,5 @@
+"use strict";var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var p=(s,e)=>{for(var i in e)c(s,i,{get:e[i],enumerable:!0})},b=(s,e,i,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of k(e))!m.call(s,t)&&t!==i&&c(s,t,{get:()=>e[t],enumerable:!(d=h(e,t))||d.enumerable});return s};var u=s=>b(c({},"__esModule",{value:!0}),s),l=(s,e,i,d)=>{for(var t=d>1?void 0:d?h(e,i):e,a=s.length-1,n;a>=0;a--)(n=s[a])&&(t=(d?n(e,i,t):n(t))||t);return d&&t&&c(e,i,t),t};var C={};p(C,{SkdxSwitchThumb:()=>o});module.exports=u(C);var r=require("lit"),v=require("../internal/define.cjs");var o=class extends r.LitElement{constructor(){super(...arguments);this.root=null;this.onCheckedChange=()=>this.sync()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true"),this.root=this.closest("skdx-switch"),this.root?.addEventListener("checked-change",this.onCheckedChange),this.sync()}disconnectedCallback(){this.root?.removeEventListener("checked-change",this.onCheckedChange),super.disconnectedCallback()}updated(){this.sync()}sync(){this.setAttribute("data-state",this.root?.checked?"checked":"unchecked"),this.root?.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}render(){return r.html`<slot></slot>`}};o.styles=r.css`
+    :host {
+      display: block;
+    }
+  `,o=l([(0,v.customElement)("skdx-switch-thumb","switch","thumb")],o);0&&(module.exports={SkdxSwitchThumb});

package/dist/switch/SwitchThumb.d.cts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-switch-thumb>` — the knob that slides inside a `<skdx-switch>`.
+ *
+ * Always mounted, in every state: the thumb *is* the moving part, so unmounting
+ * it while unchecked would leave an empty track and there would be nothing to
+ * animate across. That is the difference from `<skdx-checkbox-indicator>`, which
+ * is a mark that genuinely has an absent state, and it is why this takes no
+ * `force-mount`.
+ *
+ * `aria-hidden`, because the switch's inner control already announces the state
+ * through `aria-checked`.
+ *
+ * Carries `data-state` and `data-disabled` so the skin can move and dim it
+ * without reaching back up to the root.
+ *
+ * @example
+ * ```html
+ * <skdx-switch checked>
+ *   <skdx-switch-thumb></skdx-switch-thumb>
+ * </skdx-switch>
+ * ```
+ *
+ * @slot - Optional content drawn inside the knob, e.g. a tick or a cross.
+ */
+export declare class SkdxSwitchThumb extends LitElement {
+    static styles: import("lit").CSSResult;
+    private root;
+    private readonly onCheckedChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-switch-thumb': SkdxSwitchThumb;
+    }
+}

package/dist/switch/SwitchThumb.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-switch-thumb>` — the knob that slides inside a `<skdx-switch>`.
+ *
+ * Always mounted, in every state: the thumb *is* the moving part, so unmounting
+ * it while unchecked would leave an empty track and there would be nothing to
+ * animate across. That is the difference from `<skdx-checkbox-indicator>`, which
+ * is a mark that genuinely has an absent state, and it is why this takes no
+ * `force-mount`.
+ *
+ * `aria-hidden`, because the switch's inner control already announces the state
+ * through `aria-checked`.
+ *
+ * Carries `data-state` and `data-disabled` so the skin can move and dim it
+ * without reaching back up to the root.
+ *
+ * @example
+ * ```html
+ * <skdx-switch checked>
+ *   <skdx-switch-thumb></skdx-switch-thumb>
+ * </skdx-switch>
+ * ```
+ *
+ * @slot - Optional content drawn inside the knob, e.g. a tick or a cross.
+ */
+export declare class SkdxSwitchThumb extends LitElement {
+    static styles: import("lit").CSSResult;
+    private root;
+    private readonly onCheckedChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-switch-thumb': SkdxSwitchThumb;
+    }
+}

package/dist/switch/SwitchThumb.js

@@ -0,0 +1,5 @@
+var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var a=(d,t,o,i)=>{for(var e=i>1?void 0:i?h(t,o):t,r=d.length-1,c;r>=0;r--)(c=d[r])&&(e=(i?c(t,o,e):c(e))||e);return i&&e&&n(t,o,e),e};import{css as l,html as v,LitElement as k}from"lit";import{customElement as m}from"../internal/define.js";var s=class extends k{constructor(){super(...arguments);this.root=null;this.onCheckedChange=()=>this.sync()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true"),this.root=this.closest("skdx-switch"),this.root?.addEventListener("checked-change",this.onCheckedChange),this.sync()}disconnectedCallback(){this.root?.removeEventListener("checked-change",this.onCheckedChange),super.disconnectedCallback()}updated(){this.sync()}sync(){this.setAttribute("data-state",this.root?.checked?"checked":"unchecked"),this.root?.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}render(){return v`<slot></slot>`}};s.styles=l`
+    :host {
+      display: block;
+    }
+  `,s=a([m("skdx-switch-thumb","switch","thumb")],s);export{s as SkdxSwitchThumb};

package/dist/switch/index.cjs

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

package/dist/switch/index.d.cts

@@ -0,0 +1,2 @@
+export { SkdxSwitch } from './Switch.cjs';
+export { SkdxSwitchThumb } from './SwitchThumb.cjs';

package/dist/switch/index.d.ts

@@ -0,0 +1,2 @@
+export { SkdxSwitch } from './Switch.js';
+export { SkdxSwitchThumb } from './SwitchThumb.js';

package/dist/switch/index.js

@@ -0,0 +1 @@
+import{SkdxSwitch as t}from"./Switch.js";import{SkdxSwitchThumb as S}from"./SwitchThumb.js";export{t as SkdxSwitch,S as SkdxSwitchThumb};