@vielzeug/refine 2.2.5 → 2.4.0

package/dist/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":[],"sources":["../src/overlay/popover/popover.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/orbit';\nimport {\n  bind,\n  createStableId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onMounted,\n  prop,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport { type OverlayOpenChangeDetail, parseStringTriggers } from '../../core';\nimport { disablableBundle } from '../../shared';\nimport { reducedMotionMixin } from '../../styles';\nimport { useFloatingTrigger } from '../shared/use-floating-trigger';\nimport styles from './popover.css?inline';\n\nexport type PopoverTrigger = 'click' | 'focus' | 'hover';\n\nconst PANEL_OFFSET = 8;\nconst VALID_TRIGGERS = new Set<PopoverTrigger>(['click', 'focus', 'hover']);\nconst DEFAULT_POPOVER_TRIGGERS: PopoverTrigger[] = ['click'];\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n  value == null ? undefined : value === '' || value === 'true';\n\nconst normalizeTriggers = (value: unknown): PopoverTrigger[] =>\n  parseStringTriggers(String(value ?? ''), VALID_TRIGGERS, DEFAULT_POPOVER_TRIGGERS);\n\nexport type OrePopoverEvents = {\n  'open-change': OverlayOpenChangeDetail;\n};\n\n/** Popover component properties */\nexport type OrePopoverProps = {\n  /** Initial uncontrolled open state. Ignored when `open` is set. */\n  'default-open'?: boolean;\n  /** Disable the popover */\n  disabled?: boolean;\n  /** Accessible label for the panel */\n  label?: string;\n  /** Gap between trigger and panel in px */\n  offset?: number;\n  /** Controlled open state */\n  open?: boolean;\n  /** Preferred placement relative to the trigger */\n  placement?: Placement;\n  /** Which trigger(s) open/close the popover */\n  trigger?: string;\n};\n\n/**\n * A floating panel anchored to a trigger element.\n *\n * @element ore-popover\n * @attr {string} placement - Preferred placement (default: 'bottom')\n * @attr {string} trigger - 'click' | 'hover' | 'focus' (default: 'click')\n * @attr {boolean} open - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {number} offset - Gap in px (default: 8)\n * @attr {boolean} disabled - Disables the popover\n * @attr {string} label - aria-label on the panel\n * @fires open-change - When the panel state changes. detail: { open, reason }\n * @slot - The trigger element\n * @slot content - Panel content\n * @part panel - Panel container.\n *\n * @example\n * ```html\n * <ore-popover placement=\"bottom\" trigger=\"click\">\n *   <ore-button>Open info</ore-button>\n *   <div slot=\"content\">\n *     <p>Popover body content goes here.</p>\n *   </div>\n * </ore-popover>\n * ```\n */\nexport const POPOVER_TAG = 'ore-popover' as const;\ndefine<OrePopoverProps>(POPOVER_TAG, {\n  props: {\n    ...disablableBundle,\n    'default-open': prop.bool(false),\n    label: prop.string(),\n    offset: prop.number(PANEL_OFFSET),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n    placement: prop.oneOf(\n      [\n        'bottom',\n        'bottom-end',\n        'bottom-start',\n        'left',\n        'left-end',\n        'left-start',\n        'right',\n        'right-end',\n        'right-start',\n        'top',\n        'top-end',\n        'top-start',\n      ] as const,\n      'bottom',\n    ),\n    trigger: prop.string('click'),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OrePopoverEvents>();\n    const slots = useSlots();\n\n    const shadowRoot = el.shadowRoot;\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const panelId = createStableId('popover');\n    const triggers = computed<PopoverTrigger[]>(() => normalizeTriggers(props.trigger.value));\n    let panelEl: HTMLElement | null = null;\n\n    const floating = useFloatingTrigger({\n      bindTriggerAria: (triggerEl) =>\n        bind(\n          {\n            aria: {\n              controls: () => panelId,\n              disabled: () => String(isDisabled.value),\n              expanded: () => String(floating.visible.value),\n              haspopup: 'dialog',\n            },\n          },\n          { target: triggerEl },\n        ),\n      defaultOpen: props['default-open'],\n      disabled: isDisabled,\n      getHost: () => el,\n      getPanel: () => panelEl,\n      offset: props.offset,\n      onCleanup,\n      onClose: (reason) => emit('open-change', { open: false, reason }),\n      onOpen: (reason) => emit('open-change', { open: true, reason }),\n      openProp: props.open as typeof props.open & { value: boolean | undefined },\n      placement: computed(() => props.placement.value as Placement),\n      slot: () => shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])') ?? null,\n      slotElements: slots.elements(),\n      triggers,\n    });\n\n    onMounted(() => floating.mount());\n\n    return html`\n      <slot></slot>\n      <div\n        class=\"panel\"\n        part=\"panel\"\n        id=\"${panelId}\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n        popover=\"manual\"\n        aria-label=\"${props.label}\"\n        aria-hidden=\"${() => String(!floating.visible.value)}\"\n        ref=${(ref: HTMLElement) => {\n          panelEl = ref;\n        }}>\n        <slot name=\"content\"></slot>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, styles],\n});\n"],"mappings":";;;;;;;;AAuBA,IAAM,IAAe,GACf,oBAAiB,IAAI,IAAoB;CAAC;CAAS;CAAS;AAAO,CAAC,GACpE,IAA6C,CAAC,OAAO,GAErD,KAAqB,MACzB,KAAS,OAAO,KAAA,IAAY,MAAU,MAAM,MAAU,QAElD,KAAqB,MACzB,EAAoB,OAAO,KAAS,EAAE,GAAG,GAAgB,CAAwB,GAkDtE,IAAc;AAC3B,EAAwB,GAAa;CACnC,OAAO;EACL,GAAG;EACH,gBAAgB,EAAK,KAAK,EAAK;EAC/B,OAAO,EAAK,OAAO;EACnB,QAAQ,EAAK,OAAO,CAAY;EAChC,MAAM;GAAE,SAAS,KAAA;GAAkC,OAAO;EAAkB;EAC5E,WAAW,EAAK,MACd;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,GACA,QACF;EACA,SAAS,EAAK,OAAO,OAAO;CAC9B;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAA0B,GACjC,IAAQ,EAAS,GAEjB,IAAa,EAAG,YAChB,IAAa,QAAe,EAAQ,EAAM,SAAS,KAAM,GACzD,IAAU,EAAe,SAAS,GAClC,IAAW,QAAiC,EAAkB,EAAM,QAAQ,KAAK,CAAC,GACpF,IAA8B,MAE5B,IAAW,EAAmB;GAClC,kBAAkB,MAChB,EACE,EACE,MAAM;IACJ,gBAAgB;IAChB,gBAAgB,OAAO,EAAW,KAAK;IACvC,gBAAgB,OAAO,EAAS,QAAQ,KAAK;IAC7C,UAAU;GACZ,EACF,GACA,EAAE,QAAQ,EAAU,CACtB;GACF,aAAa,EAAM;GACnB,UAAU;GACV,eAAe;GACf,gBAAgB;GAChB,QAAQ,EAAM;GACd;GACA,UAAU,MAAW,EAAK,eAAe;IAAE,MAAM;IAAO;GAAO,CAAC;GAChE,SAAS,MAAW,EAAK,eAAe;IAAE,MAAM;IAAM;GAAO,CAAC;GAC9D,UAAU,EAAM;GAChB,WAAW,QAAe,EAAM,UAAU,KAAkB;GAC5D,YAAY,GAAY,cAA+B,kBAAkB,KAAK;GAC9E,cAAc,EAAM,SAAS;GAC7B;EACF,CAAC;EAID,OAFA,QAAgB,EAAS,MAAM,CAAC,GAEzB,CAAI;;;;;cAKD,EAAQ;;;;sBAIA,EAAM,MAAM;6BACL,OAAO,CAAC,EAAS,QAAQ,KAAK,EAAE;eAC9C,MAAqB;GAC1B,IAAU;EACZ,EAAE;;;;CAIR;CACA,QAAQ,CAAC,GAAoB,CAAM;AACrC,CAAC"}
+{"version":3,"file":"popover.js","names":[],"sources":["../src/overlay/popover/popover.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/orbit';\nimport {\n  bind,\n  createStableId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onMounted,\n  prop,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport { type OverlayOpenChangeDetail, parseStringTriggers } from '../../core';\nimport { disablableBundle } from '../../shared';\nimport { reducedMotionMixin } from '../../styles';\nimport { useFloatingTrigger } from '../shared/use-floating-trigger';\nimport styles from './popover.css?inline';\n\nexport type PopoverTrigger = 'click' | 'focus' | 'hover';\n\nconst PANEL_OFFSET = 8;\nconst VALID_TRIGGERS = new Set<PopoverTrigger>(['click', 'focus', 'hover']);\nconst DEFAULT_POPOVER_TRIGGERS: PopoverTrigger[] = ['click'];\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n  value == null ? undefined : value === '' || value === 'true';\n\nconst normalizeTriggers = (value: unknown): PopoverTrigger[] =>\n  parseStringTriggers(String(value ?? ''), VALID_TRIGGERS, DEFAULT_POPOVER_TRIGGERS);\n\nexport type OrePopoverEvents = {\n  'open-change': OverlayOpenChangeDetail;\n};\n\n/** Popover component properties */\nexport type OrePopoverProps = {\n  /** Initial uncontrolled open state. Ignored when `open` is set. */\n  'default-open'?: boolean;\n  /** Disable the popover */\n  disabled?: boolean;\n  /** Accessible label for the panel */\n  label?: string;\n  /** Gap between trigger and panel in px */\n  offset?: number;\n  /** Controlled open state */\n  open?: boolean;\n  /** Preferred placement relative to the trigger */\n  placement?: Placement;\n  /** Which trigger(s) open/close the popover */\n  trigger?: string;\n};\n\n/**\n * A floating panel anchored to a trigger element.\n *\n * @element ore-popover\n * @attr {string} placement - Preferred placement (default: 'bottom')\n * @attr {string} trigger - 'click' | 'hover' | 'focus' (default: 'click')\n * @attr {boolean} open - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {number} offset - Gap in px (default: 8)\n * @attr {boolean} disabled - Disables the popover\n * @attr {string} label - aria-label on the panel\n * @fires open-change - When the panel state changes. detail: { open, reason }\n * @slot - The trigger element\n * @slot content - Panel content\n * @cssprop --popover-overflow - Panel overflow behavior (default: auto)\n * @part panel - Panel container.\n *\n * @example\n * ```html\n * <ore-popover placement=\"bottom\" trigger=\"click\">\n *   <ore-button>Open info</ore-button>\n *   <div slot=\"content\">\n *     <p>Popover body content goes here.</p>\n *   </div>\n * </ore-popover>\n * ```\n */\nexport const POPOVER_TAG = 'ore-popover' as const;\ndefine<OrePopoverProps>(POPOVER_TAG, {\n  props: {\n    ...disablableBundle,\n    'default-open': prop.bool(false),\n    label: prop.string(),\n    offset: prop.number(PANEL_OFFSET),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n    placement: prop.oneOf(\n      [\n        'bottom',\n        'bottom-end',\n        'bottom-start',\n        'left',\n        'left-end',\n        'left-start',\n        'right',\n        'right-end',\n        'right-start',\n        'top',\n        'top-end',\n        'top-start',\n      ] as const,\n      'bottom',\n    ),\n    trigger: prop.string('click'),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OrePopoverEvents>();\n    const slots = useSlots();\n\n    const shadowRoot = el.shadowRoot;\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const panelId = createStableId('popover');\n    const triggers = computed<PopoverTrigger[]>(() => normalizeTriggers(props.trigger.value));\n    let panelEl: HTMLElement | null = null;\n\n    const floating = useFloatingTrigger({\n      bindTriggerAria: (triggerEl) =>\n        bind(\n          {\n            aria: {\n              controls: () => panelId,\n              disabled: () => String(isDisabled.value),\n              expanded: () => String(floating.visible.value),\n              haspopup: 'dialog',\n            },\n          },\n          { target: triggerEl },\n        ),\n      defaultOpen: props['default-open'],\n      disabled: isDisabled,\n      getHost: () => el,\n      getPanel: () => panelEl,\n      offset: props.offset,\n      onCleanup,\n      onClose: (reason) => emit('open-change', { open: false, reason }),\n      onOpen: (reason) => emit('open-change', { open: true, reason }),\n      openProp: props.open as typeof props.open & { value: boolean | undefined },\n      placement: computed(() => props.placement.value as Placement),\n      slot: () => shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])') ?? null,\n      slotElements: slots.elements(),\n      triggers,\n    });\n\n    onMounted(() => floating.mount());\n\n    return html`\n      <slot></slot>\n      <div\n        class=\"panel\"\n        part=\"panel\"\n        id=\"${panelId}\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n        popover=\"manual\"\n        aria-label=\"${props.label}\"\n        aria-hidden=\"${() => String(!floating.visible.value)}\"\n        ref=${(ref: HTMLElement) => {\n          panelEl = ref;\n        }}>\n        <slot name=\"content\"></slot>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, styles],\n});\n"],"mappings":";;;;;;;;AAuBA,IAAM,IAAe,GACf,oBAAiB,IAAI,IAAoB;CAAC;CAAS;CAAS;AAAO,CAAC,GACpE,IAA6C,CAAC,OAAO,GAErD,KAAqB,MACzB,KAAS,OAAO,KAAA,IAAY,MAAU,MAAM,MAAU,QAElD,KAAqB,MACzB,EAAoB,OAAO,KAAS,EAAE,GAAG,GAAgB,CAAwB,GAmDtE,IAAc;AAC3B,EAAwB,GAAa;CACnC,OAAO;EACL,GAAG;EACH,gBAAgB,EAAK,KAAK,EAAK;EAC/B,OAAO,EAAK,OAAO;EACnB,QAAQ,EAAK,OAAO,CAAY;EAChC,MAAM;GAAE,SAAS,KAAA;GAAkC,OAAO;EAAkB;EAC5E,WAAW,EAAK,MACd;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,GACA,QACF;EACA,SAAS,EAAK,OAAO,OAAO;CAC9B;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAA0B,GACjC,IAAQ,EAAS,GAEjB,IAAa,EAAG,YAChB,IAAa,QAAe,EAAQ,EAAM,SAAS,KAAM,GACzD,IAAU,EAAe,SAAS,GAClC,IAAW,QAAiC,EAAkB,EAAM,QAAQ,KAAK,CAAC,GACpF,IAA8B,MAE5B,IAAW,EAAmB;GAClC,kBAAkB,MAChB,EACE,EACE,MAAM;IACJ,gBAAgB;IAChB,gBAAgB,OAAO,EAAW,KAAK;IACvC,gBAAgB,OAAO,EAAS,QAAQ,KAAK;IAC7C,UAAU;GACZ,EACF,GACA,EAAE,QAAQ,EAAU,CACtB;GACF,aAAa,EAAM;GACnB,UAAU;GACV,eAAe;GACf,gBAAgB;GAChB,QAAQ,EAAM;GACd;GACA,UAAU,MAAW,EAAK,eAAe;IAAE,MAAM;IAAO;GAAO,CAAC;GAChE,SAAS,MAAW,EAAK,eAAe;IAAE,MAAM;IAAM;GAAO,CAAC;GAC9D,UAAU,EAAM;GAChB,WAAW,QAAe,EAAM,UAAU,KAAkB;GAC5D,YAAY,GAAY,cAA+B,kBAAkB,KAAK;GAC9E,cAAc,EAAM,SAAS;GAC7B;EACF,CAAC;EAID,OAFA,QAAgB,EAAS,MAAM,CAAC,GAEzB,CAAI;;;;;cAKD,EAAQ;;;;sBAIA,EAAM,MAAM;6BACL,OAAO,CAAC,EAAS,QAAQ,KAAK,EAAE;eAC9C,MAAqB;GAC1B,IAAU;EACZ,EAAE;;;;CAIR;CACA,QAAQ,CAAC,GAAoB,CAAM;AACrC,CAAC"}

