@skdx/vue 0.26.0

package/dist/carousel/context.d.cts

@@ -0,0 +1,34 @@
+import type { InjectionKey, Ref } from 'vue';
+/** @internal Injection key a Carousel provides so its parts can read/drive shared state. */
+export interface CarouselContext {
+    value: Readonly<Ref<number>>;
+    setValue(index: number): void;
+    orientation: 'horizontal' | 'vertical';
+    loop: boolean;
+    itemIds: Ref<string[]>;
+    registerItem(id: string): void;
+    unregisterItem(id: string): void;
+    /** How many slides are visible at once. */
+    slidesPerPage: number;
+    /** How many slides one Previous/Next step (or Arrow keypress) moves. */
+    slidesPerMove: number;
+    /** Highest index the carousel can rest at — `max(0, count - slidesPerPage)`, so the last page stays full. */
+    maxIndex: Readonly<Ref<number>>;
+    /** Moves to `index`, clamped into `[0, maxIndex]`. Ignores out-of-range values rather than throwing. */
+    scrollToIndex(index: number): void;
+    /** Steps forward by `slidesPerMove`, wrapping to the start when `loop` is set. */
+    next(): void;
+    /** Steps back by `slidesPerMove`, wrapping to the last page when `loop` is set. */
+    previous(): void;
+    /**
+     * Whether autoplay is switched on. This is the user's setting, not the live
+     * timer state — hover/focus/page-hidden suspend the timer without flipping it.
+     */
+    playing: Readonly<Ref<boolean>>;
+    /** Starts or stops autoplay — what `SkdxCarouselPlayPause` calls. */
+    setPlaying(playing: boolean): void;
+}
+/** @internal Injection key a Carousel provides so its items/controls can read the active index, register themselves, and navigate. */
+export declare const CAROUSEL_CONTEXT: InjectionKey<CarouselContext>;
+/** @internal Generates a unique, stable-per-instance id for a CarouselItem. */
+export declare function nextCarouselItemId(): string;

package/dist/carousel/context.d.ts

@@ -0,0 +1,34 @@
+import type { InjectionKey, Ref } from 'vue';
+/** @internal Injection key a Carousel provides so its parts can read/drive shared state. */
+export interface CarouselContext {
+    value: Readonly<Ref<number>>;
+    setValue(index: number): void;
+    orientation: 'horizontal' | 'vertical';
+    loop: boolean;
+    itemIds: Ref<string[]>;
+    registerItem(id: string): void;
+    unregisterItem(id: string): void;
+    /** How many slides are visible at once. */
+    slidesPerPage: number;
+    /** How many slides one Previous/Next step (or Arrow keypress) moves. */
+    slidesPerMove: number;
+    /** Highest index the carousel can rest at — `max(0, count - slidesPerPage)`, so the last page stays full. */
+    maxIndex: Readonly<Ref<number>>;
+    /** Moves to `index`, clamped into `[0, maxIndex]`. Ignores out-of-range values rather than throwing. */
+    scrollToIndex(index: number): void;
+    /** Steps forward by `slidesPerMove`, wrapping to the start when `loop` is set. */
+    next(): void;
+    /** Steps back by `slidesPerMove`, wrapping to the last page when `loop` is set. */
+    previous(): void;
+    /**
+     * Whether autoplay is switched on. This is the user's setting, not the live
+     * timer state — hover/focus/page-hidden suspend the timer without flipping it.
+     */
+    playing: Readonly<Ref<boolean>>;
+    /** Starts or stops autoplay — what `SkdxCarouselPlayPause` calls. */
+    setPlaying(playing: boolean): void;
+}
+/** @internal Injection key a Carousel provides so its items/controls can read the active index, register themselves, and navigate. */
+export declare const CAROUSEL_CONTEXT: InjectionKey<CarouselContext>;
+/** @internal Generates a unique, stable-per-instance id for a CarouselItem. */
+export declare function nextCarouselItemId(): string;

package/dist/carousel/context.js

@@ -0,0 +1 @@
+import{nextId as t}from"../utils/id.js";var e=/* @__PURE__ */Symbol("skdx-carousel-context");function o(){return t("carousel-item")}export{e as CAROUSEL_CONTEXT,o as nextCarouselItemId};

