@ecoma-io/loom 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Popover/Popover.vue"],"names":[],"mappings":"AA4GA;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9D,4CAA4C;AAC5C,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;wBACjC,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAiBd,qGAAqG;WAC9F,OAAO,GAAG,SAAS;IAC1B,4EAA4E;WACrE,WAAW;IAClB,sGAAsG;YAC9F,YAAY;IACpB,uDAAuD;iBAC1C,MAAM;IACnB,kGAAkG;YAC1F,OAAO;;;;IATf,qGAAqG;WAC9F,OAAO,GAAG,SAAS;IAC1B,4EAA4E;WACrE,WAAW;IAClB,sGAAsG;YAC9F,YAAY;IACpB,uDAAuD;iBAC1C,MAAM;IACnB,kGAAkG;YAC1F,OAAO;;;;UARR,OAAO,GAAG,SAAS;UAEnB,WAAW;gBAIL,MAAM;WAFX,YAAY;WAIZ,OAAO;;cAqKL,CAAC,KAAK,IAAiB,KAAK,GAAG;;cAC/B,CAAC,KAAK,IAAiB,KAAK,GAAG;EAWzC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/primitives/Popover/Popover.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,59 @@
+import { cn } from "../../lib/cn.js";
+import { optional } from "../../lib/props.js";
+import { createBlock, createCommentVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { PopoverArrow, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "reka-ui";
+//#region src/primitives/Popover/Popover.vue?vue&type=script&setup=true&lang.ts
+var Popover_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Popover",
+	props: {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		side: { default: "bottom" },
+		align: { default: "center" },
+		sideOffset: { default: 6 },
+		arrow: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ["update:open"],
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(PopoverRoot), mergeProps(unref(optional)({ open: __props.open }), { "onUpdate:open": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:open", $event)) }), {
+				default: withCtx(() => [createVNode(unref(PopoverTrigger), { "as-child": "" }, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "trigger")]),
+					_: 3
+				}), createVNode(unref(PopoverPortal), null, {
+					default: withCtx(() => [createVNode(unref(PopoverContent), {
+						side: __props.side,
+						align: __props.align,
+						"side-offset": __props.sideOffset,
+						class: normalizeClass(unref(cn)("z-50 min-w-[12rem] max-w-[min(90vw,22rem)] rounded-md border border-border bg-popover p-3 text-sm text-popover-foreground shadow-md outline-none", "data-[state=open]:animate-scale-in")),
+						style: { "transform-origin": "var(--reka-popper-transform-origin)" }
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "default"), __props.arrow ? (openBlock(), createBlock(unref(PopoverArrow), {
+							key: 0,
+							class: "fill-popover",
+							width: 12,
+							height: 6
+						})) : createCommentVNode("", true)]),
+						_: 3
+					}, 8, [
+						"side",
+						"align",
+						"side-offset",
+						"class"
+					])]),
+					_: 3
+				})]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { Popover_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Popover.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/primitives/Popover/Popover.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Which edge of the trigger the panel prefers. It is a preference and not a\n * guarantee: Reka flips the panel to the opposite edge when it would collide\n * with the viewport, which is why a caller sets the side it *wants* rather\n * than the side it will get.\n *\n * The members mirror Reka's own `Side`. Nothing enforces that in this\n * declaration — the template binding does: give this union a member Reka does\n * not accept and `:side=\"side\"` stops type-checking. Declaring it here rather\n * than aliasing `PopoverContentProps[\"side\"]` is what puts the four values in\n * the generated props table, because the documentation reads syntax and an\n * indexed access type has none to read.\n */\nexport type PopoverSide = \"top\" | \"right\" | \"bottom\" | \"left\";\n\n/** Where the panel sits along that edge. */\nexport type PopoverAlign = \"start\" | \"center\" | \"end\";\n</script>\n\n<script setup lang=\"ts\">\nimport { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent, PopoverArrow } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\n\n/**\n * Popover — a floating panel anchored to a trigger, carrying secondary content\n * the user opts into: a filter set, a colour picker, a details card.\n *\n * The escape contract, which is the whole reason to reach for an overlay\n * primitive rather than an absolutely positioned div: opening moves focus into\n * the panel, Esc and an outside click both close it, closing returns focus to\n * the trigger, and the page behind keeps scrolling because a popover is not\n * modal. Focus is *not* trapped — Tab leaves the panel, which is correct for\n * content the user can walk past. `Dialog` is the one that traps.\n *\n * Reach for `DropdownMenu` when the panel is a list of commands, `Tooltip` for\n * a hint that must not take focus at all, and `Dialog` when the task has to\n * block the rest of the UI.\n */\nwithDefaults(\n  defineProps<{\n    /** Drive the panel from the host with `v-model:open`; omit it and the popover owns its own state. */\n    open?: boolean | undefined;\n    /** The edge of the trigger to anchor against, before collision flipping. */\n    side?: PopoverSide;\n    /** Where the panel sits along that edge — `start` keeps its leading edge flush with the trigger's. */\n    align?: PopoverAlign;\n    /** Gap in pixels between the trigger and the panel. */\n    sideOffset?: number;\n    /** Draw the pointer notch. Turn it off where the panel reads better flush against its trigger. */\n    arrow?: boolean;\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting. `optional()` in the template is the other half; its docblock\n  // carries the reasoning for both.\n  { open: undefined, side: \"bottom\", align: \"center\", sideOffset: 6, arrow: true },\n);\n\ndefineEmits<{ \"update:open\": [value: boolean] }>();\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"optional({ open })\" @update:open=\"$emit('update:open', $event)\">\n    <!-- @slot The control that opens the panel. Rendered `as-child`, so the\n         caller's own element *is* the trigger and no wrapper swallows its\n         accessible name. -->\n    <PopoverTrigger as-child>\n      <slot name=\"trigger\" />\n    </PopoverTrigger>\n\n    <PopoverPortal>\n      <PopoverContent\n        :side=\"side\"\n        :align=\"align\"\n        :side-offset=\"sideOffset\"\n        :class=\"\n          cn(\n            'z-50 min-w-[12rem] max-w-[min(90vw,22rem)] rounded-md border border-border bg-popover p-3 text-sm text-popover-foreground shadow-md outline-none',\n            // Scoped to the open state, never unconditional. Reka's Presence\n            // keeps closed content mounted until an animationend arrives, and a\n            // mount-only animation never fires a second one — so an\n            // unconditional animation class strands an invisible panel over the\n            // page, swallowing clicks. Scoped, the closed element computes\n            // `animation-name: none` and Presence takes its immediate-unmount\n            // branch instead. The origin below is what makes that scale grow\n            // out of the trigger rather than out of the panel's own centre.\n            'data-[state=open]:animate-scale-in',\n          )\n        \"\n        style=\"transform-origin: var(--reka-popper-transform-origin)\"\n      >\n        <!-- @slot The panel body. -->\n        <slot />\n        <PopoverArrow v-if=\"arrow\" class=\"fill-popover\" :width=\"12\" :height=\"6\" />\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;GAgEE,OAAA,UAAA,GAAA,YAkCc,MAAA,WAAA,GAlCd,WAAqB,MAkCP,QAAA,CAlCe,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAA,EAAM,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,eAAgB,MAAM,GAAA,CAAA,GAAA;IAIhF,SAAA,cAEiB,CAFjB,YAEiB,MAAA,cAAA,GAAA,EAFD,YAAA,GAAQ,GAAA;KACtB,SAAA,cAAuB,CAAvB,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;IAGzB,CAAA,GAAA,YAyBgB,MAAA,aAAA,GAAA,MAAA;KAxBd,SAAA,cAuBiB,CAvBjB,YAuBiB,MAAA,cAAA,GAAA;MAtBd,MAAM,QAAA;MACN,OAAO,QAAA;MACP,eAAa,QAAA;MACb,OAAK,eAAa,MAAA,EAAA,CAAE,CAAA,oJAAA,oCAAA,CAAA;MAcrB,OAAA,EAAA,oBAAA,sCAAA;;MAGA,SAAA,cAAQ,CAAR,WAAQ,KAAA,QAAA,SAAA,GACY,QAAA,SAApB,UAAA,GAAA,YAA0E,MAAA,YAAA,GAAA;;OAA/C,OAAM;OAAgB,OAAO;OAAK,QAAQ"}

package/dist/primitives/Progress/Progress.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","names":[],"sources":["../../../src/primitives/Progress/Progress.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { ProgressRoot, ProgressIndicator } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Progress — determinate progress bar for a task whose extent as a percentage\n * is known (upload %, step 3 of 5). `modelValue` null/undefined renders the\n * *indeterminate* state — an empty track, since there is no percentage yet to\n * paint. For a wait of unknown duration with no percentage at all, use\n * Spinner instead of guessing a Progress value.\n *\n * Built on Reka UI's Progress: role=\"progressbar\" + aria-valuenow/min/max set\n * on the root automatically. `ariaLabel`/`ariaLabelledby` are bound onto\n * ProgressRoot (fallthrough overrides Reka's own generated \"`NN%`\" label) so\n * the accessible name describes *what* is loading, not just how much.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The completed amount, 0–`max`; `null`/omitted renders indeterminate. */\n    modelValue?: number | null;\n    /** The value that reads as 100% complete. */\n    max?: number;\n    /** Accessible name describing the task, overriding Reka's default `NN%` label. */\n    ariaLabel?: string;\n    /** Accessible name sourced from another element's id, in place of `ariaLabel`. */\n    ariaLabelledby?: string;\n  }>(),\n  {\n    max: 100,\n  },\n);\n\n/**\n * The value the bar itself is given, clamped into [0, max]; null while\n * indeterminate. The clamp has to happen here rather than only on the way to\n * the transform below: `aria-valuenow` is generated from whatever ProgressRoot\n * receives, so handing it the raw prop announces a number outside the range\n * `aria-valuemin`/`aria-valuemax` declare — \"150 percent\" read out over a bar\n * painted at 100.\n */\nconst value = computed<number | null>(() =>\n  props.modelValue === null || props.modelValue === undefined\n    ? null\n    : Math.min(Math.max(props.modelValue, 0), props.max),\n);\n\n/** Percentage 0–100, derived from the clamped value; null while indeterminate. */\nconst pct = computed<number | null>(() =>\n  value.value === null ? null : (value.value / props.max) * 100,\n);\n\ndefineExpose({ pct });\n</script>\n\n<template>\n  <ProgressRoot\n    :model-value=\"value\"\n    :max=\"max\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"ariaLabelledby\"\n    class=\"relative h-2 w-full overflow-hidden rounded-full bg-muted\"\n  >\n    <!-- Determinate: a full-width bar slid left by the remaining percentage\n         (transform eased over --duration-slow). Indeterminate: a short segment\n         sweeping the track on a loop, since there is no percentage to paint.\n         Completion beat: at 100% the fill turns success (Loom dual-force\n         law — a finished piece of work reads as done at a glance), eased in\n         over the same --duration-slow lane via the background transition. -->\n    <ProgressIndicator\n      :class=\"\n        cn(\n          'h-full',\n          pct === 100 ? 'bg-success' : 'bg-primary',\n          pct === null && 'w-1/3 animate-progress-indeterminate rounded-full',\n        )\n      \"\n      :style=\"\n        pct === null\n          ? undefined\n          : {\n              transition:\n                'transform var(--duration-slow) var(--ease-out), background-color var(--duration-slow) var(--ease-out)',\n              transform: `translateX(-${100 - pct}%)`,\n            }\n      \"\n    />\n  </ProgressRoot>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,30 @@
+/**
+ * Progress — determinate progress bar for a task whose extent as a percentage
+ * is known (upload %, step 3 of 5). `modelValue` null/undefined renders the
+ * *indeterminate* state — an empty track, since there is no percentage yet to
+ * paint. For a wait of unknown duration with no percentage at all, use
+ * Spinner instead of guessing a Progress value.
+ *
+ * Built on Reka UI's Progress: role="progressbar" + aria-valuenow/min/max set
+ * on the root automatically. `ariaLabel`/`ariaLabelledby` are bound onto
+ * ProgressRoot (fallthrough overrides Reka's own generated "`NN%`" label) so
+ * the accessible name describes *what* is loading, not just how much.
+ */
+type __VLS_Props = {
+    /** The completed amount, 0–`max`; `null`/omitted renders indeterminate. */
+    modelValue?: number | null;
+    /** The value that reads as 100% complete. */
+    max?: number;
+    /** Accessible name describing the task, overriding Reka's default `NN%` label. */
+    ariaLabel?: string;
+    /** Accessible name sourced from another element's id, in place of `ariaLabel`. */
+    ariaLabelledby?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    pct: import("vue").ComputedRef<number | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    max: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=Progress.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Progress/Progress.vue"],"names":[],"mappings":"AAgGA;;;;;;;;;;;GAWG;AACH,KAAK,WAAW,GAAG;IACf,2EAA2E;IAC3E,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AA+HJ,QAAA,MAAM,YAAY;;;SApIR,MAAM;6EAwId,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -0,0 +1,67 @@
+import { cn } from "../../lib/cn.js";
+import { computed, createBlock, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, unref, withCtx } from "vue";
+import { ProgressIndicator, ProgressRoot } from "reka-ui";
+//#region src/primitives/Progress/Progress.vue?vue&type=script&setup=true&lang.ts
+/**
+* Progress — determinate progress bar for a task whose extent as a percentage
+* is known (upload %, step 3 of 5). `modelValue` null/undefined renders the
+* *indeterminate* state — an empty track, since there is no percentage yet to
+* paint. For a wait of unknown duration with no percentage at all, use
+* Spinner instead of guessing a Progress value.
+*
+* Built on Reka UI's Progress: role="progressbar" + aria-valuenow/min/max set
+* on the root automatically. `ariaLabel`/`ariaLabelledby` are bound onto
+* ProgressRoot (fallthrough overrides Reka's own generated "`NN%`" label) so
+* the accessible name describes *what* is loading, not just how much.
+*/
+var Progress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Progress",
+	props: {
+		modelValue: {},
+		max: { default: 100 },
+		ariaLabel: {},
+		ariaLabelledby: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		/**
+		* The value the bar itself is given, clamped into [0, max]; null while
+		* indeterminate. The clamp has to happen here rather than only on the way to
+		* the transform below: `aria-valuenow` is generated from whatever ProgressRoot
+		* receives, so handing it the raw prop announces a number outside the range
+		* `aria-valuemin`/`aria-valuemax` declare — "150 percent" read out over a bar
+		* painted at 100.
+		*/
+		const value = computed(() => props.modelValue === null || props.modelValue === void 0 ? null : Math.min(Math.max(props.modelValue, 0), props.max));
+		/** Percentage 0–100, derived from the clamped value; null while indeterminate. */
+		const pct = computed(() => value.value === null ? null : value.value / props.max * 100);
+		__expose({ pct });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ProgressRoot), {
+				"model-value": value.value,
+				max: __props.max,
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				class: "relative h-2 w-full overflow-hidden rounded-full bg-muted"
+			}, {
+				default: withCtx(() => [createVNode(unref(ProgressIndicator), {
+					class: normalizeClass(unref(cn)("h-full", pct.value === 100 ? "bg-success" : "bg-primary", pct.value === null && "w-1/3 animate-progress-indeterminate rounded-full")),
+					style: normalizeStyle(pct.value === null ? void 0 : {
+						transition: "transform var(--duration-slow) var(--ease-out), background-color var(--duration-slow) var(--ease-out)",
+						transform: `translateX(-${100 - pct.value}%)`
+					})
+				}, null, 8, ["class", "style"])]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"max",
+				"aria-label",
+				"aria-labelledby"
+			]);
+		};
+	}
+});
+//#endregion
+export { Progress_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Progress.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/primitives/Progress/Progress.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { ProgressRoot, ProgressIndicator } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Progress — determinate progress bar for a task whose extent as a percentage\n * is known (upload %, step 3 of 5). `modelValue` null/undefined renders the\n * *indeterminate* state — an empty track, since there is no percentage yet to\n * paint. For a wait of unknown duration with no percentage at all, use\n * Spinner instead of guessing a Progress value.\n *\n * Built on Reka UI's Progress: role=\"progressbar\" + aria-valuenow/min/max set\n * on the root automatically. `ariaLabel`/`ariaLabelledby` are bound onto\n * ProgressRoot (fallthrough overrides Reka's own generated \"`NN%`\" label) so\n * the accessible name describes *what* is loading, not just how much.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The completed amount, 0–`max`; `null`/omitted renders indeterminate. */\n    modelValue?: number | null;\n    /** The value that reads as 100% complete. */\n    max?: number;\n    /** Accessible name describing the task, overriding Reka's default `NN%` label. */\n    ariaLabel?: string;\n    /** Accessible name sourced from another element's id, in place of `ariaLabel`. */\n    ariaLabelledby?: string;\n  }>(),\n  {\n    max: 100,\n  },\n);\n\n/**\n * The value the bar itself is given, clamped into [0, max]; null while\n * indeterminate. The clamp has to happen here rather than only on the way to\n * the transform below: `aria-valuenow` is generated from whatever ProgressRoot\n * receives, so handing it the raw prop announces a number outside the range\n * `aria-valuemin`/`aria-valuemax` declare — \"150 percent\" read out over a bar\n * painted at 100.\n */\nconst value = computed<number | null>(() =>\n  props.modelValue === null || props.modelValue === undefined\n    ? null\n    : Math.min(Math.max(props.modelValue, 0), props.max),\n);\n\n/** Percentage 0–100, derived from the clamped value; null while indeterminate. */\nconst pct = computed<number | null>(() =>\n  value.value === null ? null : (value.value / props.max) * 100,\n);\n\ndefineExpose({ pct });\n</script>\n\n<template>\n  <ProgressRoot\n    :model-value=\"value\"\n    :max=\"max\"\n    :aria-label=\"ariaLabel\"\n    :aria-labelledby=\"ariaLabelledby\"\n    class=\"relative h-2 w-full overflow-hidden rounded-full bg-muted\"\n  >\n    <!-- Determinate: a full-width bar slid left by the remaining percentage\n         (transform eased over --duration-slow). Indeterminate: a short segment\n         sweeping the track on a loop, since there is no percentage to paint.\n         Completion beat: at 100% the fill turns success (Loom dual-force\n         law — a finished piece of work reads as done at a glance), eased in\n         over the same --duration-slow lane via the background transition. -->\n    <ProgressIndicator\n      :class=\"\n        cn(\n          'h-full',\n          pct === 100 ? 'bg-success' : 'bg-primary',\n          pct === null && 'w-1/3 animate-progress-indeterminate rounded-full',\n        )\n      \"\n      :style=\"\n        pct === null\n          ? undefined\n          : {\n              transition:\n                'transform var(--duration-slow) var(--ease-out), background-color var(--duration-slow) var(--ease-out)',\n              transform: `translateX(-${100 - pct}%)`,\n            }\n      \"\n    />\n  </ProgressRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ;;;;;;;;;EAwBd,MAAM,QAAQ,eACZ,MAAM,eAAe,QAAQ,MAAM,eAAe,KAAA,IAC9C,OACA,KAAK,IAAI,KAAK,IAAI,MAAM,YAAY,CAAC,GAAG,MAAM,GAAG,CACvD;;EAGA,MAAM,MAAM,eACV,MAAM,UAAU,OAAO,OAAQ,MAAM,QAAQ,MAAM,MAAO,GAC5D;EAEA,SAAa,EAAE,IAAI,CAAC;;GAIlB,OAAA,UAAA,GAAA,YA+Be,MAAA,YAAA,GAAA;IA9BZ,eAAa,MAAA;IACb,KAAK,QAAA;IACL,cAAY,QAAA;IACZ,mBAAiB,QAAA;IAClB,OAAM;;IAQN,SAAA,cAiBE,CAjBF,YAiBE,MAAA,iBAAA,GAAA;KAhBC,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,UAAgC,IAAA,UAAG,MAAA,eAAA,cAAkD,IAAA,UAAG,QAAA,mDAAA,CAAA;KAO1G,OAAK,eAAW,IAAA,UAAG,OAAsB,KAAA,IAAA;;MAAyN,WAAA,eAAA,MAAA,IAAA,MAAG"}

