@ecoma-io/loom 0.2.0 → 0.4.0

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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,7 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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.map

@@ -1 +0,0 @@
-{"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,175 +0,0 @@
-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, 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
-/**
-* Select — pick one value out of a closed list, through a compact trigger and
-* a popover listbox. It suits roughly three to fifteen rows where one value is
-* always chosen: a language, a resolution, a quality preset.
-*
-* Below that, two to five options a reader should see all of at once are
-* better shown than hidden. Above it, a list long enough to need searching
-* wants a combobox, which is a different control rather than a longer version
-* of this one.
-*
-* Built on Reka UI's Select, which supplies the listbox semantics: arrow-key
-* navigation, first-character typeahead, Escape and outside-click to close, and
-* 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:bg-muted disabled:text-muted-foreground",
-	"data-[placeholder]:text-muted-foreground"
-], {
-	variants: { size: {
-		sm: "h-8 px-2.5 text-xs",
-		md: "h-9 px-3 text-sm",
-		lg: "h-11 px-4 text-base"
-	} },
-	defaultVariants: { size: "md" }
-});
-var Select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	inheritAttrs: false,
-	__name: "Select",
-	props: {
-		modelValue: {},
-		options: {},
-		placeholder: {},
-		disabled: {
-			type: Boolean,
-			default: void 0
-		},
-		invalid: {
-			type: Boolean,
-			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: 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),
-						...triggerFieldAttrs.value
-					}, {
-						"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
-					}, 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",
-				"required"
-			]);
-		};
-	}
-});
-//#endregion
-export { Select_vue_vue_type_script_setup_true_lang_default as default, selectVariants };
-
-//# sourceMappingURL=Select.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Select.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAa,iBAAiB,IAC5B;CACE;CACA;CAEA;CAoBA;CACA;AACF,GACA;CAIE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;;;;;;;;;;;;;;;;;;;EA2DA,MAAM,QAAQ;EA0Cd,MAAM,EAAE,OAAO,MAAM,iBAAiB,cAAc;EASpD,MAAM,QAAQ,uBAAuB;GACnC,IAAI,MAAM;GACV,aAAa,MAAM;GACnB,UAAU,MAAM;GAChB,SAAS,MAAM;EACjB,EAAE;EAeF,MAAM,oBAAoB,eAAe;GAIvC,MAAM,OAAgC,EAAE,GAAG,MAAM,MAAM;GACvD,OAAO,KAAK;GACZ,OAAO,KAAK;GACZ,OAAO;EACT,CAAC;;GAIC,OAAA,UAAA,GAAA,YA2Ga,MAAA,UAAA,GAAA;IA1GV,eAAa,QAAA,cAAU;IACvB,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,OAAO,MAAM,CAAA;;IAE7D,SAAA,cAwBgB;KAxBhB,YAwBgB,MAAA,aAAA,GAxBhB,WAwBgB;MAAA,GAvBD,MAAA,YAAA;MAAY,GAAK,kBAAA;KAAiB,GAAA;MAC9C,gBAAc,MAAA,KAAA,CAAK,CAAC,WAAW,KAAA;MAC/B,OAAgB,MAAA,EAAA,CAAE,CAAY,MAAA,cAAA,CAAc,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAgB,CAAA,MAAA,KAAA,CAAK,CAAC,WAAO,6BAA2a,MAAA,KAAA,CAAK,CAAC,YAAQ,iBAA+B,MAAA,KAAA,CAAK,CAAC,WAAO,wDAAsE,MAAA,KAAA,CAAK,CAAC,KAAA;;MAeloB,SAAA,cAAgD,CAAhD,YAAgD,MAAA,WAAA,GAAA,EAAlC,aAAa,QAAA,eAAW,GAAA,GAAA,MAAA,GAAA,CAAA,aAAA,CAAA,GACtC,YAIa,MAAA,UAAA,GAAA,EAJD,OAAM,iCAAgC,GAAA;OAChD,SAAA,cAEE,CAFF,YAEE,MAAA,WAAA,GAAA,EADA,OAAM,yFAAwF,CAAA,CAAA,CAAA;;;;;KAKpG,YAyDe,MAAA,YAAA,GAAA,MAAA;MAxDb,SAAA,cAuDgB,CAvDhB,YAuDgB,MAAA,aAAA,GAAA;OAtDd,UAAS;OACR,eAAa;OACb,OAAK,eAAa,MAAA,EAAA,CAAE,CAAA,8IAAA,qCAAA,CAAA;;OAYrB,SAAA,cAuCiB,CAvCjB,YAuCiB,MAAA,cAAA,GAAA,EAvCD,OAAM,MAAK,GAAA;QAIvB,SAAA,cAAkC,EADpC,UAAA,IAAA,GAAA,mBAmCa,UAAA,MAAA,WAlCe,QAAA,UAAlB,QAAQ,UAAK;SADvB,OAAA,UAAA,GAAA,YAmCa,MAAA,UAAA,GAAA;UAjCV,KAAK,OAAO;UACZ,OAAO,OAAO;UACd,UAAU,OAAO,YAAQ;UACzB,OAAK,eAAA,EAAA,gBAAoB,MAAA,gBAAA,CAAgB,CAAC,KAAK,EAAA,CAAA;UAC/C,OAAK,eAAiB,MAAA,EAAA,CAAE,CAAA,gIAAA,4CAAA,qBAAA,gCAAA,2EAAA,qCAAA,CAAA;;UAuBzB,SAAA,cAEmB,CAFnB,YAEmB,MAAA,cAAA,GAAA,EAFF,OAAK,eAAE,OAAO,YAAQ,uBAAA,EAAA,GAAA;WAA6B,SAAA,cAElE,CADA,gBAAA,gBAAA,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA;;UAEd,GAAA,MAAA,CAAA,OAAA,CAAA,GAAA,YAEsB,MAAA,mBAAA,GAAA,EAFD,OAAM,4CAA2C,GAAA;WACpE,SAAA,cAAyB,CAAzB,YAAyB,MAAA,KAAA,GAAA,EAAlB,OAAM,UAAS,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;KAiBxB,MAAA,KAAA,CAAK,CAAC,QADd,UAAA,GAAA,mBAME,SAAA;;MAJA,MAAK;MACJ,MAAM,MAAA,KAAA,CAAK,CAAC;MACZ,OAAO,QAAA,cAAU;MACjB,UAAU,MAAA,KAAA,CAAK,CAAC"}

package/dist/primitives/Separator/Separator.js

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

package/dist/primitives/Separator/Separator.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Separator.js","names":[],"sources":["../../../src/primitives/Separator/Separator.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Which axis the hairline draws along. */\nexport type SeparatorOrientation = \"horizontal\" | \"vertical\";\n</script>\n\n<script setup lang=\"ts\">\nimport { Separator as SeparatorRoot } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Separator — thin visual/semantic divider between content groups (a\n * settings section break, a toolbar group boundary). Built on Reka UI's\n * Separator: `role=\"separator\"` unless `decorative` (the common case —\n * visual dividers next to already-structured content don't need a second\n * landmark), matching `orientation` via `aria-orientation`.\n */\nwithDefaults(\n  defineProps<{\n    /** Which axis the hairline draws along. */\n    orientation?: SeparatorOrientation;\n    /** Purely visual, with no `role=\"separator\"` — the default, for a divider next to content that is already structured on its own. Set `false` only when the line is the sole semantic boundary between two regions. */\n    decorative?: boolean;\n  }>(),\n  { orientation: \"horizontal\", decorative: true },\n);\n</script>\n\n<template>\n  <SeparatorRoot\n    :orientation=\"orientation\"\n    :decorative=\"decorative\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border',\n        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px self-stretch',\n      )\n    \"\n  />\n</template>\n"],"mappings":""}

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