package/dist/carousel/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Carousel.vue.cjs"),r=require("./CarouselContent.vue.cjs"),u=require("./CarouselItem.vue.cjs"),o=require("./CarouselPrevious.vue.cjs"),a=require("./CarouselNext.vue.cjs"),t=require("./CarouselPlayPause.vue.cjs");exports.SkdxCarousel=e.default;exports.SkdxCarouselContent=r.default;exports.SkdxCarouselItem=u.default;exports.SkdxCarouselNext=a.default;exports.SkdxCarouselPlayPause=t.default;exports.SkdxCarouselPrevious=o.default;

package/dist/carousel/index.d.cts

@@ -0,0 +1,6 @@
+export { default as SkdxCarousel } from './Carousel.vue.cjs';
+export { default as SkdxCarouselContent } from './CarouselContent.vue.cjs';
+export { default as SkdxCarouselItem } from './CarouselItem.vue.cjs';
+export { default as SkdxCarouselPrevious } from './CarouselPrevious.vue.cjs';
+export { default as SkdxCarouselNext } from './CarouselNext.vue.cjs';
+export { default as SkdxCarouselPlayPause } from './CarouselPlayPause.vue.cjs';

package/dist/carousel/index.d.ts

@@ -0,0 +1,6 @@
+export { default as SkdxCarousel } from './Carousel.vue.js';
+export { default as SkdxCarouselContent } from './CarouselContent.vue.js';
+export { default as SkdxCarouselItem } from './CarouselItem.vue.js';
+export { default as SkdxCarouselPrevious } from './CarouselPrevious.vue.js';
+export { default as SkdxCarouselNext } from './CarouselNext.vue.js';
+export { default as SkdxCarouselPlayPause } from './CarouselPlayPause.vue.js';

package/dist/carousel/index.js

@@ -0,0 +1 @@
+import e from"./Carousel.vue.js";import o from"./CarouselContent.vue.js";import s from"./CarouselItem.vue.js";import r from"./CarouselPrevious.vue.js";import a from"./CarouselNext.vue.js";import u from"./CarouselPlayPause.vue.js";export{e as SkdxCarousel,o as SkdxCarouselContent,s as SkdxCarouselItem,a as SkdxCarouselNext,u as SkdxCarouselPlayPause,r as SkdxCarouselPrevious};

package/dist/checkbox/Checkbox.vue.cjs

@@ -0,0 +1 @@
+const e=require("./Checkbox.vue_vue_type_script_setup_true_lang.cjs");var u=e.default;exports.default=u;

package/dist/checkbox/Checkbox.vue.d.cts

