@skdx/vue 0.27.0 → 0.28.0

package/dist/radio-card/RadioCard.vue.d.ts

@@ -1,35 +1,11 @@
 /**
- * The Vue implementation of the shared RadioCard contract (see
- * `@skdx/shared`'s `radioCardContract`). One card in a single-select group: a
- * `<label>` wrapping a real, visually hidden `<input type="radio">`
- * (`SkdxRadioCardControl`), so the **entire card surface** is the hit target
- * through native label activation — no click handler, no `role` and no key
- * handling of its own.
- *
- * Selection state is **not** re-implemented here. The card reads the enclosing
- * `SkdxRadioGroup`'s context for the selected value, `name`, `required`,
- * group-level `disabled` and the roving tab stop, so a `SkdxRadioCard` and a
- * plain `SkdxRadioGroupItem` are interchangeable inside the same group and
- * answer to the same `value`/`value-change`. It must therefore be rendered
- * inside a `SkdxRadioGroup`; used alone it throws.
- *
- * Emits `data-state="checked" | "unchecked"`, `data-disabled` and
- * `data-focus-visible` on the root, which is the whole styling contract.
- *
- * **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
- * select the card. Put actions beside the card, never inside it.
+ * Single-select radio card with entire surface as hit target, interchangeable
+ * with RadioGroupItem within RadioGroup. No nested interactive elements.
  *
  * @example
  * ```vue
  * <SkdxRadioGroup name="plan" default-value="pro" aria-label="Plan">
- *   <SkdxRadioCard value="pro">
- *     <SkdxRadioCardControl />
- *     <SkdxRadioCardIndicator />
- *     <SkdxRadioCardLabel>Pro</SkdxRadioCardLabel>
- *     <SkdxRadioCardDescription>$20 per seat, per month.</SkdxRadioCardDescription>
- *   </SkdxRadioCard>
+ *   <SkdxRadioCard value="pro" label="Pro" description="$20 per seat, per month." />
  * </SkdxRadioGroup>
  * ```
  */
@@ -37,19 +13,29 @@ type __VLS_Props = {
     /** Unique identifier compared against the enclosing `SkdxRadioGroup`'s selected value. */
     value: string;
     /**
-     * Disables this card only. The enclosing `SkdxRadioGroup`'s own `disabled`
-     * still wins when set, so a group-level `disabled` cannot be re-enabled per
-     * card.
-     * @default false — the card follows the group's own disabled state.
+     * Disables this card; the group's `disabled` state still overrides it.
+     * @default false
      */
     disabled?: boolean;
+    /**
+     * Card title, rendered as SkdxRadioCardLabel and wired to the control's accessible name.
+     * @default undefined
+     */
+    label?: string;
+    /**
+     * Supporting text under title (price, quota, caveat), rendered as SkdxRadioCardDescription and wired to aria-describedby.
+     * @default undefined
+     */
+    description?: string;
 };
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+type __VLS_Slots = {
+    /** Full manual composition — the Control, Indicator, Label and Description parts. */
+    default?(): unknown;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
     disabled: boolean;
+    description: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/radio-card/RadioCard.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const m=require("../utils/id.cjs"),h=require("../radio-group/context.cjs"),k=require("./context.cjs");let e=require("vue");var q=["data-state","data-disabled","data-focus-visible"],C=(0,e.defineComponent)({__name:"RadioCard",props:{value:{},disabled:{type:Boolean,default:!1}},setup(c){const t=c,a=(0,e.inject)(h.RADIO_GROUP_CONTEXT);if(!a)throw new Error("<SkdxRadioCard> must be used inside <SkdxRadioGroup>.");const u=(0,e.computed)(()=>a.value.value===t.value),l=(0,e.computed)(()=>a.disabled.value||t.disabled),v=(0,e.computed)(()=>u.value||a.value.value===void 0&&a.firstEnabledValue.value===t.value),n=m.nextId("radio-card"),r=(0,e.ref)(!1),i=(0,e.ref)(!1),s=(0,e.ref)(!1);let d=!1;function p(){l.value||u.value||a.onValueChange(t.value)}(0,e.provide)(k.RADIO_CARD_CONTEXT,{value:(0,e.computed)(()=>t.value),checked:u,disabled:l,tabStop:v,required:a.required,name:a.name,labelId:`${n}-label`,descriptionId:`${n}-description`,hasLabel:(0,e.computed)(()=>r.value),hasDescription:(0,e.computed)(()=>i.value),setHasLabel:o=>{r.value=o},setHasDescription:o=>{i.value=o},onSelect:p});function f(){d=!0}function _(){s.value=!d,d=!1}function b(){s.value=!1,d=!1}return(o,R)=>((0,e.openBlock)(),(0,e.createElementBlock)("label",{class:"skdx-radio-card","data-part":"root","data-skdx-component":"radio-card","data-state":u.value?"checked":"unchecked","data-disabled":l.value?"":void 0,"data-focus-visible":s.value?"":void 0,onPointerdown:f,onFocusin:_,onFocusout:b},[(0,e.renderSlot)(o.$slots,"default")],40,q))}});exports.default=C;
+const r=require("./RadioCardControl.vue.cjs"),d=require("./RadioCardDescription.vue.cjs"),o=require("./RadioCardIndicator.vue.cjs"),i=require("./RadioCardLabel.vue.cjs"),l=require("./RadioCardRoot.vue.cjs");let e=require("vue");var u=(0,e.defineComponent)({__name:"RadioCard",props:{value:{},disabled:{type:Boolean,default:!1},label:{default:void 0},description:{default:void 0}},setup(t){return(a,c)=>((0,e.openBlock)(),(0,e.createBlock)(l.default,{value:t.value,disabled:t.disabled},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(a.$slots,"default",{},()=>[(0,e.createVNode)(r.default),(0,e.createVNode)(o.default),t.label!==void 0?((0,e.openBlock)(),(0,e.createBlock)(i.default,{key:0},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.label),1)]),_:1})):(0,e.createCommentVNode)("",!0),t.description!==void 0?((0,e.openBlock)(),(0,e.createBlock)(d.default,{key:1},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.description),1)]),_:1})):(0,e.createCommentVNode)("",!0)])]),_:3},8,["value","disabled"]))}});exports.default=u;