package/dist/radio.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./core/checkable.cjs"),a=require("./core/ore.cjs"),o=require("./core/direction.cjs"),s=require("./core/nav.cjs"),c=require("./shared/prop-bundles.cjs"),l=require("./shared/size-presets.cjs"),u=require("./inputs/shared/templates.cjs"),d=require("./inputs/shared/native-field-event.cjs"),f=require("./radio-group.cjs"),p=require("./inputs/radio/radio.css.cjs");let m=require("@vielzeug/ore"),h=require("@vielzeug/ripple");var g=`ore-radio`;(0,m.define)(g,{formAssociated:!0,props:{...c.themableBundle,...c.sizableBundle,...c.disablableBundle,checked:m.prop.bool(!1),error:m.prop.string(),helper:m.prop.string(),name:m.prop.string(),value:m.prop.string()},setup(e){let t=(0,m.getHost)(),n=(0,m.inject)(f.RADIO_GROUP_CTX),r=(0,h.computed)(()=>n?.name.value||e.name.value||``),c=(0,h.computed)(()=>n?.size.value??e.size.value),l=(0,h.computed)(()=>n?.color.value??e.color.value),p=(0,h.computed)(()=>n?n.value.value===e.value.value:!!e.checked.value),g=()=>{let e=r.value;return e?Array.from(document.querySelectorAll(`ore-radio[name="${e}"]`)).filter(e=>!e.hasAttribute(`disabled`)):[]},_=(e,t)=>{if(n){n.select(e.getAttribute(`value`)??``,t);return}e.click()},v=s.createListControl({direction:()=>o.elementDirection(t),getItems:()=>g(),loop:!0,onNavigate:({event:e,item:t})=>{t.focus(),_(t,e)},orientation:`both`,signal:a.lifecycleSignal(m.onCleanup)}),y=t=>{if(!b.checked.value){if(n){n.select(e.value.value??``,t);return}b.toggle(t??new Event(`change`))}},b=i.createCheckable({checked:p,disabled:(0,h.computed)(()=>e.disabled.value||!!n?.disabled.value),error:e.error,helper:e.helper,onToggle:e=>{d.setFieldChecked(t,e.checked),d.dispatchNativeFieldEvent(t,`input`),d.dispatchNativeFieldEvent(t,`change`)},prefix:`radio`,signal:a.lifecycleSignal(m.onCleanup),value:e.value});b.attachFormField((0,m.useField)({disabled:b.disabled,toFormValue:e=>e,value:b.checkableFormValue}));let{assistiveId:x,checked:S,disabled:C,errorText:w,helperText:T,labelId:E,toggle:D}=b;return d.defineFieldChecked(t,()=>S.value,e=>{S.value=e}),(0,m.bind)({attr:{ariaChecked:()=>S.value?`true`:`false`,ariaDescribedby:()=>w.value||T.value?x:null,ariaDisabled:()=>C.value?`true`:null,ariaInvalid:()=>w.value?`true`:null,ariaLabelledby:E,checked:S,color:l,disabled:()=>C.value?!0:void 0,name:()=>r.value||void 0,role:`radio`,size:c,tabindex:()=>{if(!C.value)return S.value?0:-1}},class:()=>({"is-checked":S.value,"is-disabled":C.value}),on:{click:i=>{if(!C.value)if(n)n.select(e.value.value??``,i);else{if(!r.value)return;if(!S.value){let n=e.name.value;document.querySelectorAll(`ore-radio[name="${n}"]`).forEach(e=>{e!==t&&e.removeAttribute(`checked`)}),D(i)}}},keydown:e=>{if(e.key===` `||e.key===`Enter`){e.preventDefault(),y(e);return}let n=g();if(n.length===0)return;let r=n.indexOf(t);r!==-1&&(v.set(r),v.handleKeydown(e))}}}),m.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./core/checkable.cjs"),a=require("./core/ore.cjs"),o=require("./core/direction.cjs"),s=require("./core/nav.cjs"),c=require("./shared/prop-bundles.cjs"),l=require("./shared/size-presets.cjs"),u=require("./inputs/shared/templates.cjs"),d=require("./inputs/shared/native-field-event.cjs"),f=require("./radio-group.cjs"),p=require("./inputs/radio/radio.css.cjs");let m=require("@vielzeug/ore"),h=require("@vielzeug/ripple");var g=`ore-radio`;(0,m.define)(g,{formAssociated:!0,props:{...c.themableBundle,...c.sizableBundle,...c.disablableBundle,checked:m.prop.bool(!1),error:m.prop.string(),helper:m.prop.string(),name:m.prop.string(),value:m.prop.string()},setup(e){let t=(0,m.getHost)(),n=(0,m.inject)(f.RADIO_GROUP_CTX),r=(0,h.computed)(()=>n?.name.value||e.name.value||``),c=(0,h.computed)(()=>n?.size.value??e.size.value),l=(0,h.computed)(()=>n?.color.value??e.color.value),p=(0,h.computed)(()=>n?n.value.value===e.value.value:!!e.checked.value),g=()=>{let e=r.value;return e?Array.from(document.querySelectorAll(`ore-radio[name="${e}"]`)).filter(e=>!e.hasAttribute(`disabled`)):[]},_=(e,t)=>{if(n){n.select(e.getAttribute(`value`)??``,t);return}e.click()},v=s.createListControl({direction:()=>o.elementDirection(t),getItems:()=>g(),loop:!0,onNavigate:({event:e,item:t})=>{t.focus(),_(t,e)},orientation:`both`,signal:a.lifecycleSignal(m.onCleanup)}),y=t=>{if(!b.checked.value){if(n){n.select(e.value.value??``,t);return}b.toggle(t??new Event(`change`))}},b=i.createCheckable({checked:p,disabled:(0,h.computed)(()=>e.disabled.value||!!n?.disabled.value),error:e.error,helper:e.helper,onToggle:e=>{d.setFieldChecked(t,e.checked),d.dispatchNativeFieldEvent(t,`input`),d.dispatchNativeFieldEvent(t,`change`)},prefix:`radio`,signal:a.lifecycleSignal(m.onCleanup),value:e.value});b.attachFormField((0,m.useField)({disabled:b.disabled,toFormValue:e=>e,value:b.checkableFormValue}));let{assistiveId:x,checked:S,disabled:C,errorText:w,helperText:T,labelId:E,toggle:D}=b;return d.defineFieldChecked(t,()=>S.value,e=>{S.value=e}),(0,m.bind)({attr:{ariaChecked:()=>S.value?`true`:`false`,ariaDescribedby:()=>w.value||T.value?x:null,ariaDisabled:()=>C.value?`true`:null,ariaInvalid:()=>w.value?`true`:null,ariaLabelledby:E,checked:S,color:l,disabled:()=>C.value?!0:void 0,name:()=>r.value||void 0,role:`radio`,size:c,tabindex:()=>{if(!C.value)return S.value?0:-1}},class:()=>({"is-checked":S.value,"is-disabled":C.value}),on:{click:i=>{if(!C.value){if(n)n.select(e.value.value??``,i);else{if(!r.value)return;if(!S.value){let n=e.name.value;document.querySelectorAll(`ore-radio[name="${n}"]`).forEach(e=>{e!==t&&e.removeAttribute(`checked`)}),D(i)}}}},keydown:e=>{if(e.key===` `||e.key===`Enter`){e.preventDefault(),y(e);return}let n=g();if(n.length===0)return;let r=n.indexOf(t);r!==-1&&(v.set(r),v.handleKeydown(e))}}}),m.html`
       <div class="radio-wrapper" part="radio">
         <div class="circle" part="circle">
           <div class="dot" part="dot"></div>

package/dist/radio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio.cjs","names":[],"sources":["../src/inputs/radio/radio.ts"],"sourcesContent":["import { bind, define, getHost, html, inject, onCleanup, prop, useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createCheckable, createListControl, elementDirection, lifecycleSignal } from '../../core';\nimport { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\nimport { RADIO_GROUP_CTX } from '../radio-group/radio-group';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './radio.css?inline';\n\n/** Radio component properties */\n\nexport type OreRadioEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreRadioProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the radio */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A customizable radio button component for mutually exclusive selections.\n *\n * @element ore-radio\n *\n * @attr {boolean} checked - Checked state\n * @attr {boolean} disabled - Disable radio interaction\n * @attr {string} value - Field value (required for radio groups)\n * @attr {string} name - Form field name (required for radio groups)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Radio size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the radio\n *\n * @fires input - Emitted when radio is selected.\n * @fires change - Emitted when radio is selected.\n *\n * @slot - Radio button label text\n *\n * @cssprop --radio-size - Control size (width and height)\n * @cssprop --radio-bg - Unchecked background color\n * @cssprop --radio-border-color - Unchecked border color\n * @cssprop --radio-checked-bg - Selected indicator background color\n * @cssprop --radio-color - Selected indicator dot color\n * @cssprop --radio-font-size - Label font size\n * @part radio - The radio wrapper element\n * @part circle - The visual radio circle\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-radio name=\"plan\" value=\"free\">Free</ore-radio>\n * <ore-radio name=\"plan\" value=\"pro\" checked color=\"primary\">Pro</ore-radio>\n * <ore-radio name=\"plan\" value=\"enterprise\" disabled>Enterprise</ore-radio>\n * ```\n */\nexport const RADIO_TAG = 'ore-radio' as const;\ndefine<OreRadioProps>(RADIO_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const groupCtx = inject(RADIO_GROUP_CTX);\n    const effectiveName = computed(() => groupCtx?.name.value || props.name.value || '');\n    const effectiveSize = computed(() => groupCtx?.size.value ?? props.size.value);\n    const effectiveColor = computed(() => groupCtx?.color.value ?? props.color.value);\n    const checkedFromState = computed(() => {\n      if (groupCtx) return groupCtx.value.value === props.value.value;\n\n      return Boolean(props.checked.value);\n    });\n\n    const getRadioGroup = (): HTMLElement[] => {\n      const radioName = effectiveName.value;\n\n      if (!radioName) return [];\n\n      return Array.from(document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`)).filter(\n        (r) => !r.hasAttribute('disabled'),\n      );\n    };\n\n    const selectRadio = (radio: HTMLElement, originalEvent?: Event): void => {\n      if (groupCtx) {\n        groupCtx.select(radio.getAttribute('value') ?? '', originalEvent);\n\n        return;\n      }\n\n      radio.click();\n    };\n\n    const listControl = createListControl({\n      direction: () => elementDirection(el),\n      getItems: () => getRadioGroup(),\n      // 'both' accepts every arrow key regardless of the group's visual layout (radio groups\n      // may render horizontally or vertically via CSS) — RTL mirroring of Left/Right still\n      // applies via `direction` since nav.ts's default keymap covers 'both' too.\n      loop: true,\n      onNavigate: ({ event, item }) => {\n        item.focus();\n        selectRadio(item, event);\n      },\n      orientation: 'both',\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    const activateSelf = (originalEvent?: Event): void => {\n      if (checkable.checked.value) return;\n\n      if (groupCtx) {\n        groupCtx.select(props.value.value ?? '', originalEvent);\n\n        return;\n      }\n\n      checkable.toggle(originalEvent ?? new Event('change'));\n    };\n\n    const checkable = createCheckable({\n      checked: checkedFromState,\n      disabled: computed(() => props.disabled.value || Boolean(groupCtx?.disabled.value)),\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        setFieldChecked(el, payload.checked);\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'radio',\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        toFormValue: (v) => v,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const { assistiveId, checked, disabled, errorText, helperText, labelId, toggle } = checkable;\n\n    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    bind({\n      attr: {\n        ariaChecked: () => (checked.value ? 'true' : 'false'),\n        ariaDescribedby: () => (errorText.value || helperText.value ? assistiveId : null),\n        ariaDisabled: () => (disabled.value ? 'true' : null),\n        ariaInvalid: () => (errorText.value ? 'true' : null),\n        ariaLabelledby: labelId,\n        checked,\n        color: effectiveColor,\n        disabled: () => (disabled.value ? true : undefined),\n        name: () => effectiveName.value || undefined,\n        role: 'radio',\n        size: effectiveSize,\n        tabindex: () => {\n          if (disabled.value) return undefined;\n\n          return checked.value ? 0 : -1;\n        },\n      },\n      class: () => ({\n        'is-checked': checked.value,\n        'is-disabled': disabled.value,\n      }),\n      on: {\n        click: (e: MouseEvent) => {\n          if (disabled.value) return;\n\n          if (groupCtx) {\n            groupCtx.select(props.value.value ?? '', e);\n          } else {\n            if (!effectiveName.value) return;\n\n            if (!checked.value) {\n              const radioName = props.name.value;\n              const allRadios = document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`);\n\n              allRadios.forEach((radio) => {\n                if (radio !== el) radio.removeAttribute('checked');\n              });\n\n              toggle(e);\n            }\n          }\n        },\n        keydown: (e: KeyboardEvent) => {\n          if (e.key === ' ' || e.key === 'Enter') {\n            e.preventDefault();\n            activateSelf(e);\n\n            return;\n          }\n\n          const radios = getRadioGroup();\n\n          if (radios.length === 0) return;\n\n          const selfIndex = radios.indexOf(el);\n\n          if (selfIndex === -1) return;\n\n          listControl.set(selfIndex);\n          listControl.handleKeydown(e);\n        },\n      },\n    });\n\n    return html`\n      <div class=\"radio-wrapper\" part=\"radio\">\n        <div class=\"circle\" part=\"circle\">\n          <div class=\"dot\" part=\"dot\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    coarsePointerMixin,\n    sizeVariantMixin(CONTROL_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":"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"}
+{"version":3,"file":"radio.cjs","names":[],"sources":["../src/inputs/radio/radio.ts"],"sourcesContent":["import { bind, define, getHost, html, inject, onCleanup, prop, useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createCheckable, createListControl, elementDirection, lifecycleSignal } from '../../core';\nimport { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\nimport { RADIO_GROUP_CTX } from '../radio-group/radio-group';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './radio.css?inline';\n\n/** Radio component properties */\n\nexport type OreRadioEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreRadioProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the radio */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A customizable radio button component for mutually exclusive selections.\n *\n * @element ore-radio\n *\n * @attr {boolean} checked - Checked state\n * @attr {boolean} disabled - Disable radio interaction\n * @attr {string} value - Field value (required for radio groups)\n * @attr {string} name - Form field name (required for radio groups)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Radio size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the radio\n *\n * @fires input - Emitted when radio is selected.\n * @fires change - Emitted when radio is selected.\n *\n * @slot - Radio button label text\n *\n * @cssprop --radio-size - Control size (width and height)\n * @cssprop --radio-bg - Unchecked background color\n * @cssprop --radio-border-color - Unchecked border color\n * @cssprop --radio-checked-bg - Selected indicator background color\n * @cssprop --radio-color - Selected indicator dot color\n * @cssprop --radio-font-size - Label font size\n * @part radio - The radio wrapper element\n * @part circle - The visual radio circle\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-radio name=\"plan\" value=\"free\">Free</ore-radio>\n * <ore-radio name=\"plan\" value=\"pro\" checked color=\"primary\">Pro</ore-radio>\n * <ore-radio name=\"plan\" value=\"enterprise\" disabled>Enterprise</ore-radio>\n * ```\n */\nexport const RADIO_TAG = 'ore-radio' as const;\ndefine<OreRadioProps>(RADIO_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const groupCtx = inject(RADIO_GROUP_CTX);\n    const effectiveName = computed(() => groupCtx?.name.value || props.name.value || '');\n    const effectiveSize = computed(() => groupCtx?.size.value ?? props.size.value);\n    const effectiveColor = computed(() => groupCtx?.color.value ?? props.color.value);\n    const checkedFromState = computed(() => {\n      if (groupCtx) return groupCtx.value.value === props.value.value;\n\n      return Boolean(props.checked.value);\n    });\n\n    const getRadioGroup = (): HTMLElement[] => {\n      const radioName = effectiveName.value;\n\n      if (!radioName) return [];\n\n      return Array.from(document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`)).filter(\n        (r) => !r.hasAttribute('disabled'),\n      );\n    };\n\n    const selectRadio = (radio: HTMLElement, originalEvent?: Event): void => {\n      if (groupCtx) {\n        groupCtx.select(radio.getAttribute('value') ?? '', originalEvent);\n\n        return;\n      }\n\n      radio.click();\n    };\n\n    const listControl = createListControl({\n      direction: () => elementDirection(el),\n      getItems: () => getRadioGroup(),\n      // 'both' accepts every arrow key regardless of the group's visual layout (radio groups\n      // may render horizontally or vertically via CSS) — RTL mirroring of Left/Right still\n      // applies via `direction` since nav.ts's default keymap covers 'both' too.\n      loop: true,\n      onNavigate: ({ event, item }) => {\n        item.focus();\n        selectRadio(item, event);\n      },\n      orientation: 'both',\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    const activateSelf = (originalEvent?: Event): void => {\n      if (checkable.checked.value) return;\n\n      if (groupCtx) {\n        groupCtx.select(props.value.value ?? '', originalEvent);\n\n        return;\n      }\n\n      checkable.toggle(originalEvent ?? new Event('change'));\n    };\n\n    const checkable = createCheckable({\n      checked: checkedFromState,\n      disabled: computed(() => props.disabled.value || Boolean(groupCtx?.disabled.value)),\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        setFieldChecked(el, payload.checked);\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'radio',\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        toFormValue: (v) => v,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const { assistiveId, checked, disabled, errorText, helperText, labelId, toggle } = checkable;\n\n    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    bind({\n      attr: {\n        ariaChecked: () => (checked.value ? 'true' : 'false'),\n        ariaDescribedby: () => (errorText.value || helperText.value ? assistiveId : null),\n        ariaDisabled: () => (disabled.value ? 'true' : null),\n        ariaInvalid: () => (errorText.value ? 'true' : null),\n        ariaLabelledby: labelId,\n        checked,\n        color: effectiveColor,\n        disabled: () => (disabled.value ? true : undefined),\n        name: () => effectiveName.value || undefined,\n        role: 'radio',\n        size: effectiveSize,\n        tabindex: () => {\n          if (disabled.value) return undefined;\n\n          return checked.value ? 0 : -1;\n        },\n      },\n      class: () => ({\n        'is-checked': checked.value,\n        'is-disabled': disabled.value,\n      }),\n      on: {\n        click: (e: MouseEvent) => {\n          if (disabled.value) return;\n\n          if (groupCtx) {\n            groupCtx.select(props.value.value ?? '', e);\n          } else {\n            if (!effectiveName.value) return;\n\n            if (!checked.value) {\n              const radioName = props.name.value;\n              const allRadios = document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`);\n\n              allRadios.forEach((radio) => {\n                if (radio !== el) radio.removeAttribute('checked');\n              });\n\n              toggle(e);\n            }\n          }\n        },\n        keydown: (e: KeyboardEvent) => {\n          if (e.key === ' ' || e.key === 'Enter') {\n            e.preventDefault();\n            activateSelf(e);\n\n            return;\n          }\n\n          const radios = getRadioGroup();\n\n          if (radios.length === 0) return;\n\n          const selfIndex = radios.indexOf(el);\n\n          if (selfIndex === -1) return;\n\n          listControl.set(selfIndex);\n          listControl.handleKeydown(e);\n        },\n      },\n    });\n\n    return html`\n      <div class=\"radio-wrapper\" part=\"radio\">\n        <div class=\"circle\" part=\"circle\">\n          <div class=\"dot\" part=\"dot\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    coarsePointerMixin,\n    sizeVariantMixin(CONTROL_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":"6qBA0EA,IAAa,EAAY,aACzB,EAAA,EAAA,OAAA,CAAsB,EAAW,CAC/B,eAAgB,GAChB,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,iBACH,QAAS,EAAA,KAAK,KAAK,EAAK,EACxB,MAAO,EAAA,KAAK,OAAO,EACnB,OAAQ,EAAA,KAAK,OAAO,EACpB,KAAM,EAAA,KAAK,OAAO,EAClB,MAAO,EAAA,KAAK,OAAO,CACrB,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EAEb,GAAA,EAAW,EAAA,OAAA,CAAO,EAAA,eAAe,EACjC,GAAA,EAAgB,EAAA,SAAA,KAAe,GAAU,KAAK,OAAS,EAAM,KAAK,OAAS,EAAE,EAC7E,GAAA,EAAgB,EAAA,SAAA,KAAe,GAAU,KAAK,OAAS,EAAM,KAAK,KAAK,EACvE,GAAA,EAAiB,EAAA,SAAA,KAAe,GAAU,MAAM,OAAS,EAAM,MAAM,KAAK,EAC1E,GAAA,EAAmB,EAAA,SAAA,KACnB,EAAiB,EAAS,MAAM,QAAU,EAAM,MAAM,MAEnD,EAAQ,EAAM,QAAQ,KAC9B,EAEK,MAAqC,CACzC,IAAM,EAAY,EAAc,MAIhC,OAFK,EAEE,MAAM,KAAK,SAAS,iBAA8B,mBAAmB,EAAU,GAAG,CAAC,CAAC,CAAC,OACzF,GAAM,CAAC,EAAE,aAAa,UAAU,CACnC,EAJuB,CAAC,CAK1B,EAEM,GAAe,EAAoB,IAAgC,CACvE,GAAI,EAAU,CACZ,EAAS,OAAO,EAAM,aAAa,OAAO,GAAK,GAAI,CAAa,EAEhE,MACF,CAEA,EAAM,MAAM,CACd,EAEM,EAAc,EAAA,kBAAkB,CACpC,cAAiB,EAAA,iBAAiB,CAAE,EACpC,aAAgB,EAAc,EAI9B,KAAM,GACN,YAAa,CAAE,QAAO,UAAW,CAC/B,EAAK,MAAM,EACX,EAAY,EAAM,CAAK,CACzB,EACA,YAAa,OACb,OAAQ,EAAA,gBAAgB,EAAA,SAAS,CACnC,CAAC,EAEK,EAAgB,GAAgC,CAChD,MAAU,QAAQ,MAEtB,IAAI,EAAU,CACZ,EAAS,OAAO,EAAM,MAAM,OAAS,GAAI,CAAa,EAEtD,MACF,CAEA,EAAU,OAAO,GAAiB,IAAI,MAAM,QAAQ,CAAC,CAFrD,CAGF,EAEM,EAAY,EAAA,gBAAgB,CAChC,QAAS,EACT,UAAA,EAAU,EAAA,SAAA,KAAe,EAAM,SAAS,OAAS,EAAQ,GAAU,SAAS,KAAM,EAClF,MAAO,EAAM,MACb,OAAQ,EAAM,OACd,SAAW,GAAY,CACrB,EAAA,gBAAgB,EAAI,EAAQ,OAAO,EACnC,EAAA,yBAAyB,EAAI,OAAO,EACpC,EAAA,yBAAyB,EAAI,QAAQ,CACvC,EACA,OAAQ,QACR,OAAQ,EAAA,gBAAgB,EAAA,SAAS,EACjC,MAAO,EAAM,KACf,CAAC,EAED,EAAU,iBAAA,EACR,EAAA,SAAA,CAAwB,CACtB,SAAU,EAAU,SACpB,YAAc,GAAM,EACpB,MAAO,EAAU,kBACnB,CAAC,CACH,EAEA,GAAM,CAAE,cAAa,UAAS,WAAU,YAAW,aAAY,UAAS,UAAW,EA4EnF,OA1EA,EAAA,mBACE,MACM,EAAQ,MACb,GAAU,CACT,EAAQ,MAAQ,CAClB,CACF,GAEA,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,gBAAoB,EAAQ,MAAQ,OAAS,QAC7C,oBAAwB,EAAU,OAAS,EAAW,MAAQ,EAAc,KAC5E,iBAAqB,EAAS,MAAQ,OAAS,KAC/C,gBAAoB,EAAU,MAAQ,OAAS,KAC/C,eAAgB,EAChB,UACA,MAAO,EACP,aAAiB,EAAS,MAAQ,GAAO,IAAA,GACzC,SAAY,EAAc,OAAS,IAAA,GACnC,KAAM,QACN,KAAM,EACN,aAAgB,CACV,MAAS,MAEb,OAAO,EAAQ,MAAQ,EAAI,EAC7B,CACF,EACA,WAAc,CACZ,aAAc,EAAQ,MACtB,cAAe,EAAS,KAC1B,GACA,GAAI,CACF,MAAQ,GAAkB,CACpB,MAAS,MAEb,IAAI,EACF,EAAS,OAAO,EAAM,MAAM,OAAS,GAAI,CAAC,MACrC,CACL,GAAI,CAAC,EAAc,MAAO,OAE1B,GAAI,CAAC,EAAQ,MAAO,CAClB,IAAM,EAAY,EAAM,KAAK,MAG7B,SAF2B,iBAA8B,mBAAmB,EAAU,GAEtF,CAAA,CAAU,QAAS,GAAU,CACvB,IAAU,GAAI,EAAM,gBAAgB,SAAS,CACnD,CAAC,EAED,EAAO,CAAC,CACV,CACF,EACF,EACA,QAAU,GAAqB,CAC7B,GAAI,EAAE,MAAQ,KAAO,EAAE,MAAQ,QAAS,CACtC,EAAE,eAAe,EACjB,EAAa,CAAC,EAEd,MACF,CAEA,IAAM,EAAS,EAAc,EAE7B,GAAI,EAAO,SAAW,EAAG,OAEzB,IAAM,EAAY,EAAO,QAAQ,CAAE,EAE/B,IAAc,KAElB,EAAY,IAAI,CAAS,EACzB,EAAY,cAAc,CAAC,EAC7B,CACF,CACF,CAAC,EAEM,EAAA,IAAI;;;;;;6CAM8B,EAAQ;QAC7C,EAAA,mBAAmB,EAAa,EAAW,CAAU,EAAE;KAE7D,EACA,OAAQ,CACN,EAAA,gBACA,EAAA,6BACA,EAAA,mBACA,EAAA,mBACA,EAAA,iBAAiB,EAAA,mBAAmB,EACpC,EAAA,OACF,CACF,CAAC"}

package/dist/radio.js

@@ -98,14 +98,16 @@ b(O, {
 			}),
 			on: {
 				click: (i) => {
-					if (!A.value) if (n) n.select(e.value.value ?? "", i);
-					else {
-						if (!r.value) return;
-						if (!k.value) {
-							let n = e.name.value;
-							document.querySelectorAll(`ore-radio[name="${n}"]`).forEach((e) => {
-								e !== t && e.removeAttribute("checked");
-							}), P(i);
+					if (!A.value) {
+						if (n) n.select(e.value.value ?? "", i);
+						else {
+							if (!r.value) return;
+							if (!k.value) {
+								let n = e.name.value;
+								document.querySelectorAll(`ore-radio[name="${n}"]`).forEach((e) => {
+									e !== t && e.removeAttribute("checked");
+								}), P(i);
+							}
 						}
 					}
 				},

package/dist/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","names":[],"sources":["../src/inputs/radio/radio.ts"],"sourcesContent":["import { bind, define, getHost, html, inject, onCleanup, prop, useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createCheckable, createListControl, elementDirection, lifecycleSignal } from '../../core';\nimport { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\nimport { RADIO_GROUP_CTX } from '../radio-group/radio-group';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './radio.css?inline';\n\n/** Radio component properties */\n\nexport type OreRadioEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreRadioProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the radio */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A customizable radio button component for mutually exclusive selections.\n *\n * @element ore-radio\n *\n * @attr {boolean} checked - Checked state\n * @attr {boolean} disabled - Disable radio interaction\n * @attr {string} value - Field value (required for radio groups)\n * @attr {string} name - Form field name (required for radio groups)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Radio size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the radio\n *\n * @fires input - Emitted when radio is selected.\n * @fires change - Emitted when radio is selected.\n *\n * @slot - Radio button label text\n *\n * @cssprop --radio-size - Control size (width and height)\n * @cssprop --radio-bg - Unchecked background color\n * @cssprop --radio-border-color - Unchecked border color\n * @cssprop --radio-checked-bg - Selected indicator background color\n * @cssprop --radio-color - Selected indicator dot color\n * @cssprop --radio-font-size - Label font size\n * @part radio - The radio wrapper element\n * @part circle - The visual radio circle\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-radio name=\"plan\" value=\"free\">Free</ore-radio>\n * <ore-radio name=\"plan\" value=\"pro\" checked color=\"primary\">Pro</ore-radio>\n * <ore-radio name=\"plan\" value=\"enterprise\" disabled>Enterprise</ore-radio>\n * ```\n */\nexport const RADIO_TAG = 'ore-radio' as const;\ndefine<OreRadioProps>(RADIO_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const groupCtx = inject(RADIO_GROUP_CTX);\n    const effectiveName = computed(() => groupCtx?.name.value || props.name.value || '');\n    const effectiveSize = computed(() => groupCtx?.size.value ?? props.size.value);\n    const effectiveColor = computed(() => groupCtx?.color.value ?? props.color.value);\n    const checkedFromState = computed(() => {\n      if (groupCtx) return groupCtx.value.value === props.value.value;\n\n      return Boolean(props.checked.value);\n    });\n\n    const getRadioGroup = (): HTMLElement[] => {\n      const radioName = effectiveName.value;\n\n      if (!radioName) return [];\n\n      return Array.from(document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`)).filter(\n        (r) => !r.hasAttribute('disabled'),\n      );\n    };\n\n    const selectRadio = (radio: HTMLElement, originalEvent?: Event): void => {\n      if (groupCtx) {\n        groupCtx.select(radio.getAttribute('value') ?? '', originalEvent);\n\n        return;\n      }\n\n      radio.click();\n    };\n\n    const listControl = createListControl({\n      direction: () => elementDirection(el),\n      getItems: () => getRadioGroup(),\n      // 'both' accepts every arrow key regardless of the group's visual layout (radio groups\n      // may render horizontally or vertically via CSS) — RTL mirroring of Left/Right still\n      // applies via `direction` since nav.ts's default keymap covers 'both' too.\n      loop: true,\n      onNavigate: ({ event, item }) => {\n        item.focus();\n        selectRadio(item, event);\n      },\n      orientation: 'both',\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    const activateSelf = (originalEvent?: Event): void => {\n      if (checkable.checked.value) return;\n\n      if (groupCtx) {\n        groupCtx.select(props.value.value ?? '', originalEvent);\n\n        return;\n      }\n\n      checkable.toggle(originalEvent ?? new Event('change'));\n    };\n\n    const checkable = createCheckable({\n      checked: checkedFromState,\n      disabled: computed(() => props.disabled.value || Boolean(groupCtx?.disabled.value)),\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        setFieldChecked(el, payload.checked);\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'radio',\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        toFormValue: (v) => v,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const { assistiveId, checked, disabled, errorText, helperText, labelId, toggle } = checkable;\n\n    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    bind({\n      attr: {\n        ariaChecked: () => (checked.value ? 'true' : 'false'),\n        ariaDescribedby: () => (errorText.value || helperText.value ? assistiveId : null),\n        ariaDisabled: () => (disabled.value ? 'true' : null),\n        ariaInvalid: () => (errorText.value ? 'true' : null),\n        ariaLabelledby: labelId,\n        checked,\n        color: effectiveColor,\n        disabled: () => (disabled.value ? true : undefined),\n        name: () => effectiveName.value || undefined,\n        role: 'radio',\n        size: effectiveSize,\n        tabindex: () => {\n          if (disabled.value) return undefined;\n\n          return checked.value ? 0 : -1;\n        },\n      },\n      class: () => ({\n        'is-checked': checked.value,\n        'is-disabled': disabled.value,\n      }),\n      on: {\n        click: (e: MouseEvent) => {\n          if (disabled.value) return;\n\n          if (groupCtx) {\n            groupCtx.select(props.value.value ?? '', e);\n          } else {\n            if (!effectiveName.value) return;\n\n            if (!checked.value) {\n              const radioName = props.name.value;\n              const allRadios = document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`);\n\n              allRadios.forEach((radio) => {\n                if (radio !== el) radio.removeAttribute('checked');\n              });\n\n              toggle(e);\n            }\n          }\n        },\n        keydown: (e: KeyboardEvent) => {\n          if (e.key === ' ' || e.key === 'Enter') {\n            e.preventDefault();\n            activateSelf(e);\n\n            return;\n          }\n\n          const radios = getRadioGroup();\n\n          if (radios.length === 0) return;\n\n          const selfIndex = radios.indexOf(el);\n\n          if (selfIndex === -1) return;\n\n          listControl.set(selfIndex);\n          listControl.handleKeydown(e);\n        },\n      },\n    });\n\n    return html`\n      <div class=\"radio-wrapper\" part=\"radio\">\n        <div class=\"circle\" part=\"circle\">\n          <div class=\"dot\" part=\"dot\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    coarsePointerMixin,\n    sizeVariantMixin(CONTROL_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":"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"}
+{"version":3,"file":"radio.js","names":[],"sources":["../src/inputs/radio/radio.ts"],"sourcesContent":["import { bind, define, getHost, html, inject, onCleanup, prop, useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createCheckable, createListControl, elementDirection, lifecycleSignal } from '../../core';\nimport { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\nimport { RADIO_GROUP_CTX } from '../radio-group/radio-group';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './radio.css?inline';\n\n/** Radio component properties */\n\nexport type OreRadioEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreRadioProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the radio */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A customizable radio button component for mutually exclusive selections.\n *\n * @element ore-radio\n *\n * @attr {boolean} checked - Checked state\n * @attr {boolean} disabled - Disable radio interaction\n * @attr {string} value - Field value (required for radio groups)\n * @attr {string} name - Form field name (required for radio groups)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Radio size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the radio\n *\n * @fires input - Emitted when radio is selected.\n * @fires change - Emitted when radio is selected.\n *\n * @slot - Radio button label text\n *\n * @cssprop --radio-size - Control size (width and height)\n * @cssprop --radio-bg - Unchecked background color\n * @cssprop --radio-border-color - Unchecked border color\n * @cssprop --radio-checked-bg - Selected indicator background color\n * @cssprop --radio-color - Selected indicator dot color\n * @cssprop --radio-font-size - Label font size\n * @part radio - The radio wrapper element\n * @part circle - The visual radio circle\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-radio name=\"plan\" value=\"free\">Free</ore-radio>\n * <ore-radio name=\"plan\" value=\"pro\" checked color=\"primary\">Pro</ore-radio>\n * <ore-radio name=\"plan\" value=\"enterprise\" disabled>Enterprise</ore-radio>\n * ```\n */\nexport const RADIO_TAG = 'ore-radio' as const;\ndefine<OreRadioProps>(RADIO_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const groupCtx = inject(RADIO_GROUP_CTX);\n    const effectiveName = computed(() => groupCtx?.name.value || props.name.value || '');\n    const effectiveSize = computed(() => groupCtx?.size.value ?? props.size.value);\n    const effectiveColor = computed(() => groupCtx?.color.value ?? props.color.value);\n    const checkedFromState = computed(() => {\n      if (groupCtx) return groupCtx.value.value === props.value.value;\n\n      return Boolean(props.checked.value);\n    });\n\n    const getRadioGroup = (): HTMLElement[] => {\n      const radioName = effectiveName.value;\n\n      if (!radioName) return [];\n\n      return Array.from(document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`)).filter(\n        (r) => !r.hasAttribute('disabled'),\n      );\n    };\n\n    const selectRadio = (radio: HTMLElement, originalEvent?: Event): void => {\n      if (groupCtx) {\n        groupCtx.select(radio.getAttribute('value') ?? '', originalEvent);\n\n        return;\n      }\n\n      radio.click();\n    };\n\n    const listControl = createListControl({\n      direction: () => elementDirection(el),\n      getItems: () => getRadioGroup(),\n      // 'both' accepts every arrow key regardless of the group's visual layout (radio groups\n      // may render horizontally or vertically via CSS) — RTL mirroring of Left/Right still\n      // applies via `direction` since nav.ts's default keymap covers 'both' too.\n      loop: true,\n      onNavigate: ({ event, item }) => {\n        item.focus();\n        selectRadio(item, event);\n      },\n      orientation: 'both',\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    const activateSelf = (originalEvent?: Event): void => {\n      if (checkable.checked.value) return;\n\n      if (groupCtx) {\n        groupCtx.select(props.value.value ?? '', originalEvent);\n\n        return;\n      }\n\n      checkable.toggle(originalEvent ?? new Event('change'));\n    };\n\n    const checkable = createCheckable({\n      checked: checkedFromState,\n      disabled: computed(() => props.disabled.value || Boolean(groupCtx?.disabled.value)),\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        setFieldChecked(el, payload.checked);\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'radio',\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        toFormValue: (v) => v,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const { assistiveId, checked, disabled, errorText, helperText, labelId, toggle } = checkable;\n\n    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    bind({\n      attr: {\n        ariaChecked: () => (checked.value ? 'true' : 'false'),\n        ariaDescribedby: () => (errorText.value || helperText.value ? assistiveId : null),\n        ariaDisabled: () => (disabled.value ? 'true' : null),\n        ariaInvalid: () => (errorText.value ? 'true' : null),\n        ariaLabelledby: labelId,\n        checked,\n        color: effectiveColor,\n        disabled: () => (disabled.value ? true : undefined),\n        name: () => effectiveName.value || undefined,\n        role: 'radio',\n        size: effectiveSize,\n        tabindex: () => {\n          if (disabled.value) return undefined;\n\n          return checked.value ? 0 : -1;\n        },\n      },\n      class: () => ({\n        'is-checked': checked.value,\n        'is-disabled': disabled.value,\n      }),\n      on: {\n        click: (e: MouseEvent) => {\n          if (disabled.value) return;\n\n          if (groupCtx) {\n            groupCtx.select(props.value.value ?? '', e);\n          } else {\n            if (!effectiveName.value) return;\n\n            if (!checked.value) {\n              const radioName = props.name.value;\n              const allRadios = document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`);\n\n              allRadios.forEach((radio) => {\n                if (radio !== el) radio.removeAttribute('checked');\n              });\n\n              toggle(e);\n            }\n          }\n        },\n        keydown: (e: KeyboardEvent) => {\n          if (e.key === ' ' || e.key === 'Enter') {\n            e.preventDefault();\n            activateSelf(e);\n\n            return;\n          }\n\n          const radios = getRadioGroup();\n\n          if (radios.length === 0) return;\n\n          const selfIndex = radios.indexOf(el);\n\n          if (selfIndex === -1) return;\n\n          listControl.set(selfIndex);\n          listControl.handleKeydown(e);\n        },\n      },\n    });\n\n    return html`\n      <div class=\"radio-wrapper\" part=\"radio\">\n        <div class=\"circle\" part=\"circle\">\n          <div class=\"dot\" part=\"dot\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    coarsePointerMixin,\n    sizeVariantMixin(CONTROL_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":"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"}

package/dist/rating.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./core/field-base.cjs"),i=require("./core/slider.cjs"),a=require("./shared/prop-bundles.cjs"),o=require("./inputs/shared/templates.cjs"),s=require("./inputs/shared/native-field-event.cjs"),c=require("./inputs/rating/rating.css.cjs");let l=require("@vielzeug/ore"),u=require("@vielzeug/ripple");var d=`ore-rating`;(0,l.define)(d,{formAssociated:!0,props:{...a.themableBundle,...a.sizableBundle,...a.disablableBundle,error:l.prop.string(),helper:l.prop.string(),label:l.prop.string(`Rating`),max:l.prop.number(5),name:l.prop.string(),readonly:l.prop.bool(!1),solid:l.prop.bool(!1),value:l.prop.number(0)},setup(e){let t=(0,l.getHost)(),n=(0,u.computed)(()=>{let t=Math.max(1,Number(e.max?.value)||5),n=Number(e.value?.value);return Math.min(t,Math.max(0,Number.isFinite(n)?n:0))}),a=(0,u.computed)(()=>!!e.disabled.value);s.defineFieldValue(t,()=>String(n.value),e=>{t.setAttribute(`value`,e)}),(0,l.useField)({disabled:a,value:(0,u.computed)(()=>String(n.value||0))});let c=(0,l.createStableId)(`helper`),d=r.createErrorHelperState({error:e.error,helper:e.helper}),f=(0,u.computed)(()=>d.value.errorText),p=(0,u.computed)(()=>d.value.helperText),m=(0,u.computed)(()=>f.value||p.value?c:null),h=(0,u.computed)(()=>!e.readonly?.value&&!a.value),g=(0,u.signal)(null),_=(0,u.computed)(()=>g.value??n.value),v=()=>[...t.shadowRoot?.querySelectorAll(`[data-star]`)??[]],y=i.createSliderControl({max:(0,u.computed)(()=>Number(e.max?.value)||5),min:(0,u.signal)(1),step:(0,u.signal)(1)});function b(e){let n=t.shadowRoot?.querySelector(`.sparkle-layer`),r=t.shadowRoot?.querySelector(`[data-star="${e}"]`);if(!n||!r)return;let i=r.offsetLeft+r.offsetWidth/2,a=r.offsetTop+r.offsetHeight/2;for(let e=0;e<10;e++){let t=document.createElement(`span`),r=360/10*e+(Math.random()*30-15),o=18+Math.random()*20,s=3+Math.random()*4,c=380+Math.random()*220;t.className=`sparkle`,t.style.cssText=[`left:${i}px`,`top:${a}px`,`--_angle:${r}deg`,`--_dist:${o}px`,`width:${s}px`,`height:${s}px`,`--_dur:${c}ms`,`animation-delay:${Math.random()*60}ms`].join(`;`),n.appendChild(t),t.addEventListener(`animationend`,()=>t.remove(),{once:!0})}}function x(r,i){if(!h.value)return;let a=Math.max(1,Number(e.max?.value)||5),o=Math.min(a,Math.max(0,r));o!==n.value&&(s.setFieldValue(t,String(o)),s.dispatchNativeFieldEvent(t,`input`),s.dispatchNativeFieldEvent(t,`change`),b(o))}function S(e,t){let n=y.nextFromKey(e.key,t);n!=null&&(e.preventDefault(),x(n,e),v()[n-1]?.focus())}let C=(0,u.computed)(()=>{let t=Number(e.max?.value)||5;return Array.from({length:t},(e,t)=>t+1)});return(0,l.bind)({attr:{size:e.size}}),l.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./core/field-base.cjs"),i=require("./core/slider.cjs"),a=require("./shared/prop-bundles.cjs"),o=require("./inputs/shared/templates.cjs"),s=require("./inputs/shared/native-field-event.cjs"),c=require("./inputs/rating/rating.css.cjs");let l=require("@vielzeug/ore"),u=require("@vielzeug/ripple");var d=`ore-rating`;(0,l.define)(d,{formAssociated:!0,props:{...a.themableBundle,...a.sizableBundle,...a.disablableBundle,error:l.prop.string(),helper:l.prop.string(),label:l.prop.string(`Rating`),max:l.prop.number(5),name:l.prop.string(),readonly:l.prop.bool(!1),solid:l.prop.bool(!1),value:l.prop.number(0)},setup(e){let t=(0,l.getHost)(),n=(0,u.computed)(()=>{let t=Math.max(1,Number(e.max?.value)||5),n=Number(e.value?.value);return Math.min(t,Math.max(0,Number.isFinite(n)?n:0))}),a=(0,u.computed)(()=>!!e.disabled.value);s.defineFieldValue(t,()=>String(n.value),e=>{t.setAttribute(`value`,e)}),(0,l.useField)({disabled:a,value:(0,u.computed)(()=>String(n.value||0))});let c=(0,l.createStableId)(`helper`),d=r.createErrorHelperState({error:e.error,helper:e.helper}),f=(0,u.computed)(()=>d.value.errorText),p=(0,u.computed)(()=>d.value.helperText),m=(0,u.computed)(()=>f.value||p.value?c:null),h=(0,u.computed)(()=>!e.readonly?.value&&!a.value),g=(0,u.signal)(null),_=(0,u.computed)(()=>g.value??n.value),v=()=>[...t.shadowRoot?.querySelectorAll(`[data-star]`)??[]],y=i.createSliderControl({max:(0,u.computed)(()=>Number(e.max?.value)||5),min:(0,u.signal)(1),step:(0,u.signal)(1)});function b(e){let n=t.shadowRoot?.querySelector(`.sparkle-layer`),r=t.shadowRoot?.querySelector(`[data-star="${e}"]`);if(!n||!r)return;let i=r.offsetLeft+r.offsetWidth/2,a=r.offsetTop+r.offsetHeight/2;for(let e=0;e<10;e++){let t=document.createElement(`span`),r=36*e+(Math.random()*30-15),o=18+Math.random()*20,s=3+Math.random()*4,c=380+Math.random()*220;t.className=`sparkle`,t.style.cssText=[`left:${i}px`,`top:${a}px`,`--_angle:${r}deg`,`--_dist:${o}px`,`width:${s}px`,`height:${s}px`,`--_dur:${c}ms`,`animation-delay:${Math.random()*60}ms`].join(`;`),n.appendChild(t),t.addEventListener(`animationend`,()=>t.remove(),{once:!0})}}function x(r,i){if(!h.value)return;let a=Math.max(1,Number(e.max?.value)||5),o=Math.min(a,Math.max(0,r));o!==n.value&&(s.setFieldValue(t,String(o)),s.dispatchNativeFieldEvent(t,`input`),s.dispatchNativeFieldEvent(t,`change`),b(o))}function S(e,t){let n=y.nextFromKey(e.key,t);n!=null&&(e.preventDefault(),x(n,e),v()[n-1]?.focus())}let C=(0,u.computed)(()=>{let t=Number(e.max?.value)||5;return Array.from({length:t},(e,t)=>t+1)});return(0,l.bind)({attr:{size:e.size}}),l.html`
       <div
         class="stars"
         part="stars"