package/dist/primitives/RadioGroup/RadioGroup.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","names":[],"sources":["../../../src/primitives/RadioGroup/RadioGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/** One selectable row in a {@link RadioGroup}. */\nexport interface RadioOption {\n  /** Matched against `modelValue`. */\n  value: string;\n  /** Visible label, rendered beside the control. */\n  label: string;\n  /** Secondary text, rendered small under the label. */\n  description?: string;\n  /** Disables this row alone, leaving its siblings pickable. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\n\n/**\n * RadioGroup — a vertical list of mutually exclusive options, each with a\n * visible (and optionally described) label — for longer or explained\n * choices and settings lists. For a compact horizontal toggle among 2-5\n * short options that are all visible at once, reach for SegmentedControl\n * instead. Built on Reka UI's RadioGroup: roving tabindex (the group is one\n * Tab stop, not N) with arrow-key navigation between items.\n */\nwithDefaults(\n  defineProps<{\n    /** The selected option's `value`. */\n    modelValue?: string;\n    /** The rows to render, in order. */\n    options: RadioOption[];\n    /** Disables every row at once, distinct from a single option's own `disabled`. */\n    disabled?: boolean;\n    /** Set when this group posts inside a real `<form>` — becomes the submitted field name. */\n    name?: string;\n  }>(),\n  { disabled: false },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n</script>\n\n<template>\n  <RadioGroupRoot\n    v-bind=\"optional({ modelValue, name })\"\n    :disabled=\"disabled\"\n    orientation=\"vertical\"\n    class=\"flex flex-col gap-3\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <!-- RadioGroupItem is a labelable <button role=\"radio\">, so wrapping it in\n         <label> names it exactly like a native control; the rule's\n         nesting/id heuristic just doesn't recognize reka-ui's custom element\n         as a \"control\". -->\n    <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->\n    <label\n      v-for=\"opt in options\"\n      :key=\"opt.value\"\n      :class=\"\n        cn(\n          'flex items-start gap-2 text-sm text-foreground',\n          // Disabled text stays readable (AA on the light ground) — only the\n          // control glyph dims; quiet, not illegible.\n          disabled || opt.disabled ? 'cursor-not-allowed text-muted-foreground' : 'cursor-pointer',\n        )\n      \"\n    >\n      <RadioGroupItem\n        :value=\"opt.value\"\n        :class=\"\n          cn(\n            'mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-input bg-background',\n            // Springy transform (press squish), steady color — the transform\n            // rides --ease-spring while border stays instant --ease-out (style\n            // below), same press language as Button/Switch/Checkbox.\n            'active:scale-90',\n            // Selected = a human decision (Loom law): the ring turns warp.\n            'data-[state=checked]:border-primary',\n            // Focus draws the weave tight: the brand ring blooms.\n            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n          )\n        \"\n        :disabled=\"opt.disabled ?? false\"\n        style=\"\n          transition:\n            transform var(--duration-fast) var(--ease-spring),\n            border-color var(--duration-instant) var(--ease-out),\n            box-shadow var(--duration-fast) var(--ease-out);\n        \"\n      >\n        <!-- The dot pops in with scale-in — a small causal \"it's selected now\". -->\n        <RadioGroupIndicator class=\"flex animate-scale-in items-center justify-center\">\n          <span class=\"h-2 w-2 rounded-full bg-primary\" />\n        </RadioGroupIndicator>\n      </RadioGroupItem>\n      <span class=\"flex flex-col gap-0.5\">\n        <span>{{ opt.label }}</span>\n        <span v-if=\"opt.description\" class=\"text-xs text-muted-foreground\">{{\n          opt.description\n        }}</span>\n      </span>\n    </label>\n  </RadioGroupRoot>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,39 @@
+/** One selectable row in a {@link RadioGroup}. */
+export interface RadioOption {
+    /** Matched against `modelValue`. */
+    value: string;
+    /** Visible label, rendered beside the control. */
+    label: string;
+    /** Secondary text, rendered small under the label. */
+    description?: string;
+    /** Disables this row alone, leaving its siblings pickable. */
+    disabled?: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** The selected option's `value`. */
+    modelValue?: string;
+    /** The rows to render, in order. */
+    options: RadioOption[];
+    /** Disables every row at once, distinct from a single option's own `disabled`. */
+    disabled?: boolean;
+    /** Set when this group posts inside a real `<form>` — becomes the submitted field name. */
+    name?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** The selected option's `value`. */
+    modelValue?: string;
+    /** The rows to render, in order. */
+    options: RadioOption[];
+    /** Disables every row at once, distinct from a single option's own `disabled`. */
+    disabled?: boolean;
+    /** Set when this group posts inside a real `<form>` — becomes the submitted field name. */
+    name?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: (value: string) => any;
+}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=RadioGroup.vue.d.ts.map

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

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

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

@@ -0,0 +1,63 @@
+import { cn } from "../../lib/cn.js";
+import { optional } from "../../lib/props.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from "reka-ui";
+//#region src/primitives/RadioGroup/RadioGroup.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex flex-col gap-0.5" };
+var _hoisted_2 = {
+	key: 0,
+	class: "text-xs text-muted-foreground"
+};
+var RadioGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RadioGroup",
+	props: {
+		modelValue: {},
+		options: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		name: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(RadioGroupRoot), mergeProps(unref(optional)({
+				modelValue: __props.modelValue,
+				name: __props.name
+			}), {
+				disabled: __props.disabled,
+				orientation: "vertical",
+				class: "flex flex-col gap-3",
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", String($event)))
+			}), {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (opt) => {
+					return openBlock(), createElementBlock("label", {
+						key: opt.value,
+						class: normalizeClass(unref(cn)("flex items-start gap-2 text-sm text-foreground", __props.disabled || opt.disabled ? "cursor-not-allowed text-muted-foreground" : "cursor-pointer"))
+					}, [createVNode(unref(RadioGroupItem), {
+						value: opt.value,
+						class: normalizeClass(unref(cn)("mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-input bg-background", "active:scale-90", "data-[state=checked]:border-primary", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", "disabled:cursor-not-allowed disabled:opacity-50")),
+						disabled: opt.disabled ?? false,
+						style: { "transition": "transform var(--duration-fast) var(--ease-spring),\n            border-color var(--duration-instant) var(--ease-out),\n            box-shadow var(--duration-fast) var(--ease-out)" }
+					}, {
+						default: withCtx(() => [createVNode(unref(RadioGroupIndicator), { class: "flex animate-scale-in items-center justify-center" }, {
+							default: withCtx(() => [..._cache[1] || (_cache[1] = [createElementVNode("span", { class: "h-2 w-2 rounded-full bg-primary" }, null, -1)])]),
+							_: 1
+						})]),
+						_: 1
+					}, 8, [
+						"value",
+						"class",
+						"disabled"
+					]), createElementVNode("span", _hoisted_1, [createElementVNode("span", null, toDisplayString(opt.label), 1), opt.description ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(opt.description), 1)) : createCommentVNode("", true)])], 2);
+				}), 128))]),
+				_: 1
+			}, 16, ["disabled"]);
+		};
+	}
+});
+//#endregion
+export { RadioGroup_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RadioGroup.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/primitives/RadioGroup/RadioGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/** One selectable row in a {@link RadioGroup}. */\nexport interface RadioOption {\n  /** Matched against `modelValue`. */\n  value: string;\n  /** Visible label, rendered beside the control. */\n  label: string;\n  /** Secondary text, rendered small under the label. */\n  description?: string;\n  /** Disables this row alone, leaving its siblings pickable. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\n\n/**\n * RadioGroup — a vertical list of mutually exclusive options, each with a\n * visible (and optionally described) label — for longer or explained\n * choices and settings lists. For a compact horizontal toggle among 2-5\n * short options that are all visible at once, reach for SegmentedControl\n * instead. Built on Reka UI's RadioGroup: roving tabindex (the group is one\n * Tab stop, not N) with arrow-key navigation between items.\n */\nwithDefaults(\n  defineProps<{\n    /** The selected option's `value`. */\n    modelValue?: string;\n    /** The rows to render, in order. */\n    options: RadioOption[];\n    /** Disables every row at once, distinct from a single option's own `disabled`. */\n    disabled?: boolean;\n    /** Set when this group posts inside a real `<form>` — becomes the submitted field name. */\n    name?: string;\n  }>(),\n  { disabled: false },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n</script>\n\n<template>\n  <RadioGroupRoot\n    v-bind=\"optional({ modelValue, name })\"\n    :disabled=\"disabled\"\n    orientation=\"vertical\"\n    class=\"flex flex-col gap-3\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <!-- RadioGroupItem is a labelable <button role=\"radio\">, so wrapping it in\n         <label> names it exactly like a native control; the rule's\n         nesting/id heuristic just doesn't recognize reka-ui's custom element\n         as a \"control\". -->\n    <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->\n    <label\n      v-for=\"opt in options\"\n      :key=\"opt.value\"\n      :class=\"\n        cn(\n          'flex items-start gap-2 text-sm text-foreground',\n          // Disabled text stays readable (AA on the light ground) — only the\n          // control glyph dims; quiet, not illegible.\n          disabled || opt.disabled ? 'cursor-not-allowed text-muted-foreground' : 'cursor-pointer',\n        )\n      \"\n    >\n      <RadioGroupItem\n        :value=\"opt.value\"\n        :class=\"\n          cn(\n            'mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-input bg-background',\n            // Springy transform (press squish), steady color — the transform\n            // rides --ease-spring while border stays instant --ease-out (style\n            // below), same press language as Button/Switch/Checkbox.\n            'active:scale-90',\n            // Selected = a human decision (Loom law): the ring turns warp.\n            'data-[state=checked]:border-primary',\n            // Focus draws the weave tight: the brand ring blooms.\n            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n          )\n        \"\n        :disabled=\"opt.disabled ?? false\"\n        style=\"\n          transition:\n            transform var(--duration-fast) var(--ease-spring),\n            border-color var(--duration-instant) var(--ease-out),\n            box-shadow var(--duration-fast) var(--ease-out);\n        \"\n      >\n        <!-- The dot pops in with scale-in — a small causal \"it's selected now\". -->\n        <RadioGroupIndicator class=\"flex animate-scale-in items-center justify-center\">\n          <span class=\"h-2 w-2 rounded-full bg-primary\" />\n        </RadioGroupIndicator>\n      </RadioGroupItem>\n      <span class=\"flex flex-col gap-0.5\">\n        <span>{{ opt.label }}</span>\n        <span v-if=\"opt.description\" class=\"text-xs text-muted-foreground\">{{\n          opt.description\n        }}</span>\n      </span>\n    </label>\n  </RadioGroupRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;GA6CE,OAAA,UAAA,GAAA,YA4DiB,MAAA,cAAA,GA5DjB,WACU,MA2DO,QAAA,CA3DC,CAAA;IAAA,YAAG,QAAA;IAAU,MAAE,QAAA;GAAI,CAAA,GAAA;IAClC,UAAU,QAAA;IACX,aAAY;IACZ,OAAM;IACL,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,OAAO,MAAM,CAAA;;IAQ3D,SAAA,cAAsB,EADxB,UAAA,IAAA,GAAA,mBA+CQ,UAAA,MAAA,WA9CQ,QAAA,UAAP,QAAG;KADZ,OAAA,UAAA,GAAA,mBA+CQ,SAAA;MA7CL,KAAK,IAAI;MACT,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,kDAA6M,QAAA,YAAY,IAAI,WAAQ,6CAAA,gBAAA,CAAA;KASxP,GAAA,CAAA,YA4BiB,MAAA,cAAA,GAAA;MA3Bd,OAAO,IAAI;MACX,OAAK,eAAa,MAAA,EAAA,CAAE,CAAA,2GAAA,mBAAA,uCAAA,+GAAA,iDAAA,CAAA;MAcpB,UAAU,IAAI,YAAQ;MACvB,OAAA,EAAA,cAAA,qLAAA;;MAQA,SAAA,cAEsB,CAFtB,YAEsB,MAAA,mBAAA,GAAA,EAFD,OAAM,oDAAmD,GAAA;OAC5E,SAAA,cAAgD,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAhD,mBAAgD,QAAA,EAA1C,OAAM,kCAAiC,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA;;;;;;;;KAGjD,CAAA,GAAA,mBAKO,QALP,YAKO,CAJL,mBAA4B,QAAA,MAAA,gBAAnB,IAAI,KAAK,GAAA,CAAA,GACN,IAAI,eAAhB,UAAA,GAAA,mBAES,QAFT,YAES,gBADP,IAAI,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/primitives/SegmentedControl/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 src/primitives/SegmentedControl/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/primitives/SegmentedControl/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","names":[],"sources":["../../../src/primitives/SegmentedControl/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, watch } from \"vue\";\nimport { RadioGroupRoot, RadioGroupItem } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\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 */\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`. */\n    disabled?: boolean;\n    /** `\"sm\"` is the compressed form for dense chrome — e.g. a status bar density level. */\n    size?: \"default\" | \"sm\";\n  }>(),\n  { disabled: false, size: \"default\" },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\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    v-bind=\"optional({ modelValue })\"\n    :disabled=\"disabled\"\n    orientation=\"horizontal\"\n    class=\"relative inline-flex items-center gap-0.5 rounded-md border border-input bg-muted p-0.5\"\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          '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-[0.97]',\n          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n          'disabled:pointer-events-none disabled:opacity-50',\n        )\n      \"\n    >\n      {{ opt.label }}\n    </RadioGroupItem>\n  </RadioGroupRoot>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,40 @@
+/** One segment in a {@link SegmentedControl}. */
+export interface SegmentedControlOption {
+    /** Matched against `modelValue`. */
+    value: string;
+    /** Visible label, rendered inside the segment. */
+    label: string;
+    /** Disables this segment alone, leaving its neighbours pickable. */
+    disabled?: boolean;
+    /** Forwarded to the segment's DOM node — lets hosts keep stable test hooks. */
+    testId?: string;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** The selected option's `value`. */
+    modelValue?: string;
+    /** The segments to render, in order. */
+    options: SegmentedControlOption[];
+    /** Disables every segment at once, distinct from a single option's own `disabled`. */
+    disabled?: boolean;
+    /** `"sm"` is the compressed form for dense chrome — e.g. a status bar density level. */
+    size?: "default" | "sm";
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** The selected option's `value`. */
+    modelValue?: string;
+    /** The segments to render, in order. */
+    options: SegmentedControlOption[];
+    /** Disables every segment at once, distinct from a single option's own `disabled`. */
+    disabled?: boolean;
+    /** `"sm"` is the compressed form for dense chrome — e.g. a status bar density level. */
+    size?: "default" | "sm";
+}> & Readonly<{
+    "onUpdate:modelValue"?: (value: string) => any;
+}>, {
+    size: "default" | "sm";
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=SegmentedControl.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/SegmentedControl/SegmentedControl.vue"],"names":[],"mappings":"AAmJA,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;IAQd,qCAAqC;iBACxB,MAAM;IACnB,wCAAwC;aAC/B,sBAAsB,EAAE;IACjC,sFAAsF;eAC3E,OAAO;IAClB,wFAAwF;WACjF,SAAS,GAAG,IAAI;;;;IAPvB,qCAAqC;iBACxB,MAAM;IACnB,wCAAwC;aAC/B,sBAAsB,EAAE;IACjC,sFAAsF;eAC3E,OAAO;IAClB,wFAAwF;WACjF,SAAS,GAAG,IAAI;;;;UAAhB,SAAS,GAAG,IAAI;cAFZ,OAAO;6EAwMlB,CAAC"}

package/dist/primitives/SegmentedControl/SegmentedControl.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,89 @@
+import { cn } from "../../lib/cn.js";
+import { optional } from "../../lib/props.js";
+import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, nextTick, normalizeStyle, onMounted, onUnmounted, openBlock, reactive, ref, renderList, toDisplayString, unref, watch, withCtx } from "vue";
+import { RadioGroupItem, RadioGroupRoot } from "reka-ui";
+//#region src/primitives/SegmentedControl/SegmentedControl.vue?vue&type=script&setup=true&lang.ts
+var SegmentedControl_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SegmentedControl",
+	props: {
+		modelValue: {},
+		options: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		size: { default: "default" }
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		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(unref(optional)({ modelValue: __props.modelValue }), {
+				disabled: __props.disabled,
+				orientation: "horizontal",
+				class: "relative inline-flex items-center gap-0.5 rounded-md border border-input bg-muted p-0.5",
+				"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)("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-[0.97]", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", "disabled:pointer-events-none disabled:opacity-50")
+					}), {
+						default: withCtx(() => [createTextVNode(toDisplayString(opt.label), 1)]),
+						_: 2
+					}, 1040, [
+						"value",
+						"disabled",
+						"class"
+					]);
+				}), 128))]),
+				_: 1
+			}, 16, ["disabled"]);
+		};
+	}
+});
+//#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/primitives/SegmentedControl/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":["../../../src/primitives/SegmentedControl/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, watch } from \"vue\";\nimport { RadioGroupRoot, RadioGroupItem } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\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 */\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`. */\n    disabled?: boolean;\n    /** `\"sm\"` is the compressed form for dense chrome — e.g. a status bar density level. */\n    size?: \"default\" | \"sm\";\n  }>(),\n  { disabled: false, size: \"default\" },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\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    v-bind=\"optional({ modelValue })\"\n    :disabled=\"disabled\"\n    orientation=\"horizontal\"\n    class=\"relative inline-flex items-center gap-0.5 rounded-md border border-input bg-muted p-0.5\"\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          '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-[0.97]',\n          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n          'disabled:pointer-events-none disabled:opacity-50',\n        )\n      \"\n    >\n      {{ opt.label }}\n    </RadioGroupItem>\n  </RadioGroupRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EA0BA,MAAM,QAAQ;EAoBd,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,YA+CiB,MAAA,cAAA,GA/CjB,WACU,MA8CO,QAAA,CA9CC,CAAA,EAAA,YAAG,QAAA,WAAU,CAAA,GAAA;IAC5B,UAAU,QAAA;IACX,aAAY;IACZ,OAAM;IACL,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,mBAwBiB,UAAA,MAAA,WAvBD,QAAA,UAAP,QAAG;KADZ,OAAA,UAAA,GAAA,YAwBiB,MAAA,cAAA,GAxBjB,WAwBiB;MAtBd,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,0FAAgH,QAAA,SAAI,OAAA,6BAAA,qBAAA,yEAAA,0CAAA,uBAAA,+GAAA,kDAAA;;MAYvI,SAAA,cAAe,CAAZ,gBAAA,gBAAA,IAAI,KAAK,GAAA,CAAA,CAAA,CAAA"}