package/dist/radio-card/RadioCard.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{nextId as a}from"../utils/id.js";import{RADIO_GROUP_CONTEXT as e}from"../radio-group/context.js";import{RADIO_CARD_CONTEXT as o}from"./context.js";import{computed as d,createElementBlock as t,defineComponent as l,inject as s,openBlock as u,provide as i,ref as r,renderSlot as n}from"vue";var c=["data-state","data-disabled","data-focus-visible"],v=/* @__PURE__ */l({__name:"RadioCard",props:{value:{},disabled:{type:Boolean,default:!1}},setup(l){const v=l,p=s(e);if(!p)throw new Error("<SkdxRadioCard> must be used inside <SkdxRadioGroup>.");const f=d(()=>p.value.value===v.value),b=d(()=>p.disabled.value||v.disabled),m=d(()=>f.value||void 0===p.value.value&&p.firstEnabledValue.value===v.value),k=a("radio-card"),x=r(!1),h=r(!1),C=r(!1);let R=!1;function _(){R=!0}function D(){C.value=!R,R=!1}function E(){C.value=!1,R=!1}return i(o,{value:d(()=>v.value),checked:f,disabled:b,tabStop:m,required:p.required,name:p.name,labelId:`${k}-label`,descriptionId:`${k}-description`,hasLabel:d(()=>x.value),hasDescription:d(()=>h.value),setHasLabel:a=>{x.value=a},setHasDescription:a=>{h.value=a},onSelect:function(){b.value||f.value||p.onValueChange(v.value)}}),(a,e)=>(u(),t("label",{class:"skdx-radio-card","data-part":"root","data-skdx-component":"radio-card","data-state":f.value?"checked":"unchecked","data-disabled":b.value?"":void 0,"data-focus-visible":C.value?"":void 0,onPointerdown:_,onFocusin:D,onFocusout:E},[n(a.$slots,"default")],40,c))}});export{v as default};
+import e from"./RadioCardControl.vue.js";import a from"./RadioCardDescription.vue.js";import o from"./RadioCardIndicator.vue.js";import d from"./RadioCardLabel.vue.js";import t from"./RadioCardRoot.vue.js";import{createBlock as r,createCommentVNode as i,createTextVNode as l,createVNode as s,defineComponent as u,openBlock as p,renderSlot as m,toDisplayString as f,withCtx as n}from"vue";var v=/* @__PURE__ */u({__name:"RadioCard",props:{value:{},disabled:{type:Boolean,default:!1},label:{default:void 0},description:{default:void 0}},setup:u=>(v,c)=>(p(),r(t,{value:u.value,disabled:u.disabled},{default:n(()=>[m(v.$slots,"default",{},()=>[s(e),s(o),void 0!==u.label?(p(),r(d,{key:0},{default:n(()=>[l(f(u.label),1)]),_:1})):i("",!0),void 0!==u.description?(p(),r(a,{key:1},{default:n(()=>[l(f(u.description),1)]),_:1})):i("",!0)])]),_:3},8,["value","disabled"]))});export{v as default};

package/dist/radio-card/RadioCardControl.vue.d.cts