package/dist/rating.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"rating.cjs","names":[],"sources":["../src/inputs/rating/rating.ts"],"sourcesContent":["import { bind, createStableId, define, getHost, html, prop, useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { createErrorHelperState, createSliderControl } from '../../core';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport '../../content/icon/icon';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, reducedMotionMixin, sizeVariantMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './rating.css?inline';\n\nexport type OreRatingEvents = {\n  change: Event;\n  input: Event;\n};\n\n/** Rating props */\nexport type OreRatingProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message — marks the field as invalid (fallback when the `error` slot is empty) */\n  error?: string;\n  /** Helper text displayed below the stars (fallback when the `helper` slot is empty) */\n  helper?: string;\n  /** Accessible group label */\n  label?: string;\n  /** Maximum rating (number of stars) */\n  max?: number;\n  /** Form field name */\n  name?: string;\n  /** Make rating read-only */\n  readonly?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n  /** Render selected stars as solid-filled instead of outline-only */\n  solid?: boolean;\n  /** Current rating value */\n  value?: number;\n};\n\n/**\n * A star rating input.\n *\n * @element ore-rating\n *\n * @attr {number} value - Current rating value (default: 0)\n * @attr {number} max - Maximum number of stars (default: 5)\n * @attr {boolean} readonly - Read-only display mode\n * @attr {boolean} disabled - Disabled state\n * @attr {string} label - aria-label for the group (default: 'Rating')\n * @attr {string} color - Theme color for filled stars: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} name - Form field name\n * @attr {boolean} solid - Fill selected stars (outline remains default when omitted)\n * @attr {string} helper - Helper text below the stars\n * @attr {string} error - Error message below the stars\n *\n * @fires input - Emitted when the rating changes.\n * @fires change - Emitted when the rating changes.\n *\n * @cssprop --rating-star-size - Star diameter\n * @cssprop --rating-color-empty - Empty star color\n * @cssprop --rating-color-filled - Filled star color\n * @cssprop --rating-gap - Gap between stars\n *\n * @part stars - Stars container.\n * @part star - Star item element.\n * @part helper-text - The helper/error text element.\n * @example\n * ```html\n * <ore-rating value=\"3\" max=\"5\" color=\"warning\"></ore-rating>\n * <ore-rating value=\"4\" solid></ore-rating>\n * ```\n */\nexport const RATING_TAG = 'ore-rating' as const;\ndefine<OreRatingProps>(RATING_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string('Rating'),\n    max: prop.number(5),\n    name: prop.string(),\n    readonly: prop.bool(false),\n    solid: prop.bool(false),\n    value: prop.number(0),\n  },\n  setup(props) {\n    const el = getHost();\n    const normalizedValue = computed(() => {\n      const max = Math.max(1, Number(props.max?.value) || 5);\n      const raw = Number(props.value?.value);\n      const safe = Number.isFinite(raw) ? raw : 0;\n\n      return Math.min(max, Math.max(0, safe));\n    });\n\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n\n    defineFieldValue(\n      el,\n      () => String(normalizedValue.value),\n      (value) => {\n        el.setAttribute('value', value);\n      },\n    );\n\n    useField({\n      disabled: isDisabled,\n      value: computed(() => String(normalizedValue.value || 0)),\n    });\n\n    const assistiveId = createStableId('helper');\n    const assistive = createErrorHelperState({ error: props.error, helper: props.helper });\n    const errorText = computed(() => assistive.value.errorText);\n    const helperText = computed(() => assistive.value.helperText);\n    const ariaDescribedBy = computed(() => (errorText.value || helperText.value ? assistiveId : null));\n\n    const isInteractive = computed(() => !props.readonly?.value && !isDisabled.value);\n    const hovered = signal<number | null>(null);\n    const displayValue = computed(() => hovered.value ?? normalizedValue.value);\n    const getStarButtons = () => {\n      return [...(el.shadowRoot?.querySelectorAll<HTMLButtonElement>('[data-star]') ?? [])];\n    };\n    const ratingControl = createSliderControl({\n      max: computed(() => Number(props.max?.value) || 5),\n      min: signal(1),\n      step: signal(1),\n    });\n\n    function spawnSparkles(star: number) {\n      const layer = el.shadowRoot?.querySelector<HTMLElement>('.sparkle-layer');\n      const btn = el.shadowRoot?.querySelector<HTMLElement>(`[data-star=\"${star}\"]`);\n\n      if (!layer || !btn) return;\n\n      const cx = btn.offsetLeft + btn.offsetWidth / 2;\n      const cy = btn.offsetTop + btn.offsetHeight / 2;\n      const count = 10;\n\n      for (let i = 0; i < count; i++) {\n        const p = document.createElement('span');\n        const angle = (360 / count) * i + (Math.random() * 30 - 15);\n        const dist = 18 + Math.random() * 20;\n        const size = 3 + Math.random() * 4;\n        const dur = 380 + Math.random() * 220;\n\n        p.className = 'sparkle';\n        p.style.cssText = [\n          `left:${cx}px`,\n          `top:${cy}px`,\n          `--_angle:${angle}deg`,\n          `--_dist:${dist}px`,\n          `width:${size}px`,\n          `height:${size}px`,\n          `--_dur:${dur}ms`,\n          `animation-delay:${Math.random() * 60}ms`,\n        ].join(';');\n        layer.appendChild(p);\n        p.addEventListener('animationend', () => p.remove(), { once: true });\n      }\n    }\n    function select(star: number, _originalEvent?: Event) {\n      if (!isInteractive.value) return;\n\n      const max = Math.max(1, Number(props.max?.value) || 5);\n      const nextValue = Math.min(max, Math.max(0, star));\n\n      if (nextValue === normalizedValue.value) return;\n\n      setFieldValue(el, String(nextValue));\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\n      spawnSparkles(nextValue);\n    }\n    function handleKeydown(e: KeyboardEvent, star: number) {\n      const next = ratingControl.nextFromKey(e.key, star);\n\n      if (next == null) return;\n\n      e.preventDefault();\n      select(next, e);\n\n      const buttons = getStarButtons();\n\n      buttons[next - 1]?.focus();\n    }\n\n    const stars = computed(() => {\n      const max = Number(props.max?.value) || 5;\n\n      return Array.from({ length: max }, (_, i) => i + 1);\n    });\n\n    bind({ attr: { size: props.size } });\n\n    return html`\n      <div\n        class=\"stars\"\n        part=\"stars\"\n        role=\"radiogroup\"\n        aria-label=\"${props.label}\"\n        aria-describedby=\"${ariaDescribedBy}\">\n        ${() =>\n          stars.value.map(\n            (star) => html`\n              <button\n                class=\"star-btn\"\n                part=\"star\"\n                type=\"button\"\n                role=\"radio\"\n                aria-label=\"${() => `${star} ${star === 1 ? 'star' : 'stars'}`}\"\n                aria-checked=\"${() => String(star === normalizedValue.value)}\"\n                data-star=\"${star}\"\n                ?data-filled=\"${() => star <= displayValue.value}\"\n                disabled=\"${() => (!isInteractive.value ? true : null)}\"\n                @click=\"${(e: Event) => select(star, e)}\"\n                @pointerenter=\"${() => {\n                  if (isInteractive.value) hovered.value = star;\n                }}\"\n                @pointerleave=\"${() => {\n                  hovered.value = null;\n                }}\"\n                @keydown=\"${(e: KeyboardEvent) => handleKeydown(e, star)}\">\n                <ore-icon name=\"star\" size=\"var(--_star-size)\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n              </button>\n            `,\n          )}\n        <div class=\"sparkle-layer\"></div>\n      </div>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), coarsePointerMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"mgBA4EA,IAAa,EAAa,cAC1B,EAAA,EAAA,OAAA,CAAuB,EAAY,CACjC,eAAgB,GAChB,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,iBACH,MAAO,EAAA,KAAK,OAAO,EACnB,OAAQ,EAAA,KAAK,OAAO,EACpB,MAAO,EAAA,KAAK,OAAO,QAAQ,EAC3B,IAAK,EAAA,KAAK,OAAO,CAAC,EAClB,KAAM,EAAA,KAAK,OAAO,EAClB,SAAU,EAAA,KAAK,KAAK,EAAK,EACzB,MAAO,EAAA,KAAK,KAAK,EAAK,EACtB,MAAO,EAAA,KAAK,OAAO,CAAC,CACtB,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EACb,GAAA,EAAkB,EAAA,SAAA,KAAe,CACrC,IAAM,EAAM,KAAK,IAAI,EAAG,OAAO,EAAM,KAAK,KAAK,GAAK,CAAC,EAC/C,EAAM,OAAO,EAAM,OAAO,KAAK,EAGrC,OAAO,KAAK,IAAI,EAAK,KAAK,IAAI,EAFjB,OAAO,SAAS,CAAG,EAAI,EAAM,CAEL,CAAC,CACxC,CAAC,EAEK,GAAA,EAAa,EAAA,SAAA,KAAe,EAAQ,EAAM,SAAS,KAAM,EAE/D,EAAA,iBACE,MACM,OAAO,EAAgB,KAAK,EACjC,GAAU,CACT,EAAG,aAAa,QAAS,CAAK,CAChC,CACF,GAEA,EAAA,EAAA,SAAA,CAAS,CACP,SAAU,EACV,OAAA,EAAO,EAAA,SAAA,KAAe,OAAO,EAAgB,OAAS,CAAC,CAAC,CAC1D,CAAC,EAED,IAAM,GAAA,EAAc,EAAA,eAAA,CAAe,QAAQ,EACrC,EAAY,EAAA,uBAAuB,CAAE,MAAO,EAAM,MAAO,OAAQ,EAAM,MAAO,CAAC,EAC/E,GAAA,EAAY,EAAA,SAAA,KAAe,EAAU,MAAM,SAAS,EACpD,GAAA,EAAa,EAAA,SAAA,KAAe,EAAU,MAAM,UAAU,EACtD,GAAA,EAAkB,EAAA,SAAA,KAAgB,EAAU,OAAS,EAAW,MAAQ,EAAc,IAAK,EAE3F,GAAA,EAAgB,EAAA,SAAA,KAAe,CAAC,EAAM,UAAU,OAAS,CAAC,EAAW,KAAK,EAC1E,GAAA,EAAU,EAAA,OAAA,CAAsB,IAAI,EACpC,GAAA,EAAe,EAAA,SAAA,KAAe,EAAQ,OAAS,EAAgB,KAAK,EACpE,MACG,CAAC,GAAI,EAAG,YAAY,iBAAoC,aAAa,GAAK,CAAC,CAAE,EAEhF,EAAgB,EAAA,oBAAoB,CACxC,KAAA,EAAK,EAAA,SAAA,KAAe,OAAO,EAAM,KAAK,KAAK,GAAK,CAAC,EACjD,KAAA,EAAK,EAAA,OAAA,CAAO,CAAC,EACb,MAAA,EAAM,EAAA,OAAA,CAAO,CAAC,CAChB,CAAC,EAED,SAAS,EAAc,EAAc,CACnC,IAAM,EAAQ,EAAG,YAAY,cAA2B,gBAAgB,EAClE,EAAM,EAAG,YAAY,cAA2B,eAAe,EAAK,GAAG,EAE7E,GAAI,CAAC,GAAS,CAAC,EAAK,OAEpB,IAAM,EAAK,EAAI,WAAa,EAAI,YAAc,EACxC,EAAK,EAAI,UAAY,EAAI,aAAe,EAG9C,IAAK,IAAI,EAAI,EAAG,EAAI,GAAO,IAAK,CAC9B,IAAM,EAAI,SAAS,cAAc,MAAM,EACjC,EAAS,IAAM,GAAS,GAAK,KAAK,OAAO,EAAI,GAAK,IAClD,EAAO,GAAK,KAAK,OAAO,EAAI,GAC5B,EAAO,EAAI,KAAK,OAAO,EAAI,EAC3B,EAAM,IAAM,KAAK,OAAO,EAAI,IAElC,EAAE,UAAY,UACd,EAAE,MAAM,QAAU,CAChB,QAAQ,EAAG,IACX,OAAO,EAAG,IACV,YAAY,EAAM,KAClB,WAAW,EAAK,IAChB,SAAS,EAAK,IACd,UAAU,EAAK,IACf,UAAU,EAAI,IACd,mBAAmB,KAAK,OAAO,EAAI,GAAG,GACxC,CAAC,CAAC,KAAK,GAAG,EACV,EAAM,YAAY,CAAC,EACnB,EAAE,iBAAiB,mBAAsB,EAAE,OAAO,EAAG,CAAE,KAAM,EAAK,CAAC,CACrE,CACF,CACA,SAAS,EAAO,EAAc,EAAwB,CACpD,GAAI,CAAC,EAAc,MAAO,OAE1B,IAAM,EAAM,KAAK,IAAI,EAAG,OAAO,EAAM,KAAK,KAAK,GAAK,CAAC,EAC/C,EAAY,KAAK,IAAI,EAAK,KAAK,IAAI,EAAG,CAAI,CAAC,EAE7C,IAAc,EAAgB,QAElC,EAAA,cAAc,EAAI,OAAO,CAAS,CAAC,EACnC,EAAA,yBAAyB,EAAI,OAAO,EACpC,EAAA,yBAAyB,EAAI,QAAQ,EACrC,EAAc,CAAS,EACzB,CACA,SAAS,EAAc,EAAkB,EAAc,CACrD,IAAM,EAAO,EAAc,YAAY,EAAE,IAAK,CAAI,EAE9C,GAAQ,OAEZ,EAAE,eAAe,EACjB,EAAO,EAAM,CAAC,EAId,EAAA,CAAA,CAAQ,EAAO,EAAE,EAAE,MAAM,EAC3B,CAEA,IAAM,GAAA,EAAQ,EAAA,SAAA,KAAe,CAC3B,IAAM,EAAM,OAAO,EAAM,KAAK,KAAK,GAAK,EAExC,OAAO,MAAM,KAAK,CAAE,OAAQ,CAAI,GAAI,EAAG,IAAM,EAAI,CAAC,CACpD,CAAC,EAID,OAFA,EAAA,EAAA,KAAA,CAAK,CAAE,KAAM,CAAE,KAAM,EAAM,IAAK,CAAE,CAAC,EAE5B,EAAA,IAAI;;;;;sBAKO,EAAM,MAAM;4BACN,EAAgB;cAElC,EAAM,MAAM,IACT,GAAS,EAAA,IAAI;;;;;;kCAMU,GAAG,EAAK,GAAG,IAAS,EAAI,OAAS,UAAU;oCACzC,OAAO,IAAS,EAAgB,KAAK,EAAE;6BAChD,EAAK;oCACI,GAAQ,EAAa,MAAM;gCAC9B,CAAC,EAAc,OAAe,KAAM;0BAC5C,GAAa,EAAO,EAAM,CAAC,EAAE;qCACjB,CACjB,EAAc,QAAO,EAAQ,MAAQ,EAC3C,EAAE;qCACqB,CACrB,EAAQ,MAAQ,IAClB,EAAE;4BACW,GAAqB,EAAc,EAAG,CAAI,EAAE;;;aAI/D,EAAE;;;QAGJ,EAAA,mBAAmB,EAAa,EAAW,CAAU,EAAE;KAE7D,EACA,OAAQ,CAAC,EAAA,gBAAiB,EAAA,iBAAiB,CAAC,CAAC,EAAG,EAAA,mBAAoB,EAAA,mBAAoB,EAAA,OAAe,CACzG,CAAC"}
+{"version":3,"file":"rating.cjs","names":[],"sources":["../src/inputs/rating/rating.ts"],"sourcesContent":["import { bind, createStableId, define, getHost, html, prop, useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { createErrorHelperState, createSliderControl } from '../../core';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport '../../content/icon/icon';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, reducedMotionMixin, sizeVariantMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './rating.css?inline';\n\nexport type OreRatingEvents = {\n  change: Event;\n  input: Event;\n};\n\n/** Rating props */\nexport type OreRatingProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message — marks the field as invalid (fallback when the `error` slot is empty) */\n  error?: string;\n  /** Helper text displayed below the stars (fallback when the `helper` slot is empty) */\n  helper?: string;\n  /** Accessible group label */\n  label?: string;\n  /** Maximum rating (number of stars) */\n  max?: number;\n  /** Form field name */\n  name?: string;\n  /** Make rating read-only */\n  readonly?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n  /** Render selected stars as solid-filled instead of outline-only */\n  solid?: boolean;\n  /** Current rating value */\n  value?: number;\n};\n\n/**\n * A star rating input.\n *\n * @element ore-rating\n *\n * @attr {number} value - Current rating value (default: 0)\n * @attr {number} max - Maximum number of stars (default: 5)\n * @attr {boolean} readonly - Read-only display mode\n * @attr {boolean} disabled - Disabled state\n * @attr {string} label - aria-label for the group (default: 'Rating')\n * @attr {string} color - Theme color for filled stars: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} name - Form field name\n * @attr {boolean} solid - Fill selected stars (outline remains default when omitted)\n * @attr {string} helper - Helper text below the stars\n * @attr {string} error - Error message below the stars\n *\n * @fires input - Emitted when the rating changes.\n * @fires change - Emitted when the rating changes.\n *\n * @cssprop --rating-star-size - Star diameter\n * @cssprop --rating-color-empty - Empty star color\n * @cssprop --rating-color-filled - Filled star color\n * @cssprop --rating-gap - Gap between stars\n *\n * @part stars - Stars container.\n * @part star - Star item element.\n * @part helper-text - The helper/error text element.\n * @example\n * ```html\n * <ore-rating value=\"3\" max=\"5\" color=\"warning\"></ore-rating>\n * <ore-rating value=\"4\" solid></ore-rating>\n * ```\n */\nexport const RATING_TAG = 'ore-rating' as const;\ndefine<OreRatingProps>(RATING_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string('Rating'),\n    max: prop.number(5),\n    name: prop.string(),\n    readonly: prop.bool(false),\n    solid: prop.bool(false),\n    value: prop.number(0),\n  },\n  setup(props) {\n    const el = getHost();\n    const normalizedValue = computed(() => {\n      const max = Math.max(1, Number(props.max?.value) || 5);\n      const raw = Number(props.value?.value);\n      const safe = Number.isFinite(raw) ? raw : 0;\n\n      return Math.min(max, Math.max(0, safe));\n    });\n\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n\n    defineFieldValue(\n      el,\n      () => String(normalizedValue.value),\n      (value) => {\n        el.setAttribute('value', value);\n      },\n    );\n\n    useField({\n      disabled: isDisabled,\n      value: computed(() => String(normalizedValue.value || 0)),\n    });\n\n    const assistiveId = createStableId('helper');\n    const assistive = createErrorHelperState({ error: props.error, helper: props.helper });\n    const errorText = computed(() => assistive.value.errorText);\n    const helperText = computed(() => assistive.value.helperText);\n    const ariaDescribedBy = computed(() => (errorText.value || helperText.value ? assistiveId : null));\n\n    const isInteractive = computed(() => !props.readonly?.value && !isDisabled.value);\n    const hovered = signal<number | null>(null);\n    const displayValue = computed(() => hovered.value ?? normalizedValue.value);\n    const getStarButtons = () => {\n      return [...(el.shadowRoot?.querySelectorAll<HTMLButtonElement>('[data-star]') ?? [])];\n    };\n    const ratingControl = createSliderControl({\n      max: computed(() => Number(props.max?.value) || 5),\n      min: signal(1),\n      step: signal(1),\n    });\n\n    function spawnSparkles(star: number) {\n      const layer = el.shadowRoot?.querySelector<HTMLElement>('.sparkle-layer');\n      const btn = el.shadowRoot?.querySelector<HTMLElement>(`[data-star=\"${star}\"]`);\n\n      if (!layer || !btn) return;\n\n      const cx = btn.offsetLeft + btn.offsetWidth / 2;\n      const cy = btn.offsetTop + btn.offsetHeight / 2;\n      const count = 10;\n\n      for (let i = 0; i < count; i++) {\n        const p = document.createElement('span');\n        const angle = (360 / count) * i + (Math.random() * 30 - 15);\n        const dist = 18 + Math.random() * 20;\n        const size = 3 + Math.random() * 4;\n        const dur = 380 + Math.random() * 220;\n\n        p.className = 'sparkle';\n        p.style.cssText = [\n          `left:${cx}px`,\n          `top:${cy}px`,\n          `--_angle:${angle}deg`,\n          `--_dist:${dist}px`,\n          `width:${size}px`,\n          `height:${size}px`,\n          `--_dur:${dur}ms`,\n          `animation-delay:${Math.random() * 60}ms`,\n        ].join(';');\n        layer.appendChild(p);\n        p.addEventListener('animationend', () => p.remove(), { once: true });\n      }\n    }\n    function select(star: number, _originalEvent?: Event) {\n      if (!isInteractive.value) return;\n\n      const max = Math.max(1, Number(props.max?.value) || 5);\n      const nextValue = Math.min(max, Math.max(0, star));\n\n      if (nextValue === normalizedValue.value) return;\n\n      setFieldValue(el, String(nextValue));\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\n      spawnSparkles(nextValue);\n    }\n    function handleKeydown(e: KeyboardEvent, star: number) {\n      const next = ratingControl.nextFromKey(e.key, star);\n\n      if (next == null) return;\n\n      e.preventDefault();\n      select(next, e);\n\n      const buttons = getStarButtons();\n\n      buttons[next - 1]?.focus();\n    }\n\n    const stars = computed(() => {\n      const max = Number(props.max?.value) || 5;\n\n      return Array.from({ length: max }, (_, i) => i + 1);\n    });\n\n    bind({ attr: { size: props.size } });\n\n    return html`\n      <div\n        class=\"stars\"\n        part=\"stars\"\n        role=\"radiogroup\"\n        aria-label=\"${props.label}\"\n        aria-describedby=\"${ariaDescribedBy}\">\n        ${() =>\n          stars.value.map(\n            (star) => html`\n              <button\n                class=\"star-btn\"\n                part=\"star\"\n                type=\"button\"\n                role=\"radio\"\n                aria-label=\"${() => `${star} ${star === 1 ? 'star' : 'stars'}`}\"\n                aria-checked=\"${() => String(star === normalizedValue.value)}\"\n                data-star=\"${star}\"\n                ?data-filled=\"${() => star <= displayValue.value}\"\n                disabled=\"${() => (!isInteractive.value ? true : null)}\"\n                @click=\"${(e: Event) => select(star, e)}\"\n                @pointerenter=\"${() => {\n                  if (isInteractive.value) hovered.value = star;\n                }}\"\n                @pointerleave=\"${() => {\n                  hovered.value = null;\n                }}\"\n                @keydown=\"${(e: KeyboardEvent) => handleKeydown(e, star)}\">\n                <ore-icon name=\"star\" size=\"var(--_star-size)\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n              </button>\n            `,\n          )}\n        <div class=\"sparkle-layer\"></div>\n      </div>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), coarsePointerMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/rating.js

@@ -50,7 +50,7 @@ g(C, {
 			if (!n || !r) return;
 			let i = r.offsetLeft + r.offsetWidth / 2, a = r.offsetTop + r.offsetHeight / 2;
 			for (let e = 0; e < 10; e++) {
-				let t = document.createElement("span"), r = 360 / 10 * e + (Math.random() * 30 - 15), o = 18 + Math.random() * 20, s = 3 + Math.random() * 4, c = 380 + Math.random() * 220;
+				let t = document.createElement("span"), r = 36 * e + (Math.random() * 30 - 15), o = 18 + Math.random() * 20, s = 3 + Math.random() * 4, c = 380 + Math.random() * 220;
 				t.className = "sparkle", t.style.cssText = [
 					`left:${i}px`,
 					`top:${a}px`,

package/dist/rating.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating.js","names":[],"sources":["../src/inputs/rating/rating.ts"],"sourcesContent":["import { bind, createStableId, define, getHost, html, prop, useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { createErrorHelperState, createSliderControl } from '../../core';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport '../../content/icon/icon';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, reducedMotionMixin, sizeVariantMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './rating.css?inline';\n\nexport type OreRatingEvents = {\n  change: Event;\n  input: Event;\n};\n\n/** Rating props */\nexport type OreRatingProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message — marks the field as invalid (fallback when the `error` slot is empty) */\n  error?: string;\n  /** Helper text displayed below the stars (fallback when the `helper` slot is empty) */\n  helper?: string;\n  /** Accessible group label */\n  label?: string;\n  /** Maximum rating (number of stars) */\n  max?: number;\n  /** Form field name */\n  name?: string;\n  /** Make rating read-only */\n  readonly?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n  /** Render selected stars as solid-filled instead of outline-only */\n  solid?: boolean;\n  /** Current rating value */\n  value?: number;\n};\n\n/**\n * A star rating input.\n *\n * @element ore-rating\n *\n * @attr {number} value - Current rating value (default: 0)\n * @attr {number} max - Maximum number of stars (default: 5)\n * @attr {boolean} readonly - Read-only display mode\n * @attr {boolean} disabled - Disabled state\n * @attr {string} label - aria-label for the group (default: 'Rating')\n * @attr {string} color - Theme color for filled stars: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} name - Form field name\n * @attr {boolean} solid - Fill selected stars (outline remains default when omitted)\n * @attr {string} helper - Helper text below the stars\n * @attr {string} error - Error message below the stars\n *\n * @fires input - Emitted when the rating changes.\n * @fires change - Emitted when the rating changes.\n *\n * @cssprop --rating-star-size - Star diameter\n * @cssprop --rating-color-empty - Empty star color\n * @cssprop --rating-color-filled - Filled star color\n * @cssprop --rating-gap - Gap between stars\n *\n * @part stars - Stars container.\n * @part star - Star item element.\n * @part helper-text - The helper/error text element.\n * @example\n * ```html\n * <ore-rating value=\"3\" max=\"5\" color=\"warning\"></ore-rating>\n * <ore-rating value=\"4\" solid></ore-rating>\n * ```\n */\nexport const RATING_TAG = 'ore-rating' as const;\ndefine<OreRatingProps>(RATING_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string('Rating'),\n    max: prop.number(5),\n    name: prop.string(),\n    readonly: prop.bool(false),\n    solid: prop.bool(false),\n    value: prop.number(0),\n  },\n  setup(props) {\n    const el = getHost();\n    const normalizedValue = computed(() => {\n      const max = Math.max(1, Number(props.max?.value) || 5);\n      const raw = Number(props.value?.value);\n      const safe = Number.isFinite(raw) ? raw : 0;\n\n      return Math.min(max, Math.max(0, safe));\n    });\n\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n\n    defineFieldValue(\n      el,\n      () => String(normalizedValue.value),\n      (value) => {\n        el.setAttribute('value', value);\n      },\n    );\n\n    useField({\n      disabled: isDisabled,\n      value: computed(() => String(normalizedValue.value || 0)),\n    });\n\n    const assistiveId = createStableId('helper');\n    const assistive = createErrorHelperState({ error: props.error, helper: props.helper });\n    const errorText = computed(() => assistive.value.errorText);\n    const helperText = computed(() => assistive.value.helperText);\n    const ariaDescribedBy = computed(() => (errorText.value || helperText.value ? assistiveId : null));\n\n    const isInteractive = computed(() => !props.readonly?.value && !isDisabled.value);\n    const hovered = signal<number | null>(null);\n    const displayValue = computed(() => hovered.value ?? normalizedValue.value);\n    const getStarButtons = () => {\n      return [...(el.shadowRoot?.querySelectorAll<HTMLButtonElement>('[data-star]') ?? [])];\n    };\n    const ratingControl = createSliderControl({\n      max: computed(() => Number(props.max?.value) || 5),\n      min: signal(1),\n      step: signal(1),\n    });\n\n    function spawnSparkles(star: number) {\n      const layer = el.shadowRoot?.querySelector<HTMLElement>('.sparkle-layer');\n      const btn = el.shadowRoot?.querySelector<HTMLElement>(`[data-star=\"${star}\"]`);\n\n      if (!layer || !btn) return;\n\n      const cx = btn.offsetLeft + btn.offsetWidth / 2;\n      const cy = btn.offsetTop + btn.offsetHeight / 2;\n      const count = 10;\n\n      for (let i = 0; i < count; i++) {\n        const p = document.createElement('span');\n        const angle = (360 / count) * i + (Math.random() * 30 - 15);\n        const dist = 18 + Math.random() * 20;\n        const size = 3 + Math.random() * 4;\n        const dur = 380 + Math.random() * 220;\n\n        p.className = 'sparkle';\n        p.style.cssText = [\n          `left:${cx}px`,\n          `top:${cy}px`,\n          `--_angle:${angle}deg`,\n          `--_dist:${dist}px`,\n          `width:${size}px`,\n          `height:${size}px`,\n          `--_dur:${dur}ms`,\n          `animation-delay:${Math.random() * 60}ms`,\n        ].join(';');\n        layer.appendChild(p);\n        p.addEventListener('animationend', () => p.remove(), { once: true });\n      }\n    }\n    function select(star: number, _originalEvent?: Event) {\n      if (!isInteractive.value) return;\n\n      const max = Math.max(1, Number(props.max?.value) || 5);\n      const nextValue = Math.min(max, Math.max(0, star));\n\n      if (nextValue === normalizedValue.value) return;\n\n      setFieldValue(el, String(nextValue));\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\n      spawnSparkles(nextValue);\n    }\n    function handleKeydown(e: KeyboardEvent, star: number) {\n      const next = ratingControl.nextFromKey(e.key, star);\n\n      if (next == null) return;\n\n      e.preventDefault();\n      select(next, e);\n\n      const buttons = getStarButtons();\n\n      buttons[next - 1]?.focus();\n    }\n\n    const stars = computed(() => {\n      const max = Number(props.max?.value) || 5;\n\n      return Array.from({ length: max }, (_, i) => i + 1);\n    });\n\n    bind({ attr: { size: props.size } });\n\n    return html`\n      <div\n        class=\"stars\"\n        part=\"stars\"\n        role=\"radiogroup\"\n        aria-label=\"${props.label}\"\n        aria-describedby=\"${ariaDescribedBy}\">\n        ${() =>\n          stars.value.map(\n            (star) => html`\n              <button\n                class=\"star-btn\"\n                part=\"star\"\n                type=\"button\"\n                role=\"radio\"\n                aria-label=\"${() => `${star} ${star === 1 ? 'star' : 'stars'}`}\"\n                aria-checked=\"${() => String(star === normalizedValue.value)}\"\n                data-star=\"${star}\"\n                ?data-filled=\"${() => star <= displayValue.value}\"\n                disabled=\"${() => (!isInteractive.value ? true : null)}\"\n                @click=\"${(e: Event) => select(star, e)}\"\n                @pointerenter=\"${() => {\n                  if (isInteractive.value) hovered.value = star;\n                }}\"\n                @pointerleave=\"${() => {\n                  hovered.value = null;\n                }}\"\n                @keydown=\"${(e: KeyboardEvent) => handleKeydown(e, star)}\">\n                <ore-icon name=\"star\" size=\"var(--_star-size)\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n              </button>\n            `,\n          )}\n        <div class=\"sparkle-layer\"></div>\n      </div>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), coarsePointerMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"rating.js","names":[],"sources":["../src/inputs/rating/rating.ts"],"sourcesContent":["import { bind, createStableId, define, getHost, html, prop, useField } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { createErrorHelperState, createSliderControl } from '../../core';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport '../../content/icon/icon';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, reducedMotionMixin, sizeVariantMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './rating.css?inline';\n\nexport type OreRatingEvents = {\n  change: Event;\n  input: Event;\n};\n\n/** Rating props */\nexport type OreRatingProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message — marks the field as invalid (fallback when the `error` slot is empty) */\n  error?: string;\n  /** Helper text displayed below the stars (fallback when the `helper` slot is empty) */\n  helper?: string;\n  /** Accessible group label */\n  label?: string;\n  /** Maximum rating (number of stars) */\n  max?: number;\n  /** Form field name */\n  name?: string;\n  /** Make rating read-only */\n  readonly?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n  /** Render selected stars as solid-filled instead of outline-only */\n  solid?: boolean;\n  /** Current rating value */\n  value?: number;\n};\n\n/**\n * A star rating input.\n *\n * @element ore-rating\n *\n * @attr {number} value - Current rating value (default: 0)\n * @attr {number} max - Maximum number of stars (default: 5)\n * @attr {boolean} readonly - Read-only display mode\n * @attr {boolean} disabled - Disabled state\n * @attr {string} label - aria-label for the group (default: 'Rating')\n * @attr {string} color - Theme color for filled stars: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} name - Form field name\n * @attr {boolean} solid - Fill selected stars (outline remains default when omitted)\n * @attr {string} helper - Helper text below the stars\n * @attr {string} error - Error message below the stars\n *\n * @fires input - Emitted when the rating changes.\n * @fires change - Emitted when the rating changes.\n *\n * @cssprop --rating-star-size - Star diameter\n * @cssprop --rating-color-empty - Empty star color\n * @cssprop --rating-color-filled - Filled star color\n * @cssprop --rating-gap - Gap between stars\n *\n * @part stars - Stars container.\n * @part star - Star item element.\n * @part helper-text - The helper/error text element.\n * @example\n * ```html\n * <ore-rating value=\"3\" max=\"5\" color=\"warning\"></ore-rating>\n * <ore-rating value=\"4\" solid></ore-rating>\n * ```\n */\nexport const RATING_TAG = 'ore-rating' as const;\ndefine<OreRatingProps>(RATING_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string('Rating'),\n    max: prop.number(5),\n    name: prop.string(),\n    readonly: prop.bool(false),\n    solid: prop.bool(false),\n    value: prop.number(0),\n  },\n  setup(props) {\n    const el = getHost();\n    const normalizedValue = computed(() => {\n      const max = Math.max(1, Number(props.max?.value) || 5);\n      const raw = Number(props.value?.value);\n      const safe = Number.isFinite(raw) ? raw : 0;\n\n      return Math.min(max, Math.max(0, safe));\n    });\n\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n\n    defineFieldValue(\n      el,\n      () => String(normalizedValue.value),\n      (value) => {\n        el.setAttribute('value', value);\n      },\n    );\n\n    useField({\n      disabled: isDisabled,\n      value: computed(() => String(normalizedValue.value || 0)),\n    });\n\n    const assistiveId = createStableId('helper');\n    const assistive = createErrorHelperState({ error: props.error, helper: props.helper });\n    const errorText = computed(() => assistive.value.errorText);\n    const helperText = computed(() => assistive.value.helperText);\n    const ariaDescribedBy = computed(() => (errorText.value || helperText.value ? assistiveId : null));\n\n    const isInteractive = computed(() => !props.readonly?.value && !isDisabled.value);\n    const hovered = signal<number | null>(null);\n    const displayValue = computed(() => hovered.value ?? normalizedValue.value);\n    const getStarButtons = () => {\n      return [...(el.shadowRoot?.querySelectorAll<HTMLButtonElement>('[data-star]') ?? [])];\n    };\n    const ratingControl = createSliderControl({\n      max: computed(() => Number(props.max?.value) || 5),\n      min: signal(1),\n      step: signal(1),\n    });\n\n    function spawnSparkles(star: number) {\n      const layer = el.shadowRoot?.querySelector<HTMLElement>('.sparkle-layer');\n      const btn = el.shadowRoot?.querySelector<HTMLElement>(`[data-star=\"${star}\"]`);\n\n      if (!layer || !btn) return;\n\n      const cx = btn.offsetLeft + btn.offsetWidth / 2;\n      const cy = btn.offsetTop + btn.offsetHeight / 2;\n      const count = 10;\n\n      for (let i = 0; i < count; i++) {\n        const p = document.createElement('span');\n        const angle = (360 / count) * i + (Math.random() * 30 - 15);\n        const dist = 18 + Math.random() * 20;\n        const size = 3 + Math.random() * 4;\n        const dur = 380 + Math.random() * 220;\n\n        p.className = 'sparkle';\n        p.style.cssText = [\n          `left:${cx}px`,\n          `top:${cy}px`,\n          `--_angle:${angle}deg`,\n          `--_dist:${dist}px`,\n          `width:${size}px`,\n          `height:${size}px`,\n          `--_dur:${dur}ms`,\n          `animation-delay:${Math.random() * 60}ms`,\n        ].join(';');\n        layer.appendChild(p);\n        p.addEventListener('animationend', () => p.remove(), { once: true });\n      }\n    }\n    function select(star: number, _originalEvent?: Event) {\n      if (!isInteractive.value) return;\n\n      const max = Math.max(1, Number(props.max?.value) || 5);\n      const nextValue = Math.min(max, Math.max(0, star));\n\n      if (nextValue === normalizedValue.value) return;\n\n      setFieldValue(el, String(nextValue));\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\n      spawnSparkles(nextValue);\n    }\n    function handleKeydown(e: KeyboardEvent, star: number) {\n      const next = ratingControl.nextFromKey(e.key, star);\n\n      if (next == null) return;\n\n      e.preventDefault();\n      select(next, e);\n\n      const buttons = getStarButtons();\n\n      buttons[next - 1]?.focus();\n    }\n\n    const stars = computed(() => {\n      const max = Number(props.max?.value) || 5;\n\n      return Array.from({ length: max }, (_, i) => i + 1);\n    });\n\n    bind({ attr: { size: props.size } });\n\n    return html`\n      <div\n        class=\"stars\"\n        part=\"stars\"\n        role=\"radiogroup\"\n        aria-label=\"${props.label}\"\n        aria-describedby=\"${ariaDescribedBy}\">\n        ${() =>\n          stars.value.map(\n            (star) => html`\n              <button\n                class=\"star-btn\"\n                part=\"star\"\n                type=\"button\"\n                role=\"radio\"\n                aria-label=\"${() => `${star} ${star === 1 ? 'star' : 'stars'}`}\"\n                aria-checked=\"${() => String(star === normalizedValue.value)}\"\n                data-star=\"${star}\"\n                ?data-filled=\"${() => star <= displayValue.value}\"\n                disabled=\"${() => (!isInteractive.value ? true : null)}\"\n                @click=\"${(e: Event) => select(star, e)}\"\n                @pointerenter=\"${() => {\n                  if (isInteractive.value) hovered.value = star;\n                }}\"\n                @pointerleave=\"${() => {\n                  hovered.value = null;\n                }}\"\n                @keydown=\"${(e: KeyboardEvent) => handleKeydown(e, star)}\">\n                <ore-icon name=\"star\" size=\"var(--_star-size)\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n              </button>\n            `,\n          )}\n        <div class=\"sparkle-layer\"></div>\n      </div>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin({}), coarsePointerMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}