@@ -1 +0,0 @@
-{"version":3,"file":"Separator.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Separator/Separator.vue"],"names":[],"mappings":"AA8CA,2CAA2C;AAC3C,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;wBACxC,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IASd,2CAA2C;kBAC7B,oBAAoB;IAClC,sNAAsN;iBACzM,OAAO;;IAHpB,2CAA2C;kBAC7B,oBAAoB;IAClC,sNAAsN;iBACzM,OAAO;;iBAFN,oBAAoB;gBAErB,OAAO;6EA4DpB,CAAC"}

package/dist/primitives/Separator/Separator.vue_vue_type_script_setup_true_lang.js

@@ -1,31 +0,0 @@
-import { cn } from "../../lib/cn.js";
-import { createBlock, defineComponent, normalizeClass, openBlock, unref } from "vue";
-import { Separator } from "reka-ui";
-//#region src/primitives/Separator/Separator.vue?vue&type=script&setup=true&lang.ts
-var Separator_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	__name: "Separator",
-	props: {
-		orientation: { default: "horizontal" },
-		decorative: {
-			type: Boolean,
-			default: true
-		}
-	},
-	setup(__props) {
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Separator), {
-				orientation: __props.orientation,
-				decorative: __props.decorative,
-				class: normalizeClass(unref(cn)("shrink-0 bg-border", __props.orientation === "horizontal" ? "h-px w-full" : "h-full w-px self-stretch"))
-			}, null, 8, [
-				"orientation",
-				"decorative",
-				"class"
-			]);
-		};
-	}
-});
-//#endregion
-export { Separator_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=Separator.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Separator.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/primitives/Separator/Separator.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Which axis the hairline draws along. */\nexport type SeparatorOrientation = \"horizontal\" | \"vertical\";\n</script>\n\n<script setup lang=\"ts\">\nimport { Separator as SeparatorRoot } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Separator — thin visual/semantic divider between content groups (a\n * settings section break, a toolbar group boundary). Built on Reka UI's\n * Separator: `role=\"separator\"` unless `decorative` (the common case —\n * visual dividers next to already-structured content don't need a second\n * landmark), matching `orientation` via `aria-orientation`.\n */\nwithDefaults(\n  defineProps<{\n    /** Which axis the hairline draws along. */\n    orientation?: SeparatorOrientation;\n    /** Purely visual, with no `role=\"separator\"` — the default, for a divider next to content that is already structured on its own. Set `false` only when the line is the sole semantic boundary between two regions. */\n    decorative?: boolean;\n  }>(),\n  { orientation: \"horizontal\", decorative: true },\n);\n</script>\n\n<template>\n  <SeparatorRoot\n    :orientation=\"orientation\"\n    :decorative=\"decorative\"\n    :class=\"\n      cn(\n        'shrink-0 bg-border',\n        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px self-stretch',\n      )\n    \"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;GA4BE,OAAA,UAAA,GAAA,YASE,MAAA,SAAA,GAAA;IARC,aAAa,QAAA;IACb,YAAY,QAAA;IACZ,OAAK,eAAS,MAAA,EAAA,CAAE,CAAA,sBAAwC,QAAA,gBAAW,eAAA,gBAAA,0BAAA,CAAA"}

