@skdx/web-components 0.28.0 → 0.30.0

package/dist/stepper/primitives.d.cts

@@ -0,0 +1,17 @@
+/**
+ * Advanced primitives for `<skdx-stepper>` — the item and trigger parts to reach for when the derived anatomy isn't the structure you need.
+ *
+ * @example
+ * ```ts
+ * import * as Stepper from '@skdx/web-components/primitives/stepper';
+ * ```
+ * ```html
+ * <skdx-stepper aria-label="Checkout progress" default-value="cart">
+ *   <skdx-stepper-item value="cart" completed>
+ *     <skdx-stepper-trigger value="cart">Cart</skdx-stepper-trigger>
+ *   </skdx-stepper-item>
+ * </skdx-stepper>
+ * ```
+ */
+export { SkdxStepperItem } from './StepperItem.cjs';
+export { SkdxStepperTrigger } from './StepperTrigger.cjs';

package/dist/stepper/primitives.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Advanced primitives for `<skdx-stepper>` — the item and trigger parts to reach for when the derived anatomy isn't the structure you need.
+ *
+ * @example
+ * ```ts
+ * import * as Stepper from '@skdx/web-components/primitives/stepper';
+ * ```
+ * ```html
+ * <skdx-stepper aria-label="Checkout progress" default-value="cart">
+ *   <skdx-stepper-item value="cart" completed>
+ *     <skdx-stepper-trigger value="cart">Cart</skdx-stepper-trigger>
+ *   </skdx-stepper-item>
+ * </skdx-stepper>
+ * ```
+ */
+export { SkdxStepperItem } from './StepperItem.js';
+export { SkdxStepperTrigger } from './StepperTrigger.js';

package/dist/stepper/primitives.js

@@ -0,0 +1 @@
+import{SkdxStepperItem as p}from"./StepperItem.js";import{SkdxStepperTrigger as o}from"./StepperTrigger.js";export{p as SkdxStepperItem,o as SkdxStepperTrigger};

package/dist/stepper/stepper-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=(e,t)=>{for(var o in t)i(e,o,{get:t[o],enumerable:!0})},c=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of p(t))!d.call(e,r)&&r!==o&&i(e,r,{get:()=>t[r],enumerable:!(n=l(t,r))||n.enumerable});return e};var b=e=>c(i({},"__esModule",{value:!0}),e);var S={};u(S,{canActivateStep:()=>s,stepStatus:()=>f});module.exports=b(S);function f(e,t){return t?"current":e.error?"error":e.completed?"completed":e.disabled?"disabled":"incomplete"}function s(e,t,o,n){let r=e.find(a=>a.value===t);return!r||r.disabled?!1:n==="non-linear"||r.completed||r.value===o?!0:e.find(a=>!a.completed)?.value===t}0&&(module.exports={canActivateStep,stepStatus});

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

@@ -0,0 +1,21 @@
+/** The four mutually exclusive statuses a single step can be in. */
+export type StepStatus = 'completed' | 'current' | 'error' | 'incomplete' | 'disabled';
+/** Layout axis of a Stepper list: side-by-side (`'horizontal'`) or stacked (`'vertical'`). */
+export type StepperOrientation = 'horizontal' | 'vertical';
+/** How far a `<skdx-stepper-trigger>` may jump: `'linear'` allows completed, current, and frontier steps; `'non-linear'` allows any non-disabled step. */
+export type StepperNavigationMode = 'linear' | 'non-linear';
+/** A step's completion/disabled state at one moment in time. */
+export interface StepperItemState {
+    value: string;
+    completed: boolean;
+    disabled: boolean;
+    error: boolean;
+}
+/** @internal Derives step status; precedence: current, error, completed, disabled, incomplete. */
+export declare function stepStatus(item: {
+    completed?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+}, current: boolean): StepStatus;
+/** @internal Whether `value` is reachable under `navigationMode`; a disabled step never activates but doesn't block the frontier. */
+export declare function canActivateStep(items: readonly StepperItemState[], value: string, currentValue: string | undefined, navigationMode: StepperNavigationMode): boolean;

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

@@ -0,0 +1,21 @@
+/** The four mutually exclusive statuses a single step can be in. */
+export type StepStatus = 'completed' | 'current' | 'error' | 'incomplete' | 'disabled';
+/** Layout axis of a Stepper list: side-by-side (`'horizontal'`) or stacked (`'vertical'`). */
+export type StepperOrientation = 'horizontal' | 'vertical';
+/** How far a `<skdx-stepper-trigger>` may jump: `'linear'` allows completed, current, and frontier steps; `'non-linear'` allows any non-disabled step. */
+export type StepperNavigationMode = 'linear' | 'non-linear';
+/** A step's completion/disabled state at one moment in time. */
+export interface StepperItemState {
+    value: string;
+    completed: boolean;
+    disabled: boolean;
+    error: boolean;
+}
+/** @internal Derives step status; precedence: current, error, completed, disabled, incomplete. */
+export declare function stepStatus(item: {
+    completed?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+}, current: boolean): StepStatus;
+/** @internal Whether `value` is reachable under `navigationMode`; a disabled step never activates but doesn't block the frontier. */
+export declare function canActivateStep(items: readonly StepperItemState[], value: string, currentValue: string | undefined, navigationMode: StepperNavigationMode): boolean;

