@ecoma-io/loom 0.2.0 → 0.3.0

package/dist/packages/primitives/rating/src/Rating.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,230 @@
+import { cn } from "../../../core/src/cn.js";
+import { optional } from "../../../core/src/props.js";
+import { useSplitAttrs } from "../../../core/src/attrs.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import { useFieldControl } from "../../../labels/src/field-context.js";
+import { useAncestorDisabled } from "../../../labels/src/ancestor-disabled.js";
+import "../../../labels/src/index.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, unref, useTemplateRef, withCtx } from "vue";
+import { Star } from "@lucide/vue";
+import { RatingItem, RatingItemIndicator, RatingRoot } from "reka-ui";
+import { cva } from "class-variance-authority";
+//#region packages/primitives/rating/src/Rating.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+/**
+
+/**
+* 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 RATING_LABELS = { score: ({ score, length }) => `${String(Number(score.toFixed(2)))} of ${String(length)} stars` };
+/**
+* One star's box, and it is applied to three nodes at once: the item, the
+* empty glyph and the filled glyph.
+*
+* The half-star is a clip, and a clip needs a box to be a fraction *of*. The
+* filled glyph inside a 50%-wide window has to keep the width of a whole star
+* or it renders as a squashed whole star rather than as half of one — so its
+* size comes from this map rather than from the icon's own intrinsic width,
+* and changing `size` moves the window and the glyph together.
+*/
+var starVariants = cva("block shrink-0", {
+	variants: { size: {
+		sm: "h-4 w-4",
+		md: "h-5 w-5",
+		lg: "h-6 w-6"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** The row itself: the gap grows with the stars so the rhythm holds at every size. */
+var rowVariants = cva("inline-flex min-h-6 items-center", {
+	variants: { size: {
+		sm: "gap-0.5",
+		md: "gap-1",
+		lg: "gap-1.5"
+	} },
+	defaultVariants: { size: "md" }
+});
+var Rating_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "Rating",
+	props: {
+		modelValue: {},
+		length: { default: 5 },
+		step: { default: 1 },
+		readonly: {
+			type: Boolean,
+			default: void 0
+		},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		hoverable: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		size: { default: "md" },
+		labels: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const text = useLabels("rating", RATING_LABELS, () => props.labels);
+		const { attrs, rest } = useSplitAttrs();
+		/**
+		* Each step is a real `<button>`, so a `<fieldset disabled>` above this row
+		* already makes the score unsettable — measured on this branch, a click and an
+		* arrow key both left the value where it was. What it does not reach is Reka's
+		* roving focus, which is driven by the row's own `disabled`: every step went
+		* `:disabled` while the `role="radiogroup"` container kept `tabindex="0"`, so
+		* Tab still stopped on an unavailable control. Its own `disabled` prop sets
+		* that to `-1`.
+		*
+		* Reading the state here rather than painting it with a CSS variant is what
+		* makes the two disabled renderings the same rendering, `data-disabled` and
+		* all, instead of two class lists that have to be kept in step by hand.
+		*
+		* Read off the DOM rather than taken from the Field context, which publishes no
+		* `disabled` on purpose — see `../../lib/ancestor-disabled.ts`.
+		*/
+		const root = useTemplateRef("root");
+		const groupDisabled = useAncestorDisabled(() => root.value?.$el);
+		const field = useFieldControl(() => ({
+			id: attrs.id,
+			describedBy: attrs["aria-describedby"],
+			disabled: groupDisabled.value ? true : props.disabled,
+			readonly: props.readonly
+		}));
+		/**
+		* The two keys of the resolved bag that a picture of a number may carry.
+		*
+		* The read-only branch is a `role="img"`, and ARIA allows neither
+		* `aria-required` nor `name` on one — `aria-allowed-attr` is a WCAG 4.1.2 rule
+		* `e2e/accessibility.e2e.ts` runs over every docs page, so the whole bag
+		* spread here would turn that gate red. They would also both be claims about
+		* an input, and this branch renders none: nothing is required of a reader who
+		* is being shown a number, and nothing is submitted.
+		*/
+		const pictureAttrs = computed(() => optional({
+			id: field.id,
+			"aria-describedby": field.attrs["aria-describedby"]
+		}));
+		/**
+		* The score as it is drawn and announced, clamped into the range the stars can
+		* actually show. Without the clamp a value of 9 on a 5-star scale paints five
+		* stars and announces "9 of 5", which is a number no reader can reconcile with
+		* the picture beside it.
+		*/
+		const score = computed(() => Math.min(Math.max(props.modelValue ?? 0, 0), props.length));
+		const stars = computed(() => Array.from({ length: props.length }, (_, index) => index + 1));
+		/**
+		* How much of star `n` is painted, as a percentage — the read-only clip
+		* window. Rounded, because binary floating point turns a score of 4.2 into a
+		* width of `20.000000000000018%`: correct to the pixel and unreadable in a
+		* DOM inspector or a test failure.
+		*/
+		function fillOf(star) {
+			const filled = Math.min(Math.max(score.value - (star - 1), 0), 1);
+			return `${String(Number((filled * 100).toFixed(2)))}%`;
+		}
+		return (_ctx, _cache) => {
+			return unref(field).readonly ? (openBlock(), createElementBlock("div", mergeProps({ key: 0 }, {
+				...unref(rest),
+				...pictureAttrs.value
+			}, {
+				role: "img",
+				"aria-label": unref(text).score({
+					score: score.value,
+					length: __props.length
+				}),
+				class: unref(cn)(unref(rowVariants)({ size: __props.size }), unref(attrs).class)
+			}), [(openBlock(true), createElementBlock(Fragment, null, renderList(stars.value, (star) => {
+				return openBlock(), createElementBlock("span", {
+					key: star,
+					class: normalizeClass(unref(cn)(unref(starVariants)({ size: __props.size }), "relative"))
+				}, [createVNode(unref(Star), {
+					"aria-hidden": "true",
+					class: normalizeClass(unref(cn)(unref(starVariants)({ size: __props.size }), "absolute inset-0 text-muted-foreground"))
+				}, null, 8, ["class"]), createElementVNode("span", {
+					class: "absolute inset-y-0 left-0 overflow-hidden",
+					style: normalizeStyle({ width: fillOf(star) })
+				}, [createVNode(unref(Star), {
+					"aria-hidden": "true",
+					class: normalizeClass(unref(cn)(unref(starVariants)({ size: __props.size }), "fill-primary text-primary-text"))
+				}, null, 8, ["class"])], 4)], 2);
+			}), 128))], 16, _hoisted_1)) : (openBlock(), createBlock(unref(RatingRoot), mergeProps({
+				key: 1,
+				ref_key: "root",
+				ref: root
+			}, {
+				...unref(rest),
+				...unref(optional)({ modelValue: __props.modelValue }),
+				...unref(field).attrs
+			}, {
+				length: __props.length,
+				step: __props.step,
+				clearable: __props.clearable,
+				hoverable: __props.hoverable,
+				disabled: unref(field).disabled,
+				required: unref(field).required,
+				class: unref(cn)(unref(rowVariants)({ size: __props.size }), "group data-[disabled]:cursor-not-allowed", unref(attrs).class),
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event))
+			}), {
+				default: withCtx(({ items }) => [(openBlock(true), createElementBlock(Fragment, null, renderList(items, (item) => {
+					return openBlock(), createBlock(unref(RatingItem), {
+						key: item,
+						as: "span",
+						item,
+						class: normalizeClass(unref(cn)(unref(starVariants)({ size: __props.size }), "relative"))
+					}, {
+						default: withCtx(({ steps }) => [createVNode(unref(Star), {
+							"aria-hidden": "true",
+							class: normalizeClass(unref(cn)(unref(starVariants)({ size: __props.size }), "absolute inset-0 text-muted-foreground group-data-[disabled]:text-muted-foreground-soft"))
+						}, null, 8, ["class"]), (openBlock(true), createElementBlock(Fragment, null, renderList(steps, (stepValue) => {
+							return openBlock(), createBlock(unref(RatingItemIndicator), {
+								key: stepValue,
+								step: stepValue,
+								"aria-label": unref(text).score({
+									score: stepValue,
+									length: __props.length
+								}),
+								class: "group/step absolute inset-y-0 left-0 min-h-6 cursor-pointer overflow-hidden rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo disabled:cursor-not-allowed",
+								style: {
+									"width": "var(--reka-rating-item-step-width)",
+									"opacity": "var(--reka-rating-item-step-opacity)",
+									"z-index": "var(--reka-rating-item-step-z-index)"
+								}
+							}, {
+								default: withCtx(() => [createVNode(unref(Star), {
+									"aria-hidden": "true",
+									class: normalizeClass(unref(cn)(unref(starVariants)({ size: __props.size }), "fill-primary text-primary-text opacity-0 transition-opacity duration-instant ease-out", "group-data-[disabled]/step:fill-muted-foreground group-data-[disabled]/step:text-muted-foreground", "group-data-[state=active]/step:opacity-100", "group-aria-checked/step:animate-scale-in"))
+								}, null, 8, ["class"])]),
+								_: 1
+							}, 8, ["step", "aria-label"]);
+						}), 128))]),
+						_: 1
+					}, 8, ["item", "class"]);
+				}), 128))]),
+				_: 1
+			}, 16, [
+				"length",
+				"step",
+				"clearable",
+				"hoverable",
+				"disabled",
+				"required",
+				"class"
+			]));
+		};
+	}
+});
+//#endregion
+export { RATING_LABELS, Rating_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Rating.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/rating/src/Rating.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../../packages/primitives/rating/src/Rating.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { RatingLabels } from \"@ecoma-io/loom-labels\";\nimport { cva } from \"class-variance-authority\";\n\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 RATING_LABELS: RatingLabels = {\n  score: ({ score, length }) => `${String(Number(score.toFixed(2)))} of ${String(length)} stars`,\n};\n\n/**\n * Star size. Deliberately *not* the control-height scale the text input,\n * Select and Button share: a rating is a row of glyphs rather than a box a\n * form row aligns against, so it sizes by the icon. It follows the icon scale\n * instead — 16 / 20 / 24px — which is the same ladder Spinner uses.\n */\nexport type RatingSize = \"sm\" | \"md\" | \"lg\";\n\n/**\n * One star's box, and it is applied to three nodes at once: the item, the\n * empty glyph and the filled glyph.\n *\n * The half-star is a clip, and a clip needs a box to be a fraction *of*. The\n * filled glyph inside a 50%-wide window has to keep the width of a whole star\n * or it renders as a squashed whole star rather than as half of one — so its\n * size comes from this map rather than from the icon's own intrinsic width,\n * and changing `size` moves the window and the glyph together.\n */\nconst starVariants = cva(\"block shrink-0\", {\n  variants: {\n    size: { sm: \"h-4 w-4\", md: \"h-5 w-5\", lg: \"h-6 w-6\" } satisfies Record<RatingSize, string>,\n  },\n  defaultVariants: { size: \"md\" },\n});\n\n/** The row itself: the gap grows with the stars so the rhythm holds at every size. */\nconst rowVariants = cva(\"inline-flex min-h-6 items-center\", {\n  variants: {\n    size: { sm: \"gap-0.5\", md: \"gap-1\", lg: \"gap-1.5\" } satisfies Record<RatingSize, string>,\n  },\n  defaultVariants: { size: \"md\" },\n});\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, useTemplateRef } from \"vue\";\nimport { RatingRoot, RatingItem, RatingItemIndicator } from \"reka-ui\";\nimport { Star } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useAncestorDisabled } from \"@ecoma-io/loom-labels\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Rating — a score on a small, fixed, ordinal scale, drawn as a row of stars.\n * Reach for it where the scale itself is the vocabulary a reader already\n * knows: how good was this, how confident are you, how would you rate it.\n *\n * Its neighbours: a value on a continuous range whose ends are the\n * information — a volume, a ratio — is a Slider; a choice between named\n * options that happen to be ordered (\"poor\", \"fair\", \"good\") is a\n * SegmentedControl or a RadioGroup, because the names carry meaning stars\n * cannot; and a number with no meaningful ceiling is a NumberField.\n *\n * **`readonly` and `disabled` are different controls, not two dials on one.**\n * A product's average score on a card is `readonly`: it is a picture of a\n * number, so it renders as `role=\"img\"` with the score in its accessible\n * name, is not a Tab stop, is not in the radio group at all, and is *not*\n * dimmed — nothing about it is unavailable, it was never an input. A rating\n * inside a form the reader may not edit yet is `disabled`: it stays a radio\n * group, dims, and refuses the pointer and the keyboard. Conflating the two\n * is the standard defect in this control — a read-only average rendered as a\n * disabled input reads as \"broken\" to a sighted reader and as \"unavailable\n * input\" to a screen reader, and neither is true.\n *\n * Built on Reka UI's Rating, which is a RadioGroup underneath: the row is one\n * Tab stop with roving focus, arrow keys move between steps and select as\n * they go, Home and End reach the ends.\n *\n * **`step` is narrowed on purpose.** Reka's `RatingRoot` also accepts `0.25`\n * and `0.1`. A quarter of a 20px star is a 5px-wide pointer target and a\n * tenth is 2px, and at that size the difference between 4.3 and 4.4 stars is\n * not perceptible in the rendering either — so the value could be neither\n * aimed at nor read back. An option that cannot be used correctly is not an\n * option, so the two are dropped here rather than forwarded.\n *\n * `step` governs what can be *aimed at*, which is a question only the\n * interactive control asks. A `readonly` rating therefore ignores it and\n * paints the exact value it was given: an average of 4.2 shows and announces\n * 4.2, not the nearest half.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself through\n * `useFieldControl()`: the row's description, `name`, `required` and `invalid`\n * land on the radio group, its `name` mints the hidden input a real `<form>`\n * submits, and its `readonly` switches this control into the picture above —\n * which is the one place this family's `readonly` does not mean \"a native\n * control with the native attribute set\". There is no native element to set it\n * on: each step is a `<button role=\"radio\">`, and `readonly` is as inert on a\n * radio as it is on a checkbox. So \"still a Tab stop, still submitted\" is\n * unreachable here, and the picture is what is left that is honest — a score\n * that was never an input, and, above all, not something dimmed to look\n * unavailable.\n *\n * **A row's label does not name this control.** `<label for>` names a labelable\n * element and both branches render a `div`, so name the group with a\n * [Fieldset](../Fieldset/Fieldset.vue)'s real `<legend>` or with an\n * `aria-label` of its own. A read-only rating already names itself from its\n * score.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The score, in stars. Leave it unset to let the rating manage its own. */\n    modelValue?: number;\n    /** How many stars the scale has — the maximum, and what a reader is scored out of. */\n    length?: number;\n    /** Granularity of one arrow-key step and of the pointer: whole stars, or halves. */\n    step?: 1 | 0.5;\n    /** Renders the score as a picture of a number rather than an input: no Tab stop, no dimming, and the exact value regardless of `step`. Unset defers to a wrapping Field. */\n    readonly?: boolean | undefined;\n    /** Lets a reader clear the score by choosing the star that is already chosen, which emits `0`. */\n    clearable?: boolean;\n    /** Previews the score under the pointer while hovering, before anything is chosen. */\n    hoverable?: boolean;\n    /** Unavailable: dims the row and refuses both the pointer and the keyboard. For a score that was never editable, use `readonly`. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Star size. It follows the icon scale, not the control-height scale. */\n    size?: RatingSize;\n    /**\n     * The name it gives a score, as any subset of `RatingLabels` — the rest\n     * stay as the host's `provideLoomLabels` vocabulary left them, and then as\n     * Loom's English.\n     *\n     * This is the per-instance correction, not the place to localise an\n     * application: the case it exists for is a scale whose stars are not stars\n     * — five chillies for heat, five bars for confidence — where the noun in\n     * the name has to say so however well the application is translated.\n     */\n    labels?: LabelOverrides<RatingLabels>;\n  }>(),\n  {\n    length: 5,\n    step: 1,\n    clearable: false,\n    hoverable: false,\n    // Not `false`, for either. `false` is a caller saying \"this rating is\n    // editable / live even though its row is not\"; absent is a caller saying\n    // nothing, and only `undefined` survives to mean that past Vue's\n    // absent-Boolean-casts-to-false rule — see TextField.vue, which carries the\n    // full reasoning.\n    readonly: undefined,\n    disabled: undefined,\n    size: \"md\",\n  },\n);\n\ndefineEmits<{\n  /** The newly chosen score in stars, or `0` when a `clearable` rating is cleared. */\n  \"update:modelValue\": [value: number];\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(\"rating\", RATING_LABELS, () => props.labels);\n\n// Two roots, one branch each, so `class` needs a Tailwind-aware merge on\n// whichever one renders — Vue's own fallthrough merge only concatenates, and a\n// caller's `gap-2` would then win or lose depending on which utility Tailwind\n// happened to emit last. Every other attribute (`aria-label` naming the group,\n// a test hook) rides `rest` onto the same node.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest } = useSplitAttrs();\n\n/**\n * Each step is a real `<button>`, so a `<fieldset disabled>` above this row\n * already makes the score unsettable — measured on this branch, a click and an\n * arrow key both left the value where it was. What it does not reach is Reka's\n * roving focus, which is driven by the row's own `disabled`: every step went\n * `:disabled` while the `role=\"radiogroup\"` container kept `tabindex=\"0\"`, so\n * Tab still stopped on an unavailable control. Its own `disabled` prop sets\n * that to `-1`.\n *\n * Reading the state here rather than painting it with a CSS variant is what\n * makes the two disabled renderings the same rendering, `data-disabled` and\n * all, instead of two class lists that have to be kept in step by hand.\n *\n * Read off the DOM rather than taken from the Field context, which publishes no\n * `disabled` on purpose — see `../../lib/ancestor-disabled.ts`.\n */\nconst root = useTemplateRef<{ $el?: Element }>(\"root\");\nconst groupDisabled = useAncestorDisabled(() => root.value?.$el);\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: a caller who sets either\n// still beats the row, and the row's description is merged into theirs rather\n// than replacing it. `name`, `required` and `invalid` are absent because this\n// component has no prop for any of them — the row's answer stands unopposed.\n//\n// The resolved `required` then reaches the group through Reka's own prop rather\n// than the `aria-required` in `field.attrs`: RadioGroupRoot underneath writes\n// that attribute itself, so leaving it to the bag is a race — see Checkbox.vue,\n// 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  // The fieldset beats the prop in both directions, exactly as it does for the\n  // step buttons themselves.\n  disabled: groupDisabled.value ? true : props.disabled,\n  readonly: props.readonly,\n}));\n\n/**\n * The two keys of the resolved bag that a picture of a number may carry.\n *\n * The read-only branch is a `role=\"img\"`, and ARIA allows neither\n * `aria-required` nor `name` on one — `aria-allowed-attr` is a WCAG 4.1.2 rule\n * `e2e/accessibility.e2e.ts` runs over every docs page, so the whole bag\n * spread here would turn that gate red. They would also both be claims about\n * an input, and this branch renders none: nothing is required of a reader who\n * is being shown a number, and nothing is submitted.\n */\nconst pictureAttrs = computed(() =>\n  optional({ id: field.id, \"aria-describedby\": field.attrs[\"aria-describedby\"] }),\n);\n\n/**\n * The score as it is drawn and announced, clamped into the range the stars can\n * actually show. Without the clamp a value of 9 on a 5-star scale paints five\n * stars and announces \"9 of 5\", which is a number no reader can reconcile with\n * the picture beside it.\n */\nconst score = computed(() => Math.min(Math.max(props.modelValue ?? 0, 0), props.length));\n\nconst stars = computed(() => Array.from({ length: props.length }, (_, index) => index + 1));\n\n/**\n * How much of star `n` is painted, as a percentage — the read-only clip\n * window. Rounded, because binary floating point turns a score of 4.2 into a\n * width of `20.000000000000018%`: correct to the pixel and unreadable in a\n * DOM inspector or a test failure.\n */\nfunction fillOf(star: number): string {\n  const filled = Math.min(Math.max(score.value - (star - 1), 0), 1);\n  return `${String(Number((filled * 100).toFixed(2)))}%`;\n}\n</script>\n\n<template>\n  <!-- The read-only branch renders no radio group, because there is no choice\n       to offer: one `role=\"img\"` node carrying the score as its name, and\n       nothing inside it that a Tab reaches. -->\n  <div\n    v-if=\"field.readonly\"\n    v-bind=\"{ ...rest, ...pictureAttrs }\"\n    role=\"img\"\n    :aria-label=\"text.score({ score, length })\"\n    :class=\"cn(rowVariants({ size }), attrs.class as string)\"\n  >\n    <span v-for=\"star in stars\" :key=\"star\" :class=\"cn(starVariants({ size }), 'relative')\">\n      <!-- The empty stars are what say how many there were to earn, so they\n           are a graphical object carrying information and are held to 1.4.11's\n           3:1 rather than painted as a faint hairline — hence the foreground\n           neutral and not a border token. -->\n      <Star\n        aria-hidden=\"true\"\n        :class=\"cn(starVariants({ size }), 'absolute inset-0 text-muted-foreground')\"\n      />\n      <!-- The fill is a window over a whole star, not a second glyph: a\n           fraction of a star drawn by clipping is the only version that stays\n           a star at any width. -->\n      <span class=\"absolute inset-y-0 left-0 overflow-hidden\" :style=\"{ width: fillOf(star) }\">\n        <Star\n          aria-hidden=\"true\"\n          :class=\"cn(starVariants({ size }), 'fill-primary text-primary-text')\"\n        />\n      </span>\n    </span>\n  </div>\n\n  <RatingRoot\n    v-else\n    ref=\"root\"\n    v-slot=\"{ items }\"\n    v-bind=\"{ ...rest, ...optional({ modelValue }), ...field.attrs }\"\n    :length=\"length\"\n    :step=\"step\"\n    :clearable=\"clearable\"\n    :hoverable=\"hoverable\"\n    :disabled=\"field.disabled\"\n    :required=\"field.required\"\n    :class=\"\n      cn(\n        rowVariants({ size }),\n        // Unavailability is painted in measured greys, never as an alpha over\n        // the available state: `opacity-50` here took the empty stars from\n        // 5.25:1 to 2.05:1 on the page ground, and the stars are the control's\n        // *data* — the filled ones are the score, the empty ones the maximum —\n        // which WCAG 1.4.11 holds to 3:1 as graphical objects. The two glyphs\n        // drain to their own tokens below, keyed off `data-disabled` so the\n        // prop and the enclosing fieldset paint the same picture.\n        'group data-[disabled]:cursor-not-allowed',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <!-- `as=\"span\"`: Reka renders the item as a `<label>` by default, and a\n         label with no text of its own names nothing while still claiming to.\n         The names live on the radios below, one per step. -->\n    <RatingItem\n      v-for=\"item in items\"\n      :key=\"item\"\n      v-slot=\"{ steps }\"\n      as=\"span\"\n      :item=\"item\"\n      :class=\"cn(starVariants({ size }), 'relative')\"\n    >\n      <Star\n        aria-hidden=\"true\"\n        :class=\"\n          cn(\n            starVariants({ size }),\n            // The empty star is the maximum, so when the row is unavailable it\n            // keeps a colour of its own rather than taking the row's old\n            // alpha — one measured step lighter than the score, held to the\n            // 3:1 floor `muted-foreground` itself was measured against.\n            'absolute inset-0 text-muted-foreground group-data-[disabled]:text-muted-foreground-soft',\n          )\n        \"\n      />\n      <!-- One radio per step, stacked over the empty star and clipped to the\n           fraction it stands for: with `step` 0.5 the left half of the glyph\n           is a 50%-wide button sitting above the whole-star one, so the\n           pointer lands on the half a reader aimed at. All three custom\n           properties come from Reka — the width of this step, whether a half\n           step is currently worth showing, and the stacking order that keeps\n           the narrower button reachable. -->\n      <RatingItemIndicator\n        v-for=\"stepValue in steps\"\n        :key=\"stepValue\"\n        :step=\"stepValue\"\n        :aria-label=\"text.score({ score: stepValue, length })\"\n        class=\"group/step absolute inset-y-0 left-0 min-h-6 cursor-pointer overflow-hidden rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo disabled:cursor-not-allowed\"\n        style=\"\n          width: var(--reka-rating-item-step-width);\n          opacity: var(--reka-rating-item-step-opacity);\n          z-index: var(--reka-rating-item-step-z-index);\n        \"\n      >\n        <!-- Two of the button's own states, read one level down. `data-state`\n             is `active` on every step at or below the score — or below the\n             pointer, while hovering — and that one only fades: a preview that\n             lags the pointer feels broken, so it rides --duration-instant.\n             `aria-checked` is true on the single step that *is* the score, so\n             the star a reader just chose settles on the spring while the ones\n             it dragged along behind it merely fill.\n             Both are scoped to the state rather than declared bare, which is\n             what lets the animation replay on each new choice instead of\n             running once at mount and never again. -->\n        <Star\n          aria-hidden=\"true\"\n          :class=\"\n            cn(\n              starVariants({ size }),\n              'fill-primary text-primary-text opacity-0 transition-opacity duration-instant ease-out',\n              // Unavailable, the score drains to the neutral well like every\n              // other control's value — solid still, so it stays distinct from\n              // the hollow maximum beside it.\n              'group-data-[disabled]/step:fill-muted-foreground group-data-[disabled]/step:text-muted-foreground',\n              'group-data-[state=active]/step:opacity-100',\n              'group-aria-checked/step:animate-scale-in',\n            )\n          \"\n        />\n      </RatingItemIndicator>\n    </RatingItem>\n  </RatingRoot>\n</template>\n"],"mappings":"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"}

