@skdx/vue 0.26.0 → 0.28.0

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

@@ -0,0 +1,116 @@
+/**
+ * Headless checkbox card: label wrapping hidden checkbox, entire surface clickable.
+ * Supports controlled/uncontrolled usage, validation, and form submission.
+ * No interactive elements may nest inside; 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. 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;
+    /**
+     * Freezes the selection without freezing the card: the Control keeps its
+     * tab stop and stays focusable, gains `aria-readonly`, the root gains
+     * `data-readonly`, and clicking the surface or pressing Space changes
+     * nothing. Not `aria-disabled`, and the Control keeps submitting.
+     * @default false — the card is editable.
+     */
+    readOnly?: boolean;
+    /**
+     * Id of the `<form>` that owns this card, for a card 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;
+    /**
+     * 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, {
+    /** 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 — a server response, a cross-field rule
+     * — onto the Control input, exactly like
+     * `HTMLInputElement.setCustomValidity()`: a non-empty message makes the card
+     * invalid (`customError`) and is what `reportValidity()` shows; `''` 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) | undefined;
+    "onChecked-change"?: ((checked: boolean) => any) | undefined;
+}>, {
+    form: string;
+    disabled: boolean;
+    checked: boolean;
+    value: string;
+    defaultChecked: boolean;
+    readOnly: boolean;
+    required: boolean;
+    name: 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/id.cjs"),D=require("./context.cjs"),E=require("./CheckboxCardDescription.vue.cjs"),L=require("./CheckboxCardLabel.vue.cjs"),R=require("../utils/cardNesting.cjs"),k=require("../utils/declaredChildren.cjs"),V=require("../utils/useFormReset.cjs");let e=require("vue");var g=["data-state","data-disabled","data-readonly","data-invalid","data-focus-visible"],F='input[type="checkbox"]',I=(0,e.defineComponent)({__name:"CheckboxCardRoot",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},readOnly:{type:Boolean,default:!1},form:{default:void 0},invalid:{type:Boolean,default:!1}},emits:["update:checked","checked-change"],setup(d,{expose:m,emit:C}){const a=d,o=C,r=(0,e.ref)(null),u=(0,e.ref)(a.defaultChecked),n=(0,e.computed)(()=>a.checked===void 0?u.value:a.checked),f=B.nextId("checkbox-card"),v=(0,e.ref)(!1),h=(0,e.ref)(!1),i=(0,e.ref)(!1),p=(0,e.useSlots)(),b=k.slotDeclares(p.default,L.default),y=k.slotDeclares(p.default,E.default),s=(0,e.ref)(!1);(0,e.onMounted)(()=>{s.value=!0});let l=!1;function q(t){a.readOnly||t!==n.value&&(a.checked===void 0&&(u.value=t),o("update:checked",t),o("checked-change",t))}(0,e.provide)(D.CHECKBOX_CARD_CONTEXT,{checked:n,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:`${f}-label`,descriptionId:`${f}-description`,hasLabel:(0,e.computed)(()=>v.value||!s.value&&b),hasDescription:(0,e.computed)(()=>h.value||!s.value&&y),setHasLabel:t=>{v.value=t},setHasDescription:t=>{h.value=t},onCheckedChange:q});function _(){l=!0}function O(){i.value=!l,l=!1}function x(){i.value=!1,l=!1}function c(){return r.value?.querySelector(F)??null}return(0,e.onMounted)(()=>R.warnOnNestedInteractive("CheckboxCard",r.value)),V.useFormReset(c,()=>{a.checked===void 0&&(u.value=a.defaultChecked),o("update:checked",a.defaultChecked),o("checked-change",a.defaultChecked)}),m({checkValidity:()=>c()?.checkValidity()??!0,reportValidity:()=>c()?.reportValidity()??!0,setCustomValidity:t=>c()?.setCustomValidity(t)}),(t,N)=>((0,e.openBlock)(),(0,e.createElementBlock)("label",{class:"skdx-checkbox-card","data-part":"root","data-skdx-component":"checkbox-card",ref_key:"rootEl",ref:r,"data-state":n.value?"checked":"unchecked","data-disabled":d.disabled?"":void 0,"data-readonly":d.readOnly?"":void 0,"data-invalid":d.invalid?"":void 0,"data-focus-visible":i.value?"":void 0,onPointerdown:_,onFocusin:O,onFocusout:x},[(0,e.renderSlot)(t.$slots,"default")],40,g))}});exports.default=I;

package/dist/checkbox-card/CheckboxCardRoot.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 d from"./CheckboxCardDescription.vue.js";import t from"./CheckboxCardLabel.vue.js";import{warnOnNestedInteractive as o}from"../utils/cardNesting.js";import{slotDeclares as l}from"../utils/declaredChildren.js";import{useFormReset as i}from"../utils/useFormReset.js";import{computed as c,createElementBlock as r,defineComponent as s,onMounted as u,openBlock as n,provide as v,ref as f,renderSlot as h,useSlots as p}from"vue";var k=["data-state","data-disabled","data-readonly","data-invalid","data-focus-visible"],m=/* @__PURE__ */s({__name:"CheckboxCardRoot",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},readOnly:{type:Boolean,default:!1},form:{default:void 0},invalid:{type:Boolean,default:!1}},emits:["update:checked","checked-change"],setup(s,{expose:m,emit:C}){const b=s,y=C,x=f(null),B=f(b.defaultChecked),O=c(()=>void 0===b.checked?B.value:b.checked),j=e("checkbox-card"),V=f(!1),g=f(!1),D=f(!1),_=p(),q=l(_.default,t),E=l(_.default,d),F=f(!1);u(()=>{F.value=!0});let I=!1;function R(){I=!0}function H(){D.value=!I,I=!1}function L(){D.value=!1,I=!1}function N(){return x.value?.querySelector('input[type="checkbox"]')??null}return v(a,{checked:O,disabled:c(()=>b.disabled),readOnly:c(()=>b.readOnly),required:c(()=>b.required),invalid:c(()=>b.invalid),name:c(()=>b.name),value:c(()=>b.value),form:c(()=>b.form),labelId:`${j}-label`,descriptionId:`${j}-description`,hasLabel:c(()=>V.value||!F.value&&q),hasDescription:c(()=>g.value||!F.value&&E),setHasLabel:e=>{V.value=e},setHasDescription:e=>{g.value=e},onCheckedChange:function(e){b.readOnly||e!==O.value&&(void 0===b.checked&&(B.value=e),y("update:checked",e),y("checked-change",e))}}),u(()=>o("CheckboxCard",x.value)),i(N,()=>{void 0===b.checked&&(B.value=b.defaultChecked),y("update:checked",b.defaultChecked),y("checked-change",b.defaultChecked)}),m({checkValidity:()=>N()?.checkValidity()??!0,reportValidity:()=>N()?.reportValidity()??!0,setCustomValidity:e=>N()?.setCustomValidity(e)}),(e,a)=>(n(),r("label",{class:"skdx-checkbox-card","data-part":"root","data-skdx-component":"checkbox-card",ref_key:"rootEl",ref:x,"data-state":O.value?"checked":"unchecked","data-disabled":s.disabled?"":void 0,"data-readonly":s.readOnly?"":void 0,"data-invalid":s.invalid?"":void 0,"data-focus-visible":D.value?"":void 0,onPointerdown:R,onFocusin:H,onFocusout:L},[h(e.$slots,"default")],40,k))}});export{m 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,27 @@
+/**
+ * Advanced primitives for `SkdxCheckboxCard` — the parts the recipe composes.
+ * Use when the derived anatomy is not the structure you need — 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,27 @@
+/**
+ * Advanced primitives for `SkdxCheckboxCard` — the parts the recipe composes.
+ * Use when the derived anatomy is not the structure you need — 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,45 @@
+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: `role="group"` owning `string[]` value.
+ * Every item is its own tab stop (unlike radio group).
+ * Controlled/uncontrolled and form participation.
  */
 type __VLS_Props = {
-    /** Checked item values, for controlled usage. Pair with `v-model:value` or `@value-change`. */
+    /** Checked values (controlled). Pair with `v-model:value` or `@value-change`. */
     value?: string[];
     /** Initially checked item values, for uncontrolled usage. */
     defaultValue?: string[];
-    /** Name for native form participation: each item renders a hidden input under this name. */
+    /** Form field name (each item renders hidden input). */
     name?: string;
     /**
-     * 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 group rendered outside it.
+     * Forwarded to each item's hidden input.
+     */
+    form?: string;
+    /**
+     * Max checked items. At cap, unchecked items get `aria-disabled` / `data-max-reached`
+     * but keep tab stop so users can focus and learn why.
+     */
+    max?: number;
+    /**
+     * 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 (not on `role="group"` which 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 item each). Ignored if default slot has
+     * `SkdxCheckboxGroupItem`s. @default undefined
+     */
+    options?: readonly CheckboxGroupOption[];
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -46,12 +52,16 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "onUpdate:value"?: ((value: string[]) => any) | undefined;
     "onValue-change"?: ((value: string[]) => any) | undefined;
 }>, {
+    form: string;
     disabled: boolean;
+    value: string[];
+    readOnly: boolean;
     required: boolean;
     name: string;
-    value: string[];
     invalid: boolean;
     defaultValue: string[];
+    max: number;
+    options: readonly CheckboxGroupOption[];
 }, {}, {}, {}, 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,45 @@
+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: `role="group"` owning `string[]` value.
+ * Every item is its own tab stop (unlike radio group).
+ * Controlled/uncontrolled and form participation.
  */
 type __VLS_Props = {
-    /** Checked item values, for controlled usage. Pair with `v-model:value` or `@value-change`. */
+    /** Checked values (controlled). Pair with `v-model:value` or `@value-change`. */
     value?: string[];
     /** Initially checked item values, for uncontrolled usage. */
     defaultValue?: string[];
-    /** Name for native form participation: each item renders a hidden input under this name. */
+    /** Form field name (each item renders hidden input). */
     name?: string;
     /**
-     * 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 group rendered outside it.
+     * Forwarded to each item's hidden input.
+     */
+    form?: string;
+    /**
+     * Max checked items. At cap, unchecked items get `aria-disabled` / `data-max-reached`
+     * but keep tab stop so users can focus and learn why.
+     */
+    max?: number;
+    /**
+     * 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 (not on `role="group"` which 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 item each). Ignored if default slot has
+     * `SkdxCheckboxGroupItem`s. @default undefined
+     */
+    options?: readonly CheckboxGroupOption[];
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -46,12 +52,16 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "onUpdate:value"?: ((value: string[]) => any) | undefined;
     "onValue-change"?: ((value: string[]) => any) | undefined;
 }>, {
+    form: string;
     disabled: boolean;
+    value: string[];
+    readOnly: boolean;
     required: boolean;
     name: string;
-    value: string[];
     invalid: boolean;
     defaultValue: string[];
+    max: number;
+    options: readonly CheckboxGroupOption[];
 }, {}, {}, {}, 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 G=require("../utils/id.cjs"),R=require("../utils/useFormReset.cjs"),f=require("./context.cjs"),V=require("./CheckboxGroupItem.vue.cjs"),N=require("./CheckboxGroupAnatomy.vue.cjs");let t=require("vue");var S=["aria-invalid","data-disabled","data-readonly","data-invalid"],E=(0,t.defineComponent)({__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:{default:void 0}},emits:["update:value","value-change"],setup(o,{emit:q}){function m(e,l,u){const i=[];for(const s of e??[]){if(s.type===V.default){const d=s.props??{};typeof d.value=="string"&&i.push({value:d.value,disabled:l||d.disabled===""||d.disabled===!0,id:d.id??f.checkboxGroupItemId(u,d.value)});continue}Array.isArray(s.children)&&i.push(...m(s.children,l,u))}return i}const a=o,p=q,h=(0,t.ref)([...a.defaultValue]),r=(0,t.computed)(()=>a.value===void 0?h.value:a.value),v=(0,t.ref)(null),n=(0,t.ref)([]),I=(0,t.useSlots)(),y=G.nextId("checkbox-group"),b=(0,t.computed)(()=>n.value.length>0?n.value:m(I.default?.(),a.disabled,y)),C=(0,t.computed)(()=>b.value.map(e=>e.id).join(" ")),k=(0,t.computed)(()=>a.max!==void 0&&r.value.length>=a.max),x=(0,t.computed)(()=>b.value.filter(e=>!e.disabled).map(e=>e.value)),g=(0,t.computed)(()=>f.getSelectAllChecked(x.value,r.value));function c(e){a.value===void 0&&(h.value=e),p("update:value",e),p("value-change",e)}function O(e,l){if(a.readOnly)return;const u=r.value;if(l){if(k.value)return;u.includes(e)||c([...u,e])}else c(u.filter(i=>i!==e))}function _(){if(a.readOnly)return;const e=r.value,l=x.value;c(g.value===!0?e.filter(u=>!l.includes(u)):[...e,...l.filter(u=>!e.includes(u))].slice(0,a.max??Number.POSITIVE_INFINITY))}function B(){return v.value?.querySelector('input[type="checkbox"]')??null}const A=[...a.defaultValue];return R.useFormReset(()=>B()??v.value,()=>c([...A])),(0,t.provide)(f.CHECKBOX_GROUP_CONTEXT,{name:(0,t.computed)(()=>a.name),form:(0,t.computed)(()=>a.form),value:r,disabled:(0,t.computed)(()=>a.disabled),readOnly:(0,t.computed)(()=>a.readOnly),required:(0,t.computed)(()=>a.required),maxReached:k,baseId:y,itemIds:C,selectAllChecked:g,toggleItem:O,toggleAll:_,registerItem:e=>{n.value.push(e)},unregisterItem:e=>{const l=n.value.indexOf(e);l!==-1&&n.value.splice(l,1)}}),(e,l)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{class:"skdx-checkbox-group","data-part":"root","data-skdx-component":"checkbox-group",ref_key:"rootRef",ref:v,role:"group","aria-invalid":o.invalid?!0:void 0,"data-disabled":o.disabled?"":void 0,"data-readonly":o.readOnly?"":void 0,"data-invalid":o.invalid?"":void 0},[(0,t.renderSlot)(e.$slots,"default",{},()=>[o.options?((0,t.openBlock)(),(0,t.createBlock)(N.default,{key:0,options:o.options},null,8,["options"])):(0,t.createCommentVNode)("",!0)])],8,S))}});exports.default=E;

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

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