@@ -1,19 +1,7 @@
 /**
- * The real `<input type="radio">` behind a `SkdxRadioCard`. Rendered inside
- * `SkdxVisuallyHidden`, **not** `display: none` or `hidden` — a removed input is
- * out of the accessibility tree and out of the tab order, which would leave the
- * card unusable by keyboard and silent to a screen reader. Clipped to 1×1 it
- * stays focusable, announceable and submittable.
- *
- * Selects on focus, matching the WAI-ARIA radio group pattern (and
- * `SkdxRadioGroupItem`) where arrow-key navigation selects as it moves.
- *
- * Carries an explicit `role="radio"` and `data-value` even though a native
- * radio input already *has* that role: `SkdxRadioGroup` discovers its items with
- * a literal `[role="radio"]` selector — for arrow-key roving focus and for
- * picking the initial tab stop — and an implicit role does not answer a CSS
- * attribute selector. The redundancy is what lets a card and a plain
- * `SkdxRadioGroupItem` sit in the same group.
+ * Real `<input type="radio">` in VisuallyHidden (not display:none, stays focusable).
+ * Selects on focus only from sibling radio (arrow pattern). Carries explicit
+ * role=radio/data-value for selector discovery (implicit role won't match [role=radio]).
  *
  * @example
  * ```vue

package/dist/radio-card/RadioCardControl.vue.d.ts

@@ -1,19 +1,7 @@
 /**
- * The real `<input type="radio">` behind a `SkdxRadioCard`. Rendered inside
- * `SkdxVisuallyHidden`, **not** `display: none` or `hidden` — a removed input is
- * out of the accessibility tree and out of the tab order, which would leave the
- * card unusable by keyboard and silent to a screen reader. Clipped to 1×1 it
- * stays focusable, announceable and submittable.
- *
- * Selects on focus, matching the WAI-ARIA radio group pattern (and
- * `SkdxRadioGroupItem`) where arrow-key navigation selects as it moves.
- *
- * Carries an explicit `role="radio"` and `data-value` even though a native
- * radio input already *has* that role: `SkdxRadioGroup` discovers its items with
- * a literal `[role="radio"]` selector — for arrow-key roving focus and for
- * picking the initial tab stop — and an implicit role does not answer a CSS
- * attribute selector. The redundancy is what lets a card and a plain
- * `SkdxRadioGroupItem` sit in the same group.
+ * Real `<input type="radio">` in VisuallyHidden (not display:none, stays focusable).
+ * Selects on focus only from sibling radio (arrow pattern). Carries explicit
+ * role=radio/data-value for selector discovery (implicit role won't match [role=radio]).
  *
  * @example
  * ```vue

package/dist/radio-card/RadioCardControl.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const u=require("../utils/VisuallyHidden.vue.cjs"),n=require("./context.cjs");let e=require("vue");var l=["name","value","checked","required","disabled","tabindex","aria-labelledby","aria-describedby","data-value","data-state"],i=(0,e.defineComponent)({inheritAttrs:!1,__name:"RadioCardControl",setup(o){const a=(0,e.inject)(n.RADIO_CARD_CONTEXT);if(!a)throw new Error("<SkdxRadioCardControl> must be used inside <SkdxRadioCard>.");function d(r){a.onSelect(),r.target.checked=a.checked.value}return(r,t)=>((0,e.openBlock)(),(0,e.createBlock)(u.default,{class:"skdx-radio-card__control","data-part":"control"},{default:(0,e.withCtx)(()=>[(0,e.createElementVNode)("input",(0,e.mergeProps)({type:"radio",role:"radio",name:(0,e.unref)(a).name.value,value:(0,e.unref)(a).value.value,checked:(0,e.unref)(a).checked.value,required:(0,e.unref)(a).required.value,disabled:(0,e.unref)(a).disabled.value,tabindex:(0,e.unref)(a).tabStop.value?0:-1,"aria-labelledby":(0,e.unref)(a).hasLabel.value?(0,e.unref)(a).labelId:void 0,"aria-describedby":(0,e.unref)(a).hasDescription.value?(0,e.unref)(a).descriptionId:void 0,"data-value":(0,e.unref)(a).value.value,"data-state":(0,e.unref)(a).checked.value?"checked":"unchecked",onChange:d,onFocus:t[0]||(t[0]=c=>(0,e.unref)(a).onSelect())},r.$attrs),null,16,l)]),_:1}))}});exports.default=i;
+const l=require("../utils/VisuallyHidden.vue.cjs"),n=require("./context.cjs");let e=require("vue");var i=["name","value","form","checked","required","disabled","tabindex","aria-labelledby","aria-describedby","data-value","data-state"],c=(0,e.defineComponent)({inheritAttrs:!1,__name:"RadioCardControl",setup(s){const r=(0,e.inject)(n.RADIO_CARD_CONTEXT);if(!r)throw new Error("<SkdxRadioCardControl> must be used inside <SkdxRadioCard>.");function d(a){r.onSelect("pointer"),a.target.checked=r.checked.value}function o(a){const t=a.relatedTarget,u=a.currentTarget;t?.getAttribute("role")==="radio"&&t.closest('[role="radiogroup"]')===u.closest('[role="radiogroup"]')&&r.onSelect("keyboard")}return(a,t)=>((0,e.openBlock)(),(0,e.createBlock)(l.default,{class:"skdx-radio-card__control","data-part":"control"},{default:(0,e.withCtx)(()=>[(0,e.createElementVNode)("input",(0,e.mergeProps)({type:"radio",role:"radio",name:(0,e.unref)(r).name.value,value:(0,e.unref)(r).value.value,form:(0,e.unref)(r).form.value,checked:(0,e.unref)(r).checked.value,required:(0,e.unref)(r).required.value,disabled:(0,e.unref)(r).disabled.value,tabindex:(0,e.unref)(r).tabStop.value?0:-1,"aria-labelledby":(0,e.unref)(r).hasLabel.value?(0,e.unref)(r).labelId:void 0,"aria-describedby":(0,e.unref)(r).hasDescription.value?(0,e.unref)(r).descriptionId:void 0,"data-value":(0,e.unref)(r).value.value,"data-state":(0,e.unref)(r).checked.value?"checked":"unchecked",onChange:d,onFocus:o},a.$attrs),null,16,i)]),_:1}))}});exports.default=c;

package/dist/radio-card/RadioCardControl.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import e from"../utils/VisuallyHidden.vue.js";import{RADIO_CARD_CONTEXT as a}from"./context.js";import{createBlock as d,createElementVNode as t,defineComponent as r,inject as l,mergeProps as o,openBlock as i,unref as s,withCtx as n}from"vue";var u=["name","value","checked","required","disabled","tabindex","aria-labelledby","aria-describedby","data-value","data-state"],c=/* @__PURE__ */r({inheritAttrs:!1,__name:"RadioCardControl",setup(r){const c=l(a);if(!c)throw new Error("<SkdxRadioCardControl> must be used inside <SkdxRadioCard>.");function v(e){c.onSelect(),e.target.checked=c.checked.value}return(a,r)=>(i(),d(e,{class:"skdx-radio-card__control","data-part":"control"},{default:n(()=>[t("input",o({type:"radio",role:"radio",name:s(c).name.value,value:s(c).value.value,checked:s(c).checked.value,required:s(c).required.value,disabled:s(c).disabled.value,tabindex:s(c).tabStop.value?0:-1,"aria-labelledby":s(c).hasLabel.value?s(c).labelId:void 0,"aria-describedby":s(c).hasDescription.value?s(c).descriptionId:void 0,"data-value":s(c).value.value,"data-state":s(c).checked.value?"checked":"unchecked",onChange:v,onFocus:r[0]||(r[0]=e=>s(c).onSelect())},a.$attrs),null,16,u)]),_:1}))}});export{c as default};
+import e from"../utils/VisuallyHidden.vue.js";import{RADIO_CARD_CONTEXT as a}from"./context.js";import{createBlock as r,createElementVNode as t,defineComponent as d,inject as o,mergeProps as l,openBlock as i,unref as s,withCtx as u}from"vue";var n=["name","value","form","checked","required","disabled","tabindex","aria-labelledby","aria-describedby","data-value","data-state"],c=/* @__PURE__ */d({inheritAttrs:!1,__name:"RadioCardControl",setup(d){const c=o(a);if(!c)throw new Error("<SkdxRadioCardControl> must be used inside <SkdxRadioCard>.");function v(e){c.onSelect("pointer"),e.target.checked=c.checked.value}function b(e){const a=e.relatedTarget,r=e.currentTarget;"radio"===a?.getAttribute("role")&&a.closest('[role="radiogroup"]')===r.closest('[role="radiogroup"]')&&c.onSelect("keyboard")}return(a,d)=>(i(),r(e,{class:"skdx-radio-card__control","data-part":"control"},{default:u(()=>[t("input",l({type:"radio",role:"radio",name:s(c).name.value,value:s(c).value.value,form:s(c).form.value,checked:s(c).checked.value,required:s(c).required.value,disabled:s(c).disabled.value,tabindex:s(c).tabStop.value?0:-1,"aria-labelledby":s(c).hasLabel.value?s(c).labelId:void 0,"aria-describedby":s(c).hasDescription.value?s(c).descriptionId:void 0,"data-value":s(c).value.value,"data-state":s(c).checked.value?"checked":"unchecked",onChange:v,onFocus:b},a.$attrs),null,16,n)]),_:1}))}});export{c as default};

