@vielzeug/refine 1.1.3 → 1.3.1

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 { createStableId, define, html, prop } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport { type DialogCloseReason, type OverlayOpenReason, parseStringTriggers } from '../../headless';\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 normalizeTriggers = (value: unknown): PopoverTrigger[] =>\n  parseStringTriggers(String(value ?? ''), VALID_TRIGGERS, DEFAULT_POPOVER_TRIGGERS);\n\nexport type OrePopoverEvents = {\n  /** Emitted when the popover closes */\n  close: { reason: DialogCloseReason };\n  /** Emitted when the popover opens */\n  open: { reason: OverlayOpenReason };\n};\n\n/** Popover component properties */\nexport type OrePopoverProps = {\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 {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 - When the panel opens. detail: { reason: string }\n * @fires close - When the panel closes. detail: { reason: string }\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, OrePopoverEvents>(POPOVER_TAG, {\n  props: {\n    ...disablableBundle,\n    label: prop.string(),\n    offset: prop.number(PANEL_OFFSET),\n    open: prop.json(undefined as boolean | undefined),\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, { aria, el, emit, onCleanup, onMounted, slots }) {\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        aria(triggerEl, {\n          controls: () => panelId,\n          disabled: () => String(isDisabled.value),\n          expanded: () => String(floating.visible.value),\n          haspopup: 'dialog',\n        }),\n      disabled: isDisabled,\n      getHost: () => el,\n      getPanel: () => panelEl,\n      offset: props.offset,\n      onCleanup,\n      onClose: (reason) => emit('close', { reason }),\n      onOpen: (reason) => emit('open', { 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":";;;;;;;;;AAYA,IAAM,IAAe,GACf,oBAAiB,IAAI,IAAoB;CAAC;CAAS;CAAS;AAAO,CAAC,GACpE,IAA6C,CAAC,OAAO,GAErD,KAAqB,MACzB,EAAoB,OAAO,KAAS,EAAE,GAAG,GAAgB,CAAwB,GAmDtE,IAAc;AAC3B,EAA0C,GAAa;CACrD,OAAO;EACL,GAAG;EACH,OAAO,EAAK,OAAO;EACnB,QAAQ,EAAK,OAAO,CAAY;EAChC,MAAM,EAAK,KAAK,KAAA,CAAgC;EAChD,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,EAAE,SAAM,OAAI,SAAM,cAAW,cAAW,YAAS;EAC5D,IAAM,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,EAAK,GAAW;IACd,gBAAgB;IAChB,gBAAgB,OAAO,EAAW,KAAK;IACvC,gBAAgB,OAAO,EAAS,QAAQ,KAAK;IAC7C,UAAU;GACZ,CAAC;GACH,UAAU;GACV,eAAe;GACf,gBAAgB;GAChB,QAAQ,EAAM;GACd;GACA,UAAU,MAAW,EAAK,SAAS,EAAE,UAAO,CAAC;GAC7C,SAAS,MAAW,EAAK,QAAQ,EAAE,UAAO,CAAC;GAC3C,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;;;;uBAIC,EAAM,MAAM;8BACL,OAAO,CAAC,EAAS,QAAQ,KAAK,EAAE;eAC/C,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  createStableId,\n  define,\n  html,\n  prop,\n  aria,\n  getHost,\n  onCleanup,\n  onMounted,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport { type DialogCloseReason, type OverlayOpenReason, parseStringTriggers } from '../../headless';\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 normalizeTriggers = (value: unknown): PopoverTrigger[] =>\n  parseStringTriggers(String(value ?? ''), VALID_TRIGGERS, DEFAULT_POPOVER_TRIGGERS);\n\nexport type OrePopoverEvents = {\n  /** Emitted when the popover closes */\n  close: { reason: DialogCloseReason };\n  /** Emitted when the popover opens */\n  open: { reason: OverlayOpenReason };\n};\n\n/** Popover component properties */\nexport type OrePopoverProps = {\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 {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 - When the panel opens. detail: { reason: string }\n * @fires close - When the panel closes. detail: { reason: string }\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    label: prop.string(),\n    offset: prop.number(PANEL_OFFSET),\n    open: prop.json(undefined as boolean | undefined),\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        aria(triggerEl, {\n          controls: () => panelId,\n          disabled: () => String(isDisabled.value),\n          expanded: () => String(floating.visible.value),\n          haspopup: 'dialog',\n        }),\n      disabled: isDisabled,\n      getHost: () => el,\n      getPanel: () => panelEl,\n      offset: props.offset,\n      onCleanup,\n      onClose: (reason) => emit('close', { reason }),\n      onOpen: (reason) => emit('open', { 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,EAAoB,OAAO,KAAS,EAAE,GAAG,GAAgB,CAAwB,GAmDtE,IAAc;AAC3B,EAAwB,GAAa;CACnC,OAAO;EACL,GAAG;EACH,OAAO,EAAK,OAAO;EACnB,QAAQ,EAAK,OAAO,CAAY;EAChC,MAAM,EAAK,KAAK,KAAA,CAAgC;EAChD,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,EAAK,GAAW;IACd,gBAAgB;IAChB,gBAAgB,OAAO,EAAW,KAAK;IACvC,gBAAgB,OAAO,EAAS,QAAQ,KAAK;IAC7C,UAAU;GACZ,CAAC;GACH,UAAU;GACV,eAAe;GACf,gBAAgB;GAChB,QAAQ,EAAM;GACd;GACA,UAAU,MAAW,EAAK,SAAS,EAAE,UAAO,CAAC;GAC7C,SAAS,MAAW,EAAK,QAAQ,EAAE,UAAO,CAAC;GAC3C,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;;;;uBAIC,EAAM,MAAM;8BACL,OAAO,CAAC,EAAS,QAAQ,KAAK,EAAE;eAC/C,MAAqB;GAC1B,IAAU;EACZ,EAAE;;;;CAIR;CACA,QAAQ,CAAC,GAAoB,CAAM;AACrC,CAAC"}

package/dist/progress.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/directives/styleMap.cjs");require("./ore/dist/directives.cjs");const t=require("./styles/mixins/accessibility.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./feedback/progress/progress.css?inline.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");var s=`ore-progress`;(0,a.define)(s,{props:{...r.themableBundle,...r.sizableBundle,"floating-label":a.prop.string(),indeterminate:a.prop.bool(!1),label:a.prop.string(),max:a.prop.number(100),title:a.prop.string(),type:a.prop.oneOf([`linear`,`circular`,`vertical`],`linear`),value:a.prop.number(0),"value-text":a.prop.string()},setup(t,{el:n,watch:r}){let i=2*Math.PI*45,s=(0,o.computed)(()=>`${Math.max(0,Math.min(Number(t.value.value),Number(t.max.value)))/Math.max(1,Number(t.max.value))*100}%`),c=(0,o.computed)(()=>{let e=Math.max(0,Math.min(Number(t.value.value),Number(t.max.value))),n=Math.max(1,Number(t.max.value));return i-e/n*i}),l=()=>t.indeterminate.value?null:String(t.value.value),u=()=>t.label.value??t.title.value??`Progress`,d=e.styleMap({"--_circ":`${i}px`}),f=()=>t.indeterminate.value?void 0:`${i}px`,p=()=>t.indeterminate.value?void 0:`${c.value}px`,m=(0,o.computed)(()=>t.type.value===`vertical`),h=e.styleMap({height:()=>!t.indeterminate.value&&m.value?s.value:null,width:()=>!t.indeterminate.value&&!m.value?s.value:null});r(()=>{n.style.setProperty(`--_percent`,t.indeterminate.value?`0%`:s.value)});let g=()=>a.html` <div
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/directives/styleMap.cjs");require("./ore/dist/directives.cjs");const t=require("./styles/mixins/accessibility.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./feedback/progress/progress.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");var s=`ore-progress`;(0,a.define)(s,{props:{...r.themableBundle,...r.sizableBundle,"floating-label":a.prop.string(),indeterminate:a.prop.bool(!1),label:a.prop.string(),max:a.prop.number(100),title:a.prop.string(),type:a.prop.oneOf([`linear`,`circular`,`vertical`],`linear`),value:a.prop.number(0),"value-text":a.prop.string()},setup(t){let n=(0,a.getHost)(),r=a.watchEffect,i=2*Math.PI*45,s=(0,o.computed)(()=>`${Math.max(0,Math.min(Number(t.value.value),Number(t.max.value)))/Math.max(1,Number(t.max.value))*100}%`),c=(0,o.computed)(()=>{let e=Math.max(0,Math.min(Number(t.value.value),Number(t.max.value))),n=Math.max(1,Number(t.max.value));return i-e/n*i}),l=()=>t.indeterminate.value?null:String(t.value.value),u=()=>t.label.value??t.title.value??`Progress`,d=e.styleMap({"--_circ":`${i}px`}),f=()=>t.indeterminate.value?void 0:`${i}px`,p=()=>t.indeterminate.value?void 0:`${c.value}px`,m=(0,o.computed)(()=>t.type.value===`vertical`),h=e.styleMap({height:()=>!t.indeterminate.value&&m.value?s.value:null,width:()=>!t.indeterminate.value&&!m.value?s.value:null});r(()=>{n.style.setProperty(`--_percent`,t.indeterminate.value?`0%`:s.value)});let g=()=>a.html` <div
         class="circular-track"
         role="progressbar"
         :aria-valuenow="${l}"

package/dist/progress.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"progress.cjs","names":[],"sources":["../src/feedback/progress/progress.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { styleMap } from '@vielzeug/ore/directives';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, forcedColorsMixin, reducedMotionMixin } from '../../styles';\nimport componentStyles from './progress.css?inline';\n\n/** Progress bar component properties */\nexport type OreProgressProps = {\n  /** Theme color for the fill bar */\n  color?: ThemeColor;\n  /** Floating chip centered above the fill endpoint (linear only). Hidden in indeterminate mode. Position formula: left = fill% − half chip width (CSS: left:X%; transform:translateX(−50%)). */\n  'floating-label'?: string;\n  /** When true, shows an infinite animation — use when progress is unknown. */\n  indeterminate?: boolean;\n  /** Accessible name AND visible text label.\n   * - Linear without `title`: rendered at the end of the bar.\n   * - Linear with `title`: moved into the header row above the bar.\n   * - Circular: large text centered inside the ring. */\n  label?: string;\n  /** Maximum value. Defaults to 100. */\n  max?: number;\n  /** Size variant controlling bar height */\n  size?: ComponentSize;\n  /** Title text.\n   * - Linear: displayed as a header above the bar; moves `label` into the header row.\n   * - Circular: smaller text displayed below the `label` inside the ring. */\n  title?: string;\n  /** 'linear' (default), 'circular', or 'vertical' */\n  type?: 'linear' | 'circular' | 'vertical';\n  /** Current progress value (0 to `max`). Ignored when `indeterminate`. */\n  value?: number;\n  /** Human-readable value text for screen readers (e.g. \"Step 2 of 5\", \"75%\"). Overrides the raw aria-valuenow when set. */\n  'value-text'?: string;\n};\n\n/**\n * A linear progress bar for conveying operation progress.\n * Supports determinate (known value) and indeterminate (unknown duration) modes.\n *\n * @element ore-progress\n *\n * @attr {number} value   - Current value (0–max). Defaults to 0.\n * @attr {number} max     - Maximum value. Defaults to 100.\n * @attr {boolean} indeterminate - Show infinite animation (ignores value/max).\n * @attr {string} color   - Theme color: 'primary' | 'success' | 'warning' | 'error' | …\n * @attr {string} size    - Bar height/width: 'sm' | 'md' | 'lg'\n * @attr {string} type   - 'linear' (default) | 'circular' | 'vertical'\n *\n * @cssprop --progress-width  - Bar width override (vertical only)\n * @attr {string} label          - Visible text label + accessible name. Linear: at bar end (or header row with title). Circular: large text centered inside the ring.\n * @attr {string} title          - Title text. Linear: header above the bar (moves label to header row). Circular: smaller text below the label inside the ring.\n * @attr {string} floating-label - Floating chip centered above the fill endpoint (linear only); hidden when indeterminate.\n *\n * @cssprop --progress-height               - Bar height override\n * @cssprop --progress-track-bg             - Track background color\n * @cssprop --progress-fill                 - Fill bar color\n * @cssprop --progress-radius               - Border radius\n * @cssprop --progress-label-gap            - Gap between header/bar row and between bar and trailing label (default 0.25 rem)\n * @cssprop --progress-title-color          - Title text color (defaults to currentColor)\n * @cssprop --progress-label-color          - Label text color (defaults to currentColor)\n * @cssprop --progress-circle-size          - Circular indicator diameter (default 6rem)\n * @cssprop --progress-circular-label-size  - Font size of the label inside the ring (default --text-xl)\n * @cssprop --progress-circular-title-size  - Font size of the title inside the ring (default --text-xs)\n *\n * @part fill - Progress fill element.\n * @example\n * ```html\n * <ore-progress value=\"45\"></ore-progress>\n * <ore-progress value=\"75\" max=\"100\" color=\"success\" size=\"lg\"></ore-progress>\n * <ore-progress indeterminate color=\"primary\" label=\"Loading…\"></ore-progress>\n * ```\n */\nexport const PROGRESS_TAG = 'ore-progress' as const;\ndefine<OreProgressProps>(PROGRESS_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    'floating-label': prop.string(),\n    indeterminate: prop.bool(false),\n    label: prop.string(),\n    max: prop.number(100),\n    title: prop.string(),\n    type: prop.oneOf(['linear', 'circular', 'vertical'] as const, 'linear'),\n    value: prop.number(0),\n    'value-text': prop.string(),\n  },\n\n  setup(props, { el, watch }) {\n    // The SVG circle circumference for a radius of 45 (viewBox 0 0 100 100)\n    const RADIUS = 45;\n    const CIRC = 2 * Math.PI * RADIUS; // ~282.7\n\n    const percent = computed(() => {\n      const v = Math.max(0, Math.min(Number(props.value.value), Number(props.max.value)));\n      const m = Math.max(1, Number(props.max.value));\n\n      return `${(v / m) * 100}%`;\n    });\n\n    const dashoffset = computed(() => {\n      const v = Math.max(0, Math.min(Number(props.value.value), Number(props.max.value)));\n      const m = Math.max(1, Number(props.max.value));\n\n      return CIRC - (v / m) * CIRC;\n    });\n\n    const ariaValueNow = () => (props.indeterminate.value ? null : String(props.value.value));\n    const ariaLabel = () => props.label.value ?? props.title.value ?? 'Progress';\n    const circularStyle = styleMap({ '--_circ': `${CIRC}px` });\n    const strokeDasharray = () => (props.indeterminate.value ? undefined : `${CIRC}px`);\n    const strokeDashoffset = () => (props.indeterminate.value ? undefined : `${dashoffset.value}px`);\n    const isVertical = computed(() => props.type.value === 'vertical');\n    const linearFillStyle = styleMap({\n      height: () => (!props.indeterminate.value && isVertical.value ? percent.value : null),\n      width: () => (!props.indeterminate.value && !isVertical.value ? percent.value : null),\n    });\n\n    watch(() => {\n      el.style.setProperty('--_percent', props.indeterminate.value ? '0%' : percent.value);\n    });\n\n    const circularTemplate = () =>\n      html` <div\n        class=\"circular-track\"\n        role=\"progressbar\"\n        :aria-valuenow=\"${ariaValueNow}\"\n        aria-valuemin=\"0\"\n        :aria-valuemax=\"${props.max}\"\n        :aria-label=\"${ariaLabel}\"\n        :aria-valuetext=\"${props['value-text']}\"\n        :style=\"${circularStyle}\">\n        <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle class=\"circle-bg\" cx=\"50\" cy=\"50\" r=\"${RADIUS}\"></circle>\n          <circle\n            class=\"circle-fill\"\n            cx=\"50\"\n            cy=\"50\"\n            r=\"${RADIUS}\"\n            :stroke-dasharray=\"${strokeDasharray}\"\n            :stroke-dashoffset=\"${strokeDashoffset}\"></circle>\n        </svg>\n        <div class=\"circular-inner\">\n          <span class=\"circular-label\">${() => props.label.value ?? ''}</span>\n          <span class=\"circular-title\">${() => props.title.value ?? ''}</span>\n        </div>\n      </div>`;\n\n    const barTemplate = () =>\n      html` <div class=\"wrapper\">\n        <div class=\"header\">\n          <span class=\"progress-title\">${() => props.title.value ?? ''}</span>\n          <span class=\"end-label header-label\">${() => props.label.value ?? ''}</span>\n        </div>\n        <div :class=${() => `bar-row${isVertical.value ? ' bar-row-vertical' : ''}`}>\n          <div class=\"track-outer\">\n            <div\n              class=\"track\"\n              role=\"progressbar\"\n              :aria-valuenow=\"${ariaValueNow}\"\n              aria-valuemin=\"0\"\n              :aria-valuemax=\"${props.max}\"\n              :aria-label=\"${ariaLabel}\"\n              :aria-valuetext=\"${props['value-text']}\">\n              <div class=\"fill\" part=\"fill\" :style=\"${linearFillStyle}\"></div>\n            </div>\n            ${() => (!isVertical.value ? html`<span class=\"floating-label\">${props['floating-label']}</span>` : null)}\n          </div>\n          <span class=\"end-label row-label\">${() => props.label.value ?? ''}</span>\n        </div>\n      </div>`;\n\n    return html` ${() => (props.type.value === 'circular' ? circularTemplate() : barTemplate())} `;\n  },\n\n  styles: [colorThemeMixin, forcedColorsMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"+ZA4EA,IAAa,EAAe,4BACH,EAAc,CACrC,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,iBAAkB,EAAA,KAAK,OAAO,EAC9B,cAAe,EAAA,KAAK,KAAK,EAAK,EAC9B,MAAO,EAAA,KAAK,OAAO,EACnB,IAAK,EAAA,KAAK,OAAO,GAAG,EACpB,MAAO,EAAA,KAAK,OAAO,EACnB,KAAM,EAAA,KAAK,MAAM,CAAC,SAAU,WAAY,UAAU,EAAY,QAAQ,EACtE,MAAO,EAAA,KAAK,OAAO,CAAC,EACpB,aAAc,EAAA,KAAK,OAAO,CAC5B,EAEA,MAAM,EAAO,CAAE,KAAI,SAAS,CAE1B,IACM,EAAO,EAAI,KAAK,GAAK,GAErB,GAAA,EAAA,EAAA,SAAA,KAIG,GAHG,KAAK,IAAI,EAAG,KAAK,IAAI,OAAO,EAAM,MAAM,KAAK,EAAG,OAAO,EAAM,IAAI,KAAK,CAAC,CAGtE,EAFD,KAAK,IAAI,EAAG,OAAO,EAAM,IAAI,KAAK,CAE7B,EAAK,IAAI,EACzB,EAEK,GAAA,EAAA,EAAA,SAAA,KAA4B,CAChC,IAAM,EAAI,KAAK,IAAI,EAAG,KAAK,IAAI,OAAO,EAAM,MAAM,KAAK,EAAG,OAAO,EAAM,IAAI,KAAK,CAAC,CAAC,EAC5E,EAAI,KAAK,IAAI,EAAG,OAAO,EAAM,IAAI,KAAK,CAAC,EAE7C,OAAO,EAAQ,EAAI,EAAK,CAC1B,CAAC,EAEK,MAAsB,EAAM,cAAc,MAAQ,KAAO,OAAO,EAAM,MAAM,KAAK,EACjF,MAAkB,EAAM,MAAM,OAAS,EAAM,MAAM,OAAS,WAC5D,EAAgB,EAAA,SAAS,CAAE,UAAW,GAAG,EAAK,GAAI,CAAC,EACnD,MAAyB,EAAM,cAAc,MAAQ,IAAA,GAAY,GAAG,EAAK,IACzE,MAA0B,EAAM,cAAc,MAAQ,IAAA,GAAY,GAAG,EAAW,MAAM,IACtF,GAAA,EAAA,EAAA,SAAA,KAA4B,EAAM,KAAK,QAAU,UAAU,EAC3D,EAAkB,EAAA,SAAS,CAC/B,WAAe,CAAC,EAAM,cAAc,OAAS,EAAW,MAAQ,EAAQ,MAAQ,KAChF,UAAc,CAAC,EAAM,cAAc,OAAS,CAAC,EAAW,MAAQ,EAAQ,MAAQ,IAClF,CAAC,EAED,MAAY,CACV,EAAG,MAAM,YAAY,aAAc,EAAM,cAAc,MAAQ,KAAO,EAAQ,KAAK,CACrF,CAAC,EAED,IAAM,MACJ,EAAA,IAAI;;;0BAGgB,EAAa;;0BAEb,EAAM,IAAI;uBACb,EAAU;2BACN,EAAM,cAAc;kBAC7B,EAAc;;yDAEyB,GAAO;;;;;iBAK/C,GAAO;iCACS,EAAgB;kCACf,EAAiB;;;6CAGJ,EAAM,MAAM,OAAS,GAAG;6CACxB,EAAM,MAAM,OAAS,GAAG;;cAI7D,MACJ,EAAA,IAAI;;6CAEqC,EAAM,MAAM,OAAS,GAAG;qDAChB,EAAM,MAAM,OAAS,GAAG;;0BAEnD,UAAU,EAAW,MAAQ,oBAAsB,KAAK;;;;;gCAKpD,EAAa;;gCAEb,EAAM,IAAI;6BACb,EAAU;iCACN,EAAM,cAAc;sDACC,EAAgB;;kBAEhD,EAAW,MAA+E,KAAvE,EAAA,IAAI,gCAAgC,EAAM,kBAAkB,SAAiB;;kDAElE,EAAM,MAAM,OAAS,GAAG;;cAIxE,MAAO,GAAA,IAAI,QAAW,EAAM,KAAK,QAAU,WAAa,EAAiB,EAAI,EAAY,EAAG,EAC9F,EAEA,OAAQ,CAAC,EAAA,gBAAiB,EAAA,kBAAmB,EAAA,mBAAoB,EAAA,OAAe,CAClF,CAAC"}
+{"version":3,"file":"progress.cjs","names":[],"sources":["../src/feedback/progress/progress.ts"],"sourcesContent":["import { define, html, prop, getHost, watchEffect } from '@vielzeug/ore';\nimport { styleMap } from '@vielzeug/ore/directives';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, forcedColorsMixin, reducedMotionMixin } from '../../styles';\nimport componentStyles from './progress.css?inline';\n\n/** Progress bar component properties */\nexport type OreProgressProps = {\n  /** Theme color for the fill bar */\n  color?: ThemeColor;\n  /** Floating chip centered above the fill endpoint (linear only). Hidden in indeterminate mode. Position formula: left = fill% − half chip width (CSS: left:X%; transform:translateX(−50%)). */\n  'floating-label'?: string;\n  /** When true, shows an infinite animation — use when progress is unknown. */\n  indeterminate?: boolean;\n  /** Accessible name AND visible text label.\n   * - Linear without `title`: rendered at the end of the bar.\n   * - Linear with `title`: moved into the header row above the bar.\n   * - Circular: large text centered inside the ring. */\n  label?: string;\n  /** Maximum value. Defaults to 100. */\n  max?: number;\n  /** Size variant controlling bar height */\n  size?: ComponentSize;\n  /** Title text.\n   * - Linear: displayed as a header above the bar; moves `label` into the header row.\n   * - Circular: smaller text displayed below the `label` inside the ring. */\n  title?: string;\n  /** 'linear' (default), 'circular', or 'vertical' */\n  type?: 'linear' | 'circular' | 'vertical';\n  /** Current progress value (0 to `max`). Ignored when `indeterminate`. */\n  value?: number;\n  /** Human-readable value text for screen readers (e.g. \"Step 2 of 5\", \"75%\"). Overrides the raw aria-valuenow when set. */\n  'value-text'?: string;\n};\n\n/**\n * A linear progress bar for conveying operation progress.\n * Supports determinate (known value) and indeterminate (unknown duration) modes.\n *\n * @element ore-progress\n *\n * @attr {number} value   - Current value (0–max). Defaults to 0.\n * @attr {number} max     - Maximum value. Defaults to 100.\n * @attr {boolean} indeterminate - Show infinite animation (ignores value/max).\n * @attr {string} color   - Theme color: 'primary' | 'success' | 'warning' | 'error' | …\n * @attr {string} size    - Bar height/width: 'sm' | 'md' | 'lg'\n * @attr {string} type   - 'linear' (default) | 'circular' | 'vertical'\n *\n * @cssprop --progress-width  - Bar width override (vertical only)\n * @attr {string} label          - Visible text label + accessible name. Linear: at bar end (or header row with title). Circular: large text centered inside the ring.\n * @attr {string} title          - Title text. Linear: header above the bar (moves label to header row). Circular: smaller text below the label inside the ring.\n * @attr {string} floating-label - Floating chip centered above the fill endpoint (linear only); hidden when indeterminate.\n *\n * @cssprop --progress-height               - Bar height override\n * @cssprop --progress-track-bg             - Track background color\n * @cssprop --progress-fill                 - Fill bar color\n * @cssprop --progress-radius               - Border radius\n * @cssprop --progress-label-gap            - Gap between header/bar row and between bar and trailing label (default 0.25 rem)\n * @cssprop --progress-title-color          - Title text color (defaults to currentColor)\n * @cssprop --progress-label-color          - Label text color (defaults to currentColor)\n * @cssprop --progress-circle-size          - Circular indicator diameter (default 6rem)\n * @cssprop --progress-circular-label-size  - Font size of the label inside the ring (default --text-xl)\n * @cssprop --progress-circular-title-size  - Font size of the title inside the ring (default --text-xs)\n *\n * @part fill - Progress fill element.\n * @example\n * ```html\n * <ore-progress value=\"45\"></ore-progress>\n * <ore-progress value=\"75\" max=\"100\" color=\"success\" size=\"lg\"></ore-progress>\n * <ore-progress indeterminate color=\"primary\" label=\"Loading…\"></ore-progress>\n * ```\n */\nexport const PROGRESS_TAG = 'ore-progress' as const;\ndefine<OreProgressProps>(PROGRESS_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    'floating-label': prop.string(),\n    indeterminate: prop.bool(false),\n    label: prop.string(),\n    max: prop.number(100),\n    title: prop.string(),\n    type: prop.oneOf(['linear', 'circular', 'vertical'] as const, 'linear'),\n    value: prop.number(0),\n    'value-text': prop.string(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    // The SVG circle circumference for a radius of 45 (viewBox 0 0 100 100)\n    const RADIUS = 45;\n    const CIRC = 2 * Math.PI * RADIUS; // ~282.7\n\n    const percent = computed(() => {\n      const v = Math.max(0, Math.min(Number(props.value.value), Number(props.max.value)));\n      const m = Math.max(1, Number(props.max.value));\n\n      return `${(v / m) * 100}%`;\n    });\n\n    const dashoffset = computed(() => {\n      const v = Math.max(0, Math.min(Number(props.value.value), Number(props.max.value)));\n      const m = Math.max(1, Number(props.max.value));\n\n      return CIRC - (v / m) * CIRC;\n    });\n\n    const ariaValueNow = () => (props.indeterminate.value ? null : String(props.value.value));\n    const ariaLabel = () => props.label.value ?? props.title.value ?? 'Progress';\n    const circularStyle = styleMap({ '--_circ': `${CIRC}px` });\n    const strokeDasharray = () => (props.indeterminate.value ? undefined : `${CIRC}px`);\n    const strokeDashoffset = () => (props.indeterminate.value ? undefined : `${dashoffset.value}px`);\n    const isVertical = computed(() => props.type.value === 'vertical');\n    const linearFillStyle = styleMap({\n      height: () => (!props.indeterminate.value && isVertical.value ? percent.value : null),\n      width: () => (!props.indeterminate.value && !isVertical.value ? percent.value : null),\n    });\n\n    watch(() => {\n      el.style.setProperty('--_percent', props.indeterminate.value ? '0%' : percent.value);\n    });\n\n    const circularTemplate = () =>\n      html` <div\n        class=\"circular-track\"\n        role=\"progressbar\"\n        :aria-valuenow=\"${ariaValueNow}\"\n        aria-valuemin=\"0\"\n        :aria-valuemax=\"${props.max}\"\n        :aria-label=\"${ariaLabel}\"\n        :aria-valuetext=\"${props['value-text']}\"\n        :style=\"${circularStyle}\">\n        <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle class=\"circle-bg\" cx=\"50\" cy=\"50\" r=\"${RADIUS}\"></circle>\n          <circle\n            class=\"circle-fill\"\n            cx=\"50\"\n            cy=\"50\"\n            r=\"${RADIUS}\"\n            :stroke-dasharray=\"${strokeDasharray}\"\n            :stroke-dashoffset=\"${strokeDashoffset}\"></circle>\n        </svg>\n        <div class=\"circular-inner\">\n          <span class=\"circular-label\">${() => props.label.value ?? ''}</span>\n          <span class=\"circular-title\">${() => props.title.value ?? ''}</span>\n        </div>\n      </div>`;\n\n    const barTemplate = () =>\n      html` <div class=\"wrapper\">\n        <div class=\"header\">\n          <span class=\"progress-title\">${() => props.title.value ?? ''}</span>\n          <span class=\"end-label header-label\">${() => props.label.value ?? ''}</span>\n        </div>\n        <div :class=${() => `bar-row${isVertical.value ? ' bar-row-vertical' : ''}`}>\n          <div class=\"track-outer\">\n            <div\n              class=\"track\"\n              role=\"progressbar\"\n              :aria-valuenow=\"${ariaValueNow}\"\n              aria-valuemin=\"0\"\n              :aria-valuemax=\"${props.max}\"\n              :aria-label=\"${ariaLabel}\"\n              :aria-valuetext=\"${props['value-text']}\">\n              <div class=\"fill\" part=\"fill\" :style=\"${linearFillStyle}\"></div>\n            </div>\n            ${() => (!isVertical.value ? html`<span class=\"floating-label\">${props['floating-label']}</span>` : null)}\n          </div>\n          <span class=\"end-label row-label\">${() => props.label.value ?? ''}</span>\n        </div>\n      </div>`;\n\n    return html` ${() => (props.type.value === 'circular' ? circularTemplate() : barTemplate())} `;\n  },\n\n  styles: [colorThemeMixin, forcedColorsMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"wZA4EA,IAAa,EAAe,4BACH,EAAc,CACrC,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,iBAAkB,EAAA,KAAK,OAAO,EAC9B,cAAe,EAAA,KAAK,KAAK,EAAK,EAC9B,MAAO,EAAA,KAAK,OAAO,EACnB,IAAK,EAAA,KAAK,OAAO,GAAG,EACpB,MAAO,EAAA,KAAK,OAAO,EACnB,KAAM,EAAA,KAAK,MAAM,CAAC,SAAU,WAAY,UAAU,EAAY,QAAQ,EACtE,MAAO,EAAA,KAAK,OAAO,CAAC,EACpB,aAAc,EAAA,KAAK,OAAO,CAC5B,EAEA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAa,EACb,EAAQ,EAAA,YAIR,EAAO,EAAI,KAAK,GAAK,GAErB,GAAA,EAAA,EAAA,SAAA,KAIG,GAHG,KAAK,IAAI,EAAG,KAAK,IAAI,OAAO,EAAM,MAAM,KAAK,EAAG,OAAO,EAAM,IAAI,KAAK,CAAC,CAGtE,EAFD,KAAK,IAAI,EAAG,OAAO,EAAM,IAAI,KAAK,CAE7B,EAAK,IAAI,EACzB,EAEK,GAAA,EAAA,EAAA,SAAA,KAA4B,CAChC,IAAM,EAAI,KAAK,IAAI,EAAG,KAAK,IAAI,OAAO,EAAM,MAAM,KAAK,EAAG,OAAO,EAAM,IAAI,KAAK,CAAC,CAAC,EAC5E,EAAI,KAAK,IAAI,EAAG,OAAO,EAAM,IAAI,KAAK,CAAC,EAE7C,OAAO,EAAQ,EAAI,EAAK,CAC1B,CAAC,EAEK,MAAsB,EAAM,cAAc,MAAQ,KAAO,OAAO,EAAM,MAAM,KAAK,EACjF,MAAkB,EAAM,MAAM,OAAS,EAAM,MAAM,OAAS,WAC5D,EAAgB,EAAA,SAAS,CAAE,UAAW,GAAG,EAAK,GAAI,CAAC,EACnD,MAAyB,EAAM,cAAc,MAAQ,IAAA,GAAY,GAAG,EAAK,IACzE,MAA0B,EAAM,cAAc,MAAQ,IAAA,GAAY,GAAG,EAAW,MAAM,IACtF,GAAA,EAAA,EAAA,SAAA,KAA4B,EAAM,KAAK,QAAU,UAAU,EAC3D,EAAkB,EAAA,SAAS,CAC/B,WAAe,CAAC,EAAM,cAAc,OAAS,EAAW,MAAQ,EAAQ,MAAQ,KAChF,UAAc,CAAC,EAAM,cAAc,OAAS,CAAC,EAAW,MAAQ,EAAQ,MAAQ,IAClF,CAAC,EAED,MAAY,CACV,EAAG,MAAM,YAAY,aAAc,EAAM,cAAc,MAAQ,KAAO,EAAQ,KAAK,CACrF,CAAC,EAED,IAAM,MACJ,EAAA,IAAI;;;0BAGgB,EAAa;;0BAEb,EAAM,IAAI;uBACb,EAAU;2BACN,EAAM,cAAc;kBAC7B,EAAc;;yDAEyB,GAAO;;;;;iBAK/C,GAAO;iCACS,EAAgB;kCACf,EAAiB;;;6CAGJ,EAAM,MAAM,OAAS,GAAG;6CACxB,EAAM,MAAM,OAAS,GAAG;;cAI7D,MACJ,EAAA,IAAI;;6CAEqC,EAAM,MAAM,OAAS,GAAG;qDAChB,EAAM,MAAM,OAAS,GAAG;;0BAEnD,UAAU,EAAW,MAAQ,oBAAsB,KAAK;;;;;gCAKpD,EAAa;;gCAEb,EAAM,IAAI;6BACb,EAAU;iCACN,EAAM,cAAc;sDACC,EAAgB;;kBAEhD,EAAW,MAA+E,KAAvE,EAAA,IAAI,gCAAgC,EAAM,kBAAkB,SAAiB;;kDAElE,EAAM,MAAM,OAAS,GAAG;;cAIxE,MAAO,GAAA,IAAI,QAAW,EAAM,KAAK,QAAU,WAAa,EAAiB,EAAI,EAAY,EAAG,EAC9F,EAEA,OAAQ,CAAC,EAAA,gBAAiB,EAAA,kBAAmB,EAAA,mBAAoB,EAAA,OAAe,CAClF,CAAC"}

package/dist/progress.js

@@ -3,48 +3,48 @@ import "./ore/dist/directives.js";
 import { reducedMotionMixin as t } from "./styles/mixins/accessibility.css.js";
 import { colorThemeMixin as n, forcedColorsMixin as r } from "./styles/mixins/theme.css.js";
 import { sizableBundle as i, themableBundle as a } from "./shared/prop-bundles.js";
-import o from "./feedback/progress/progress.css?inline.js";
-import { define as s, html as c, prop as l } from "@vielzeug/ore";
-import { computed as u } from "@vielzeug/ripple";
+import o from "./feedback/progress/progress.css.js";
+import { define as s, getHost as c, html as l, prop as u, watchEffect as d } from "@vielzeug/ore";
+import { computed as f } from "@vielzeug/ripple";
 //#region src/feedback/progress/progress.ts
-var d = "ore-progress";
-s(d, {
+var p = "ore-progress";
+s(p, {
 	props: {
 		...a,
 		...i,
-		"floating-label": l.string(),
-		indeterminate: l.bool(!1),
-		label: l.string(),
-		max: l.number(100),
-		title: l.string(),
-		type: l.oneOf([
+		"floating-label": u.string(),
+		indeterminate: u.bool(!1),
+		label: u.string(),
+		max: u.number(100),
+		title: u.string(),
+		type: u.oneOf([
 			"linear",
 			"circular",
 			"vertical"
 		], "linear"),
-		value: l.number(0),
-		"value-text": l.string()
+		value: u.number(0),
+		"value-text": u.string()
 	},
-	setup(t, { el: n, watch: r }) {
-		let i = 2 * Math.PI * 45, a = u(() => `${Math.max(0, Math.min(Number(t.value.value), Number(t.max.value))) / Math.max(1, Number(t.max.value)) * 100}%`), o = u(() => {
+	setup(t) {
+		let n = c(), r = d, i = 2 * Math.PI * 45, a = f(() => `${Math.max(0, Math.min(Number(t.value.value), Number(t.max.value))) / Math.max(1, Number(t.max.value)) * 100}%`), o = f(() => {
 			let e = Math.max(0, Math.min(Number(t.value.value), Number(t.max.value))), n = Math.max(1, Number(t.max.value));
 			return i - e / n * i;
-		}), s = () => t.indeterminate.value ? null : String(t.value.value), l = () => t.label.value ?? t.title.value ?? "Progress", d = e({ "--_circ": `${i}px` }), f = () => t.indeterminate.value ? void 0 : `${i}px`, p = () => t.indeterminate.value ? void 0 : `${o.value}px`, m = u(() => t.type.value === "vertical"), h = e({
-			height: () => !t.indeterminate.value && m.value ? a.value : null,
-			width: () => !t.indeterminate.value && !m.value ? a.value : null
+		}), s = () => t.indeterminate.value ? null : String(t.value.value), u = () => t.label.value ?? t.title.value ?? "Progress", p = e({ "--_circ": `${i}px` }), m = () => t.indeterminate.value ? void 0 : `${i}px`, h = () => t.indeterminate.value ? void 0 : `${o.value}px`, g = f(() => t.type.value === "vertical"), _ = e({
+			height: () => !t.indeterminate.value && g.value ? a.value : null,
+			width: () => !t.indeterminate.value && !g.value ? a.value : null
 		});
 		r(() => {
 			n.style.setProperty("--_percent", t.indeterminate.value ? "0%" : a.value);
 		});
-		let g = () => c` <div
+		let v = () => l` <div
         class="circular-track"
         role="progressbar"
         :aria-valuenow="${s}"
         aria-valuemin="0"
         :aria-valuemax="${t.max}"
-        :aria-label="${l}"
+        :aria-label="${u}"
         :aria-valuetext="${t["value-text"]}"
-        :style="${d}">
+        :style="${p}">
         <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
           <circle class="circle-bg" cx="50" cy="50" r="${45}"></circle>
           <circle
@@ -52,19 +52,19 @@ s(d, {
             cx="50"
             cy="50"
             r="${45}"
-            :stroke-dasharray="${f}"
-            :stroke-dashoffset="${p}"></circle>
+            :stroke-dasharray="${m}"
+            :stroke-dashoffset="${h}"></circle>
         </svg>
         <div class="circular-inner">
           <span class="circular-label">${() => t.label.value ?? ""}</span>
           <span class="circular-title">${() => t.title.value ?? ""}</span>
         </div>
-      </div>`, _ = () => c` <div class="wrapper">
+      </div>`, y = () => l` <div class="wrapper">
         <div class="header">
           <span class="progress-title">${() => t.title.value ?? ""}</span>
           <span class="end-label header-label">${() => t.label.value ?? ""}</span>
         </div>
-        <div :class=${() => `bar-row${m.value ? " bar-row-vertical" : ""}`}>
+        <div :class=${() => `bar-row${g.value ? " bar-row-vertical" : ""}`}>
           <div class="track-outer">
             <div
               class="track"
@@ -72,16 +72,16 @@ s(d, {
               :aria-valuenow="${s}"
               aria-valuemin="0"
               :aria-valuemax="${t.max}"
-              :aria-label="${l}"
+              :aria-label="${u}"
               :aria-valuetext="${t["value-text"]}">
-              <div class="fill" part="fill" :style="${h}"></div>
+              <div class="fill" part="fill" :style="${_}"></div>
             </div>
-            ${() => m.value ? null : c`<span class="floating-label">${t["floating-label"]}</span>`}
+            ${() => g.value ? null : l`<span class="floating-label">${t["floating-label"]}</span>`}
           </div>
           <span class="end-label row-label">${() => t.label.value ?? ""}</span>
         </div>
       </div>`;
-		return c` ${() => t.type.value === "circular" ? g() : _()} `;
+		return l` ${() => t.type.value === "circular" ? v() : y()} `;
 	},
 	styles: [
 		n,
@@ -91,6 +91,6 @@ s(d, {
 	]
 });
 //#endregion
-export { d as PROGRESS_TAG };
+export { p as PROGRESS_TAG };
 
 //# sourceMappingURL=progress.js.map

package/dist/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","names":[],"sources":["../src/feedback/progress/progress.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { styleMap } from '@vielzeug/ore/directives';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, forcedColorsMixin, reducedMotionMixin } from '../../styles';\nimport componentStyles from './progress.css?inline';\n\n/** Progress bar component properties */\nexport type OreProgressProps = {\n  /** Theme color for the fill bar */\n  color?: ThemeColor;\n  /** Floating chip centered above the fill endpoint (linear only). Hidden in indeterminate mode. Position formula: left = fill% − half chip width (CSS: left:X%; transform:translateX(−50%)). */\n  'floating-label'?: string;\n  /** When true, shows an infinite animation — use when progress is unknown. */\n  indeterminate?: boolean;\n  /** Accessible name AND visible text label.\n   * - Linear without `title`: rendered at the end of the bar.\n   * - Linear with `title`: moved into the header row above the bar.\n   * - Circular: large text centered inside the ring. */\n  label?: string;\n  /** Maximum value. Defaults to 100. */\n  max?: number;\n  /** Size variant controlling bar height */\n  size?: ComponentSize;\n  /** Title text.\n   * - Linear: displayed as a header above the bar; moves `label` into the header row.\n   * - Circular: smaller text displayed below the `label` inside the ring. */\n  title?: string;\n  /** 'linear' (default), 'circular', or 'vertical' */\n  type?: 'linear' | 'circular' | 'vertical';\n  /** Current progress value (0 to `max`). Ignored when `indeterminate`. */\n  value?: number;\n  /** Human-readable value text for screen readers (e.g. \"Step 2 of 5\", \"75%\"). Overrides the raw aria-valuenow when set. */\n  'value-text'?: string;\n};\n\n/**\n * A linear progress bar for conveying operation progress.\n * Supports determinate (known value) and indeterminate (unknown duration) modes.\n *\n * @element ore-progress\n *\n * @attr {number} value   - Current value (0–max). Defaults to 0.\n * @attr {number} max     - Maximum value. Defaults to 100.\n * @attr {boolean} indeterminate - Show infinite animation (ignores value/max).\n * @attr {string} color   - Theme color: 'primary' | 'success' | 'warning' | 'error' | …\n * @attr {string} size    - Bar height/width: 'sm' | 'md' | 'lg'\n * @attr {string} type   - 'linear' (default) | 'circular' | 'vertical'\n *\n * @cssprop --progress-width  - Bar width override (vertical only)\n * @attr {string} label          - Visible text label + accessible name. Linear: at bar end (or header row with title). Circular: large text centered inside the ring.\n * @attr {string} title          - Title text. Linear: header above the bar (moves label to header row). Circular: smaller text below the label inside the ring.\n * @attr {string} floating-label - Floating chip centered above the fill endpoint (linear only); hidden when indeterminate.\n *\n * @cssprop --progress-height               - Bar height override\n * @cssprop --progress-track-bg             - Track background color\n * @cssprop --progress-fill                 - Fill bar color\n * @cssprop --progress-radius               - Border radius\n * @cssprop --progress-label-gap            - Gap between header/bar row and between bar and trailing label (default 0.25 rem)\n * @cssprop --progress-title-color          - Title text color (defaults to currentColor)\n * @cssprop --progress-label-color          - Label text color (defaults to currentColor)\n * @cssprop --progress-circle-size          - Circular indicator diameter (default 6rem)\n * @cssprop --progress-circular-label-size  - Font size of the label inside the ring (default --text-xl)\n * @cssprop --progress-circular-title-size  - Font size of the title inside the ring (default --text-xs)\n *\n * @part fill - Progress fill element.\n * @example\n * ```html\n * <ore-progress value=\"45\"></ore-progress>\n * <ore-progress value=\"75\" max=\"100\" color=\"success\" size=\"lg\"></ore-progress>\n * <ore-progress indeterminate color=\"primary\" label=\"Loading…\"></ore-progress>\n * ```\n */\nexport const PROGRESS_TAG = 'ore-progress' as const;\ndefine<OreProgressProps>(PROGRESS_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    'floating-label': prop.string(),\n    indeterminate: prop.bool(false),\n    label: prop.string(),\n    max: prop.number(100),\n    title: prop.string(),\n    type: prop.oneOf(['linear', 'circular', 'vertical'] as const, 'linear'),\n    value: prop.number(0),\n    'value-text': prop.string(),\n  },\n\n  setup(props, { el, watch }) {\n    // The SVG circle circumference for a radius of 45 (viewBox 0 0 100 100)\n    const RADIUS = 45;\n    const CIRC = 2 * Math.PI * RADIUS; // ~282.7\n\n    const percent = computed(() => {\n      const v = Math.max(0, Math.min(Number(props.value.value), Number(props.max.value)));\n      const m = Math.max(1, Number(props.max.value));\n\n      return `${(v / m) * 100}%`;\n    });\n\n    const dashoffset = computed(() => {\n      const v = Math.max(0, Math.min(Number(props.value.value), Number(props.max.value)));\n      const m = Math.max(1, Number(props.max.value));\n\n      return CIRC - (v / m) * CIRC;\n    });\n\n    const ariaValueNow = () => (props.indeterminate.value ? null : String(props.value.value));\n    const ariaLabel = () => props.label.value ?? props.title.value ?? 'Progress';\n    const circularStyle = styleMap({ '--_circ': `${CIRC}px` });\n    const strokeDasharray = () => (props.indeterminate.value ? undefined : `${CIRC}px`);\n    const strokeDashoffset = () => (props.indeterminate.value ? undefined : `${dashoffset.value}px`);\n    const isVertical = computed(() => props.type.value === 'vertical');\n    const linearFillStyle = styleMap({\n      height: () => (!props.indeterminate.value && isVertical.value ? percent.value : null),\n      width: () => (!props.indeterminate.value && !isVertical.value ? percent.value : null),\n    });\n\n    watch(() => {\n      el.style.setProperty('--_percent', props.indeterminate.value ? '0%' : percent.value);\n    });\n\n    const circularTemplate = () =>\n      html` <div\n        class=\"circular-track\"\n        role=\"progressbar\"\n        :aria-valuenow=\"${ariaValueNow}\"\n        aria-valuemin=\"0\"\n        :aria-valuemax=\"${props.max}\"\n        :aria-label=\"${ariaLabel}\"\n        :aria-valuetext=\"${props['value-text']}\"\n        :style=\"${circularStyle}\">\n        <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle class=\"circle-bg\" cx=\"50\" cy=\"50\" r=\"${RADIUS}\"></circle>\n          <circle\n            class=\"circle-fill\"\n            cx=\"50\"\n            cy=\"50\"\n            r=\"${RADIUS}\"\n            :stroke-dasharray=\"${strokeDasharray}\"\n            :stroke-dashoffset=\"${strokeDashoffset}\"></circle>\n        </svg>\n        <div class=\"circular-inner\">\n          <span class=\"circular-label\">${() => props.label.value ?? ''}</span>\n          <span class=\"circular-title\">${() => props.title.value ?? ''}</span>\n        </div>\n      </div>`;\n\n    const barTemplate = () =>\n      html` <div class=\"wrapper\">\n        <div class=\"header\">\n          <span class=\"progress-title\">${() => props.title.value ?? ''}</span>\n          <span class=\"end-label header-label\">${() => props.label.value ?? ''}</span>\n        </div>\n        <div :class=${() => `bar-row${isVertical.value ? ' bar-row-vertical' : ''}`}>\n          <div class=\"track-outer\">\n            <div\n              class=\"track\"\n              role=\"progressbar\"\n              :aria-valuenow=\"${ariaValueNow}\"\n              aria-valuemin=\"0\"\n              :aria-valuemax=\"${props.max}\"\n              :aria-label=\"${ariaLabel}\"\n              :aria-valuetext=\"${props['value-text']}\">\n              <div class=\"fill\" part=\"fill\" :style=\"${linearFillStyle}\"></div>\n            </div>\n            ${() => (!isVertical.value ? html`<span class=\"floating-label\">${props['floating-label']}</span>` : null)}\n          </div>\n          <span class=\"end-label row-label\">${() => props.label.value ?? ''}</span>\n        </div>\n      </div>`;\n\n    return html` ${() => (props.type.value === 'circular' ? circularTemplate() : barTemplate())} `;\n  },\n\n  styles: [colorThemeMixin, forcedColorsMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":";;;;;;;;;AA4EA,IAAa,IAAe;AAC5B,EAAyB,GAAc;CACrC,OAAO;EACL,GAAG;EACH,GAAG;EACH,kBAAkB,EAAK,OAAO;EAC9B,eAAe,EAAK,KAAK,EAAK;EAC9B,OAAO,EAAK,OAAO;EACnB,KAAK,EAAK,OAAO,GAAG;EACpB,OAAO,EAAK,OAAO;EACnB,MAAM,EAAK,MAAM;GAAC;GAAU;GAAY;EAAU,GAAY,QAAQ;EACtE,OAAO,EAAK,OAAO,CAAC;EACpB,cAAc,EAAK,OAAO;CAC5B;CAEA,MAAM,GAAO,EAAE,OAAI,YAAS;EAE1B,IACM,IAAO,IAAI,KAAK,KAAK,IAErB,IAAU,QAIP,GAHG,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,EAAM,MAAM,KAAK,GAAG,OAAO,EAAM,IAAI,KAAK,CAAC,CAGtE,IAFD,KAAK,IAAI,GAAG,OAAO,EAAM,IAAI,KAAK,CAE7B,IAAK,IAAI,EACzB,GAEK,IAAa,QAAe;GAChC,IAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,EAAM,MAAM,KAAK,GAAG,OAAO,EAAM,IAAI,KAAK,CAAC,CAAC,GAC5E,IAAI,KAAK,IAAI,GAAG,OAAO,EAAM,IAAI,KAAK,CAAC;GAE7C,OAAO,IAAQ,IAAI,IAAK;EAC1B,CAAC,GAEK,UAAsB,EAAM,cAAc,QAAQ,OAAO,OAAO,EAAM,MAAM,KAAK,GACjF,UAAkB,EAAM,MAAM,SAAS,EAAM,MAAM,SAAS,YAC5D,IAAgB,EAAS,EAAE,WAAW,GAAG,EAAK,IAAI,CAAC,GACnD,UAAyB,EAAM,cAAc,QAAQ,KAAA,IAAY,GAAG,EAAK,KACzE,UAA0B,EAAM,cAAc,QAAQ,KAAA,IAAY,GAAG,EAAW,MAAM,KACtF,IAAa,QAAe,EAAM,KAAK,UAAU,UAAU,GAC3D,IAAkB,EAAS;GAC/B,cAAe,CAAC,EAAM,cAAc,SAAS,EAAW,QAAQ,EAAQ,QAAQ;GAChF,aAAc,CAAC,EAAM,cAAc,SAAS,CAAC,EAAW,QAAQ,EAAQ,QAAQ;EAClF,CAAC;EAED,QAAY;GACV,EAAG,MAAM,YAAY,cAAc,EAAM,cAAc,QAAQ,OAAO,EAAQ,KAAK;EACrF,CAAC;EAED,IAAM,UACJ,CAAI;;;0BAGgB,EAAa;;0BAEb,EAAM,IAAI;uBACb,EAAU;2BACN,EAAM,cAAc;kBAC7B,EAAc;;yDAEyB,GAAO;;;;;iBAK/C,GAAO;iCACS,EAAgB;kCACf,EAAiB;;;+CAGJ,EAAM,MAAM,SAAS,GAAG;+CACxB,EAAM,MAAM,SAAS,GAAG;;eAI7D,UACJ,CAAI;;+CAEqC,EAAM,MAAM,SAAS,GAAG;uDAChB,EAAM,MAAM,SAAS,GAAG;;4BAEnD,UAAU,EAAW,QAAQ,sBAAsB,KAAK;;;;;gCAKpD,EAAa;;gCAEb,EAAM,IAAI;6BACb,EAAU;iCACN,EAAM,cAAc;sDACC,EAAgB;;oBAEhD,EAAW,QAA+E,OAAvE,CAAI,gCAAgC,EAAM,kBAAkB,SAAiB;;oDAElE,EAAM,MAAM,SAAS,GAAG;;;EAIxE,OAAO,CAAI,UAAW,EAAM,KAAK,UAAU,aAAa,EAAiB,IAAI,EAAY,EAAG;CAC9F;CAEA,QAAQ;EAAC;EAAiB;EAAmB;EAAoB;CAAe;AAClF,CAAC"}
+{"version":3,"file":"progress.js","names":[],"sources":["../src/feedback/progress/progress.ts"],"sourcesContent":["import { define, html, prop, getHost, watchEffect } from '@vielzeug/ore';\nimport { styleMap } from '@vielzeug/ore/directives';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, forcedColorsMixin, reducedMotionMixin } from '../../styles';\nimport componentStyles from './progress.css?inline';\n\n/** Progress bar component properties */\nexport type OreProgressProps = {\n  /** Theme color for the fill bar */\n  color?: ThemeColor;\n  /** Floating chip centered above the fill endpoint (linear only). Hidden in indeterminate mode. Position formula: left = fill% − half chip width (CSS: left:X%; transform:translateX(−50%)). */\n  'floating-label'?: string;\n  /** When true, shows an infinite animation — use when progress is unknown. */\n  indeterminate?: boolean;\n  /** Accessible name AND visible text label.\n   * - Linear without `title`: rendered at the end of the bar.\n   * - Linear with `title`: moved into the header row above the bar.\n   * - Circular: large text centered inside the ring. */\n  label?: string;\n  /** Maximum value. Defaults to 100. */\n  max?: number;\n  /** Size variant controlling bar height */\n  size?: ComponentSize;\n  /** Title text.\n   * - Linear: displayed as a header above the bar; moves `label` into the header row.\n   * - Circular: smaller text displayed below the `label` inside the ring. */\n  title?: string;\n  /** 'linear' (default), 'circular', or 'vertical' */\n  type?: 'linear' | 'circular' | 'vertical';\n  /** Current progress value (0 to `max`). Ignored when `indeterminate`. */\n  value?: number;\n  /** Human-readable value text for screen readers (e.g. \"Step 2 of 5\", \"75%\"). Overrides the raw aria-valuenow when set. */\n  'value-text'?: string;\n};\n\n/**\n * A linear progress bar for conveying operation progress.\n * Supports determinate (known value) and indeterminate (unknown duration) modes.\n *\n * @element ore-progress\n *\n * @attr {number} value   - Current value (0–max). Defaults to 0.\n * @attr {number} max     - Maximum value. Defaults to 100.\n * @attr {boolean} indeterminate - Show infinite animation (ignores value/max).\n * @attr {string} color   - Theme color: 'primary' | 'success' | 'warning' | 'error' | …\n * @attr {string} size    - Bar height/width: 'sm' | 'md' | 'lg'\n * @attr {string} type   - 'linear' (default) | 'circular' | 'vertical'\n *\n * @cssprop --progress-width  - Bar width override (vertical only)\n * @attr {string} label          - Visible text label + accessible name. Linear: at bar end (or header row with title). Circular: large text centered inside the ring.\n * @attr {string} title          - Title text. Linear: header above the bar (moves label to header row). Circular: smaller text below the label inside the ring.\n * @attr {string} floating-label - Floating chip centered above the fill endpoint (linear only); hidden when indeterminate.\n *\n * @cssprop --progress-height               - Bar height override\n * @cssprop --progress-track-bg             - Track background color\n * @cssprop --progress-fill                 - Fill bar color\n * @cssprop --progress-radius               - Border radius\n * @cssprop --progress-label-gap            - Gap between header/bar row and between bar and trailing label (default 0.25 rem)\n * @cssprop --progress-title-color          - Title text color (defaults to currentColor)\n * @cssprop --progress-label-color          - Label text color (defaults to currentColor)\n * @cssprop --progress-circle-size          - Circular indicator diameter (default 6rem)\n * @cssprop --progress-circular-label-size  - Font size of the label inside the ring (default --text-xl)\n * @cssprop --progress-circular-title-size  - Font size of the title inside the ring (default --text-xs)\n *\n * @part fill - Progress fill element.\n * @example\n * ```html\n * <ore-progress value=\"45\"></ore-progress>\n * <ore-progress value=\"75\" max=\"100\" color=\"success\" size=\"lg\"></ore-progress>\n * <ore-progress indeterminate color=\"primary\" label=\"Loading…\"></ore-progress>\n * ```\n */\nexport const PROGRESS_TAG = 'ore-progress' as const;\ndefine<OreProgressProps>(PROGRESS_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    'floating-label': prop.string(),\n    indeterminate: prop.bool(false),\n    label: prop.string(),\n    max: prop.number(100),\n    title: prop.string(),\n    type: prop.oneOf(['linear', 'circular', 'vertical'] as const, 'linear'),\n    value: prop.number(0),\n    'value-text': prop.string(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    // The SVG circle circumference for a radius of 45 (viewBox 0 0 100 100)\n    const RADIUS = 45;\n    const CIRC = 2 * Math.PI * RADIUS; // ~282.7\n\n    const percent = computed(() => {\n      const v = Math.max(0, Math.min(Number(props.value.value), Number(props.max.value)));\n      const m = Math.max(1, Number(props.max.value));\n\n      return `${(v / m) * 100}%`;\n    });\n\n    const dashoffset = computed(() => {\n      const v = Math.max(0, Math.min(Number(props.value.value), Number(props.max.value)));\n      const m = Math.max(1, Number(props.max.value));\n\n      return CIRC - (v / m) * CIRC;\n    });\n\n    const ariaValueNow = () => (props.indeterminate.value ? null : String(props.value.value));\n    const ariaLabel = () => props.label.value ?? props.title.value ?? 'Progress';\n    const circularStyle = styleMap({ '--_circ': `${CIRC}px` });\n    const strokeDasharray = () => (props.indeterminate.value ? undefined : `${CIRC}px`);\n    const strokeDashoffset = () => (props.indeterminate.value ? undefined : `${dashoffset.value}px`);\n    const isVertical = computed(() => props.type.value === 'vertical');\n    const linearFillStyle = styleMap({\n      height: () => (!props.indeterminate.value && isVertical.value ? percent.value : null),\n      width: () => (!props.indeterminate.value && !isVertical.value ? percent.value : null),\n    });\n\n    watch(() => {\n      el.style.setProperty('--_percent', props.indeterminate.value ? '0%' : percent.value);\n    });\n\n    const circularTemplate = () =>\n      html` <div\n        class=\"circular-track\"\n        role=\"progressbar\"\n        :aria-valuenow=\"${ariaValueNow}\"\n        aria-valuemin=\"0\"\n        :aria-valuemax=\"${props.max}\"\n        :aria-label=\"${ariaLabel}\"\n        :aria-valuetext=\"${props['value-text']}\"\n        :style=\"${circularStyle}\">\n        <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle class=\"circle-bg\" cx=\"50\" cy=\"50\" r=\"${RADIUS}\"></circle>\n          <circle\n            class=\"circle-fill\"\n            cx=\"50\"\n            cy=\"50\"\n            r=\"${RADIUS}\"\n            :stroke-dasharray=\"${strokeDasharray}\"\n            :stroke-dashoffset=\"${strokeDashoffset}\"></circle>\n        </svg>\n        <div class=\"circular-inner\">\n          <span class=\"circular-label\">${() => props.label.value ?? ''}</span>\n          <span class=\"circular-title\">${() => props.title.value ?? ''}</span>\n        </div>\n      </div>`;\n\n    const barTemplate = () =>\n      html` <div class=\"wrapper\">\n        <div class=\"header\">\n          <span class=\"progress-title\">${() => props.title.value ?? ''}</span>\n          <span class=\"end-label header-label\">${() => props.label.value ?? ''}</span>\n        </div>\n        <div :class=${() => `bar-row${isVertical.value ? ' bar-row-vertical' : ''}`}>\n          <div class=\"track-outer\">\n            <div\n              class=\"track\"\n              role=\"progressbar\"\n              :aria-valuenow=\"${ariaValueNow}\"\n              aria-valuemin=\"0\"\n              :aria-valuemax=\"${props.max}\"\n              :aria-label=\"${ariaLabel}\"\n              :aria-valuetext=\"${props['value-text']}\">\n              <div class=\"fill\" part=\"fill\" :style=\"${linearFillStyle}\"></div>\n            </div>\n            ${() => (!isVertical.value ? html`<span class=\"floating-label\">${props['floating-label']}</span>` : null)}\n          </div>\n          <span class=\"end-label row-label\">${() => props.label.value ?? ''}</span>\n        </div>\n      </div>`;\n\n    return html` ${() => (props.type.value === 'circular' ? circularTemplate() : barTemplate())} `;\n  },\n\n  styles: [colorThemeMixin, forcedColorsMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":";;;;;;;;;AA4EA,IAAa,IAAe;AAC5B,EAAyB,GAAc;CACrC,OAAO;EACL,GAAG;EACH,GAAG;EACH,kBAAkB,EAAK,OAAO;EAC9B,eAAe,EAAK,KAAK,EAAK;EAC9B,OAAO,EAAK,OAAO;EACnB,KAAK,EAAK,OAAO,GAAG;EACpB,OAAO,EAAK,OAAO;EACnB,MAAM,EAAK,MAAM;GAAC;GAAU;GAAY;EAAU,GAAY,QAAQ;EACtE,OAAO,EAAK,OAAO,CAAC;EACpB,cAAc,EAAK,OAAO;CAC5B;CAEA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAQ,GAIR,IAAO,IAAI,KAAK,KAAK,IAErB,IAAU,QAIP,GAHG,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,EAAM,MAAM,KAAK,GAAG,OAAO,EAAM,IAAI,KAAK,CAAC,CAGtE,IAFD,KAAK,IAAI,GAAG,OAAO,EAAM,IAAI,KAAK,CAE7B,IAAK,IAAI,EACzB,GAEK,IAAa,QAAe;GAChC,IAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,EAAM,MAAM,KAAK,GAAG,OAAO,EAAM,IAAI,KAAK,CAAC,CAAC,GAC5E,IAAI,KAAK,IAAI,GAAG,OAAO,EAAM,IAAI,KAAK,CAAC;GAE7C,OAAO,IAAQ,IAAI,IAAK;EAC1B,CAAC,GAEK,UAAsB,EAAM,cAAc,QAAQ,OAAO,OAAO,EAAM,MAAM,KAAK,GACjF,UAAkB,EAAM,MAAM,SAAS,EAAM,MAAM,SAAS,YAC5D,IAAgB,EAAS,EAAE,WAAW,GAAG,EAAK,IAAI,CAAC,GACnD,UAAyB,EAAM,cAAc,QAAQ,KAAA,IAAY,GAAG,EAAK,KACzE,UAA0B,EAAM,cAAc,QAAQ,KAAA,IAAY,GAAG,EAAW,MAAM,KACtF,IAAa,QAAe,EAAM,KAAK,UAAU,UAAU,GAC3D,IAAkB,EAAS;GAC/B,cAAe,CAAC,EAAM,cAAc,SAAS,EAAW,QAAQ,EAAQ,QAAQ;GAChF,aAAc,CAAC,EAAM,cAAc,SAAS,CAAC,EAAW,QAAQ,EAAQ,QAAQ;EAClF,CAAC;EAED,QAAY;GACV,EAAG,MAAM,YAAY,cAAc,EAAM,cAAc,QAAQ,OAAO,EAAQ,KAAK;EACrF,CAAC;EAED,IAAM,UACJ,CAAI;;;0BAGgB,EAAa;;0BAEb,EAAM,IAAI;uBACb,EAAU;2BACN,EAAM,cAAc;kBAC7B,EAAc;;yDAEyB,GAAO;;;;;iBAK/C,GAAO;iCACS,EAAgB;kCACf,EAAiB;;;+CAGJ,EAAM,MAAM,SAAS,GAAG;+CACxB,EAAM,MAAM,SAAS,GAAG;;eAI7D,UACJ,CAAI;;+CAEqC,EAAM,MAAM,SAAS,GAAG;uDAChB,EAAM,MAAM,SAAS,GAAG;;4BAEnD,UAAU,EAAW,QAAQ,sBAAsB,KAAK;;;;;gCAKpD,EAAa;;gCAEb,EAAM,IAAI;6BACb,EAAU;iCACN,EAAM,cAAc;sDACC,EAAgB;;oBAEhD,EAAW,QAA+E,OAAvE,CAAI,gCAAgC,EAAM,kBAAkB,SAAiB;;oDAElE,EAAM,MAAM,SAAS,GAAG;;;EAIxE,OAAO,CAAI,UAAW,EAAM,KAAK,UAAU,aAAa,EAAiB,IAAI,EAAY,EAAG;CAC9F;CAEA,QAAQ;EAAC;EAAiB;EAAmB;EAAoB;CAAe;AAClF,CAAC"}

package/dist/radio-group.cjs

@@ -1,12 +1,12 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/directives/when.cjs");require("./ore/dist/directives.cjs");const 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("./headless/ore.cjs"),o=require("./headless/choice-field.cjs"),s=require("./headless/nav.cjs"),c=require("./headless/light-dom.cjs"),l=require("./inputs/shared/form-context.cjs"),u=require("./inputs/radio-group/radio-group.css?inline.cjs");let d=require("@vielzeug/ore");require("@vielzeug/ripple");var f=(0,d.createContext)(`OreRadioGroup`),p=`ore-radio-group`;(0,d.define)(p,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,error:d.prop.string(),helper:d.prop.string(),label:d.prop.string(),name:d.prop.string(),orientation:d.prop.oneOf([`horizontal`,`vertical`],`vertical`),required:d.prop.bool(!1),value:d.prop.string()},setup(t,{bind:n,el:r,emit:i,onCleanup:u,provide:p,slots:m,watch:h}){let g=(0,d.inject)(l.FORM_CTX),_=l.useFormContext(n,t,g),v=null,y=o.createChoiceField({disabled:_.disabled,error:t.error,getFormField:()=>v,helper:t.helper,label:t.label,prefix:`radio-group`,signal:a.lifecycleSignal(u),validateOn:g?.validateOn,value:t.value});v=(0,d.useField)({disabled:y.disabled,toFormValue:e=>e,value:y.formValue});let b=y.selectedValue,x=_.disabled;n({attr:{size:_.size,value:()=>b.value||null}});let S=()=>c.getLightChildrenByTag(r,`ore-radio`),C=()=>x.value?[]:S().filter(e=>!e.hasAttribute(`disabled`)),w=e=>c.getChoiceLabel(S(),e),T=(e,t)=>{y.setValues(e?[e]:[]),i(`change`,{labels:e?[w(e)]:[],originalEvent:t,values:e?[e]:[]}),y.triggerValidation(`blur`)};p(f,{color:t.color,disabled:x,name:t.name,select:T,size:t.size,value:b}),h(()=>{m.elements().value,b.value;let e=S();for(let n of e){let e=n.getAttribute(`value`)??``;n.toggleAttribute(`checked`,e===b.value),t.name.value?n.setAttribute(`name`,t.name.value):n.removeAttribute(`name`),t.color.value?n.setAttribute(`color`,t.color.value):n.removeAttribute(`color`),t.size.value?n.setAttribute(`size`,t.size.value):n.removeAttribute(`size`),n.toggleAttribute(`disabled`,x.value)}}),h(()=>{m.elements().value;let e=S(),t=!1;for(let n of e){let e=n.getAttribute(`value`)===b.value;n.setAttribute(`tabindex`,e&&!x.value?`0`:`-1`),e&&!x.value&&(t=!0)}if(!t&&e.length>0){let t=e.find(e=>!e.hasAttribute(`disabled`));t&&t.setAttribute(`tabindex`,`0`)}});let E=s.createListControl({getItems:C,keys:{next:[`ArrowDown`,`ArrowRight`],prev:[`ArrowUp`,`ArrowLeft`]},loop:!0,onNavigate:(e,t,n)=>{let r=C()[t];r&&(r.focus(),r.tagName===`ORE-RADIO`&&T(r.getAttribute(`value`)??``,n))}});n({on:{change:e=>{e.target!==r&&(e.stopPropagation(),T(e.target.getAttribute(`value`)??``,e))},keydown:e=>{let t=C();if(!t.length)return;let n=t.indexOf(document.activeElement);n!==-1&&(E.set(n),E.handleKeydown(e))}}});let D=(0,d.createStableId)(`radio-group-legend`);return d.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/directives/when.cjs");require("./ore/dist/directives.cjs");const 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("./headless/ore.cjs"),o=require("./headless/choice-field.cjs"),s=require("./headless/nav.cjs"),c=require("./headless/light-dom.cjs"),l=require("./ore/dist/forms/field.cjs");require("./ore/dist/forms.cjs");const u=require("./inputs/shared/form-context.cjs"),d=require("./inputs/radio-group/radio-group.css.cjs");let f=require("@vielzeug/ore");require("@vielzeug/ripple");var p=(0,f.createContext)(`OreRadioGroup`),m=`ore-radio-group`;(0,f.define)(m,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,error:f.prop.string(),helper:f.prop.string(),label:f.prop.string(),name:f.prop.string(),orientation:f.prop.oneOf([`horizontal`,`vertical`],`vertical`),required:f.prop.bool(!1),value:f.prop.string()},setup(t){let n=(0,f.getHost)(),r=(0,f.useEmit)(),i=(0,f.useSlots)(),d=f.watchEffect,m=(0,f.inject)(u.FORM_CTX),h=u.useFormContext(t,m),g=null,_=o.createChoiceField({disabled:h.disabled,error:t.error,getFormField:()=>g,helper:t.helper,label:t.label,prefix:`radio-group`,signal:a.lifecycleSignal(f.onCleanup),validateOn:m?.validateOn,value:t.value});g=l.useField({disabled:_.disabled,toFormValue:e=>e,value:_.formValue});let v=_.selectedValue,y=h.disabled;(0,f.bind)({attr:{size:h.size,value:()=>v.value||null}});let b=()=>c.getLightChildrenByTag(n,`ore-radio`),x=()=>y.value?[]:b().filter(e=>!e.hasAttribute(`disabled`)),S=e=>c.getChoiceLabel(b(),e),C=(e,t)=>{_.setValues(e?[e]:[]);let n=e?[S(e)]:[];r(`change`,{labels:n,originalEvent:t,values:e?[e]:[]}),_.triggerValidation(`blur`)};(0,f.provide)(p,{color:t.color,disabled:y,name:t.name,select:C,size:t.size,value:v}),d(()=>{i.elements().value,v.value;let e=b();for(let n of e){let e=n.getAttribute(`value`)??``;n.toggleAttribute(`checked`,e===v.value),t.name.value?n.setAttribute(`name`,t.name.value):n.removeAttribute(`name`),t.color.value?n.setAttribute(`color`,t.color.value):n.removeAttribute(`color`),t.size.value?n.setAttribute(`size`,t.size.value):n.removeAttribute(`size`),n.toggleAttribute(`disabled`,y.value)}}),d(()=>{i.elements().value;let e=b(),t=!1;for(let n of e){let e=n.getAttribute(`value`)===v.value;n.setAttribute(`tabindex`,e&&!y.value?`0`:`-1`),e&&!y.value&&(t=!0)}if(!t&&e.length>0){let t=e.find(e=>!e.hasAttribute(`disabled`));t&&t.setAttribute(`tabindex`,`0`)}});let w=s.createListControl({getItems:x,keys:{next:[`ArrowDown`,`ArrowRight`],prev:[`ArrowUp`,`ArrowLeft`]},loop:!0,onNavigate:(e,t,n)=>{let r=x()[t];r&&(r.focus(),r.tagName===`ORE-RADIO`&&C(r.getAttribute(`value`)??``,n))}});(0,f.bind)({on:{change:e=>{e.target!==n&&(e.stopPropagation(),C(e.target.getAttribute(`value`)??``,e))},keydown:e=>{let t=x();if(!t.length)return;let n=t.indexOf(document.activeElement);n!==-1&&(w.set(n),w.handleKeydown(e))}}});let T=(0,f.createStableId)(`radio-group-legend`);return f.html`
       <fieldset
         role="radiogroup"
         aria-required="${()=>String(!!t.required.value)}"
-        :aria-invalid="${y.ariaInvalid}"
-        :aria-errormessage="${y.ariaErrorMessage}"
-        :aria-describedby="${y.ariaDescribedBy}">
-        <legend id="${D}" ?hidden=${()=>!t.label.value}>
-          ${t.label}${e.when(()=>!!t.required.value,()=>d.html`<span aria-hidden="true"> *</span>`)}
+        :aria-invalid="${_.ariaInvalid}"
+        :aria-errormessage="${_.ariaErrorMessage}"
+        :aria-describedby="${_.ariaDescribedBy}">
+        <legend id="${T}" ?hidden=${()=>!t.label.value}>
+          ${t.label}${e.when(()=>!!t.required.value,()=>f.html`<span aria-hidden="true"> *</span>`)}
         </legend>
         <div class="radio-group-items" part="items">
           <slot></slot>
@@ -14,12 +14,12 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         <div
           class="helper-text"
           part="helper"
-          id="${y.assistiveId}"
-          :role="${()=>y.errorText.value?`alert`:null}"
+          id="${_.assistiveId}"
+          :role="${()=>_.errorText.value?`alert`:null}"
           aria-live="polite"
-          ?hidden="${()=>!y.errorText.value&&!y.helperText.value}">
-          ${()=>y.errorText.value||y.helperText.value}
+          ?hidden="${()=>!_.errorText.value&&!_.helperText.value}">
+          ${()=>_.errorText.value||_.helperText.value}
         </div>
       </fieldset>
-    `},styles:[r.colorThemeMixin,t.sizeVariantMixin(),n.disabledStateMixin,u.default]}),exports.RADIO_GROUP_CTX=f,exports.RADIO_GROUP_TAG=p;
+    `},styles:[r.colorThemeMixin,t.sizeVariantMixin(),n.disabledStateMixin,d.default]}),exports.RADIO_GROUP_CTX=p,exports.RADIO_GROUP_TAG=m;
 //# sourceMappingURL=radio-group.cjs.map

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 { createContext, createStableId, define, useField, html, inject, prop } from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\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, OreRadioGroupEvents>(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    value: prop.string(),\n  },\n  setup(props, { bind, el, emit, onCleanup, provide, slots, watch }) {\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(bind, props, formCtx);\n\n    let _formField: { reportValidity(): void } | null = null;\n    const choice = createChoiceField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      getFormField: () => _formField,\n      helper: props.helper,\n      label: props.label,\n      prefix: 'radio-group',\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    _formField = useField<string>({ disabled: choice.disabled, toFormValue: (v) => v, value: choice.formValue });\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.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    value: prop.string(),\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    let _formField: { reportValidity(): void } | null = null;\n    const choice = createChoiceField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      getFormField: () => _formField,\n      helper: props.helper,\n      label: props.label,\n      prefix: 'radio-group',\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    _formField = useField<string>({ disabled: choice.disabled, toFormValue: (v) => v, value: choice.formValue });\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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"}