@@ -0,0 +1,14 @@
+import type { CheckboxGroupOption } from './types.cjs';
+/**
+ * The anatomy a `SkdxCheckboxGroup` draws when its default slot holds none of
+ * its own parts: one checkbox per entry in `options`.
+ *
+ * Not exported from the package — the React port's `CheckboxGroupAnatomy.tsx`
+ * is the same component, and the two must stay in step.
+ * @internal
+ */
+type __VLS_Props = {
+    options: readonly CheckboxGroupOption[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,14 @@
+import type { CheckboxGroupOption } from './types.js';
+/**
+ * The anatomy a `SkdxCheckboxGroup` draws when its default slot holds none of
+ * its own parts: one checkbox per entry in `options`.
+ *
+ * Not exported from the package — the React port's `CheckboxGroupAnatomy.tsx`
+ * is the same component, and the two must stay in step.
+ * @internal
+ */
+type __VLS_Props = {
+    options: readonly CheckboxGroupOption[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

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

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

@@ -0,0 +1 @@
+const u=require("./CheckboxGroupItem.vue.cjs");let e=require("vue");var a=(0,e.defineComponent)({__name:"CheckboxGroupAnatomy",props:{options:{}},setup(r){return(l,o)=>((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(r.options,t=>((0,e.openBlock)(),(0,e.createBlock)(u.default,{key:t.value,value:t.value,disabled:t.disabled},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.label),1)]),_:2},1032,["value","disabled"]))),128))}});exports.default=a;

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

