@skdx/vue 0.27.0 → 0.29.0

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

@@ -0,0 +1,117 @@
+/**
+ * Headless checkbox card, a label wrapping a hidden checkbox with the entire
+ * surface clickable, supporting controlled/uncontrolled usage, validation,
+ * and form submission; no interactive elements may nest inside, and it warns
+ * if they do.
+ *
+ * @example With `import * as CheckboxCard from '@skdx/vue/primitives/checkbox-card'`:
+ * ```vue
+ * <CheckboxCard.Root default-checked name="addons" value="backups">
+ *   <CheckboxCard.Control />
+ *   <img src="/backups.svg" alt="" />
+ *   <CheckboxCard.Indicator />
+ *   <CheckboxCard.Label>Automated backups</CheckboxCard.Label>
+ *   <CheckboxCard.Description>Nightly snapshots, kept for 30 days.</CheckboxCard.Description>
+ * </CheckboxCard.Root>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Checked state, for controlled usage, paired with `v-model:checked` or
+     * `@checked-change`.
+     * @default undefined — uncontrolled, the card tracks its own checked state.
+     */
+    checked?: boolean | undefined;
+    /**
+     * 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, so
+     * omitting `name` only means the value isn't submitted.
+     * @default undefined — the control is unnamed and contributes nothing to form data.
+     */
+    name?: string | undefined;
+    /**
+     * 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, removing it from the tab order and emitting `data-disabled`
+     * on the root, indicator, label, and description.
+     * @default false — the card is interactive.
+     */
+    disabled?: boolean;
+    /**
+     * Freezes the selection without freezing the card — the Control keeps its
+     * tab stop and gains `aria-readonly`, the root gains `data-readonly`,
+     * clicking or pressing Space changes nothing, and (unlike `aria-disabled`)
+     * the Control keeps submitting.
+     * @default false — the card is editable.
+     */
+    readOnly?: boolean;
+    /**
+     * Id of the `<form>` that owns this card when rendered outside it,
+     * forwarded to the Control input's `form` attribute.
+     * @default undefined — the card belongs to its nearest ancestor `<form>`, if any.
+     */
+    form?: string | undefined;
+    /**
+     * 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;
+    /**
+     * Size rung the skin renders the card at, reflected as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Reports whether the Control input satisfies its constraints, firing `invalid` when it does not. */
+    checkValidity: () => boolean;
+    /** Like `checkValidity()`, but also shows the browser's validation message. */
+    reportValidity: () => boolean;
+    /**
+     * Pushes an externally-computed error onto the Control input like
+     * `HTMLInputElement.setCustomValidity()` — a non-empty message makes the
+     * card invalid (`customError`), `''` clears it.
+     */
+    setCustomValidity: (message: string) => void | undefined;
+}, {}, {}, {}, 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;
+    "onChecked-change"?: (checked: boolean) => any;
+}>, {
+    disabled: boolean;
+    checked: boolean | undefined;
+    defaultChecked: boolean;
+    readOnly: boolean;
+    required: boolean;
+    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/CheckboxCardRoot.vue.d.ts

@@ -0,0 +1,117 @@
+/**
+ * Headless checkbox card, a label wrapping a hidden checkbox with the entire
+ * surface clickable, supporting controlled/uncontrolled usage, validation,
+ * and form submission; no interactive elements may nest inside, and it warns
+ * if they do.
+ *
+ * @example With `import * as CheckboxCard from '@skdx/vue/primitives/checkbox-card'`:
+ * ```vue
+ * <CheckboxCard.Root default-checked name="addons" value="backups">
+ *   <CheckboxCard.Control />
+ *   <img src="/backups.svg" alt="" />
+ *   <CheckboxCard.Indicator />
+ *   <CheckboxCard.Label>Automated backups</CheckboxCard.Label>
+ *   <CheckboxCard.Description>Nightly snapshots, kept for 30 days.</CheckboxCard.Description>
+ * </CheckboxCard.Root>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Checked state, for controlled usage, paired with `v-model:checked` or
+     * `@checked-change`.
+     * @default undefined — uncontrolled, the card tracks its own checked state.
+     */
+    checked?: boolean | undefined;
+    /**
+     * 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, so
+     * omitting `name` only means the value isn't submitted.
+     * @default undefined — the control is unnamed and contributes nothing to form data.
+     */
+    name?: string | undefined;
+    /**
+     * 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, removing it from the tab order and emitting `data-disabled`
+     * on the root, indicator, label, and description.
+     * @default false — the card is interactive.
+     */
+    disabled?: boolean;
+    /**
+     * Freezes the selection without freezing the card — the Control keeps its
+     * tab stop and gains `aria-readonly`, the root gains `data-readonly`,
+     * clicking or pressing Space changes nothing, and (unlike `aria-disabled`)
+     * the Control keeps submitting.
+     * @default false — the card is editable.
+     */
+    readOnly?: boolean;
+    /**
+     * Id of the `<form>` that owns this card when rendered outside it,
+     * forwarded to the Control input's `form` attribute.
+     * @default undefined — the card belongs to its nearest ancestor `<form>`, if any.
+     */
+    form?: string | undefined;
+    /**
+     * 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;
+    /**
+     * Size rung the skin renders the card at, reflected as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Reports whether the Control input satisfies its constraints, firing `invalid` when it does not. */
+    checkValidity: () => boolean;
+    /** Like `checkValidity()`, but also shows the browser's validation message. */
+    reportValidity: () => boolean;
+    /**
+     * Pushes an externally-computed error onto the Control input like
+     * `HTMLInputElement.setCustomValidity()` — a non-empty message makes the
+     * card invalid (`customError`), `''` clears it.
+     */
+    setCustomValidity: (message: string) => void | undefined;
+}, {}, {}, {}, 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;
+    "onChecked-change"?: (checked: boolean) => any;
+}>, {
+    disabled: boolean;
+    checked: boolean | undefined;
+    defaultChecked: boolean;
+    readOnly: boolean;
+    required: boolean;
+    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/CheckboxCardRoot.vue.js

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

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

@@ -0,0 +1 @@
+const b=require("../utils/appearance.cjs"),y=require("../utils/useFormReset.cjs"),q=require("./context.cjs"),O=require("./CheckboxCardDescription.vue.cjs"),B=require("./CheckboxCardLabel.vue.cjs"),x=require("../utils/useSelectionCard.cjs");let e=require("vue");var D=["data-state","data-disabled","data-readonly","data-invalid","data-focus-visible"],E='input[type="checkbox"]',L=(0,e.defineComponent)({inheritAttrs:!1,__name:"CheckboxCardRoot",props:{checked:{type:Boolean,default:void 0},defaultChecked:{type:Boolean,default:!1},name:{},value:{default:"on"},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},form:{},invalid:{type:Boolean,default:!1},size:{}},emits:["update:checked","checked-change"],setup(r,{expose:k,emit:v}){const a=r,i=v,n=(0,e.ref)(null),u=(0,e.ref)(a.defaultChecked),s=(0,e.computed)(()=>a.checked===void 0?u.value:a.checked),d=x.useSelectionCard({name:"checkbox-card",displayName:"CheckboxCard",rootEl:n,label:B.default,description:O.default,slot:(0,e.useSlots)().default}),{focusVisible:C,onPointerDown:f,onFocusIn:p,onFocusOut:h}=d;function m(t){a.readOnly||t!==s.value&&(a.checked===void 0&&(u.value=t),i("update:checked",t),i("checked-change",t))}(0,e.provide)(q.CHECKBOX_CARD_CONTEXT,{checked:s,disabled:(0,e.computed)(()=>a.disabled),readOnly:(0,e.computed)(()=>a.readOnly),required:(0,e.computed)(()=>a.required),invalid:(0,e.computed)(()=>a.invalid),name:(0,e.computed)(()=>a.name),value:(0,e.computed)(()=>a.value),form:(0,e.computed)(()=>a.form),labelId:d.labelId,descriptionId:d.descriptionId,hasLabel:d.hasLabel,hasDescription:d.hasDescription,setHasLabel:d.setHasLabel,setHasDescription:d.setHasDescription,onCheckedChange:m});function c(){return n.value?.querySelector(E)??null}return y.useFormReset(c,()=>{a.checked===void 0&&(u.value=a.defaultChecked),i("update:checked",a.defaultChecked),i("checked-change",a.defaultChecked)}),k({checkValidity:()=>c()?.checkValidity()??!0,reportValidity:()=>c()?.reportValidity()??!0,setCustomValidity:t=>c()?.setCustomValidity(t)}),(t,o)=>((0,e.openBlock)(),(0,e.createElementBlock)("label",(0,e.mergeProps)({ref_key:"rootEl",ref:n,class:"skdx-checkbox-card","data-part":"root","data-skdx-component":"checkbox-card","data-state":s.value?"checked":"unchecked","data-disabled":r.disabled?"":void 0,"data-readonly":r.readOnly?"":void 0,"data-invalid":r.invalid?"":void 0,"data-focus-visible":(0,e.unref)(C)?"":void 0},{...t.$attrs,...(0,e.unref)(b.appearanceAttrs)({size:r.size},t.$attrs)},{onPointerdown:o[0]||(o[0]=(...l)=>(0,e.unref)(f)&&(0,e.unref)(f)(...l)),onFocusin:o[1]||(o[1]=(...l)=>(0,e.unref)(p)&&(0,e.unref)(p)(...l)),onFocusout:o[2]||(o[2]=(...l)=>(0,e.unref)(h)&&(0,e.unref)(h)(...l))}),[(0,e.renderSlot)(t.$slots,"default")],16,D))}});exports.default=L;

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