package/dist/primitives/Skeleton/Skeleton.js

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

package/dist/primitives/Skeleton/Skeleton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../src/primitives/Skeleton/Skeleton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\nexport type SkeletonVariant = \"text\" | \"circle\" | \"rect\";\n\n// A faint light band sweeps a muted base (background-color muted + a moving\n// transparent→light→transparent gradient image) — the shimmer language,\n// kept neutral and low-contrast so a loading page reads as \"coming\", not busy.\n// Under prefers-reduced-motion the sweep simply stops on a flat muted block.\n//\n// The band's colour goes through `--alpha()` rather than `hsl(var(…)/…)`.\n// Loom's tokens are whole colours (`--color-foreground: hsl(213 29% 15%)`),\n// not the bare channel triplets that idiom expects, so wrapping one in `hsl()`\n// produces a value the browser cannot compute — and a single invalid stop\n// takes the entire gradient with it, leaving a flat block that still animates\n// its own absence. `--alpha()` is Tailwind's own function for this and takes\n// the token as it is actually written.\nexport const skeletonVariants = cva(\n  \"bg-muted bg-[linear-gradient(90deg,transparent_0%,--alpha(var(--color-foreground)/6%)_50%,transparent_100%)] bg-[length:200%_100%] animate-shimmer\",\n  {\n    variants: {\n      variant: {\n        text: \"h-4 rounded\",\n        circle: \"rounded-full\",\n        rect: \"rounded-md\",\n      } satisfies Record<SkeletonVariant, string>,\n    },\n    defaultVariants: { variant: \"text\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Skeleton — content-loading placeholder for a KNOWN layout (a card, a list\n * row, an avatar) so the page's shape reads as \"coming\" instead of jumping\n * once real content lands. For an indeterminate wait with no layout shape\n * yet, use Spinner instead. Purely decorative (`aria-hidden`) — the loading\n * state itself is announced elsewhere (e.g. a Spinner or a live region), not\n * by the placeholder shapes. Width/height are the caller's concern via a\n * passthrough `class` (e.g. `class=\"h-10 w-10\"`).\n */\nwithDefaults(\n  defineProps<{\n    /** Which shape stands in for the real content: a text line, a round avatar, or a rectangular block. */\n    variant?: SkeletonVariant;\n  }>(),\n  { variant: \"text\" },\n);\n</script>\n\n<template>\n  <div aria-hidden=\"true\" :class=\"cn(skeletonVariants({ variant }))\" />\n</template>\n"],"mappings":""}

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