@@ -0,0 +1 @@
+import e from"./CheckboxGroupItem.vue.js";import{Fragment as a,createBlock as o,createElementBlock as t,createTextVNode as s,defineComponent as l,openBlock as r,renderList as n,toDisplayString as p,withCtx as i}from"vue";var u=/* @__PURE__ */l({__name:"CheckboxGroupAnatomy",props:{options:{}},setup:l=>(u,d)=>(r(!0),t(a,null,n(l.options,a=>(r(),o(e,{key:a.value,value:a.value,disabled:a.disabled},{default:i(()=>[s(p(a.label),1)]),_:2},1032,["value","disabled"]))),128))});export{u as default};

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

@@ -1,15 +1,7 @@
 /**
- * One checkbox in an `SkdxCheckboxGroup`. It *is* an `SkdxCheckbox` — the role,
- * `aria-checked`, `data-state`, the Space/Enter handling and the hidden
- * `<input type="checkbox">` all come from there — with `checked` driven by
- * whether its `value` is in the group's value, and `name` taken from the
- * group so every checked item submits under the same key.
- *
- * It also carries the group's `aria-required`, which the `role="group"` root
- * may not: it is not a global ARIA attribute, while `role="checkbox"` does
- * support it. Passed as the bare attribute rather than `SkdxCheckbox`'s
- * `required` prop, so the hidden input stays un-required — "at least one
- * checked" is not "every box checked".
+ * One checkbox in SkdxCheckboxGroup: role/aria-checked/data-state from SkdxCheckbox,
+ * checked driven by value in group's value. Carries group's aria-required (role=checkbox
+ * supports it, role=group doesn't). Delegates checkValidity/reportValidity/setCustomValidity.
  */
 type __VLS_Props = {
     /** Unique identifier added to or removed from the group's value. */
@@ -17,11 +9,26 @@ type __VLS_Props = {
     /** Disables this item alone, and excludes it from select-all. */
     disabled?: boolean;
 };
-declare var __VLS_9: {};
+declare var __VLS_10: {}, __VLS_12: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_9) => any;
+    default?: (props: typeof __VLS_10) => any;
+} & {
+    indicator?: (props: typeof __VLS_12) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /**
+     * Reports if hidden input satisfies constraints (browser's answer, delegated).
+     * true without name (no input rendered).
+     */
+    checkValidity: () => any;
+    /** Like `checkValidity()`, but also shows the browser's validation message. */
+    reportValidity: () => any;
+    /**
+     * Sets externally-computed error on hidden input like HTMLInputElement.setCustomValidity():
+     * non-empty = invalid, '' clears. Dropped without name.
+     */
+    setCustomValidity: (message: string) => any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;