@@ -0,0 +1 @@
+import{appearanceAttrs as e}from"../utils/appearance.js";import{useFormReset as a}from"../utils/useFormReset.js";import{CHECKBOX_CARD_CONTEXT as t}from"./context.js";import d from"./CheckboxCardDescription.vue.js";import o from"./CheckboxCardLabel.vue.js";import{useSelectionCard as s}from"../utils/useSelectionCard.js";import{computed as l,createElementBlock as i,defineComponent as c,mergeProps as r,openBlock as n,provide as u,ref as p,renderSlot as h,unref as f,useSlots as k}from"vue";var m=["data-state","data-disabled","data-readonly","data-invalid","data-focus-visible"],v=/* @__PURE__ */c({inheritAttrs:!1,__name:"CheckboxCardRoot",props:{checked:{type:Boolean,default:void 0},defaultChecked:{type:Boolean,default:!1},name:{},value:{default:"on"},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},form:{},invalid:{type:Boolean,default:!1},size:{}},emits:["update:checked","checked-change"],setup(c,{expose:v,emit:b}){const C=c,y=b,x=p(null),B=p(C.defaultChecked),O=l(()=>void 0===C.checked?B.value:C.checked),D=s({name:"checkbox-card",displayName:"CheckboxCard",rootEl:x,label:o,description:d,slot:k().default}),{focusVisible:V,onPointerDown:j,onFocusIn:F,onFocusOut:g}=D;function E(){return x.value?.querySelector('input[type="checkbox"]')??null}return u(t,{checked:O,disabled:l(()=>C.disabled),readOnly:l(()=>C.readOnly),required:l(()=>C.required),invalid:l(()=>C.invalid),name:l(()=>C.name),value:l(()=>C.value),form:l(()=>C.form),labelId:D.labelId,descriptionId:D.descriptionId,hasLabel:D.hasLabel,hasDescription:D.hasDescription,setHasLabel:D.setHasLabel,setHasDescription:D.setHasDescription,onCheckedChange:function(e){C.readOnly||e!==O.value&&(void 0===C.checked&&(B.value=e),y("update:checked",e),y("checked-change",e))}}),a(E,()=>{void 0===C.checked&&(B.value=C.defaultChecked),y("update:checked",C.defaultChecked),y("checked-change",C.defaultChecked)}),v({checkValidity:()=>E()?.checkValidity()??!0,reportValidity:()=>E()?.reportValidity()??!0,setCustomValidity:e=>E()?.setCustomValidity(e)}),(a,t)=>(n(),i("label",r({ref_key:"rootEl",ref:x,class:"skdx-checkbox-card","data-part":"root","data-skdx-component":"checkbox-card","data-state":O.value?"checked":"unchecked","data-disabled":c.disabled?"":void 0,"data-readonly":c.readOnly?"":void 0,"data-invalid":c.invalid?"":void 0,"data-focus-visible":f(V)?"":void 0},{...a.$attrs,...f(e)({size:c.size},a.$attrs)},{onPointerdown:t[0]||(t[0]=(...e)=>f(j)&&f(j)(...e)),onFocusin:t[1]||(t[1]=(...e)=>f(F)&&f(F)(...e)),onFocusout:t[2]||(t[2]=(...e)=>f(g)&&f(g)(...e))}),[h(a.$slots,"default")],16,m))}});export{v as default};

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