package/dist/packages/primitives/rating/src/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from "./Rating.vue";
+export type { RatingSize } from "./Rating.vue";
+export { RATING_LABELS } from "./Rating.vue";
+export type { RatingLabels } from "@ecoma-io/loom-labels";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/rating/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/rating/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,YAAY,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/packages/primitives/rating/src/index.js

@@ -0,0 +1,3 @@
+import { RATING_LABELS } from "./Rating.vue_vue_type_script_setup_true_lang.js";
+import Rating_default from "./Rating.js";
+export { RATING_LABELS, Rating_default as default };

package/dist/packages/primitives/scroll-area/src/ScrollArea.js

@@ -0,0 +1,7 @@
+import ScrollArea_vue_vue_type_script_setup_true_lang_default from "./ScrollArea.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/scroll-area/src/ScrollArea.vue
+var ScrollArea_default = ScrollArea_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScrollArea_default as default };
+
+//# sourceMappingURL=ScrollArea.js.map

package/dist/packages/primitives/scroll-area/src/ScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.js","names":[],"sources":["../../../../../packages/primitives/scroll-area/src/ScrollArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Which scrollbars the area shows. */\nexport type ScrollAreaOrientation = \"vertical\" | \"horizontal\" | \"both\";\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaViewport,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\n/**\n * ScrollArea — custom-styled scrollbars for overflow content, replacing the\n * browser's native scrollbar with a thin track that expands on hover. Built on\n * Reka UI's ScrollArea primitives, which handle viewport sizing, pointer and\n * keyboard scrolling, and the scrollbar–thumb relationship.\n */\nwithDefaults(\n  defineProps<{\n    /** Which scrollbars to show. */\n    orientation?: ScrollAreaOrientation;\n    /** Optional class forwarded to each scrollbar element. */\n    scrollbarClass?: string;\n  }>(),\n  { orientation: \"vertical\" },\n);\n</script>\n\n<template>\n  <ScrollAreaRoot :class=\"cn('relative overflow-hidden', $attrs.class)\">\n    <ScrollAreaViewport class=\"h-full w-full\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollAreaScrollbar\n      v-if=\"orientation !== 'horizontal'\"\n      orientation=\"vertical\"\n      :class=\"\n        cn(\n          'flex touch-none select-none w-2.5 border-l border-l-transparent p-px transition-colors',\n          'hover:w-3',\n          scrollbarClass,\n        )\n      \"\n    >\n      <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n    </ScrollAreaScrollbar>\n    <ScrollAreaScrollbar\n      v-if=\"orientation !== 'vertical'\"\n      orientation=\"horizontal\"\n      :class=\"\n        cn(\n          'flex touch-none select-none h-2.5 border-t border-t-transparent p-px transition-colors',\n          'hover:h-3',\n          scrollbarClass,\n        )\n      \"\n    >\n      <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n    </ScrollAreaScrollbar>\n    <ScrollAreaCorner v-if=\"orientation === 'both'\" />\n  </ScrollAreaRoot>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/scroll-area/src/ScrollArea.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/scroll-area/src/ScrollArea.vue"],"names":[],"mappings":"AA+EA,uCAAuC;AACvC,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;wBAClD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAQd,gCAAgC;kBAClB,qBAAqB;IACnC,0DAA0D;qBACzC,MAAM;;IAHvB,gCAAgC;kBAClB,qBAAqB;IACnC,0DAA0D;qBACzC,MAAM;;iBAFT,qBAAqB;;cAsKzB,CAAC,KAAK,IAAiB,KAAK,GAAG;EAUzC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/packages/primitives/scroll-area/src/ScrollArea.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,46 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { createBlock, createCommentVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "reka-ui";
+//#region packages/primitives/scroll-area/src/ScrollArea.vue?vue&type=script&setup=true&lang.ts
+var ScrollArea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ScrollArea",
+	props: {
+		orientation: { default: "vertical" },
+		scrollbarClass: {}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScrollAreaRoot), { class: normalizeClass(unref(cn)("relative overflow-hidden", _ctx.$attrs.class)) }, {
+				default: withCtx(() => [
+					createVNode(unref(ScrollAreaViewport), { class: "h-full w-full" }, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+						_: 3
+					}),
+					__props.orientation !== "horizontal" ? (openBlock(), createBlock(unref(ScrollAreaScrollbar), {
+						key: 0,
+						orientation: "vertical",
+						class: normalizeClass(unref(cn)("flex touch-none select-none w-2.5 border-l border-l-transparent p-px transition-colors", "hover:w-3", __props.scrollbarClass))
+					}, {
+						default: withCtx(() => [createVNode(unref(ScrollAreaThumb), { class: "relative flex-1 rounded-full bg-border" })]),
+						_: 1
+					}, 8, ["class"])) : createCommentVNode("", true),
+					__props.orientation !== "vertical" ? (openBlock(), createBlock(unref(ScrollAreaScrollbar), {
+						key: 1,
+						orientation: "horizontal",
+						class: normalizeClass(unref(cn)("flex touch-none select-none h-2.5 border-t border-t-transparent p-px transition-colors", "hover:h-3", __props.scrollbarClass))
+					}, {
+						default: withCtx(() => [createVNode(unref(ScrollAreaThumb), { class: "relative flex-1 rounded-full bg-border" })]),
+						_: 1
+					}, 8, ["class"])) : createCommentVNode("", true),
+					__props.orientation === "both" ? (openBlock(), createBlock(unref(ScrollAreaCorner), { key: 2 })) : createCommentVNode("", true)
+				]),
+				_: 3
+			}, 8, ["class"]);
+		};
+	}
+});
+//#endregion
+export { ScrollArea_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScrollArea.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/scroll-area/src/ScrollArea.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../../packages/primitives/scroll-area/src/ScrollArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Which scrollbars the area shows. */\nexport type ScrollAreaOrientation = \"vertical\" | \"horizontal\" | \"both\";\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaViewport,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\n/**\n * ScrollArea — custom-styled scrollbars for overflow content, replacing the\n * browser's native scrollbar with a thin track that expands on hover. Built on\n * Reka UI's ScrollArea primitives, which handle viewport sizing, pointer and\n * keyboard scrolling, and the scrollbar–thumb relationship.\n */\nwithDefaults(\n  defineProps<{\n    /** Which scrollbars to show. */\n    orientation?: ScrollAreaOrientation;\n    /** Optional class forwarded to each scrollbar element. */\n    scrollbarClass?: string;\n  }>(),\n  { orientation: \"vertical\" },\n);\n</script>\n\n<template>\n  <ScrollAreaRoot :class=\"cn('relative overflow-hidden', $attrs.class)\">\n    <ScrollAreaViewport class=\"h-full w-full\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollAreaScrollbar\n      v-if=\"orientation !== 'horizontal'\"\n      orientation=\"vertical\"\n      :class=\"\n        cn(\n          'flex touch-none select-none w-2.5 border-l border-l-transparent p-px transition-colors',\n          'hover:w-3',\n          scrollbarClass,\n        )\n      \"\n    >\n      <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n    </ScrollAreaScrollbar>\n    <ScrollAreaScrollbar\n      v-if=\"orientation !== 'vertical'\"\n      orientation=\"horizontal\"\n      :class=\"\n        cn(\n          'flex touch-none select-none h-2.5 border-t border-t-transparent p-px transition-colors',\n          'hover:h-3',\n          scrollbarClass,\n        )\n      \"\n    >\n      <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n    </ScrollAreaScrollbar>\n    <ScrollAreaCorner v-if=\"orientation === 'both'\" />\n  </ScrollAreaRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;GAiCE,OAAA,UAAA,GAAA,YA+BiB,MAAA,cAAA,GAAA,EA/BA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,4BAA6BA,KAAAA,OAAO,KAAK,CAAA,EAAA,GAAA;IACjE,SAAA,cAEqB;KAFrB,YAEqB,MAAA,kBAAA,GAAA,EAFD,OAAM,gBAAe,GAAA;MACvC,SAAA,cAAQ,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA;;;KAGF,QAAA,gBAAW,gBADnB,UAAA,GAAA,YAYsB,MAAA,mBAAA,GAAA;;MAVpB,aAAY;MACX,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,0FAAA,aAAuI,QAAA,cAAA,CAAA;;MAQ1J,SAAA,cAAkE,CAAlE,YAAkE,MAAA,eAAA,GAAA,EAAjD,OAAM,yCAAwC,CAAA,CAAA,CAAA;;;KAGzD,QAAA,gBAAW,cADnB,UAAA,GAAA,YAYsB,MAAA,mBAAA,GAAA;;MAVpB,aAAY;MACX,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,0FAAA,aAAuI,QAAA,cAAA,CAAA;;MAQ1J,SAAA,cAAkE,CAAlE,YAAkE,MAAA,eAAA,GAAA,EAAjD,OAAM,yCAAwC,CAAA,CAAA,CAAA;;;KAEzC,QAAA,gBAAW,UAAnC,UAAA,GAAA,YAAkD,MAAA,gBAAA,GAAA,EAAA,KAAA,EAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

package/dist/packages/primitives/scroll-area/src/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./ScrollArea.vue";
+export type { ScrollAreaOrientation } from "./ScrollArea.vue";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/scroll-area/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/scroll-area/src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,YAAY,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/packages/primitives/scroll-area/src/index.js

@@ -0,0 +1,2 @@
+import ScrollArea_default from "./ScrollArea.js";
+export { ScrollArea_default as default };

package/dist/packages/primitives/segmented-control/src/SegmentedControl.js

@@ -0,0 +1,7 @@
+import SegmentedControl_vue_vue_type_script_setup_true_lang_default from "./SegmentedControl.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/segmented-control/src/SegmentedControl.vue
+var SegmentedControl_default = SegmentedControl_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SegmentedControl_default as default };
+
+//# sourceMappingURL=SegmentedControl.js.map

