@ecoma-io/loom 0.1.0 → 0.2.0

package/dist/primitives/Progress/Progress.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/primitives/Progress/Progress.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { ProgressRoot, ProgressIndicator } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Progress — determinate progress bar for a task whose extent as a percentage\n * is known (upload %, step 3 of 5). `modelValue` null/undefined renders the\n * *indeterminate* state — an empty track, since there is no percentage yet to\n * paint. For a wait of unknown duration with no percentage at all, use\n * Spinner instead of guessing a Progress value.\n *\n * Built on Reka UI's Progress: role=\"progressbar\" + aria-valuenow/min/max set\n * on the root automatically. `ariaLabel`/`ariaLabelledby` are bound onto\n * ProgressRoot (fallthrough overrides Reka's own generated \"`NN%`\" label) so\n * the accessible name describes *what* is loading, not just how much.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The completed amount, 0–`max`; `null`/omitted renders indeterminate. */\n    modelValue?: number | null;\n    /** The value that reads as 100% complete. */\n    max?: number;\n    /** Accessible name describing the task, overriding Reka's default `NN%` label. */\n    ariaLabel?: string;\n    /** Accessible name sourced from another element's id, in place of `ariaLabel`. */\n    ariaLabelledby?: string;\n  }>(),\n  {\n    max: 100,\n  },\n);\n\n/**\n * The value the bar itself is given, clamped into [0, max]; null while\n * indeterminate. The clamp has to happen here rather than only on the way to\n * the transform below: `aria-valuenow` is generated from whatever ProgressRoot\n * receives, so handing it the raw prop announces a number outside the range\n * `aria-valuemin`/`aria-valuemax` declare — \"150 percent\" read out over a bar\n * painted at 100.\n */\nconst value = computed<number | null>(() =>\n  props.modelValue === null || props.modelValue === undefined\n    ? null\n    : Math.min(Math.max(props.modelValue, 0), props.max),\n);\n\n/** Percentage 0–100, derived from the clamped value; null while indeterminate. */\nconst pct = computed<number | null>(() =>\n  value.value === null ? null : (value.value / props.max) * 100,\n);\n\ndefineExpose({ pct });\n</script>\n\n<template>\n  <ProgressRoot\n    :model-value=\"value\"\n    :max=\"max\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"ariaLabelledby\"\n    class=\"relative h-2 w-full overflow-hidden rounded-full bg-muted\"\n  >\n    <!-- Determinate: a full-width bar slid left by the remaining percentage\n         (transform eased over --duration-slow). Indeterminate: a short segment\n         sweeping the track on a loop, since there is no percentage to paint.\n         Completion beat: at 100% the fill turns success (Loom dual-force\n         law — a finished piece of work reads as done at a glance), eased in\n         over the same --duration-slow lane via the background transition. -->\n    <ProgressIndicator\n      :class=\"\n        cn(\n          'h-full',\n          pct === 100 ? 'bg-success' : 'bg-primary',\n          pct === null && 'w-1/3 animate-progress-indeterminate rounded-full',\n        )\n      \"\n      :style=\"\n        pct === null\n          ? undefined\n          : {\n              transition:\n                'transform var(--duration-slow) var(--ease-out), background-color var(--duration-slow) var(--ease-out)',\n              transform: `translateX(-${100 - pct}%)`,\n            }\n      \"\n    />\n  </ProgressRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ;;;;;;;;;EAwBd,MAAM,QAAQ,eACZ,MAAM,eAAe,QAAQ,MAAM,eAAe,KAAA,IAC9C,OACA,KAAK,IAAI,KAAK,IAAI,MAAM,YAAY,CAAC,GAAG,MAAM,GAAG,CACvD;;EAGA,MAAM,MAAM,eACV,MAAM,UAAU,OAAO,OAAQ,MAAM,QAAQ,MAAM,MAAO,GAC5D;EAEA,SAAa,EAAE,IAAI,CAAC;;GAIlB,OAAA,UAAA,GAAA,YA+Be,MAAA,YAAA,GAAA;IA9BZ,eAAa,MAAA;IACb,KAAK,QAAA;IACL,cAAY,QAAA;IACZ,mBAAiB,QAAA;IAClB,OAAM;;IAQN,SAAA,cAiBE,CAjBF,YAiBE,MAAA,iBAAA,GAAA;KAhBC,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,UAAgC,IAAA,UAAG,MAAA,eAAA,cAAkD,IAAA,UAAG,QAAA,mDAAA,CAAA;KAO1G,OAAK,eAAW,IAAA,UAAG,OAAsB,KAAA,IAAA;;MAAyN,WAAA,eAAA,MAAA,IAAA,MAAG"}
+{"version":3,"file":"Progress.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/primitives/Progress/Progress.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\nimport type { LabelOf } from \"../../lib/labels\";\n\n/**\n * The one thing this bar prints, and the placeholder it prints instead when\n * there is no percentage yet.\n *\n * **`value` takes both raw numbers and no formatting at all.** A hand-built\n * `${Math.round(pct)}%` has already decided three things a component cannot\n * know: that the sign trails the digits — Turkish writes `%42` — that the\n * digits are Western Arabic, and that a percentage is the right reading of the\n * pair at all. Handed `value` and `max`, a host reaches\n * `Intl.NumberFormat(locale, { style: \"percent\" })` for the first two and can\n * answer \"3 of 4 steps\" instead of \"75%\" for the third.\n *\n * The rounding therefore lives in Loom's default rather than in the component,\n * so it is a wording choice a host replaces along with the words.\n */\nexport interface ProgressLabels {\n  /** The readout beside the track, from the clamped value and the scale it is out of. */\n  readonly value: LabelOf<{ value: number; max: number }>;\n  /** What the readout prints while there is no percentage — never a false zero. */\n  readonly indeterminate: string;\n}\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n */\nexport const PROGRESS_LABELS: ProgressLabels = {\n  value: ({ value, max }) => `${String(Math.round((value / max) * 100))}%`,\n  indeterminate: \"—\",\n};\n\n/**\n * The track's thickness. Deliberately *not* the shared control-height scale a\n * Select or a TextField uses: a bar is a stroke laid under a heading or inside\n * a table row, never a control a person clicks into, so lining it up with a\n * 36px input would only make it a slab. `md` is the thickness every caller got\n * before this prop existed and stays the default for exactly that reason.\n */\nexport type ProgressSize = \"sm\" | \"md\" | \"lg\";\n\nexport const progressVariants = cva(\"relative w-full overflow-hidden rounded-full bg-muted\", {\n  variants: {\n    size: {\n      sm: \"h-1\",\n      md: \"h-2\",\n      lg: \"h-3\",\n    } satisfies Record<ProgressSize, string>,\n  },\n  defaultVariants: { size: \"md\" },\n});\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { ProgressRoot, ProgressIndicator } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { useLabels, type LabelOverrides } from \"../../lib/labels\";\n\n/**\n * Progress — determinate progress bar for a task whose extent as a percentage\n * is known (upload %, step 3 of 5). `modelValue` null/undefined renders the\n * *indeterminate* state — an empty track, since there is no percentage yet to\n * paint. For a wait of unknown duration with no percentage at all, use\n * Spinner instead of guessing a Progress value. For the same number drawn as\n * a ring — a dashboard tile, a quota, a score where the circle is the visual\n * — use RadialProgress, which mirrors this contract exactly.\n *\n * Built on Reka UI's Progress: role=\"progressbar\" + aria-valuenow/min/max set\n * on the root automatically. `ariaLabel`/`ariaLabelledby` are bound onto\n * ProgressRoot (fallthrough overrides Reka's own generated \"`NN%`\" label) so\n * the accessible name describes *what* is loading, not just how much.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The completed amount, 0–`max`; `null`/omitted renders indeterminate. */\n    modelValue?: number | null;\n    /** The value that reads as 100% complete. */\n    max?: number;\n    /** Track thickness. Its own scale, not the control-height scale — a bar is a stroke, not a form control. */\n    size?: ProgressSize;\n    /** Print the rounded percentage as text beside the track. While indeterminate it prints an em dash, never a number. */\n    showValue?: boolean;\n    /** Accessible name describing the task, overriding Reka's default `NN%` label. */\n    ariaLabel?: string;\n    /** Accessible name sourced from another element's id, in place of `ariaLabel`. */\n    ariaLabelledby?: string;\n    /**\n     * How the readout is written, as any subset of `ProgressLabels` — the rest\n     * stay as the host's `provideLoomLabels` vocabulary left them, and then as\n     * Loom's English.\n     *\n     * The per-instance case is a bar counting something a percentage is the\n     * wrong reading of: `value: ({ value, max }) => \\`Step ${value} of ${max}\\``.\n     */\n    labels?: LabelOverrides<ProgressLabels>;\n  }>(),\n  {\n    max: 100,\n    size: \"md\",\n    showValue: false,\n  },\n);\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"progress\", PROGRESS_LABELS, () => props.labels);\n\n/** The readout tracks the track: a 1px bar with 14px digits beside it is not one object. */\nconst VALUE_TEXT = {\n  sm: \"text-micro\",\n  md: \"text-xs\",\n  lg: \"text-sm\",\n} satisfies Record<ProgressSize, string>;\n\n// `showValue` changes which node is outermost, so fallthrough can no longer be\n// left to Vue: `class` goes to whatever the caller sees as the component's box\n// — the flex row when there is a readout, the track itself when the track is\n// all there is — and everything else (aria-describedby, data-testid) goes to\n// ProgressRoot, which is the element carrying role=\"progressbar\" and therefore\n// the one those attributes are describing.\n//\n// The two branches are written out rather than always wrapping the track in a\n// row, because a bare Progress has to keep the exact box it had before\n// `showValue` existed — a wrapper, even an empty one, changes how it sits in\n// a flex or grid parent.\n//\n// Nothing may sit beside those two branches at the top level of the template,\n// comments included: a second root node turns the component into a fragment,\n// and the attributes routed by hand above then have nowhere single to land.\n//\n// Routing `class` through `cn()` also settles a fight that used to be decided\n// by stylesheet order: Vue's own fallthrough merge concatenates, so a caller's\n// `bg-primary` sat alongside the track's `bg-muted` rather than replacing it.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest } = useSplitAttrs();\n\n/**\n * The value the bar itself is given, clamped into [0, max]; null while\n * indeterminate. The clamp has to happen here rather than only on the way to\n * the transform below: `aria-valuenow` is generated from whatever ProgressRoot\n * receives, so handing it the raw prop announces a number outside the range\n * `aria-valuemin`/`aria-valuemax` declare — \"150 percent\" read out over a bar\n * painted at 100.\n */\nconst value = computed<number | null>(() =>\n  props.modelValue === null || props.modelValue === undefined\n    ? null\n    : Math.min(Math.max(props.modelValue, 0), props.max),\n);\n\n/** Percentage 0–100, derived from the clamped value; null while indeterminate. */\nconst pct = computed<number | null>(() =>\n  value.value === null ? null : (value.value / props.max) * 100,\n);\n\n/**\n * Everything ProgressRoot is given in both branches of the template. `rest`\n * lands last so a caller passing a bare `aria-label` attribute still wins over\n * the prop, which is the precedence Vue's own fallthrough gave before this\n * component took the attributes over by hand.\n */\nconst rootAttrs = computed(() => ({\n  modelValue: value.value,\n  max: props.max,\n  \"aria-label\": props.ariaLabel,\n  \"aria-labelledby\": props.ariaLabelledby,\n  ...rest.value,\n}));\n\n// Determinate: a full-width bar slid left by the remaining percentage\n// (transform eased over --duration-slow). Indeterminate: a short segment\n// sweeping the track on a loop, since there is no percentage to paint.\n// Completion beat: at 100% the fill turns success (Loom law — a\n// finished piece of work reads as done at a glance), eased in over the same\n// --duration-slow lane via the background transition.\nconst indicatorClass = computed(() =>\n  cn(\n    \"h-full\",\n    pct.value === 100 ? \"bg-success\" : \"bg-primary\",\n    pct.value === null && \"w-1/3 animate-progress-indeterminate rounded-full\",\n  ),\n);\n\nconst indicatorStyle = computed(() =>\n  pct.value === null\n    ? undefined\n    : {\n        transition:\n          \"transform var(--duration-slow) var(--ease-out), background-color var(--duration-slow) var(--ease-out)\",\n        transform: `translateX(-${100 - pct.value}%)`,\n      },\n);\n\n/**\n * An indeterminate bar has no percentage, so the readout prints the placeholder\n * rather than the `0%` a naive `pct ?? 0` would produce — \"we do not know yet\"\n * and \"none of it is done\" are different facts, and only one of them is true.\n *\n * The determinate branch hands over `value` and `max` rather than the\n * percentage it already computed for the transform: rounding, the position of\n * the per-cent sign and the shape of the digits are all the host's, and `pct`\n * is a division this component happens to need for the paint.\n */\nconst readout = computed(() =>\n  value.value === null\n    ? text.value.indeterminate\n    : text.value.value({ value: value.value, max: props.max }),\n);\n\ndefineExpose({ pct });\n</script>\n\n<template>\n  <ProgressRoot\n    v-if=\"!showValue\"\n    v-bind=\"rootAttrs\"\n    :class=\"cn(progressVariants({ size }), attrs.class as string)\"\n  >\n    <ProgressIndicator :class=\"indicatorClass\" :style=\"indicatorStyle\" />\n  </ProgressRoot>\n\n  <div v-else :class=\"cn('flex w-full items-center gap-3', attrs.class as string)\">\n    <ProgressRoot\n      v-bind=\"rootAttrs\"\n      :class=\"cn(progressVariants({ size }), 'w-auto min-w-0 flex-1')\"\n    >\n      <ProgressIndicator :class=\"indicatorClass\" :style=\"indicatorStyle\" />\n    </ProgressRoot>\n    <!-- Hidden from assistive tech: the progressbar already announces this\n         number through `aria-valuenow`, and a visible copy beside it is read\n         out a second time as loose text. Fixed width so the track does not\n         resize itself every time the digit count changes. -->\n    <span\n      aria-hidden=\"true\"\n      :class=\"cn('tabular w-10 shrink-0 text-right text-muted-foreground', VALUE_TEXT[size])\"\n      >{{ readout }}</span\n    >\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,IAAa,kBAAkC;CAC7C,QAAQ,EAAE,OAAO,UAAU,GAAG,OAAO,KAAK,MAAO,QAAQ,MAAO,GAAG,CAAC,EAAE;CACtE,eAAe;AACjB;AAWA,IAAa,mBAAmB,IAAI,yDAAyD;CAC3F,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;;;;;;;;;;;;;;;;;EAwBD,MAAM,QAAQ;EAkCd,MAAM,OAAO,UAAU,YAAY,uBAAuB,MAAM,MAAM;;EAGtE,MAAM,aAAa;GACjB,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EAsBA,MAAM,EAAE,OAAO,SAAS,cAAc;;;;;;;;;EAUtC,MAAM,QAAQ,eACZ,MAAM,eAAe,QAAQ,MAAM,eAAe,KAAA,IAC9C,OACA,KAAK,IAAI,KAAK,IAAI,MAAM,YAAY,CAAC,GAAG,MAAM,GAAG,CACvD;;EAGA,MAAM,MAAM,eACV,MAAM,UAAU,OAAO,OAAQ,MAAM,QAAQ,MAAM,MAAO,GAC5D;;;;;;;EAQA,MAAM,YAAY,gBAAgB;GAChC,YAAY,MAAM;GAClB,KAAK,MAAM;GACX,cAAc,MAAM;GACpB,mBAAmB,MAAM;GACzB,GAAG,KAAK;EACV,EAAE;EAQF,MAAM,iBAAiB,eACrB,GACE,UACA,IAAI,UAAU,MAAM,eAAe,cACnC,IAAI,UAAU,QAAQ,mDACxB,CACF;EAEA,MAAM,iBAAiB,eACrB,IAAI,UAAU,OACV,KAAA,IACA;GACE,YACE;GACF,WAAW,eAAe,MAAM,IAAI,MAAM;EAC5C,CACN;;;;;;;;;;;EAYA,MAAM,UAAU,eACd,MAAM,UAAU,OACZ,KAAK,MAAM,gBACX,KAAK,MAAM,MAAM;GAAE,OAAO,MAAM;GAAO,KAAK,MAAM;EAAI,CAAC,CAC7D;EAEA,SAAa,EAAE,IAAI,CAAC;;GAKT,OAAA,CAAA,QAAA,aADT,UAAA,GAAA,YAMe,MAAA,YAAA,GANf,WAMe,EAAA,KAAA,EAAA,GAJL,UAAA,OAAS,EAChB,OAAO,MAAA,EAAA,CAAE,CAAC,MAAA,gBAAA,CAAgB,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAK,MAAA,KAAA,CAAK,CAAC,KAAK,EAAA,CAAA,GAAA;IAElD,SAAA,cAAqE,CAArE,YAAqE,MAAA,iBAAA,GAAA;KAAjD,OAAK,eAAE,eAAA,KAAc;KAAG,OAAK,eAAE,eAAA,KAAc;;;GAGnE,GAAA,IAAA,CAAA,OAAA,CAAA,MAAA,UAAA,GAAA,mBAgBM,OAAA;;IAhBO,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,kCAAmC,MAAA,KAAA,CAAK,CAAC,KAAK,CAAA;GAClE,GAAA,CAAA,YAKe,MAAA,YAAA,GALf,WACU,UAIK,OAJI,EAChB,OAAO,MAAA,EAAA,CAAE,CAAC,MAAA,gBAAA,CAAgB,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAA,uBAAA,EAAA,CAAA,GAAA;IAElC,SAAA,cAAqE,CAArE,YAAqE,MAAA,iBAAA,GAAA;KAAjD,OAAK,eAAE,eAAA,KAAc;KAAG,OAAK,eAAE,eAAA,KAAc;;;GAMnE,GAAA,IAAA,CAAA,OAAA,CAAA,GAAA,mBAIC,QAAA;IAHC,eAAY;IACX,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,0DAA2D,WAAW,QAAA,KAAI,CAAA;GAChF,GAAA,gBAAA,QAAA,KAAO,GAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/primitives/RadialProgress/RadialProgress.js

@@ -0,0 +1,7 @@
+import RadialProgress_vue_vue_type_script_setup_true_lang_default, { RADIAL_PROGRESS_LABELS, radialProgressVariants } from "./RadialProgress.vue_vue_type_script_setup_true_lang.js";
+//#region src/primitives/RadialProgress/RadialProgress.vue
+var RadialProgress_default = RadialProgress_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RADIAL_PROGRESS_LABELS, RadialProgress_default as default, radialProgressVariants };
+
+//# sourceMappingURL=RadialProgress.js.map

