@skdx/vue 0.26.0 → 0.28.0

package/dist/radio-group/RadioGroupItem.vue.d.ts

@@ -1,11 +1,7 @@
 /**
- * A single radio button within a `SkdxRadioGroup`. Renders `role="radio"`
- * with `aria-checked`, `data-state`, `data-disabled`, `data-value`. Selects
- * on click and on focus (WAI-ARIA radio group pattern). When the group has
- * a `name`, also renders a visually-hidden native `<input type="radio">`
- * for real form submission (two root nodes, so attrs fallthrough is
- * disabled and forwarded explicitly onto the button). Provides its checked
- * state to a nested `SkdxRadioGroupIndicator` via context.
+ * Radio button in a `SkdxRadioGroup`. Selects on click or sibling focus (arrow
+ * navigation); Tab from outside doesn't select. Renders hidden form input if
+ * group has a name.
  */
 type __VLS_Props = {
     /** Unique identifier compared against the group's selected value. */

package/dist/radio-group/RadioGroupItem.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const i=require("./context.cjs");let e=require("vue");var c=["aria-checked","data-state","data-disabled","data-value","disabled","tabindex"],v=["name","value","checked","required","disabled"],p=(0,e.defineComponent)({inheritAttrs:!1,__name:"RadioGroupItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(l){const u=l,a=(0,e.inject)(i.RADIO_GROUP_CONTEXT);if(!a)throw new Error("<SkdxRadioGroupItem> must be used inside <SkdxRadioGroup>.");const t=(0,e.computed)(()=>a.value.value===u.value),d=(0,e.computed)(()=>a.disabled.value||u.disabled),s=(0,e.computed)(()=>a.firstEnabledValue.value===null?t.value&&!d.value:a.firstEnabledValue.value===u.value);(0,e.provide)(i.RADIO_ITEM_CONTEXT,{checked:t,disabled:d});function n(){t.value||a.onValueChange(u.value)}return(o,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createElementVNode)("button",(0,e.mergeProps)({class:"skdx-radio-group__item","data-part":"item",type:"button",role:"radio","aria-checked":t.value,"data-state":t.value?"checked":"unchecked","data-disabled":d.value?"":void 0,"data-value":l.value,disabled:d.value,tabindex:s.value?0:-1,onClick:n,onFocus:n,onKeydown:r[0]||(r[0]=(0,e.withKeys)((0,e.withModifiers)(()=>{},["prevent"]),["enter"]))},o.$attrs),[(0,e.renderSlot)(o.$slots,"default")],16,c),(0,e.unref)(a).name.value?((0,e.openBlock)(),(0,e.createElementBlock)("input",{key:0,type:"radio","aria-hidden":"true",tabindex:"-1",name:(0,e.unref)(a).name.value,value:l.value,checked:t.value,required:(0,e.unref)(a).required.value,disabled:d.value,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,v)):(0,e.createCommentVNode)("",!0)],64))}});exports.default=p;
+const s=require("./context.cjs");let e=require("vue");var p=["aria-checked","data-state","data-disabled","data-value","disabled","tabindex"],m=["name","value","form","checked","required","disabled"],f=(0,e.defineComponent)({inheritAttrs:!1,__name:"RadioGroupItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(d){const l=d,a=(0,e.inject)(s.RADIO_GROUP_CONTEXT);if(!a)throw new Error("<SkdxRadioGroupItem> must be used inside <SkdxRadioGroup>.");const o=(0,e.computed)(()=>a.value.value===l.value),u=(0,e.computed)(()=>a.disabled.value||l.disabled),c=(0,e.computed)(()=>a.firstEnabledValue.value===null?o.value&&!u.value:a.firstEnabledValue.value===l.value);(0,e.provide)(s.RADIO_ITEM_CONTEXT,{checked:o,disabled:u});function n(t){o.value||a.onValueChange(l.value,t)}function v(t){const r=t.relatedTarget,i=t.currentTarget;r?.getAttribute("role")==="radio"&&r.closest('[role="radiogroup"]')===i.closest('[role="radiogroup"]')&&n("keyboard")}return(t,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createElementVNode)("button",(0,e.mergeProps)({class:"skdx-radio-group__item","data-part":"item",type:"button",role:"radio","aria-checked":o.value,"data-state":o.value?"checked":"unchecked","data-disabled":u.value?"":void 0,"data-value":d.value,disabled:u.value,tabindex:c.value?0:-1,onClick:r[0]||(r[0]=i=>n("pointer")),onFocus:v,onKeydown:r[1]||(r[1]=(0,e.withKeys)((0,e.withModifiers)(()=>{},["prevent"]),["enter"]))},t.$attrs),[(0,e.renderSlot)(t.$slots,"default")],16,p),(0,e.unref)(a).name.value?((0,e.openBlock)(),(0,e.createElementBlock)("input",{key:0,type:"radio","aria-hidden":"true",tabindex:"-1",name:(0,e.unref)(a).name.value,value:d.value,form:(0,e.unref)(a).form.value,checked:o.value,required:(0,e.unref)(a).required.value,disabled:u.value,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,m)):(0,e.createCommentVNode)("",!0)],64))}});exports.default=f;

package/dist/radio-group/RadioGroupItem.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{RADIO_GROUP_CONTEXT as e,RADIO_ITEM_CONTEXT as a}from"./context.js";import{Fragment as t,computed as d,createCommentVNode as l,createElementBlock as u,createElementVNode as i,defineComponent as o,inject as s,mergeProps as n,openBlock as r,provide as v,renderSlot as c,unref as p,withKeys as m,withModifiers as b}from"vue";var h=["aria-checked","data-state","data-disabled","data-value","disabled","tabindex"],k=["name","value","checked","required","disabled"],f=/* @__PURE__ */o({inheritAttrs:!1,__name:"RadioGroupItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(o){const f=o,x=s(e);if(!x)throw new Error("<SkdxRadioGroupItem> must be used inside <SkdxRadioGroup>.");const y=d(()=>x.value.value===f.value),E=d(()=>x.disabled.value||f.disabled),_=d(()=>null===x.firstEnabledValue.value?y.value&&!E.value:x.firstEnabledValue.value===f.value);function g(){y.value||x.onValueChange(f.value)}return v(a,{checked:y,disabled:E}),(e,a)=>(r(),u(t,null,[i("button",n({class:"skdx-radio-group__item","data-part":"item",type:"button",role:"radio","aria-checked":y.value,"data-state":y.value?"checked":"unchecked","data-disabled":E.value?"":void 0,"data-value":o.value,disabled:E.value,tabindex:_.value?0:-1,onClick:g,onFocus:g,onKeydown:a[0]||(a[0]=m(b(()=>{},["prevent"]),["enter"]))},e.$attrs),[c(e.$slots,"default")],16,h),p(x).name.value?(r(),u("input",{key:0,type:"radio","aria-hidden":"true",tabindex:"-1",name:p(x).name.value,value:o.value,checked:y.value,required:p(x).required.value,disabled:E.value,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,k)):l("",!0)],64))}});export{f as default};
+import{RADIO_GROUP_CONTEXT as e,RADIO_ITEM_CONTEXT as a}from"./context.js";import{Fragment as t,computed as d,createCommentVNode as l,createElementBlock as o,createElementVNode as r,defineComponent as u,inject as i,mergeProps as s,openBlock as n,provide as v,renderSlot as c,unref as p,withKeys as m,withModifiers as b}from"vue";var f=["aria-checked","data-state","data-disabled","data-value","disabled","tabindex"],h=["name","value","form","checked","required","disabled"],k=/* @__PURE__ */u({inheritAttrs:!1,__name:"RadioGroupItem",props:{value:{},disabled:{type:Boolean,default:!1}},setup(u){const k=u,g=i(e);if(!g)throw new Error("<SkdxRadioGroupItem> must be used inside <SkdxRadioGroup>.");const x=d(()=>g.value.value===k.value),y=d(()=>g.disabled.value||k.disabled),E=d(()=>null===g.firstEnabledValue.value?x.value&&!y.value:g.firstEnabledValue.value===k.value);function _(e){x.value||g.onValueChange(k.value,e)}function T(e){const a=e.relatedTarget,t=e.currentTarget;"radio"===a?.getAttribute("role")&&a.closest('[role="radiogroup"]')===t.closest('[role="radiogroup"]')&&_("keyboard")}return v(a,{checked:x,disabled:y}),(e,a)=>(n(),o(t,null,[r("button",s({class:"skdx-radio-group__item","data-part":"item",type:"button",role:"radio","aria-checked":x.value,"data-state":x.value?"checked":"unchecked","data-disabled":y.value?"":void 0,"data-value":u.value,disabled:y.value,tabindex:E.value?0:-1,onClick:a[0]||(a[0]=e=>_("pointer")),onFocus:T,onKeydown:a[1]||(a[1]=m(b(()=>{},["prevent"]),["enter"]))},e.$attrs),[c(e.$slots,"default")],16,f),p(g).name.value?(n(),o("input",{key:0,type:"radio","aria-hidden":"true",tabindex:"-1",name:p(g).name.value,value:u.value,form:p(g).form.value,checked:x.value,required:p(g).required.value,disabled:y.value,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,h)):l("",!0)],64))}});export{k as default};

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

@@ -1,17 +1,44 @@
 import type { ComputedRef, InjectionKey } from 'vue';
+/**
+ * Why the item changed. Vocabulary from `@skdx/shared`'s change-reason
+ * contract; restated because frameworks carry no contracts dependency.
+ */
+export type RadioGroupChangeReason = 'keyboard' | 'pointer' | 'programmatic';
+/**
+ * The payload `value-change` carries. Both ends of change and what drove it.
+ * `previousValue` needed in controlled mode (old value is gone on handler run).
+ * `reason` disambiguates arrow/click/form-reset. `update:value` keeps bare
+ * string for `v-model:value` round-tripping.
+ */
+export interface RadioGroupValueChangeDetail {
+    /** The item that is now selected. */
+    value: string;
+    /** The value selected before this change, or `null` when nothing was. */
+    previousValue: string | null;
+    /**
+     * What drove the change: `'pointer'` for a click, `'keyboard'` for the focus
+     * an arrow key/Home/End moved, `'programmatic'` for a form reset.
+     */
+    reason: RadioGroupChangeReason;
+}
 /** @internal Injection key a RadioGroup provides so its items can read/drive shared state. */
 export interface RadioGroupContext {
     name: ComputedRef<string | undefined>;
-    value: ComputedRef<string | undefined>;
+    /** The `<form>` id every item's hidden radio submits to, for a group rendered outside that form. */
+    form: ComputedRef<string | undefined>;
+    /** `null` is the explicit empty selection; `undefined` only ever means "uncontrolled". */
+    value: ComputedRef<string | null | undefined>;
     required: ComputedRef<boolean>;
     disabled: ComputedRef<boolean>;
+    /** Frozen but not disabled: items keep their tab stop and refuse to change the value. */
+    readOnly: ComputedRef<boolean>;
     /**
      * The group's single tab stop, resolved against the DOM: the checked radio
      * while it is rendered and enabled, else the first enabled radio. `null` only
      * before that has been resolved, or when every radio is disabled.
      */
     firstEnabledValue: ComputedRef<string | null>;
-    onValueChange: (value: string) => void;
+    onValueChange: (value: string, reason: RadioGroupChangeReason) => void;
 }
 /** @internal Injection key a RadioGroup provides so its items share the selected value, name, and change handler. */
 export declare const RADIO_GROUP_CONTEXT: InjectionKey<RadioGroupContext>;

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

@@ -1,17 +1,44 @@
 import type { ComputedRef, InjectionKey } from 'vue';
+/**
+ * Why the item changed. Vocabulary from `@skdx/shared`'s change-reason
+ * contract; restated because frameworks carry no contracts dependency.
+ */
+export type RadioGroupChangeReason = 'keyboard' | 'pointer' | 'programmatic';
+/**
+ * The payload `value-change` carries. Both ends of change and what drove it.
+ * `previousValue` needed in controlled mode (old value is gone on handler run).
+ * `reason` disambiguates arrow/click/form-reset. `update:value` keeps bare
+ * string for `v-model:value` round-tripping.
+ */
+export interface RadioGroupValueChangeDetail {
+    /** The item that is now selected. */
+    value: string;
+    /** The value selected before this change, or `null` when nothing was. */
+    previousValue: string | null;
+    /**
+     * What drove the change: `'pointer'` for a click, `'keyboard'` for the focus
+     * an arrow key/Home/End moved, `'programmatic'` for a form reset.
+     */
+    reason: RadioGroupChangeReason;
+}
 /** @internal Injection key a RadioGroup provides so its items can read/drive shared state. */
 export interface RadioGroupContext {
     name: ComputedRef<string | undefined>;
-    value: ComputedRef<string | undefined>;
+    /** The `<form>` id every item's hidden radio submits to, for a group rendered outside that form. */
+    form: ComputedRef<string | undefined>;
+    /** `null` is the explicit empty selection; `undefined` only ever means "uncontrolled". */
+    value: ComputedRef<string | null | undefined>;
     required: ComputedRef<boolean>;
     disabled: ComputedRef<boolean>;
+    /** Frozen but not disabled: items keep their tab stop and refuse to change the value. */
+    readOnly: ComputedRef<boolean>;
     /**
      * The group's single tab stop, resolved against the DOM: the checked radio
      * while it is rendered and enabled, else the first enabled radio. `null` only
      * before that has been resolved, or when every radio is disabled.
      */
     firstEnabledValue: ComputedRef<string | null>;
-    onValueChange: (value: string) => void;
+    onValueChange: (value: string, reason: RadioGroupChangeReason) => void;
 }
 /** @internal Injection key a RadioGroup provides so its items share the selected value, name, and change handler. */
 export declare const RADIO_GROUP_CONTEXT: InjectionKey<RadioGroupContext>;

package/dist/radio-group/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./RadioGroup.vue.cjs"),r=require("./RadioGroupItem.vue.cjs"),o=require("./RadioGroupIndicator.vue.cjs");exports.SkdxRadioGroup=e.default;exports.SkdxRadioGroupIndicator=o.default;exports.SkdxRadioGroupItem=r.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./RadioGroup.vue.cjs");exports.SkdxRadioGroup=e.default;

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

@@ -1,3 +1,3 @@
 export { default as SkdxRadioGroup } from './RadioGroup.vue.cjs';
-export { default as SkdxRadioGroupItem } from './RadioGroupItem.vue.cjs';
-export { default as SkdxRadioGroupIndicator } from './RadioGroupIndicator.vue.cjs';
+export type { RadioGroupOption } from './types.cjs';
+export type { RadioGroupChangeReason, RadioGroupValueChangeDetail } from './context.cjs';

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

@@ -1,3 +1,3 @@
 export { default as SkdxRadioGroup } from './RadioGroup.vue.js';
-export { default as SkdxRadioGroupItem } from './RadioGroupItem.vue.js';
-export { default as SkdxRadioGroupIndicator } from './RadioGroupIndicator.vue.js';
+export type { RadioGroupOption } from './types.js';
+export type { RadioGroupChangeReason, RadioGroupValueChangeDetail } from './context.js';

package/dist/radio-group/index.js

@@ -1 +1 @@
-import o from"./RadioGroup.vue.js";import r from"./RadioGroupItem.vue.js";import a from"./RadioGroupIndicator.vue.js";export{o as SkdxRadioGroup,a as SkdxRadioGroupIndicator,r as SkdxRadioGroupItem};
+import o from"./RadioGroup.vue.js";export{o as SkdxRadioGroup};

package/dist/radio-group/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./RadioGroupIndicator.vue.cjs"),r=require("./RadioGroupItem.vue.cjs"),o=require("./RadioGroup.vue.cjs");exports.SkdxRadioGroup=o.default;exports.SkdxRadioGroupIndicator=e.default;exports.SkdxRadioGroupItem=r.default;

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

@@ -0,0 +1,25 @@
+/**
+ * Advanced primitives for `SkdxRadioGroup` — the parts the recipe composes.
+ * Use when you need a different structure (e.g., radio with markup, card variant).
+ * RadioGroup here is the barrel export, derives items from `options` when given
+ * no children.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxRadioGroup, SkdxRadioGroupIndicator, SkdxRadioGroupItem } from '@skdx/vue/primitives/radio-group';
+ * </script>
+ *
+ * <template>
+ *   <SkdxRadioGroup v-model:value="plan" aria-label="Plan">
+ *     <SkdxRadioGroupItem value="free"><SkdxRadioGroupIndicator />Free</SkdxRadioGroupItem>
+ *     <SkdxRadioGroupItem value="pro"><SkdxRadioGroupIndicator />Pro</SkdxRadioGroupItem>
+ *   </SkdxRadioGroup>
+ * </template>
+ * ```
+ */
+export { default as SkdxRadioGroup } from './RadioGroup.vue.cjs';
+export { default as SkdxRadioGroupItem } from './RadioGroupItem.vue.cjs';
+export { default as SkdxRadioGroupIndicator } from './RadioGroupIndicator.vue.cjs';
+export type { RadioGroupOption } from './types.cjs';
+export type { RadioGroupChangeReason, RadioGroupValueChangeDetail } from './context.cjs';

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

@@ -0,0 +1,25 @@
+/**
+ * Advanced primitives for `SkdxRadioGroup` — the parts the recipe composes.
+ * Use when you need a different structure (e.g., radio with markup, card variant).
+ * RadioGroup here is the barrel export, derives items from `options` when given
+ * no children.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxRadioGroup, SkdxRadioGroupIndicator, SkdxRadioGroupItem } from '@skdx/vue/primitives/radio-group';
+ * </script>
+ *
+ * <template>
+ *   <SkdxRadioGroup v-model:value="plan" aria-label="Plan">
+ *     <SkdxRadioGroupItem value="free"><SkdxRadioGroupIndicator />Free</SkdxRadioGroupItem>
+ *     <SkdxRadioGroupItem value="pro"><SkdxRadioGroupIndicator />Pro</SkdxRadioGroupItem>
+ *   </SkdxRadioGroup>
+ * </template>
+ * ```
+ */
+export { default as SkdxRadioGroup } from './RadioGroup.vue.js';
+export { default as SkdxRadioGroupItem } from './RadioGroupItem.vue.js';
+export { default as SkdxRadioGroupIndicator } from './RadioGroupIndicator.vue.js';
+export type { RadioGroupOption } from './types.js';
+export type { RadioGroupChangeReason, RadioGroupValueChangeDetail } from './context.js';

package/dist/radio-group/primitives.js

@@ -0,0 +1 @@
+import o from"./RadioGroupIndicator.vue.js";import r from"./RadioGroupItem.vue.js";import a from"./RadioGroup.vue.js";export{a as SkdxRadioGroup,o as SkdxRadioGroupIndicator,r as SkdxRadioGroupItem};

package/dist/radio-group/types.d.cts

@@ -0,0 +1,12 @@
+/** One radio in a `SkdxRadioGroup`'s `options`. */
+export interface RadioGroupOption {
+    /** Unique identifier compared against the group's selected value. */
+    value: string;
+    /** Text rendered inside the derived radio, and its accessible name. */
+    label: string;
+    /**
+     * Excludes this item from selection and from roving focus.
+     * @default false
+     */
+    disabled?: boolean;
+}

package/dist/radio-group/types.d.ts

@@ -0,0 +1,12 @@
+/** One radio in a `SkdxRadioGroup`'s `options`. */
+export interface RadioGroupOption {
+    /** Unique identifier compared against the group's selected value. */
+    value: string;
+    /** Text rendered inside the derived radio, and its accessible name. */
+    label: string;
+    /**
+     * Excludes this item from selection and from roving focus.
+     * @default false
+     */
+    disabled?: boolean;
+}

package/dist/rating/Rating.vue.d.cts

@@ -1,27 +1,8 @@
+import { type SkdxRatingValueChangeDetail } from './context.cjs';
 /**
- * The Vue implementation of the shared Rating contract (see
- * `@skdx/shared`'s `ratingContract`). Renders `role="radiogroup"` and
- * drives roving-tabindex keyboard navigation (horizontal, no wrap) across
- * `SkdxRatingItem` children, mirroring `packages/vue/src/tabs/TabsList.vue`'s
- * inline keydown handler.
- *
- * The hover preview is display-only: it drives `data-highlighted`/`data-half`
- * and the `hover-value-change` emit, and never touches the committed `value` —
- * the same preview/commit split as `SkdxSlider`, where dragging paints the
- * track but only pointer-up writes the value.
- *
- * With `allowHalf` the root becomes a `role="slider"` instead: half-star
- * values cannot be told truthfully by a set of whole-star radios, so the root
- * takes the tab stop and reports `aria-valuenow`, handles the arrow keys
- * itself (stepping by `0.5`) rather than roving focus, and the items become
- * purely visual.
- *
- * With a `name`, one visually-hidden native input submits the committed value
- * as `String(value)` with the surrounding `<form>` — an unrated (`0`) rating
- * submits nothing, so `required` reports `valueMissing` — and
- * `checkValidity()`/`reportValidity()` — exposed on this root — delegate to it.
- * Resetting the form restores the value the rating was declared with, emitting
- * `value-change` so a controlled parent follows it.
+ * Rating control: role="radiogroup" with roving-tabindex (or slider with allowHalf).
+ * Hover preview is separate from committed value; name with aria-label.
+ * Supports form participation, validation, and controlled/uncontrolled usage.
  */
 type __VLS_Props = {
     /** Selected value, for controlled usage. Pair with `v-model:value` or `@value-change`. */
@@ -30,6 +11,31 @@ type __VLS_Props = {
     defaultValue?: number;
     /** Number of items to render, e.g. stars. */
     max?: number;
+    /**
+     * Names each `SkdxRatingItem`, applied as that item's `aria-label`.
+     *
+     * An item is a `role="radio"`, which takes its name from its content — and
+     * the content is a star icon, which contributes no text. Without a name the
+     * whole widget announces as five unnamed radios, so this is not decoration:
+     * it is the only thing that tells a screen-reader user which star they are
+     * on. Receives `max` as well as the item's own value because the name has
+     * to say what the score is out of.
+     *
+     * An `aria-label` written on an individual `SkdxRatingItem` wins over this,
+     * for the scale whose points have real names ("Poor", "Excellent").
+     * @default (value, max) => `${value} of ${max} stars`
+     */
+    itemLabel?: (value: number, max: number) => string;
+    /**
+     * Lets the committed value be cleared back to `0` by picking it again —
+     * clicking the checked item, or pressing Space on it. Off by default,
+     * where re-picking the current value is swallowed and emits nothing. Only
+     * the exact committed value clears: with `allowHalf`, clicking the leading
+     * half of a 3-star item at a value of 2.5 clears, and its trailing half
+     * sets 3.
+     * @default false
+     */
+    allowClear?: boolean;
     /**
      * Allow half-item values (`0.5`, `1`, `1.5`, …). Pointer input picks a half
      * from the leading half of an item's box (the trailing half under RTL);
@@ -39,8 +45,9 @@ type __VLS_Props = {
      * This changes the widget's ARIA, deliberately: a set of whole-star
      * `role="radio"` items cannot say "2.5" truthfully, so the root becomes a
      * `role="slider"` reporting `aria-valuenow`/`aria-valuetext`, takes the
-     * single tab stop, and the items become `aria-hidden` visuals. Give the
-     * root an accessible name (`aria-label`) either way.
+     * single tab stop, and the items become non-focusable
+     * `role="presentation"` visuals. Give the root an accessible name
+     * (`aria-label`) either way.
      */
     allowHalf?: boolean;
     /** Disables every item, blocking all interaction. */
@@ -60,33 +67,53 @@ type __VLS_Props = {
      * @default false
      */
     required?: boolean;
+    /**
+     * Id of the `<form>` that owns this rating, for a rating rendered outside
+     * it. Set on the hidden input, and used to resolve the form whose `reset`
+     * restores the initial rating.
+     * @default undefined — the rating belongs to its nearest ancestor `<form>`, if any.
+     */
+    form?: string;
 };
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+type __VLS_Slots = {
+    /** Full manual composition — one Item per position. */
+    default?(): unknown;
+    /** The derived Items' content — a star icon, shared by every position. */
+    icon?(): unknown;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     /** Reports whether the hidden form input satisfies its constraints. `true` without a `name`. */
     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 hidden input carrying the rating, exactly like
+     * `HTMLInputElement.setCustomValidity()`: a non-empty message makes it
+     * invalid (`customError`), `''` clears it. Dropped without a `name`, matching
+     * the reads above.
+     */
+    setCustomValidity: (message: string) => void | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: number) => any;
-    "value-change": (value: number) => any;
+    "value-change": (detail: SkdxRatingValueChangeDetail) => any;
     "hover-value-change": (value: number | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:value"?: ((value: number) => any) | undefined;
-    "onValue-change"?: ((value: number) => any) | undefined;
+    "onValue-change"?: ((detail: SkdxRatingValueChangeDetail) => any) | undefined;
     "onHover-value-change"?: ((value: number | null) => any) | undefined;
 }>, {
+    form: string;
     disabled: boolean;
+    value: number;
+    readOnly: boolean;
     required: boolean;
     name: string;
-    value: number;
     defaultValue: number;
     max: number;
-    readOnly: boolean;
     allowHalf: boolean;
+    itemLabel: (value: number, max: number) => string;
+    allowClear: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/rating/Rating.vue.d.ts

@@ -1,27 +1,8 @@
+import { type SkdxRatingValueChangeDetail } from './context.js';
 /**
- * The Vue implementation of the shared Rating contract (see
- * `@skdx/shared`'s `ratingContract`). Renders `role="radiogroup"` and
- * drives roving-tabindex keyboard navigation (horizontal, no wrap) across
- * `SkdxRatingItem` children, mirroring `packages/vue/src/tabs/TabsList.vue`'s
- * inline keydown handler.
- *
- * The hover preview is display-only: it drives `data-highlighted`/`data-half`
- * and the `hover-value-change` emit, and never touches the committed `value` —
- * the same preview/commit split as `SkdxSlider`, where dragging paints the
- * track but only pointer-up writes the value.
- *
- * With `allowHalf` the root becomes a `role="slider"` instead: half-star
- * values cannot be told truthfully by a set of whole-star radios, so the root
- * takes the tab stop and reports `aria-valuenow`, handles the arrow keys
- * itself (stepping by `0.5`) rather than roving focus, and the items become
- * purely visual.
- *
- * With a `name`, one visually-hidden native input submits the committed value
- * as `String(value)` with the surrounding `<form>` — an unrated (`0`) rating
- * submits nothing, so `required` reports `valueMissing` — and
- * `checkValidity()`/`reportValidity()` — exposed on this root — delegate to it.
- * Resetting the form restores the value the rating was declared with, emitting
- * `value-change` so a controlled parent follows it.
+ * Rating control: role="radiogroup" with roving-tabindex (or slider with allowHalf).
+ * Hover preview is separate from committed value; name with aria-label.
+ * Supports form participation, validation, and controlled/uncontrolled usage.
  */
 type __VLS_Props = {
     /** Selected value, for controlled usage. Pair with `v-model:value` or `@value-change`. */
@@ -30,6 +11,31 @@ type __VLS_Props = {
     defaultValue?: number;
     /** Number of items to render, e.g. stars. */
     max?: number;
+    /**
+     * Names each `SkdxRatingItem`, applied as that item's `aria-label`.
+     *
+     * An item is a `role="radio"`, which takes its name from its content — and
+     * the content is a star icon, which contributes no text. Without a name the
+     * whole widget announces as five unnamed radios, so this is not decoration:
+     * it is the only thing that tells a screen-reader user which star they are
+     * on. Receives `max` as well as the item's own value because the name has
+     * to say what the score is out of.
+     *
+     * An `aria-label` written on an individual `SkdxRatingItem` wins over this,
+     * for the scale whose points have real names ("Poor", "Excellent").
+     * @default (value, max) => `${value} of ${max} stars`
+     */
+    itemLabel?: (value: number, max: number) => string;
+    /**
+     * Lets the committed value be cleared back to `0` by picking it again —
+     * clicking the checked item, or pressing Space on it. Off by default,
+     * where re-picking the current value is swallowed and emits nothing. Only
+     * the exact committed value clears: with `allowHalf`, clicking the leading
+     * half of a 3-star item at a value of 2.5 clears, and its trailing half
+     * sets 3.
+     * @default false
+     */
+    allowClear?: boolean;
     /**
      * Allow half-item values (`0.5`, `1`, `1.5`, …). Pointer input picks a half
      * from the leading half of an item's box (the trailing half under RTL);
@@ -39,8 +45,9 @@ type __VLS_Props = {
      * This changes the widget's ARIA, deliberately: a set of whole-star
      * `role="radio"` items cannot say "2.5" truthfully, so the root becomes a
      * `role="slider"` reporting `aria-valuenow`/`aria-valuetext`, takes the
-     * single tab stop, and the items become `aria-hidden` visuals. Give the
-     * root an accessible name (`aria-label`) either way.
+     * single tab stop, and the items become non-focusable
+     * `role="presentation"` visuals. Give the root an accessible name
+     * (`aria-label`) either way.
      */
     allowHalf?: boolean;
     /** Disables every item, blocking all interaction. */
@@ -60,33 +67,53 @@ type __VLS_Props = {
      * @default false
      */
     required?: boolean;
+    /**
+     * Id of the `<form>` that owns this rating, for a rating rendered outside
+     * it. Set on the hidden input, and used to resolve the form whose `reset`
+     * restores the initial rating.
+     * @default undefined — the rating belongs to its nearest ancestor `<form>`, if any.
+     */
+    form?: string;
 };
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+type __VLS_Slots = {
+    /** Full manual composition — one Item per position. */
+    default?(): unknown;
+    /** The derived Items' content — a star icon, shared by every position. */
+    icon?(): unknown;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     /** Reports whether the hidden form input satisfies its constraints. `true` without a `name`. */
     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 hidden input carrying the rating, exactly like
+     * `HTMLInputElement.setCustomValidity()`: a non-empty message makes it
+     * invalid (`customError`), `''` clears it. Dropped without a `name`, matching
+     * the reads above.
+     */
+    setCustomValidity: (message: string) => void | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: number) => any;
-    "value-change": (value: number) => any;
+    "value-change": (detail: SkdxRatingValueChangeDetail) => any;
     "hover-value-change": (value: number | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:value"?: ((value: number) => any) | undefined;
-    "onValue-change"?: ((value: number) => any) | undefined;
+    "onValue-change"?: ((detail: SkdxRatingValueChangeDetail) => any) | undefined;
     "onHover-value-change"?: ((value: number | null) => any) | undefined;
 }>, {
+    form: string;
     disabled: boolean;
+    value: number;
+    readOnly: boolean;
     required: boolean;
     name: string;
-    value: number;
     defaultValue: number;
     max: number;
-    readOnly: boolean;
     allowHalf: boolean;
+    itemLabel: (value: number, max: number) => string;
+    allowClear: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/rating/Rating.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const H=require("../utils/useFormReset.cjs"),y=require("../utils/direction.cjs"),R=require("../utils/clamp.cjs"),B=require("./context.cjs");let a=require("vue");var E=["aria-disabled","aria-readonly","data-disabled","data-readonly"],O=["name","^value","required","disabled"],C=(0,a.defineComponent)({__name:"Rating",props:{value:{default:void 0},defaultValue:{default:0},max:{default:5},allowHalf:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},name:{default:void 0},required:{type:Boolean,default:!1}},emits:["update:value","value-change","hover-value-change"],setup(n,{expose:g,emit:w}){const l=n,s=w,c=(0,a.ref)(l.defaultValue),o=(0,a.computed)(()=>l.value===void 0?c.value:l.value),f=(0,a.ref)(null),m=(0,a.ref)(null);function v(e){e!==o.value&&(l.value===void 0&&(c.value=e),s("update:value",e),s("value-change",e))}function h(e){f.value!==e&&(f.value=e,s("hover-value-change",e))}(0,a.provide)(B.RATING_CONTEXT,{value:o,allowHalf:(0,a.computed)(()=>l.allowHalf),hoverValue:(0,a.computed)(()=>f.value),disabled:(0,a.computed)(()=>l.disabled),readOnly:(0,a.computed)(()=>l.readOnly),onValueChange:v,onHoverValueChange:h});const b=y.useDirection(),x=(0,a.computed)(()=>l.allowHalf?{role:"slider","aria-valuemin":0,"aria-valuemax":l.max,"aria-valuenow":o.value,"aria-valuetext":`${o.value} out of ${l.max}`,"aria-orientation":"horizontal",tabindex:l.disabled?-1:0}:{role:"radiogroup"});function V(e,t){let r=null;e==="ArrowRight"||e==="ArrowUp"?r=o.value+.5:e==="ArrowLeft"||e==="ArrowDown"?r=o.value-.5:e==="Home"?r=0:e==="End"&&(r=l.max),r!==null&&(t.preventDefault(),v(R.clamp(r,0,l.max)))}function q(e){if(l.disabled||l.readOnly)return;const t=y.directionalKey(e.key,e.currentTarget,b());if(l.allowHalf){V(t,e);return}const r=m.value;if(!r)return;const u=Array.from(r.querySelectorAll("[data-skdx-rating-item]")).filter(k=>!k.hasAttribute("disabled"));if(u.length===0)return;const p=u.indexOf(document.activeElement);let i;t==="ArrowRight"||t==="ArrowDown"?i=Math.min(p+1,u.length-1):t==="ArrowLeft"||t==="ArrowUp"?i=Math.max(p-1,0):t==="Home"?i=0:t==="End"&&(i=u.length-1),i!==void 0&&(e.preventDefault(),u[i]?.focus())}const d=(0,a.ref)(null),A=l.value??l.defaultValue;return H.useFormReset(()=>d.value,()=>v(A)),g({checkValidity:()=>d.value?.checkValidity()??!0,reportValidity:()=>d.value?.reportValidity()??!0}),(e,t)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",(0,a.mergeProps)({class:"skdx-rating","data-part":"root","data-skdx-component":"rating",ref_key:"rootRef",ref:m},x.value,{"aria-disabled":n.disabled||void 0,"aria-readonly":n.readOnly||void 0,"data-disabled":n.disabled?"":void 0,"data-readonly":n.readOnly?"":void 0,onKeydown:q,onPointerleave:t[0]||(t[0]=r=>h(null))}),[(0,a.renderSlot)(e.$slots,"default"),n.name?((0,a.openBlock)(),(0,a.createElementBlock)("input",{key:0,ref_key:"hiddenEl",ref:d,type:"text","aria-hidden":"true",tabindex:"-1",name:n.name,"^value":o.value>0?String(o.value):"",required:n.required,disabled:n.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,O)):(0,a.createCommentVNode)("",!0)],16,E))}});exports.default=C;
+const C=require("../utils/useFormReset.cjs"),g=require("../utils/direction.cjs"),R=require("../utils/clamp.cjs"),B=require("./context.cjs"),H=require("./RatingAnatomy.vue.cjs");let a=require("vue");var E=["aria-disabled","aria-readonly","data-disabled","data-readonly"],O=["name","form","^value","required","disabled"],$=(0,a.defineComponent)({__name:"Rating",props:{value:{default:void 0},defaultValue:{default:0},max:{default:5},itemLabel:{type:Function,default:(r,s)=>`${r} of ${s} stars`},allowClear:{type:Boolean,default:!1},allowHalf:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},name:{default:void 0},required:{type:Boolean,default:!1},form:{default:void 0}},emits:["update:value","value-change","hover-value-change"],setup(r,{expose:s,emit:w}){const l=r,f=w,m=(0,a.ref)(l.defaultValue),i=(0,a.computed)(()=>l.value===void 0?m.value:l.value),c=(0,a.ref)(null),y=(0,a.ref)(null);function v(e,t){if(e===i.value)return;const o=i.value===0?null:i.value;l.value===void 0&&(m.value=e),f("update:value",e),f("value-change",{value:e,previousValue:o,reason:t})}function h(e){c.value!==e&&(c.value=e,f("hover-value-change",e))}(0,a.provide)(B.RATING_CONTEXT,{value:i,max:(0,a.computed)(()=>l.max),itemLabel:(0,a.computed)(()=>l.itemLabel),allowClear:(0,a.computed)(()=>l.allowClear),allowHalf:(0,a.computed)(()=>l.allowHalf),hoverValue:(0,a.computed)(()=>c.value),disabled:(0,a.computed)(()=>l.disabled),readOnly:(0,a.computed)(()=>l.readOnly),onValueChange:v,onHoverValueChange:h});const b=g.useDirection(),x=(0,a.computed)(()=>l.allowHalf?{role:"slider","aria-valuemin":0,"aria-valuemax":l.max,"aria-valuenow":i.value,"aria-valuetext":`${i.value} out of ${l.max}`,"aria-orientation":"horizontal",tabindex:l.disabled?-1:0}:{role:"radiogroup"});function V(e,t){let o=null;e==="ArrowRight"||e==="ArrowUp"?o=i.value+.5:e==="ArrowLeft"||e==="ArrowDown"?o=i.value-.5:e==="Home"?o=0:e==="End"&&(o=l.max),o!==null&&(t.preventDefault(),v(R.clamp(o,0,l.max),"keyboard"))}function q(e){if(l.disabled||l.readOnly)return;const t=g.directionalKey(e.key,e.currentTarget,b());if(l.allowHalf){V(t,e);return}const o=y.value;if(!o)return;const d=Array.from(o.querySelectorAll("[data-skdx-rating-item]")).filter(k=>!k.hasAttribute("disabled"));if(d.length===0)return;const p=d.indexOf(document.activeElement);let n;t==="ArrowRight"||t==="ArrowDown"?n=Math.min(p+1,d.length-1):t==="ArrowLeft"||t==="ArrowUp"?n=Math.max(p-1,0):t==="Home"?n=0:t==="End"&&(n=d.length-1),n!==void 0&&(e.preventDefault(),d[n]?.focus())}const u=(0,a.ref)(null),A=l.value??l.defaultValue;return C.useFormReset(()=>u.value,()=>v(A,"programmatic")),s({checkValidity:()=>u.value?.checkValidity()??!0,reportValidity:()=>u.value?.reportValidity()??!0,setCustomValidity:e=>u.value?.setCustomValidity(e)}),(e,t)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",(0,a.mergeProps)({class:"skdx-rating","data-part":"root","data-skdx-component":"rating",ref_key:"rootRef",ref:y},x.value,{"aria-disabled":r.disabled||void 0,"aria-readonly":r.readOnly||void 0,"data-disabled":r.disabled?"":void 0,"data-readonly":r.readOnly?"":void 0,onKeydown:q,onPointerleave:t[0]||(t[0]=o=>h(null))}),[(0,a.renderSlot)(e.$slots,"default",{},()=>[(0,a.createVNode)(H.default,{max:r.max},(0,a.createSlots)({_:2},[e.$slots.icon?{name:"icon",fn:(0,a.withCtx)(()=>[(0,a.renderSlot)(e.$slots,"icon")]),key:"0"}:void 0]),1032,["max"])]),r.name?((0,a.openBlock)(),(0,a.createElementBlock)("input",{key:0,ref_key:"hiddenEl",ref:u,type:"text","aria-hidden":"true",tabindex:"-1",name:r.name,form:r.form,"^value":i.value>0?String(i.value):"",required:r.required,disabled:r.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,O)):(0,a.createCommentVNode)("",!0)],16,E))}});exports.default=$;

package/dist/rating/Rating.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{useFormReset as e}from"../utils/useFormReset.js";import{directionalKey as a,useDirection as l}from"../utils/direction.js";import{clamp as t}from"../utils/clamp.js";import{RATING_CONTEXT as r}from"./context.js";import{computed as o,createCommentVNode as n,createElementBlock as i,defineComponent as d,mergeProps as u,openBlock as s,provide as v,ref as f,renderSlot as m}from"vue";var p=["aria-disabled","aria-readonly","data-disabled","data-readonly"],c=["name","^value","required","disabled"],y=/* @__PURE__ */d({__name:"Rating",props:{value:{default:void 0},defaultValue:{default:0},max:{default:5},allowHalf:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},name:{default:void 0},required:{type:Boolean,default:!1}},emits:["update:value","value-change","hover-value-change"],setup(d,{expose:y,emit:h}){const g=d,x=h,b=f(g.defaultValue),w=o(()=>void 0===g.value?b.value:g.value),A=f(null),k=f(null);function V(e){e!==w.value&&(void 0===g.value&&(b.value=e),x("update:value",e),x("value-change",e))}function H(e){A.value!==e&&(A.value=e,x("hover-value-change",e))}v(r,{value:w,allowHalf:o(()=>g.allowHalf),hoverValue:o(()=>A.value),disabled:o(()=>g.disabled),readOnly:o(()=>g.readOnly),onValueChange:V,onHoverValueChange:H});const O=l(),R=o(()=>g.allowHalf?{role:"slider","aria-valuemin":0,"aria-valuemax":g.max,"aria-valuenow":w.value,"aria-valuetext":`${w.value} out of ${g.max}`,"aria-orientation":"horizontal",tabindex:g.disabled?-1:0}:{role:"radiogroup"});function B(e){if(g.disabled||g.readOnly)return;const l=a(e.key,e.currentTarget,O());if(g.allowHalf)return void function(e,a){let l=null;"ArrowRight"===e||"ArrowUp"===e?l=w.value+.5:"ArrowLeft"===e||"ArrowDown"===e?l=w.value-.5:"Home"===e?l=0:"End"===e&&(l=g.max),null!==l&&(a.preventDefault(),V(t(l,0,g.max)))}(l,e);const r=k.value;if(!r)return;const o=Array.from(r.querySelectorAll("[data-skdx-rating-item]")).filter(e=>!e.hasAttribute("disabled"));if(0===o.length)return;const n=o.indexOf(document.activeElement);let i;"ArrowRight"===l||"ArrowDown"===l?i=Math.min(n+1,o.length-1):"ArrowLeft"===l||"ArrowUp"===l?i=Math.max(n-1,0):"Home"===l?i=0:"End"===l&&(i=o.length-1),void 0!==i&&(e.preventDefault(),o[i]?.focus())}const E=f(null),q=g.value??g.defaultValue;return e(()=>E.value,()=>V(q)),y({checkValidity:()=>E.value?.checkValidity()??!0,reportValidity:()=>E.value?.reportValidity()??!0}),(e,a)=>(s(),i("div",u({class:"skdx-rating","data-part":"root","data-skdx-component":"rating",ref_key:"rootRef",ref:k},R.value,{"aria-disabled":d.disabled||void 0,"aria-readonly":d.readOnly||void 0,"data-disabled":d.disabled?"":void 0,"data-readonly":d.readOnly?"":void 0,onKeydown:B,onPointerleave:a[0]||(a[0]=e=>H(null))}),[m(e.$slots,"default"),d.name?(s(),i("input",{key:0,ref_key:"hiddenEl",ref:E,type:"text","aria-hidden":"true",tabindex:"-1",name:d.name,"^value":w.value>0?String(w.value):"",required:d.required,disabled:d.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,c)):n("",!0)],16,p))}});export{y as default};
+import{useFormReset as e}from"../utils/useFormReset.js";import{directionalKey as a,useDirection as l}from"../utils/direction.js";import{clamp as t}from"../utils/clamp.js";import{RATING_CONTEXT as o}from"./context.js";import r from"./RatingAnatomy.vue.js";import{computed as i,createCommentVNode as n,createElementBlock as d,createSlots as u,createVNode as s,defineComponent as v,mergeProps as m,openBlock as f,provide as c,ref as p,renderSlot as y,withCtx as h}from"vue";var x=["aria-disabled","aria-readonly","data-disabled","data-readonly"],b=["name","form","^value","required","disabled"],g=/* @__PURE__ */v({__name:"Rating",props:{value:{default:void 0},defaultValue:{default:0},max:{default:5},itemLabel:{type:Function,default:(e,a)=>`${e} of ${a} stars`},allowClear:{type:Boolean,default:!1},allowHalf:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},name:{default:void 0},required:{type:Boolean,default:!1},form:{default:void 0}},emits:["update:value","value-change","hover-value-change"],setup(v,{expose:g,emit:w}){const V=v,k=w,A=p(V.defaultValue),C=i(()=>void 0===V.value?A.value:V.value),H=p(null),O=p(null);function R(e,a){if(e===C.value)return;const l=0===C.value?null:C.value;void 0===V.value&&(A.value=e),k("update:value",e),k("value-change",{value:e,previousValue:l,reason:a})}function B(e){H.value!==e&&(H.value=e,k("hover-value-change",e))}c(o,{value:C,max:i(()=>V.max),itemLabel:i(()=>V.itemLabel),allowClear:i(()=>V.allowClear),allowHalf:i(()=>V.allowHalf),hoverValue:i(()=>H.value),disabled:i(()=>V.disabled),readOnly:i(()=>V.readOnly),onValueChange:R,onHoverValueChange:B});const $=l(),E=i(()=>V.allowHalf?{role:"slider","aria-valuemin":0,"aria-valuemax":V.max,"aria-valuenow":C.value,"aria-valuetext":`${C.value} out of ${V.max}`,"aria-orientation":"horizontal",tabindex:V.disabled?-1:0}:{role:"radiogroup"});function _(e){if(V.disabled||V.readOnly)return;const l=a(e.key,e.currentTarget,$());if(V.allowHalf)return void function(e,a){let l=null;"ArrowRight"===e||"ArrowUp"===e?l=C.value+.5:"ArrowLeft"===e||"ArrowDown"===e?l=C.value-.5:"Home"===e?l=0:"End"===e&&(l=V.max),null!==l&&(a.preventDefault(),R(t(l,0,V.max),"keyboard"))}(l,e);const o=O.value;if(!o)return;const r=Array.from(o.querySelectorAll("[data-skdx-rating-item]")).filter(e=>!e.hasAttribute("disabled"));if(0===r.length)return;const i=r.indexOf(document.activeElement);let n;"ArrowRight"===l||"ArrowDown"===l?n=Math.min(i+1,r.length-1):"ArrowLeft"===l||"ArrowUp"===l?n=Math.max(i-1,0):"Home"===l?n=0:"End"===l&&(n=r.length-1),void 0!==n&&(e.preventDefault(),r[n]?.focus())}const j=p(null),q=V.value??V.defaultValue;return e(()=>j.value,()=>R(q,"programmatic")),g({checkValidity:()=>j.value?.checkValidity()??!0,reportValidity:()=>j.value?.reportValidity()??!0,setCustomValidity:e=>j.value?.setCustomValidity(e)}),(e,a)=>(f(),d("div",m({class:"skdx-rating","data-part":"root","data-skdx-component":"rating",ref_key:"rootRef",ref:O},E.value,{"aria-disabled":v.disabled||void 0,"aria-readonly":v.readOnly||void 0,"data-disabled":v.disabled?"":void 0,"data-readonly":v.readOnly?"":void 0,onKeydown:_,onPointerleave:a[0]||(a[0]=e=>B(null))}),[y(e.$slots,"default",{},()=>[s(r,{max:v.max},u({_:2},[e.$slots.icon?{name:"icon",fn:h(()=>[y(e.$slots,"icon")]),key:"0"}:void 0]),1032,["max"])]),v.name?(f(),d("input",{key:0,ref_key:"hiddenEl",ref:j,type:"text","aria-hidden":"true",tabindex:"-1",name:v.name,form:v.form,"^value":C.value>0?String(C.value):"",required:v.required,disabled:v.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,b)):n("",!0)],16,x))}});export{g as default};

package/dist/rating/RatingAnatomy.vue.cjs

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

package/dist/rating/RatingAnatomy.vue.d.cts

@@ -0,0 +1,22 @@
+/**
+ * The anatomy `SkdxRating` draws when its default slot is empty: `max` Items,
+ * each with `icon` slot content or default star. Inlined SVG, not `@skdx/icons`,
+ * since framework packages can't depend on icons. React `RatingAnatomy.tsx` must stay synchronized.
+ * @internal
+ */
+type __VLS_Props = {
+    max?: number;
+};
+type __VLS_Slots = {
+    icon?(): unknown;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    max: number;
+}, {}, {}, {}, 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;
+    };
+};