package/dist/stepper/stepper-core.js

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

package/dist/switch/Switch.cjs

@@ -1,24 +1 @@
-"use strict";var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var A=Object.prototype.hasOwnProperty;var $=(o,s)=>{for(var t in s)h(o,t,{get:s[t],enumerable:!0})},C=(o,s,t,n)=>{if(s&&typeof s=="object"||typeof s=="function")for(let l of g(s))!A.call(o,l)&&l!==t&&h(o,l,{get:()=>s[l],enumerable:!(n=p(s,l))||n.enumerable});return o};var E=o=>C(h({},"__esModule",{value:!0}),o),i=(o,s,t,n)=>{for(var l=n>1?void 0:n?p(s,t):s,u=o.length-1,f;u>=0;u--)(f=o[u])&&(l=(n?f(s,t,l):f(l))||l);return n&&l&&h(s,t,l),l};var O={};$(O,{SkdxSwitch:()=>e});module.exports=E(O);var r=require("lit"),a=require("lit/decorators.js"),m=require("../internal/aria-label.cjs"),b=require("../internal/authored.cjs"),y=require("../internal/define.cjs"),v=require("../internal/form-associated.cjs"),k=require("../internal/part.cjs"),d=require("../internal/styles.cjs"),c=require("./SwitchAnatomy.cjs");var e=class extends(0,v.FormAssociated)(r.LitElement){constructor(){super(...arguments);this.checked=!1;this.disabled=!1;this.required=!1;this.readOnly=!1;this.invalid=!1;this.value="on";this.hostLabel=null;this.defaultChecked=!1;this.labelPosition="end";this.seeded=!1;this.resetTo=!1;this.fillAnatomy=()=>{(0,b.hasAuthoredParts)(this,c.SWITCH_ANATOMY_GENERATED)||(0,c.fillSwitchAnatomy)(this)};this.handleClick=()=>{this.readOnly||(this.checked=!this.checked,this.dispatchEvent(new CustomEvent("checked-change",{detail:this.checked,bubbles:!0,composed:!0})))}}connectedCallback(){if(super.connectedCallback(),queueMicrotask(this.fillAnatomy),!this.seeded){this.seeded=!0;let t=this.hasAttribute("checked")||this.checked;this.resetTo=this.defaultChecked||t,t||(this.checked=this.defaultChecked)}this.hostLabel=(0,m.takeHostAriaLabel)(this)}formResetCallback(){this.checked=this.resetTo}syncFormState(){this.setFormValue(this.checked?this.value:null),this.setValueMissing(this.required&&!this.readOnly&&!this.checked,"Please check this box if you want to proceed.",this.buttonEl)}updated(t){(t.has("checked")||t.has("required")||t.has("readOnly")||t.has("value"))&&this.syncFormState(),(t.has("label")||t.has("labelPosition"))&&this.fillAnatomy(),(0,k.reflectHostState)(this,{"data-state":this.checked?"checked":"unchecked","data-disabled":this.disabled?"":null,"data-readonly":this.readOnly?"":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}
-        aria-readonly=${this.readOnly?"true":r.nothing}
-        data-state=${this.checked?"checked":"unchecked"}
-        data-disabled=${this.disabled?"":r.nothing}
-        data-readonly=${this.readOnly?"":r.nothing}
-        data-invalid=${this.invalid?"":r.nothing}
-        ?disabled=${this.disabled}
-        @click=${this.handleClick}
-      >
-        <slot @slotchange=${this.fillAnatomy}></slot>
-      </button>
-    `}};e.shadowRootOptions=d.delegatesFocusShadowRootOptions,e.styles=[d.resetNativeControl,d.hiddenHostStyles,r.css`
-      :host {
-        display: inline-block;
-      }
-    `,d.controlBoxOnHost],i([(0,a.property)({type:Boolean,reflect:!0})],e.prototype,"checked",2),i([(0,a.property)({type:Boolean,reflect:!0})],e.prototype,"disabled",2),i([(0,a.property)({type:Boolean,reflect:!0})],e.prototype,"required",2),i([(0,a.property)({type:Boolean,reflect:!0,attribute:"read-only"})],e.prototype,"readOnly",2),i([(0,a.property)({type:Boolean,reflect:!0})],e.prototype,"invalid",2),i([(0,a.property)({type:String,reflect:!0})],e.prototype,"name",2),i([(0,a.property)({type:String})],e.prototype,"value",2),i([(0,a.property)({attribute:"required-message"})],e.prototype,"requiredMessage",2),i([(0,a.query)("button")],e.prototype,"buttonEl",2),i([(0,a.state)()],e.prototype,"hostLabel",2),i([(0,a.property)({type:Boolean,attribute:"default-checked"})],e.prototype,"defaultChecked",2),i([(0,a.property)({type:String})],e.prototype,"label",2),i([(0,a.property)({type:String,attribute:"label-position"})],e.prototype,"labelPosition",2),e=i([(0,y.customElement)("skdx-switch","switch","root")],e);0&&(module.exports={SkdxSwitch});
+"use strict";var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var b=(i,t)=>{for(var e in t)l(i,e,{get:t[e],enumerable:!0})},k=(i,t,e,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of m(t))!v.call(i,r)&&r!==e&&l(i,r,{get:()=>t[r],enumerable:!(d=u(t,r))||d.enumerable});return i};var y=i=>k(l({},"__esModule",{value:!0}),i),s=(i,t,e,d)=>{for(var r=d>1?void 0:d?u(t,e):t,n=i.length-1,h;n>=0;n--)(h=i[n])&&(r=(d?h(t,e,r):h(r))||r);return d&&r&&l(t,e,r),r};var C={};b(C,{SkdxSwitch:()=>o});module.exports=y(C);var a=require("lit/decorators.js"),p=require("../internal/authored.cjs"),f=require("../internal/define.cjs"),g=require("../internal/toggle-control.cjs"),c=require("./SwitchAnatomy.cjs");var o=class extends g.SkdxToggleControlBase{constructor(){super(...arguments);this.checked=!1;this.readOnly=!1;this.defaultChecked=!1;this.labelPosition="end";this.controlPart="switch";this.controlRole="switch";this.seeded=!1;this.resetTo=!1;this.onSlotChange=()=>{(0,p.hasAuthoredParts)(this,c.SWITCH_ANATOMY_GENERATED)||(0,c.fillSwitchAnatomy)(this)}}get accessibleName(){return this.hostLabel}get isReadOnly(){return this.readOnly}get ariaCheckedValue(){return String(this.checked)}get controlState(){return this.checked?"checked":"unchecked"}connectedCallback(){if(super.connectedCallback(),queueMicrotask(this.onSlotChange),!this.seeded){this.seeded=!0;let e=this.hasAttribute("checked")||this.checked;this.resetTo=this.defaultChecked||e,e||(this.checked=this.defaultChecked)}}formResetCallback(){this.checked=this.resetTo}toggle(){this.checked=!this.checked,this.emitCheckedChange(this.checked)}afterUpdated(e){(e.has("checked")||e.has("required")||e.has("readOnly")||e.has("value"))&&this.syncFormState(),(e.has("label")||e.has("labelPosition"))&&this.onSlotChange()}syncFormState(){this.setFormValue(this.checked?this.value:null),this.setValueMissing(this.required&&!this.readOnly&&!this.checked,"Please check this box if you want to proceed.",this.buttonEl)}};s([(0,a.property)({type:Boolean,reflect:!0})],o.prototype,"checked",2),s([(0,a.property)({type:Boolean,reflect:!0,attribute:"read-only"})],o.prototype,"readOnly",2),s([(0,a.property)({type:String,reflect:!0,attribute:"data-size"})],o.prototype,"size",2),s([(0,a.property)({attribute:"required-message"})],o.prototype,"requiredMessage",2),s([(0,a.property)({type:Boolean,attribute:"default-checked"})],o.prototype,"defaultChecked",2),s([(0,a.property)({type:String})],o.prototype,"label",2),s([(0,a.property)({type:String,attribute:"label-position"})],o.prototype,"labelPosition",2),s([(0,a.query)("button")],o.prototype,"buttonEl",2),o=s([(0,f.customElement)("skdx-switch","switch","root")],o);0&&(module.exports={SkdxSwitch});

package/dist/switch/Switch.d.cts

@@ -1,107 +1,37 @@
-import { LitElement } from 'lit';
-declare const SkdxSwitch_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
-    formAssociated: boolean;
-};
+import { SkdxToggleControlBase } from '../internal/toggle-control.cjs';
 /**
- * `<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.
- *
- * `role="switch"` takes its name from its content, but a `<skdx-switch-thumb>`
- * is the moving knob and renders no text — it is `aria-hidden` besides — so a
- * switch whose only slotted child is one announces as a bare "switch, off".
- * Slot a visible label beside the thumb, as below, or set `aria-label` when the
- * label lives elsewhere on screen.
- *
- * The recipe: given no authored parts, the Thumb is always derived and a
- * Label derives beside it — before or after per `labelPosition` — while
- * `label` is set (see `SwitchAnatomy.ts`). Hand composition still wins; the
- * parts themselves are advanced primitives, from
- * `@skdx/web-components/primitives/switch`.
+ * Web Components implementation of the shared Switch contract, rendering a native `<button role="switch">` in shadow DOM (form-associated via `FormAssociated`) that derives a `<skdx-switch-thumb>` and, from `label`, a `<skdx-switch-label>` — set `aria-label` when the caption lives elsewhere on screen.
  *
  * @example
  * ```html
  * <skdx-switch name="notifications" label="Notifications"></skdx-switch>
  * ```
  *
- * @example
- * ```html
- * <!-- Named from its own slotted content, beside the (nameless) thumb. -->
- * <skdx-switch name="notifications">
- *   <skdx-switch-thumb></skdx-switch-thumb>
- *   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>
- * ```
- *
- * @example
- * ```html
- * <!-- Named by the author, for the icon-only form where nothing text-bearing is slotted. -->
- * <skdx-switch name="notifications" aria-label="Notifications">
- *   <skdx-switch-thumb></skdx-switch-thumb>
- * </skdx-switch>
- * ```
- *
  * @csspart switch - The native `<button>` element inside the shadow root.
  *
  * @fires checked-change - Fires with the new checked state whenever it changes, controlled or not.
  */
-export declare class SkdxSwitch extends SkdxSwitch_base {
-    static shadowRootOptions: ShadowRootInit;
-    static styles: import("lit").CSSResult[];
+export declare class SkdxSwitch extends SkdxToggleControlBase {
     /**
      * Checked state, for controlled usage. Pair with `on-checked-change`.
      * @default undefined
      */
     checked: boolean;
-    /** Disables the switch and excludes it from form submission. */
-    disabled: boolean;
-    /**
-     * Marks the underlying hidden input as required for native form validation.
-     * @default false
-     */
-    required: boolean;
     /**
      * Displays a state the user may not change. The switch keeps its tab stop, focus ring, `role="switch"`, adds `aria-readonly="true"` and `data-readonly`, and refuses the flip. A read-only switch submits its value.
      * @default false
      */
     readOnly: boolean;
     /**
-     * Marks the switch as invalid, exposed as `aria-invalid`/`data-invalid`. Presentational only. Use `setCustomValidity()` on the ref for errors submission must block on.
-     * @default false
+     * Control scale the skin renders, reflected as `data-size`; may be written as that attribute directly.
+     * @default undefined — the skin's medium scale.
      */
-    invalid: boolean;
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
     /**
-     * Name/value for native form participation via a hidden input.
-     * @default undefined
-     */
-    name?: string;
-    /**
-     * Value submitted with the hidden input when 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.
+     * Replaces the browser's default `required` validation message, since the shadow-DOM button seals off the native one.
      * @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;
     /**
      * Initial checked state, for uncontrolled usage.
      * @default false
@@ -117,22 +47,27 @@ export declare class SkdxSwitch extends SkdxSwitch_base {
      * @default 'end'
      */
     labelPosition: 'start' | 'end';
+    private buttonEl?;
+    protected controlPart: string;
+    protected controlRole: string;
+    protected get accessibleName(): string | null;
+    protected get isReadOnly(): boolean;
+    protected get ariaCheckedValue(): string;
+    protected get controlState(): string;
     /** Whether the initial state has been resolved; a reconnect must not undo the user's toggles. */
     private seeded;
     /** The state `form.reset()` restores — resolved once, on first connect. */
     private resetTo;
-    private readonly fillAnatomy;
+    protected readonly onSlotChange: () => void;
     connectedCallback(): void;
     /** Restores the declared initial state, like a native checkbox restoring its `defaultChecked`. */
     formResetCallback(): void;
-    private handleClick;
-    private syncFormState;
-    updated(changed: Map<string, unknown>): void;
-    render(): import("lit").TemplateResult<1>;
+    protected toggle(): void;
+    protected afterUpdated(changed: Map<string, unknown>): void;
+    protected syncFormState(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'skdx-switch': SkdxSwitch;
     }
 }
-export {};

package/dist/switch/Switch.d.ts

@@ -1,107 +1,37 @@
-import { LitElement } from 'lit';
-declare const SkdxSwitch_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
-    formAssociated: boolean;
-};
+import { SkdxToggleControlBase } from '../internal/toggle-control.js';
 /**
- * `<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.
- *
- * `role="switch"` takes its name from its content, but a `<skdx-switch-thumb>`
- * is the moving knob and renders no text — it is `aria-hidden` besides — so a
- * switch whose only slotted child is one announces as a bare "switch, off".
- * Slot a visible label beside the thumb, as below, or set `aria-label` when the
- * label lives elsewhere on screen.
- *
- * The recipe: given no authored parts, the Thumb is always derived and a
- * Label derives beside it — before or after per `labelPosition` — while
- * `label` is set (see `SwitchAnatomy.ts`). Hand composition still wins; the
- * parts themselves are advanced primitives, from
- * `@skdx/web-components/primitives/switch`.
+ * Web Components implementation of the shared Switch contract, rendering a native `<button role="switch">` in shadow DOM (form-associated via `FormAssociated`) that derives a `<skdx-switch-thumb>` and, from `label`, a `<skdx-switch-label>` — set `aria-label` when the caption lives elsewhere on screen.
  *
  * @example
  * ```html
  * <skdx-switch name="notifications" label="Notifications"></skdx-switch>
  * ```
  *
- * @example
- * ```html
- * <!-- Named from its own slotted content, beside the (nameless) thumb. -->
- * <skdx-switch name="notifications">
- *   <skdx-switch-thumb></skdx-switch-thumb>
- *   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>
- * ```
- *
- * @example
- * ```html
- * <!-- Named by the author, for the icon-only form where nothing text-bearing is slotted. -->
- * <skdx-switch name="notifications" aria-label="Notifications">
- *   <skdx-switch-thumb></skdx-switch-thumb>
- * </skdx-switch>
- * ```
- *
  * @csspart switch - The native `<button>` element inside the shadow root.
  *
  * @fires checked-change - Fires with the new checked state whenever it changes, controlled or not.
  */
-export declare class SkdxSwitch extends SkdxSwitch_base {
-    static shadowRootOptions: ShadowRootInit;
-    static styles: import("lit").CSSResult[];
+export declare class SkdxSwitch extends SkdxToggleControlBase {
     /**
      * Checked state, for controlled usage. Pair with `on-checked-change`.
      * @default undefined
      */
     checked: boolean;
-    /** Disables the switch and excludes it from form submission. */
-    disabled: boolean;
-    /**
-     * Marks the underlying hidden input as required for native form validation.
-     * @default false
-     */
-    required: boolean;
     /**
      * Displays a state the user may not change. The switch keeps its tab stop, focus ring, `role="switch"`, adds `aria-readonly="true"` and `data-readonly`, and refuses the flip. A read-only switch submits its value.
      * @default false
      */
     readOnly: boolean;
     /**
-     * Marks the switch as invalid, exposed as `aria-invalid`/`data-invalid`. Presentational only. Use `setCustomValidity()` on the ref for errors submission must block on.
-     * @default false
+     * Control scale the skin renders, reflected as `data-size`; may be written as that attribute directly.
+     * @default undefined — the skin's medium scale.
      */
-    invalid: boolean;
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
     /**
-     * Name/value for native form participation via a hidden input.
-     * @default undefined
-     */
-    name?: string;
-    /**
-     * Value submitted with the hidden input when 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.
+     * Replaces the browser's default `required` validation message, since the shadow-DOM button seals off the native one.
      * @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;
     /**
      * Initial checked state, for uncontrolled usage.
      * @default false
@@ -117,22 +47,27 @@ export declare class SkdxSwitch extends SkdxSwitch_base {
      * @default 'end'
      */
     labelPosition: 'start' | 'end';
+    private buttonEl?;
+    protected controlPart: string;
+    protected controlRole: string;
+    protected get accessibleName(): string | null;
+    protected get isReadOnly(): boolean;
+    protected get ariaCheckedValue(): string;
+    protected get controlState(): string;
     /** Whether the initial state has been resolved; a reconnect must not undo the user's toggles. */
     private seeded;
     /** The state `form.reset()` restores — resolved once, on first connect. */
     private resetTo;
-    private readonly fillAnatomy;
+    protected readonly onSlotChange: () => void;
     connectedCallback(): void;
     /** Restores the declared initial state, like a native checkbox restoring its `defaultChecked`. */
     formResetCallback(): void;
-    private handleClick;
-    private syncFormState;
-    updated(changed: Map<string, unknown>): void;
-    render(): import("lit").TemplateResult<1>;
+    protected toggle(): void;
+    protected afterUpdated(changed: Map<string, unknown>): void;
+    protected syncFormState(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'skdx-switch': SkdxSwitch;
     }
 }
-export {};

package/dist/switch/Switch.js

@@ -1,24 +1 @@
-var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var t=(d,l,a,o)=>{for(var i=o>1?void 0:o?u(l,a):l,n=d.length-1,h;n>=0;n--)(h=d[n])&&(i=(o?h(l,a,i):h(i))||i);return o&&i&&c(l,a,i),i};import{css as f,html as p,LitElement as m,nothing as r}from"lit";import{property as s,query as b,state as y}from"lit/decorators.js";import{takeHostAriaLabel as v}from"../internal/aria-label.js";import{hasAuthoredParts as k}from"../internal/authored.js";import{customElement as g}from"../internal/define.js";import{FormAssociated as A}from"../internal/form-associated.js";import{reflectHostState as $}from"../internal/part.js";import{controlBoxOnHost as C,delegatesFocusShadowRootOptions as E,hiddenHostStyles as O,resetNativeControl as q}from"../internal/styles.js";import{fillSwitchAnatomy as T,SWITCH_ANATOMY_GENERATED as B}from"./SwitchAnatomy.js";var e=class extends A(m){constructor(){super(...arguments);this.checked=!1;this.disabled=!1;this.required=!1;this.readOnly=!1;this.invalid=!1;this.value="on";this.hostLabel=null;this.defaultChecked=!1;this.labelPosition="end";this.seeded=!1;this.resetTo=!1;this.fillAnatomy=()=>{k(this,B)||T(this)};this.handleClick=()=>{this.readOnly||(this.checked=!this.checked,this.dispatchEvent(new CustomEvent("checked-change",{detail:this.checked,bubbles:!0,composed:!0})))}}connectedCallback(){if(super.connectedCallback(),queueMicrotask(this.fillAnatomy),!this.seeded){this.seeded=!0;let a=this.hasAttribute("checked")||this.checked;this.resetTo=this.defaultChecked||a,a||(this.checked=this.defaultChecked)}this.hostLabel=v(this)}formResetCallback(){this.checked=this.resetTo}syncFormState(){this.setFormValue(this.checked?this.value:null),this.setValueMissing(this.required&&!this.readOnly&&!this.checked,"Please check this box if you want to proceed.",this.buttonEl)}updated(a){(a.has("checked")||a.has("required")||a.has("readOnly")||a.has("value"))&&this.syncFormState(),(a.has("label")||a.has("labelPosition"))&&this.fillAnatomy(),$(this,{"data-state":this.checked?"checked":"unchecked","data-disabled":this.disabled?"":null,"data-readonly":this.readOnly?"":null})}render(){return p`
-      <button
-        part="switch"
-        type="button"
-        role="switch"
-        aria-label=${this.hostLabel??r}
-        aria-checked=${this.checked}
-        aria-required=${this.required?"true":r}
-        aria-invalid=${this.invalid?"true":r}
-        aria-readonly=${this.readOnly?"true":r}
-        data-state=${this.checked?"checked":"unchecked"}
-        data-disabled=${this.disabled?"":r}
-        data-readonly=${this.readOnly?"":r}
-        data-invalid=${this.invalid?"":r}
-        ?disabled=${this.disabled}
-        @click=${this.handleClick}
-      >
-        <slot @slotchange=${this.fillAnatomy}></slot>
-      </button>
-    `}};e.shadowRootOptions=E,e.styles=[q,O,f`
-      :host {
-        display: inline-block;
-      }
-    `,C],t([s({type:Boolean,reflect:!0})],e.prototype,"checked",2),t([s({type:Boolean,reflect:!0})],e.prototype,"disabled",2),t([s({type:Boolean,reflect:!0})],e.prototype,"required",2),t([s({type:Boolean,reflect:!0,attribute:"read-only"})],e.prototype,"readOnly",2),t([s({type:Boolean,reflect:!0})],e.prototype,"invalid",2),t([s({type:String,reflect:!0})],e.prototype,"name",2),t([s({type:String})],e.prototype,"value",2),t([s({attribute:"required-message"})],e.prototype,"requiredMessage",2),t([b("button")],e.prototype,"buttonEl",2),t([y()],e.prototype,"hostLabel",2),t([s({type:Boolean,attribute:"default-checked"})],e.prototype,"defaultChecked",2),t([s({type:String})],e.prototype,"label",2),t([s({type:String,attribute:"label-position"})],e.prototype,"labelPosition",2),e=t([g("skdx-switch","switch","root")],e);export{e as SkdxSwitch};
+var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var r=(d,s,e,a)=>{for(var o=a>1?void 0:a?h(s,e):s,l=d.length-1,c;l>=0;l--)(c=d[l])&&(o=(a?c(s,e,o):c(o))||o);return a&&o&&n(s,e,o),o};import{property as i,query as u}from"lit/decorators.js";import{hasAuthoredParts as p}from"../internal/authored.js";import{customElement as f}from"../internal/define.js";import{SkdxToggleControlBase as g}from"../internal/toggle-control.js";import{fillSwitchAnatomy as m,SWITCH_ANATOMY_GENERATED as v}from"./SwitchAnatomy.js";var t=class extends g{constructor(){super(...arguments);this.checked=!1;this.readOnly=!1;this.defaultChecked=!1;this.labelPosition="end";this.controlPart="switch";this.controlRole="switch";this.seeded=!1;this.resetTo=!1;this.onSlotChange=()=>{p(this,v)||m(this)}}get accessibleName(){return this.hostLabel}get isReadOnly(){return this.readOnly}get ariaCheckedValue(){return String(this.checked)}get controlState(){return this.checked?"checked":"unchecked"}connectedCallback(){if(super.connectedCallback(),queueMicrotask(this.onSlotChange),!this.seeded){this.seeded=!0;let e=this.hasAttribute("checked")||this.checked;this.resetTo=this.defaultChecked||e,e||(this.checked=this.defaultChecked)}}formResetCallback(){this.checked=this.resetTo}toggle(){this.checked=!this.checked,this.emitCheckedChange(this.checked)}afterUpdated(e){(e.has("checked")||e.has("required")||e.has("readOnly")||e.has("value"))&&this.syncFormState(),(e.has("label")||e.has("labelPosition"))&&this.onSlotChange()}syncFormState(){this.setFormValue(this.checked?this.value:null),this.setValueMissing(this.required&&!this.readOnly&&!this.checked,"Please check this box if you want to proceed.",this.buttonEl)}};r([i({type:Boolean,reflect:!0})],t.prototype,"checked",2),r([i({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),r([i({type:String,reflect:!0,attribute:"data-size"})],t.prototype,"size",2),r([i({attribute:"required-message"})],t.prototype,"requiredMessage",2),r([i({type:Boolean,attribute:"default-checked"})],t.prototype,"defaultChecked",2),r([i({type:String})],t.prototype,"label",2),r([i({type:String,attribute:"label-position"})],t.prototype,"labelPosition",2),r([u("button")],t.prototype,"buttonEl",2),t=r([f("skdx-switch","switch","root")],t);export{t as SkdxSwitch};

package/dist/switch/SwitchAnatomy.d.cts

@@ -3,10 +3,5 @@ import './SwitchLabel.cjs';
 import './SwitchThumb.cjs';
 /** @internal Marks a direct child of `<skdx-switch>` this module generated. */
 export declare const SWITCH_ANATOMY_GENERATED = "data-skdx-switch-generated";
-/**
- * Builds the canonical anatomy from the root's data props: the Thumb is
- * always derived, and a Label derives beside it — before or after, per
- * `labelPosition` — only while `label` is set.
- * @internal
- */
+/** @internal Derives the Thumb always, and a Label beside it, positioned by `labelPosition`, while `label` is set. */
 export declare function fillSwitchAnatomy(root: SkdxSwitch): void;

package/dist/switch/SwitchAnatomy.d.ts

@@ -3,10 +3,5 @@ import './SwitchLabel.js';
 import './SwitchThumb.js';
 /** @internal Marks a direct child of `<skdx-switch>` this module generated. */
 export declare const SWITCH_ANATOMY_GENERATED = "data-skdx-switch-generated";
-/**
- * Builds the canonical anatomy from the root's data props: the Thumb is
- * always derived, and a Label derives beside it — before or after, per
- * `labelPosition` — only while `label` is set.
- * @internal
- */
+/** @internal Derives the Thumb always, and a Label beside it, positioned by `labelPosition`, while `label` is set. */
 export declare function fillSwitchAnatomy(root: SkdxSwitch): void;

package/dist/switch/SwitchLabel.cjs

@@ -1,5 +1,5 @@
-"use strict";var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var p=(s,e)=>{for(var i in e)r(s,i,{get:e[i],enumerable:!0})},b=(s,e,i,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of k(e))!m.call(s,t)&&t!==i&&r(s,t,{get:()=>e[t],enumerable:!(o=h(e,t))||o.enumerable});return s};var u=s=>b(r({},"__esModule",{value:!0}),s),l=(s,e,i,o)=>{for(var t=o>1?void 0:o?h(e,i):e,a=s.length-1,n;a>=0;a--)(n=s[a])&&(t=(o?n(e,i,t):n(t))||t);return o&&t&&r(e,i,t),t};var C={};p(C,{SkdxSwitchLabel:()=>c});module.exports=u(C);var d=require("lit"),v=require("../internal/define.cjs");var c=class extends d.LitElement{constructor(){super(...arguments);this.root=null;this.onCheckedChange=()=>this.sync()}connectedCallback(){super.connectedCallback(),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 d.html`<slot></slot>`}};c.styles=d.css`
+"use strict";var r=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var k=(s,e)=>{for(var i in e)r(s,i,{get:e[i],enumerable:!0})},u=(s,e,i,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!v.call(s,t)&&t!==i&&r(s,t,{get:()=>e[t],enumerable:!(o=n(e,t))||o.enumerable});return s};var b=s=>u(r({},"__esModule",{value:!0}),s),h=(s,e,i,o)=>{for(var t=o>1?void 0:o?n(e,i):e,a=s.length-1,l;a>=0;a--)(l=s[a])&&(t=(o?l(e,i,t):l(t))||t);return o&&t&&r(e,i,t),t};var C={};k(C,{SkdxSwitchLabel:()=>c});module.exports=b(C);var d=require("lit"),p=require("../internal/define.cjs");var c=class extends d.LitElement{constructor(){super(...arguments);this.root=null;this.onCheckedChange=()=>this.sync()}connectedCallback(){super.connectedCallback(),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 d.html`<slot></slot>`}};c.styles=d.css`
     :host {
       display: contents;
     }
-  `,c=l([(0,v.customElement)("skdx-switch-label","switch","label")],c);0&&(module.exports={SkdxSwitchLabel});
+  `,c=h([(0,p.customElement)("skdx-switch-label","switch","label")],c);0&&(module.exports={SkdxSwitchLabel});

package/dist/switch/SwitchLabel.d.cts

@@ -1,9 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Visible text inside a `<skdx-switch>`, slotted into the button (the root *is* the track,
- * unlike checkbox). Names the control via name-from-content (thumb is aria-hidden). Emits
- * load-bearing class that keys skin layout in `:has()` (track moves to ::before pill).
- * Carries `data-state` and `data-disabled` for skin styling.
+ * Visible caption slotted into a `<skdx-switch>`'s button, naming the control since its thumb is `aria-hidden`, and carrying `data-state`/`data-disabled` for skin styling.
  *
  * @example
  * ```html
@@ -23,7 +20,7 @@ export declare class SkdxSwitchLabel extends LitElement {
     disconnectedCallback(): void;
     protected updated(): void;
     private sync;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/switch/SwitchLabel.d.ts

@@ -1,9 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Visible text inside a `<skdx-switch>`, slotted into the button (the root *is* the track,
- * unlike checkbox). Names the control via name-from-content (thumb is aria-hidden). Emits
- * load-bearing class that keys skin layout in `:has()` (track moves to ::before pill).
- * Carries `data-state` and `data-disabled` for skin styling.
+ * Visible caption slotted into a `<skdx-switch>`'s button, naming the control since its thumb is `aria-hidden`, and carrying `data-state`/`data-disabled` for skin styling.
  *
  * @example
  * ```html
@@ -23,7 +20,7 @@ export declare class SkdxSwitchLabel extends LitElement {
     disconnectedCallback(): void;
     protected updated(): void;
     private sync;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/switch/SwitchLabel.js

@@ -1,5 +1,5 @@
-var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var a=(o,t,c,i)=>{for(var e=i>1?void 0:i?h(t,c):t,d=o.length-1,r;d>=0;d--)(r=o[d])&&(e=(i?r(t,c,e):r(e))||e);return i&&e&&n(t,c,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.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`
+var l=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var a=(o,t,c,i)=>{for(var e=i>1?void 0:i?n(t,c):t,d=o.length-1,r;d>=0;d--)(r=o[d])&&(e=(i?r(t,c,e):r(e))||e);return i&&e&&l(t,c,e),e};import{css as h,html as p,LitElement as m}from"lit";import{customElement as v}from"../internal/define.js";var s=class extends m{constructor(){super(...arguments);this.root=null;this.onCheckedChange=()=>this.sync()}connectedCallback(){super.connectedCallback(),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 p`<slot></slot>`}};s.styles=h`
     :host {
       display: contents;
     }
-  `,s=a([m("skdx-switch-label","switch","label")],s);export{s as SkdxSwitchLabel};
+  `,s=a([v("skdx-switch-label","switch","label")],s);export{s as SkdxSwitchLabel};

package/dist/switch/SwitchThumb.cjs

@@ -1,5 +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`
+"use strict";var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var k=(s,e)=>{for(var i in e)c(s,i,{get:e[i],enumerable:!0})},u=(s,e,i,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!v.call(s,t)&&t!==i&&c(s,t,{get:()=>e[t],enumerable:!(d=h(e,t))||d.enumerable});return s};var b=s=>u(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={};k(C,{SkdxSwitchThumb:()=>o});module.exports=b(C);var r=require("lit"),p=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});
+  `,o=l([(0,p.customElement)("skdx-switch-thumb","switch","thumb")],o);0&&(module.exports={SkdxSwitchThumb});

package/dist/switch/SwitchThumb.d.cts

@@ -1,18 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-switch-thumb>` — the knob that slides inside a `<skdx-switch>`.
- *
- * Always mounted: the thumb *is* the moving part, so unmounting it unchecked
- * would leave an empty track. Differs from `<skdx-checkbox-indicator>`, a mark
- * with a genuine absent state; that's why this takes no `force-mount`.
- *
- * `aria-hidden` since the switch's inner control announces state via `aria-checked`.
- * Carries `data-state` and `data-disabled` so the skin can move and dim it.
- *
- * Contributes nothing to the switch's accessible name — not even slotted ticks.
- * `role="switch"` is name-from-content, so a thumb-only switch announces as a
- * bare "switch, off". Slot a visible label beside it or set `aria-label` on the
- * `<skdx-switch>`.
+ * The knob that slides inside a `<skdx-switch>`, always mounted and `aria-hidden`, carrying `data-state`/`data-disabled` so the skin can move and dim it.
  *
  * @example
  * ```html
@@ -32,7 +20,7 @@ export declare class SkdxSwitchThumb extends LitElement {
     disconnectedCallback(): void;
     protected updated(): void;
     private sync;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {