@ecoma-io/loom 0.1.0 → 0.2.0

package/dist/primitives/SegmentedControl/SegmentedControl.js.map

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

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

@@ -16,8 +16,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     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;
+    /** Disables every segment at once, distinct from a single option's own `disabled`. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
     /** `"sm"` is the compressed form for dense chrome — e.g. a status bar density level. */
     size?: "default" | "sm";
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -27,14 +27,14 @@ declare const __VLS_export: import("vue").DefineComponent<{
     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;
+    /** Disables every segment at once, distinct from a single option's own `disabled`. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
     /** `"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;
+    disabled: boolean | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 //# sourceMappingURL=SegmentedControl.vue.d.ts.map

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

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

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

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

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

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

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

@@ -1 +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":""}
+{"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    // No `opacity` here, and that is the point. The trigger is the node that\n    // carries the chosen label, and what a reader needs from an unavailable\n    // Select is exactly that: what it is set to. `disabled:opacity-50`\n    // composited `text-foreground` down to 3.06:1 on this fill — halving the\n    // alpha more than halves the contrast. Unavailability is painted in\n    // measured colours instead: the fill drains to the neutral well and the\n    // label lands on `--color-muted-foreground`, 4.68:1 over it.\n    //\n    // Both survive their neighbours on this element. `hover:` sorts *before*\n    // `disabled:` in Tailwind's variant order, so the disabled fill wins over\n    // `hover:bg-subtle` rather than flickering under a pointer; and\n    // `data-[placeholder]:text-muted-foreground` names the same colour, so the\n    // two colour rules agree whatever the sort puts last.\n    //\n    // The third channel — the rim slackening from `input` to `border` — is\n    // **not** here, and cannot be: a `disabled:` variant outranks a plain\n    // `border-destructive` on specificity, so a Select that was both in error\n    // and unavailable would lose its destructive rim to it. It is written as a\n    // plain conditional in the template, where `cn()` can order the two.\n    \"disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\",\n    \"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 { computed } from \"vue\";\nimport { Check, ChevronDown } from \"@lucide/vue\";\nimport { cn } from \"../../lib/cn\";\nimport { listStaggerDelay } from \"../../lib/motion\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { useFieldControl } from \"../../lib/field-context\";\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 *\n * Inside a [Field](../Field/Field.vue) it wires itself: the row's id, the id of\n * its hint or error line, `required`, `invalid`, `disabled` and the name the\n * chosen value is submitted under all arrive through `useFieldControl()`, so\n * `<Field label=\"Language\" error=\"…\"><Select … /></Field>` needs no attributes\n * at the call site. Both booleans below still win over the row when they are\n * set, in both directions — which is why they default to `undefined` rather\n * than `false`.\n *\n * A row's `readonly` is deliberately ignored. A read-only value is one a reader\n * may see and copy but not change, and a closed list has nothing to show that\n * the trigger is not already showing — so a read-only Select is a disabled\n * Select that lies about being reachable. Rows holding a value nobody may edit\n * want a disabled Select, or no control at all.\n *\n * The consequence is that the library's three resting appearances collapse to\n * two here. A TextField rests available, on show, or unavailable; this control\n * has no middle state, so the lifted `subtle` fill never appears on it and the\n * trigger goes straight from `background` to the drained fill, muted label and\n * slackened rim of the disabled row.\n */\nconst props = withDefaults(\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. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. Unset defers to a wrapping Field's `error`. */\n    invalid?: boolean | undefined;\n    /** Trigger height. It shares the text input scale so mixed form rows stay aligned. */\n    size?: SelectSize;\n  }>(),\n  {\n    // Not `false`, for either. `false` is a caller saying \"this control is fine\n    // / enabled even though its row is not\"; absent is a caller saying nothing,\n    // and only `undefined` survives to mean that past Vue's\n    // absent-Boolean-casts-to-false rule — see TextField.vue, which carries the\n    // full reasoning.\n    disabled: undefined,\n    invalid: undefined,\n    size: \"md\",\n  },\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\n// `id` and `aria-describedby` reach this control as fallthrough attrs rather\n// than props, so they are read off `attrs` and handed in as this caller's own\n// values — a caller who sets either still beats the row, and the row's\n// description is merged into theirs rather than replacing it. `name`,\n// `readonly` and `required` are absent from this object because there is no\n// prop to oppose the row with; the row's answer stands unopposed, which is\n// what is wanted.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  disabled: props.disabled,\n  invalid: props.invalid,\n}));\n\n// Two of the resolved keys do not travel with the bag, and both are Reka\n// facts rather than preferences.\n//\n// `aria-required` cannot be delivered this way at all: Reka's `Slot` merges an\n// as-child chain as `mergeProps(attrs, child.props)`, so the trigger's own\n// declaration — `aria-required` off the root's `required` prop — beats anything\n// arriving from outside, and a value spread here would be dropped silently.\n// The root's prop below is the only lever, and it is bound from the same\n// resolved value.\n//\n// `name` would be the `name` of a `<button type=\"button\">`, which no form\n// submission has ever included; the hidden input at the end of the template\n// carries the value instead.\nconst triggerFieldAttrs = computed(() => {\n  // Removed from a copy rather than listed positively, so a key added to the\n  // resolved bag later reaches this trigger without anyone remembering to come\n  // back here.\n  const aria: Record<string, unknown> = { ...field.attrs };\n  delete aria.name;\n  delete aria[\"aria-required\"];\n  return aria;\n});\n</script>\n\n<template>\n  <SelectRoot\n    :model-value=\"modelValue ?? ''\"\n    :disabled=\"field.disabled\"\n    :required=\"field.required\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <SelectTrigger\n      v-bind=\"{ ...triggerAttrs, ...triggerFieldAttrs }\"\n      :data-invalid=\"field.invalid || undefined\"\n      :class=\"\n        cn(\n          selectVariants({ size }),\n          !field.invalid && 'focus-visible:shadow-halo',\n          // The border half of the disabled treatment, and it lives here rather\n          // than beside the fill in the variant map for the reason written\n          // there. Read as a pair with the line below: `cn()` resolves a border\n          // colour by whichever class it saw last, so an unavailable trigger\n          // that is also in error still shows the destructive rim.\n          field.disabled && 'border-border',\n          field.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                // Inert, but still readable: a row a reader cannot pick is\n                // still a row they have to read to understand why the list is\n                // shaped the way it is. `data-[disabled]:opacity-50` took the\n                // label to 3.13:1 on the popover; the colour on the text node\n                // below leaves it at 5.76:1 and still visibly lighter than the\n                // rows around it.\n                'data-[disabled]:pointer-events-none',\n              )\n            \"\n          >\n            <!-- The mute lives here rather than on the row, and it has to.\n                 `data-[disabled]:` sorts *before* `data-[state=checked]:` in\n                 Tailwind's variant order, so a disabled row that is also the\n                 chosen one would take `text-primary` from the container and a\n                 container colour is only inherited. Declared on the text node\n                 it wins whatever the row resolved to. -->\n            <SelectItemText :class=\"option.disabled && 'text-muted-foreground'\">{{\n              option.label\n            }}</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\n    <!-- What a surrounding `<form>` reads, and only once a row has given this\n         control a name. Reka can render a hidden native `<select>` from the\n         root's own `name` instead, and two of its behaviours are wrong here: a\n         native select always resolves to one of its options, so it would post\n         the first row while the placeholder was still showing, and `required`\n         on a visually-hidden control arms browser validation the library\n         deliberately never arms — a submission blocked with \"an invalid form\n         control is not focusable\" and no bubble anyone can see. A hidden input\n         posts the model and nothing else. -->\n    <input\n      v-if=\"field.name\"\n      type=\"hidden\"\n      :name=\"field.name\"\n      :value=\"modelValue ?? ''\"\n      :disabled=\"field.disabled\"\n    />\n  </SelectRoot>\n</template>\n"],"mappings":""}

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

@@ -25,10 +25,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
     options: SelectOption[];
     /** Shown on the trigger while nothing is chosen. It is not an option. */
     placeholder?: string;
-    /** Unavailable: dims the trigger and refuses to open. */
-    disabled?: boolean;
-    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. */
-    invalid?: boolean;
+    /** Unavailable: dims the trigger and refuses to open. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
+    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. Unset defers to a wrapping Field's `error`. */
+    invalid?: boolean | undefined;
     /** Trigger height. It shares the text input scale so mixed form rows stay aligned. */
     size?: SelectSize;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -40,17 +40,17 @@ declare const __VLS_export: import("vue").DefineComponent<{
     options: SelectOption[];
     /** Shown on the trigger while nothing is chosen. It is not an option. */
     placeholder?: string;
-    /** Unavailable: dims the trigger and refuses to open. */
-    disabled?: boolean;
-    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. */
-    invalid?: boolean;
+    /** Unavailable: dims the trigger and refuses to open. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
+    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. Unset defers to a wrapping Field's `error`. */
+    invalid?: boolean | undefined;
     /** Trigger height. It shares the text input scale so mixed form rows stay aligned. */
     size?: SelectSize;
 }> & Readonly<{
     "onUpdate:modelValue"?: (value: string) => any;
 }>, {
     size: SelectSize;
-    disabled: boolean;
-    invalid: boolean;
+    disabled: boolean | undefined;
+    invalid: boolean | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 //# sourceMappingURL=Select.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Select/Select.vue"],"names":[],"mappings":"AAkNA,6FAA6F;AAC7F,MAAM,WAAW,YAAY;IAC3B,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,eAAO,MAAM,cAAc;;8EAqB1B,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAkBd,2EAA2E;iBAC9D,MAAM;IACnB,6CAA6C;aACpC,YAAY,EAAE;IACvB,yEAAyE;kBAC3D,MAAM;IACpB,yDAAyD;eAC9C,OAAO;IAClB,oFAAoF;cAC1E,OAAO;IACjB,sFAAsF;WAC/E,UAAU;;;;IAXjB,2EAA2E;iBAC9D,MAAM;IACnB,6CAA6C;aACpC,YAAY,EAAE;IACvB,yEAAyE;kBAC3D,MAAM;IACpB,yDAAyD;eAC9C,OAAO;IAClB,oFAAoF;cAC1E,OAAO;IACjB,sFAAsF;WAC/E,UAAU;;;;UAAV,UAAU;cAJN,OAAO;aAER,OAAO;6EAyUjB,CAAC"}
+{"version":3,"file":"Select.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Select/Select.vue"],"names":[],"mappings":"AAiVA,6FAA6F;AAC7F,MAAM,WAAW,YAAY;IAC3B,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,eAAO,MAAM,cAAc;;8EAyC1B,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAsCd,2EAA2E;iBAC9D,MAAM;IACnB,6CAA6C;aACpC,YAAY,EAAE;IACvB,yEAAyE;kBAC3D,MAAM;IACpB,2FAA2F;eAChF,OAAO,GAAG,SAAS;IAC9B,gIAAgI;cACtH,OAAO,GAAG,SAAS;IAC7B,sFAAsF;WAC/E,UAAU;;;;IAXjB,2EAA2E;iBAC9D,MAAM;IACnB,6CAA6C;aACpC,YAAY,EAAE;IACvB,yEAAyE;kBAC3D,MAAM;IACpB,2FAA2F;eAChF,OAAO,GAAG,SAAS;IAC9B,gIAAgI;cACtH,OAAO,GAAG,SAAS;IAC7B,sFAAsF;WAC/E,UAAU;;;;UAAV,UAAU;cAJN,OAAO,GAAG,SAAS;aAEpB,OAAO,GAAG,SAAS;6EAsa7B,CAAC"}

package/dist/primitives/Select/Select.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,9 @@
 import { cn } from "../../lib/cn.js";
 import { listStaggerDelay } from "../../lib/motion.js";
 import { useSplitAttrs } from "../../lib/attrs.js";
+import { useFieldControl } from "../../lib/field-context.js";
 import { Check, ChevronDown } from "@lucide/vue";
-import { Fragment, createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
 import { SelectContent, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectPortal, SelectRoot, SelectTrigger, SelectValue, SelectViewport } from "reka-ui";
 import { cva } from "class-variance-authority";
 //#region src/primitives/Select/Select.vue?vue&type=script&setup=true&lang.ts
@@ -21,12 +22,38 @@ import { cva } from "class-variance-authority";
 * the `role="combobox"` trigger wired to the listbox by `aria-expanded` and
 * `aria-controls`. The active row is tracked by moving real focus onto it, not
 * by `aria-activedescendant`.
+*
+* Inside a [Field](../Field/Field.vue) it wires itself: the row's id, the id of
+* its hint or error line, `required`, `invalid`, `disabled` and the name the
+* chosen value is submitted under all arrive through `useFieldControl()`, so
+* `<Field label="Language" error="…"><Select … /></Field>` needs no attributes
+* at the call site. Both booleans below still win over the row when they are
+* set, in both directions — which is why they default to `undefined` rather
+* than `false`.
+*
+* A row's `readonly` is deliberately ignored. A read-only value is one a reader
+* may see and copy but not change, and a closed list has nothing to show that
+* the trigger is not already showing — so a read-only Select is a disabled
+* Select that lies about being reachable. Rows holding a value nobody may edit
+* want a disabled Select, or no control at all.
+*
+* The consequence is that the library's three resting appearances collapse to
+* two here. A TextField rests available, on show, or unavailable; this control
+* has no middle state, so the lifted `subtle` fill never appears on it and the
+* trigger goes straight from `background` to the drained fill, muted label and
+* slackened rim of the disabled row.
 */
+var _hoisted_1 = [
+	"name",
+	"value",
+	"disabled"
+];
 var selectVariants = cva([
 	"group inline-flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background text-foreground",
 	"transition-[color,background-color,box-shadow] duration-fast ease-out hover:bg-subtle",
 	"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
-	"disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground"
+	"disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground",
+	"data-[placeholder]:text-muted-foreground"
 ], {
 	variants: { size: {
 		sm: "h-8 px-2.5 text-xs",
@@ -44,75 +71,101 @@ var Select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		placeholder: {},
 		disabled: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		invalid: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		size: { default: "md" }
 	},
 	emits: ["update:modelValue"],
 	setup(__props) {
+		const props = __props;
 		const { attrs, rest: triggerAttrs } = useSplitAttrs();
+		const field = useFieldControl(() => ({
+			id: attrs.id,
+			describedBy: attrs["aria-describedby"],
+			disabled: props.disabled,
+			invalid: props.invalid
+		}));
+		const triggerFieldAttrs = computed(() => {
+			const aria = { ...field.attrs };
+			delete aria.name;
+			delete aria["aria-required"];
+			return aria;
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(SelectRoot), {
 				"model-value": __props.modelValue ?? "",
-				disabled: __props.disabled,
+				disabled: unref(field).disabled,
+				required: unref(field).required,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", String($event)))
 			}, {
-				default: withCtx(() => [createVNode(unref(SelectTrigger), mergeProps(unref(triggerAttrs), {
-					"aria-invalid": __props.invalid || void 0,
-					"data-invalid": __props.invalid || void 0,
-					class: unref(cn)(unref(selectVariants)({ size: __props.size }), !__props.invalid && "focus-visible:shadow-halo", __props.invalid && "border-destructive focus-visible:outline-destructive", unref(attrs).class)
-				}), {
-					default: withCtx(() => [createVNode(unref(SelectValue), { placeholder: __props.placeholder ?? "" }, null, 8, ["placeholder"]), createVNode(unref(SelectIcon), { class: "shrink-0 text-muted-foreground" }, {
-						default: withCtx(() => [createVNode(unref(ChevronDown), { class: "h-4 w-4 transition-transform duration-fast ease-out group-data-[state=open]:rotate-180" })]),
-						_: 1
-					})]),
-					_: 1
-				}, 16, [
-					"aria-invalid",
-					"data-invalid",
-					"class"
-				]), createVNode(unref(SelectPortal), null, {
-					default: withCtx(() => [createVNode(unref(SelectContent), {
-						position: "popper",
-						"side-offset": 6,
-						class: normalizeClass(unref(cn)("z-50 min-w-[var(--reka-select-trigger-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md", "data-[state=open]:animate-fade-rise"))
+				default: withCtx(() => [
+					createVNode(unref(SelectTrigger), mergeProps({
+						...unref(triggerAttrs),
+						...triggerFieldAttrs.value
 					}, {
-						default: withCtx(() => [createVNode(unref(SelectViewport), { class: "p-1" }, {
-							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
-								return openBlock(), createBlock(unref(SelectItem), {
-									key: option.value,
-									value: option.value,
-									disabled: option.disabled ?? false,
-									style: normalizeStyle({ animationDelay: unref(listStaggerDelay)(index) }),
-									class: normalizeClass(unref(cn)("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", "transition-colors duration-fast ease-out", "animate-fade-rise", "data-[highlighted]:bg-subtle", "data-[state=checked]:bg-primary-muted data-[state=checked]:text-primary", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"))
-								}, {
-									default: withCtx(() => [createVNode(unref(SelectItemText), null, {
-										default: withCtx(() => [createTextVNode(toDisplayString(option.label), 1)]),
-										_: 2
-									}, 1024), createVNode(unref(SelectItemIndicator), { class: "absolute right-2 inline-flex items-center" }, {
-										default: withCtx(() => [createVNode(unref(Check), { class: "h-4 w-4" })]),
-										_: 1
-									})]),
-									_: 2
-								}, 1032, [
-									"value",
-									"disabled",
-									"style",
-									"class"
-								]);
-							}), 128))]),
+						"data-invalid": unref(field).invalid || void 0,
+						class: unref(cn)(unref(selectVariants)({ size: __props.size }), !unref(field).invalid && "focus-visible:shadow-halo", unref(field).disabled && "border-border", unref(field).invalid && "border-destructive focus-visible:outline-destructive", unref(attrs).class)
+					}), {
+						default: withCtx(() => [createVNode(unref(SelectValue), { placeholder: __props.placeholder ?? "" }, null, 8, ["placeholder"]), createVNode(unref(SelectIcon), { class: "shrink-0 text-muted-foreground" }, {
+							default: withCtx(() => [createVNode(unref(ChevronDown), { class: "h-4 w-4 transition-transform duration-fast ease-out group-data-[state=open]:rotate-180" })]),
 							_: 1
 						})]),
 						_: 1
-					}, 8, ["class"])]),
-					_: 1
-				})]),
+					}, 16, ["data-invalid", "class"]),
+					createVNode(unref(SelectPortal), null, {
+						default: withCtx(() => [createVNode(unref(SelectContent), {
+							position: "popper",
+							"side-offset": 6,
+							class: normalizeClass(unref(cn)("z-50 min-w-[var(--reka-select-trigger-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md", "data-[state=open]:animate-fade-rise"))
+						}, {
+							default: withCtx(() => [createVNode(unref(SelectViewport), { class: "p-1" }, {
+								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
+									return openBlock(), createBlock(unref(SelectItem), {
+										key: option.value,
+										value: option.value,
+										disabled: option.disabled ?? false,
+										style: normalizeStyle({ animationDelay: unref(listStaggerDelay)(index) }),
+										class: normalizeClass(unref(cn)("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", "transition-colors duration-fast ease-out", "animate-fade-rise", "data-[highlighted]:bg-subtle", "data-[state=checked]:bg-primary-muted data-[state=checked]:text-primary", "data-[disabled]:pointer-events-none"))
+									}, {
+										default: withCtx(() => [createVNode(unref(SelectItemText), { class: normalizeClass(option.disabled && "text-muted-foreground") }, {
+											default: withCtx(() => [createTextVNode(toDisplayString(option.label), 1)]),
+											_: 2
+										}, 1032, ["class"]), createVNode(unref(SelectItemIndicator), { class: "absolute right-2 inline-flex items-center" }, {
+											default: withCtx(() => [createVNode(unref(Check), { class: "h-4 w-4" })]),
+											_: 1
+										})]),
+										_: 2
+									}, 1032, [
+										"value",
+										"disabled",
+										"style",
+										"class"
+									]);
+								}), 128))]),
+								_: 1
+							})]),
+							_: 1
+						}, 8, ["class"])]),
+						_: 1
+					}),
+					unref(field).name ? (openBlock(), createElementBlock("input", {
+						key: 0,
+						type: "hidden",
+						name: unref(field).name,
+						value: __props.modelValue ?? "",
+						disabled: unref(field).disabled
+					}, null, 8, _hoisted_1)) : createCommentVNode("", true)
+				]),
 				_: 1
-			}, 8, ["model-value", "disabled"]);
+			}, 8, [
+				"model-value",
+				"disabled",
+				"required"
+			]);
 		};
 	}
 });