@@ -3,15 +3,19 @@ import type { ComputedRef, InjectionKey } from 'vue';
 export interface CheckboxCardContext {
     checked: ComputedRef<boolean>;
     disabled: ComputedRef<boolean>;
+    /** Read-only: keeps tab stop but refuses to change. */
+    readOnly: ComputedRef<boolean>;
     required: ComputedRef<boolean>;
     invalid: ComputedRef<boolean>;
     name: ComputedRef<string | undefined>;
     value: ComputedRef<string>;
+    /** The `<form>` id for a card rendered outside that form. */
+    form: ComputedRef<string | undefined>;
     labelId: string;
     descriptionId: string;
-    /** Whether a `SkdxCheckboxCardLabel` is mounted, so the control only points `aria-labelledby` at an id that exists. */
+    /** True only while a label is mounted, so `aria-labelledby` points at an id that exists. */
     hasLabel: ComputedRef<boolean>;
-    /** Whether a `SkdxCheckboxCardDescription` is mounted, so the control only points `aria-describedby` at an id that exists. */
+    /** True only while a description is mounted, so `aria-describedby` points at an id that exists. */
     hasDescription: ComputedRef<boolean>;
     setHasLabel: (present: boolean) => void;
     setHasDescription: (present: boolean) => void;

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

@@ -3,15 +3,19 @@ import type { ComputedRef, InjectionKey } from 'vue';
 export interface CheckboxCardContext {
     checked: ComputedRef<boolean>;
     disabled: ComputedRef<boolean>;
+    /** Read-only: keeps tab stop but refuses to change. */
+    readOnly: ComputedRef<boolean>;
     required: ComputedRef<boolean>;
     invalid: ComputedRef<boolean>;
     name: ComputedRef<string | undefined>;
     value: ComputedRef<string>;
+    /** The `<form>` id for a card rendered outside that form. */
+    form: ComputedRef<string | undefined>;
     labelId: string;
     descriptionId: string;
-    /** Whether a `SkdxCheckboxCardLabel` is mounted, so the control only points `aria-labelledby` at an id that exists. */
+    /** True only while a label is mounted, so `aria-labelledby` points at an id that exists. */
     hasLabel: ComputedRef<boolean>;
-    /** Whether a `SkdxCheckboxCardDescription` is mounted, so the control only points `aria-describedby` at an id that exists. */
+    /** True only while a description is mounted, so `aria-describedby` points at an id that exists. */
     hasDescription: ComputedRef<boolean>;
     setHasLabel: (present: boolean) => void;
     setHasDescription: (present: boolean) => void;

package/dist/checkbox-card/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./CheckboxCard.vue.cjs"),r=require("./CheckboxCardControl.vue.cjs"),o=require("./CheckboxCardIndicator.vue.cjs"),d=require("./CheckboxCardLabel.vue.cjs"),C=require("./CheckboxCardDescription.vue.cjs");exports.SkdxCheckboxCard=e.default;exports.SkdxCheckboxCardControl=r.default;exports.SkdxCheckboxCardDescription=C.default;exports.SkdxCheckboxCardIndicator=o.default;exports.SkdxCheckboxCardLabel=d.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./CheckboxCard.vue.cjs");exports.SkdxCheckboxCard=e.default;

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

@@ -1,5 +1 @@
 export { default as SkdxCheckboxCard } from './CheckboxCard.vue.cjs';
-export { default as SkdxCheckboxCardControl } from './CheckboxCardControl.vue.cjs';
-export { default as SkdxCheckboxCardIndicator } from './CheckboxCardIndicator.vue.cjs';
-export { default as SkdxCheckboxCardLabel } from './CheckboxCardLabel.vue.cjs';
-export { default as SkdxCheckboxCardDescription } from './CheckboxCardDescription.vue.cjs';

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

@@ -1,5 +1 @@
 export { default as SkdxCheckboxCard } from './CheckboxCard.vue.js';
-export { default as SkdxCheckboxCardControl } from './CheckboxCardControl.vue.js';
-export { default as SkdxCheckboxCardIndicator } from './CheckboxCardIndicator.vue.js';
-export { default as SkdxCheckboxCardLabel } from './CheckboxCardLabel.vue.js';
-export { default as SkdxCheckboxCardDescription } from './CheckboxCardDescription.vue.js';

package/dist/checkbox-card/index.js

@@ -1 +1 @@
-import o from"./CheckboxCard.vue.js";import r from"./CheckboxCardControl.vue.js";import C from"./CheckboxCardIndicator.vue.js";import e from"./CheckboxCardLabel.vue.js";import a from"./CheckboxCardDescription.vue.js";export{o as SkdxCheckboxCard,r as SkdxCheckboxCardControl,a as SkdxCheckboxCardDescription,C as SkdxCheckboxCardIndicator,e as SkdxCheckboxCardLabel};
+import o from"./CheckboxCard.vue.js";export{o as SkdxCheckboxCard};

package/dist/checkbox-card/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./CheckboxCardControl.vue.cjs"),r=require("./CheckboxCardDescription.vue.cjs"),o=require("./CheckboxCardIndicator.vue.cjs"),d=require("./CheckboxCardLabel.vue.cjs"),t=require("./CheckboxCardRoot.vue.cjs");exports.SkdxCheckboxCardControl=e.default;exports.SkdxCheckboxCardDescription=r.default;exports.SkdxCheckboxCardIndicator=o.default;exports.SkdxCheckboxCardLabel=d.default;exports.SkdxCheckboxCardRoot=t.default;

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

@@ -0,0 +1,26 @@
+/**
+ * Advanced primitives for `SkdxCheckboxCard`, the parts the recipe composes,
+ * for a structure other than the derived anatomy (media above title, custom part order).
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxCheckboxCardControl, SkdxCheckboxCardDescription, SkdxCheckboxCardIndicator, SkdxCheckboxCardLabel, SkdxCheckboxCardRoot } from '@skdx/vue/primitives/checkbox-card';
+ * </script>
+ *
+ * <template>
+ *   <SkdxCheckboxCardRoot name="addons" value="backups">
+ *     <SkdxCheckboxCardControl />
+ *     <img src="/backups.svg" alt="" />
+ *     <SkdxCheckboxCardIndicator>✓</SkdxCheckboxCardIndicator>
+ *     <SkdxCheckboxCardLabel>Automated backups</SkdxCheckboxCardLabel>
+ *     <SkdxCheckboxCardDescription>Nightly snapshots, kept for 30 days.</SkdxCheckboxCardDescription>
+ *   </SkdxCheckboxCardRoot>
+ * </template>
+ * ```
+ */
+export { default as SkdxCheckboxCardRoot } from './CheckboxCardRoot.vue.cjs';
+export { default as SkdxCheckboxCardControl } from './CheckboxCardControl.vue.cjs';
+export { default as SkdxCheckboxCardIndicator } from './CheckboxCardIndicator.vue.cjs';
+export { default as SkdxCheckboxCardLabel } from './CheckboxCardLabel.vue.cjs';
+export { default as SkdxCheckboxCardDescription } from './CheckboxCardDescription.vue.cjs';

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

@@ -0,0 +1,26 @@
+/**
+ * Advanced primitives for `SkdxCheckboxCard`, the parts the recipe composes,
+ * for a structure other than the derived anatomy (media above title, custom part order).
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxCheckboxCardControl, SkdxCheckboxCardDescription, SkdxCheckboxCardIndicator, SkdxCheckboxCardLabel, SkdxCheckboxCardRoot } from '@skdx/vue/primitives/checkbox-card';
+ * </script>
+ *
+ * <template>
+ *   <SkdxCheckboxCardRoot name="addons" value="backups">
+ *     <SkdxCheckboxCardControl />
+ *     <img src="/backups.svg" alt="" />
+ *     <SkdxCheckboxCardIndicator>✓</SkdxCheckboxCardIndicator>
+ *     <SkdxCheckboxCardLabel>Automated backups</SkdxCheckboxCardLabel>
+ *     <SkdxCheckboxCardDescription>Nightly snapshots, kept for 30 days.</SkdxCheckboxCardDescription>
+ *   </SkdxCheckboxCardRoot>
+ * </template>
+ * ```
+ */
+export { default as SkdxCheckboxCardRoot } from './CheckboxCardRoot.vue.js';
+export { default as SkdxCheckboxCardControl } from './CheckboxCardControl.vue.js';
+export { default as SkdxCheckboxCardIndicator } from './CheckboxCardIndicator.vue.js';
+export { default as SkdxCheckboxCardLabel } from './CheckboxCardLabel.vue.js';
+export { default as SkdxCheckboxCardDescription } from './CheckboxCardDescription.vue.js';

package/dist/checkbox-card/primitives.js

@@ -0,0 +1 @@
+import o from"./CheckboxCardControl.vue.js";import r from"./CheckboxCardDescription.vue.js";import C from"./CheckboxCardIndicator.vue.js";import e from"./CheckboxCardLabel.vue.js";import a from"./CheckboxCardRoot.vue.js";export{o as SkdxCheckboxCardControl,r as SkdxCheckboxCardDescription,C as SkdxCheckboxCardIndicator,e as SkdxCheckboxCardLabel,a as SkdxCheckboxCardRoot};

package/dist/checkbox-group/CheckboxGroup.vue.d.cts

@@ -1,39 +1,51 @@
+import type { CheckboxGroupOption } from './types.cjs';
 /**
- * The Vue implementation of the shared CheckboxGroup contract (see
- * `@skdx/shared`'s `checkboxGroupContract`). Renders `role="group"` — the
- * role a wrapping `SkdxFieldset` discovers as its control, which is how the
- * group is named by the `<legend>` — and owns a `string[]` value shared with
- * its `SkdxCheckboxGroupItem`s and the optional `SkdxCheckboxGroupSelectAll`
- * parent.
- *
- * Unlike `SkdxRadioGroup` there is no roving tabindex: every item is its own
- * tab stop, as native checkboxes are. Items and the parent are `SkdxCheckbox`
- * instances, so the tri-state, keyboard and hidden-input behavior all come
- * from there.
- *
- * Supports `v-model:value` for controlled usage; leaving `value` unbound
- * keeps the group uncontrolled, starting from `defaultValue`.
+ * Checkbox group with `role="group"` owning a `string[]` value, where every
+ * item is its own tab stop (unlike radio group), supporting
+ * controlled/uncontrolled usage and form participation.
  */
 type __VLS_Props = {
-    /** Checked item values, for controlled usage. Pair with `v-model:value` or `@value-change`. */
-    value?: string[];
+    /** Checked values (controlled). Pair with `v-model:value` or `@value-change`. */
+    value?: string[] | undefined;
     /** Initially checked item values, for uncontrolled usage. */
     defaultValue?: string[];
-    /** Name for native form participation: each item renders a hidden input under this name. */
-    name?: string;
+    /** Form field name (each item renders hidden input). */
+    name?: string | undefined;
     /**
-     * Marks the group as required — at least one item must be checked.
-     * Exposed as aria-required on every item, *not* on the `role="group"`
-     * root: only aria-invalid/aria-disabled are global ARIA attributes, and
-     * role="group" does not support aria-required (axe's aria-allowed-attr).
-     * The items' hidden inputs stay un-required — marking them would demand
-     * every box — so the "at least one" rule is a Fieldset validator's job.
+     * Form id for a group rendered outside it, forwarded to each item's
+     * hidden input.
+     */
+    form?: string | undefined;
+    /**
+     * Max checked items; at cap, unchecked items gain
+     * `aria-disabled`/`data-max-reached` but keep their tab stop so they can
+     * be focused.
+     */
+    max?: number | undefined;
+    /**
+     * Freeze selection without freezing group: items keep tab stops, gain
+     * `aria-readonly`, Space/click do nothing (no `aria-disabled`).
+     */
+    readOnly?: boolean;
+    /**
+     * Mark as required (at least one checked), exposed as `aria-required` on
+     * items since `role="group"` doesn't support it.
      */
     required?: boolean;
     /** Disables every item in the group, and the select-all parent. */
     disabled?: boolean;
-    /** Marks the group as invalid, exposed as aria-invalid/data-invalid on the group root. */
+    /** Mark as invalid (`aria-invalid` / `data-invalid` on root). */
     invalid?: boolean;
+    /**
+     * Derived checkboxes, one per entry, ignored if the default slot has its
+     * own `SkdxCheckboxGroupItem`s. @default undefined
+     */
+    options?: readonly CheckboxGroupOption[] | undefined;
+    /**
+     * Size rung the skin renders each checkbox at, applied to the derived Item parts.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -43,15 +55,19 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "update:value": (value: string[]) => any;
     "value-change": (value: string[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: string[]) => any) | undefined;
-    "onValue-change"?: ((value: string[]) => any) | undefined;
+    "onUpdate:value"?: (value: string[]) => any;
+    "onValue-change"?: (value: string[]) => any;
 }>, {
+    form: string | undefined;
     disabled: boolean;
+    size: "sm" | "md" | "lg" | (string & {}) | undefined;
+    name: string | undefined;
+    defaultValue: string[];
+    max: number | undefined;
+    readOnly: boolean;
     required: boolean;
-    name: string;
-    value: string[];
+    value: string[] | undefined;
     invalid: boolean;
-    defaultValue: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/checkbox-group/CheckboxGroup.vue.d.ts

@@ -1,39 +1,51 @@
+import type { CheckboxGroupOption } from './types.js';
 /**
- * The Vue implementation of the shared CheckboxGroup contract (see
- * `@skdx/shared`'s `checkboxGroupContract`). Renders `role="group"` — the
- * role a wrapping `SkdxFieldset` discovers as its control, which is how the
- * group is named by the `<legend>` — and owns a `string[]` value shared with
- * its `SkdxCheckboxGroupItem`s and the optional `SkdxCheckboxGroupSelectAll`
- * parent.
- *
- * Unlike `SkdxRadioGroup` there is no roving tabindex: every item is its own
- * tab stop, as native checkboxes are. Items and the parent are `SkdxCheckbox`
- * instances, so the tri-state, keyboard and hidden-input behavior all come
- * from there.
- *
- * Supports `v-model:value` for controlled usage; leaving `value` unbound
- * keeps the group uncontrolled, starting from `defaultValue`.
+ * Checkbox group with `role="group"` owning a `string[]` value, where every
+ * item is its own tab stop (unlike radio group), supporting
+ * controlled/uncontrolled usage and form participation.
  */
 type __VLS_Props = {
-    /** Checked item values, for controlled usage. Pair with `v-model:value` or `@value-change`. */
-    value?: string[];
+    /** Checked values (controlled). Pair with `v-model:value` or `@value-change`. */
+    value?: string[] | undefined;
     /** Initially checked item values, for uncontrolled usage. */
     defaultValue?: string[];
-    /** Name for native form participation: each item renders a hidden input under this name. */
-    name?: string;
+    /** Form field name (each item renders hidden input). */
+    name?: string | undefined;
     /**
-     * Marks the group as required — at least one item must be checked.
-     * Exposed as aria-required on every item, *not* on the `role="group"`
-     * root: only aria-invalid/aria-disabled are global ARIA attributes, and
-     * role="group" does not support aria-required (axe's aria-allowed-attr).
-     * The items' hidden inputs stay un-required — marking them would demand
-     * every box — so the "at least one" rule is a Fieldset validator's job.
+     * Form id for a group rendered outside it, forwarded to each item's
+     * hidden input.
+     */
+    form?: string | undefined;
+    /**
+     * Max checked items; at cap, unchecked items gain
+     * `aria-disabled`/`data-max-reached` but keep their tab stop so they can
+     * be focused.
+     */
+    max?: number | undefined;
+    /**
+     * Freeze selection without freezing group: items keep tab stops, gain
+     * `aria-readonly`, Space/click do nothing (no `aria-disabled`).
+     */
+    readOnly?: boolean;
+    /**
+     * Mark as required (at least one checked), exposed as `aria-required` on
+     * items since `role="group"` doesn't support it.
      */
     required?: boolean;
     /** Disables every item in the group, and the select-all parent. */
     disabled?: boolean;
-    /** Marks the group as invalid, exposed as aria-invalid/data-invalid on the group root. */
+    /** Mark as invalid (`aria-invalid` / `data-invalid` on root). */
     invalid?: boolean;
+    /**
+     * Derived checkboxes, one per entry, ignored if the default slot has its
+     * own `SkdxCheckboxGroupItem`s. @default undefined
+     */
+    options?: readonly CheckboxGroupOption[] | undefined;
+    /**
+     * Size rung the skin renders each checkbox at, applied to the derived Item parts.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -43,15 +55,19 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "update:value": (value: string[]) => any;
     "value-change": (value: string[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: string[]) => any) | undefined;
-    "onValue-change"?: ((value: string[]) => any) | undefined;
+    "onUpdate:value"?: (value: string[]) => any;
+    "onValue-change"?: (value: string[]) => any;
 }>, {
+    form: string | undefined;
     disabled: boolean;
+    size: "sm" | "md" | "lg" | (string & {}) | undefined;
+    name: string | undefined;
+    defaultValue: string[];
+    max: number | undefined;
+    readOnly: boolean;
     required: boolean;
-    name: string;
-    value: string[];
+    value: string[] | undefined;
     invalid: boolean;
-    defaultValue: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/checkbox-group/CheckboxGroup.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const f=require("./context.cjs");let a=require("vue");var h=["aria-invalid","data-disabled","data-invalid"],k=(0,a.defineComponent)({__name:"CheckboxGroup",props:{value:{default:void 0},defaultValue:{default:()=>[]},name:{default:void 0},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1}},emits:["update:value","value-change"],setup(d,{emit:p}){const t=d,c=p,r=(0,a.ref)([...t.defaultValue]),i=(0,a.computed)(()=>t.value===void 0?r.value:t.value),o=(0,a.ref)([]),s=(0,a.computed)(()=>o.value.filter(e=>!e.disabled).map(e=>e.value)),v=(0,a.computed)(()=>f.getSelectAllChecked(s.value,i.value));function n(e){t.value===void 0&&(r.value=e),c("update:value",e),c("value-change",e)}function m(e,l){const u=i.value;l?u.includes(e)||n([...u,e]):n(u.filter(g=>g!==e))}function b(){const e=i.value,l=s.value;n(v.value===!0?e.filter(u=>!l.includes(u)):[...e,...l.filter(u=>!e.includes(u))])}return(0,a.provide)(f.CHECKBOX_GROUP_CONTEXT,{name:(0,a.computed)(()=>t.name),value:i,disabled:(0,a.computed)(()=>t.disabled),required:(0,a.computed)(()=>t.required),selectAllChecked:v,toggleItem:m,toggleAll:b,registerItem:e=>{o.value.push(e)},unregisterItem:e=>{const l=o.value.indexOf(e);l!==-1&&o.value.splice(l,1)}}),(e,l)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",{class:"skdx-checkbox-group","data-part":"root","data-skdx-component":"checkbox-group",role:"group","aria-invalid":d.invalid?!0:void 0,"data-disabled":d.disabled?"":void 0,"data-invalid":d.invalid?"":void 0},[(0,a.renderSlot)(e.$slots,"default")],8,h))}});exports.default=k;
+const S=require("../utils/id.cjs"),V=require("../utils/useFormReset.cjs"),f=require("./context.cjs"),N=require("./CheckboxGroupItem.vue.cjs"),E=require("./CheckboxGroupAnatomy.vue.cjs");let e=require("vue");var P=["aria-invalid","data-disabled","data-readonly","data-invalid"],T=(0,e.defineComponent)({inheritAttrs:!1,__name:"CheckboxGroup",props:{value:{default:void 0},defaultValue:{default:()=>[]},name:{default:void 0},form:{default:void 0},max:{default:void 0},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},options:{},size:{default:void 0}},emits:["update:value","value-change"],setup(u,{emit:I}){function m(t,l,o){const n=[];for(const c of t??[]){if(c.type===N.default){const d=c.props??{};typeof d.value=="string"&&n.push({value:d.value,disabled:l||d.disabled===""||d.disabled===!0,id:d.id??f.checkboxGroupItemId(o,d.value)});continue}Array.isArray(c.children)&&n.push(...m(c.children,l,o))}return n}const a=u,p=(0,e.useAttrs)(),C=(0,e.computed)(()=>a.size??p["data-size"]),O=(0,e.computed)(()=>{const{"data-size":t,...l}=p;return l}),h=I,y=(0,e.ref)([...a.defaultValue]),r=(0,e.computed)(()=>a.value===void 0?y.value:a.value),v=(0,e.ref)(null),i=(0,e.ref)([]),_=(0,e.useSlots)(),b=S.nextId("checkbox-group"),k=(0,e.computed)(()=>i.value.length>0?i.value:m(_.default?.(),a.disabled,b)),A=(0,e.computed)(()=>k.value.map(t=>t.id).join(" ")),g=(0,e.computed)(()=>a.max!==void 0&&r.value.length>=a.max),x=(0,e.computed)(()=>k.value.filter(t=>!t.disabled).map(t=>t.value)),q=(0,e.computed)(()=>f.getSelectAllChecked(x.value,r.value));function s(t){a.value===void 0&&(y.value=t),h("update:value",t),h("value-change",t)}function B(t,l){if(a.readOnly)return;const o=r.value;if(l){if(g.value)return;o.includes(t)||s([...o,t])}else s(o.filter(n=>n!==t))}function z(){if(a.readOnly)return;const t=r.value,l=x.value;s(q.value===!0?t.filter(o=>!l.includes(o)):[...t,...l.filter(o=>!t.includes(o))].slice(0,a.max??Number.POSITIVE_INFINITY))}function G(){return v.value?.querySelector('input[type="checkbox"]')??null}const R=[...a.defaultValue];return V.useFormReset(()=>G()??v.value,()=>s([...R])),(0,e.provide)(f.CHECKBOX_GROUP_CONTEXT,{name:(0,e.computed)(()=>a.name),form:(0,e.computed)(()=>a.form),value:r,disabled:(0,e.computed)(()=>a.disabled),readOnly:(0,e.computed)(()=>a.readOnly),required:(0,e.computed)(()=>a.required),maxReached:g,baseId:b,itemIds:A,selectAllChecked:q,toggleItem:B,toggleAll:z,registerItem:t=>{i.value.push(t)},unregisterItem:t=>{const l=i.value.indexOf(t);l!==-1&&i.value.splice(l,1)}}),(t,l)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.mergeProps)({ref_key:"rootRef",ref:v,class:"skdx-checkbox-group","data-part":"root","data-skdx-component":"checkbox-group",role:"group","aria-invalid":u.invalid?!0:void 0,"data-disabled":u.disabled?"":void 0,"data-readonly":u.readOnly?"":void 0,"data-invalid":u.invalid?"":void 0},O.value),[(0,e.renderSlot)(t.$slots,"default",{},()=>[u.options?((0,e.openBlock)(),(0,e.createBlock)(E.default,{key:0,options:u.options,size:C.value},null,8,["options","size"])):(0,e.createCommentVNode)("",!0)])],16,P))}});exports.default=T;

package/dist/checkbox-group/CheckboxGroup.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{CHECKBOX_GROUP_CONTEXT as e,getSelectAllChecked as a}from"./context.js";import{computed as l,createElementBlock as d,defineComponent as t,openBlock as u,provide as i,ref as o,renderSlot as n}from"vue";var v=["aria-invalid","data-disabled","data-invalid"],s=/* @__PURE__ */t({__name:"CheckboxGroup",props:{value:{default:void 0},defaultValue:{default:()=>[]},name:{default:void 0},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1}},emits:["update:value","value-change"],setup(t,{emit:s}){const r=t,c=s,p=o([...r.defaultValue]),f=l(()=>void 0===r.value?p.value:r.value),m=o([]),g=l(()=>m.value.filter(e=>!e.disabled).map(e=>e.value)),b=l(()=>a(g.value,f.value));function k(e){void 0===r.value&&(p.value=e),c("update:value",e),c("value-change",e)}return i(e,{name:l(()=>r.name),value:f,disabled:l(()=>r.disabled),required:l(()=>r.required),selectAllChecked:b,toggleItem:function(e,a){const l=f.value;a?l.includes(e)||k([...l,e]):k(l.filter(a=>a!==e))},toggleAll:function(){const e=f.value,a=g.value;k(!0===b.value?e.filter(e=>!a.includes(e)):[...e,...a.filter(a=>!e.includes(a))])},registerItem:e=>{m.value.push(e)},unregisterItem:e=>{const a=m.value.indexOf(e);-1!==a&&m.value.splice(a,1)}}),(e,a)=>(u(),d("div",{class:"skdx-checkbox-group","data-part":"root","data-skdx-component":"checkbox-group",role:"group","aria-invalid":!!t.invalid||void 0,"data-disabled":t.disabled?"":void 0,"data-invalid":t.invalid?"":void 0},[n(e.$slots,"default")],8,v))}});export{s as default};
+import{nextId as e}from"../utils/id.js";import{useFormReset as a}from"../utils/useFormReset.js";import{CHECKBOX_GROUP_CONTEXT as l,checkboxGroupItemId as t,getSelectAllChecked as o}from"./context.js";import d from"./CheckboxGroupItem.vue.js";import u from"./CheckboxGroupAnatomy.vue.js";import{computed as i,createBlock as r,createCommentVNode as s,createElementBlock as n,defineComponent as v,mergeProps as c,openBlock as p,provide as f,ref as m,renderSlot as b,useAttrs as h,useSlots as y}from"vue";var x=["aria-invalid","data-disabled","data-readonly","data-invalid"],g=/* @__PURE__ */v({inheritAttrs:!1,__name:"CheckboxGroup",props:{value:{default:void 0},defaultValue:{default:()=>[]},name:{default:void 0},form:{default:void 0},max:{default:void 0},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},options:{},size:{default:void 0}},emits:["update:value","value-change"],setup(v,{emit:g}){function k(e,a,l){const o=[];for(const u of e??[]){if(u.type===d){const e=u.props??{};"string"==typeof e.value&&o.push({value:e.value,disabled:a||""===e.disabled||!0===e.disabled,id:e.id??t(l,e.value)});continue}Array.isArray(u.children)&&o.push(...k(u.children,a,l))}return o}const I=v,O=h(),C=i(()=>I.size??O["data-size"]),A=i(()=>{const{"data-size":e,...a}=O;return a}),B=g,j=m([...I.defaultValue]),z=i(()=>void 0===I.value?j.value:I.value),_=m(null),G=m([]),N=y(),R=e("checkbox-group"),S=i(()=>G.value.length>0?G.value:k(N.default?.(),I.disabled,R)),V=i(()=>S.value.map(e=>e.id).join(" ")),q=i(()=>void 0!==I.max&&z.value.length>=I.max),E=i(()=>S.value.filter(e=>!e.disabled).map(e=>e.value)),T=i(()=>o(E.value,z.value));function F(e){void 0===I.value&&(j.value=e),B("update:value",e),B("value-change",e)}const P=[...I.defaultValue];return a(()=>_.value?.querySelector('input[type="checkbox"]')??null??_.value,()=>F([...P])),f(l,{name:i(()=>I.name),form:i(()=>I.form),value:z,disabled:i(()=>I.disabled),readOnly:i(()=>I.readOnly),required:i(()=>I.required),maxReached:q,baseId:R,itemIds:V,selectAllChecked:T,toggleItem:function(e,a){if(I.readOnly)return;const l=z.value;if(a){if(q.value)return;l.includes(e)||F([...l,e])}else F(l.filter(a=>a!==e))},toggleAll:function(){if(I.readOnly)return;const e=z.value,a=E.value;F(!0===T.value?e.filter(e=>!a.includes(e)):[...e,...a.filter(a=>!e.includes(a))].slice(0,I.max??Number.POSITIVE_INFINITY))},registerItem:e=>{G.value.push(e)},unregisterItem:e=>{const a=G.value.indexOf(e);-1!==a&&G.value.splice(a,1)}}),(e,a)=>(p(),n("div",c({ref_key:"rootRef",ref:_,class:"skdx-checkbox-group","data-part":"root","data-skdx-component":"checkbox-group",role:"group","aria-invalid":!!v.invalid||void 0,"data-disabled":v.disabled?"":void 0,"data-readonly":v.readOnly?"":void 0,"data-invalid":v.invalid?"":void 0},A.value),[b(e.$slots,"default",{},()=>[v.options?(p(),r(u,{key:0,options:v.options,size:C.value},null,8,["options","size"])):s("",!0)])],16,x))}});export{g as default};

package/dist/checkbox-group/CheckboxGroupAnatomy.vue.cjs

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