package/dist/radio-card/RadioCardDescription.vue.d.cts

@@ -1,11 +1,7 @@
 /**
  * Supporting copy under a `SkdxRadioCardLabel` — price, quota, caveat.
- * Registers itself with the card root on mount, which is what wires the
- * control's `aria-describedby` here, so the description is announced after the
- * name instead of being swallowed into it.
- *
- * Purely additive: leave it out and the control simply has no
- * `aria-describedby`.
+ * Wires the control's `aria-describedby` so description is announced after the name.
+ * Purely optional — omit it and the control simply has no `aria-describedby`.
  *
  * @example
  * ```vue

package/dist/radio-card/RadioCardDescription.vue.d.ts

@@ -1,11 +1,7 @@
 /**
  * Supporting copy under a `SkdxRadioCardLabel` — price, quota, caveat.
- * Registers itself with the card root on mount, which is what wires the
- * control's `aria-describedby` here, so the description is announced after the
- * name instead of being swallowed into it.
- *
- * Purely additive: leave it out and the control simply has no
- * `aria-describedby`.
+ * Wires the control's `aria-describedby` so description is announced after the name.
+ * Purely optional — omit it and the control simply has no `aria-describedby`.
  *
  * @example
  * ```vue

package/dist/radio-card/RadioCardIndicator.vue.d.cts

@@ -1,12 +1,6 @@
 /**
- * The decorative dot (or empty ring) drawn on a `SkdxRadioCard`. Mirrors the
- * card's `data-state` and `data-disabled`.
- *
- * Unlike `SkdxRadioGroupIndicator` this stays mounted when unchecked, because on
- * a card the indicator is the *ring*, not just the dot — unmounting it would
- * collapse the card's layout on every deselect. It is `aria-hidden`: the real
- * `<input>` already announces the checked state, and a second copy would make a
- * screen reader say it twice.
+ * The decorative ring on a `SkdxRadioCard`, staying mounted even when
+ * unchecked to preserve layout. It is `aria-hidden` — the `<input>` announces the state.
  *
  * @example
  * ```vue

package/dist/radio-card/RadioCardIndicator.vue.d.ts

@@ -1,12 +1,6 @@
 /**
- * The decorative dot (or empty ring) drawn on a `SkdxRadioCard`. Mirrors the
- * card's `data-state` and `data-disabled`.
- *
- * Unlike `SkdxRadioGroupIndicator` this stays mounted when unchecked, because on
- * a card the indicator is the *ring*, not just the dot — unmounting it would
- * collapse the card's layout on every deselect. It is `aria-hidden`: the real
- * `<input>` already announces the checked state, and a second copy would make a
- * screen reader say it twice.
+ * The decorative ring on a `SkdxRadioCard`, staying mounted even when
+ * unchecked to preserve layout. It is `aria-hidden` — the `<input>` announces the state.
  *
  * @example
  * ```vue

package/dist/radio-card/RadioCardLabel.vue.d.cts

@@ -1,12 +1,6 @@
 /**
- * The card's title line, and the control's accessible name via
- * `aria-labelledby`.
- *
- * Renders a `<span>`, not a `<label>`: the card root is already the label, and
- * nesting a second one is invalid HTML. It registers itself with the root on
- * mount so the control only points `aria-labelledby` here while this part
- * exists — omit it and the control falls back to the native implicit label,
- * naming itself from the card's whole text content (description included).
+ * The card's title line and control's accessible name via `aria-labelledby`.
+ * Renders a `<span>`, not a `<label>` — the card root is already the label.
  *
  * @example
  * ```vue

package/dist/radio-card/RadioCardLabel.vue.d.ts

@@ -1,12 +1,6 @@
 /**
- * The card's title line, and the control's accessible name via
- * `aria-labelledby`.
- *
- * Renders a `<span>`, not a `<label>`: the card root is already the label, and
- * nesting a second one is invalid HTML. It registers itself with the root on
- * mount so the control only points `aria-labelledby` here while this part
- * exists — omit it and the control falls back to the native implicit label,
- * naming itself from the card's whole text content (description included).
+ * The card's title line and control's accessible name via `aria-labelledby`.
+ * Renders a `<span>`, not a `<label>` — the card root is already the label.
  *
  * @example
  * ```vue

package/dist/radio-card/RadioCardRoot.vue.cjs

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

package/dist/radio-card/RadioCardRoot.vue.d.cts

@@ -0,0 +1,40 @@
+/**
+ * Single-select radio card: `<label>` wrapping hidden input. Selection state
+ * from enclosing group. Emits `data-state`, `data-disabled`, `data-focus-visible`.
+ * No `invalid` prop (lives on group), no interactive elements inside. Must be
+ * inside group.
+ *
+ * @example
+ * ```vue
+ * <SkdxRadioGroup name="plan" default-value="pro" aria-label="Plan">
+ *   <RadioCard.Root value="pro">
+ *     <RadioCard.Control />
+ *     <RadioCard.Indicator />
+ *     <RadioCard.Label>Pro</RadioCard.Label>
+ *     <RadioCard.Description>$20 per seat</RadioCard.Description>
+ *   </RadioCard.Root>
+ * </SkdxRadioGroup>
+ * ```
+ */
+type __VLS_Props = {
+    /** Unique identifier (matched against group's selected value). */
+    value: string;
+    /**
+     * Disable this card; group-level disabling always wins. @default false
+     */
+    disabled?: 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<{}>, {
+    disabled: 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/radio-card/RadioCardRoot.vue.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Single-select radio card: `<label>` wrapping hidden input. Selection state
+ * from enclosing group. Emits `data-state`, `data-disabled`, `data-focus-visible`.
+ * No `invalid` prop (lives on group), no interactive elements inside. Must be
+ * inside group.
+ *
+ * @example
+ * ```vue
+ * <SkdxRadioGroup name="plan" default-value="pro" aria-label="Plan">
+ *   <RadioCard.Root value="pro">
+ *     <RadioCard.Control />
+ *     <RadioCard.Indicator />
+ *     <RadioCard.Label>Pro</RadioCard.Label>
+ *     <RadioCard.Description>$20 per seat</RadioCard.Description>
+ *   </RadioCard.Root>
+ * </SkdxRadioGroup>
+ * ```
+ */
+type __VLS_Props = {
+    /** Unique identifier (matched against group's selected value). */
+    value: string;
+    /**
+     * Disable this card; group-level disabling always wins. @default false
+     */
+    disabled?: 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<{}>, {
+    disabled: 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/radio-card/RadioCardRoot.vue.js

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

package/dist/radio-card/RadioCardRoot.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const k=require("../utils/id.cjs"),O=require("../utils/cardNesting.cjs"),p=require("../utils/declaredChildren.cjs"),x=require("./context.cjs"),E=require("./RadioCardDescription.vue.cjs"),I=require("./RadioCardLabel.vue.cjs"),y=require("../radio-group/context.cjs");let e=require("vue");var S=["data-state","data-disabled","data-focus-visible"],w=(0,e.defineComponent)({__name:"RadioCardRoot",props:{value:{},disabled:{type:Boolean,default:!1}},setup(_){const o=_,a=(0,e.inject)(y.RADIO_GROUP_CONTEXT);if(!a)throw new Error("<SkdxRadioCard> must be used inside <SkdxRadioGroup>.");const r=(0,e.computed)(()=>a.value.value===o.value),u=(0,e.computed)(()=>a.disabled.value||o.disabled),b=(0,e.computed)(()=>r.value||a.value.value==null&&a.firstEnabledValue.value===o.value),n=(0,e.ref)(null);(0,e.onMounted)(()=>O.warnOnNestedInteractive("RadioCard",n.value));const i=k.nextId("radio-card"),c=(0,e.ref)(!1),v=(0,e.ref)(!1),d=(0,e.ref)(!1),f=(0,e.useSlots)(),q=p.slotDeclares(f.default,I.default),m=p.slotDeclares(f.default,E.default),s=(0,e.ref)(!1);(0,e.onMounted)(()=>{s.value=!0});let l=!1;function R(t){u.value||r.value||a.readOnly.value||a.onValueChange(o.value,t)}(0,e.provide)(x.RADIO_CARD_CONTEXT,{value:(0,e.computed)(()=>o.value),checked:r,disabled:u,tabStop:b,required:a.required,readOnly:a.readOnly,name:a.name,form:a.form,labelId:`${i}-label`,descriptionId:`${i}-description`,hasLabel:(0,e.computed)(()=>c.value||!s.value&&q),hasDescription:(0,e.computed)(()=>v.value||!s.value&&m),setHasLabel:t=>{c.value=t},setHasDescription:t=>{v.value=t},onSelect:R});function h(){l=!0}function C(){d.value=!l,l=!1}function D(){d.value=!1,l=!1}return(t,L)=>((0,e.openBlock)(),(0,e.createElementBlock)("label",{class:"skdx-radio-card","data-part":"root","data-skdx-component":"radio-card",ref_key:"rootEl",ref:n,"data-state":r.value?"checked":"unchecked","data-disabled":u.value?"":void 0,"data-focus-visible":d.value?"":void 0,onPointerdown:h,onFocusin:C,onFocusout:D},[(0,e.renderSlot)(t.$slots,"default")],40,S))}});exports.default=w;

package/dist/radio-card/RadioCardRoot.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{nextId as e}from"../utils/id.js";import{warnOnNestedInteractive as a}from"../utils/cardNesting.js";import{slotDeclares as o}from"../utils/declaredChildren.js";import{RADIO_CARD_CONTEXT as l}from"./context.js";import t from"./RadioCardDescription.vue.js";import d from"./RadioCardLabel.vue.js";import{RADIO_GROUP_CONTEXT as s}from"../radio-group/context.js";import{computed as r,createElementBlock as u,defineComponent as i,inject as n,onMounted as c,openBlock as v,provide as f,ref as p,renderSlot as m,useSlots as b}from"vue";var C=["data-state","data-disabled","data-focus-visible"],R=/* @__PURE__ */i({__name:"RadioCardRoot",props:{value:{},disabled:{type:Boolean,default:!1}},setup(i){const R=i,k=n(s);if(!k)throw new Error("<SkdxRadioCard> must be used inside <SkdxRadioGroup>.");const O=r(()=>k.value.value===R.value),h=r(()=>k.disabled.value||R.disabled),j=r(()=>O.value||null==k.value.value&&k.firstEnabledValue.value===R.value),x=p(null);c(()=>a("RadioCard",x.value));const D=e("radio-card"),_=p(!1),E=p(!1),I=p(!1),S=b(),y=o(S.default,d),w=o(S.default,t),N=p(!1);c(()=>{N.value=!0});let T=!1;function g(){T=!0}function A(){I.value=!T,T=!1}function B(){I.value=!1,T=!1}return f(l,{value:r(()=>R.value),checked:O,disabled:h,tabStop:j,required:k.required,readOnly:k.readOnly,name:k.name,form:k.form,labelId:`${D}-label`,descriptionId:`${D}-description`,hasLabel:r(()=>_.value||!N.value&&y),hasDescription:r(()=>E.value||!N.value&&w),setHasLabel:e=>{_.value=e},setHasDescription:e=>{E.value=e},onSelect:function(e){h.value||O.value||k.readOnly.value||k.onValueChange(R.value,e)}}),(e,a)=>(v(),u("label",{class:"skdx-radio-card","data-part":"root","data-skdx-component":"radio-card",ref_key:"rootEl",ref:x,"data-state":O.value?"checked":"unchecked","data-disabled":h.value?"":void 0,"data-focus-visible":I.value?"":void 0,onPointerdown:g,onFocusin:A,onFocusout:B},[m(e.$slots,"default")],40,C))}});export{R as default};

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

@@ -1,13 +1,18 @@
 import type { ComputedRef, InjectionKey } from 'vue';
+import type { RadioGroupChangeReason } from '../radio-group/context.cjs';
 /** @internal Shared state a RadioCard provides to its Control, Indicator, Label, and Description. */
 export interface RadioCardContext {
     value: ComputedRef<string>;
     checked: ComputedRef<boolean>;
     disabled: ComputedRef<boolean>;
-    /** Roving tabindex: only the checked card — or the first enabled one when nothing is checked — is a tab stop. */
+    /** Roving tabindex: only the checked card or first enabled is a tab stop. */
     tabStop: ComputedRef<boolean>;
     required: ComputedRef<boolean>;
+    /** The group's `readOnly`: the card keeps its tab stop and refuses the selection. */
+    readOnly: ComputedRef<boolean>;
     name: ComputedRef<string | undefined>;
+    /** The group's `form` id, forwarded to this card's hidden radio input. */
+    form: ComputedRef<string | undefined>;
     labelId: string;
     descriptionId: string;
     /** Whether a `SkdxRadioCardLabel` is mounted, so the control only points `aria-labelledby` at an id that exists. */
@@ -16,7 +21,7 @@ export interface RadioCardContext {
     hasDescription: ComputedRef<boolean>;
     setHasLabel: (present: boolean) => void;
     setHasDescription: (present: boolean) => void;
-    onSelect: () => void;
+    onSelect: (reason: RadioGroupChangeReason) => void;
 }
 /** @internal Injection key a RadioCard provides so its parts share the checked state, ids, and select handler. */
 export declare const RADIO_CARD_CONTEXT: InjectionKey<RadioCardContext>;

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

@@ -1,13 +1,18 @@
 import type { ComputedRef, InjectionKey } from 'vue';
+import type { RadioGroupChangeReason } from '../radio-group/context.js';
 /** @internal Shared state a RadioCard provides to its Control, Indicator, Label, and Description. */
 export interface RadioCardContext {
     value: ComputedRef<string>;
     checked: ComputedRef<boolean>;
     disabled: ComputedRef<boolean>;
-    /** Roving tabindex: only the checked card — or the first enabled one when nothing is checked — is a tab stop. */
+    /** Roving tabindex: only the checked card or first enabled is a tab stop. */
     tabStop: ComputedRef<boolean>;
     required: ComputedRef<boolean>;
+    /** The group's `readOnly`: the card keeps its tab stop and refuses the selection. */
+    readOnly: ComputedRef<boolean>;
     name: ComputedRef<string | undefined>;
+    /** The group's `form` id, forwarded to this card's hidden radio input. */
+    form: ComputedRef<string | undefined>;
     labelId: string;
     descriptionId: string;
     /** Whether a `SkdxRadioCardLabel` is mounted, so the control only points `aria-labelledby` at an id that exists. */
@@ -16,7 +21,7 @@ export interface RadioCardContext {
     hasDescription: ComputedRef<boolean>;
     setHasLabel: (present: boolean) => void;
     setHasDescription: (present: boolean) => void;
-    onSelect: () => void;
+    onSelect: (reason: RadioGroupChangeReason) => void;
 }
 /** @internal Injection key a RadioCard provides so its parts share the checked state, ids, and select handler. */
 export declare const RADIO_CARD_CONTEXT: InjectionKey<RadioCardContext>;

package/dist/radio-card/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./RadioCard.vue.cjs"),e=require("./RadioCardControl.vue.cjs"),d=require("./RadioCardIndicator.vue.cjs"),a=require("./RadioCardLabel.vue.cjs"),i=require("./RadioCardDescription.vue.cjs");exports.SkdxRadioCard=r.default;exports.SkdxRadioCardControl=e.default;exports.SkdxRadioCardDescription=i.default;exports.SkdxRadioCardIndicator=d.default;exports.SkdxRadioCardLabel=a.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./RadioCard.vue.cjs");exports.SkdxRadioCard=e.default;

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

@@ -1,5 +1 @@
 export { default as SkdxRadioCard } from './RadioCard.vue.cjs';
-export { default as SkdxRadioCardControl } from './RadioCardControl.vue.cjs';
-export { default as SkdxRadioCardIndicator } from './RadioCardIndicator.vue.cjs';
-export { default as SkdxRadioCardLabel } from './RadioCardLabel.vue.cjs';
-export { default as SkdxRadioCardDescription } from './RadioCardDescription.vue.cjs';

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

@@ -1,5 +1 @@
 export { default as SkdxRadioCard } from './RadioCard.vue.js';
-export { default as SkdxRadioCardControl } from './RadioCardControl.vue.js';
-export { default as SkdxRadioCardIndicator } from './RadioCardIndicator.vue.js';
-export { default as SkdxRadioCardLabel } from './RadioCardLabel.vue.js';
-export { default as SkdxRadioCardDescription } from './RadioCardDescription.vue.js';

package/dist/radio-card/index.js

@@ -1 +1 @@
-import a from"./RadioCard.vue.js";import o from"./RadioCardControl.vue.js";import d from"./RadioCardIndicator.vue.js";import r from"./RadioCardLabel.vue.js";import i from"./RadioCardDescription.vue.js";export{a as SkdxRadioCard,o as SkdxRadioCardControl,i as SkdxRadioCardDescription,d as SkdxRadioCardIndicator,r as SkdxRadioCardLabel};
+import a from"./RadioCard.vue.js";export{a as SkdxRadioCard};

package/dist/radio-card/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./RadioCardControl.vue.cjs"),e=require("./RadioCardDescription.vue.cjs"),d=require("./RadioCardIndicator.vue.cjs"),a=require("./RadioCardLabel.vue.cjs"),o=require("./RadioCardRoot.vue.cjs");exports.SkdxRadioCardControl=r.default;exports.SkdxRadioCardDescription=e.default;exports.SkdxRadioCardIndicator=d.default;exports.SkdxRadioCardLabel=a.default;exports.SkdxRadioCardRoot=o.default;

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

@@ -0,0 +1,29 @@
+/**
+ * Advanced primitives for `SkdxRadioCard` — 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 { SkdxRadioCardControl, SkdxRadioCardDescription, SkdxRadioCardIndicator, SkdxRadioCardLabel, SkdxRadioCardRoot } from '@skdx/vue/primitives/radio-card';
+ * </script>
+ *
+ * <template>
+ *   <SkdxRadioGroup name="plan" aria-label="Plan">
+ *     <SkdxRadioCardRoot value="pro">
+ *       <SkdxRadioCardControl />
+ *       <img src="/pro.svg" alt="" />
+ *       <SkdxRadioCardIndicator />
+ *       <SkdxRadioCardLabel>Pro</SkdxRadioCardLabel>
+ *       <SkdxRadioCardDescription>$20 per seat, per month.</SkdxRadioCardDescription>
+ *     </SkdxRadioCardRoot>
+ *   </SkdxRadioGroup>
+ * </template>
+ * ```
+ */
+export { default as SkdxRadioCardRoot } from './RadioCardRoot.vue.cjs';
+export { default as SkdxRadioCardControl } from './RadioCardControl.vue.cjs';
+export { default as SkdxRadioCardIndicator } from './RadioCardIndicator.vue.cjs';
+export { default as SkdxRadioCardLabel } from './RadioCardLabel.vue.cjs';
+export { default as SkdxRadioCardDescription } from './RadioCardDescription.vue.cjs';

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

@@ -0,0 +1,29 @@
+/**
+ * Advanced primitives for `SkdxRadioCard` — 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 { SkdxRadioCardControl, SkdxRadioCardDescription, SkdxRadioCardIndicator, SkdxRadioCardLabel, SkdxRadioCardRoot } from '@skdx/vue/primitives/radio-card';
+ * </script>
+ *
+ * <template>
+ *   <SkdxRadioGroup name="plan" aria-label="Plan">
+ *     <SkdxRadioCardRoot value="pro">
+ *       <SkdxRadioCardControl />
+ *       <img src="/pro.svg" alt="" />
+ *       <SkdxRadioCardIndicator />
+ *       <SkdxRadioCardLabel>Pro</SkdxRadioCardLabel>
+ *       <SkdxRadioCardDescription>$20 per seat, per month.</SkdxRadioCardDescription>
+ *     </SkdxRadioCardRoot>
+ *   </SkdxRadioGroup>
+ * </template>
+ * ```
+ */
+export { default as SkdxRadioCardRoot } from './RadioCardRoot.vue.js';
+export { default as SkdxRadioCardControl } from './RadioCardControl.vue.js';
+export { default as SkdxRadioCardIndicator } from './RadioCardIndicator.vue.js';
+export { default as SkdxRadioCardLabel } from './RadioCardLabel.vue.js';
+export { default as SkdxRadioCardDescription } from './RadioCardDescription.vue.js';

package/dist/radio-card/primitives.js

@@ -0,0 +1 @@
+import o from"./RadioCardControl.vue.js";import a from"./RadioCardDescription.vue.js";import d from"./RadioCardIndicator.vue.js";import r from"./RadioCardLabel.vue.js";import i from"./RadioCardRoot.vue.js";export{o as SkdxRadioCardControl,a as SkdxRadioCardDescription,d as SkdxRadioCardIndicator,r as SkdxRadioCardLabel,i as SkdxRadioCardRoot};