@@ -1 +0,0 @@
-{"version":3,"file":"Skeleton.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Skeleton/Skeleton.vue"],"names":[],"mappings":"AAgEA,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAczD,eAAO,MAAM,gBAAgB;;8EAY5B,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAWd,uGAAuG;cAC7F,eAAe;;IADzB,uGAAuG;cAC7F,eAAe;;aAAf,eAAe;6EAsCzB,CAAC"}

package/dist/primitives/Skeleton/Skeleton.vue_vue_type_script_setup_true_lang.js

@@ -1,37 +0,0 @@
-import { cn } from "../../lib/cn.js";
-import { createElementBlock, defineComponent, normalizeClass, openBlock, unref } from "vue";
-import { cva } from "class-variance-authority";
-//#region src/primitives/Skeleton/Skeleton.vue?vue&type=script&setup=true&lang.ts
-/**
-* Skeleton — content-loading placeholder for a KNOWN layout (a card, a list
-* row, an avatar) so the page's shape reads as "coming" instead of jumping
-* once real content lands. For an indeterminate wait with no layout shape
-* yet, use Spinner instead. Purely decorative (`aria-hidden`) — the loading
-* state itself is announced elsewhere (e.g. a Spinner or a live region), not
-* by the placeholder shapes. Width/height are the caller's concern via a
-* passthrough `class` (e.g. `class="h-10 w-10"`).
-*/
-var skeletonVariants = cva("bg-muted bg-[linear-gradient(90deg,transparent_0%,--alpha(var(--color-foreground)/6%)_50%,transparent_100%)] bg-[length:200%_100%] animate-shimmer", {
-	variants: { variant: {
-		text: "h-4 rounded",
-		circle: "rounded-full",
-		rect: "rounded-md"
-	} },
-	defaultVariants: { variant: "text" }
-});
-var Skeleton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	__name: "Skeleton",
-	props: { variant: { default: "text" } },
-	setup(__props) {
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				"aria-hidden": "true",
-				class: normalizeClass(unref(cn)(unref(skeletonVariants)({ variant: __props.variant })))
-			}, null, 2);
-		};
-	}
-});
-//#endregion
-export { Skeleton_vue_vue_type_script_setup_true_lang_default as default, skeletonVariants };
-
-//# sourceMappingURL=Skeleton.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Skeleton.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/primitives/Skeleton/Skeleton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\nexport type SkeletonVariant = \"text\" | \"circle\" | \"rect\";\n\n// A faint light band sweeps a muted base (background-color muted + a moving\n// transparent→light→transparent gradient image) — the shimmer language,\n// kept neutral and low-contrast so a loading page reads as \"coming\", not busy.\n// Under prefers-reduced-motion the sweep simply stops on a flat muted block.\n//\n// The band's colour goes through `--alpha()` rather than `hsl(var(…)/…)`.\n// Loom's tokens are whole colours (`--color-foreground: hsl(213 29% 15%)`),\n// not the bare channel triplets that idiom expects, so wrapping one in `hsl()`\n// produces a value the browser cannot compute — and a single invalid stop\n// takes the entire gradient with it, leaving a flat block that still animates\n// its own absence. `--alpha()` is Tailwind's own function for this and takes\n// the token as it is actually written.\nexport const skeletonVariants = cva(\n  \"bg-muted bg-[linear-gradient(90deg,transparent_0%,--alpha(var(--color-foreground)/6%)_50%,transparent_100%)] bg-[length:200%_100%] animate-shimmer\",\n  {\n    variants: {\n      variant: {\n        text: \"h-4 rounded\",\n        circle: \"rounded-full\",\n        rect: \"rounded-md\",\n      } satisfies Record<SkeletonVariant, string>,\n    },\n    defaultVariants: { variant: \"text\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Skeleton — content-loading placeholder for a KNOWN layout (a card, a list\n * row, an avatar) so the page's shape reads as \"coming\" instead of jumping\n * once real content lands. For an indeterminate wait with no layout shape\n * yet, use Spinner instead. Purely decorative (`aria-hidden`) — the loading\n * state itself is announced elsewhere (e.g. a Spinner or a live region), not\n * by the placeholder shapes. Width/height are the caller's concern via a\n * passthrough `class` (e.g. `class=\"h-10 w-10\"`).\n */\nwithDefaults(\n  defineProps<{\n    /** Which shape stands in for the real content: a text line, a round avatar, or a rectangular block. */\n    variant?: SkeletonVariant;\n  }>(),\n  { variant: \"text\" },\n);\n</script>\n\n<template>\n  <div aria-hidden=\"true\" :class=\"cn(skeletonVariants({ variant }))\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;AAiBA,IAAa,mBAAmB,IAC9B,sJACA;CACE,UAAU,EACR,SAAS;EACP,MAAM;EACN,QAAQ;EACR,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,SAAS,OAAO;AACrC,CACF;;;;;;GAyBE,OAAA,UAAA,GAAA,mBAAqE,OAAA;IAAhE,eAAY;IAAQ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAA,gBAAA,CAAgB,CAAA,EAAA,SAAG,QAAA,QAAO,CAAA,CAAA,CAAA"}