package/dist/packages/primitives/segmented-control/src/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","names":[],"sources":["../../../../../packages/primitives/segmented-control/src/SegmentedControl.vue"],"sourcesContent":["<script lang=\"ts\">\n/** One segment in a {@link SegmentedControl}. */\nexport interface SegmentedControlOption {\n  /** Matched against `modelValue`. */\n  value: string;\n  /** Visible label, rendered inside the segment. */\n  label: string;\n  /** Disables this segment alone, leaving its neighbours pickable. */\n  disabled?: boolean;\n  /** Forwarded to the segment's DOM node — lets hosts keep stable test hooks. */\n  testId?: string;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, onMounted, onUnmounted, reactive, ref, useTemplateRef, watch } from \"vue\";\nimport { RadioGroupRoot, RadioGroupItem } from \"reka-ui\";\nimport { cn, optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useAncestorDisabled } from \"@ecoma-io/loom-labels\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\n\n/**\n * SegmentedControl — pick one of 2-5 mutually exclusive options, all visible\n * at once; one is always active. Built on Reka UI's RadioGroup (single\n * choice, roving tabindex — the group is one Tab stop, not N — with\n * arrow-key navigation). Styled with Loom tokens.\n *\n * Inside a [Field](../Field/Field.vue) the row's description, `name`,\n * `required` and `invalid` reach the group through `useFieldControl()`.\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 — which is what every example\n * already does, because the control carries no label text.\n *\n * There is no `readonly`, and a row's is ignored rather than approximated: each\n * segment is a `<button role=\"radio\">` with no native read-only state to put it\n * in, and one segment is always active, so a read-only control here would be a\n * disabled one showing an answer.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The selected option's `value`. */\n    modelValue?: string;\n    /** The segments to render, in order. */\n    options: SegmentedControlOption[];\n    /** Disables every segment at once, distinct from a single option's own `disabled`. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** `\"sm\"` is the compressed form for dense chrome — e.g. a status bar density level. */\n    size?: \"default\" | \"sm\";\n  }>(),\n  {\n    // Not `false`: absent has to stay tellable from `false` for a Field above\n    // to disable the control 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    size: \"default\",\n  },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: groupAttrs } = useSplitAttrs();\n\n/**\n * The segments are real `<button>`s, so a `<fieldset disabled>` above this\n * control already makes each of them inert — but Reka's roving focus is what\n * decides where Tab lands, and it is driven by the group's own `disabled`,\n * which the fieldset never reaches. Measured on this branch: every segment went\n * `:disabled` while the `role=\"radiogroup\"` container kept `tabindex=\"0\"`, so\n * Tab still stopped on an unavailable control and left the reader nowhere. Its\n * own `disabled` prop sets that to `-1`.\n *\n * Reading the group state here rather than painting it with a CSS variant is\n * also what keeps the appearance honest, and this is the control where the\n * distinction bites: one option may carry `disabled` of its own, so \"a\n * `:disabled` button is inside this track\" and \"this track is unavailable\" are\n * different facts. Only the fieldset says the second.\n *\n * Read off the DOM rather than taken from the Field context, which publishes no\n * `disabled` on purpose — see `../../lib/ancestor-disabled.ts`.\n */\nconst root = useTemplateRef<{ $el?: Element }>(\"root\");\nconst groupDisabled = useAncestorDisabled(() => root.value?.$el);\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//\n// `name`, `required` and `invalid` are omitted because this component has no\n// prop for any of them — the row's answer stands unopposed, and its `name`\n// reaches RadioGroupRoot's own prop, which mints the hidden input a `<form>`\n// submits. `readonly` is omitted for the 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  // The fieldset beats the prop in both directions, exactly as it does for the\n  // segments themselves.\n  disabled: groupDisabled.value ? true : props.disabled,\n}));\n\n// Shared sliding indicator behind the checked segment. Measured off the live\n// DOM (offsetLeft/offsetWidth of the [data-state=checked] item), not derived\n// from index/width math, so \"sm\"/\"default\" sizing and variable-width labels\n// stay correct without per-size indicator code.\nconst indicatorEl = ref<HTMLElement | null>(null);\nconst indicatorStyle = reactive({ left: \"0px\", width: \"0px\", opacity: \"0\" });\n\nlet resizeObserver: ResizeObserver | undefined;\n\n// Re-targets onto the checked item itself (not the container) so a late\n// width settle on exactly that element — e.g. the `font-medium` weight swap\n// on data-[state=checked] reflowing after this function's own read — is\n// caught by the observer and re-measured, instead of going unnoticed because\n// the container's total box happened not to change.\nfunction updateIndicator() {\n  const container = indicatorEl.value?.parentElement;\n  const active = container?.querySelector<HTMLElement>('[role=\"radio\"][data-state=\"checked\"]');\n  if (!active) {\n    indicatorStyle.opacity = \"0\";\n    resizeObserver?.disconnect();\n    return;\n  }\n  indicatorStyle.left = `${active.offsetLeft}px`;\n  indicatorStyle.width = `${active.offsetWidth}px`;\n  indicatorStyle.opacity = \"1\";\n  resizeObserver?.disconnect();\n  resizeObserver?.observe(active);\n}\n\nonMounted(() => {\n  resizeObserver = new ResizeObserver(updateIndicator);\n  updateIndicator();\n});\nonUnmounted(() => resizeObserver?.disconnect());\n\nwatch(\n  () => props.modelValue,\n  () => nextTick(updateIndicator),\n);\nwatch(\n  () => props.options,\n  () => nextTick(updateIndicator),\n  { deep: true },\n);\n</script>\n\n<template>\n  <RadioGroupRoot\n    ref=\"root\"\n    v-bind=\"{ ...optional({ modelValue }), ...groupAttrs, ...field.attrs }\"\n    :disabled=\"field.disabled\"\n    :required=\"field.required\"\n    orientation=\"horizontal\"\n    :class=\"\n      cn(\n        'relative inline-flex items-center gap-0.5 rounded-md border border-input bg-muted p-0.5',\n        // The one thing the *track* has left to say. Its fill is already\n        // `bg-muted` — the well every other unavailable control drains to — so\n        // the fill channel is spent before the state arrives, and the segments\n        // inside carry the rest. The rim slackening from `input` to the lighter\n        // `border` is what makes a wholly unavailable control tellable from an\n        // available one at the group's own edge rather than only cell by cell.\n        field.disabled && 'cursor-not-allowed border-border',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <span\n      ref=\"indicatorEl\"\n      aria-hidden=\"true\"\n      class=\"pointer-events-none absolute inset-y-0.5 rounded-sm bg-card shadow-sm\"\n      style=\"\n        transition:\n          left var(--duration-fast) var(--ease-spring),\n          width var(--duration-fast) var(--ease-spring);\n      \"\n      :style=\"{\n        left: indicatorStyle.left,\n        width: indicatorStyle.width,\n        opacity: indicatorStyle.opacity,\n      }\"\n    />\n    <RadioGroupItem\n      v-for=\"opt in options\"\n      :key=\"opt.value\"\n      :value=\"opt.value\"\n      :disabled=\"opt.disabled ?? false\"\n      v-bind=\"optional({ 'data-testid': opt.testId })\"\n      style=\"\n        transition:\n          transform var(--duration-fast) var(--ease-spring),\n          color var(--duration-fast) var(--ease-out);\n      \"\n      :class=\"\n        cn(\n          // Named, not the bare `group`: a segmented control is dropped into\n          // application chrome, and a bare `group-*` would also answer to any\n          // ancestor a host happened to mark up as one.\n          'group/segment relative z-10 inline-flex items-center justify-center rounded-sm text-muted-foreground',\n          size === 'sm' ? 'px-1.5 py-px text-[11px]' : 'px-3 py-1 text-sm',\n          'data-[state=checked]:font-medium data-[state=checked]:text-foreground',\n          'data-[state=unchecked]:hover:bg-subtle',\n          'active:scale-press',\n          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n          // No `opacity` here. A segment *is* its label — there is no glyph and\n          // no fill of its own to dim — so `disabled:opacity-50` had nothing to\n          // act on but the text, taking an unchecked segment to 1.96:1 and a\n          // chosen one to 3.13:1 on its thumb.\n          //\n          // Unavailability is a fill instead, and it is the one step this\n          // system already treats as meaningful: the cell drains up a rung of\n          // the elevation rhythm, from the track's `bg-muted` to the page's own\n          // `bg-background`, so it reads as a hole in the track rather than as\n          // part of it. On a *chosen* segment that same fill covers the raised\n          // white thumb, which is the whole signal — the value is still shown\n          // and it is visibly no longer settable.\n          'disabled:pointer-events-none data-[disabled]:bg-background',\n        )\n      \"\n    >\n      <!-- The mute lives on this span rather than on the segment, and it has\n           to. `data-[disabled]:` sorts *before* `data-[state=checked]:` in\n           Tailwind's variant order, so a disabled segment that is also the\n           chosen one would take `text-foreground` from the button — and a\n           colour set on the button is only inherited here. Declared on the span\n           it wins whatever the segment resolved to: 5.25:1 over the drained\n           fill, against the 1.96:1 the dim used to leave. -->\n      <span class=\"group-data-[disabled]/segment:text-muted-foreground\">{{ opt.label }}</span>\n    </RadioGroupItem>\n  </RadioGroupRoot>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/segmented-control/src/SegmentedControl.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/segmented-control/src/SegmentedControl.vue"],"names":[],"mappings":"AAiQA,iDAAiD;AACjD,MAAM,WAAW,sBAAsB;IACrC,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;wBACoB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAuBd,qCAAqC;iBACxB,MAAM;IACnB,wCAAwC;aAC/B,sBAAsB,EAAE;IACjC,wHAAwH;eAC7G,OAAO,GAAG,SAAS;IAC9B,wFAAwF;WACjF,SAAS,GAAG,IAAI;;;;IAPvB,qCAAqC;iBACxB,MAAM;IACnB,wCAAwC;aAC/B,sBAAsB,EAAE;IACjC,wHAAwH;eAC7G,OAAO,GAAG,SAAS;IAC9B,wFAAwF;WACjF,SAAS,GAAG,IAAI;;;;UAAhB,SAAS,GAAG,IAAI;cAFZ,OAAO,GAAG,SAAS;6EAiU9B,CAAC"}