@@ -0,0 +1,67 @@
+type CheckedState = boolean | 'indeterminate';
+/**
+ * The Vue implementation of the shared Checkbox contract (see
+ * `@skdx/shared`'s `checkboxContract`). Renders `role="checkbox"` with
+ * `aria-checked` (`'mixed'` when indeterminate) plus a visually-hidden
+ * native `<input type="checkbox">` for real form participation when `name`
+ * is set.
+ *
+ * Supports `v-model` on `checked` (Vue's default `modelValue`/
+ * `update:modelValue` convention is intentionally not used here so the prop
+ * name matches every other framework's `checked`/`checkedChange` pair —
+ * bind explicitly with `v-model:checked`). Leaving `checked` unbound keeps
+ * the checkbox uncontrolled, starting from `defaultChecked`.
+ */
+type __VLS_Props = {
+    /** Checked state, for controlled usage. Pair with `v-model:checked` or `@checked-change`. */
+    checked?: CheckedState;
+    /** Initial checked state, for uncontrolled usage. */
+    defaultChecked?: CheckedState;
+    /** Disables toggling and excludes the checkbox from the tab order. */
+    disabled?: boolean;
+    /**
+     * Marks the hidden input required for native form validation, and sets
+     * `aria-required` on the button. A caller that wants `aria-required`
+     * *without* a required hidden input — a CheckboxGroupItem in a required
+     * group, where "at least one" is not "every box" — passes the bare
+     * attribute, and it wins: `$attrs` is bound last on the button below.
+     */
+    required?: boolean;
+    /** Name for native form participation via a hidden input. Omitted: no hidden input is rendered. */
+    name?: string;
+    /** Value submitted with the hidden input when checked. */
+    value?: string;
+    /** Marks the checkbox as invalid, exposed as `aria-invalid`/`data-invalid`. */
+    invalid?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Focuses the underlying checkbox button. */
+    focus: () => void | undefined;
+    /** The underlying checkbox button element. */
+    el: import("vue").Ref<HTMLButtonElement | null, HTMLButtonElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:checked": (checked: CheckedState) => any;
+    "checked-change": (checked: CheckedState) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:checked"?: ((checked: CheckedState) => any) | undefined;
+    "onChecked-change"?: ((checked: CheckedState) => any) | undefined;
+}>, {
+    disabled: boolean;
+    checked: CheckedState;
+    defaultChecked: CheckedState;
+    required: boolean;
+    name: string;
+    value: string;
+    invalid: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/checkbox/Checkbox.vue.d.ts

@@ -0,0 +1,67 @@
+type CheckedState = boolean | 'indeterminate';
+/**
+ * The Vue implementation of the shared Checkbox contract (see
+ * `@skdx/shared`'s `checkboxContract`). Renders `role="checkbox"` with
+ * `aria-checked` (`'mixed'` when indeterminate) plus a visually-hidden
+ * native `<input type="checkbox">` for real form participation when `name`
+ * is set.
+ *
+ * Supports `v-model` on `checked` (Vue's default `modelValue`/
+ * `update:modelValue` convention is intentionally not used here so the prop
+ * name matches every other framework's `checked`/`checkedChange` pair —
+ * bind explicitly with `v-model:checked`). Leaving `checked` unbound keeps
+ * the checkbox uncontrolled, starting from `defaultChecked`.
+ */
+type __VLS_Props = {
+    /** Checked state, for controlled usage. Pair with `v-model:checked` or `@checked-change`. */
+    checked?: CheckedState;
+    /** Initial checked state, for uncontrolled usage. */
+    defaultChecked?: CheckedState;
+    /** Disables toggling and excludes the checkbox from the tab order. */
+    disabled?: boolean;
+    /**
+     * Marks the hidden input required for native form validation, and sets
+     * `aria-required` on the button. A caller that wants `aria-required`
+     * *without* a required hidden input — a CheckboxGroupItem in a required
+     * group, where "at least one" is not "every box" — passes the bare
+     * attribute, and it wins: `$attrs` is bound last on the button below.
+     */
+    required?: boolean;
+    /** Name for native form participation via a hidden input. Omitted: no hidden input is rendered. */
+    name?: string;
+    /** Value submitted with the hidden input when checked. */
+    value?: string;
+    /** Marks the checkbox as invalid, exposed as `aria-invalid`/`data-invalid`. */
+    invalid?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Focuses the underlying checkbox button. */
+    focus: () => void | undefined;
+    /** The underlying checkbox button element. */
+    el: import("vue").Ref<HTMLButtonElement | null, HTMLButtonElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:checked": (checked: CheckedState) => any;
+    "checked-change": (checked: CheckedState) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:checked"?: ((checked: CheckedState) => any) | undefined;
+    "onChecked-change"?: ((checked: CheckedState) => any) | undefined;
+}>, {
+    disabled: boolean;
+    checked: CheckedState;
+    defaultChecked: CheckedState;
+    required: boolean;
+    name: string;
+    value: string;
+    invalid: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/checkbox/Checkbox.vue.js

@@ -0,0 +1 @@
+import e from"./Checkbox.vue_vue_type_script_setup_true_lang.js";var t=e;export{t as default};

package/dist/checkbox/Checkbox.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const m=require("./context.cjs");let e=require("vue");var b=["aria-checked","aria-required","aria-invalid","data-state","data-disabled","data-invalid","disabled"],p=["name","value","checked","required","disabled"],x=(0,e.defineComponent)({inheritAttrs:!1,__name:"Checkbox",props:{checked:{type:[Boolean,String],default:void 0},defaultChecked:{type:[Boolean,String],default:!1},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{default:void 0},value:{default:"on"},invalid:{type:Boolean,default:!1}},emits:["update:checked","checked-change"],setup(a,{expose:s,emit:v}){const i=a,n=v,c=(0,e.ref)(i.defaultChecked),o=(0,e.computed)(()=>i.checked!==void 0),t=(0,e.computed)(()=>o.value?i.checked:c.value),u=(0,e.computed)(()=>t.value==="indeterminate"?"indeterminate":t.value?"checked":"unchecked"),h=(0,e.computed)(()=>t.value==="indeterminate"?"mixed":t.value?"true":"false"),k=(0,e.computed)(()=>t.value==="indeterminate"?!1:t.value),l=(0,e.ref)(null);(0,e.provide)(m.CHECKBOX_CONTEXT,{checked:t,state:u,disabled:(0,e.computed)(()=>i.disabled)});function f(){if(i.disabled)return;const d=t.value==="indeterminate"?!0:!t.value;o.value||(c.value=d),n("update:checked",d),n("checked-change",d)}return s({focus:()=>l.value?.focus(),el:l}),(d,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createElementVNode)("button",(0,e.mergeProps)({class:"skdx-checkbox","data-part":"root","data-skdx-component":"checkbox",ref_key:"checkboxRef",ref:l,type:"button",role:"checkbox","aria-checked":h.value,"aria-required":a.required||void 0,"aria-invalid":a.invalid?!0:void 0,"data-state":u.value,"data-disabled":a.disabled?"":void 0,"data-invalid":a.invalid?"":void 0,disabled:a.disabled,onClick:f,onKeydown:r[0]||(r[0]=(0,e.withKeys)((0,e.withModifiers)(()=>{},["prevent"]),["enter"]))},d.$attrs),[(0,e.renderSlot)(d.$slots,"default")],16,b),a.name?((0,e.openBlock)(),(0,e.createElementBlock)("input",{key:0,type:"checkbox","aria-hidden":"true",tabindex:"-1",name:a.name,value:a.value,checked:k.value,required:a.required,disabled:a.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,p)):(0,e.createCommentVNode)("",!0)],64))}});exports.default=x;

