@skdx/web-components 0.26.0

package/dist/carousel/index.js

@@ -0,0 +1 @@
+import{SkdxCarousel as e}from"./Carousel.js";import{SkdxCarouselContent as t}from"./CarouselContent.js";import{SkdxCarouselItem as s}from"./CarouselItem.js";import{SkdxCarouselPrevious as l}from"./CarouselPrevious.js";import{SkdxCarouselNext as C}from"./CarouselNext.js";import{SkdxCarouselPlayPause as f}from"./CarouselPlayPause.js";export{e as SkdxCarousel,t as SkdxCarouselContent,s as SkdxCarouselItem,C as SkdxCarouselNext,f as SkdxCarouselPlayPause,l as SkdxCarouselPrevious};

package/dist/checkbox/Checkbox.cjs

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

package/dist/checkbox/Checkbox.d.cts

@@ -0,0 +1,68 @@
+import { LitElement, type PropertyValues } from 'lit';
+/** A checkbox's tri-state value: checked, unchecked, or indeterminate (partially checked). */
+export type SkdxCheckedState = boolean | 'indeterminate';
+declare const SkdxCheckbox_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
+    formAssociated: boolean;
+};
+/**
+ * `<skdx-checkbox>` — the Web Components implementation of the shared
+ * Checkbox contract (see `@skdx/shared`'s `checkboxContract`). Renders a
+ * tri-state `role="checkbox"` in shadow DOM: behavior and accessibility
+ * only, no visual style — style the inner element with
+ * `skdx-checkbox::part(checkbox)`.
+ *
+ * Form-associated through the shared `FormAssociated` mixin — the checkbox's
+ * value participates in native `FormData`/validation without a hidden
+ * `<input>`, the same way a native `<input type="checkbox">` does, and it
+ * answers `form.reset()` and a `<fieldset disabled>` ancestor like one too.
+ *
+ * @example
+ * ```html
+ * <skdx-checkbox name="terms" checked>Accept terms</skdx-checkbox>
+ * ```
+ *
+ * @csspart checkbox - The native `<button>` element inside the shadow root.
+ *
+ * @fires checked-change - Fired with the new tri-state `checked` value (`true` | `false` | `'indeterminate'`) whenever the box is toggled.
+ */
+export declare class SkdxCheckbox extends SkdxCheckbox_base {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Checked state, for controlled usage. Listen for `checked-change`. */
+    checked: SkdxCheckedState;
+    /** Disables toggling and excludes the checkbox from the tab order. */
+    disabled: boolean;
+    /** Marks the checkbox required for native form validation. */
+    required: boolean;
+    /** Value submitted with the form when checked. */
+    value: string;
+    /** Marks the checkbox as invalid, exposed as `aria-invalid`/`data-invalid`. */
+    invalid: boolean;
+    /**
+     * Replaces the message the browser shows when a `required` checkbox is
+     * submitted unchecked. Sealed inside the shadow root otherwise, so this is
+     * the only way to translate it or to name the thing being agreed to.
+     * @default undefined — keeps `'Please check this box to continue.'`
+     */
+    requiredMessage?: string;
+    /**
+     * 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;
+    protected updated(changed: PropertyValues): void;
+    private syncFormState;
+    private handleClick;
+    private handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-checkbox': SkdxCheckbox;
+    }
+}
+export {};

package/dist/checkbox/Checkbox.d.ts

@@ -0,0 +1,68 @@
+import { LitElement, type PropertyValues } from 'lit';
+/** A checkbox's tri-state value: checked, unchecked, or indeterminate (partially checked). */
+export type SkdxCheckedState = boolean | 'indeterminate';
+declare const SkdxCheckbox_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
+    formAssociated: boolean;
+};
+/**
+ * `<skdx-checkbox>` — the Web Components implementation of the shared
+ * Checkbox contract (see `@skdx/shared`'s `checkboxContract`). Renders a
+ * tri-state `role="checkbox"` in shadow DOM: behavior and accessibility
+ * only, no visual style — style the inner element with
+ * `skdx-checkbox::part(checkbox)`.
+ *
+ * Form-associated through the shared `FormAssociated` mixin — the checkbox's
+ * value participates in native `FormData`/validation without a hidden
+ * `<input>`, the same way a native `<input type="checkbox">` does, and it
+ * answers `form.reset()` and a `<fieldset disabled>` ancestor like one too.
+ *
+ * @example
+ * ```html
+ * <skdx-checkbox name="terms" checked>Accept terms</skdx-checkbox>
+ * ```
+ *
+ * @csspart checkbox - The native `<button>` element inside the shadow root.
+ *
+ * @fires checked-change - Fired with the new tri-state `checked` value (`true` | `false` | `'indeterminate'`) whenever the box is toggled.
+ */
+export declare class SkdxCheckbox extends SkdxCheckbox_base {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Checked state, for controlled usage. Listen for `checked-change`. */
+    checked: SkdxCheckedState;
+    /** Disables toggling and excludes the checkbox from the tab order. */
+    disabled: boolean;
+    /** Marks the checkbox required for native form validation. */
+    required: boolean;
+    /** Value submitted with the form when checked. */
+    value: string;
+    /** Marks the checkbox as invalid, exposed as `aria-invalid`/`data-invalid`. */
+    invalid: boolean;
+    /**
+     * Replaces the message the browser shows when a `required` checkbox is
+     * submitted unchecked. Sealed inside the shadow root otherwise, so this is
+     * the only way to translate it or to name the thing being agreed to.
+     * @default undefined — keeps `'Please check this box to continue.'`
+     */
+    requiredMessage?: string;
+    /**
+     * 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;
+    protected updated(changed: PropertyValues): void;
+    private syncFormState;
+    private handleClick;
+    private handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-checkbox': SkdxCheckbox;
+    }
+}
+export {};

package/dist/checkbox/Checkbox.js

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

package/dist/checkbox/CheckboxIndicator.cjs

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

package/dist/checkbox/CheckboxIndicator.d.cts

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-checkbox-indicator>` — the tick drawn inside a `<skdx-checkbox>` while
+ * it is checked, and the dash while it is `indeterminate`.
+ *
+ * `aria-hidden`, because `<skdx-checkbox>`'s inner `role="checkbox"` already
+ * announces the state through `aria-checked` — an indicator that also spoke
+ * would make a screen reader say it twice.
+ *
+ * Hidden via `hidden` + `:host([hidden])` rather than unmounted while
+ * unchecked, which is this package's convention and what
+ * `<skdx-tree-select-item-indicator>` does. React's `CheckboxIndicator` returns
+ * `null` instead; the rendered result is the same and the skin's
+ * `[data-state]` rules key off the attribute either way, but keeping the
+ * element mounted is what lets a check animate in and out rather than pop.
+ * `force-mount` keeps it visible in every state, for that animation or to
+ * reserve its space.
+ *
+ * Unlike `<skdx-checkbox-card-indicator>`, which is the *box* and so always
+ * shows, this is only the mark.
+ *
+ * @example
+ * ```html
+ * <skdx-checkbox checked>
+ *   <skdx-checkbox-indicator>✓</skdx-checkbox-indicator>
+ *   Accept terms
+ * </skdx-checkbox>
+ * ```
+ *
+ * @slot - The mark itself: a glyph, an icon, whatever the brand layer draws.
+ */
+export declare class SkdxCheckboxIndicator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Stay visible even while the box is unchecked, instead of hiding.
+     * @default false
+     */
+    forceMount: boolean;
+    private root;
+    private readonly onCheckedChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-checkbox-indicator': SkdxCheckboxIndicator;
+    }
+}