package/dist/packages/primitives/segmented-control/src/SegmentedControl.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,134 @@
+import { cn } from "../../../core/src/cn.js";
+import { optional } from "../../../core/src/props.js";
+import { useSplitAttrs } from "../../../core/src/attrs.js";
+import "../../../core/src/index.js";
+import { useFieldControl } from "../../../labels/src/field-context.js";
+import { useAncestorDisabled } from "../../../labels/src/ancestor-disabled.js";
+import "../../../labels/src/index.js";
+import { Fragment, createBlock, createElementBlock, createElementVNode, defineComponent, mergeProps, nextTick, normalizeStyle, onMounted, onUnmounted, openBlock, reactive, ref, renderList, toDisplayString, unref, useTemplateRef, watch, withCtx } from "vue";
+import { RadioGroupItem, RadioGroupRoot } from "reka-ui";
+//#region packages/primitives/segmented-control/src/SegmentedControl.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "group-data-[disabled]/segment:text-muted-foreground" };
+var SegmentedControl_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "SegmentedControl",
+	props: {
+		modelValue: {},
+		options: {},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		size: { default: "default" }
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const { attrs, rest: groupAttrs } = useSplitAttrs();
+		/**
+		* The segments are real `<button>`s, so a `<fieldset disabled>` above this
+		* control already makes each of them inert — but Reka's roving focus is what
+		* decides where Tab lands, and it is driven by the group's own `disabled`,
+		* which the fieldset never reaches. Measured on this branch: every segment went
+		* `:disabled` while the `role="radiogroup"` container kept `tabindex="0"`, so
+		* Tab still stopped on an unavailable control and left the reader nowhere. Its
+		* own `disabled` prop sets that to `-1`.
+		*
+		* Reading the group state here rather than painting it with a CSS variant is
+		* also what keeps the appearance honest, and this is the control where the
+		* distinction bites: one option may carry `disabled` of its own, so "a
+		* `:disabled` button is inside this track" and "this track is unavailable" are
+		* different facts. Only the fieldset says the second.
+		*
+		* Read off the DOM rather than taken from the Field context, which publishes no
+		* `disabled` on purpose — see `../../lib/ancestor-disabled.ts`.
+		*/
+		const root = useTemplateRef("root");
+		const groupDisabled = useAncestorDisabled(() => root.value?.$el);
+		const field = useFieldControl(() => ({
+			id: attrs.id,
+			describedBy: attrs["aria-describedby"],
+			disabled: groupDisabled.value ? true : props.disabled
+		}));
+		const indicatorEl = ref(null);
+		const indicatorStyle = reactive({
+			left: "0px",
+			width: "0px",
+			opacity: "0"
+		});
+		let resizeObserver;
+		function updateIndicator() {
+			const active = (indicatorEl.value?.parentElement)?.querySelector("[role=\"radio\"][data-state=\"checked\"]");
+			if (!active) {
+				indicatorStyle.opacity = "0";
+				resizeObserver?.disconnect();
+				return;
+			}
+			indicatorStyle.left = `${active.offsetLeft}px`;
+			indicatorStyle.width = `${active.offsetWidth}px`;
+			indicatorStyle.opacity = "1";
+			resizeObserver?.disconnect();
+			resizeObserver?.observe(active);
+		}
+		onMounted(() => {
+			resizeObserver = new ResizeObserver(updateIndicator);
+			updateIndicator();
+		});
+		onUnmounted(() => resizeObserver?.disconnect());
+		watch(() => props.modelValue, () => nextTick(updateIndicator));
+		watch(() => props.options, () => nextTick(updateIndicator), { deep: true });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(RadioGroupRoot), mergeProps({
+				ref_key: "root",
+				ref: root
+			}, {
+				...unref(optional)({ modelValue: __props.modelValue }),
+				...unref(groupAttrs),
+				...unref(field).attrs
+			}, {
+				disabled: unref(field).disabled,
+				required: unref(field).required,
+				orientation: "horizontal",
+				class: unref(cn)("relative inline-flex items-center gap-0.5 rounded-md border border-input bg-muted p-0.5", unref(field).disabled && "cursor-not-allowed border-border", unref(attrs).class),
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", String($event)))
+			}), {
+				default: withCtx(() => [createElementVNode("span", {
+					ref_key: "indicatorEl",
+					ref: indicatorEl,
+					"aria-hidden": "true",
+					class: "pointer-events-none absolute inset-y-0.5 rounded-sm bg-card shadow-sm",
+					style: normalizeStyle([{ "transition": "left var(--duration-fast) var(--ease-spring),\n          width var(--duration-fast) var(--ease-spring)" }, {
+						left: indicatorStyle.left,
+						width: indicatorStyle.width,
+						opacity: indicatorStyle.opacity
+					}])
+				}, null, 4), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (opt) => {
+					return openBlock(), createBlock(unref(RadioGroupItem), mergeProps({
+						key: opt.value,
+						value: opt.value,
+						disabled: opt.disabled ?? false
+					}, { ref_for: true }, unref(optional)({ "data-testid": opt.testId }), {
+						style: { "transition": "transform var(--duration-fast) var(--ease-spring),\n          color var(--duration-fast) var(--ease-out)" },
+						class: unref(cn)("group/segment relative z-10 inline-flex items-center justify-center rounded-sm text-muted-foreground", __props.size === "sm" ? "px-1.5 py-px text-[11px]" : "px-3 py-1 text-sm", "data-[state=checked]:font-medium data-[state=checked]:text-foreground", "data-[state=unchecked]:hover:bg-subtle", "active:scale-press", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", "disabled:pointer-events-none data-[disabled]:bg-background")
+					}), {
+						default: withCtx(() => [createElementVNode("span", _hoisted_1, toDisplayString(opt.label), 1)]),
+						_: 2
+					}, 1040, [
+						"value",
+						"disabled",
+						"class"
+					]);
+				}), 128))]),
+				_: 1
+			}, 16, [
+				"disabled",
+				"required",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { SegmentedControl_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=SegmentedControl.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/segmented-control/src/SegmentedControl.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../../packages/primitives/segmented-control/src/SegmentedControl.vue"],"sourcesContent":["<script lang=\"ts\">\n/** One segment in a {@link SegmentedControl}. */\nexport interface SegmentedControlOption {\n  /** Matched against `modelValue`. */\n  value: string;\n  /** Visible label, rendered inside the segment. */\n  label: string;\n  /** Disables this segment alone, leaving its neighbours pickable. */\n  disabled?: boolean;\n  /** Forwarded to the segment's DOM node — lets hosts keep stable test hooks. */\n  testId?: string;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, onMounted, onUnmounted, reactive, ref, useTemplateRef, watch } from \"vue\";\nimport { RadioGroupRoot, RadioGroupItem } from \"reka-ui\";\nimport { cn, optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useAncestorDisabled } from \"@ecoma-io/loom-labels\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\n\n/**\n * SegmentedControl — pick one of 2-5 mutually exclusive options, all visible\n * at once; one is always active. Built on Reka UI's RadioGroup (single\n * choice, roving tabindex — the group is one Tab stop, not N — with\n * arrow-key navigation). Styled with Loom tokens.\n *\n * Inside a [Field](../Field/Field.vue) the row's description, `name`,\n * `required` and `invalid` reach the group through `useFieldControl()`.\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 — which is what every example\n * already does, because the control carries no label text.\n *\n * There is no `readonly`, and a row's is ignored rather than approximated: each\n * segment is a `<button role=\"radio\">` with no native read-only state to put it\n * in, and one segment is always active, so a read-only control here would be a\n * disabled one showing an answer.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The selected option's `value`. */\n    modelValue?: string;\n    /** The segments to render, in order. */\n    options: SegmentedControlOption[];\n    /** Disables every segment at once, distinct from a single option's own `disabled`. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** `\"sm\"` is the compressed form for dense chrome — e.g. a status bar density level. */\n    size?: \"default\" | \"sm\";\n  }>(),\n  {\n    // Not `false`: absent has to stay tellable from `false` for a Field above\n    // to disable the control 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    size: \"default\",\n  },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: groupAttrs } = useSplitAttrs();\n\n/**\n * The segments are real `<button>`s, so a `<fieldset disabled>` above this\n * control already makes each of them inert — but Reka's roving focus is what\n * decides where Tab lands, and it is driven by the group's own `disabled`,\n * which the fieldset never reaches. Measured on this branch: every segment went\n * `:disabled` while the `role=\"radiogroup\"` container kept `tabindex=\"0\"`, so\n * Tab still stopped on an unavailable control and left the reader nowhere. Its\n * own `disabled` prop sets that to `-1`.\n *\n * Reading the group state here rather than painting it with a CSS variant is\n * also what keeps the appearance honest, and this is the control where the\n * distinction bites: one option may carry `disabled` of its own, so \"a\n * `:disabled` button is inside this track\" and \"this track is unavailable\" are\n * different facts. Only the fieldset says the second.\n *\n * Read off the DOM rather than taken from the Field context, which publishes no\n * `disabled` on purpose — see `../../lib/ancestor-disabled.ts`.\n */\nconst root = useTemplateRef<{ $el?: Element }>(\"root\");\nconst groupDisabled = useAncestorDisabled(() => root.value?.$el);\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//\n// `name`, `required` and `invalid` are omitted because this component has no\n// prop for any of them — the row's answer stands unopposed, and its `name`\n// reaches RadioGroupRoot's own prop, which mints the hidden input a `<form>`\n// submits. `readonly` is omitted for the 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  // The fieldset beats the prop in both directions, exactly as it does for the\n  // segments themselves.\n  disabled: groupDisabled.value ? true : props.disabled,\n}));\n\n// Shared sliding indicator behind the checked segment. Measured off the live\n// DOM (offsetLeft/offsetWidth of the [data-state=checked] item), not derived\n// from index/width math, so \"sm\"/\"default\" sizing and variable-width labels\n// stay correct without per-size indicator code.\nconst indicatorEl = ref<HTMLElement | null>(null);\nconst indicatorStyle = reactive({ left: \"0px\", width: \"0px\", opacity: \"0\" });\n\nlet resizeObserver: ResizeObserver | undefined;\n\n// Re-targets onto the checked item itself (not the container) so a late\n// width settle on exactly that element — e.g. the `font-medium` weight swap\n// on data-[state=checked] reflowing after this function's own read — is\n// caught by the observer and re-measured, instead of going unnoticed because\n// the container's total box happened not to change.\nfunction updateIndicator() {\n  const container = indicatorEl.value?.parentElement;\n  const active = container?.querySelector<HTMLElement>('[role=\"radio\"][data-state=\"checked\"]');\n  if (!active) {\n    indicatorStyle.opacity = \"0\";\n    resizeObserver?.disconnect();\n    return;\n  }\n  indicatorStyle.left = `${active.offsetLeft}px`;\n  indicatorStyle.width = `${active.offsetWidth}px`;\n  indicatorStyle.opacity = \"1\";\n  resizeObserver?.disconnect();\n  resizeObserver?.observe(active);\n}\n\nonMounted(() => {\n  resizeObserver = new ResizeObserver(updateIndicator);\n  updateIndicator();\n});\nonUnmounted(() => resizeObserver?.disconnect());\n\nwatch(\n  () => props.modelValue,\n  () => nextTick(updateIndicator),\n);\nwatch(\n  () => props.options,\n  () => nextTick(updateIndicator),\n  { deep: true },\n);\n</script>\n\n<template>\n  <RadioGroupRoot\n    ref=\"root\"\n    v-bind=\"{ ...optional({ modelValue }), ...groupAttrs, ...field.attrs }\"\n    :disabled=\"field.disabled\"\n    :required=\"field.required\"\n    orientation=\"horizontal\"\n    :class=\"\n      cn(\n        'relative inline-flex items-center gap-0.5 rounded-md border border-input bg-muted p-0.5',\n        // The one thing the *track* has left to say. Its fill is already\n        // `bg-muted` — the well every other unavailable control drains to — so\n        // the fill channel is spent before the state arrives, and the segments\n        // inside carry the rest. The rim slackening from `input` to the lighter\n        // `border` is what makes a wholly unavailable control tellable from an\n        // available one at the group's own edge rather than only cell by cell.\n        field.disabled && 'cursor-not-allowed border-border',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <span\n      ref=\"indicatorEl\"\n      aria-hidden=\"true\"\n      class=\"pointer-events-none absolute inset-y-0.5 rounded-sm bg-card shadow-sm\"\n      style=\"\n        transition:\n          left var(--duration-fast) var(--ease-spring),\n          width var(--duration-fast) var(--ease-spring);\n      \"\n      :style=\"{\n        left: indicatorStyle.left,\n        width: indicatorStyle.width,\n        opacity: indicatorStyle.opacity,\n      }\"\n    />\n    <RadioGroupItem\n      v-for=\"opt in options\"\n      :key=\"opt.value\"\n      :value=\"opt.value\"\n      :disabled=\"opt.disabled ?? false\"\n      v-bind=\"optional({ 'data-testid': opt.testId })\"\n      style=\"\n        transition:\n          transform var(--duration-fast) var(--ease-spring),\n          color var(--duration-fast) var(--ease-out);\n      \"\n      :class=\"\n        cn(\n          // Named, not the bare `group`: a segmented control is dropped into\n          // application chrome, and a bare `group-*` would also answer to any\n          // ancestor a host happened to mark up as one.\n          'group/segment relative z-10 inline-flex items-center justify-center rounded-sm text-muted-foreground',\n          size === 'sm' ? 'px-1.5 py-px text-[11px]' : 'px-3 py-1 text-sm',\n          'data-[state=checked]:font-medium data-[state=checked]:text-foreground',\n          'data-[state=unchecked]:hover:bg-subtle',\n          'active:scale-press',\n          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n          // No `opacity` here. A segment *is* its label — there is no glyph and\n          // no fill of its own to dim — so `disabled:opacity-50` had nothing to\n          // act on but the text, taking an unchecked segment to 1.96:1 and a\n          // chosen one to 3.13:1 on its thumb.\n          //\n          // Unavailability is a fill instead, and it is the one step this\n          // system already treats as meaningful: the cell drains up a rung of\n          // the elevation rhythm, from the track's `bg-muted` to the page's own\n          // `bg-background`, so it reads as a hole in the track rather than as\n          // part of it. On a *chosen* segment that same fill covers the raised\n          // white thumb, which is the whole signal — the value is still shown\n          // and it is visibly no longer settable.\n          'disabled:pointer-events-none data-[disabled]:bg-background',\n        )\n      \"\n    >\n      <!-- The mute lives on this span rather than on the segment, and it has\n           to. `data-[disabled]:` sorts *before* `data-[state=checked]:` in\n           Tailwind's variant order, so a disabled segment that is also the\n           chosen one would take `text-foreground` from the button — and a\n           colour set on the button is only inherited here. Declared on the span\n           it wins whatever the segment resolved to: 5.25:1 over the drained\n           fill, against the 1.96:1 the dim used to leave. -->\n      <span class=\"group-data-[disabled]/segment:text-muted-foreground\">{{ opt.label }}</span>\n    </RadioGroupItem>\n  </RadioGroupRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,MAAM,QAAQ;EAwBd,MAAM,EAAE,OAAO,MAAM,eAAe,cAAc;;;;;;;;;;;;;;;;;;;EAoBlD,MAAM,OAAO,eAAkC,MAAM;EACrD,MAAM,gBAAgB,0BAA0B,KAAK,OAAO,GAAG;EAkB/D,MAAM,QAAQ,uBAAuB;GACnC,IAAI,MAAM;GACV,aAAa,MAAM;GAGnB,UAAU,cAAc,QAAQ,OAAO,MAAM;EAC/C,EAAE;EAMF,MAAM,cAAc,IAAwB,IAAI;EAChD,MAAM,iBAAiB,SAAS;GAAE,MAAM;GAAO,OAAO;GAAO,SAAS;EAAI,CAAC;EAE3E,IAAI;EAOJ,SAAS,kBAAkB;GAEzB,MAAM,UADY,YAAY,OAAO,cAAA,EACX,cAA2B,0CAAsC;GAC3F,IAAI,CAAC,QAAQ;IACX,eAAe,UAAU;IACzB,gBAAgB,WAAW;IAC3B;GACF;GACA,eAAe,OAAO,GAAG,OAAO,WAAW;GAC3C,eAAe,QAAQ,GAAG,OAAO,YAAY;GAC7C,eAAe,UAAU;GACzB,gBAAgB,WAAW;GAC3B,gBAAgB,QAAQ,MAAM;EAChC;EAEA,gBAAgB;GACd,iBAAiB,IAAI,eAAe,eAAe;GACnD,gBAAgB;EAClB,CAAC;EACD,kBAAkB,gBAAgB,WAAW,CAAC;EAE9C,YACQ,MAAM,kBACN,SAAS,eAAe,CAChC;EACA,YACQ,MAAM,eACN,SAAS,eAAe,GAC9B,EAAE,MAAM,KAAK,CACf;;GAIE,OAAA,UAAA,GAAA,YAmFiB,MAAA,cAAA,GAnFjB,WAmFiB;IAlFX,SAAA;IAAJ,KAAI;GACS,GAAA;IAAA,GAAA,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,OAAc,MAAA,EAAA,CAAE,CAAA,2FAAwkB,MAAA,KAAA,CAAK,CAAC,YAAQ,oCAAgD,MAAA,KAAA,CAAK,CAAC,KAAA;IAa5pB,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,OAAO,MAAM,CAAA;;IAE7D,SAAA,cAcE,CAdF,mBAcE,QAAA;KAbI,SAAA;KAAJ,KAAI;KACJ,eAAY;KACZ,OAAM;KACN,OAIC,eAAA,CAJD,EAAA,cAAA,yGAAA,GAIC;MACuB,MAAA,eAAe;MAAqB,OAAA,eAAe;MAAwB,SAAA,eAAe;;IAMpH,GAAA,MAAA,CAAA,IAAA,UAAA,IAAA,GAAA,mBA8CiB,UAAA,MAAA,WA7CD,QAAA,UAAP,QAAG;KADZ,OAAA,UAAA,GAAA,YA8CiB,MAAA,cAAA,GA9CjB,WA8CiB;MA5Cd,KAAK,IAAI;MACT,OAAO,IAAI;MACX,UAAU,IAAI,YAAQ;KACf,GAAA,EAAA,SAAA,KAAA,GAAA,MAAA,QAAA,CAAQ,CAAA,EAAA,eAAkB,IAAI,OAAM,CAAA,GAAA;MAC5C,OAAA,EAAA,cAAA,2GAAA;MAKC,OAAgB,MAAA,EAAA,CAAE,CAAA,wGAAoV,QAAA,SAAI,OAAA,6BAAA,qBAAA,yEAAA,0CAAA,sBAAA,+GAAA,4DAAA;;MAkC3W,SAAA,cAAwF,CAAxF,mBAAwF,QAAxF,YAAwF,gBAAnB,IAAI,KAAK,GAAA,CAAA,CAAA,CAAA"}

package/dist/packages/primitives/segmented-control/src/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./SegmentedControl.vue";
+export type { SegmentedControlOption } from "./SegmentedControl.vue";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/segmented-control/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/segmented-control/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,YAAY,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/packages/primitives/segmented-control/src/index.js

@@ -0,0 +1,2 @@
+import SegmentedControl_default from "./SegmentedControl.js";
+export { SegmentedControl_default as default };