package/dist/checkbox/Checkbox.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{CHECKBOX_CONTEXT as e}from"./context.js";import{Fragment as a,computed as d,createCommentVNode as t,createElementBlock as i,createElementVNode as l,defineComponent as n,mergeProps as o,openBlock as r,provide as c,ref as u,renderSlot as s,withKeys as v,withModifiers as h}from"vue";var p=["aria-checked","aria-required","aria-invalid","data-state","data-disabled","data-invalid","disabled"],k=["name","value","checked","required","disabled"],m=/* @__PURE__ */n({inheritAttrs:!1,__name:"Checkbox",props:{checked:{type:[Boolean,String],default:void 0},defaultChecked:{type:[Boolean,String],default:!1},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{default:void 0},value:{default:"on"},invalid:{type:Boolean,default:!1}},emits:["update:checked","checked-change"],setup(n,{expose:m,emit:f}){const b=n,x=f,y=u(b.defaultChecked),C=d(()=>void 0!==b.checked),g=d(()=>C.value?b.checked:y.value),B=d(()=>"indeterminate"===g.value?"indeterminate":g.value?"checked":"unchecked"),q=d(()=>"indeterminate"===g.value?"mixed":g.value?"true":"false"),w=d(()=>"indeterminate"!==g.value&&g.value),E=u(null);function _(){if(b.disabled)return;const e="indeterminate"===g.value||!g.value;C.value||(y.value=e),x("update:checked",e),x("checked-change",e)}return c(e,{checked:g,state:B,disabled:d(()=>b.disabled)}),m({focus:()=>E.value?.focus(),el:E}),(e,d)=>(r(),i(a,null,[l("button",o({class:"skdx-checkbox","data-part":"root","data-skdx-component":"checkbox",ref_key:"checkboxRef",ref:E,type:"button",role:"checkbox","aria-checked":q.value,"aria-required":n.required||void 0,"aria-invalid":!!n.invalid||void 0,"data-state":B.value,"data-disabled":n.disabled?"":void 0,"data-invalid":n.invalid?"":void 0,disabled:n.disabled,onClick:_,onKeydown:d[0]||(d[0]=v(h(()=>{},["prevent"]),["enter"]))},e.$attrs),[s(e.$slots,"default")],16,p),n.name?(r(),i("input",{key:0,type:"checkbox","aria-hidden":"true",tabindex:"-1",name:n.name,value:n.value,checked:w.value,required:n.required,disabled:n.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,k)):t("",!0)],64))}});export{m as default};

package/dist/checkbox/CheckboxIndicator.vue.cjs

@@ -0,0 +1 @@
+const e=require("./CheckboxIndicator.vue_vue_type_script_setup_true_lang.cjs");var t=e.default;exports.default=t;

package/dist/checkbox/CheckboxIndicator.vue.d.cts

@@ -0,0 +1,36 @@
+/**
+ * The visual mark (a check or a dash) shown inside a `<SkdxCheckbox>`. Renders
+ * `<span data-state data-disabled>` mirroring the parent checkbox's state, and
+ * unmounts when the box is unchecked unless `forceMount` is set.
+ *
+ * Exists because the box and the mark are two paint targets, not one: the skin
+ * puts the border, fill and 16px square on the root and only the glyph on this
+ * part, so a checkbox whose mark is a bare text node inherits the box's flex
+ * centring but none of the glyph's own sizing. It is also what makes the Vue
+ * anatomy identical to React's, which is what lets one stylesheet serve both.
+ *
+ * @example
+ * ```vue
+ * <SkdxCheckbox :default-checked="true">
+ *   <SkdxCheckboxIndicator>✓</SkdxCheckboxIndicator>
+ * </SkdxCheckbox>
+ * ```
+ */
+type __VLS_Props = {
+    /** Keeps the mark mounted while unchecked, so a consumer can animate it out themselves. */
+    forceMount?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    forceMount: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/checkbox/CheckboxIndicator.vue.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The visual mark (a check or a dash) shown inside a `<SkdxCheckbox>`. Renders
+ * `<span data-state data-disabled>` mirroring the parent checkbox's state, and
+ * unmounts when the box is unchecked unless `forceMount` is set.
+ *
+ * Exists because the box and the mark are two paint targets, not one: the skin
+ * puts the border, fill and 16px square on the root and only the glyph on this
+ * part, so a checkbox whose mark is a bare text node inherits the box's flex
+ * centring but none of the glyph's own sizing. It is also what makes the Vue
+ * anatomy identical to React's, which is what lets one stylesheet serve both.
+ *
+ * @example
+ * ```vue
+ * <SkdxCheckbox :default-checked="true">
+ *   <SkdxCheckboxIndicator>✓</SkdxCheckboxIndicator>
+ * </SkdxCheckbox>
+ * ```
+ */
+type __VLS_Props = {
+    /** Keeps the mark mounted while unchecked, so a consumer can animate it out themselves. */
+    forceMount?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    forceMount: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/checkbox/CheckboxIndicator.vue.js

@@ -0,0 +1 @@
+import e from"./CheckboxIndicator.vue_vue_type_script_setup_true_lang.js";var t=e;export{t as default};

package/dist/checkbox/CheckboxIndicator.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const n=require("./context.cjs");let e=require("vue");var c=["data-state","data-disabled"],s=(0,e.defineComponent)({__name:"CheckboxIndicator",props:{forceMount:{type:Boolean,default:!1}},setup(a){const o=a,t=(0,e.inject)(n.CHECKBOX_CONTEXT);if(!t)throw new Error("<SkdxCheckboxIndicator> must be used inside <SkdxCheckbox>.");const r=(0,e.computed)(()=>o.forceMount||t.checked.value!==!1);return(d,u)=>r.value?((0,e.openBlock)(),(0,e.createElementBlock)("span",{key:0,class:"skdx-checkbox__indicator","data-part":"indicator","data-state":(0,e.unref)(t).state.value,"data-disabled":(0,e.unref)(t).disabled.value?"":void 0},[(0,e.renderSlot)(d.$slots,"default")],8,c)):(0,e.createCommentVNode)("",!0)}});exports.default=s;

package/dist/checkbox/CheckboxIndicator.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{CHECKBOX_CONTEXT as e}from"./context.js";import{computed as a,createCommentVNode as t,createElementBlock as o,defineComponent as s,inject as d,openBlock as r,renderSlot as n,unref as c}from"vue";var i=["data-state","data-disabled"],l=/* @__PURE__ */s({__name:"CheckboxIndicator",props:{forceMount:{type:Boolean,default:!1}},setup(s){const l=s,u=d(e);if(!u)throw new Error("<SkdxCheckboxIndicator> must be used inside <SkdxCheckbox>.");const p=a(()=>l.forceMount||!1!==u.checked.value);return(e,a)=>p.value?(r(),o("span",{key:0,class:"skdx-checkbox__indicator","data-part":"indicator","data-state":c(u).state.value,"data-disabled":c(u).disabled.value?"":void 0},[n(e.$slots,"default")],8,i)):t("",!0)}});export{l as default};

package/dist/checkbox/context.cjs

@@ -0,0 +1 @@
+var C=Symbol("skdx-checkbox-context");exports.CHECKBOX_CONTEXT=C;

package/dist/checkbox/context.d.cts

@@ -0,0 +1,12 @@
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
+/** Checked state a Checkbox can hold — tri-state, like the shared contract. */
+export type CheckboxCheckedState = boolean | 'indeterminate';
+/** @internal What a Checkbox provides so its indicator can mirror its state. */
+export interface CheckboxContext {
+    checked: Readonly<Ref<CheckboxCheckedState>> | ComputedRef<CheckboxCheckedState>;
+    /** `'checked' | 'unchecked' | 'indeterminate'`, already resolved for `data-state`. */
+    state: ComputedRef<'checked' | 'unchecked' | 'indeterminate'>;
+    disabled: ComputedRef<boolean>;
+}
+/** @internal Injection key a Checkbox provides so `<SkdxCheckboxIndicator>` can read checked/disabled. */
+export declare const CHECKBOX_CONTEXT: InjectionKey<CheckboxContext>;

package/dist/checkbox/context.d.ts

@@ -0,0 +1,12 @@
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
+/** Checked state a Checkbox can hold — tri-state, like the shared contract. */
+export type CheckboxCheckedState = boolean | 'indeterminate';
+/** @internal What a Checkbox provides so its indicator can mirror its state. */
+export interface CheckboxContext {
+    checked: Readonly<Ref<CheckboxCheckedState>> | ComputedRef<CheckboxCheckedState>;
+    /** `'checked' | 'unchecked' | 'indeterminate'`, already resolved for `data-state`. */
+    state: ComputedRef<'checked' | 'unchecked' | 'indeterminate'>;
+    disabled: ComputedRef<boolean>;
+}
+/** @internal Injection key a Checkbox provides so `<SkdxCheckboxIndicator>` can read checked/disabled. */
+export declare const CHECKBOX_CONTEXT: InjectionKey<CheckboxContext>;

package/dist/checkbox/context.js

@@ -0,0 +1 @@
+var o=/* @__PURE__ */Symbol("skdx-checkbox-context");export{o as CHECKBOX_CONTEXT};

package/dist/checkbox/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Checkbox.vue.cjs"),r=require("./CheckboxIndicator.vue.cjs");exports.SkdxCheckbox=e.default;exports.SkdxCheckboxIndicator=r.default;

package/dist/checkbox/index.d.cts

@@ -0,0 +1,3 @@
+export { default as SkdxCheckbox } from './Checkbox.vue.cjs';
+export { default as SkdxCheckboxIndicator } from './CheckboxIndicator.vue.cjs';
+export type { CheckboxCheckedState, CheckboxCheckedState as CheckedState } from './context.cjs';

package/dist/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SkdxCheckbox } from './Checkbox.vue.js';
+export { default as SkdxCheckboxIndicator } from './CheckboxIndicator.vue.js';
+export type { CheckboxCheckedState, CheckboxCheckedState as CheckedState } from './context.js';

package/dist/checkbox/index.js

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

package/dist/checkbox-card/CheckboxCard.vue.cjs

@@ -0,0 +1 @@
+const e=require("./CheckboxCard.vue_vue_type_script_setup_true_lang.cjs");var r=e.default;exports.default=r;

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

@@ -0,0 +1,103 @@
+/**
+ * The Vue implementation of the shared CheckboxCard contract (see
+ * `@skdx/shared`'s `checkboxCardContract`). Root of a selectable card backed
+ * by a checkbox: a `<label>` wrapping a real, visually hidden
+ * `<input type="checkbox">` (`SkdxCheckboxCardControl`), so the **entire card
+ * surface** is the hit target with no click handler, no keydown handler and no
+ * `role` of its own — native label activation does it.
+ *
+ * Emits `data-state="checked" | "unchecked"`, `data-disabled`, `data-invalid`
+ * and `data-focus-visible` on the root, which is the whole styling contract:
+ * the card paints its selected, disabled, error and keyboard-focus rings from
+ * the input's state without the input ever being visible.
+ *
+ * Works controlled (`v-model:checked` / `@checked-change`) or uncontrolled
+ * (`defaultChecked`), and participates in native form submission when `name`
+ * is set.
+ *
+ * **Nothing interactive may be nested inside the card.** The root is 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
+ * ```vue
+ * <SkdxCheckboxCard default-checked name="addons" value="backups">
+ *   <SkdxCheckboxCardControl />
+ *   <SkdxCheckboxCardIndicator />
+ *   <SkdxCheckboxCardLabel>Automated backups</SkdxCheckboxCardLabel>
+ *   <SkdxCheckboxCardDescription>Nightly snapshots, kept for 30 days.</SkdxCheckboxCardDescription>
+ * </SkdxCheckboxCard>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Checked state, for controlled usage. Pair with `v-model:checked` or
+     * `@checked-change`.
+     * @default undefined — uncontrolled, the card tracks its own checked state.
+     */
+    checked?: boolean;
+    /**
+     * Initial checked state, for uncontrolled usage, seeding the first render.
+     * @default false — the card starts unselected.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Name put on the underlying native `<input type="checkbox">` for form
+     * submission. Unlike `SkdxCheckbox` the input always exists here (it is what
+     * makes the card clickable), so omitting `name` only means the value is not
+     * submitted.
+     * @default undefined — the control is unnamed and contributes nothing to form data.
+     */
+    name?: string;
+    /**
+     * Value submitted with the control when checked.
+     * @default 'on' — the same default the HTML checkbox itself uses.
+     */
+    value?: string;
+    /**
+     * Marks the control 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 control, so neither the card surface nor the keyboard can
+     * change it and it leaves the tab order. Also emitted as `data-disabled`
+     * on the root, the indicator, the label and the description.
+     * @default false — the card is interactive.
+     */
+    disabled?: boolean;
+    /**
+     * Marks the card invalid, exposed as `aria-invalid` on the control and
+     * `data-invalid` on the root so the card can paint an error state.
+     * @default false — no error styling and no aria-invalid.
+     */
+    invalid?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:checked": (checked: boolean) => any;
+    "checked-change": (checked: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:checked"?: ((checked: boolean) => any) | undefined;
+    "onChecked-change"?: ((checked: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    checked: boolean;
+    defaultChecked: boolean;
+    required: boolean;
+    name: string;
+    value: string;
+    invalid: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,103 @@
+/**
+ * The Vue implementation of the shared CheckboxCard contract (see
+ * `@skdx/shared`'s `checkboxCardContract`). Root of a selectable card backed
+ * by a checkbox: a `<label>` wrapping a real, visually hidden
+ * `<input type="checkbox">` (`SkdxCheckboxCardControl`), so the **entire card
+ * surface** is the hit target with no click handler, no keydown handler and no
+ * `role` of its own — native label activation does it.
+ *
+ * Emits `data-state="checked" | "unchecked"`, `data-disabled`, `data-invalid`
+ * and `data-focus-visible` on the root, which is the whole styling contract:
+ * the card paints its selected, disabled, error and keyboard-focus rings from
+ * the input's state without the input ever being visible.
+ *
+ * Works controlled (`v-model:checked` / `@checked-change`) or uncontrolled
+ * (`defaultChecked`), and participates in native form submission when `name`
+ * is set.
+ *
+ * **Nothing interactive may be nested inside the card.** The root is 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
+ * ```vue
+ * <SkdxCheckboxCard default-checked name="addons" value="backups">
+ *   <SkdxCheckboxCardControl />
+ *   <SkdxCheckboxCardIndicator />
+ *   <SkdxCheckboxCardLabel>Automated backups</SkdxCheckboxCardLabel>
+ *   <SkdxCheckboxCardDescription>Nightly snapshots, kept for 30 days.</SkdxCheckboxCardDescription>
+ * </SkdxCheckboxCard>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Checked state, for controlled usage. Pair with `v-model:checked` or
+     * `@checked-change`.
+     * @default undefined — uncontrolled, the card tracks its own checked state.
+     */
+    checked?: boolean;
+    /**
+     * Initial checked state, for uncontrolled usage, seeding the first render.
+     * @default false — the card starts unselected.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Name put on the underlying native `<input type="checkbox">` for form
+     * submission. Unlike `SkdxCheckbox` the input always exists here (it is what
+     * makes the card clickable), so omitting `name` only means the value is not
+     * submitted.
+     * @default undefined — the control is unnamed and contributes nothing to form data.
+     */
+    name?: string;
+    /**
+     * Value submitted with the control when checked.
+     * @default 'on' — the same default the HTML checkbox itself uses.
+     */
+    value?: string;
+    /**
+     * Marks the control 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 control, so neither the card surface nor the keyboard can
+     * change it and it leaves the tab order. Also emitted as `data-disabled`
+     * on the root, the indicator, the label and the description.
+     * @default false — the card is interactive.
+     */
+    disabled?: boolean;
+    /**
+     * Marks the card invalid, exposed as `aria-invalid` on the control and
+     * `data-invalid` on the root so the card can paint an error state.
+     * @default false — no error styling and no aria-invalid.
+     */
+    invalid?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:checked": (checked: boolean) => any;
+    "checked-change": (checked: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:checked"?: ((checked: boolean) => any) | undefined;
+    "onChecked-change"?: ((checked: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    checked: boolean;
+    defaultChecked: boolean;
+    required: boolean;
+    name: string;
+    value: string;
+    invalid: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/checkbox-card/CheckboxCard.vue.js

@@ -0,0 +1 @@
+import e from"./CheckboxCard.vue_vue_type_script_setup_true_lang.js";var r=e;export{r as default};

package/dist/checkbox-card/CheckboxCard.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const b=require("../utils/id.cjs"),m=require("./context.cjs");let e=require("vue");var C=["data-state","data-disabled","data-invalid","data-focus-visible"],_=(0,e.defineComponent)({__name:"CheckboxCard",props:{checked:{type:Boolean,default:void 0},defaultChecked:{type:Boolean,default:!1},name:{default:void 0},value:{default:"on"},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1}},emits:["update:checked","checked-change"],setup(o,{emit:f}){const d=o,n=f,i=(0,e.ref)(d.defaultChecked),c=(0,e.computed)(()=>d.checked===void 0?i.value:d.checked),u=b.nextId("checkbox-card"),s=(0,e.ref)(!1),r=(0,e.ref)(!1),l=(0,e.ref)(!1);let t=!1;function v(a){a!==c.value&&(d.checked===void 0&&(i.value=a),n("update:checked",a),n("checked-change",a))}(0,e.provide)(m.CHECKBOX_CARD_CONTEXT,{checked:c,disabled:(0,e.computed)(()=>d.disabled),required:(0,e.computed)(()=>d.required),invalid:(0,e.computed)(()=>d.invalid),name:(0,e.computed)(()=>d.name),value:(0,e.computed)(()=>d.value),labelId:`${u}-label`,descriptionId:`${u}-description`,hasLabel:(0,e.computed)(()=>s.value),hasDescription:(0,e.computed)(()=>r.value),setHasLabel:a=>{s.value=a},setHasDescription:a=>{r.value=a},onCheckedChange:v});function h(){t=!0}function p(){l.value=!t,t=!1}function k(){l.value=!1,t=!1}return(a,q)=>((0,e.openBlock)(),(0,e.createElementBlock)("label",{class:"skdx-checkbox-card","data-part":"root","data-skdx-component":"checkbox-card","data-state":c.value?"checked":"unchecked","data-disabled":o.disabled?"":void 0,"data-invalid":o.invalid?"":void 0,"data-focus-visible":l.value?"":void 0,onPointerdown:h,onFocusin:p,onFocusout:k},[(0,e.renderSlot)(a.$slots,"default")],40,C))}});exports.default=_;

package/dist/checkbox-card/CheckboxCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{nextId as e}from"../utils/id.js";import{CHECKBOX_CARD_CONTEXT as a}from"./context.js";import{computed as d,createElementBlock as t,defineComponent as o,openBlock as l,provide as c,ref as i,renderSlot as n}from"vue";var s=["data-state","data-disabled","data-invalid","data-focus-visible"],u=/* @__PURE__ */o({__name:"CheckboxCard",props:{checked:{type:Boolean,default:void 0},defaultChecked:{type:Boolean,default:!1},name:{default:void 0},value:{default:"on"},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1}},emits:["update:checked","checked-change"],setup(o,{emit:u}){const r=o,v=u,p=i(r.defaultChecked),h=d(()=>void 0===r.checked?p.value:r.checked),f=e("checkbox-card"),k=i(!1),b=i(!1),m=i(!1);let C=!1;function x(){C=!0}function B(){m.value=!C,C=!1}function y(){m.value=!1,C=!1}return c(a,{checked:h,disabled:d(()=>r.disabled),required:d(()=>r.required),invalid:d(()=>r.invalid),name:d(()=>r.name),value:d(()=>r.value),labelId:`${f}-label`,descriptionId:`${f}-description`,hasLabel:d(()=>k.value),hasDescription:d(()=>b.value),setHasLabel:e=>{k.value=e},setHasDescription:e=>{b.value=e},onCheckedChange:function(e){e!==h.value&&(void 0===r.checked&&(p.value=e),v("update:checked",e),v("checked-change",e))}}),(e,a)=>(l(),t("label",{class:"skdx-checkbox-card","data-part":"root","data-skdx-component":"checkbox-card","data-state":h.value?"checked":"unchecked","data-disabled":o.disabled?"":void 0,"data-invalid":o.invalid?"":void 0,"data-focus-visible":m.value?"":void 0,onPointerdown:x,onFocusin:B,onFocusout:y},[n(e.$slots,"default")],40,s))}});export{u as default};

package/dist/checkbox-card/CheckboxCardControl.vue.cjs

@@ -0,0 +1 @@
+const e=require("./CheckboxCardControl.vue_vue_type_script_setup_true_lang.cjs");var r=e.default;exports.default=r;