package/dist/checkbox/CheckboxIndicator.d.ts

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-checkbox-indicator>` — the tick drawn inside a `<skdx-checkbox>` while
+ * it is checked, and the dash while it is `indeterminate`.
+ *
+ * `aria-hidden`, because `<skdx-checkbox>`'s inner `role="checkbox"` already
+ * announces the state through `aria-checked` — an indicator that also spoke
+ * would make a screen reader say it twice.
+ *
+ * Hidden via `hidden` + `:host([hidden])` rather than unmounted while
+ * unchecked, which is this package's convention and what
+ * `<skdx-tree-select-item-indicator>` does. React's `CheckboxIndicator` returns
+ * `null` instead; the rendered result is the same and the skin's
+ * `[data-state]` rules key off the attribute either way, but keeping the
+ * element mounted is what lets a check animate in and out rather than pop.
+ * `force-mount` keeps it visible in every state, for that animation or to
+ * reserve its space.
+ *
+ * Unlike `<skdx-checkbox-card-indicator>`, which is the *box* and so always
+ * shows, this is only the mark.
+ *
+ * @example
+ * ```html
+ * <skdx-checkbox checked>
+ *   <skdx-checkbox-indicator>✓</skdx-checkbox-indicator>
+ *   Accept terms
+ * </skdx-checkbox>
+ * ```
+ *
+ * @slot - The mark itself: a glyph, an icon, whatever the brand layer draws.
+ */
+export declare class SkdxCheckboxIndicator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Stay visible even while the box is unchecked, instead of hiding.
+     * @default false
+     */
+    forceMount: boolean;
+    private root;
+    private readonly onCheckedChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-checkbox-indicator': SkdxCheckboxIndicator;
+    }
+}

package/dist/checkbox/CheckboxIndicator.js

@@ -0,0 +1,5 @@
+var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=(r,o,e,s)=>{for(var t=s>1?void 0:s?h(o,e):o,c=r.length-1,d;c>=0;c--)(d=r[c])&&(t=(s?d(o,e,t):d(t))||t);return s&&t&&a(o,e,t),t};import{css as l,html as m,LitElement as p}from"lit";import{property as k}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{hiddenHostStyles as u}from"../internal/styles.js";var i=class extends p{constructor(){super(...arguments);this.forceMount=!1;this.root=null;this.onCheckedChange=()=>this.sync()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true"),this.root=this.closest("skdx-checkbox"),this.root?.addEventListener("checked-change",this.onCheckedChange),this.sync()}disconnectedCallback(){this.root?.removeEventListener("checked-change",this.onCheckedChange),super.disconnectedCallback()}updated(){this.sync()}sync(){let e=this.root?.checked??!1;this.setAttribute("data-state",e==="indeterminate"?"indeterminate":e?"checked":"unchecked"),this.root?.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.hidden=!this.forceMount&&e===!1}render(){return m`<slot></slot>`}};i.styles=[u,l`
+      :host {
+        display: inline-block;
+      }
+    `],n([k({type:Boolean,attribute:"force-mount"})],i.prototype,"forceMount",2),i=n([b("skdx-checkbox-indicator","checkbox","indicator")],i);export{i as SkdxCheckboxIndicator};

package/dist/checkbox/index.cjs

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

package/dist/checkbox/index.d.cts

@@ -0,0 +1,2 @@
+export { SkdxCheckbox } from './Checkbox.cjs';
+export { SkdxCheckboxIndicator } from './CheckboxIndicator.cjs';

package/dist/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { SkdxCheckbox } from './Checkbox.js';
+export { SkdxCheckboxIndicator } from './CheckboxIndicator.js';

package/dist/checkbox/index.js

@@ -0,0 +1 @@
+import{SkdxCheckbox as r}from"./Checkbox.js";import{SkdxCheckboxIndicator as k}from"./CheckboxIndicator.js";export{r as SkdxCheckbox,k as SkdxCheckboxIndicator};

package/dist/checkbox-card/CheckboxCard.cjs

@@ -0,0 +1,13 @@
+"use strict";var h=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var A=Object.prototype.hasOwnProperty;var E=(i,r)=>{for(var e in r)h(i,e,{get:r[e],enumerable:!0})},g=(i,r,e,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of k(r))!A.call(i,t)&&t!==e&&h(i,t,{get:()=>r[t],enumerable:!(n=v(r,t))||n.enumerable});return i};var L=i=>g(h({},"__esModule",{value:!0}),i),o=(i,r,e,n)=>{for(var t=n>1?void 0:n?v(r,e):r,l=i.length-1,d;l>=0;l--)(d=i[l])&&(t=(n?d(r,e,t):d(t))||t);return n&&t&&h(r,e,t),t};var F={};E(F,{SkdxCheckboxCard:()=>s});module.exports=L(F);var c=require("lit"),a=require("lit/decorators.js"),p=require("../internal/define.cjs"),y=require("../internal/form-associated.cjs"),m=require("../internal/ids.cjs"),_=require("../internal/part.cjs");var P="skdx-checkbox-card-control",H="skdx-checkbox-card-indicator",b="skdx-checkbox-card-label",f="skdx-checkbox-card-description",q={fromAttribute(i){if(i!==null)return i!=="false"},toAttribute(i){return i?"":null}},s=class extends(0,y.FormAssociated)(c.LitElement){constructor(){super(...arguments);this.defaultChecked=!1;this.value="on";this.required=!1;this.disabled=!1;this.invalid=!1;this._focusVisible=!1;this._viaPointer=!1;this._handleClick=()=>{this.disabled||(this.toggle(),this._control?.focus())};this._handleKeydown=e=>{this.disabled||(e.key===" "?(e.preventDefault(),this.toggle()):e.key==="Enter"&&e.preventDefault())};this._handlePointerDown=()=>{this._viaPointer=!0};this._handleFocusIn=()=>{this._focusVisible=!this._viaPointer,this._viaPointer=!1,this._syncHostAttributes()};this._handleFocusOut=()=>{this._focusVisible=!1,this._viaPointer=!1,this._syncHostAttributes()}}connectedCallback(){super.connectedCallback(),this._uncontrolledChecked??(this._uncontrolledChecked=this.defaultChecked),this.addEventListener("click",this._handleClick),this.addEventListener("keydown",this._handleKeydown),this.addEventListener("pointerdown",this._handlePointerDown),this.addEventListener("focusin",this._handleFocusIn),this.addEventListener("focusout",this._handleFocusOut),this._syncHostAttributes(),this.syncParts(),this._syncFormState()}disconnectedCallback(){this.removeEventListener("click",this._handleClick),this.removeEventListener("keydown",this._handleKeydown),this.removeEventListener("pointerdown",this._handlePointerDown),this.removeEventListener("focusin",this._handleFocusIn),this.removeEventListener("focusout",this._handleFocusOut),super.disconnectedCallback()}updated(e){this._syncHostAttributes(),this.syncParts(),(e.has("checked")||e.has("value")||e.has("required"))&&this._syncFormState()}get isChecked(){return this.checked!==void 0?this.checked:this._uncontrolledChecked??!1}get _control(){return this.querySelector(P)}setChecked(e){this.disabled||e!==this.isChecked&&(this.checked===void 0&&(this._uncontrolledChecked=e),this.dispatchEvent(new CustomEvent("checked-change",{detail:e,bubbles:!0,composed:!0})),this._syncHostAttributes(),this.syncParts(),this._syncFormState())}toggle(){this.setChecked(!this.isChecked)}formResetCallback(){this._uncontrolledChecked=this.defaultChecked,this._syncHostAttributes(),this.syncParts(),this._syncFormState()}_syncFormState(){let e=this.isChecked;this.setFormValue(e?this.value:null),this.setValueMissing(this.required&&!e,"Please check this box to continue.",this._control)}_syncHostAttributes(){(0,_.reflectHostState)(this,{"data-state":this.isChecked?"checked":"unchecked","data-disabled":this.disabled?"":null,"data-invalid":this.invalid?"":null,"data-focus-visible":this._focusVisible?"":null})}syncParts(){let e=this.isChecked,n=e?"checked":"unchecked",t=this._control;t&&(t.setAttribute("aria-checked",String(e)),t.setAttribute("data-state",n),t.setAttribute("tabindex",this.disabled?"-1":"0"),this.disabled?(t.setAttribute("data-disabled",""),t.setAttribute("aria-disabled","true")):(t.removeAttribute("data-disabled"),t.removeAttribute("aria-disabled")),this.required?t.setAttribute("aria-required","true"):t.removeAttribute("aria-required"),this.invalid?t.setAttribute("aria-invalid","true"):t.removeAttribute("aria-invalid"),this._link(t,"aria-labelledby",b,"label"),this._link(t,"aria-describedby",f,"description"));let l=this.querySelector(H);l?.setAttribute("data-state",n);let d=[l,this.querySelector(b),this.querySelector(f)];for(let u of d)u&&(this.disabled?u.setAttribute("data-disabled",""):u.removeAttribute("data-disabled"))}_link(e,n,t,l){let d=this.querySelector(t);d?e.setAttribute(n,(0,m.ensureId)(d,"skdx-checkbox-card",l)):e.removeAttribute(n)}render(){return c.html`<slot></slot>`}};s.styles=c.css`
+    :host {
+      display: block;
+      position: relative;
+      cursor: pointer;
+    }
+    :host([data-disabled]) {
+      cursor: default;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+  `,o([(0,a.property)({converter:q})],s.prototype,"checked",2),o([(0,a.property)({type:Boolean,attribute:"default-checked"})],s.prototype,"defaultChecked",2),o([(0,a.property)({type:String,reflect:!0})],s.prototype,"name",2),o([(0,a.property)({type:String,reflect:!0})],s.prototype,"value",2),o([(0,a.property)({type:Boolean,reflect:!0})],s.prototype,"required",2),o([(0,a.property)({type:Boolean,reflect:!0})],s.prototype,"disabled",2),o([(0,a.property)({type:Boolean,reflect:!0})],s.prototype,"invalid",2),o([(0,a.property)({attribute:"required-message"})],s.prototype,"requiredMessage",2),o([(0,a.state)()],s.prototype,"_uncontrolledChecked",2),o([(0,a.state)()],s.prototype,"_focusVisible",2),s=o([(0,p.customElement)("skdx-checkbox-card","checkbox-card","root")],s);0&&(module.exports={SkdxCheckboxCard});

package/dist/checkbox-card/CheckboxCard.d.cts

@@ -0,0 +1,136 @@
+import { LitElement, type PropertyValues } from 'lit';
+declare const SkdxCheckboxCard_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
+    formAssociated: boolean;
+};
+/**
+ * `<skdx-checkbox-card>` — the Web Components implementation of the shared
+ * CheckboxCard contract (see `@skdx/shared`'s `checkboxCardContract`). A
+ * checkbox whose hit target is a whole card: the root behaves as a `<label>`,
+ * so a click anywhere on the card surface toggles the control and moves focus
+ * to it.
+ *
+ * The root owns all the state — checked, `name`/`value`/`required`/`disabled`/
+ * `invalid` — and pushes it down onto its light-DOM parts
+ * (`<skdx-checkbox-card-control>`, `-indicator`, `-label`, `-description`), which
+ * find it with `closest('skdx-checkbox-card')`. It also wires the control's
+ * `aria-labelledby`/`aria-describedby` to the label and description
+ * automatically, and only while those parts are actually present — a dangling
+ * ARIA reference is its own accessibility bug.
+ *
+ * Emits `data-state="checked" | "unchecked"`, `data-disabled`, `data-invalid`
+ * and `data-focus-visible` on the host, which is the whole styling contract:
+ * the card paints its selected, disabled, error and keyboard-focus rings from
+ * the control's state without the control ever being visible.
+ *
+ * Form-associated via `ElementInternals`: with a `name`, the `value` is
+ * submitted by the surrounding `<form>` while checked, and `required` fails
+ * with `valueMissing` while unchecked. Unlike React, where a real
+ * `<input type="checkbox">` does the submitting, the host itself is the
+ * form-associated control — the same split `<skdx-checkbox>` already makes.
+ *
+ * **Nothing interactive may be nested inside the card.** The root behaves as a
+ * `<label>`, so a link or button in there is both an HTML content-model
+ * violation and a real usability bug — clicking the inner control would also
+ * toggle the card. Put actions beside the card, never inside it.
+ *
+ * @example
+ * ```html
+ * <skdx-checkbox-card name="addons" value="backups" default-checked>
+ *   <skdx-checkbox-card-control></skdx-checkbox-card-control>
+ *   <skdx-checkbox-card-indicator></skdx-checkbox-card-indicator>
+ *   <skdx-checkbox-card-label>Automated backups</skdx-checkbox-card-label>
+ *   <skdx-checkbox-card-description>Nightly snapshots, kept for 30 days.</skdx-checkbox-card-description>
+ * </skdx-checkbox-card>
+ * ```
+ *
+ * @fires checked-change - Fires with the new checked state (boolean) whenever it changes, controlled or not. Suppressed when the next state equals the current one.
+ */
+export declare class SkdxCheckboxCard extends SkdxCheckboxCard_base {
+    static styles: import("lit").CSSResult;
+    /**
+     * Checked state, for controlled usage. Pair with `checked-change`.
+     * @default undefined — uncontrolled: the card tracks its own checked state, seeded from `default-checked`.
+     */
+    checked?: boolean;
+    /**
+     * Initial checked state, for uncontrolled usage.
+     * @default false — the card starts unselected.
+     */
+    defaultChecked: boolean;
+    /**
+     * Name used as the `FormData` entry key when the card is inside a `<form>`.
+     * @default undefined — the card is unnamed and contributes nothing to form data.
+     */
+    name?: string;
+    /**
+     * Value submitted with the card when checked.
+     * @default 'on' — the same default the HTML checkbox itself uses.
+     */
+    value: string;
+    /**
+     * Marks the card required for native form validation, so an unchecked card
+     * blocks submission with `valueMissing`.
+     * @default false — the card can be left unchecked.
+     */
+    required: boolean;
+    /**
+     * Disables the card, so neither the surface nor the keyboard can change it
+     * and the control leaves the tab order.
+     * @default false — the card is interactive.
+     */
+    disabled: boolean;
+    /**
+     * Marks the card invalid, exposed as `aria-invalid` on the control and
+     * `data-invalid` on the host so the card can paint an error state.
+     * @default false — no error state is painted.
+     */
+    invalid: boolean;
+    /**
+     * Replaces the message the browser shows when a `required` card is submitted
+     * unchecked. The default is written for a generic checkbox; a card usually
+     * stands for a concrete choice ("Pick a plan to continue.") and that wording
+     * is otherwise unreachable from markup.
+     * @default undefined — keeps `'Please check this box to continue.'`
+     */
+    requiredMessage?: string;
+    private _uncontrolledChecked?;
+    private _focusVisible;
+    private _viaPointer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    /** The current checked state, resolving controlled vs. uncontrolled. */
+    get isChecked(): boolean;
+    /** The `<skdx-checkbox-card-control>` this card owns, if one has been slotted in. */
+    private get _control();
+    /**
+     * Sets the checked state, firing `checked-change`. A no-op while disabled, and
+     * silent when `next` already equals the current state.
+     */
+    setChecked(next: boolean): void;
+    /** Flips the checked state. What the card surface, Space, and the control all do. */
+    toggle(): void;
+    /** Restores the state the `default-checked` attribute declared, when the owning form is reset. */
+    formResetCallback(): void;
+    private _syncFormState;
+    private _syncHostAttributes;
+    /**
+     * @internal Pushes the root's state onto every part. Called by each part on
+     * connect (parts upgrade after the root, so they ask for a first sync) and by
+     * the root on every state change.
+     */
+    syncParts(): void;
+    private _link;
+    private readonly _handleClick;
+    private readonly _handleKeydown;
+    private readonly _handlePointerDown;
+    private readonly _handleFocusIn;
+    private readonly _handleFocusOut;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-checkbox-card': SkdxCheckboxCard;
+    }
+}
+export {};

package/dist/checkbox-card/CheckboxCard.d.ts

@@ -0,0 +1,136 @@
+import { LitElement, type PropertyValues } from 'lit';
+declare const SkdxCheckboxCard_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
+    formAssociated: boolean;
+};
+/**
+ * `<skdx-checkbox-card>` — the Web Components implementation of the shared
+ * CheckboxCard contract (see `@skdx/shared`'s `checkboxCardContract`). A
+ * checkbox whose hit target is a whole card: the root behaves as a `<label>`,
+ * so a click anywhere on the card surface toggles the control and moves focus
+ * to it.
+ *
+ * The root owns all the state — checked, `name`/`value`/`required`/`disabled`/
+ * `invalid` — and pushes it down onto its light-DOM parts
+ * (`<skdx-checkbox-card-control>`, `-indicator`, `-label`, `-description`), which
+ * find it with `closest('skdx-checkbox-card')`. It also wires the control's
+ * `aria-labelledby`/`aria-describedby` to the label and description
+ * automatically, and only while those parts are actually present — a dangling
+ * ARIA reference is its own accessibility bug.
+ *
+ * Emits `data-state="checked" | "unchecked"`, `data-disabled`, `data-invalid`
+ * and `data-focus-visible` on the host, which is the whole styling contract:
+ * the card paints its selected, disabled, error and keyboard-focus rings from
+ * the control's state without the control ever being visible.
+ *
+ * Form-associated via `ElementInternals`: with a `name`, the `value` is
+ * submitted by the surrounding `<form>` while checked, and `required` fails
+ * with `valueMissing` while unchecked. Unlike React, where a real
+ * `<input type="checkbox">` does the submitting, the host itself is the
+ * form-associated control — the same split `<skdx-checkbox>` already makes.
+ *
+ * **Nothing interactive may be nested inside the card.** The root behaves as a
+ * `<label>`, so a link or button in there is both an HTML content-model
+ * violation and a real usability bug — clicking the inner control would also
+ * toggle the card. Put actions beside the card, never inside it.
+ *
+ * @example
+ * ```html
+ * <skdx-checkbox-card name="addons" value="backups" default-checked>
+ *   <skdx-checkbox-card-control></skdx-checkbox-card-control>
+ *   <skdx-checkbox-card-indicator></skdx-checkbox-card-indicator>
+ *   <skdx-checkbox-card-label>Automated backups</skdx-checkbox-card-label>
+ *   <skdx-checkbox-card-description>Nightly snapshots, kept for 30 days.</skdx-checkbox-card-description>
+ * </skdx-checkbox-card>
+ * ```
+ *
+ * @fires checked-change - Fires with the new checked state (boolean) whenever it changes, controlled or not. Suppressed when the next state equals the current one.
+ */
+export declare class SkdxCheckboxCard extends SkdxCheckboxCard_base {
+    static styles: import("lit").CSSResult;
+    /**
+     * Checked state, for controlled usage. Pair with `checked-change`.
+     * @default undefined — uncontrolled: the card tracks its own checked state, seeded from `default-checked`.
+     */
+    checked?: boolean;
+    /**
+     * Initial checked state, for uncontrolled usage.
+     * @default false — the card starts unselected.
+     */
+    defaultChecked: boolean;
+    /**
+     * Name used as the `FormData` entry key when the card is inside a `<form>`.
+     * @default undefined — the card is unnamed and contributes nothing to form data.
+     */
+    name?: string;
+    /**
+     * Value submitted with the card when checked.
+     * @default 'on' — the same default the HTML checkbox itself uses.
+     */
+    value: string;
+    /**
+     * Marks the card required for native form validation, so an unchecked card
+     * blocks submission with `valueMissing`.
+     * @default false — the card can be left unchecked.
+     */
+    required: boolean;
+    /**
+     * Disables the card, so neither the surface nor the keyboard can change it
+     * and the control leaves the tab order.
+     * @default false — the card is interactive.
+     */
+    disabled: boolean;
+    /**
+     * Marks the card invalid, exposed as `aria-invalid` on the control and
+     * `data-invalid` on the host so the card can paint an error state.
+     * @default false — no error state is painted.
+     */
+    invalid: boolean;
+    /**
+     * Replaces the message the browser shows when a `required` card is submitted
+     * unchecked. The default is written for a generic checkbox; a card usually
+     * stands for a concrete choice ("Pick a plan to continue.") and that wording
+     * is otherwise unreachable from markup.
+     * @default undefined — keeps `'Please check this box to continue.'`
+     */
+    requiredMessage?: string;
+    private _uncontrolledChecked?;
+    private _focusVisible;
+    private _viaPointer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    /** The current checked state, resolving controlled vs. uncontrolled. */
+    get isChecked(): boolean;
+    /** The `<skdx-checkbox-card-control>` this card owns, if one has been slotted in. */
+    private get _control();
+    /**
+     * Sets the checked state, firing `checked-change`. A no-op while disabled, and
+     * silent when `next` already equals the current state.
+     */
+    setChecked(next: boolean): void;
+    /** Flips the checked state. What the card surface, Space, and the control all do. */
+    toggle(): void;
+    /** Restores the state the `default-checked` attribute declared, when the owning form is reset. */
+    formResetCallback(): void;
+    private _syncFormState;
+    private _syncHostAttributes;
+    /**
+     * @internal Pushes the root's state onto every part. Called by each part on
+     * connect (parts upgrade after the root, so they ask for a first sync) and by
+     * the root on every state change.
+     */
+    syncParts(): void;
+    private _link;
+    private readonly _handleClick;
+    private readonly _handleKeydown;
+    private readonly _handlePointerDown;
+    private readonly _handleFocusIn;
+    private readonly _handleFocusOut;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-checkbox-card': SkdxCheckboxCard;
+    }
+}
+export {};