package/dist/primitives/RadialProgress/RadialProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialProgress.js","names":[],"sources":["../../../src/primitives/RadialProgress/RadialProgress.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\nimport type { LabelOf } from \"../../lib/labels\";\n\n/**\n * The one thing this ring prints, and the placeholder it prints instead when\n * there is no percentage yet. `Progress`'s keys, for the reason its whole\n * contract is `Progress`'s — see `ProgressLabels` for why both raw numbers go\n * over and nothing is formatted first.\n *\n * A separate slot rather than a shared one, though, and that is deliberate:\n * the readout beside a bar has a line to itself, where this one sits inside a\n * 40px circle at `text-micro`. \"42% uploaded\" fits the first and overflows the\n * second, and one shared slot would leave a host no way to say so.\n */\nexport interface RadialProgressLabels {\n  /** The readout in the ring's centre, from the clamped value and the scale it is out of. */\n  readonly value: LabelOf<{ value: number; max: number }>;\n  /** What the readout prints while there is no percentage — never a false zero. */\n  readonly indeterminate: string;\n}\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n */\nexport const RADIAL_PROGRESS_LABELS: RadialProgressLabels = {\n  value: ({ value, max }) => `${String(Math.round((value / max) * 100))}%`,\n  indeterminate: \"—\",\n};\n\n/**\n * The ring's outer diameter. `sm` is a table-row or list-item marker, `md` a\n * card corner, `lg` the one on a dashboard tile where the ring is the whole\n * visual. Its own scale rather than the control-height scale a Select uses: a\n * ring is not a form control and never has to line up beside a text input.\n */\nexport type RadialProgressSize = \"sm\" | \"md\" | \"lg\";\n\n/**\n * How heavy the ring's stroke is. Measured in the SVG's own units, so the\n * proportion of stroke to diameter holds at every `size` — a `thick` ring\n * reads as thick whether it is 40px or 96px across.\n */\nexport type RadialProgressThickness = \"thin\" | \"regular\" | \"thick\";\n\nexport const radialProgressVariants = cva(\n  \"relative inline-flex shrink-0 items-center justify-center\",\n  {\n    variants: {\n      size: {\n        sm: \"h-10 w-10\",\n        md: \"h-16 w-16\",\n        lg: \"h-24 w-24\",\n      } satisfies Record<RadialProgressSize, string>,\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { ProgressRoot } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { useLabels, type LabelOverrides } from \"../../lib/labels\";\n\n/**\n * RadialProgress — the same information Progress carries, drawn as a ring: a\n * dashboard tile, a quota, a score out of 100 where the circle *is* the\n * visual. Reach for Progress instead wherever the bar sits in a row of text\n * and its length is doing the comparing, and for Spinner when there is no\n * percentage at all — a ring with nothing to fill is a spinner wearing a\n * gauge's clothes.\n *\n * Its contract is Progress's, deliberately and to the letter: `null`/omitted\n * `modelValue` is indeterminate, the value is clamped into [0, max] for the\n * same reason, the arc turns `success` at 100%, and the accessible name comes\n * from `ariaLabel`/`ariaLabelledby`. Two components answering the same\n * question differently is worse than either answer.\n *\n * Reka's ProgressRoot is kept as the wrapper even though the fill below is an\n * SVG arc rather than a ProgressIndicator: the root is what emits\n * `role=\"progressbar\"` and `aria-valuenow`/`aria-valuemin`/`aria-valuemax`,\n * and it is the only way this component and Progress cannot drift into\n * announcing the same number two different ways. ProgressIndicator is left out\n * because it exists to be translated inside an overflow-hidden track, which is\n * not how an arc is painted.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The completed amount, 0–`max`; `null`/omitted renders indeterminate. */\n    modelValue?: number | null;\n    /** The value that reads as 100% complete. */\n    max?: number;\n    /** The ring's outer diameter. */\n    size?: RadialProgressSize;\n    /** The weight of the ring's stroke, in proportion to its diameter. */\n    thickness?: RadialProgressThickness;\n    /** Print the rounded percentage in the ring's centre. On by default — an empty ring is a spinner. While indeterminate it prints an em dash, never a number. */\n    showValue?: boolean;\n    /** Accessible name describing the task, overriding Reka's default `NN%` label. */\n    ariaLabel?: string;\n    /** Accessible name sourced from another element's id, in place of `ariaLabel`. */\n    ariaLabelledby?: string;\n    /**\n     * How the centre readout is written, as any subset of\n     * `RadialProgressLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     */\n    labels?: LabelOverrides<RadialProgressLabels>;\n  }>(),\n  {\n    max: 100,\n    size: \"md\",\n    thickness: \"regular\",\n    // On, unlike Progress's opt-in: a bar has a length a reader can compare\n    // against its own track, and a ring does not — 70% and 80% are the same\n    // arc to the eye. The number is what makes the ring readable.\n    showValue: true,\n  },\n);\n\n/**\n * The drawing is done in a fixed 100×100 user-unit box and scaled to whatever\n * `size` renders, so every number below is a proportion rather than a pixel\n * count and none of them has to be recomputed per size.\n */\nconst VIEW = 100;\nconst CENTRE = VIEW / 2;\n\nconst STROKE = {\n  thin: 6,\n  regular: 10,\n  thick: 14,\n} satisfies Record<RadialProgressThickness, number>;\n\n/** The centre readout scales with the ring, or it overflows it at `sm`. */\nconst VALUE_TEXT = {\n  sm: \"text-micro\",\n  md: \"text-sm\",\n  lg: \"text-lg\",\n} satisfies Record<RadialProgressSize, string>;\n\n// One rendered node, but `class` is still routed by hand: Vue's fallthrough\n// merge concatenates, so a caller's `h-20 w-20` only beat the size variant's\n// `h-16 w-16` if Tailwind happened to emit it later. `cn()` decides it. The\n// rest of the fallthrough (aria-describedby, data-testid) lands on the same\n// node, which is the one carrying role=\"progressbar\".\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest } = useSplitAttrs();\n\n/**\n * Clamped into [0, max] for the reason Progress's own comment gives:\n * `aria-valuenow` is generated from whatever ProgressRoot receives, so an\n * unclamped 150 is announced against an `aria-valuemax` of 100 while the arc\n * is painted full.\n */\nconst value = computed<number | null>(() =>\n  props.modelValue === null || props.modelValue === undefined\n    ? null\n    : Math.min(Math.max(props.modelValue, 0), props.max),\n);\n\n/** Percentage 0–100, derived from the clamped value; null while indeterminate. */\nconst pct = computed<number | null>(() =>\n  value.value === null ? null : (value.value / props.max) * 100,\n);\n\nconst strokeWidth = computed(() => STROKE[props.thickness]);\n\n/**\n * An SVG stroke is centred on its path, so half of it falls outside the\n * circle's own radius. A radius of `CENTRE` therefore paints the outer half of\n * the stroke past the viewBox edge and the browser clips it — the flat top\n * that makes a radial progress look broken. Half the stroke width comes off\n * the radius so the ring's outer edge lands exactly on the box.\n */\nconst radius = computed(() => CENTRE - strokeWidth.value / 2);\n\n/**\n * The dash pattern is measured along the path, so it depends on the radius —\n * which depends on `thickness`. Hard-coding a circumference works for exactly\n * one thickness and silently mis-fills every other one.\n */\nconst circumference = computed(() => 2 * Math.PI * radius.value);\n\n/**\n * Determinate: one dash as long as the whole path, pushed back by the fraction\n * still to do. Indeterminate: a fixed quarter-turn segment, with the gap set\n * to the full circumference so nothing wraps round behind it while it spins.\n */\nconst dashArray = computed(() =>\n  pct.value === null\n    ? `${circumference.value * 0.25} ${circumference.value}`\n    : `${circumference.value}`,\n);\n\nconst dashOffset = computed(() =>\n  pct.value === null ? 0 : circumference.value * (1 - pct.value / 100),\n);\n\n/**\n * A round cap at exactly 0% still paints a dot at twelve o'clock — a ring\n * showing nothing that reads as a couple of percent. Nothing done draws\n * nothing, so the cap squares off for that one value.\n */\nconst lineCap = computed(() => (pct.value === 0 ? \"butt\" : \"round\"));\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"radialProgress\", RADIAL_PROGRESS_LABELS, () => props.labels);\n\n/**\n * Matches Progress: a placeholder for \"no percentage yet\", never a false `0%`,\n * and both raw numbers handed over rather than a percentage already written in\n * English.\n */\nconst readout = computed(() =>\n  value.value === null\n    ? text.value.indeterminate\n    : text.value.value({ value: value.value, max: props.max }),\n);\n\ndefineExpose({ pct });\n</script>\n\n<template>\n  <ProgressRoot\n    :model-value=\"value\"\n    :max=\"max\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"ariaLabelledby\"\n    v-bind=\"rest\"\n    :class=\"cn(radialProgressVariants({ size }), attrs.class as string)\"\n  >\n    <!-- Hidden from assistive tech in one piece: everything it draws is\n         already announced by the progressbar above it, and the centre readout\n         would otherwise be read a second time as loose text.\n\n         Indeterminate spins the whole SVG rather than the arc inside it. The\n         rotation is then an ordinary CSS transform on an HTML-positioned box,\n         whose transform-origin is its own centre at every size — where a\n         transform on an SVG child resolves against the viewBox and needs\n         `transform-box` reasoning to stay centred. It is a CSS animation and\n         not a JS ticker so the global prefers-reduced-motion rule in\n         global.css collapses it, which a requestAnimationFrame loop would\n         escape. The readout sits outside the SVG for the same reason: it must\n         not spin with it. -->\n    <svg\n      :viewBox=\"`0 0 ${VIEW} ${VIEW}`\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      :class=\"cn('absolute inset-0 h-full w-full', pct === null && 'animate-spin')\"\n    >\n      <circle\n        :cx=\"CENTRE\"\n        :cy=\"CENTRE\"\n        :r=\"radius\"\n        :stroke-width=\"strokeWidth\"\n        class=\"stroke-muted\"\n      />\n      <!-- Rotated by the SVG `transform` attribute about the box's centre\n           rather than a CSS `-rotate-90`: the attribute is expressed in\n           viewBox units, so twelve o'clock stays twelve o'clock at any\n           rendered size, with no dependency on how the engine resolves\n           transform-origin for an SVG child. An unrotated circle starts at\n           three. -->\n      <circle\n        :cx=\"CENTRE\"\n        :cy=\"CENTRE\"\n        :r=\"radius\"\n        :stroke-width=\"strokeWidth\"\n        :stroke-dasharray=\"dashArray\"\n        :stroke-dashoffset=\"dashOffset\"\n        :stroke-linecap=\"lineCap\"\n        :transform=\"`rotate(-90 ${CENTRE} ${CENTRE})`\"\n        :class=\"pct === 100 ? 'stroke-success' : 'stroke-primary'\"\n        :style=\"\n          pct === null\n            ? undefined\n            : {\n                transition:\n                  'stroke-dashoffset var(--duration-slow) var(--ease-out), stroke var(--duration-slow) var(--ease-out)',\n              }\n        \"\n      />\n    </svg>\n    <span\n      v-if=\"showValue\"\n      aria-hidden=\"true\"\n      :class=\"cn('tabular text-foreground', VALUE_TEXT[size])\"\n      >{{ readout }}</span\n    >\n  </ProgressRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/RadialProgress/RadialProgress.vue.d.ts

