@vielzeug/refine 1.5.4 → 1.8.0

package/dist/radio-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.cjs","names":[],"sources":["../src/inputs/radio-group/radio-group.ts"],"sourcesContent":["import {\n  createContext,\n  createStableId,\n  define,\n  html,\n  inject,\n  prop,\n  bind,\n  getHost,\n  onCleanup,\n  provide,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { type Readable } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport {\n  type ChoiceChangeDetail,\n  lifecycleSignal,\n  createChoiceField,\n  createListControl,\n  getChoiceLabel,\n  getLightChildrenByTag,\n} from '../../headless';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './radio-group.css?inline';\n\n/** Radio group component properties */\nexport type OreRadioGroupProps = {\n  /** Theme color tint */\n  color?: ThemeColor;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Error message text */\n  error?: string;\n  /** Helper text displayed below the items */\n  helper?: string;\n  /** Group label text */\n  label?: string;\n  /** Form field name */\n  name?: string;\n  /** Layout orientation */\n  orientation?: 'horizontal' | 'vertical';\n  /** Required field */\n  required?: boolean;\n  /** Items size preset */\n  size?: ComponentSize;\n  /** Initial selected value */\n  value?: string;\n};\n\nexport type RadioGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  disabled: Readable<boolean>;\n  name: Readable<string | undefined>;\n  select: (value: string, originalEvent?: Event) => void;\n  size: Readable<ComponentSize | undefined>;\n  value: Readable<string | undefined>;\n};\n\nexport const RADIO_GROUP_CTX = createContext<RadioGroupContext | undefined>('OreRadioGroup');\n\n/** Events emitted by the radio-group component */\nexport type OreRadioGroupEvents = {\n  /** Emitted when the selection changes */\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A group of radio buttons that allows users to select a single option from a set.\n * Supports keyboard navigation (arrows) and automatic value management.\n *\n * @element ore-radio-group\n *\n * @attr {string} value - Selected value\n * @attr {string} name - Form field name\n * @attr {string} label - Group label\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when a radio is selected. detail: { values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-radio` elements here\n *\n * @cssprop --radio-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --radio-group-gap - Gap between radio items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-radio-group name=\"plan\" label=\"Choose a plan\" value=\"free\" required>\n *   <ore-radio value=\"free\">Free</ore-radio>\n *   <ore-radio value=\"pro\">Pro</ore-radio>\n *   <ore-radio value=\"enterprise\">Enterprise</ore-radio>\n * </ore-radio-group>\n * <ore-radio-group name=\"direction\" orientation=\"horizontal\" color=\"primary\">\n *   <ore-radio value=\"left\">Left</ore-radio>\n *   <ore-radio value=\"right\">Right</ore-radio>\n * </ore-radio-group>\n * ```\n */\nexport const RADIO_GROUP_TAG = 'ore-radio-group' as const;\ndefine<OreRadioGroupProps>(RADIO_GROUP_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string(),\n    name: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'vertical'),\n    required: prop.bool(false),\n    // Not auto-reflected (`reflect: false`) — the derived, interaction-updated selection\n    // (`selectedValue`) is the single writer for this attribute, via `bind()` below; letting\n    // `prop.string()`'s own default reflection also write the raw incoming value would leave\n    // two effects racing to set the same attribute from different sources.\n    value: { ...prop.string(), reflect: false },\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreRadioGroupEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    const choice = createChoiceField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      helper: props.helper,\n      label: props.label,\n      prefix: 'radio-group',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    choice.attachFormField(\n      useField<string>({\n        disabled: choice.disabled,\n        onReset: choice.reset,\n        toFormValue: (v) => v,\n        validationMessage: choice.validationMessage,\n        validity: choice.validity,\n        value: choice.formValue,\n      }),\n    );\n\n    const selectedValue = choice.selectedValue;\n    const isDisabled = fCtxProps.disabled;\n\n    bind({\n      attr: {\n        size: fCtxProps.size,\n        value: () => selectedValue.value || null,\n      },\n    });\n\n    const getSlottedRadios = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-radio');\n\n    const getEnabledRadios = (): HTMLElement[] =>\n      isDisabled.value ? [] : getSlottedRadios().filter((radio) => !radio.hasAttribute('disabled'));\n\n    const getLabelForValue = (value: string): string => getChoiceLabel(getSlottedRadios(), value);\n\n    const selectRadio = (val: string, originalEvent?: Event): void => {\n      choice.setValues(val ? [val] : []);\n\n      const labels = val ? [getLabelForValue(val)] : [];\n      const values = val ? [val] : [];\n\n      emit('change', { labels, originalEvent, values });\n      choice.triggerValidation('blur');\n    };\n\n    provide(RADIO_GROUP_CTX, {\n      color: props.color as Readable<ThemeColor | undefined>,\n      disabled: isDisabled,\n      name: props.name,\n      select: selectRadio,\n      size: props.size as Readable<ComponentSize | undefined>,\n      value: selectedValue,\n    });\n\n    // Sync name/color/size/disabled/checked onto slotted ore-radio children.\n    watch(() => {\n      void slots.elements().value;\n      void selectedValue.value;\n\n      const radios = getSlottedRadios();\n\n      for (const radio of radios) {\n        const val = radio.getAttribute('value') ?? '';\n\n        radio.toggleAttribute('checked', val === selectedValue.value);\n\n        if (props.name.value) radio.setAttribute('name', props.name.value);\n        else radio.removeAttribute('name');\n\n        if (props.color.value) radio.setAttribute('color', props.color.value);\n        else radio.removeAttribute('color');\n\n        if (props.size.value) radio.setAttribute('size', props.size.value);\n        else radio.removeAttribute('size');\n\n        radio.toggleAttribute('disabled', isDisabled.value);\n      }\n    });\n\n    // Roving tabindex: only the selected (or first) radio is tabbable.\n    watch(() => {\n      void slots.elements().value;\n\n      const radios = getSlottedRadios();\n      let hasFocusable = false;\n\n      for (const radio of radios) {\n        const isSelected = radio.getAttribute('value') === selectedValue.value;\n\n        radio.setAttribute('tabindex', isSelected && !isDisabled.value ? '0' : '-1');\n\n        if (isSelected && !isDisabled.value) hasFocusable = true;\n      }\n\n      if (!hasFocusable && radios.length > 0) {\n        const first = radios.find((r) => !r.hasAttribute('disabled'));\n\n        if (first) first.setAttribute('tabindex', '0');\n      }\n    });\n\n    const listControl = createListControl<HTMLElement>({\n      getItems: getEnabledRadios,\n      keys: { next: ['ArrowDown', 'ArrowRight'], prev: ['ArrowUp', 'ArrowLeft'] },\n      loop: true,\n      onNavigate: (_action, index, event) => {\n        const radio = getEnabledRadios()[index];\n\n        if (!radio) return;\n\n        radio.focus();\n\n        if (radio.tagName === 'ORE-RADIO') {\n          selectRadio(radio.getAttribute('value') ?? '', event);\n        }\n      },\n    });\n\n    bind({\n      on: {\n        change: (e: Event) => {\n          if (e.target === el) return;\n\n          e.stopPropagation();\n          selectRadio((e.target as HTMLElement).getAttribute('value') ?? '', e);\n        },\n        keydown: (e: KeyboardEvent) => {\n          const radios = getEnabledRadios();\n\n          if (!radios.length) return;\n\n          const focused = radios.indexOf(document.activeElement as HTMLElement);\n\n          if (focused === -1) return;\n\n          listControl.set(focused);\n          listControl.handleKeydown(e);\n        },\n      },\n    });\n\n    const legendId = createStableId('radio-group-legend');\n\n    return html`\n      <fieldset\n        role=\"radiogroup\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        :aria-invalid=\"${choice.ariaInvalid}\"\n        :aria-errormessage=\"${choice.ariaErrorMessage}\"\n        :aria-describedby=\"${choice.ariaDescribedBy}\">\n        <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n          ${props.label}${when(\n            () => Boolean(props.required.value),\n            () => html`<span aria-hidden=\"true\"> *</span>`,\n          )}\n        </legend>\n        <div class=\"radio-group-items\" part=\"items\">\n          <slot></slot>\n        </div>\n        <div\n          class=\"helper-text\"\n          part=\"helper\"\n          id=\"${choice.assistiveId}\"\n          :role=\"${() => (choice.errorText.value ? 'alert' : null)}\"\n          aria-live=\"polite\"\n          ?hidden=\"${() => !choice.errorText.value && !choice.helperText.value}\">\n          ${() => choice.errorText.value || choice.helperText.value}\n        </div>\n      </fieldset>\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin(), disabledStateMixin, componentStyles],\n});\n"],"mappings":"2mBAmEA,IAAa,GAAA,EAAA,EAAA,cAAA,CAA+D,eAAe,EAwC9E,EAAkB,+BACJ,EAAiB,CAC1C,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,EACnB,KAAM,EAAA,KAAK,OAAO,EAClB,YAAa,EAAA,KAAK,MAAM,CAAC,aAAc,UAAU,EAAY,UAAU,EACvE,SAAU,EAAA,KAAK,KAAK,EAAK,EAKzB,MAAO,CAAE,GAAG,EAAA,KAAK,OAAO,EAAG,QAAS,EAAM,CAC5C,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAa,EACb,GAAA,EAAA,EAAA,QAAA,CAAoC,EACpC,GAAA,EAAA,EAAA,SAAA,CAAiB,EACjB,EAAQ,EAAA,YAER,GAAA,EAAA,EAAA,OAAA,CAAiB,EAAA,QAAQ,EACzB,EAAY,EAAA,eAAe,EAAO,CAAO,EAEzC,EAAS,EAAA,kBAAkB,CAC/B,SAAU,EAAU,SACpB,MAAO,EAAM,MACb,OAAQ,EAAM,OACd,MAAO,EAAM,MACb,OAAQ,cACR,SAAU,EAAM,SAChB,OAAQ,EAAA,gBAAgB,EAAA,SAAS,EACjC,WAAY,GAAS,WACrB,MAAO,EAAM,KACf,CAAC,EAED,EAAO,iBAAA,EAAA,EAAA,SAAA,CACY,CACf,SAAU,EAAO,SACjB,QAAS,EAAO,MAChB,YAAc,GAAM,EACpB,kBAAmB,EAAO,kBAC1B,SAAU,EAAO,SACjB,MAAO,EAAO,SAChB,CAAC,CACH,EAEA,IAAM,EAAgB,EAAO,cACvB,EAAa,EAAU,UAE7B,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,KAAM,EAAU,KAChB,UAAa,EAAc,OAAS,IACtC,CACF,CAAC,EAED,IAAM,MAAwC,EAAA,sBAAsB,EAAI,WAAW,EAE7E,MACJ,EAAW,MAAQ,CAAC,EAAI,EAAiB,CAAC,CAAC,OAAQ,GAAU,CAAC,EAAM,aAAa,UAAU,CAAC,EAExF,EAAoB,GAA0B,EAAA,eAAe,EAAiB,EAAG,CAAK,EAEtF,GAAe,EAAa,IAAgC,CAChE,EAAO,UAAU,EAAM,CAAC,CAAG,EAAI,CAAC,CAAC,EAEjC,IAAM,EAAS,EAAM,CAAC,EAAiB,CAAG,CAAC,EAAI,CAAC,EAGhD,EAAK,SAAU,CAAE,SAAQ,gBAAe,OAFzB,EAAM,CAAC,CAAG,EAAI,CAAC,CAEiB,CAAC,EAChD,EAAO,kBAAkB,MAAM,CACjC,GAEA,EAAA,EAAA,QAAA,CAAQ,EAAiB,CACvB,MAAO,EAAM,MACb,SAAU,EACV,KAAM,EAAM,KACZ,OAAQ,EACR,KAAM,EAAM,KACZ,MAAO,CACT,CAAC,EAGD,MAAY,CACV,EAAW,SAAS,CAAC,CAAC,MACtB,EAAmB,MAEnB,IAAM,EAAS,EAAiB,EAEhC,IAAK,IAAM,KAAS,EAAQ,CAC1B,IAAM,EAAM,EAAM,aAAa,OAAO,GAAK,GAE3C,EAAM,gBAAgB,UAAW,IAAQ,EAAc,KAAK,EAExD,EAAM,KAAK,MAAO,EAAM,aAAa,OAAQ,EAAM,KAAK,KAAK,EAC5D,EAAM,gBAAgB,MAAM,EAE7B,EAAM,MAAM,MAAO,EAAM,aAAa,QAAS,EAAM,MAAM,KAAK,EAC/D,EAAM,gBAAgB,OAAO,EAE9B,EAAM,KAAK,MAAO,EAAM,aAAa,OAAQ,EAAM,KAAK,KAAK,EAC5D,EAAM,gBAAgB,MAAM,EAEjC,EAAM,gBAAgB,WAAY,EAAW,KAAK,CACpD,CACF,CAAC,EAGD,MAAY,CACV,EAAW,SAAS,CAAC,CAAC,MAEtB,IAAM,EAAS,EAAiB,EAC5B,EAAe,GAEnB,IAAK,IAAM,KAAS,EAAQ,CAC1B,IAAM,EAAa,EAAM,aAAa,OAAO,IAAM,EAAc,MAEjE,EAAM,aAAa,WAAY,GAAc,CAAC,EAAW,MAAQ,IAAM,IAAI,EAEvE,GAAc,CAAC,EAAW,QAAO,EAAe,GACtD,CAEA,GAAI,CAAC,GAAgB,EAAO,OAAS,EAAG,CACtC,IAAM,EAAQ,EAAO,KAAM,GAAM,CAAC,EAAE,aAAa,UAAU,CAAC,EAExD,GAAO,EAAM,aAAa,WAAY,GAAG,CAC/C,CACF,CAAC,EAED,IAAM,EAAc,EAAA,kBAA+B,CACjD,SAAU,EACV,KAAM,CAAE,KAAM,CAAC,YAAa,YAAY,EAAG,KAAM,CAAC,UAAW,WAAW,CAAE,EAC1E,KAAM,GACN,YAAa,EAAS,EAAO,IAAU,CACrC,IAAM,EAAQ,EAAiB,CAAC,CAAC,GAE5B,IAEL,EAAM,MAAM,EAER,EAAM,UAAY,aACpB,EAAY,EAAM,aAAa,OAAO,GAAK,GAAI,CAAK,EAExD,CACF,CAAC,GAED,EAAA,EAAA,KAAA,CAAK,CACH,GAAI,CACF,OAAS,GAAa,CAChB,EAAE,SAAW,IAEjB,EAAE,gBAAgB,EAClB,EAAa,EAAE,OAAuB,aAAa,OAAO,GAAK,GAAI,CAAC,EACtE,EACA,QAAU,GAAqB,CAC7B,IAAM,EAAS,EAAiB,EAEhC,GAAI,CAAC,EAAO,OAAQ,OAEpB,IAAM,EAAU,EAAO,QAAQ,SAAS,aAA4B,EAEhE,IAAY,KAEhB,EAAY,IAAI,CAAO,EACvB,EAAY,cAAc,CAAC,EAC7B,CACF,CACF,CAAC,EAED,IAAM,GAAA,EAAA,EAAA,eAAA,CAA0B,oBAAoB,EAEpD,MAAO,GAAA,IAAI;;;6BAGgB,OAAO,EAAQ,EAAM,SAAS,KAAM,EAAE;yBAC5C,EAAO,YAAY;8BACd,EAAO,iBAAiB;6BACzB,EAAO,gBAAgB;sBAC9B,EAAS,gBAAkB,CAAC,EAAM,MAAM,MAAM;YACxD,EAAM,SAAA,EAAA,EAAA,KAAA,KACA,EAAQ,EAAM,SAAS,UACvB,EAAA,IAAI,oCACZ,EAAE;;;;;;;;gBAQI,EAAO,YAAY;uBACT,EAAO,UAAU,MAAQ,QAAU,KAAM;;yBAExC,CAAC,EAAO,UAAU,OAAS,CAAC,EAAO,WAAW,MAAM;gBAC7D,EAAO,UAAU,OAAS,EAAO,WAAW,MAAM;;;KAIlE,EACA,OAAQ,CAAC,EAAA,gBAAiB,EAAA,iBAAiB,EAAG,EAAA,mBAAoB,EAAA,OAAe,CACnF,CAAC"}
+{"version":3,"file":"radio-group.cjs","names":[],"sources":["../src/inputs/radio-group/radio-group.ts"],"sourcesContent":["import {\n  createContext,\n  createStableId,\n  define,\n  html,\n  inject,\n  prop,\n  bind,\n  getHost,\n  onCleanup,\n  provide,\n  useEmit,\n  useSlots,\n  watchEffect,\n  when,\n} from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { type Readable } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport {\n  type ChoiceChangeDetail,\n  lifecycleSignal,\n  createChoiceField,\n  createListControl,\n  getChoiceLabel,\n  getLightChildrenByTag,\n} from '../../headless';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { disabledStateMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './radio-group.css?inline';\n\n/** Radio group component properties */\nexport type OreRadioGroupProps = {\n  /** Theme color tint */\n  color?: ThemeColor;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Error message text */\n  error?: string;\n  /** Helper text displayed below the items */\n  helper?: string;\n  /** Group label text */\n  label?: string;\n  /** Form field name */\n  name?: string;\n  /** Layout orientation */\n  orientation?: 'horizontal' | 'vertical';\n  /** Required field */\n  required?: boolean;\n  /** Items size preset */\n  size?: ComponentSize;\n  /** Initial selected value */\n  value?: string;\n};\n\nexport type RadioGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  disabled: Readable<boolean>;\n  name: Readable<string | undefined>;\n  select: (value: string, originalEvent?: Event) => void;\n  size: Readable<ComponentSize | undefined>;\n  value: Readable<string | undefined>;\n};\n\nexport const RADIO_GROUP_CTX = createContext<RadioGroupContext | undefined>('OreRadioGroup');\n\n/** Events emitted by the radio-group component */\nexport type OreRadioGroupEvents = {\n  /** Emitted when the selection changes */\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A group of radio buttons that allows users to select a single option from a set.\n * Supports keyboard navigation (arrows) and automatic value management.\n *\n * @element ore-radio-group\n *\n * @attr {string} value - Selected value\n * @attr {string} name - Form field name\n * @attr {string} label - Group label\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when a radio is selected. detail: { values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-radio` elements here\n *\n * @cssprop --radio-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --radio-group-gap - Gap between radio items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-radio-group name=\"plan\" label=\"Choose a plan\" value=\"free\" required>\n *   <ore-radio value=\"free\">Free</ore-radio>\n *   <ore-radio value=\"pro\">Pro</ore-radio>\n *   <ore-radio value=\"enterprise\">Enterprise</ore-radio>\n * </ore-radio-group>\n * <ore-radio-group name=\"direction\" orientation=\"horizontal\" color=\"primary\">\n *   <ore-radio value=\"left\">Left</ore-radio>\n *   <ore-radio value=\"right\">Right</ore-radio>\n * </ore-radio-group>\n * ```\n */\nexport const RADIO_GROUP_TAG = 'ore-radio-group' as const;\ndefine<OreRadioGroupProps>(RADIO_GROUP_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string(),\n    name: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'vertical'),\n    required: prop.bool(false),\n    // Not auto-reflected (`reflect: false`) — the derived, interaction-updated selection\n    // (`selectedValue`) is the single writer for this attribute, via `bind()` below; letting\n    // `prop.string()`'s own default reflection also write the raw incoming value would leave\n    // two effects racing to set the same attribute from different sources.\n    value: { ...prop.string(), reflect: false },\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreRadioGroupEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    const choice = createChoiceField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      helper: props.helper,\n      label: props.label,\n      prefix: 'radio-group',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    choice.attachFormField(\n      useField<string>({\n        disabled: choice.disabled,\n        onReset: choice.reset,\n        toFormValue: (v) => v,\n        validationMessage: choice.validationMessage,\n        validity: choice.validity,\n        value: choice.formValue,\n      }),\n    );\n\n    const selectedValue = choice.selectedValue;\n    const isDisabled = fCtxProps.disabled;\n\n    bind({\n      attr: {\n        size: fCtxProps.size,\n        value: () => selectedValue.value || null,\n      },\n    });\n\n    const getSlottedRadios = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-radio');\n\n    const getEnabledRadios = (): HTMLElement[] =>\n      isDisabled.value ? [] : getSlottedRadios().filter((radio) => !radio.hasAttribute('disabled'));\n\n    const getLabelForValue = (value: string): string => getChoiceLabel(getSlottedRadios(), value);\n\n    const selectRadio = (val: string, originalEvent?: Event): void => {\n      choice.setValues(val ? [val] : []);\n\n      const labels = val ? [getLabelForValue(val)] : [];\n      const values = val ? [val] : [];\n\n      emit('change', { labels, originalEvent, values });\n      choice.triggerValidation('blur');\n    };\n\n    provide(RADIO_GROUP_CTX, {\n      color: props.color as Readable<ThemeColor | undefined>,\n      disabled: isDisabled,\n      name: props.name,\n      select: selectRadio,\n      size: props.size as Readable<ComponentSize | undefined>,\n      value: selectedValue,\n    });\n\n    // Sync name/color/size/disabled/checked onto slotted ore-radio children.\n    watch(() => {\n      void slots.elements().value;\n      void selectedValue.value;\n\n      const radios = getSlottedRadios();\n\n      for (const radio of radios) {\n        const val = radio.getAttribute('value') ?? '';\n\n        radio.toggleAttribute('checked', val === selectedValue.value);\n\n        if (props.name.value) radio.setAttribute('name', props.name.value);\n        else radio.removeAttribute('name');\n\n        if (props.color.value) radio.setAttribute('color', props.color.value);\n        else radio.removeAttribute('color');\n\n        if (props.size.value) radio.setAttribute('size', props.size.value);\n        else radio.removeAttribute('size');\n\n        radio.toggleAttribute('disabled', isDisabled.value);\n      }\n    });\n\n    // Roving tabindex: only the selected (or first) radio is tabbable.\n    watch(() => {\n      void slots.elements().value;\n\n      const radios = getSlottedRadios();\n      let hasFocusable = false;\n\n      for (const radio of radios) {\n        const isSelected = radio.getAttribute('value') === selectedValue.value;\n\n        radio.setAttribute('tabindex', isSelected && !isDisabled.value ? '0' : '-1');\n\n        if (isSelected && !isDisabled.value) hasFocusable = true;\n      }\n\n      if (!hasFocusable && radios.length > 0) {\n        const first = radios.find((r) => !r.hasAttribute('disabled'));\n\n        if (first) first.setAttribute('tabindex', '0');\n      }\n    });\n\n    const listControl = createListControl<HTMLElement>({\n      getItems: getEnabledRadios,\n      keys: { next: ['ArrowDown', 'ArrowRight'], prev: ['ArrowUp', 'ArrowLeft'] },\n      loop: true,\n      onNavigate: (_action, index, event) => {\n        const radio = getEnabledRadios()[index];\n\n        if (!radio) return;\n\n        radio.focus();\n\n        if (radio.tagName === 'ORE-RADIO') {\n          selectRadio(radio.getAttribute('value') ?? '', event);\n        }\n      },\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    bind({\n      on: {\n        change: (e: Event) => {\n          if (e.target === el) return;\n\n          e.stopPropagation();\n          selectRadio((e.target as HTMLElement).getAttribute('value') ?? '', e);\n        },\n        keydown: (e: KeyboardEvent) => {\n          const radios = getEnabledRadios();\n\n          if (!radios.length) return;\n\n          const focused = radios.indexOf(document.activeElement as HTMLElement);\n\n          if (focused === -1) return;\n\n          listControl.set(focused);\n          listControl.handleKeydown(e);\n        },\n      },\n    });\n\n    const legendId = createStableId('radio-group-legend');\n\n    return html`\n      <fieldset\n        role=\"radiogroup\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        :aria-invalid=\"${choice.ariaInvalid}\"\n        :aria-errormessage=\"${choice.ariaErrorMessage}\"\n        :aria-describedby=\"${choice.ariaDescribedBy}\">\n        <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n          ${props.label}${when(\n            () => Boolean(props.required.value),\n            () => html`<span aria-hidden=\"true\"> *</span>`,\n          )}\n        </legend>\n        <div class=\"radio-group-items\" part=\"items\">\n          <slot></slot>\n        </div>\n        <div\n          class=\"helper-text\"\n          part=\"helper\"\n          id=\"${choice.assistiveId}\"\n          :role=\"${() => (choice.errorText.value ? 'alert' : null)}\"\n          aria-live=\"polite\"\n          ?hidden=\"${() => !choice.errorText.value && !choice.helperText.value}\">\n          ${() => choice.errorText.value || choice.helperText.value}\n        </div>\n      </fieldset>\n    `;\n  },\n  styles: [disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/radio-group.js

@@ -1,97 +1,94 @@
-import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
-import { disabledStateMixin as t } from "./styles/mixins/states.css.js";
-import { colorThemeMixin as n } from "./styles/mixins/theme.css.js";
-import { disablableBundle as r, sizableBundle as i, themableBundle as a } from "./shared/prop-bundles.js";
-import { lifecycleSignal as o } from "./headless/ore.js";
-import { createChoiceField as s } from "./headless/choice-field.js";
-import { createListControl as c } from "./headless/nav.js";
-import { getChoiceLabel as l, getLightChildrenByTag as u } from "./headless/light-dom.js";
-import { FORM_CTX as d, useFormContext as f } from "./inputs/shared/form-context.js";
-import p from "./inputs/radio-group/radio-group.css.js";
-import { bind as m, createContext as h, createStableId as g, define as _, getHost as v, html as y, inject as b, onCleanup as x, prop as S, provide as C, useEmit as w, useSlots as T, watchEffect as E } from "@vielzeug/ore";
-import { when as D } from "@vielzeug/ore/directives";
+import { disabledStateMixin as e } from "./styles/mixins/states.css.js";
+import { disablableBundle as t, sizableBundle as n, themableBundle as r } from "./shared/prop-bundles.js";
+import { lifecycleSignal as i } from "./headless/ore.js";
+import { createChoiceField as a } from "./headless/choice-field.js";
+import { createListControl as o } from "./headless/nav.js";
+import { getChoiceLabel as s, getLightChildrenByTag as c } from "./headless/light-dom.js";
+import { FORM_CTX as l, useFormContext as u } from "./inputs/shared/form-context.js";
+import d from "./inputs/radio-group/radio-group.css.js";
+import { bind as f, createContext as p, createStableId as m, define as h, getHost as g, html as _, inject as v, onCleanup as y, prop as b, provide as x, useEmit as S, useSlots as C, watchEffect as w, when as T } from "@vielzeug/ore";
 import "@vielzeug/ripple";
-import { useField as O } from "@vielzeug/ore/forms";
+import { useField as E } from "@vielzeug/ore/forms";
 //#region src/inputs/radio-group/radio-group.ts
-var k = h("OreRadioGroup"), A = "ore-radio-group";
-_(A, {
+var D = p("OreRadioGroup"), O = "ore-radio-group";
+h(O, {
 	formAssociated: !0,
 	props: {
-		...a,
-		...i,
 		...r,
-		error: S.string(),
-		helper: S.string(),
-		label: S.string(),
-		name: S.string(),
-		orientation: S.oneOf(["horizontal", "vertical"], "vertical"),
-		required: S.bool(!1),
+		...n,
+		...t,
+		error: b.string(),
+		helper: b.string(),
+		label: b.string(),
+		name: b.string(),
+		orientation: b.oneOf(["horizontal", "vertical"], "vertical"),
+		required: b.bool(!1),
 		value: {
-			...S.string(),
+			...b.string(),
 			reflect: !1
 		}
 	},
 	setup(e) {
-		let t = v(), n = w(), r = T(), i = E, a = b(d), p = f(e, a), h = s({
-			disabled: p.disabled,
+		let t = g(), n = S(), r = C(), d = w, p = v(l), h = u(e, p), b = a({
+			disabled: h.disabled,
 			error: e.error,
 			helper: e.helper,
 			label: e.label,
 			prefix: "radio-group",
 			required: e.required,
-			signal: o(x),
-			validateOn: a?.validateOn,
+			signal: i(y),
+			validateOn: p?.validateOn,
 			value: e.value
 		});
-		h.attachFormField(O({
-			disabled: h.disabled,
-			onReset: h.reset,
+		b.attachFormField(E({
+			disabled: b.disabled,
+			onReset: b.reset,
 			toFormValue: (e) => e,
-			validationMessage: h.validationMessage,
-			validity: h.validity,
-			value: h.formValue
+			validationMessage: b.validationMessage,
+			validity: b.validity,
+			value: b.formValue
 		}));
-		let _ = h.selectedValue, S = p.disabled;
-		m({ attr: {
-			size: p.size,
-			value: () => _.value || null
+		let O = b.selectedValue, k = h.disabled;
+		f({ attr: {
+			size: h.size,
+			value: () => O.value || null
 		} });
-		let A = () => u(t, "ore-radio"), j = () => S.value ? [] : A().filter((e) => !e.hasAttribute("disabled")), M = (e) => l(A(), e), N = (e, t) => {
-			h.setValues(e ? [e] : []);
+		let A = () => c(t, "ore-radio"), j = () => k.value ? [] : A().filter((e) => !e.hasAttribute("disabled")), M = (e) => s(A(), e), N = (e, t) => {
+			b.setValues(e ? [e] : []);
 			let r = e ? [M(e)] : [];
 			n("change", {
 				labels: r,
 				originalEvent: t,
 				values: e ? [e] : []
-			}), h.triggerValidation("blur");
+			}), b.triggerValidation("blur");
 		};
-		C(k, {
+		x(D, {
 			color: e.color,
-			disabled: S,
+			disabled: k,
 			name: e.name,
 			select: N,
 			size: e.size,
-			value: _
-		}), i(() => {
-			r.elements().value, _.value;
+			value: O
+		}), d(() => {
+			r.elements().value, O.value;
 			let t = A();
 			for (let n of t) {
 				let t = n.getAttribute("value") ?? "";
-				n.toggleAttribute("checked", t === _.value), e.name.value ? n.setAttribute("name", e.name.value) : n.removeAttribute("name"), e.color.value ? n.setAttribute("color", e.color.value) : n.removeAttribute("color"), e.size.value ? n.setAttribute("size", e.size.value) : n.removeAttribute("size"), n.toggleAttribute("disabled", S.value);
+				n.toggleAttribute("checked", t === O.value), e.name.value ? n.setAttribute("name", e.name.value) : n.removeAttribute("name"), e.color.value ? n.setAttribute("color", e.color.value) : n.removeAttribute("color"), e.size.value ? n.setAttribute("size", e.size.value) : n.removeAttribute("size"), n.toggleAttribute("disabled", k.value);
 			}
-		}), i(() => {
+		}), d(() => {
 			r.elements().value;
 			let e = A(), t = !1;
 			for (let n of e) {
-				let e = n.getAttribute("value") === _.value;
-				n.setAttribute("tabindex", e && !S.value ? "0" : "-1"), e && !S.value && (t = !0);
+				let e = n.getAttribute("value") === O.value;
+				n.setAttribute("tabindex", e && !k.value ? "0" : "-1"), e && !k.value && (t = !0);
 			}
 			if (!t && e.length > 0) {
 				let t = e.find((e) => !e.hasAttribute("disabled"));
 				t && t.setAttribute("tabindex", "0");
 			}
 		});
-		let P = c({
+		let P = o({
 			getItems: j,
 			keys: {
 				next: ["ArrowDown", "ArrowRight"],
@@ -101,9 +98,10 @@ _(A, {
 			onNavigate: (e, t, n) => {
 				let r = j()[t];
 				r && (r.focus(), r.tagName === "ORE-RADIO" && N(r.getAttribute("value") ?? "", n));
-			}
+			},
+			signal: i(y)
 		});
-		m({ on: {
+		f({ on: {
 			change: (e) => {
 				e.target !== t && (e.stopPropagation(), N(e.target.getAttribute("value") ?? "", e));
 			},
@@ -114,16 +112,16 @@ _(A, {
 				n !== -1 && (P.set(n), P.handleKeydown(e));
 			}
 		} });
-		let F = g("radio-group-legend");
-		return y`
+		let F = m("radio-group-legend");
+		return _`
       <fieldset
         role="radiogroup"
         aria-required="${() => String(!!e.required.value)}"
-        :aria-invalid="${h.ariaInvalid}"
-        :aria-errormessage="${h.ariaErrorMessage}"
-        :aria-describedby="${h.ariaDescribedBy}">
+        :aria-invalid="${b.ariaInvalid}"
+        :aria-errormessage="${b.ariaErrorMessage}"
+        :aria-describedby="${b.ariaDescribedBy}">
         <legend id="${F}" ?hidden=${() => !e.label.value}>
-          ${e.label}${D(() => !!e.required.value, () => y`<span aria-hidden="true"> *</span>`)}
+          ${e.label}${T(() => !!e.required.value, () => _`<span aria-hidden="true"> *</span>`)}
         </legend>
         <div class="radio-group-items" part="items">
           <slot></slot>
@@ -131,23 +129,18 @@ _(A, {
         <div
           class="helper-text"
           part="helper"
-          id="${h.assistiveId}"
-          :role="${() => h.errorText.value ? "alert" : null}"
+          id="${b.assistiveId}"
+          :role="${() => b.errorText.value ? "alert" : null}"
           aria-live="polite"
-          ?hidden="${() => !h.errorText.value && !h.helperText.value}">
-          ${() => h.errorText.value || h.helperText.value}
+          ?hidden="${() => !b.errorText.value && !b.helperText.value}">
+          ${() => b.errorText.value || b.helperText.value}
         </div>
       </fieldset>
     `;
 	},
-	styles: [
-		n,
-		e(),
-		t,
-		p
-	]
+	styles: [e, d]
 });
 //#endregion
-export { k as RADIO_GROUP_CTX, A as RADIO_GROUP_TAG };
+export { D as RADIO_GROUP_CTX, O as RADIO_GROUP_TAG };
 
 //# sourceMappingURL=radio-group.js.map

package/dist/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","names":[],"sources":["../src/inputs/radio-group/radio-group.ts"],"sourcesContent":["import {\n  createContext,\n  createStableId,\n  define,\n  html,\n  inject,\n  prop,\n  bind,\n  getHost,\n  onCleanup,\n  provide,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { type Readable } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport {\n  type ChoiceChangeDetail,\n  lifecycleSignal,\n  createChoiceField,\n  createListControl,\n  getChoiceLabel,\n  getLightChildrenByTag,\n} from '../../headless';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './radio-group.css?inline';\n\n/** Radio group component properties */\nexport type OreRadioGroupProps = {\n  /** Theme color tint */\n  color?: ThemeColor;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Error message text */\n  error?: string;\n  /** Helper text displayed below the items */\n  helper?: string;\n  /** Group label text */\n  label?: string;\n  /** Form field name */\n  name?: string;\n  /** Layout orientation */\n  orientation?: 'horizontal' | 'vertical';\n  /** Required field */\n  required?: boolean;\n  /** Items size preset */\n  size?: ComponentSize;\n  /** Initial selected value */\n  value?: string;\n};\n\nexport type RadioGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  disabled: Readable<boolean>;\n  name: Readable<string | undefined>;\n  select: (value: string, originalEvent?: Event) => void;\n  size: Readable<ComponentSize | undefined>;\n  value: Readable<string | undefined>;\n};\n\nexport const RADIO_GROUP_CTX = createContext<RadioGroupContext | undefined>('OreRadioGroup');\n\n/** Events emitted by the radio-group component */\nexport type OreRadioGroupEvents = {\n  /** Emitted when the selection changes */\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A group of radio buttons that allows users to select a single option from a set.\n * Supports keyboard navigation (arrows) and automatic value management.\n *\n * @element ore-radio-group\n *\n * @attr {string} value - Selected value\n * @attr {string} name - Form field name\n * @attr {string} label - Group label\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when a radio is selected. detail: { values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-radio` elements here\n *\n * @cssprop --radio-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --radio-group-gap - Gap between radio items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-radio-group name=\"plan\" label=\"Choose a plan\" value=\"free\" required>\n *   <ore-radio value=\"free\">Free</ore-radio>\n *   <ore-radio value=\"pro\">Pro</ore-radio>\n *   <ore-radio value=\"enterprise\">Enterprise</ore-radio>\n * </ore-radio-group>\n * <ore-radio-group name=\"direction\" orientation=\"horizontal\" color=\"primary\">\n *   <ore-radio value=\"left\">Left</ore-radio>\n *   <ore-radio value=\"right\">Right</ore-radio>\n * </ore-radio-group>\n * ```\n */\nexport const RADIO_GROUP_TAG = 'ore-radio-group' as const;\ndefine<OreRadioGroupProps>(RADIO_GROUP_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string(),\n    name: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'vertical'),\n    required: prop.bool(false),\n    // Not auto-reflected (`reflect: false`) — the derived, interaction-updated selection\n    // (`selectedValue`) is the single writer for this attribute, via `bind()` below; letting\n    // `prop.string()`'s own default reflection also write the raw incoming value would leave\n    // two effects racing to set the same attribute from different sources.\n    value: { ...prop.string(), reflect: false },\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreRadioGroupEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    const choice = createChoiceField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      helper: props.helper,\n      label: props.label,\n      prefix: 'radio-group',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    choice.attachFormField(\n      useField<string>({\n        disabled: choice.disabled,\n        onReset: choice.reset,\n        toFormValue: (v) => v,\n        validationMessage: choice.validationMessage,\n        validity: choice.validity,\n        value: choice.formValue,\n      }),\n    );\n\n    const selectedValue = choice.selectedValue;\n    const isDisabled = fCtxProps.disabled;\n\n    bind({\n      attr: {\n        size: fCtxProps.size,\n        value: () => selectedValue.value || null,\n      },\n    });\n\n    const getSlottedRadios = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-radio');\n\n    const getEnabledRadios = (): HTMLElement[] =>\n      isDisabled.value ? [] : getSlottedRadios().filter((radio) => !radio.hasAttribute('disabled'));\n\n    const getLabelForValue = (value: string): string => getChoiceLabel(getSlottedRadios(), value);\n\n    const selectRadio = (val: string, originalEvent?: Event): void => {\n      choice.setValues(val ? [val] : []);\n\n      const labels = val ? [getLabelForValue(val)] : [];\n      const values = val ? [val] : [];\n\n      emit('change', { labels, originalEvent, values });\n      choice.triggerValidation('blur');\n    };\n\n    provide(RADIO_GROUP_CTX, {\n      color: props.color as Readable<ThemeColor | undefined>,\n      disabled: isDisabled,\n      name: props.name,\n      select: selectRadio,\n      size: props.size as Readable<ComponentSize | undefined>,\n      value: selectedValue,\n    });\n\n    // Sync name/color/size/disabled/checked onto slotted ore-radio children.\n    watch(() => {\n      void slots.elements().value;\n      void selectedValue.value;\n\n      const radios = getSlottedRadios();\n\n      for (const radio of radios) {\n        const val = radio.getAttribute('value') ?? '';\n\n        radio.toggleAttribute('checked', val === selectedValue.value);\n\n        if (props.name.value) radio.setAttribute('name', props.name.value);\n        else radio.removeAttribute('name');\n\n        if (props.color.value) radio.setAttribute('color', props.color.value);\n        else radio.removeAttribute('color');\n\n        if (props.size.value) radio.setAttribute('size', props.size.value);\n        else radio.removeAttribute('size');\n\n        radio.toggleAttribute('disabled', isDisabled.value);\n      }\n    });\n\n    // Roving tabindex: only the selected (or first) radio is tabbable.\n    watch(() => {\n      void slots.elements().value;\n\n      const radios = getSlottedRadios();\n      let hasFocusable = false;\n\n      for (const radio of radios) {\n        const isSelected = radio.getAttribute('value') === selectedValue.value;\n\n        radio.setAttribute('tabindex', isSelected && !isDisabled.value ? '0' : '-1');\n\n        if (isSelected && !isDisabled.value) hasFocusable = true;\n      }\n\n      if (!hasFocusable && radios.length > 0) {\n        const first = radios.find((r) => !r.hasAttribute('disabled'));\n\n        if (first) first.setAttribute('tabindex', '0');\n      }\n    });\n\n    const listControl = createListControl<HTMLElement>({\n      getItems: getEnabledRadios,\n      keys: { next: ['ArrowDown', 'ArrowRight'], prev: ['ArrowUp', 'ArrowLeft'] },\n      loop: true,\n      onNavigate: (_action, index, event) => {\n        const radio = getEnabledRadios()[index];\n\n        if (!radio) return;\n\n        radio.focus();\n\n        if (radio.tagName === 'ORE-RADIO') {\n          selectRadio(radio.getAttribute('value') ?? '', event);\n        }\n      },\n    });\n\n    bind({\n      on: {\n        change: (e: Event) => {\n          if (e.target === el) return;\n\n          e.stopPropagation();\n          selectRadio((e.target as HTMLElement).getAttribute('value') ?? '', e);\n        },\n        keydown: (e: KeyboardEvent) => {\n          const radios = getEnabledRadios();\n\n          if (!radios.length) return;\n\n          const focused = radios.indexOf(document.activeElement as HTMLElement);\n\n          if (focused === -1) return;\n\n          listControl.set(focused);\n          listControl.handleKeydown(e);\n        },\n      },\n    });\n\n    const legendId = createStableId('radio-group-legend');\n\n    return html`\n      <fieldset\n        role=\"radiogroup\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        :aria-invalid=\"${choice.ariaInvalid}\"\n        :aria-errormessage=\"${choice.ariaErrorMessage}\"\n        :aria-describedby=\"${choice.ariaDescribedBy}\">\n        <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n          ${props.label}${when(\n            () => Boolean(props.required.value),\n            () => html`<span aria-hidden=\"true\"> *</span>`,\n          )}\n        </legend>\n        <div class=\"radio-group-items\" part=\"items\">\n          <slot></slot>\n        </div>\n        <div\n          class=\"helper-text\"\n          part=\"helper\"\n          id=\"${choice.assistiveId}\"\n          :role=\"${() => (choice.errorText.value ? 'alert' : null)}\"\n          aria-live=\"polite\"\n          ?hidden=\"${() => !choice.errorText.value && !choice.helperText.value}\">\n          ${() => choice.errorText.value || choice.helperText.value}\n        </div>\n      </fieldset>\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin(), disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"radio-group.js","names":[],"sources":["../src/inputs/radio-group/radio-group.ts"],"sourcesContent":["import {\n  createContext,\n  createStableId,\n  define,\n  html,\n  inject,\n  prop,\n  bind,\n  getHost,\n  onCleanup,\n  provide,\n  useEmit,\n  useSlots,\n  watchEffect,\n  when,\n} from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { type Readable } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport {\n  type ChoiceChangeDetail,\n  lifecycleSignal,\n  createChoiceField,\n  createListControl,\n  getChoiceLabel,\n  getLightChildrenByTag,\n} from '../../headless';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { disabledStateMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './radio-group.css?inline';\n\n/** Radio group component properties */\nexport type OreRadioGroupProps = {\n  /** Theme color tint */\n  color?: ThemeColor;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Error message text */\n  error?: string;\n  /** Helper text displayed below the items */\n  helper?: string;\n  /** Group label text */\n  label?: string;\n  /** Form field name */\n  name?: string;\n  /** Layout orientation */\n  orientation?: 'horizontal' | 'vertical';\n  /** Required field */\n  required?: boolean;\n  /** Items size preset */\n  size?: ComponentSize;\n  /** Initial selected value */\n  value?: string;\n};\n\nexport type RadioGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  disabled: Readable<boolean>;\n  name: Readable<string | undefined>;\n  select: (value: string, originalEvent?: Event) => void;\n  size: Readable<ComponentSize | undefined>;\n  value: Readable<string | undefined>;\n};\n\nexport const RADIO_GROUP_CTX = createContext<RadioGroupContext | undefined>('OreRadioGroup');\n\n/** Events emitted by the radio-group component */\nexport type OreRadioGroupEvents = {\n  /** Emitted when the selection changes */\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A group of radio buttons that allows users to select a single option from a set.\n * Supports keyboard navigation (arrows) and automatic value management.\n *\n * @element ore-radio-group\n *\n * @attr {string} value - Selected value\n * @attr {string} name - Form field name\n * @attr {string} label - Group label\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when a radio is selected. detail: { values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-radio` elements here\n *\n * @cssprop --radio-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --radio-group-gap - Gap between radio items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-radio-group name=\"plan\" label=\"Choose a plan\" value=\"free\" required>\n *   <ore-radio value=\"free\">Free</ore-radio>\n *   <ore-radio value=\"pro\">Pro</ore-radio>\n *   <ore-radio value=\"enterprise\">Enterprise</ore-radio>\n * </ore-radio-group>\n * <ore-radio-group name=\"direction\" orientation=\"horizontal\" color=\"primary\">\n *   <ore-radio value=\"left\">Left</ore-radio>\n *   <ore-radio value=\"right\">Right</ore-radio>\n * </ore-radio-group>\n * ```\n */\nexport const RADIO_GROUP_TAG = 'ore-radio-group' as const;\ndefine<OreRadioGroupProps>(RADIO_GROUP_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string(),\n    name: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'vertical'),\n    required: prop.bool(false),\n    // Not auto-reflected (`reflect: false`) — the derived, interaction-updated selection\n    // (`selectedValue`) is the single writer for this attribute, via `bind()` below; letting\n    // `prop.string()`'s own default reflection also write the raw incoming value would leave\n    // two effects racing to set the same attribute from different sources.\n    value: { ...prop.string(), reflect: false },\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreRadioGroupEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    const choice = createChoiceField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      helper: props.helper,\n      label: props.label,\n      prefix: 'radio-group',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    choice.attachFormField(\n      useField<string>({\n        disabled: choice.disabled,\n        onReset: choice.reset,\n        toFormValue: (v) => v,\n        validationMessage: choice.validationMessage,\n        validity: choice.validity,\n        value: choice.formValue,\n      }),\n    );\n\n    const selectedValue = choice.selectedValue;\n    const isDisabled = fCtxProps.disabled;\n\n    bind({\n      attr: {\n        size: fCtxProps.size,\n        value: () => selectedValue.value || null,\n      },\n    });\n\n    const getSlottedRadios = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-radio');\n\n    const getEnabledRadios = (): HTMLElement[] =>\n      isDisabled.value ? [] : getSlottedRadios().filter((radio) => !radio.hasAttribute('disabled'));\n\n    const getLabelForValue = (value: string): string => getChoiceLabel(getSlottedRadios(), value);\n\n    const selectRadio = (val: string, originalEvent?: Event): void => {\n      choice.setValues(val ? [val] : []);\n\n      const labels = val ? [getLabelForValue(val)] : [];\n      const values = val ? [val] : [];\n\n      emit('change', { labels, originalEvent, values });\n      choice.triggerValidation('blur');\n    };\n\n    provide(RADIO_GROUP_CTX, {\n      color: props.color as Readable<ThemeColor | undefined>,\n      disabled: isDisabled,\n      name: props.name,\n      select: selectRadio,\n      size: props.size as Readable<ComponentSize | undefined>,\n      value: selectedValue,\n    });\n\n    // Sync name/color/size/disabled/checked onto slotted ore-radio children.\n    watch(() => {\n      void slots.elements().value;\n      void selectedValue.value;\n\n      const radios = getSlottedRadios();\n\n      for (const radio of radios) {\n        const val = radio.getAttribute('value') ?? '';\n\n        radio.toggleAttribute('checked', val === selectedValue.value);\n\n        if (props.name.value) radio.setAttribute('name', props.name.value);\n        else radio.removeAttribute('name');\n\n        if (props.color.value) radio.setAttribute('color', props.color.value);\n        else radio.removeAttribute('color');\n\n        if (props.size.value) radio.setAttribute('size', props.size.value);\n        else radio.removeAttribute('size');\n\n        radio.toggleAttribute('disabled', isDisabled.value);\n      }\n    });\n\n    // Roving tabindex: only the selected (or first) radio is tabbable.\n    watch(() => {\n      void slots.elements().value;\n\n      const radios = getSlottedRadios();\n      let hasFocusable = false;\n\n      for (const radio of radios) {\n        const isSelected = radio.getAttribute('value') === selectedValue.value;\n\n        radio.setAttribute('tabindex', isSelected && !isDisabled.value ? '0' : '-1');\n\n        if (isSelected && !isDisabled.value) hasFocusable = true;\n      }\n\n      if (!hasFocusable && radios.length > 0) {\n        const first = radios.find((r) => !r.hasAttribute('disabled'));\n\n        if (first) first.setAttribute('tabindex', '0');\n      }\n    });\n\n    const listControl = createListControl<HTMLElement>({\n      getItems: getEnabledRadios,\n      keys: { next: ['ArrowDown', 'ArrowRight'], prev: ['ArrowUp', 'ArrowLeft'] },\n      loop: true,\n      onNavigate: (_action, index, event) => {\n        const radio = getEnabledRadios()[index];\n\n        if (!radio) return;\n\n        radio.focus();\n\n        if (radio.tagName === 'ORE-RADIO') {\n          selectRadio(radio.getAttribute('value') ?? '', event);\n        }\n      },\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    bind({\n      on: {\n        change: (e: Event) => {\n          if (e.target === el) return;\n\n          e.stopPropagation();\n          selectRadio((e.target as HTMLElement).getAttribute('value') ?? '', e);\n        },\n        keydown: (e: KeyboardEvent) => {\n          const radios = getEnabledRadios();\n\n          if (!radios.length) return;\n\n          const focused = radios.indexOf(document.activeElement as HTMLElement);\n\n          if (focused === -1) return;\n\n          listControl.set(focused);\n          listControl.handleKeydown(e);\n        },\n      },\n    });\n\n    const legendId = createStableId('radio-group-legend');\n\n    return html`\n      <fieldset\n        role=\"radiogroup\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        :aria-invalid=\"${choice.ariaInvalid}\"\n        :aria-errormessage=\"${choice.ariaErrorMessage}\"\n        :aria-describedby=\"${choice.ariaDescribedBy}\">\n        <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n          ${props.label}${when(\n            () => Boolean(props.required.value),\n            () => html`<span aria-hidden=\"true\"> *</span>`,\n          )}\n        </legend>\n        <div class=\"radio-group-items\" part=\"items\">\n          <slot></slot>\n        </div>\n        <div\n          class=\"helper-text\"\n          part=\"helper\"\n          id=\"${choice.assistiveId}\"\n          :role=\"${() => (choice.errorText.value ? 'alert' : null)}\"\n          aria-live=\"polite\"\n          ?hidden=\"${() => !choice.errorText.value && !choice.helperText.value}\">\n          ${() => choice.errorText.value || choice.helperText.value}\n        </div>\n      </fieldset>\n    `;\n  },\n  styles: [disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/radio.cjs

@@ -1,10 +1,10 @@
-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("./shared/prop-bundles.cjs"),a=require("./shared/size-presets.cjs"),o=require("./headless/ore.cjs"),s=require("./headless/checkable.cjs"),c=require("./headless/nav.cjs"),l=require("./inputs/shared/form-context.cjs"),u=require("./inputs/shared/templates.cjs"),d=require("./radio-group.cjs"),f=require("./inputs/radio/radio.css.cjs");let p=require("@vielzeug/ore"),m=require("@vielzeug/ripple"),h=require("@vielzeug/ore/forms");var g=`ore-radio`;(0,p.define)(g,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,checked:p.prop.bool(!1),error:p.prop.string(),helper:p.prop.string(),name:p.prop.string(),value:p.prop.string()},setup(e){let t=(0,p.getHost)(),n=(0,p.useEmit)(),r=(0,p.inject)(d.RADIO_GROUP_CTX),i=(0,p.inject)(l.FORM_CTX),a=l.useFormContext(e,i),f=(0,m.computed)(()=>r?.name.value||e.name.value||``),g=(0,m.computed)(()=>r?.size.value??a.size.value),_=(0,m.computed)(()=>r?.color.value??e.color.value),v=(0,m.computed)(()=>r?r.value.value===e.value.value:!!e.checked.value),y=()=>{let e=f.value;return e?Array.from(document.querySelectorAll(`ore-radio[name="${e}"]`)).filter(e=>!e.hasAttribute(`disabled`)):[]},b=(e,t)=>{if(r){r.select(e.getAttribute(`value`)??``,t);return}e.click()},x=c.createListControl({getItems:()=>y(),keys:{next:[`ArrowDown`,`ArrowRight`],prev:[`ArrowUp`,`ArrowLeft`]},loop:!0,onNavigate:(e,t,n)=>{let r=y()[t];r&&(r.focus(),b(r,n))}}),S=t=>{if(!C.checked.value){if(r){r.select(e.value.value??``,t);return}C.toggle(t??new Event(`change`))}},C=s.createCheckable({checked:v,disabled:(0,m.computed)(()=>a.disabled.value||!!r?.disabled.value),error:e.error,helper:e.helper,onToggle:e=>{n(`change`,e)},prefix:`radio`,signal:o.lifecycleSignal(p.onCleanup),validateOn:i?.validateOn,value:e.value});C.attachFormField((0,h.useField)({disabled:C.disabled,toFormValue:e=>e,value:C.checkableFormValue}));let{assistiveId:w,checked:T,disabled:E,errorText:D,helperText:O,labelId:k,toggle:A}=C;return(0,p.bind)({attr:{ariaChecked:()=>T.value?`true`:`false`,ariaDescribedby:()=>D.value||O.value?w:null,ariaDisabled:()=>E.value?`true`:null,ariaInvalid:()=>D.value?`true`:null,ariaLabelledby:k,checked:T,color:_,disabled:()=>E.value?!0:void 0,name:()=>f.value||void 0,role:`radio`,size:g,tabindex:()=>{if(!E.value)return T.value?0:-1}},class:()=>({"is-checked":T.value,"is-disabled":E.value}),on:{click:n=>{if(!E.value)if(r)r.select(e.value.value??``,n);else{if(!f.value)return;if(!T.value){let r=e.name.value;document.querySelectorAll(`ore-radio[name="${r}"]`).forEach(e=>{e!==t&&e.removeAttribute(`checked`)}),A(n)}}},keydown:e=>{if(e.key===` `||e.key===`Enter`){e.preventDefault(),S(e);return}let n=y();if(n.length===0)return;let r=n.indexOf(t);r!==-1&&(x.set(r),x.handleKeydown(e))}}}),p.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("./shared/prop-bundles.cjs"),a=require("./shared/size-presets.cjs"),o=require("./headless/ore.cjs"),s=require("./headless/checkable.cjs"),c=require("./headless/nav.cjs"),l=require("./headless/direction.cjs"),u=require("./inputs/shared/form-context.cjs"),d=require("./inputs/shared/templates.cjs"),f=require("./radio-group.cjs"),p=require("./inputs/radio/radio.css.cjs");let m=require("@vielzeug/ore"),h=require("@vielzeug/ripple"),g=require("@vielzeug/ore/forms");var _=`ore-radio`;(0,m.define)(_,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.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.useEmit)(),r=(0,m.inject)(f.RADIO_GROUP_CTX),i=(0,m.inject)(u.FORM_CTX),a=u.useFormContext(e,i),p=(0,h.computed)(()=>r?.name.value||e.name.value||``),_=(0,h.computed)(()=>r?.size.value??a.size.value),v=(0,h.computed)(()=>r?.color.value??e.color.value),y=(0,h.computed)(()=>r?r.value.value===e.value.value:!!e.checked.value),b=()=>{let e=p.value;return e?Array.from(document.querySelectorAll(`ore-radio[name="${e}"]`)).filter(e=>!e.hasAttribute(`disabled`)):[]},x=(e,t)=>{if(r){r.select(e.getAttribute(`value`)??``,t);return}e.click()},S=c.createListControl({direction:()=>l.elementDirection(t),getItems:()=>b(),loop:!0,onNavigate:(e,t,n)=>{let r=b()[t];r&&(r.focus(),x(r,n))},orientation:`both`,signal:o.lifecycleSignal(m.onCleanup)}),C=t=>{if(!w.checked.value){if(r){r.select(e.value.value??``,t);return}w.toggle(t??new Event(`change`))}},w=s.createCheckable({checked:y,disabled:(0,h.computed)(()=>a.disabled.value||!!r?.disabled.value),error:e.error,helper:e.helper,onToggle:e=>{n(`change`,e)},prefix:`radio`,signal:o.lifecycleSignal(m.onCleanup),validateOn:i?.validateOn,value:e.value});w.attachFormField((0,g.useField)({disabled:w.disabled,toFormValue:e=>e,value:w.checkableFormValue}));let{assistiveId:T,checked:E,disabled:D,errorText:O,helperText:k,labelId:A,toggle:j}=w;return(0,m.bind)({attr:{ariaChecked:()=>E.value?`true`:`false`,ariaDescribedby:()=>O.value||k.value?T:null,ariaDisabled:()=>D.value?`true`:null,ariaInvalid:()=>O.value?`true`:null,ariaLabelledby:A,checked:E,color:v,disabled:()=>D.value?!0:void 0,name:()=>p.value||void 0,role:`radio`,size:_,tabindex:()=>{if(!D.value)return E.value?0:-1}},class:()=>({"is-checked":E.value,"is-disabled":D.value}),on:{click:n=>{if(!D.value)if(r)r.select(e.value.value??``,n);else{if(!p.value)return;if(!E.value){let r=e.name.value;document.querySelectorAll(`ore-radio[name="${r}"]`).forEach(e=>{e!==t&&e.removeAttribute(`checked`)}),j(n)}}},keydown:e=>{if(e.key===` `||e.key===`Enter`){e.preventDefault(),C(e);return}let n=b();if(n.length===0)return;let r=n.indexOf(t);r!==-1&&(S.set(r),S.handleKeydown(e))}}}),m.html`
       <div class="radio-wrapper" part="radio">
         <div class="circle" part="circle">
           <div class="dot" part="dot"></div>
         </div>
       </div>
-      <span class="label" part="label" id="${k}"><slot></slot></span>
-      ${u.renderHelperRegion(w,D,O)}
-    `},styles:[r.colorThemeMixin,r.forcedColorsFormControlMixin,n.disabledStateMixin,e.coarsePointerMixin,t.sizeVariantMixin(a.CONTROL_SIZE_PRESET),f.default]}),exports.RADIO_TAG=g;
+      <span class="label" part="label" id="${A}"><slot></slot></span>
+      ${d.renderHelperRegion(T,O,k)}
+    `},styles:[r.colorThemeMixin,r.forcedColorsFormControlMixin,n.disabledStateMixin,e.coarsePointerMixin,t.sizeVariantMixin(a.CONTROL_SIZE_PRESET),p.default]}),exports.RADIO_TAG=_;
 //# sourceMappingURL=radio.cjs.map

package/dist/radio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio.cjs","names":[],"sources":["../src/inputs/radio/radio.ts"],"sourcesContent":["import { define, html, inject, prop, bind, getHost, onCleanup, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\n\nimport { type CheckableChangePayload, lifecycleSignal, createCheckable, createListControl } from '../../headless';\nimport { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { RADIO_GROUP_CTX } from '../radio-group/radio-group';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './radio.css?inline';\n\n/** Radio component properties */\n\nexport type OreRadioEvents = {\n  change: CheckableChangePayload;\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 change - Emitted when radio is selected. detail: { checked: boolean, value: string, originalEvent?: Event }\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    const emit = useEmit<OreRadioEvents>();\n\n    const groupCtx = inject(RADIO_GROUP_CTX);\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    const effectiveName = computed(() => groupCtx?.name.value || props.name.value || '');\n    const effectiveSize = computed(() => groupCtx?.size.value ?? fCtxProps.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      getItems: () => getRadioGroup(),\n      keys: { next: ['ArrowDown', 'ArrowRight'], prev: ['ArrowUp', 'ArrowLeft'] },\n      loop: true,\n      onNavigate: (_action, index, event) => {\n        const nextRadio = getRadioGroup()[index];\n\n        if (!nextRadio) return;\n\n        nextRadio.focus();\n        selectRadio(nextRadio, event);\n      },\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(() => fCtxProps.disabled.value || Boolean(groupCtx?.disabled.value)),\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        emit('change', payload);\n      },\n      prefix: 'radio',\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\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    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 { define, html, inject, prop, bind, getHost, onCleanup, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\n\nimport {\n  type CheckableChangePayload,\n  elementDirection,\n  lifecycleSignal,\n  createCheckable,\n  createListControl,\n} from '../../headless';\nimport { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { RADIO_GROUP_CTX } from '../radio-group/radio-group';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './radio.css?inline';\n\n/** Radio component properties */\n\nexport type OreRadioEvents = {\n  change: CheckableChangePayload;\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 change - Emitted when radio is selected. detail: { checked: boolean, value: string, originalEvent?: Event }\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    const emit = useEmit<OreRadioEvents>();\n\n    const groupCtx = inject(RADIO_GROUP_CTX);\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    const effectiveName = computed(() => groupCtx?.name.value || props.name.value || '');\n    const effectiveSize = computed(() => groupCtx?.size.value ?? fCtxProps.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: (_action, index, event) => {\n        const nextRadio = getRadioGroup()[index];\n\n        if (!nextRadio) return;\n\n        nextRadio.focus();\n        selectRadio(nextRadio, 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(() => fCtxProps.disabled.value || Boolean(groupCtx?.disabled.value)),\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        emit('change', payload);\n      },\n      prefix: 'radio',\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\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    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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"}