package/dist/primitives/Select/Select.js

@@ -0,0 +1,7 @@
+import Select_vue_vue_type_script_setup_true_lang_default, { selectVariants } from "./Select.vue_vue_type_script_setup_true_lang.js";
+//#region src/primitives/Select/Select.vue
+var Select_default = Select_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Select_default as default, selectVariants };
+
+//# sourceMappingURL=Select.js.map

package/dist/primitives/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","names":[],"sources":["../../../src/primitives/Select/Select.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/** One row of the list. `value` is what the model carries; `label` is what a reader sees. */\nexport interface SelectOption {\n  /** The value bound to `v-model` when this row is chosen. Unique within the list. */\n  value: string;\n  /** The text shown on the row, and on the trigger once it is chosen. */\n  label: string;\n  /** Present but unchoosable — visible, skipped by the keyboard, unclickable. */\n  disabled?: boolean;\n}\n\n/**\n * The trigger's height scale. It matches the text input scale exactly, so a\n * form row mixing a Select beside a text field never comes out uneven — which\n * is why reaching past `size` for an `h-*` class is always the wrong fix.\n */\nexport type SelectSize = \"sm\" | \"md\" | \"lg\";\n\nexport const selectVariants = cva(\n  [\n    \"group inline-flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background text-foreground\",\n    \"transition-[color,background-color,box-shadow] duration-fast ease-out hover:bg-subtle\",\n    // Rim-lit at rest; the ring blooms on focus.\n    \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\n    \"disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground\",\n  ],\n  {\n    // `satisfies` keeps the two halves honest: the union above is the name a\n    // consumer imports and the documentation prints, the map below is the\n    // classes. Adding a member to one and not the other stops compiling.\n    variants: {\n      size: {\n        sm: \"h-8 px-2.5 text-xs\",\n        md: \"h-9 px-3 text-sm\",\n        lg: \"h-11 px-4 text-base\",\n      } satisfies Record<SelectSize, string>,\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  SelectRoot,\n  SelectTrigger,\n  SelectValue,\n  SelectIcon,\n  SelectPortal,\n  SelectContent,\n  SelectViewport,\n  SelectItem,\n  SelectItemText,\n  SelectItemIndicator,\n} from \"reka-ui\";\nimport { Check, ChevronDown } from \"@lucide/vue\";\nimport { cn } from \"../../lib/cn\";\nimport { listStaggerDelay } from \"../../lib/motion\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\n\n/**\n * Select — pick one value out of a closed list, through a compact trigger and\n * a popover listbox. It suits roughly three to fifteen rows where one value is\n * always chosen: a language, a resolution, a quality preset.\n *\n * Below that, two to five options a reader should see all of at once are\n * better shown than hidden. Above it, a list long enough to need searching\n * wants a combobox, which is a different control rather than a longer version\n * of this one.\n *\n * Built on Reka UI's Select, which supplies the listbox semantics: arrow-key\n * navigation, first-character typeahead, Escape and outside-click to close, and\n * the `role=\"combobox\"` trigger wired to the listbox by `aria-expanded` and\n * `aria-controls`. The active row is tracked by moving real focus onto it, not\n * by `aria-activedescendant`.\n */\nwithDefaults(\n  defineProps<{\n    /** The chosen option's `value`. Leave it unset to show the placeholder. */\n    modelValue?: string;\n    /** The rows, in the order they are shown. */\n    options: SelectOption[];\n    /** Shown on the trigger while nothing is chosen. It is not an option. */\n    placeholder?: string;\n    /** Unavailable: dims the trigger and refuses to open. */\n    disabled?: boolean;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. */\n    invalid?: boolean;\n    /** Trigger height. It shares the text input scale so mixed form rows stay aligned. */\n    size?: SelectSize;\n  }>(),\n  { disabled: false, invalid: false, size: \"md\" },\n);\n\ndefineEmits<{\n  /** The chosen option's `value`. Fires once per choice; the list closes with it. */\n  \"update:modelValue\": [value: string];\n}>();\n\n// The root renders no DOM node at all, so fallthrough attributes would be\n// dropped on the floor rather than landing anywhere. They go to the trigger,\n// which is the interactive element they describe.\n//\n// `class` is pulled out of that spread and merged through `cn()` instead.\n// Spreading it alongside the trigger's own `:class` only concatenates the two\n// lists — Vue's merge is generic, not Tailwind-aware — so a caller's `w-28`\n// silently loses to the trigger's own `w-full` depending on which utility\n// Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: triggerAttrs } = useSplitAttrs();\n</script>\n\n<template>\n  <SelectRoot\n    :model-value=\"modelValue ?? ''\"\n    :disabled=\"disabled\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <SelectTrigger\n      v-bind=\"triggerAttrs\"\n      :aria-invalid=\"invalid || undefined\"\n      :data-invalid=\"invalid || undefined\"\n      :class=\"\n        cn(\n          selectVariants({ size }),\n          !invalid && 'focus-visible:shadow-halo',\n          invalid && 'border-destructive focus-visible:outline-destructive',\n          attrs.class as string,\n        )\n      \"\n    >\n      <SelectValue :placeholder=\"placeholder ?? ''\" />\n      <SelectIcon class=\"shrink-0 text-muted-foreground\">\n        <ChevronDown\n          class=\"h-4 w-4 transition-transform duration-fast ease-out group-data-[state=open]:rotate-180\"\n        />\n      </SelectIcon>\n    </SelectTrigger>\n\n    <SelectPortal>\n      <SelectContent\n        position=\"popper\"\n        :side-offset=\"6\"\n        :class=\"\n          cn(\n            'z-50 min-w-[var(--reka-select-trigger-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md',\n            // Scoped to the open state, never unconditional. Reka keeps the\n            // closed content mounted while it waits for an animationend that a\n            // mount-only animation never fires again — an invisible overlay\n            // eating clicks. Scoping it makes the closed element compute\n            // `animation-name: none`, which is the immediate-unmount branch.\n            'data-[state=open]:animate-fade-rise',\n          )\n        \"\n      >\n        <SelectViewport class=\"p-1\">\n          <!-- The rows reveal one step after another, from the shared stagger\n               vocabulary rather than a per-template delay of its own. -->\n          <SelectItem\n            v-for=\"(option, index) in options\"\n            :key=\"option.value\"\n            :value=\"option.value\"\n            :disabled=\"option.disabled ?? false\"\n            :style=\"{ animationDelay: listStaggerDelay(index) }\"\n            :class=\"\n              cn(\n                'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-3 py-1.5 pr-8 text-sm text-foreground outline-none',\n                'transition-colors duration-fast ease-out',\n                'animate-fade-rise',\n                'data-[highlighted]:bg-subtle',\n                'data-[state=checked]:bg-primary-muted data-[state=checked]:text-primary',\n                'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n              )\n            \"\n          >\n            <SelectItemText>{{ option.label }}</SelectItemText>\n            <SelectItemIndicator class=\"absolute right-2 inline-flex items-center\">\n              <Check class=\"h-4 w-4\" />\n            </SelectItemIndicator>\n          </SelectItem>\n        </SelectViewport>\n      </SelectContent>\n    </SelectPortal>\n  </SelectRoot>\n</template>\n"],"mappings":""}