@ecoma-io/loom 0.4.0 → 0.5.0

package/dist/packages/primitives/meter/src/Meter.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,236 @@
+import { cn } from "../../../core/src/cn.js";
+import { useSplitAttrs } from "../../../core/src/attrs.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, resolveDynamicComponent, toDisplayString, unref, useId } from "vue";
+import { Check, CircleAlert, X } from "@lucide/vue";
+import { cva } from "class-variance-authority";
+//#region packages/primitives/meter/src/Meter.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id"];
+var _hoisted_2 = [
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuetext",
+	"aria-label",
+	"aria-labelledby"
+];
+var _hoisted_3 = [
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuetext",
+	"aria-label",
+	"aria-labelledby"
+];
+/**
+* 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 METER_LABELS = {
+	name: "Meter",
+	valueText: ({ value, max }) => `${value} of ${max}`,
+	optimal: "Optimal",
+	cautionary: "Caution",
+	critical: "Critical"
+};
+var meterVariants = cva("relative w-full overflow-hidden rounded-full bg-muted", {
+	variants: { size: {
+		sm: "h-1",
+		md: "h-2",
+		lg: "h-3"
+	} },
+	defaultVariants: { size: "md" }
+});
+var Meter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "Meter",
+	props: {
+		value: {},
+		min: { default: 0 },
+		max: { default: 100 },
+		low: {},
+		high: {},
+		optimum: {},
+		label: {},
+		ariaLabel: {},
+		ariaLabelledby: {},
+		size: { default: "md" },
+		threshold: {
+			type: Boolean,
+			default: false
+		},
+		showValue: {
+			type: Boolean,
+			default: false
+		},
+		labels: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const text = useLabels("meter", METER_LABELS, () => props.labels);
+		/** Track label text sizing, matching Progress's readout scale exactly. */
+		const VALUE_TEXT = {
+			sm: "text-micro",
+			md: "text-xs",
+			lg: "text-sm"
+		};
+		const { attrs, rest } = useSplitAttrs();
+		const labelElId = useId();
+		/** Clamped value, for the fill AND the aria attributes — never out of range. */
+		const clamped = computed(() => {
+			const v = props.value;
+			if (Number.isNaN(v)) return props.min;
+			return Math.min(Math.max(v, props.min), props.max);
+		});
+		/** Percentage 0–100, from the clamped value. */
+		const pct = computed(() => {
+			const range = props.max - props.min;
+			if (range <= 0) return 100;
+			return (clamped.value - props.min) / range * 100;
+		});
+		const band = computed(() => {
+			if (!props.threshold) return void 0;
+			let lo = props.low ?? props.min;
+			let hi = props.high ?? props.max;
+			lo = Math.min(Math.max(lo, props.min), props.max);
+			hi = Math.min(Math.max(hi, props.min), props.max);
+			if (lo > hi) {
+				lo = props.min;
+				hi = props.max;
+			}
+			const o = Math.min(Math.max(props.optimum ?? (props.min + props.max) / 2, props.min), props.max);
+			const v = clamped.value;
+			const optRegion = o < lo ? 0 : o <= hi ? 1 : 2;
+			const regionMap = optRegion === 0 ? {
+				optimal: 0,
+				cautionary: [1],
+				critical: 2
+			} : optRegion === 1 ? {
+				optimal: 1,
+				cautionary: [0, 2],
+				critical: null
+			} : {
+				optimal: 2,
+				cautionary: [1],
+				critical: 0
+			};
+			const valueRegion = v < lo ? 0 : v <= hi ? 1 : 2;
+			if (valueRegion === regionMap.optimal) return "optimal";
+			if (regionMap.cautionary.includes(valueRegion)) return "cautionary";
+			if (regionMap.critical === valueRegion) return "critical";
+			return "optimal";
+		});
+		/** The fill colour when threshold is on; stays primary otherwise. */
+		const fillClass = computed(() => {
+			if (!props.threshold) return "bg-primary";
+			const b = band.value;
+			if (b === "optimal") return "bg-success";
+			if (b === "cautionary") return "bg-warning";
+			return "bg-destructive";
+		});
+		/** The band cue word from labels. */
+		const cueWord = computed(() => {
+			if (!band.value) return "";
+			return text.value[band.value];
+		});
+		/** The band cue icon component. */
+		const cueIcon = computed(() => {
+			if (band.value === "optimal") return Check;
+			if (band.value === "cautionary") return CircleAlert;
+			return X;
+		});
+		/** The cue colour class — the `-text` token of the band, never the fill token:
+		* `--color-success` in dark is a fill lightness and fails text contrast. */
+		const cueColorClass = computed(() => {
+			if (band.value === "optimal") return "text-success-text";
+			if (band.value === "cautionary") return "text-warning-text";
+			return "text-destructive-text";
+		});
+		/** The fill indicator style — translateX slides the fill from right to left. */
+		const indicatorStyle = computed(() => ({
+			transition: "transform var(--duration-slow) var(--ease-out), background-color var(--duration-slow) var(--ease-out)",
+			transform: `translateX(${pct.value - 100}%)`
+		}));
+		/** aria-valuetext — localisable; never absent because the role is meaningless without it. */
+		const valuetext = computed(() => text.value.valueText({
+			value: clamped.value,
+			min: props.min,
+			max: props.max
+		}));
+		/**
+		* `label` is a content prop and always renders; `ariaLabel`/`ariaLabelledby`
+		* choose only where the NAME comes from. A caller passing both wants visible
+		* text under one name and a different announced name — silencing the visible
+		* text would make the pair unrepresentable. And because assistive tech reads
+		* `aria-labelledby` ahead of `aria-label`, whichever source loses must not
+		* emit its attribute at all: an `ariaLabel` beside a label-pointing
+		* `aria-labelledby` would be read past, not preferred.
+		*/
+		const ariaLabelAttr = computed(() => {
+			if (props.ariaLabelledby) return void 0;
+			if (props.ariaLabel) return props.ariaLabel;
+			if (props.label) return void 0;
+			return text.value.name;
+		});
+		const ariaLabelledbyAttr = computed(() => {
+			if (props.ariaLabelledby) return props.ariaLabelledby;
+			if (props.ariaLabel) return void 0;
+			if (props.label) return labelElId;
+		});
+		/** Whether the visible `label` text renders. */
+		const hasVisibleLabel = computed(() => !!props.label);
+		/** Whether the gauge row needs extra content beside the track. */
+		const hasRow = computed(() => props.showValue || props.threshold && band.value);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [hasVisibleLabel.value ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				id: unref(labelElId),
+				class: normalizeClass(unref(cn)("block text-sm font-medium text-foreground mb-1", VALUE_TEXT[__props.size]))
+			}, toDisplayString(__props.label), 11, _hoisted_1)) : createCommentVNode("", true), !hasRow.value ? (openBlock(), createElementBlock("div", mergeProps({
+				key: 1,
+				role: "meter",
+				"aria-valuenow": clamped.value,
+				"aria-valuemin": __props.min,
+				"aria-valuemax": __props.max,
+				"aria-valuetext": valuetext.value,
+				"aria-label": ariaLabelAttr.value,
+				"aria-labelledby": ariaLabelledbyAttr.value
+			}, unref(rest), { class: unref(cn)(unref(meterVariants)({ size: __props.size }), unref(attrs).class) }), [createElementVNode("div", {
+				class: normalizeClass(unref(cn)("h-full rounded-full", fillClass.value)),
+				style: normalizeStyle(indicatorStyle.value)
+			}, null, 6)], 16, _hoisted_2)) : (openBlock(), createElementBlock("div", {
+				key: 2,
+				class: normalizeClass(unref(cn)("flex w-full items-center gap-3", unref(attrs).class))
+			}, [createElementVNode("div", mergeProps({
+				role: "meter",
+				"aria-valuenow": clamped.value,
+				"aria-valuemin": __props.min,
+				"aria-valuemax": __props.max,
+				"aria-valuetext": valuetext.value,
+				"aria-label": ariaLabelAttr.value,
+				"aria-labelledby": ariaLabelledbyAttr.value
+			}, unref(rest), { class: unref(cn)(unref(meterVariants)({ size: __props.size }), "w-auto min-w-0 flex-1") }), [createElementVNode("div", {
+				class: normalizeClass(unref(cn)("h-full rounded-full", fillClass.value)),
+				style: normalizeStyle(indicatorStyle.value)
+			}, null, 6)], 16, _hoisted_3), createElementVNode("div", {
+				"aria-hidden": "true",
+				class: normalizeClass(unref(cn)("flex items-center gap-2 shrink-0"))
+			}, [__props.showValue ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: normalizeClass(unref(cn)("tabular w-10 text-right text-muted-foreground", VALUE_TEXT[__props.size]))
+			}, toDisplayString(valuetext.value), 3)) : createCommentVNode("", true), __props.threshold && band.value ? (openBlock(), createElementBlock("span", {
+				key: 1,
+				class: normalizeClass(unref(cn)("flex items-center gap-1 whitespace-nowrap", cueColorClass.value, VALUE_TEXT[__props.size]))
+			}, [(openBlock(), createBlock(resolveDynamicComponent(cueIcon.value), {
+				class: "h-3.5 w-3.5",
+				"aria-hidden": "true"
+			})), createElementVNode("span", null, toDisplayString(cueWord.value), 1)], 2)) : createCommentVNode("", true)], 2)], 2))], 64);
+		};
+	}
+});
+//#endregion
+export { METER_LABELS, Meter_vue_vue_type_script_setup_true_lang_default as default, meterVariants };
+
+//# sourceMappingURL=Meter.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/meter/src/Meter.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Meter.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/meter/src/Meter.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MeterLabels } from \"@ecoma-io/loom-labels\";\nimport { cva } from \"class-variance-authority\";\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 METER_LABELS: MeterLabels = {\n  name: \"Meter\",\n  valueText: ({ value, max }) => `${value} of ${max}`,\n  optimal: \"Optimal\",\n  cautionary: \"Caution\",\n  critical: \"Critical\",\n};\n\n/**\n * The track's thickness, the same scale as Progress — a meter is a gauge, not a\n * form control, so it stays a stroke rather than aligning with input height.\n */\nexport type MeterSize = \"sm\" | \"md\" | \"lg\";\n\nexport const meterVariants = 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<MeterSize, string>,\n  },\n  defaultVariants: { size: \"md\" },\n});\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, useId } from \"vue\";\nimport { Check, CircleAlert, X } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Meter — a scalar capacity gauge on the WAI-ARIA meter role, visually a sibling\n * of Progress (same stroke scale, track/fill anatomy). Renders a measured\n * quantity against a known capacity — disk usage, budget consumption, seat\n * allocation — things that are not tasks and should never say \"loading.\"\n *\n * Built directly on `<div role=\"meter\">` rather than a headless component: the\n * ARIA meter role carries the same contract as the HTML meter element (min, max,\n * value, low, high, optimum) and a headless abstraction would add nothing but\n * an extra dependency — Progress uses Reka UI because progressbar's indeterminate\n * animation requires real DOM transitions Meter does not need.\n *\n * The accessible name is mandatory: a meter without a name is a number with no\n * referent. Four sources, resolved in order:\n * 1. `ariaLabelledby` (external element)\n * 2. `ariaLabel` (explicit string, no visible text)\n * 3. `label` (visible text, same string as the name)\n * 4. `text.name` (the labels-seam fallback — guaranteed non-empty)\n *\n * A `value` above `max` paints the bar full but `aria-valuenow` reports the\n * clamped value, because a spoken number outside the declared range is a lie\n * — the Progress lesson, carried forward.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The measured amount, clamped into [min, max] for both the fill and the announced value. */\n    value: number;\n    /** The value at which the gauge reads 0% full. */\n    min?: number;\n    /** The value at which the gauge reads 100% full. */\n    max?: number;\n    /** Low threshold — the boundary between the low and medium regions (HTML meter semantics). */\n    low?: number;\n    /** High threshold — the boundary between the medium and high regions (HTML meter semantics). */\n    high?: number;\n    /** The optimal value; decides which region is the good one. Defaults to the midpoint. */\n    optimum?: number;\n    /** Visible text that also supplies the accessible name when no ariaLabel/ariaLabelledby is set. */\n    label?: string;\n    /** Accessible name for the gauge, in place of a visible label. */\n    ariaLabel?: string;\n    /** Accessible name sourced from another element's id, in place of `ariaLabel`/`label`. */\n    ariaLabelledby?: string;\n    /** Track thickness. Its own scale, not the control-height scale — a gauge is a stroke. */\n    size?: MeterSize;\n    /** Opt-in band recolouring (success/warning/destructive) with a redundant non-colour cue per band. */\n    threshold?: boolean;\n    /** Print the localised value text beside the track. Hidden from AT — the role already announces it. */\n    showValue?: boolean;\n    /**\n     * How the gauge speaks, as any subset of `MeterLabels` — the rest stay as\n     * the host's `provideLoomLabels` vocabulary left them, and then as Loom's\n     * English.\n     */\n    labels?: LabelOverrides<MeterLabels>;\n  }>(),\n  {\n    min: 0,\n    max: 100,\n    size: \"md\",\n    threshold: false,\n    showValue: false,\n  },\n);\n\nconst text = useLabels(\"meter\", METER_LABELS, () => props.labels);\n\n/** Track label text sizing, matching Progress's readout scale exactly. */\nconst VALUE_TEXT = {\n  sm: \"text-micro\",\n  md: \"text-xs\",\n  lg: \"text-sm\",\n} satisfies Record<MeterSize, string>;\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest } = useSplitAttrs();\nconst labelElId = useId();\n\n// ---------------------------------------------------------------------------\n// Value clamping — the Progress lesson: a spoken value outside [min, max] is a lie.\n// ---------------------------------------------------------------------------\n\n/** Clamped value, for the fill AND the aria attributes — never out of range. */\nconst clamped = computed<number>(() => {\n  const v = props.value;\n  if (Number.isNaN(v)) return props.min;\n  return Math.min(Math.max(v, props.min), props.max);\n});\n\n/** Percentage 0–100, from the clamped value. */\nconst pct = computed<number>(() => {\n  const range = props.max - props.min;\n  if (range <= 0) return 100;\n  return ((clamped.value - props.min) / range) * 100;\n});\n\n// ---------------------------------------------------------------------------\n// Band logic — HTML meter element's three-quality model, exactly.\n//\n// Three regions: low [min, low), medium [low, high], high (high, max].\n// The optimum point selects which region is preferred, and how the others rank.\n//\n// Per HTML spec §4.10.16:\n//   optimum in low    → low=preferred, medium=suboptimal, high=even-less-good\n//   optimum in medium → medium=preferred, low=suboptimal, high=suboptimal\n//   optimum in high   → high=preferred, medium=suboptimal, low=even-less-good\n//\n// When a region is \"even less good\" it maps to critical; \"suboptimal\" maps\n// to cautionary. No critical band exists when optimum is in the medium region\n// (both extremes are equally suboptimal).\n// ---------------------------------------------------------------------------\n\ntype Band = \"optimal\" | \"cautionary\" | \"critical\";\n\nconst band = computed<Band | undefined>(() => {\n  if (!props.threshold) return undefined;\n\n  let lo = props.low ?? props.min;\n  let hi = props.high ?? props.max;\n\n  // Clamp both boundaries into [min, max], then reject an inverted pair the\n  // way the HTML meter element does: treat both as unset rather than build a\n  // region model out of crossed boundaries.\n  lo = Math.min(Math.max(lo, props.min), props.max);\n  hi = Math.min(Math.max(hi, props.min), props.max);\n  if (lo > hi) {\n    lo = props.min;\n    hi = props.max;\n  }\n\n  const o = Math.min(Math.max(props.optimum ?? (props.min + props.max) / 2, props.min), props.max);\n  const v = clamped.value;\n\n  // Determine which region contains the optimum.\n  // Boundaries: low < value < high belongs to medium; low ≤ optimum ≤ high is medium.\n  // Region 0: [min, lo)   Region 1: [lo, hi]   Region 2: (hi, max]\n  const optRegion = o < lo ? 0 : o <= hi ? 1 : 2;\n\n  // Map regions to qualities per the table.\n  const regionMap: { optimal: number; cautionary: number[]; critical: number | null } =\n    optRegion === 0\n      ? { optimal: 0, cautionary: [1], critical: 2 }\n      : optRegion === 1\n        ? { optimal: 1, cautionary: [0, 2], critical: null }\n        : { optimal: 2, cautionary: [1], critical: 0 };\n\n  // Determine which region the current value falls into.\n  const valueRegion = v < lo ? 0 : v <= hi ? 1 : 2;\n\n  if (valueRegion === regionMap.optimal) return \"optimal\";\n  if (regionMap.cautionary.includes(valueRegion)) return \"cautionary\";\n  if (regionMap.critical === valueRegion) return \"critical\";\n  return \"optimal\"; // fallback — should not be reached\n});\n\n/** The fill colour when threshold is on; stays primary otherwise. */\nconst fillClass = computed(() => {\n  if (!props.threshold) return \"bg-primary\";\n  const b = band.value;\n  if (b === \"optimal\") return \"bg-success\";\n  if (b === \"cautionary\") return \"bg-warning\";\n  return \"bg-destructive\";\n});\n\n/** The band cue word from labels. */\nconst cueWord = computed(() => {\n  if (!band.value) return \"\";\n  return text.value[band.value];\n});\n\n/** The band cue icon component. */\nconst cueIcon = computed(() => {\n  if (band.value === \"optimal\") return Check;\n  if (band.value === \"cautionary\") return CircleAlert;\n  return X;\n});\n\n/** The cue colour class — the `-text` token of the band, never the fill token:\n * `--color-success` in dark is a fill lightness and fails text contrast. */\nconst cueColorClass = computed(() => {\n  if (band.value === \"optimal\") return \"text-success-text\";\n  if (band.value === \"cautionary\") return \"text-warning-text\";\n  return \"text-destructive-text\";\n});\n\n/** The fill indicator style — translateX slides the fill from right to left. */\nconst indicatorStyle = computed(() => ({\n  transition:\n    \"transform var(--duration-slow) var(--ease-out), background-color var(--duration-slow) var(--ease-out)\",\n  transform: `translateX(${pct.value - 100}%)`,\n}));\n\n/** aria-valuetext — localisable; never absent because the role is meaningless without it. */\nconst valuetext = computed(() =>\n  text.value.valueText({ value: clamped.value, min: props.min, max: props.max }),\n);\n\n// ---------------------------------------------------------------------------\n// Accessible name resolution — four sources, in precedence order.\n// ---------------------------------------------------------------------------\n\n/**\n * `label` is a content prop and always renders; `ariaLabel`/`ariaLabelledby`\n * choose only where the NAME comes from. A caller passing both wants visible\n * text under one name and a different announced name — silencing the visible\n * text would make the pair unrepresentable. And because assistive tech reads\n * `aria-labelledby` ahead of `aria-label`, whichever source loses must not\n * emit its attribute at all: an `ariaLabel` beside a label-pointing\n * `aria-labelledby` would be read past, not preferred.\n */\nconst ariaLabelAttr = computed(() => {\n  if (props.ariaLabelledby) return undefined;\n  if (props.ariaLabel) return props.ariaLabel;\n  if (props.label) return undefined; // named through the span's id instead\n  return text.value.name; // the seam fallback — a name is never absent\n});\n\nconst ariaLabelledbyAttr = computed(() => {\n  if (props.ariaLabelledby) return props.ariaLabelledby;\n  if (props.ariaLabel) return undefined; // ariaLabel wins the name\n  if (props.label) return labelElId;\n  return undefined;\n});\n\n/** Whether the visible `label` text renders. */\nconst hasVisibleLabel = computed(() => !!props.label);\n\n/** Whether the gauge row needs extra content beside the track. */\nconst hasRow = computed(() => props.showValue || (props.threshold && band.value));\n</script>\n\n<template>\n  <!-- Visible label — only when `label` is set and no ariaLabel/ariaLabelledby overrides it.\n       Rendered as a <span> rather than <label> because a div[role=\"meter\"] is not a\n       labelable element; the association is through aria-labelledby pointing at the span's id. -->\n  <span\n    v-if=\"hasVisibleLabel\"\n    :id=\"labelElId\"\n    :class=\"cn('block text-sm font-medium text-foreground mb-1', VALUE_TEXT[size])\"\n  >\n    {{ label }}\n  </span>\n\n  <!-- Branch 1: bare track — nothing beside it, no wrapper. Mirrors Progress's\n       default branch: the component's box is the track itself, and it keeps\n       the exact sizing it had before `showValue`/`threshold` existed. -->\n  <div\n    v-if=\"!hasRow\"\n    role=\"meter\"\n    :aria-valuenow=\"clamped\"\n    :aria-valuemin=\"min\"\n    :aria-valuemax=\"max\"\n    :aria-valuetext=\"valuetext\"\n    :aria-label=\"ariaLabelAttr\"\n    :aria-labelledby=\"ariaLabelledbyAttr\"\n    v-bind=\"rest\"\n    :class=\"cn(meterVariants({ size }), attrs.class as string)\"\n  >\n    <div :class=\"cn('h-full rounded-full', fillClass)\" :style=\"indicatorStyle\" />\n  </div>\n\n  <!-- Branch 2: gauge row with cue/readout — a flex row so the track and the\n       side content share a single box. `class` from the caller lands on this\n       row (the outermost box the caller sees), and everything else lands on the\n       meter element through `rest`. -->\n  <div v-else :class=\"cn('flex w-full items-center gap-3', attrs.class as string)\">\n    <div\n      role=\"meter\"\n      :aria-valuenow=\"clamped\"\n      :aria-valuemin=\"min\"\n      :aria-valuemax=\"max\"\n      :aria-valuetext=\"valuetext\"\n      :aria-label=\"ariaLabelAttr\"\n      :aria-labelledby=\"ariaLabelledbyAttr\"\n      v-bind=\"rest\"\n      :class=\"cn(meterVariants({ size }), 'w-auto min-w-0 flex-1')\"\n    >\n      <div :class=\"cn('h-full rounded-full', fillClass)\" :style=\"indicatorStyle\" />\n    </div>\n\n    <!-- Value readout + band cue, aria-hidden (the meter role already announces the\n         value via aria-valuetext, and the band is derivable from it). Fixed width so\n         the row does not resize as the digits change. -->\n    <div aria-hidden=\"true\" :class=\"cn('flex items-center gap-2 shrink-0')\">\n      <span\n        v-if=\"showValue\"\n        :class=\"cn('tabular w-10 text-right text-muted-foreground', VALUE_TEXT[size])\"\n      >\n        {{ valuetext }}\n      </span>\n      <span\n        v-if=\"threshold && band\"\n        :class=\"cn('flex items-center gap-1 whitespace-nowrap', cueColorClass, VALUE_TEXT[size])\"\n      >\n        <component :is=\"cueIcon\" class=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n        <span>{{ cueWord }}</span>\n      </span>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+export { default, meterVariants, METER_LABELS } from "./Meter.vue";
+export type { MeterSize } from "./Meter.vue";
+export type { MeterLabels } from "../../../labels/src/index";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,3 @@
+import { METER_LABELS, meterVariants } from "./Meter.vue_vue_type_script_setup_true_lang.js";
+import Meter_default from "./Meter.js";
+export { METER_LABELS, Meter_default as default, meterVariants };