@@ -0,0 +1,96 @@
+import { type LabelOverrides } from "../../lib/labels";
+import type { LabelOf } from "../../lib/labels";
+/**
+ * The one thing this ring prints, and the placeholder it prints instead when
+ * there is no percentage yet. `Progress`'s keys, for the reason its whole
+ * contract is `Progress`'s — see `ProgressLabels` for why both raw numbers go
+ * over and nothing is formatted first.
+ *
+ * A separate slot rather than a shared one, though, and that is deliberate:
+ * the readout beside a bar has a line to itself, where this one sits inside a
+ * 40px circle at `text-micro`. "42% uploaded" fits the first and overflows the
+ * second, and one shared slot would leave a host no way to say so.
+ */
+export interface RadialProgressLabels {
+    /** The readout in the ring's centre, from the clamped value and the scale it is out of. */
+    readonly value: LabelOf<{
+        value: number;
+        max: number;
+    }>;
+    /** What the readout prints while there is no percentage — never a false zero. */
+    readonly indeterminate: string;
+}
+/**
+ * Loom's English, co-located with the component so it tree-shakes with it, and
+ * exported so a host can build a partial vocabulary against the real thing.
+ */
+export declare const RADIAL_PROGRESS_LABELS: RadialProgressLabels;
+/**
+ * The ring's outer diameter. `sm` is a table-row or list-item marker, `md` a
+ * card corner, `lg` the one on a dashboard tile where the ring is the whole
+ * visual. Its own scale rather than the control-height scale a Select uses: a
+ * ring is not a form control and never has to line up beside a text input.
+ */
+export type RadialProgressSize = "sm" | "md" | "lg";
+/**
+ * How heavy the ring's stroke is. Measured in the SVG's own units, so the
+ * proportion of stroke to diameter holds at every `size` — a `thick` ring
+ * reads as thick whether it is 40px or 96px across.
+ */
+export type RadialProgressThickness = "thin" | "regular" | "thick";
+export declare const radialProgressVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** The completed amount, 0–`max`; `null`/omitted renders indeterminate. */
+    modelValue?: number | null;
+    /** The value that reads as 100% complete. */
+    max?: number;
+    /** The ring's outer diameter. */
+    size?: RadialProgressSize;
+    /** The weight of the ring's stroke, in proportion to its diameter. */
+    thickness?: RadialProgressThickness;
+    /** Print the rounded percentage in the ring's centre. On by default — an empty ring is a spinner. While indeterminate it prints an em dash, never a number. */
+    showValue?: boolean;
+    /** Accessible name describing the task, overriding Reka's default `NN%` label. */
+    ariaLabel?: string;
+    /** Accessible name sourced from another element's id, in place of `ariaLabel`. */
+    ariaLabelledby?: string;
+    /**
+     * How the centre readout is written, as any subset of
+     * `RadialProgressLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     */
+    labels?: LabelOverrides<RadialProgressLabels>;
+}, {
+    pct: import("vue").ComputedRef<number | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** The completed amount, 0–`max`; `null`/omitted renders indeterminate. */
+    modelValue?: number | null;
+    /** The value that reads as 100% complete. */
+    max?: number;
+    /** The ring's outer diameter. */
+    size?: RadialProgressSize;
+    /** The weight of the ring's stroke, in proportion to its diameter. */
+    thickness?: RadialProgressThickness;
+    /** Print the rounded percentage in the ring's centre. On by default — an empty ring is a spinner. While indeterminate it prints an em dash, never a number. */
+    showValue?: boolean;
+    /** Accessible name describing the task, overriding Reka's default `NN%` label. */
+    ariaLabel?: string;
+    /** Accessible name sourced from another element's id, in place of `ariaLabel`. */
+    ariaLabelledby?: string;
+    /**
+     * How the centre readout is written, as any subset of
+     * `RadialProgressLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     */
+    labels?: LabelOverrides<RadialProgressLabels>;
+}> & Readonly<{}>, {
+    size: RadialProgressSize;
+    max: number;
+    showValue: boolean;
+    thickness: RadialProgressThickness;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=RadialProgress.vue.d.ts.map

package/dist/primitives/RadialProgress/RadialProgress.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialProgress.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/RadialProgress/RadialProgress.vue"],"names":[],"mappings":"AAiTA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIlE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEhD;;;;;;;;;;GAUG;AACH,MAAM,WAAW,oBAAoB;IACnC,2FAA2F;IAC3F,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACxD,iFAAiF;IACjF,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;CAChC;AAED;;;GAGG;AACH,eAAO,MAAM,sBAAsB,EAAE,oBAGpC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD;;;;GAIG;AACH,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE,eAAO,MAAM,sBAAsB;;8EAYlC,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAwBd,2EAA2E;iBAC9D,MAAM,GAAG,IAAI;IAC1B,6CAA6C;UACvC,MAAM;IACZ,iCAAiC;WAC1B,kBAAkB;IACzB,sEAAsE;gBAC1D,uBAAuB;IACnC,+JAA+J;gBACnJ,OAAO;IACnB,kFAAkF;gBACtE,MAAM;IAClB,kFAAkF;qBACjE,MAAM;IACvB;;;;OAIG;aACM,cAAc,CAAC,oBAAoB,CAAC;;;;IAnB7C,2EAA2E;iBAC9D,MAAM,GAAG,IAAI;IAC1B,6CAA6C;UACvC,MAAM;IACZ,iCAAiC;WAC1B,kBAAkB;IACzB,sEAAsE;gBAC1D,uBAAuB;IACnC,+JAA+J;gBACnJ,OAAO;IACnB,kFAAkF;gBACtE,MAAM;IAClB,kFAAkF;qBACjE,MAAM;IACvB;;;;OAIG;aACM,cAAc,CAAC,oBAAoB,CAAC;;UAdtC,kBAAkB;SAFnB,MAAM;eAMA,OAAO;eAFP,uBAAuB;6EAuPnC,CAAC"}

package/dist/primitives/RadialProgress/RadialProgress.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,189 @@
+import { cn } from "../../lib/cn.js";
+import { useLabels } from "../../lib/labels.js";
+import { useSplitAttrs } from "../../lib/attrs.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, toDisplayString, unref, withCtx } from "vue";
+import { ProgressRoot } from "reka-ui";
+import { cva } from "class-variance-authority";
+//#region src/primitives/RadialProgress/RadialProgress.vue?vue&type=script&setup=true&lang.ts
+/**
+* RadialProgress — the same information Progress carries, drawn as a ring: a
+* dashboard tile, a quota, a score out of 100 where the circle *is* the
+* visual. Reach for Progress instead wherever the bar sits in a row of text
+* and its length is doing the comparing, and for Spinner when there is no
+* percentage at all — a ring with nothing to fill is a spinner wearing a
+* gauge's clothes.
+*
+* Its contract is Progress's, deliberately and to the letter: `null`/omitted
+* `modelValue` is indeterminate, the value is clamped into [0, max] for the
+* same reason, the arc turns `success` at 100%, and the accessible name comes
+* from `ariaLabel`/`ariaLabelledby`. Two components answering the same
+* question differently is worse than either answer.
+*
+* Reka's ProgressRoot is kept as the wrapper even though the fill below is an
+* SVG arc rather than a ProgressIndicator: the root is what emits
+* `role="progressbar"` and `aria-valuenow`/`aria-valuemin`/`aria-valuemax`,
+* and it is the only way this component and Progress cannot drift into
+* announcing the same number two different ways. ProgressIndicator is left out
+* because it exists to be translated inside an overflow-hidden track, which is
+* not how an arc is painted.
+*/
+var _hoisted_1 = ["viewBox"];
+var _hoisted_2 = ["r", "stroke-width"];
+var _hoisted_3 = [
+	"r",
+	"stroke-width",
+	"stroke-dasharray",
+	"stroke-dashoffset",
+	"stroke-linecap",
+	"transform"
+];
+/**
+* Loom's English, co-located with the component so it tree-shakes with it, and
+* exported so a host can build a partial vocabulary against the real thing.
+*/
+var RADIAL_PROGRESS_LABELS = {
+	value: ({ value, max }) => `${String(Math.round(value / max * 100))}%`,
+	indeterminate: "—"
+};
+var radialProgressVariants = cva("relative inline-flex shrink-0 items-center justify-center", {
+	variants: { size: {
+		sm: "h-10 w-10",
+		md: "h-16 w-16",
+		lg: "h-24 w-24"
+	} },
+	defaultVariants: { size: "md" }
+});
+var RadialProgress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "RadialProgress",
+	props: {
+		modelValue: {},
+		max: { default: 100 },
+		size: { default: "md" },
+		thickness: { default: "regular" },
+		showValue: {
+			type: Boolean,
+			default: true
+		},
+		ariaLabel: {},
+		ariaLabelledby: {},
+		labels: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		/**
+		* The drawing is done in a fixed 100×100 user-unit box and scaled to whatever
+		* `size` renders, so every number below is a proportion rather than a pixel
+		* count and none of them has to be recomputed per size.
+		*/
+		const VIEW = 100;
+		const CENTRE = VIEW / 2;
+		const STROKE = {
+			thin: 6,
+			regular: 10,
+			thick: 14
+		};
+		/** The centre readout scales with the ring, or it overflows it at `sm`. */
+		const VALUE_TEXT = {
+			sm: "text-micro",
+			md: "text-sm",
+			lg: "text-lg"
+		};
+		const { attrs, rest } = useSplitAttrs();
+		/**
+		* Clamped into [0, max] for the reason Progress's own comment gives:
+		* `aria-valuenow` is generated from whatever ProgressRoot receives, so an
+		* unclamped 150 is announced against an `aria-valuemax` of 100 while the arc
+		* is painted full.
+		*/
+		const value = computed(() => props.modelValue === null || props.modelValue === void 0 ? null : Math.min(Math.max(props.modelValue, 0), props.max));
+		/** Percentage 0–100, derived from the clamped value; null while indeterminate. */
+		const pct = computed(() => value.value === null ? null : value.value / props.max * 100);
+		const strokeWidth = computed(() => STROKE[props.thickness]);
+		/**
+		* An SVG stroke is centred on its path, so half of it falls outside the
+		* circle's own radius. A radius of `CENTRE` therefore paints the outer half of
+		* the stroke past the viewBox edge and the browser clips it — the flat top
+		* that makes a radial progress look broken. Half the stroke width comes off
+		* the radius so the ring's outer edge lands exactly on the box.
+		*/
+		const radius = computed(() => CENTRE - strokeWidth.value / 2);
+		/**
+		* The dash pattern is measured along the path, so it depends on the radius —
+		* which depends on `thickness`. Hard-coding a circumference works for exactly
+		* one thickness and silently mis-fills every other one.
+		*/
+		const circumference = computed(() => 2 * Math.PI * radius.value);
+		/**
+		* Determinate: one dash as long as the whole path, pushed back by the fraction
+		* still to do. Indeterminate: a fixed quarter-turn segment, with the gap set
+		* to the full circumference so nothing wraps round behind it while it spins.
+		*/
+		const dashArray = computed(() => pct.value === null ? `${circumference.value * .25} ${circumference.value}` : `${circumference.value}`);
+		const dashOffset = computed(() => pct.value === null ? 0 : circumference.value * (1 - pct.value / 100));
+		/**
+		* A round cap at exactly 0% still paints a dot at twelve o'clock — a ring
+		* showing nothing that reads as a couple of percent. Nothing done draws
+		* nothing, so the cap squares off for that one value.
+		*/
+		const lineCap = computed(() => pct.value === 0 ? "butt" : "round");
+		const text = useLabels("radialProgress", RADIAL_PROGRESS_LABELS, () => props.labels);
+		/**
+		* Matches Progress: a placeholder for "no percentage yet", never a false `0%`,
+		* and both raw numbers handed over rather than a percentage already written in
+		* English.
+		*/
+		const readout = computed(() => value.value === null ? text.value.indeterminate : text.value.value({
+			value: value.value,
+			max: props.max
+		}));
+		__expose({ pct });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ProgressRoot), mergeProps({
+				"model-value": value.value,
+				max: __props.max,
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby
+			}, unref(rest), { class: unref(cn)(unref(radialProgressVariants)({ size: __props.size }), unref(attrs).class) }), {
+				default: withCtx(() => [(openBlock(), createElementBlock("svg", {
+					viewBox: `0 0 ${VIEW} ${VIEW}`,
+					fill: "none",
+					"aria-hidden": "true",
+					class: normalizeClass(unref(cn)("absolute inset-0 h-full w-full", pct.value === null && "animate-spin"))
+				}, [createElementVNode("circle", {
+					cx: CENTRE,
+					cy: CENTRE,
+					r: radius.value,
+					"stroke-width": strokeWidth.value,
+					class: "stroke-muted"
+				}, null, 8, _hoisted_2), createElementVNode("circle", {
+					cx: CENTRE,
+					cy: CENTRE,
+					r: radius.value,
+					"stroke-width": strokeWidth.value,
+					"stroke-dasharray": dashArray.value,
+					"stroke-dashoffset": dashOffset.value,
+					"stroke-linecap": lineCap.value,
+					transform: `rotate(-90 ${CENTRE} ${CENTRE})`,
+					class: normalizeClass(pct.value === 100 ? "stroke-success" : "stroke-primary"),
+					style: normalizeStyle(pct.value === null ? void 0 : { transition: "stroke-dashoffset var(--duration-slow) var(--ease-out), stroke var(--duration-slow) var(--ease-out)" })
+				}, null, 14, _hoisted_3)], 10, _hoisted_1)), __props.showValue ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					"aria-hidden": "true",
+					class: normalizeClass(unref(cn)("tabular text-foreground", VALUE_TEXT[__props.size]))
+				}, toDisplayString(readout.value), 3)) : createCommentVNode("", true)]),
+				_: 1
+			}, 16, [
+				"model-value",
+				"max",
+				"aria-label",
+				"aria-labelledby",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { RADIAL_PROGRESS_LABELS, RadialProgress_vue_vue_type_script_setup_true_lang_default as default, radialProgressVariants };
+
+//# sourceMappingURL=RadialProgress.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/RadialProgress/RadialProgress.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialProgress.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/primitives/RadialProgress/RadialProgress.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\nimport type { LabelOf } from \"../../lib/labels\";\n\n/**\n * The one thing this ring prints, and the placeholder it prints instead when\n * there is no percentage yet. `Progress`'s keys, for the reason its whole\n * contract is `Progress`'s — see `ProgressLabels` for why both raw numbers go\n * over and nothing is formatted first.\n *\n * A separate slot rather than a shared one, though, and that is deliberate:\n * the readout beside a bar has a line to itself, where this one sits inside a\n * 40px circle at `text-micro`. \"42% uploaded\" fits the first and overflows the\n * second, and one shared slot would leave a host no way to say so.\n */\nexport interface RadialProgressLabels {\n  /** The readout in the ring's centre, from the clamped value and the scale it is out of. */\n  readonly value: LabelOf<{ value: number; max: number }>;\n  /** What the readout prints while there is no percentage — never a false zero. */\n  readonly indeterminate: string;\n}\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n */\nexport const RADIAL_PROGRESS_LABELS: RadialProgressLabels = {\n  value: ({ value, max }) => `${String(Math.round((value / max) * 100))}%`,\n  indeterminate: \"—\",\n};\n\n/**\n * The ring's outer diameter. `sm` is a table-row or list-item marker, `md` a\n * card corner, `lg` the one on a dashboard tile where the ring is the whole\n * visual. Its own scale rather than the control-height scale a Select uses: a\n * ring is not a form control and never has to line up beside a text input.\n */\nexport type RadialProgressSize = \"sm\" | \"md\" | \"lg\";\n\n/**\n * How heavy the ring's stroke is. Measured in the SVG's own units, so the\n * proportion of stroke to diameter holds at every `size` — a `thick` ring\n * reads as thick whether it is 40px or 96px across.\n */\nexport type RadialProgressThickness = \"thin\" | \"regular\" | \"thick\";\n\nexport const radialProgressVariants = cva(\n  \"relative inline-flex shrink-0 items-center justify-center\",\n  {\n    variants: {\n      size: {\n        sm: \"h-10 w-10\",\n        md: \"h-16 w-16\",\n        lg: \"h-24 w-24\",\n      } satisfies Record<RadialProgressSize, string>,\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { ProgressRoot } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { useLabels, type LabelOverrides } from \"../../lib/labels\";\n\n/**\n * RadialProgress — the same information Progress carries, drawn as a ring: a\n * dashboard tile, a quota, a score out of 100 where the circle *is* the\n * visual. Reach for Progress instead wherever the bar sits in a row of text\n * and its length is doing the comparing, and for Spinner when there is no\n * percentage at all — a ring with nothing to fill is a spinner wearing a\n * gauge's clothes.\n *\n * Its contract is Progress's, deliberately and to the letter: `null`/omitted\n * `modelValue` is indeterminate, the value is clamped into [0, max] for the\n * same reason, the arc turns `success` at 100%, and the accessible name comes\n * from `ariaLabel`/`ariaLabelledby`. Two components answering the same\n * question differently is worse than either answer.\n *\n * Reka's ProgressRoot is kept as the wrapper even though the fill below is an\n * SVG arc rather than a ProgressIndicator: the root is what emits\n * `role=\"progressbar\"` and `aria-valuenow`/`aria-valuemin`/`aria-valuemax`,\n * and it is the only way this component and Progress cannot drift into\n * announcing the same number two different ways. ProgressIndicator is left out\n * because it exists to be translated inside an overflow-hidden track, which is\n * not how an arc is painted.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The completed amount, 0–`max`; `null`/omitted renders indeterminate. */\n    modelValue?: number | null;\n    /** The value that reads as 100% complete. */\n    max?: number;\n    /** The ring's outer diameter. */\n    size?: RadialProgressSize;\n    /** The weight of the ring's stroke, in proportion to its diameter. */\n    thickness?: RadialProgressThickness;\n    /** Print the rounded percentage in the ring's centre. On by default — an empty ring is a spinner. While indeterminate it prints an em dash, never a number. */\n    showValue?: boolean;\n    /** Accessible name describing the task, overriding Reka's default `NN%` label. */\n    ariaLabel?: string;\n    /** Accessible name sourced from another element's id, in place of `ariaLabel`. */\n    ariaLabelledby?: string;\n    /**\n     * How the centre readout is written, as any subset of\n     * `RadialProgressLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     */\n    labels?: LabelOverrides<RadialProgressLabels>;\n  }>(),\n  {\n    max: 100,\n    size: \"md\",\n    thickness: \"regular\",\n    // On, unlike Progress's opt-in: a bar has a length a reader can compare\n    // against its own track, and a ring does not — 70% and 80% are the same\n    // arc to the eye. The number is what makes the ring readable.\n    showValue: true,\n  },\n);\n\n/**\n * The drawing is done in a fixed 100×100 user-unit box and scaled to whatever\n * `size` renders, so every number below is a proportion rather than a pixel\n * count and none of them has to be recomputed per size.\n */\nconst VIEW = 100;\nconst CENTRE = VIEW / 2;\n\nconst STROKE = {\n  thin: 6,\n  regular: 10,\n  thick: 14,\n} satisfies Record<RadialProgressThickness, number>;\n\n/** The centre readout scales with the ring, or it overflows it at `sm`. */\nconst VALUE_TEXT = {\n  sm: \"text-micro\",\n  md: \"text-sm\",\n  lg: \"text-lg\",\n} satisfies Record<RadialProgressSize, string>;\n\n// One rendered node, but `class` is still routed by hand: Vue's fallthrough\n// merge concatenates, so a caller's `h-20 w-20` only beat the size variant's\n// `h-16 w-16` if Tailwind happened to emit it later. `cn()` decides it. The\n// rest of the fallthrough (aria-describedby, data-testid) lands on the same\n// node, which is the one carrying role=\"progressbar\".\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest } = useSplitAttrs();\n\n/**\n * Clamped into [0, max] for the reason Progress's own comment gives:\n * `aria-valuenow` is generated from whatever ProgressRoot receives, so an\n * unclamped 150 is announced against an `aria-valuemax` of 100 while the arc\n * is painted full.\n */\nconst value = computed<number | null>(() =>\n  props.modelValue === null || props.modelValue === undefined\n    ? null\n    : Math.min(Math.max(props.modelValue, 0), props.max),\n);\n\n/** Percentage 0–100, derived from the clamped value; null while indeterminate. */\nconst pct = computed<number | null>(() =>\n  value.value === null ? null : (value.value / props.max) * 100,\n);\n\nconst strokeWidth = computed(() => STROKE[props.thickness]);\n\n/**\n * An SVG stroke is centred on its path, so half of it falls outside the\n * circle's own radius. A radius of `CENTRE` therefore paints the outer half of\n * the stroke past the viewBox edge and the browser clips it — the flat top\n * that makes a radial progress look broken. Half the stroke width comes off\n * the radius so the ring's outer edge lands exactly on the box.\n */\nconst radius = computed(() => CENTRE - strokeWidth.value / 2);\n\n/**\n * The dash pattern is measured along the path, so it depends on the radius —\n * which depends on `thickness`. Hard-coding a circumference works for exactly\n * one thickness and silently mis-fills every other one.\n */\nconst circumference = computed(() => 2 * Math.PI * radius.value);\n\n/**\n * Determinate: one dash as long as the whole path, pushed back by the fraction\n * still to do. Indeterminate: a fixed quarter-turn segment, with the gap set\n * to the full circumference so nothing wraps round behind it while it spins.\n */\nconst dashArray = computed(() =>\n  pct.value === null\n    ? `${circumference.value * 0.25} ${circumference.value}`\n    : `${circumference.value}`,\n);\n\nconst dashOffset = computed(() =>\n  pct.value === null ? 0 : circumference.value * (1 - pct.value / 100),\n);\n\n/**\n * A round cap at exactly 0% still paints a dot at twelve o'clock — a ring\n * showing nothing that reads as a couple of percent. Nothing done draws\n * nothing, so the cap squares off for that one value.\n */\nconst lineCap = computed(() => (pct.value === 0 ? \"butt\" : \"round\"));\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"radialProgress\", RADIAL_PROGRESS_LABELS, () => props.labels);\n\n/**\n * Matches Progress: a placeholder for \"no percentage yet\", never a false `0%`,\n * and both raw numbers handed over rather than a percentage already written in\n * English.\n */\nconst readout = computed(() =>\n  value.value === null\n    ? text.value.indeterminate\n    : text.value.value({ value: value.value, max: props.max }),\n);\n\ndefineExpose({ pct });\n</script>\n\n<template>\n  <ProgressRoot\n    :model-value=\"value\"\n    :max=\"max\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"ariaLabelledby\"\n    v-bind=\"rest\"\n    :class=\"cn(radialProgressVariants({ size }), attrs.class as string)\"\n  >\n    <!-- Hidden from assistive tech in one piece: everything it draws is\n         already announced by the progressbar above it, and the centre readout\n         would otherwise be read a second time as loose text.\n\n         Indeterminate spins the whole SVG rather than the arc inside it. The\n         rotation is then an ordinary CSS transform on an HTML-positioned box,\n         whose transform-origin is its own centre at every size — where a\n         transform on an SVG child resolves against the viewBox and needs\n         `transform-box` reasoning to stay centred. It is a CSS animation and\n         not a JS ticker so the global prefers-reduced-motion rule in\n         global.css collapses it, which a requestAnimationFrame loop would\n         escape. The readout sits outside the SVG for the same reason: it must\n         not spin with it. -->\n    <svg\n      :viewBox=\"`0 0 ${VIEW} ${VIEW}`\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      :class=\"cn('absolute inset-0 h-full w-full', pct === null && 'animate-spin')\"\n    >\n      <circle\n        :cx=\"CENTRE\"\n        :cy=\"CENTRE\"\n        :r=\"radius\"\n        :stroke-width=\"strokeWidth\"\n        class=\"stroke-muted\"\n      />\n      <!-- Rotated by the SVG `transform` attribute about the box's centre\n           rather than a CSS `-rotate-90`: the attribute is expressed in\n           viewBox units, so twelve o'clock stays twelve o'clock at any\n           rendered size, with no dependency on how the engine resolves\n           transform-origin for an SVG child. An unrotated circle starts at\n           three. -->\n      <circle\n        :cx=\"CENTRE\"\n        :cy=\"CENTRE\"\n        :r=\"radius\"\n        :stroke-width=\"strokeWidth\"\n        :stroke-dasharray=\"dashArray\"\n        :stroke-dashoffset=\"dashOffset\"\n        :stroke-linecap=\"lineCap\"\n        :transform=\"`rotate(-90 ${CENTRE} ${CENTRE})`\"\n        :class=\"pct === 100 ? 'stroke-success' : 'stroke-primary'\"\n        :style=\"\n          pct === null\n            ? undefined\n            : {\n                transition:\n                  'stroke-dashoffset var(--duration-slow) var(--ease-out), stroke var(--duration-slow) var(--ease-out)',\n              }\n        \"\n      />\n    </svg>\n    <span\n      v-if=\"showValue\"\n      aria-hidden=\"true\"\n      :class=\"cn('tabular text-foreground', VALUE_TEXT[size])\"\n      >{{ readout }}</span\n    >\n  </ProgressRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAa,yBAA+C;CAC1D,QAAQ,EAAE,OAAO,UAAU,GAAG,OAAO,KAAK,MAAO,QAAQ,MAAO,GAAG,CAAC,EAAE;CACtE,eAAe;AACjB;AAiBA,IAAa,yBAAyB,IACpC,6DACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;;;;;;;;;;;;;;;;;EAgCA,MAAM,QAAQ;;;;;;EAuCd,MAAM,OAAO;EACb,MAAM,SAAS,OAAO;EAEtB,MAAM,SAAS;GACb,MAAM;GACN,SAAS;GACT,OAAO;EACT;;EAGA,MAAM,aAAa;GACjB,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EAQA,MAAM,EAAE,OAAO,SAAS,cAAc;;;;;;;EAQtC,MAAM,QAAQ,eACZ,MAAM,eAAe,QAAQ,MAAM,eAAe,KAAA,IAC9C,OACA,KAAK,IAAI,KAAK,IAAI,MAAM,YAAY,CAAC,GAAG,MAAM,GAAG,CACvD;;EAGA,MAAM,MAAM,eACV,MAAM,UAAU,OAAO,OAAQ,MAAM,QAAQ,MAAM,MAAO,GAC5D;EAEA,MAAM,cAAc,eAAe,OAAO,MAAM,UAAU;;;;;;;;EAS1D,MAAM,SAAS,eAAe,SAAS,YAAY,QAAQ,CAAC;;;;;;EAO5D,MAAM,gBAAgB,eAAe,IAAI,KAAK,KAAK,OAAO,KAAK;;;;;;EAO/D,MAAM,YAAY,eAChB,IAAI,UAAU,OACV,GAAG,cAAc,QAAQ,IAAK,GAAG,cAAc,UAC/C,GAAG,cAAc,OACvB;EAEA,MAAM,aAAa,eACjB,IAAI,UAAU,OAAO,IAAI,cAAc,SAAS,IAAI,IAAI,QAAQ,IAClE;;;;;;EAOA,MAAM,UAAU,eAAgB,IAAI,UAAU,IAAI,SAAS,OAAQ;EAKnE,MAAM,OAAO,UAAU,kBAAkB,8BAA8B,MAAM,MAAM;;;;;;EAOnF,MAAM,UAAU,eACd,MAAM,UAAU,OACZ,KAAK,MAAM,gBACX,KAAK,MAAM,MAAM;GAAE,OAAO,MAAM;GAAO,KAAK,MAAM;EAAI,CAAC,CAC7D;EAEA,SAAa,EAAE,IAAI,CAAC;;GAIlB,OAAA,UAAA,GAAA,YAkEe,MAAA,YAAA,GAlEf,WAkEe;IAjEZ,eAAa,MAAA;IACb,KAAK,QAAA;IACL,cAAY,QAAA;IACZ,mBAAiB,QAAA;GACV,GAAA,MAAA,IAAA,GAAI,EACX,OAAO,MAAA,EAAA,CAAE,CAAC,MAAA,sBAAA,CAAsB,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAK,MAAA,KAAA,CAAK,CAAC,KAAK,EAAA,CAAA,GAAA;IAexD,SAAA,cAsCM,EAtCN,UAAA,GAAA,mBAsCM,OAAA;KArCH,SAAO,OAAS,KAAI,GAAI;KACzB,MAAK;KACL,eAAY;KACX,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,kCAAmC,IAAA,UAAG,QAAA,cAAA,CAAA;IAEhD,GAAA,CAAA,mBAME,UAAA;KALC,IAAI;KACJ,IAAI;KACJ,GAAG,OAAA;KACH,gBAAc,YAAA;KACf,OAAM;IAQR,GAAA,MAAA,GAAA,UAAA,GAAA,mBAkBE,UAAA;KAjBC,IAAI;KACJ,IAAI;KACJ,GAAG,OAAA;KACH,gBAAc,YAAA;KACd,oBAAkB,UAAA;KAClB,qBAAmB,WAAA;KACnB,kBAAgB,QAAA;KAChB,WAAS,cAAgB,OAAM,GAAI,OAAM;KACzC,OAAK,eAAE,IAAA,UAAG,MAAA,mBAAA,gBAAA;KACV,OAAK,eAAa,IAAA,UAAG,OAAwB,KAAA,IAAA,EAAA,YAAA,sGAAA,CAAA;IAW1C,GAAA,MAAA,IAAA,UAAA,CAAA,GAAA,IAAA,UAAA,IAAA,QAAA,aADR,UAAA,GAAA,mBAKC,QAAA;;KAHC,eAAY;KACX,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,2BAA4B,WAAW,QAAA,KAAI,CAAA;IACjD,GAAA,gBAAA,QAAA,KAAO,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/primitives/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":[],"sources":["../../../src/primitives/RadioGroup/RadioGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/** One selectable row in a {@link RadioGroup}. */\nexport interface RadioOption {\n  /** Matched against `modelValue`. */\n  value: string;\n  /** Visible label, rendered beside the control. */\n  label: string;\n  /** Secondary text, rendered small under the label. */\n  description?: string;\n  /** Disables this row alone, leaving its siblings pickable. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\n\n/**\n * RadioGroup — a vertical list of mutually exclusive options, each with a\n * visible (and optionally described) label — for longer or explained\n * choices and settings lists. For a compact horizontal toggle among 2-5\n * short options that are all visible at once, reach for SegmentedControl\n * instead. Built on Reka UI's RadioGroup: roving tabindex (the group is one\n * Tab stop, not N) with arrow-key navigation between items.\n */\nwithDefaults(\n  defineProps<{\n    /** The selected option's `value`. */\n    modelValue?: string;\n    /** The rows to render, in order. */\n    options: RadioOption[];\n    /** Disables every row at once, distinct from a single option's own `disabled`. */\n    disabled?: boolean;\n    /** Set when this group posts inside a real `<form>` — becomes the submitted field name. */\n    name?: string;\n  }>(),\n  { disabled: false },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n</script>\n\n<template>\n  <RadioGroupRoot\n    v-bind=\"optional({ modelValue, name })\"\n    :disabled=\"disabled\"\n    orientation=\"vertical\"\n    class=\"flex flex-col gap-3\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <!-- RadioGroupItem is a labelable <button role=\"radio\">, so wrapping it in\n         <label> names it exactly like a native control; the rule's\n         nesting/id heuristic just doesn't recognize reka-ui's custom element\n         as a \"control\". -->\n    <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->\n    <label\n      v-for=\"opt in options\"\n      :key=\"opt.value\"\n      :class=\"\n        cn(\n          'flex items-start gap-2 text-sm text-foreground',\n          // Disabled text stays readable (AA on the light ground) — only the\n          // control glyph dims; quiet, not illegible.\n          disabled || opt.disabled ? 'cursor-not-allowed text-muted-foreground' : 'cursor-pointer',\n        )\n      \"\n    >\n      <RadioGroupItem\n        :value=\"opt.value\"\n        :class=\"\n          cn(\n            'mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-input bg-background',\n            // Springy transform (press squish), steady color — the transform\n            // rides --ease-spring while border stays instant --ease-out (style\n            // below), same press language as Button/Switch/Checkbox.\n            'active:scale-90',\n            // Selected = a human decision (Loom law): the ring turns warp.\n            'data-[state=checked]:border-primary',\n            // Focus draws the weave tight: the brand ring blooms.\n            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n          )\n        \"\n        :disabled=\"opt.disabled ?? false\"\n        style=\"\n          transition:\n            transform var(--duration-fast) var(--ease-spring),\n            border-color var(--duration-instant) var(--ease-out),\n            box-shadow var(--duration-fast) var(--ease-out);\n        \"\n      >\n        <!-- The dot pops in with scale-in — a small causal \"it's selected now\". -->\n        <RadioGroupIndicator class=\"flex animate-scale-in items-center justify-center\">\n          <span class=\"h-2 w-2 rounded-full bg-primary\" />\n        </RadioGroupIndicator>\n      </RadioGroupItem>\n      <span class=\"flex flex-col gap-0.5\">\n        <span>{{ opt.label }}</span>\n        <span v-if=\"opt.description\" class=\"text-xs text-muted-foreground\">{{\n          opt.description\n        }}</span>\n      </span>\n    </label>\n  </RadioGroupRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RadioGroup.js","names":[],"sources":["../../../src/primitives/RadioGroup/RadioGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/** One selectable row in a {@link RadioGroup}. */\nexport interface RadioOption {\n  /** Matched against `modelValue`. */\n  value: string;\n  /** Visible label, rendered beside the control. */\n  label: string;\n  /** Secondary text, rendered small under the label. */\n  description?: string;\n  /** Disables this row alone, leaving its siblings pickable. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { useFieldControl } from \"../../lib/field-context\";\n\n/**\n * RadioGroup — a vertical list of mutually exclusive options, each with a\n * visible (and optionally described) label — for longer or explained\n * choices and settings lists. For a compact horizontal toggle among 2-5\n * short options that are all visible at once, reach for SegmentedControl\n * instead. Built on Reka UI's RadioGroup: roving tabindex (the group is one\n * Tab stop, not N) with arrow-key navigation between items.\n *\n * Inside a [Field](../Field/Field.vue) the row's description, `name`,\n * `required` and `invalid` reach the group through `useFieldControl()`, and\n * `name` below still wins wherever it is set — the row and this prop are one\n * concept, not two that can disagree.\n *\n * **A row's label does not name this group.** `<label for>` names a labelable\n * element and this renders a `div[role=\"radiogroup\"]`, so the row's label\n * resolves to the element and names nobody. Name it with a\n * [Fieldset](../Fieldset/Fieldset.vue)'s real `<legend>`, or with an\n * `aria-label`/`aria-labelledby` of its own.\n *\n * There is no `readonly`, and a row's is ignored rather than approximated: each\n * option is a `<button role=\"radio\">` with no native read-only state to put it\n * in, and a group whose options cannot be picked is a disabled group.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The selected option's `value`. */\n    modelValue?: string;\n    /** The rows to render, in order. */\n    options: RadioOption[];\n    /** Disables every row at once, distinct from a single option's own `disabled`. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Set when this group posts inside a real `<form>` — becomes the submitted field name. Unset defers to a wrapping Field. */\n    name?: string;\n  }>(),\n  {\n    // Not `false`: absent has to stay tellable from `false` for a Field above\n    // to disable the group and for `:disabled=\"false\"` to overrule one that\n    // does. Vue casts an absent Boolean prop with no declared default to\n    // `false`, which would leave the context wired and inert.\n    disabled: undefined,\n  },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: groupAttrs } = useSplitAttrs();\n\n// One rendered node, so the split is only about `class` — a caller's class\n// needs a Tailwind-aware merge rather than Vue's concatenating fallthrough.\n//\n// `id` and `aria-describedby` arrive as fallthrough attrs rather than props, so\n// they are handed in as this caller's own values; `field.attrs` then spreads\n// **after** `groupAttrs`, and that position is the contract (see TextField.vue).\n// `name` leaves `optional()` below with it: resolved once here, it reaches\n// RadioGroupRoot's own `name` prop, which is what mints the hidden input a\n// `<form>` submits.\n//\n// `required` and `invalid` are omitted because this component has no prop for\n// either — the row's answer stands unopposed. `readonly` is omitted for the\n// reason the docblock gives.\n//\n// The resolved `required` then reaches the group through Reka's own prop rather\n// than the `aria-required` in `field.attrs`: RadioGroupRoot writes that\n// attribute itself, so leaving it to the bag is a race with a `false` — see\n// Checkbox.vue, where the merge order makes the same race a certainty.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  name: props.name,\n  disabled: props.disabled,\n}));\n</script>\n\n<template>\n  <RadioGroupRoot\n    v-bind=\"{ ...optional({ modelValue }), ...groupAttrs, ...field.attrs }\"\n    :disabled=\"field.disabled\"\n    :required=\"field.required\"\n    orientation=\"vertical\"\n    :class=\"cn('flex flex-col gap-3', attrs.class as string)\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <!-- RadioGroupItem is a labelable <button role=\"radio\">, so wrapping it in\n         <label> names it exactly like a native control; the rule's\n         nesting/id heuristic just doesn't recognize reka-ui's custom element\n         as a \"control\". -->\n    <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->\n    <label\n      v-for=\"opt in options\"\n      :key=\"opt.value\"\n      :class=\"\n        cn(\n          'flex items-start gap-2 text-sm text-foreground',\n          // Disabled text stays readable (AA on the light ground) — only the\n          // control glyph dims; quiet, not illegible.\n          field.disabled || opt.disabled\n            ? 'cursor-not-allowed text-muted-foreground'\n            : 'cursor-pointer',\n        )\n      \"\n    >\n      <RadioGroupItem\n        :value=\"opt.value\"\n        :class=\"\n          cn(\n            'mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-input bg-background',\n            // Springy transform (press squish), steady color — the transform\n            // rides --ease-spring while border stays instant --ease-out (style\n            // below), same press language as Button/Switch/Checkbox.\n            'active:scale-90',\n            // Selected = a decision (Loom law): the ring turns primary.\n            'data-[state=checked]:border-primary',\n            // Focus draws the weave tight: the brand ring blooms.\n            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n          )\n        \"\n        :disabled=\"opt.disabled ?? false\"\n        style=\"\n          transition:\n            transform var(--duration-fast) var(--ease-spring),\n            border-color var(--duration-instant) var(--ease-out),\n            box-shadow var(--duration-fast) var(--ease-out);\n        \"\n      >\n        <!-- The dot pops in with scale-in — a small causal \"it's selected now\". -->\n        <RadioGroupIndicator class=\"flex animate-scale-in items-center justify-center\">\n          <span class=\"h-2 w-2 rounded-full bg-primary\" />\n        </RadioGroupIndicator>\n      </RadioGroupItem>\n      <span class=\"flex flex-col gap-0.5\">\n        <span>{{ opt.label }}</span>\n        <span v-if=\"opt.description\" class=\"text-xs text-muted-foreground\">{{\n          opt.description\n        }}</span>\n      </span>\n    </label>\n  </RadioGroupRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/RadioGroup/RadioGroup.vue.d.ts

@@ -16,9 +16,9 @@ declare const __VLS_export: import("vue").DefineComponent<{
     modelValue?: string;
     /** The rows to render, in order. */
     options: RadioOption[];
-    /** Disables every row at once, distinct from a single option's own `disabled`. */
-    disabled?: boolean;
-    /** Set when this group posts inside a real `<form>` — becomes the submitted field name. */
+    /** Disables every row at once, distinct from a single option's own `disabled`. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
+    /** Set when this group posts inside a real `<form>` — becomes the submitted field name. Unset defers to a wrapping Field. */
     name?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
@@ -27,13 +27,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     modelValue?: string;
     /** The rows to render, in order. */
     options: RadioOption[];
-    /** Disables every row at once, distinct from a single option's own `disabled`. */
-    disabled?: boolean;
-    /** Set when this group posts inside a real `<form>` — becomes the submitted field name. */
+    /** Disables every row at once, distinct from a single option's own `disabled`. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
+    /** Set when this group posts inside a real `<form>` — becomes the submitted field name. Unset defers to a wrapping Field. */
     name?: string;
 }> & Readonly<{
     "onUpdate:modelValue"?: (value: string) => any;
 }>, {
-    disabled: boolean;
+    disabled: boolean | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 //# sourceMappingURL=RadioGroup.vue.d.ts.map

package/dist/primitives/RadioGroup/RadioGroup.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/RadioGroup/RadioGroup.vue"],"names":[],"mappings":"AAmHA,kDAAkD;AAClD,MAAM,WAAW,WAAW;IAC1B,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;wBACoB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAUd,qCAAqC;iBACxB,MAAM;IACnB,oCAAoC;aAC3B,WAAW,EAAE;IACtB,kFAAkF;eACvE,OAAO;IAClB,2FAA2F;WACpF,MAAM;;;;IAPb,qCAAqC;iBACxB,MAAM;IACnB,oCAAoC;aAC3B,WAAW,EAAE;IACtB,kFAAkF;eACvE,OAAO;IAClB,2FAA2F;WACpF,MAAM;;;;cAFF,OAAO;6EA0LlB,CAAC"}
+{"version":3,"file":"RadioGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/RadioGroup/RadioGroup.vue"],"names":[],"mappings":"AA2KA,kDAAkD;AAClD,MAAM,WAAW,WAAW;IAC1B,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;wBACoB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAyBd,qCAAqC;iBACxB,MAAM;IACnB,oCAAoC;aAC3B,WAAW,EAAE;IACtB,oHAAoH;eACzG,OAAO,GAAG,SAAS;IAC9B,6HAA6H;WACtH,MAAM;;;;IAPb,qCAAqC;iBACxB,MAAM;IACnB,oCAAoC;aAC3B,WAAW,EAAE;IACtB,oHAAoH;eACzG,OAAO,GAAG,SAAS;IAC9B,6HAA6H;WACtH,MAAM;;;;cAFF,OAAO,GAAG,SAAS;6EAsO9B,CAAC"}

package/dist/primitives/RadioGroup/RadioGroup.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,7 @@
 import { cn } from "../../lib/cn.js";
 import { optional } from "../../lib/props.js";
+import { useSplitAttrs } from "../../lib/attrs.js";
+import { useFieldControl } from "../../lib/field-context.js";
 import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
 import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from "reka-ui";
 //#region src/primitives/RadioGroup/RadioGroup.vue?vue&type=script&setup=true&lang.ts
@@ -9,32 +11,43 @@ var _hoisted_2 = {
 	class: "text-xs text-muted-foreground"
 };
 var RadioGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
 	__name: "RadioGroup",
 	props: {
 		modelValue: {},
 		options: {},
 		disabled: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		name: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props) {
+		const props = __props;
+		const { attrs, rest: groupAttrs } = useSplitAttrs();
+		const field = useFieldControl(() => ({
+			id: attrs.id,
+			describedBy: attrs["aria-describedby"],
+			name: props.name,
+			disabled: props.disabled
+		}));
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(RadioGroupRoot), mergeProps(unref(optional)({
-				modelValue: __props.modelValue,
-				name: __props.name
-			}), {
-				disabled: __props.disabled,
+			return openBlock(), createBlock(unref(RadioGroupRoot), mergeProps({
+				...unref(optional)({ modelValue: __props.modelValue }),
+				...unref(groupAttrs),
+				...unref(field).attrs
+			}, {
+				disabled: unref(field).disabled,
+				required: unref(field).required,
 				orientation: "vertical",
-				class: "flex flex-col gap-3",
+				class: unref(cn)("flex flex-col gap-3", unref(attrs).class),
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", String($event)))
 			}), {
 				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (opt) => {
 					return openBlock(), createElementBlock("label", {
 						key: opt.value,
-						class: normalizeClass(unref(cn)("flex items-start gap-2 text-sm text-foreground", __props.disabled || opt.disabled ? "cursor-not-allowed text-muted-foreground" : "cursor-pointer"))
+						class: normalizeClass(unref(cn)("flex items-start gap-2 text-sm text-foreground", unref(field).disabled || opt.disabled ? "cursor-not-allowed text-muted-foreground" : "cursor-pointer"))
 					}, [createVNode(unref(RadioGroupItem), {
 						value: opt.value,
 						class: normalizeClass(unref(cn)("mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-input bg-background", "active:scale-90", "data-[state=checked]:border-primary", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", "disabled:cursor-not-allowed disabled:opacity-50")),
@@ -53,7 +66,11 @@ var RadioGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					]), createElementVNode("span", _hoisted_1, [createElementVNode("span", null, toDisplayString(opt.label), 1), opt.description ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(opt.description), 1)) : createCommentVNode("", true)])], 2);
 				}), 128))]),
 				_: 1
-			}, 16, ["disabled"]);
+			}, 16, [
+				"disabled",
+				"required",
+				"class"
+			]);
 		};
 	}
 });