package/dist/primitives/Slider/Slider.js

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

package/dist/primitives/Slider/Slider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/primitives/Slider/Slider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref, useTemplateRef, watch } from \"vue\";\nimport { SliderRoot, SliderTrack, SliderRange, SliderThumb } from \"reka-ui\";\nimport { cn } from \"../../lib/cn\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { useAncestorDisabled } from \"../../lib/ancestor-disabled\";\nimport { useFieldControl } from \"../../lib/field-context\";\n\n/**\n * Slider — one continuous value inside a bounded range. Reach for it when the\n * range itself is the information: a volume, a ratio, a share of something\n * whole. A number that happens to be numeric but has no meaningful ceiling —\n * a coordinate, an angle — belongs in a NumberField instead.\n *\n * Built on Reka UI's Slider for the `role=\"slider\"` semantics, the pointer\n * drag and the arrow / Home / End stepping. Single-thumb only: Reka models the\n * value as an array, and this exposes a scalar.\n *\n * Two things are added here.\n *\n * The first is the drag buffer, and without it the component silently drops\n * changes. Given a defined model value Reka runs fully controlled, and its\n * release-time \"did this change?\" check compares against whatever it was last\n * fed — not against what it emitted. A host that correctly withholds transient\n * values until commit therefore leaves that check reading the pre-drag value\n * for the whole gesture, so it always answers no and the commit never fires.\n * `lastValue` below feeds Reka's own transient ticks back into its model, which\n * is exactly the fix NumberField applies for the same reason. Keyboard steps\n * need no buffer: Reka updates and commits inside one synchronous call, so it\n * compares against a value that is still old either way.\n *\n * The second is the abort path. Reka has no drag cancellation of its own — it\n * handles pointerdown, move and up, and commits whenever the release value\n * differs from the one it snapshotted — so Escape or a browser-issued\n * `pointercancel` mid-drag would still write one checkpoint on release. The\n * bail-out mirrors NumberField's: reset `lastValue` to the committed value, so\n * Reka's own comparison sees no change and never commits, and swallow the\n * still-captured pointer's remaining ticks until it releases.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself through\n * `useFieldControl()`: the row's id, the id of its hint or error line,\n * `required` and `invalid` all reach the thumb — which is the `role=\"slider\"`\n * element, and therefore the thing the row is talking about — and the row's\n * `name` reaches a hidden input, so\n * `<Field label=\"Volume\" error=\"…\"><Slider /></Field>` needs no attributes at\n * the call site. `disabled` still wins wherever it is set, in both directions,\n * which is why it defaults to `undefined` rather than `false`.\n *\n * **A row's label does not name it.** `<label for>` names a labelable element\n * and the thumb is a `span[role=\"slider\"]`, so the row's label resolves to it\n * and announces nobody. `aria-label`/`aria-labelledby` are still what name this\n * control, exactly as they were before — and they were always routed to the\n * thumb for the same reason the rest of this bag is.\n *\n * There is no `readonly`, and a row's is ignored rather than approximated. The\n * whole control is the drag: a track that shows a value and refuses to move is\n * a [Progress](../Progress/Progress.vue) bar wearing a thumb, and painting one\n * as live while swallowing every gesture is the state worse than either.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The current value. Transient drag positions are reported before it changes. */\n    modelValue?: number;\n    /** The floor of the range, and where Home lands. */\n    min?: number;\n    /** The ceiling of the range, and where End lands. */\n    max?: number;\n    /** The granularity of one arrow-key step and of the drag's own snapping. */\n    step?: number;\n    /** Unavailable: dims the track and refuses both the pointer and the keyboard. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n  }>(),\n  {\n    min: 0,\n    max: 1,\n    step: 0.01,\n    // Not `false`: absent has to stay tellable from `false` for a Field above\n    // to disable the row and for `:disabled=\"false\"` to overrule one that does.\n    // Vue casts an absent Boolean prop with no declared default to `false`,\n    // which would leave the context wired and inert.\n    disabled: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** Transient: every position the thumb passes through during a drag. Not a checkpoint. */\n  \"update:modelValue\": [value: number];\n  /** Committed: once at the end of a gesture — drag release, or a keyboard step. */\n  commit: [value: number];\n}>();\n\n// The root renders a real element, and it is the one a caller's `class` has to\n// land on — sizing and layout (`flex-1` to grow in a toolbar) are dead weight\n// on the thumb, which is a 16px absolutely-positioned circle no flex rule\n// reaches. Every other fallthrough attribute goes the other way, onto the\n// thumb: `aria-labelledby` describes the `role=\"slider\"` element, not the box\n// around it.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: thumbAttrs } = useSplitAttrs();\n\n/**\n * The one control in the library the platform cannot disable for us.\n *\n * `<fieldset disabled>` reaches `<input>`, `<button>`, `<select>` and\n * `<textarea>` and stops there, and Reka renders this thumb as a\n * `<span role=\"slider\" tabindex=\"0\">`. Measured in jsdom, a Slider inside a\n * disabled group kept its tab stop and still moved its value on Home and End —\n * identical behaviour to an available one. Painting it unavailable without\n * this would produce the worse defect rather than fix the visible one: a\n * control that looks unreachable and answers the keyboard anyway.\n *\n * It is read off the DOM rather than taken from the Field context because\n * `Fieldset.vue` deliberately publishes no `disabled` there — see\n * `../../lib/ancestor-disabled.ts` for why a read cannot drift from the\n * attribute the way a second declaration would.\n */\nconst root = useTemplateRef<{ $el?: Element }>(\"root\");\nconst groupDisabled = useAncestorDisabled(() => root.value?.$el);\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// `required` and `invalid` are absent from the object because there is no prop\n// to oppose the row with; the row's answer stands unopposed, which is what\n// wrapping the slider in a Field asked for.\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 a\n  // native control: an `<input :disabled=\"false\">` inside a disabled group is\n  // disabled too, so a Slider that said the same must not be the one exception.\n  disabled: groupDisabled.value ? true : props.disabled,\n}));\n\n// The resolved bag lands on the thumb for the same reason every other\n// fallthrough attribute does — it is the `role=\"slider\"` element, and an id, a\n// description or an `aria-invalid` describes that, not the box around it.\n//\n// `name` is the one key that goes the other way: a name on a thumb submits\n// nothing, so it drives the hidden input inside the root instead. Removed from\n// a copy rather than listed positively, so a key added to the resolved bag\n// later reaches the thumb without anyone remembering to come back here.\nconst thumbFieldAttrs = computed(() => {\n  const aria: Record<string, unknown> = { ...field.attrs };\n  delete aria.name;\n  return aria;\n});\n\n// What the Reka root is fed as its own model value: seeded from the prop, then\n// advanced on every tick Reka emits, so its release-time check sees the drag's\n// real end position rather than the frozen prop.\nconst lastValue = ref(props.modelValue);\nwatch(\n  () => props.modelValue,\n  (value) => {\n    lastValue.value = value;\n  },\n);\n\nconst values = computed(() => (lastValue.value === undefined ? [] : [lastValue.value]));\n\nfunction onUpdate(next: number[] | undefined) {\n  const value = next?.[0];\n  if (value === undefined || aborted) return;\n  lastValue.value = value;\n  emit(\"update:modelValue\", value);\n}\n\nfunction onCommit(next: number[]) {\n  if (next[0] !== undefined && !aborted) emit(\"commit\", next[0]);\n}\n\n// The abort path. Its window listeners live for the duration of one pointer\n// gesture and no longer.\nlet aborted = false;\nlet teardownDrag: (() => void) | undefined;\n\nfunction resetToCommitted() {\n  if (lastValue.value === props.modelValue) return;\n  lastValue.value = props.modelValue;\n  // One transient tick carrying the committed value, so the host can restore\n  // its pre-drag preview. Still never a checkpoint.\n  if (props.modelValue !== undefined) emit(\"update:modelValue\", props.modelValue);\n}\n\nfunction onRootPointerDown() {\n  if (field.disabled) return;\n  aborted = false;\n  const onDragKeydown = (keyEvent: KeyboardEvent) => {\n    if (keyEvent.key !== \"Escape\" || aborted) return;\n    keyEvent.preventDefault();\n    keyEvent.stopPropagation();\n    // Reka keeps the pointer captured until release, so `aborted` is what\n    // stops the remaining move ticks from resurrecting the gesture.\n    aborted = true;\n    resetToCommitted();\n  };\n  const onPointerUp = () => {\n    // This runs after Reka's own element-level release handling, so a\n    // swallowed gesture has already settled by the time the abort re-arms.\n    teardownDrag?.();\n    aborted = false;\n  };\n  const onPointerCancel = () => {\n    teardownDrag?.();\n    aborted = false; // a cancelled pointer emits no further ticks\n    resetToCommitted();\n  };\n  window.addEventListener(\"pointerup\", onPointerUp);\n  window.addEventListener(\"pointercancel\", onPointerCancel);\n  window.addEventListener(\"keydown\", onDragKeydown, true);\n  teardownDrag = () => {\n    window.removeEventListener(\"pointerup\", onPointerUp);\n    window.removeEventListener(\"pointercancel\", onPointerCancel);\n    window.removeEventListener(\"keydown\", onDragKeydown, true);\n    teardownDrag = undefined;\n  };\n}\n\nonBeforeUnmount(() => teardownDrag?.());\n</script>\n\n<template>\n  <SliderRoot\n    ref=\"root\"\n    :model-value=\"values\"\n    :min=\"min\"\n    :max=\"max\"\n    :step=\"step\"\n    :disabled=\"field.disabled\"\n    :class=\"\n      cn(\n        // Unavailability is painted in measured greys, never as an alpha over\n        // the available state: the filled range and the thumb's rim *are* the\n        // value, and `opacity-50` here took the range from 7.53:1 to 2.36:1\n        // on the page ground — below WCAG 1.4.11's 3:1 floor for a graphical\n        // object required to understand the control. The two parts drain to\n        // their own tokens below; `aria-valuenow` announces the number, but\n        // nothing re-paints it for a sighted reader, so the pixels stay.\n        'relative flex w-full touch-none items-center py-2 data-[disabled]:cursor-not-allowed',\n        attrs.class as string,\n      )\n    \"\n    @pointerdown=\"onRootPointerDown\"\n    @update:model-value=\"onUpdate\"\n    @value-commit=\"onCommit\"\n  >\n    <!-- Reka would mint this itself from a `name` on the root, but it models\n         the value as an array and posts it as `volume[0]`. This control\n         exposes a scalar and a row's `name` has to post one: a field that\n         spells itself differently depending on which control its row holds is\n         exactly the surprise the Field context exists to remove.\n\n         `lastValue` and not `modelValue`, so what is submitted is what the\n         thumb is showing: a host that withholds transient values until commit\n         leaves the prop behind for the length of a gesture. -->\n    <input\n      v-if=\"field.name !== undefined\"\n      type=\"hidden\"\n      :name=\"field.name\"\n      :value=\"lastValue\"\n      :disabled=\"field.disabled\"\n    />\n    <SliderTrack class=\"relative h-1.5 w-full grow rounded-full bg-muted\">\n      <!-- The filled range is a value a person set, so it is painted flat in\n           the primary colour rather than in a gradient. Unavailable, it\n           falls to the neutral well like every other control's value, keyed\n           off Reka's own `data-disabled` on this node: `muted-foreground` is\n           5.25:1 on the page ground and 4.67:1 against the `bg-muted` track\n           it sits on, both measured. -->\n      <SliderRange\n        class=\"absolute h-full rounded-full bg-primary data-[disabled]:bg-muted-foreground\"\n      />\n    </SliderTrack>\n    <!-- The thumb's position is the value, so its rim drains with the range —\n         `muted-foreground` at 5.25:1 on the page ground — while its fill,\n         which is the page's own ground, needs no dim. -->\n    <SliderThumb\n      v-bind=\"{ ...thumbAttrs, ...thumbFieldAttrs }\"\n      class=\"block h-4 w-4 rounded-full border-2 border-primary bg-background shadow-sm transition-transform duration-fast ease-spring hover:scale-110 active:scale-95 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo data-[disabled]:pointer-events-none data-[disabled]:border-muted-foreground\"\n    />\n  </SliderRoot>\n</template>\n"],"mappings":""}