package/dist/packages/primitives/navigation-menu/src/NavigationMenu.js

@@ -0,0 +1,7 @@
+import NavigationMenu_vue_vue_type_script_setup_true_lang_default from "./NavigationMenu.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/navigation-menu/src/NavigationMenu.vue
+var NavigationMenu_default = NavigationMenu_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { NavigationMenu_default as default };
+
+//# sourceMappingURL=NavigationMenu.js.map

package/dist/packages/primitives/navigation-menu/src/NavigationMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../../../packages/primitives/navigation-menu/src/NavigationMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A navigation link shown inside a dropdown panel. The list is data rather than\n * markup because the primitive stays free of routing logic — the host provides\n * `href` values and decides what navigation means.\n */\nexport interface NavigationMenuLink {\n  /** Visible label. */\n  label: string;\n  /** Link target. */\n  href: string;\n  /** Whether this link is the current page. */\n  active?: boolean;\n  /** Optional description shown below the label. */\n  description?: string;\n  /** Disabled state. */\n  disabled?: boolean;\n}\n\n/**\n * One top-level navigation entry. An item with `children` opens a dropdown\n * panel; an item without them is a plain link.\n */\nexport interface NavigationMenuItem {\n  /** Visible label for the trigger button. */\n  label: string;\n  /** Unique key identifying this item. */\n  value: string;\n  /** The link target. When set, this item is a simple link rather than a dropdown trigger. */\n  href?: string;\n  /** Whether this item is currently active (shows aria-current). */\n  active?: boolean;\n  /** Nested navigation items shown in a dropdown panel. */\n  children?: NavigationMenuLink[];\n  /** Disabled state. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  NavigationMenuRoot,\n  NavigationMenuList,\n  NavigationMenuItem as RekaNavigationMenuItem,\n  NavigationMenuTrigger,\n  NavigationMenuContent,\n  NavigationMenuLink as RekaNavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { listStaggerDelay } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * NavigationMenu — the WAI-ARIA navigation menu pattern: a landmark containing\n * triggers that open dropdown panels of navigation links.\n *\n * Unlike `DropdownMenu` (button → command list) or `Menubar` (horizontal strip\n * of command menus), this component is a site-navigation landmark. Its panels\n * contain links, not actions, and the whole structure is wrapped in a `<nav>`\n * landmark.\n *\n * Items are data rather than markup. A top-level item with `children` opens a\n * dropdown panel; one without renders as a direct link. The keyboard model\n * follows the APG Navigation Menu pattern: roving tabindex across triggers,\n * Left/Right arrows move between triggers, ArrowDown opens, Escape closes.\n */\nwithDefaults(\n  defineProps<{\n    /** The top-level navigation items, in order. */\n    items: NavigationMenuItem[];\n    /** Layout direction of the trigger bar. */\n    orientation?: \"horizontal\" | \"vertical\";\n    /** Reading direction. Mirrors arrow keys when right-to-left. */\n    dir?: \"ltr\" | \"rtl\";\n    /** Drive the open trigger from the host; omit it and the menu owns its own state. */\n    modelValue?: string | undefined;\n    /** Accessible label for the nav landmark. */\n    ariaLabel?: string;\n  }>(),\n  // `modelValue: undefined` is load-bearing — it keeps the uncontrolled third\n  // state reachable past Vue's absent-Boolean casting. `optional()` in the\n  // template is the other half.\n  { modelValue: undefined, orientation: \"horizontal\", ariaLabel: \"Navigation\" },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n</script>\n\n<template>\n  <nav :aria-label=\"ariaLabel\" :dir=\"dir\">\n    <NavigationMenuRoot\n      :orientation=\"orientation\"\n      v-bind=\"optional({ modelValue, dir })\"\n      class=\"relative\"\n      @update:model-value=\"$emit('update:modelValue', $event)\"\n    >\n      <NavigationMenuList\n        :class=\"\n          cn('flex items-center gap-0.5', orientation === 'vertical' && 'flex-col items-stretch')\n        \"\n      >\n        <RekaNavigationMenuItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value\">\n          <!-- Items with children get a trigger button that opens a panel. -->\n          <NavigationMenuTrigger\n            v-if=\"item.children && item.children.length > 0\"\n            :disabled=\"item.disabled ?? false\"\n            aria-haspopup=\"menu\"\n            :class=\"\n              cn(\n                'min-h-6 rounded-sm px-2 py-1 text-sm text-muted-foreground transition-colors duration-fast ease-out',\n                'hover:bg-subtle hover:text-foreground',\n                'focus-visible:bg-subtle focus-visible:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n                'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n                'data-[state=open]:bg-subtle data-[state=open]:text-foreground',\n              )\n            \"\n          >\n            {{ item.label }}\n          </NavigationMenuTrigger>\n\n          <!-- Simple link items wrapped in NavigationMenuLink for roving focus. -->\n          <RekaNavigationMenuLink\n            v-else\n            v-bind=\"optional({ asChild: true, active: item.active })\"\n            :class=\"\n              cn(\n                'min-h-6 rounded-sm px-2 py-1 text-sm text-muted-foreground transition-colors duration-fast ease-out',\n                'hover:bg-subtle hover:text-foreground',\n                'focus-visible:bg-subtle focus-visible:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n                item.active && 'bg-primary-muted text-primary-text',\n                item.disabled && 'pointer-events-none text-muted-foreground',\n              )\n            \"\n          >\n            <a\n              :href=\"item.href\"\n              :aria-current=\"item.active ? 'page' : undefined\"\n              :aria-disabled=\"item.disabled || undefined\"\n              :tabindex=\"item.disabled ? -1 : undefined\"\n            >\n              {{ item.label }}\n            </a>\n          </RekaNavigationMenuLink>\n\n          <NavigationMenuContent\n            v-if=\"item.children && item.children.length > 0\"\n            :class=\"\n              cn(\n                'z-overlay min-w-[16rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none',\n                'data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out',\n              )\n            \"\n            style=\"transform-origin: var(--reka-popper-transform-origin)\"\n          >\n            <div class=\"flex flex-col gap-1 p-1\">\n              <a\n                v-for=\"(link, i) in item.children\"\n                :key=\"link.href\"\n                :href=\"link.href\"\n                :aria-current=\"link.active ? 'page' : undefined\"\n                :aria-disabled=\"link.disabled || undefined\"\n                :tabindex=\"link.disabled ? -1 : undefined\"\n                :style=\"{ animationDelay: listStaggerDelay(i) }\"\n                :class=\"\n                  cn(\n                    'block rounded-sm px-2 py-1.5 text-sm text-foreground no-underline outline-none',\n                    'transition-colors duration-fast ease-out',\n                    'hover:bg-subtle',\n                    'focus-visible:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n                    link.active && 'bg-primary-muted text-primary-text',\n                    link.disabled && 'pointer-events-none text-muted-foreground',\n                    'animate-fade-rise',\n                  )\n                \"\n              >\n                <div class=\"font-medium\">{{ link.label }}</div>\n                <div v-if=\"link.description\" class=\"text-xs text-muted-foreground\">\n                  {{ link.description }}\n                </div>\n              </a>\n            </div>\n          </NavigationMenuContent>\n        </RekaNavigationMenuItem>\n      </NavigationMenuList>\n\n      <!-- Animated indicator bar (horizontal mode only). -->\n      <NavigationMenuIndicator\n        v-if=\"orientation === 'horizontal'\"\n        :class=\"\n          cn(\n            'top-full z-10 h-0.5 bg-primary',\n            'data-[state=hidden]:animate-fade-fall data-[state=visible]:animate-fade-rise',\n          )\n        \"\n      />\n\n      <NavigationMenuViewport\n        :class=\"cn('data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out')\"\n        style=\"transform-origin: var(--reka-navigation-menu-viewport-transform-origin)\"\n      />\n    </NavigationMenuRoot>\n  </nav>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/navigation-menu/src/NavigationMenu.vue.d.ts

@@ -0,0 +1,69 @@
+/**
+ * A navigation link shown inside a dropdown panel. The list is data rather than
+ * markup because the primitive stays free of routing logic — the host provides
+ * `href` values and decides what navigation means.
+ */
+export interface NavigationMenuLink {
+    /** Visible label. */
+    label: string;
+    /** Link target. */
+    href: string;
+    /** Whether this link is the current page. */
+    active?: boolean;
+    /** Optional description shown below the label. */
+    description?: string;
+    /** Disabled state. */
+    disabled?: boolean;
+}
+/**
+ * One top-level navigation entry. An item with `children` opens a dropdown
+ * panel; an item without them is a plain link.
+ */
+export interface NavigationMenuItem {
+    /** Visible label for the trigger button. */
+    label: string;
+    /** Unique key identifying this item. */
+    value: string;
+    /** The link target. When set, this item is a simple link rather than a dropdown trigger. */
+    href?: string;
+    /** Whether this item is currently active (shows aria-current). */
+    active?: boolean;
+    /** Nested navigation items shown in a dropdown panel. */
+    children?: NavigationMenuLink[];
+    /** Disabled state. */
+    disabled?: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** The top-level navigation items, in order. */
+    items: NavigationMenuItem[];
+    /** Layout direction of the trigger bar. */
+    orientation?: "horizontal" | "vertical";
+    /** Reading direction. Mirrors arrow keys when right-to-left. */
+    dir?: "ltr" | "rtl";
+    /** Drive the open trigger from the host; omit it and the menu owns its own state. */
+    modelValue?: string | undefined;
+    /** Accessible label for the nav landmark. */
+    ariaLabel?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** The top-level navigation items, in order. */
+    items: NavigationMenuItem[];
+    /** Layout direction of the trigger bar. */
+    orientation?: "horizontal" | "vertical";
+    /** Reading direction. Mirrors arrow keys when right-to-left. */
+    dir?: "ltr" | "rtl";
+    /** Drive the open trigger from the host; omit it and the menu owns its own state. */
+    modelValue?: string | undefined;
+    /** Accessible label for the nav landmark. */
+    ariaLabel?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: (value: string) => any;
+}>, {
+    modelValue: string | undefined;
+    ariaLabel: string;
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=NavigationMenu.vue.d.ts.map

package/dist/packages/primitives/navigation-menu/src/NavigationMenu.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationMenu.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/navigation-menu/src/NavigationMenu.vue"],"names":[],"mappings":"AA+NA;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,4FAA4F;IAC5F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAChC,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;wBACoB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAgBd,gDAAgD;WACzC,kBAAkB,EAAE;IAC3B,2CAA2C;kBAC7B,YAAY,GAAG,UAAU;IACvC,gEAAgE;UAC1D,KAAK,GAAG,KAAK;IACnB,qFAAqF;iBACxE,MAAM,GAAG,SAAS;IAC/B,6CAA6C;gBACjC,MAAM;;;;IATlB,gDAAgD;WACzC,kBAAkB,EAAE;IAC3B,2CAA2C;kBAC7B,YAAY,GAAG,UAAU;IACvC,gEAAgE;UAC1D,KAAK,GAAG,KAAK;IACnB,qFAAqF;iBACxE,MAAM,GAAG,SAAS;IAC/B,6CAA6C;gBACjC,MAAM;;;;gBAFL,MAAM,GAAG,SAAS;eAEnB,MAAM;iBANJ,YAAY,GAAG,UAAU;6EA0TvC,CAAC"}

package/dist/packages/primitives/navigation-menu/src/NavigationMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,118 @@
+import { cn } from "../../../core/src/cn.js";
+import { optional } from "../../../core/src/props.js";
+import { listStaggerDelay } from "../../../core/src/motion.js";
+import "../../../core/src/index.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+import { NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuTrigger, NavigationMenuViewport } from "reka-ui";
+//#region packages/primitives/navigation-menu/src/NavigationMenu.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label", "dir"];
+var _hoisted_2 = [
+	"href",
+	"aria-current",
+	"aria-disabled",
+	"tabindex"
+];
+var _hoisted_3 = { class: "flex flex-col gap-1 p-1" };
+var _hoisted_4 = [
+	"href",
+	"aria-current",
+	"aria-disabled",
+	"tabindex"
+];
+var _hoisted_5 = { class: "font-medium" };
+var _hoisted_6 = {
+	key: 0,
+	class: "text-xs text-muted-foreground"
+};
+var NavigationMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "NavigationMenu",
+	props: {
+		items: {},
+		orientation: { default: "horizontal" },
+		dir: {},
+		modelValue: { default: void 0 },
+		ariaLabel: { default: "Navigation" }
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("nav", {
+				"aria-label": __props.ariaLabel,
+				dir: __props.dir
+			}, [createVNode(unref(NavigationMenuRoot), mergeProps({ orientation: __props.orientation }, unref(optional)({
+				modelValue: __props.modelValue,
+				dir: __props.dir
+			}), {
+				class: "relative",
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event))
+			}), {
+				default: withCtx(() => [
+					createVNode(unref(NavigationMenuList), { class: normalizeClass(unref(cn)("flex items-center gap-0.5", __props.orientation === "vertical" && "flex-col items-stretch")) }, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+							return openBlock(), createBlock(unref(NavigationMenuItem), {
+								key: item.value,
+								value: item.value
+							}, {
+								default: withCtx(() => [item.children && item.children.length > 0 ? (openBlock(), createBlock(unref(NavigationMenuTrigger), {
+									key: 0,
+									disabled: item.disabled ?? false,
+									"aria-haspopup": "menu",
+									class: normalizeClass(unref(cn)("min-h-6 rounded-sm px-2 py-1 text-sm text-muted-foreground transition-colors duration-fast ease-out", "hover:bg-subtle hover:text-foreground", "focus-visible:bg-subtle focus-visible:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", "data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground", "data-[state=open]:bg-subtle data-[state=open]:text-foreground"))
+								}, {
+									default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1)]),
+									_: 2
+								}, 1032, ["disabled", "class"])) : (openBlock(), createBlock(unref(NavigationMenuLink), mergeProps({
+									key: 1,
+									ref_for: true
+								}, unref(optional)({
+									asChild: true,
+									active: item.active
+								}), { class: unref(cn)("min-h-6 rounded-sm px-2 py-1 text-sm text-muted-foreground transition-colors duration-fast ease-out", "hover:bg-subtle hover:text-foreground", "focus-visible:bg-subtle focus-visible:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", item.active && "bg-primary-muted text-primary-text", item.disabled && "pointer-events-none text-muted-foreground") }), {
+									default: withCtx(() => [createElementVNode("a", {
+										href: item.href,
+										"aria-current": item.active ? "page" : void 0,
+										"aria-disabled": item.disabled || void 0,
+										tabindex: item.disabled ? -1 : void 0
+									}, toDisplayString(item.label), 9, _hoisted_2)]),
+									_: 2
+								}, 1040, ["class"])), item.children && item.children.length > 0 ? (openBlock(), createBlock(unref(NavigationMenuContent), {
+									key: 2,
+									class: normalizeClass(unref(cn)("z-overlay min-w-[16rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none", "data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out")),
+									style: { "transform-origin": "var(--reka-popper-transform-origin)" }
+								}, {
+									default: withCtx(() => [createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(item.children, (link, i) => {
+										return openBlock(), createElementBlock("a", {
+											key: link.href,
+											href: link.href,
+											"aria-current": link.active ? "page" : void 0,
+											"aria-disabled": link.disabled || void 0,
+											tabindex: link.disabled ? -1 : void 0,
+											style: normalizeStyle({ animationDelay: unref(listStaggerDelay)(i) }),
+											class: normalizeClass(unref(cn)("block rounded-sm px-2 py-1.5 text-sm text-foreground no-underline outline-none", "transition-colors duration-fast ease-out", "hover:bg-subtle", "focus-visible:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", link.active && "bg-primary-muted text-primary-text", link.disabled && "pointer-events-none text-muted-foreground", "animate-fade-rise"))
+										}, [createElementVNode("div", _hoisted_5, toDisplayString(link.label), 1), link.description ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(link.description), 1)) : createCommentVNode("", true)], 14, _hoisted_4);
+									}), 128))])]),
+									_: 2
+								}, 1032, ["class"])) : createCommentVNode("", true)]),
+								_: 2
+							}, 1032, ["value"]);
+						}), 128))]),
+						_: 1
+					}, 8, ["class"]),
+					__props.orientation === "horizontal" ? (openBlock(), createBlock(unref(NavigationMenuIndicator), {
+						key: 0,
+						class: normalizeClass(unref(cn)("top-full z-10 h-0.5 bg-primary", "data-[state=hidden]:animate-fade-fall data-[state=visible]:animate-fade-rise"))
+					}, null, 8, ["class"])) : createCommentVNode("", true),
+					createVNode(unref(NavigationMenuViewport), {
+						class: normalizeClass(unref(cn)("data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out")),
+						style: { "transform-origin": "var(--reka-navigation-menu-viewport-transform-origin)" }
+					}, null, 8, ["class"])
+				]),
+				_: 1
+			}, 16, ["orientation"])], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { NavigationMenu_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=NavigationMenu.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/navigation-menu/src/NavigationMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationMenu.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../../packages/primitives/navigation-menu/src/NavigationMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A navigation link shown inside a dropdown panel. The list is data rather than\n * markup because the primitive stays free of routing logic — the host provides\n * `href` values and decides what navigation means.\n */\nexport interface NavigationMenuLink {\n  /** Visible label. */\n  label: string;\n  /** Link target. */\n  href: string;\n  /** Whether this link is the current page. */\n  active?: boolean;\n  /** Optional description shown below the label. */\n  description?: string;\n  /** Disabled state. */\n  disabled?: boolean;\n}\n\n/**\n * One top-level navigation entry. An item with `children` opens a dropdown\n * panel; an item without them is a plain link.\n */\nexport interface NavigationMenuItem {\n  /** Visible label for the trigger button. */\n  label: string;\n  /** Unique key identifying this item. */\n  value: string;\n  /** The link target. When set, this item is a simple link rather than a dropdown trigger. */\n  href?: string;\n  /** Whether this item is currently active (shows aria-current). */\n  active?: boolean;\n  /** Nested navigation items shown in a dropdown panel. */\n  children?: NavigationMenuLink[];\n  /** Disabled state. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  NavigationMenuRoot,\n  NavigationMenuList,\n  NavigationMenuItem as RekaNavigationMenuItem,\n  NavigationMenuTrigger,\n  NavigationMenuContent,\n  NavigationMenuLink as RekaNavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { listStaggerDelay } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * NavigationMenu — the WAI-ARIA navigation menu pattern: a landmark containing\n * triggers that open dropdown panels of navigation links.\n *\n * Unlike `DropdownMenu` (button → command list) or `Menubar` (horizontal strip\n * of command menus), this component is a site-navigation landmark. Its panels\n * contain links, not actions, and the whole structure is wrapped in a `<nav>`\n * landmark.\n *\n * Items are data rather than markup. A top-level item with `children` opens a\n * dropdown panel; one without renders as a direct link. The keyboard model\n * follows the APG Navigation Menu pattern: roving tabindex across triggers,\n * Left/Right arrows move between triggers, ArrowDown opens, Escape closes.\n */\nwithDefaults(\n  defineProps<{\n    /** The top-level navigation items, in order. */\n    items: NavigationMenuItem[];\n    /** Layout direction of the trigger bar. */\n    orientation?: \"horizontal\" | \"vertical\";\n    /** Reading direction. Mirrors arrow keys when right-to-left. */\n    dir?: \"ltr\" | \"rtl\";\n    /** Drive the open trigger from the host; omit it and the menu owns its own state. */\n    modelValue?: string | undefined;\n    /** Accessible label for the nav landmark. */\n    ariaLabel?: string;\n  }>(),\n  // `modelValue: undefined` is load-bearing — it keeps the uncontrolled third\n  // state reachable past Vue's absent-Boolean casting. `optional()` in the\n  // template is the other half.\n  { modelValue: undefined, orientation: \"horizontal\", ariaLabel: \"Navigation\" },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n</script>\n\n<template>\n  <nav :aria-label=\"ariaLabel\" :dir=\"dir\">\n    <NavigationMenuRoot\n      :orientation=\"orientation\"\n      v-bind=\"optional({ modelValue, dir })\"\n      class=\"relative\"\n      @update:model-value=\"$emit('update:modelValue', $event)\"\n    >\n      <NavigationMenuList\n        :class=\"\n          cn('flex items-center gap-0.5', orientation === 'vertical' && 'flex-col items-stretch')\n        \"\n      >\n        <RekaNavigationMenuItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value\">\n          <!-- Items with children get a trigger button that opens a panel. -->\n          <NavigationMenuTrigger\n            v-if=\"item.children && item.children.length > 0\"\n            :disabled=\"item.disabled ?? false\"\n            aria-haspopup=\"menu\"\n            :class=\"\n              cn(\n                'min-h-6 rounded-sm px-2 py-1 text-sm text-muted-foreground transition-colors duration-fast ease-out',\n                'hover:bg-subtle hover:text-foreground',\n                'focus-visible:bg-subtle focus-visible:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n                'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n                'data-[state=open]:bg-subtle data-[state=open]:text-foreground',\n              )\n            \"\n          >\n            {{ item.label }}\n          </NavigationMenuTrigger>\n\n          <!-- Simple link items wrapped in NavigationMenuLink for roving focus. -->\n          <RekaNavigationMenuLink\n            v-else\n            v-bind=\"optional({ asChild: true, active: item.active })\"\n            :class=\"\n              cn(\n                'min-h-6 rounded-sm px-2 py-1 text-sm text-muted-foreground transition-colors duration-fast ease-out',\n                'hover:bg-subtle hover:text-foreground',\n                'focus-visible:bg-subtle focus-visible:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n                item.active && 'bg-primary-muted text-primary-text',\n                item.disabled && 'pointer-events-none text-muted-foreground',\n              )\n            \"\n          >\n            <a\n              :href=\"item.href\"\n              :aria-current=\"item.active ? 'page' : undefined\"\n              :aria-disabled=\"item.disabled || undefined\"\n              :tabindex=\"item.disabled ? -1 : undefined\"\n            >\n              {{ item.label }}\n            </a>\n          </RekaNavigationMenuLink>\n\n          <NavigationMenuContent\n            v-if=\"item.children && item.children.length > 0\"\n            :class=\"\n              cn(\n                'z-overlay min-w-[16rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none',\n                'data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out',\n              )\n            \"\n            style=\"transform-origin: var(--reka-popper-transform-origin)\"\n          >\n            <div class=\"flex flex-col gap-1 p-1\">\n              <a\n                v-for=\"(link, i) in item.children\"\n                :key=\"link.href\"\n                :href=\"link.href\"\n                :aria-current=\"link.active ? 'page' : undefined\"\n                :aria-disabled=\"link.disabled || undefined\"\n                :tabindex=\"link.disabled ? -1 : undefined\"\n                :style=\"{ animationDelay: listStaggerDelay(i) }\"\n                :class=\"\n                  cn(\n                    'block rounded-sm px-2 py-1.5 text-sm text-foreground no-underline outline-none',\n                    'transition-colors duration-fast ease-out',\n                    'hover:bg-subtle',\n                    'focus-visible:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n                    link.active && 'bg-primary-muted text-primary-text',\n                    link.disabled && 'pointer-events-none text-muted-foreground',\n                    'animate-fade-rise',\n                  )\n                \"\n              >\n                <div class=\"font-medium\">{{ link.label }}</div>\n                <div v-if=\"link.description\" class=\"text-xs text-muted-foreground\">\n                  {{ link.description }}\n                </div>\n              </a>\n            </div>\n          </NavigationMenuContent>\n        </RekaNavigationMenuItem>\n      </NavigationMenuList>\n\n      <!-- Animated indicator bar (horizontal mode only). -->\n      <NavigationMenuIndicator\n        v-if=\"orientation === 'horizontal'\"\n        :class=\"\n          cn(\n            'top-full z-10 h-0.5 bg-primary',\n            'data-[state=hidden]:animate-fade-fall data-[state=visible]:animate-fade-rise',\n          )\n        \"\n      />\n\n      <NavigationMenuViewport\n        :class=\"cn('data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out')\"\n        style=\"transform-origin: var(--reka-navigation-menu-viewport-transform-origin)\"\n      />\n    </NavigationMenuRoot>\n  </nav>\n</template>\n"],"mappings":"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"}

package/dist/packages/primitives/navigation-menu/src/index.d.ts

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

package/dist/packages/primitives/navigation-menu/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/navigation-menu/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/packages/primitives/navigation-menu/src/index.js

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

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

@@ -1 +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\n// One watcher for both re-measure triggers, and deliberately **not** deep on\n// `options`. The two separate watches each scheduled the same\n// `nextTick(updateIndicator)`, so one host tick that changed both inputs paid\n// the measurement twice; merging them costs nothing and removes the double.\n// Dropping `deep:` is not a regression: an in-place mutation of an option\n// object only matters to the indicator if it changes a *width* — a label edit,\n// say — and the ResizeObserver above is already watching exactly the checked\n// element for that, so the deep traversal bought nothing the observer does not\n// deliver sooner. A new array identity or a new selection still fires this.\nwatch([() => props.modelValue, () => props.options], () => nextTick(updateIndicator));\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          // `min-h-6` is the WCAG 2.5.8 target floor made explicit: the sm\n          // segment's box was previously a product of whatever line-height the\n          // surrounding text happened to hand down, and swapping to the named\n          // `text-micro` (line-height 1.4) dropped it to 23px. A floor that\n          // holds regardless of type metrics is the honest encoding.\n          'group/segment relative z-10 inline-flex min-h-6 items-center justify-center rounded-sm text-muted-foreground',\n          size === 'sm' ? 'px-1.5 py-px text-micro' : '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":""}
+{"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\n// One watcher for both re-measure triggers, and deliberately **not** deep on\n// `options`. The two separate watches each scheduled the same\n// `nextTick(updateIndicator)`, so one host tick that changed both inputs paid\n// the measurement twice; merging them costs nothing and removes the double.\n// Dropping `deep:` is not a regression: an in-place mutation of an option\n// object only matters to the indicator if it changes a *width* — a label edit,\n// say — and the ResizeObserver above is already watching exactly the checked\n// element for that, so the deep traversal bought nothing the observer does not\n// deliver sooner. A new array identity or a new selection still fires this.\nwatch([() => props.modelValue, () => props.options], () => nextTick(updateIndicator));\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          // `min-h-6`/`min-w-6` are the WCAG 2.5.8 target floors made\n          // explicit: the sm segment's box was previously a product of whatever\n          // line-height the surrounding text happened to hand down — swapping\n          // to the named `text-micro` (line-height 1.4) dropped it to 23px,\n          // and a micro label (a one-character density toggle) collapses the\n          // width under 24 too. Floors that hold regardless of type metrics\n          // are the honest encoding.\n          'group/segment relative z-10 inline-flex min-h-6 min-w-6 items-center justify-center rounded-sm text-muted-foreground',\n          size === 'sm' ? 'px-1.5 py-px text-micro' : '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":""}