package/dist/primitives/RadioGroup/RadioGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/primitives/RadioGroup/RadioGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/** One selectable row in a {@link RadioGroup}. */\nexport interface RadioOption {\n  /** Matched against `modelValue`. */\n  value: string;\n  /** Visible label, rendered beside the control. */\n  label: string;\n  /** Secondary text, rendered small under the label. */\n  description?: string;\n  /** Disables this row alone, leaving its siblings pickable. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\n\n/**\n * RadioGroup — a vertical list of mutually exclusive options, each with a\n * visible (and optionally described) label — for longer or explained\n * choices and settings lists. For a compact horizontal toggle among 2-5\n * short options that are all visible at once, reach for SegmentedControl\n * instead. Built on Reka UI's RadioGroup: roving tabindex (the group is one\n * Tab stop, not N) with arrow-key navigation between items.\n */\nwithDefaults(\n  defineProps<{\n    /** The selected option's `value`. */\n    modelValue?: string;\n    /** The rows to render, in order. */\n    options: RadioOption[];\n    /** Disables every row at once, distinct from a single option's own `disabled`. */\n    disabled?: boolean;\n    /** Set when this group posts inside a real `<form>` — becomes the submitted field name. */\n    name?: string;\n  }>(),\n  { disabled: false },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n</script>\n\n<template>\n  <RadioGroupRoot\n    v-bind=\"optional({ modelValue, name })\"\n    :disabled=\"disabled\"\n    orientation=\"vertical\"\n    class=\"flex flex-col gap-3\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <!-- RadioGroupItem is a labelable <button role=\"radio\">, so wrapping it in\n         <label> names it exactly like a native control; the rule's\n         nesting/id heuristic just doesn't recognize reka-ui's custom element\n         as a \"control\". -->\n    <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->\n    <label\n      v-for=\"opt in options\"\n      :key=\"opt.value\"\n      :class=\"\n        cn(\n          'flex items-start gap-2 text-sm text-foreground',\n          // Disabled text stays readable (AA on the light ground) — only the\n          // control glyph dims; quiet, not illegible.\n          disabled || opt.disabled ? 'cursor-not-allowed text-muted-foreground' : 'cursor-pointer',\n        )\n      \"\n    >\n      <RadioGroupItem\n        :value=\"opt.value\"\n        :class=\"\n          cn(\n            'mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-input bg-background',\n            // Springy transform (press squish), steady color — the transform\n            // rides --ease-spring while border stays instant --ease-out (style\n            // below), same press language as Button/Switch/Checkbox.\n            'active:scale-90',\n            // Selected = a human decision (Loom law): the ring turns warp.\n            'data-[state=checked]:border-primary',\n            // Focus draws the weave tight: the brand ring blooms.\n            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n          )\n        \"\n        :disabled=\"opt.disabled ?? false\"\n        style=\"\n          transition:\n            transform var(--duration-fast) var(--ease-spring),\n            border-color var(--duration-instant) var(--ease-out),\n            box-shadow var(--duration-fast) var(--ease-out);\n        \"\n      >\n        <!-- The dot pops in with scale-in — a small causal \"it's selected now\". -->\n        <RadioGroupIndicator class=\"flex animate-scale-in items-center justify-center\">\n          <span class=\"h-2 w-2 rounded-full bg-primary\" />\n        </RadioGroupIndicator>\n      </RadioGroupItem>\n      <span class=\"flex flex-col gap-0.5\">\n        <span>{{ opt.label }}</span>\n        <span v-if=\"opt.description\" class=\"text-xs text-muted-foreground\">{{\n          opt.description\n        }}</span>\n      </span>\n    </label>\n  </RadioGroupRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;GA6CE,OAAA,UAAA,GAAA,YA4DiB,MAAA,cAAA,GA5DjB,WACU,MA2DO,QAAA,CA3DC,CAAA;IAAA,YAAG,QAAA;IAAU,MAAE,QAAA;GAAI,CAAA,GAAA;IAClC,UAAU,QAAA;IACX,aAAY;IACZ,OAAM;IACL,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,OAAO,MAAM,CAAA;;IAQ3D,SAAA,cAAsB,EADxB,UAAA,IAAA,GAAA,mBA+CQ,UAAA,MAAA,WA9CQ,QAAA,UAAP,QAAG;KADZ,OAAA,UAAA,GAAA,mBA+CQ,SAAA;MA7CL,KAAK,IAAI;MACT,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,kDAA6M,QAAA,YAAY,IAAI,WAAQ,6CAAA,gBAAA,CAAA;KASxP,GAAA,CAAA,YA4BiB,MAAA,cAAA,GAAA;MA3Bd,OAAO,IAAI;MACX,OAAK,eAAa,MAAA,EAAA,CAAE,CAAA,2GAAA,mBAAA,uCAAA,+GAAA,iDAAA,CAAA;MAcpB,UAAU,IAAI,YAAQ;MACvB,OAAA,EAAA,cAAA,qLAAA;;MAQA,SAAA,cAEsB,CAFtB,YAEsB,MAAA,mBAAA,GAAA,EAFD,OAAM,oDAAmD,GAAA;OAC5E,SAAA,cAAgD,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAhD,mBAAgD,QAAA,EAA1C,OAAM,kCAAiC,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA;;;;;;;;KAGjD,CAAA,GAAA,mBAKO,QALP,YAKO,CAJL,mBAA4B,QAAA,MAAA,gBAAnB,IAAI,KAAK,GAAA,CAAA,GACN,IAAI,eAAhB,UAAA,GAAA,mBAES,QAFT,YAES,gBADP,IAAI,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"RadioGroup.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/primitives/RadioGroup/RadioGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/** One selectable row in a {@link RadioGroup}. */\nexport interface RadioOption {\n  /** Matched against `modelValue`. */\n  value: string;\n  /** Visible label, rendered beside the control. */\n  label: string;\n  /** Secondary text, rendered small under the label. */\n  description?: string;\n  /** Disables this row alone, leaving its siblings pickable. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { useFieldControl } from \"../../lib/field-context\";\n\n/**\n * RadioGroup — a vertical list of mutually exclusive options, each with a\n * visible (and optionally described) label — for longer or explained\n * choices and settings lists. For a compact horizontal toggle among 2-5\n * short options that are all visible at once, reach for SegmentedControl\n * instead. Built on Reka UI's RadioGroup: roving tabindex (the group is one\n * Tab stop, not N) with arrow-key navigation between items.\n *\n * Inside a [Field](../Field/Field.vue) the row's description, `name`,\n * `required` and `invalid` reach the group through `useFieldControl()`, and\n * `name` below still wins wherever it is set — the row and this prop are one\n * concept, not two that can disagree.\n *\n * **A row's label does not name this group.** `<label for>` names a labelable\n * element and this renders a `div[role=\"radiogroup\"]`, so the row's label\n * resolves to the element and names nobody. Name it with a\n * [Fieldset](../Fieldset/Fieldset.vue)'s real `<legend>`, or with an\n * `aria-label`/`aria-labelledby` of its own.\n *\n * There is no `readonly`, and a row's is ignored rather than approximated: each\n * option is a `<button role=\"radio\">` with no native read-only state to put it\n * in, and a group whose options cannot be picked is a disabled group.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The selected option's `value`. */\n    modelValue?: string;\n    /** The rows to render, in order. */\n    options: RadioOption[];\n    /** Disables every row at once, distinct from a single option's own `disabled`. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Set when this group posts inside a real `<form>` — becomes the submitted field name. Unset defers to a wrapping Field. */\n    name?: string;\n  }>(),\n  {\n    // Not `false`: absent has to stay tellable from `false` for a Field above\n    // to disable the group and for `:disabled=\"false\"` to overrule one that\n    // does. Vue casts an absent Boolean prop with no declared default to\n    // `false`, which would leave the context wired and inert.\n    disabled: undefined,\n  },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: groupAttrs } = useSplitAttrs();\n\n// One rendered node, so the split is only about `class` — a caller's class\n// needs a Tailwind-aware merge rather than Vue's concatenating fallthrough.\n//\n// `id` and `aria-describedby` arrive as fallthrough attrs rather than props, so\n// they are handed in as this caller's own values; `field.attrs` then spreads\n// **after** `groupAttrs`, and that position is the contract (see TextField.vue).\n// `name` leaves `optional()` below with it: resolved once here, it reaches\n// RadioGroupRoot's own `name` prop, which is what mints the hidden input a\n// `<form>` submits.\n//\n// `required` and `invalid` are omitted because this component has no prop for\n// either — the row's answer stands unopposed. `readonly` is omitted for the\n// reason the docblock gives.\n//\n// The resolved `required` then reaches the group through Reka's own prop rather\n// than the `aria-required` in `field.attrs`: RadioGroupRoot writes that\n// attribute itself, so leaving it to the bag is a race with a `false` — see\n// Checkbox.vue, where the merge order makes the same race a certainty.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  name: props.name,\n  disabled: props.disabled,\n}));\n</script>\n\n<template>\n  <RadioGroupRoot\n    v-bind=\"{ ...optional({ modelValue }), ...groupAttrs, ...field.attrs }\"\n    :disabled=\"field.disabled\"\n    :required=\"field.required\"\n    orientation=\"vertical\"\n    :class=\"cn('flex flex-col gap-3', attrs.class as string)\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <!-- RadioGroupItem is a labelable <button role=\"radio\">, so wrapping it in\n         <label> names it exactly like a native control; the rule's\n         nesting/id heuristic just doesn't recognize reka-ui's custom element\n         as a \"control\". -->\n    <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->\n    <label\n      v-for=\"opt in options\"\n      :key=\"opt.value\"\n      :class=\"\n        cn(\n          'flex items-start gap-2 text-sm text-foreground',\n          // Disabled text stays readable (AA on the light ground) — only the\n          // control glyph dims; quiet, not illegible.\n          field.disabled || opt.disabled\n            ? 'cursor-not-allowed text-muted-foreground'\n            : 'cursor-pointer',\n        )\n      \"\n    >\n      <RadioGroupItem\n        :value=\"opt.value\"\n        :class=\"\n          cn(\n            'mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-input bg-background',\n            // Springy transform (press squish), steady color — the transform\n            // rides --ease-spring while border stays instant --ease-out (style\n            // below), same press language as Button/Switch/Checkbox.\n            'active:scale-90',\n            // Selected = a decision (Loom law): the ring turns primary.\n            'data-[state=checked]:border-primary',\n            // Focus draws the weave tight: the brand ring blooms.\n            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n          )\n        \"\n        :disabled=\"opt.disabled ?? false\"\n        style=\"\n          transition:\n            transform var(--duration-fast) var(--ease-spring),\n            border-color var(--duration-instant) var(--ease-out),\n            box-shadow var(--duration-fast) var(--ease-out);\n        \"\n      >\n        <!-- The dot pops in with scale-in — a small causal \"it's selected now\". -->\n        <RadioGroupIndicator class=\"flex animate-scale-in items-center justify-center\">\n          <span class=\"h-2 w-2 rounded-full bg-primary\" />\n        </RadioGroupIndicator>\n      </RadioGroupItem>\n      <span class=\"flex flex-col gap-0.5\">\n        <span>{{ opt.label }}</span>\n        <span v-if=\"opt.description\" class=\"text-xs text-muted-foreground\">{{\n          opt.description\n        }}</span>\n      </span>\n    </label>\n  </RadioGroupRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EA4CA,MAAM,QAAQ;EAuBd,MAAM,EAAE,OAAO,MAAM,eAAe,cAAc;EAoBlD,MAAM,QAAQ,uBAAuB;GACnC,IAAI,MAAM;GACV,aAAa,MAAM;GACnB,MAAM,MAAM;GACZ,UAAU,MAAM;EAClB,EAAE;;GAIA,OAAA,UAAA,GAAA,YA+DiB,MAAA,cAAA,GA/DjB,WA+DiB;IAAA,GA9DF,MAAA,QAAA,CAAQ,CAAA,EAAA,YAAG,QAAA,WAAU,CAAA;IAAA,GAAQ,MAAA,UAAA;IAAU,GAAK,MAAA,KAAA,CAAK,CAAC;GAAK,GAAA;IACnE,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,UAAU,MAAA,KAAA,CAAK,CAAC;IACjB,aAAY;IACX,OAAO,MAAA,EAAA,CAAE,CAAA,uBAAwB,MAAA,KAAA,CAAK,CAAC,KAAK;IAC5C,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,OAAO,MAAM,CAAA;;IAQ3D,SAAA,cAAsB,EADxB,UAAA,IAAA,GAAA,mBAiDQ,UAAA,MAAA,WAhDQ,QAAA,UAAP,QAAG;KADZ,OAAA,UAAA,GAAA,mBAiDQ,SAAA;MA/CL,KAAK,IAAI;MACT,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,kDAA6M,MAAA,KAAA,CAAK,CAAC,YAAY,IAAI,WAAA,6CAAA,gBAAA,CAAA;KAWtP,GAAA,CAAA,YA4BiB,MAAA,cAAA,GAAA;MA3Bd,OAAO,IAAI;MACX,OAAK,eAAa,MAAA,EAAA,CAAE,CAAA,2GAAA,mBAAA,uCAAA,+GAAA,iDAAA,CAAA;MAcpB,UAAU,IAAI,YAAQ;MACvB,OAAA,EAAA,cAAA,qLAAA;;MAQA,SAAA,cAEsB,CAFtB,YAEsB,MAAA,mBAAA,GAAA,EAFD,OAAM,oDAAmD,GAAA;OAC5E,SAAA,cAAgD,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAhD,mBAAgD,QAAA,EAA1C,OAAM,kCAAiC,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA;;;;;;;;KAGjD,CAAA,GAAA,mBAKO,QALP,YAKO,CAJL,mBAA4B,QAAA,MAAA,gBAAnB,IAAI,KAAK,GAAA,CAAA,GACN,IAAI,eAAhB,UAAA,GAAA,mBAES,QAFT,YAES,gBADP,IAAI,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/primitives/Rating/Rating.js

@@ -0,0 +1,7 @@
+import Rating_vue_vue_type_script_setup_true_lang_default, { RATING_LABELS } from "./Rating.vue_vue_type_script_setup_true_lang.js";
+//#region src/primitives/Rating/Rating.vue
+var Rating_default = Rating_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RATING_LABELS, Rating_default as default };
+
+//# sourceMappingURL=Rating.js.map