@ecoma-io/loom 0.4.0 → 0.6.0

package/dist/primitives/stepper/src/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","names":[],"sources":["../../../../packages/primitives/stepper/src/Stepper.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { StepperLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n *\n * `group` is capitalised where Reka's is not, which is what lets\n * `Stepper.test.ts` assert whose string reached the DOM rather than merely\n * what it said.\n */\nexport const STEPPER_LABELS: StepperLabels = {\n  group: \"Progress\",\n  position: ({ step, stepCount }) => `Step ${String(step)} of ${String(stepCount)}`,\n  step: ({ step }) => `Step ${String(step)}:`,\n  completed: ({ title }) => `${title} (completed)`,\n};\n\n/** One step in the spine. Its `title` is also the accessible name of that step's trigger. */\nexport interface StepperStep {\n  /** The step's label, shown next to its indicator and read out as the trigger's name. */\n  title: string;\n  /** A line under the title saying what the step asks for. Omit it for a bare spine. */\n  description?: string;\n  /** Present but unreachable: the indicator greys and the title mutes, and neither pointer nor keyboard can select it. */\n  disabled?: boolean;\n}\n\n/** The axis the spine runs along, which also decides which arrow keys move between steps. */\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport {\n  StepperDescription,\n  StepperIndicator,\n  StepperItem,\n  StepperRoot,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"reka-ui\";\nimport { Check } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Stepper — the progress spine of a multi-step flow: a checkout, an\n * onboarding sequence, a wizard. It says how many steps there are, which one\n * a reader is on, and which are behind them; the step's own content is the\n * host's, rendered next to or under the spine.\n *\n * It is **not** a number stepper. A numeric value with increment and\n * decrement buttons is NumberField. The word is genuinely ambiguous and both\n * controls answer to it, so the two are worth naming together: this one is\n * about position in a flow, that one is about a quantity.\n *\n * Progress shows one bar for one task whose extent is a percentage — reach\n * for it when the stages have no names worth showing. Tabs switches between\n * panels that have no order at all; a stepper's steps are ordered by\n * definition, which is why it carries a connector and Tabs carries none.\n *\n * Built on Reka UI's Stepper, which supplies the item state machine\n * (completed / active / inactive), the `linear` reachability rule and\n * arrow-key navigation along the orientation's axis.\n *\n * Three things are added on top of it.\n *\n * The first is the roving tab stop. Reka gives *every* focusable trigger\n * `tabindex=\"0\"`, so a five-step spine would be five Tab stops — the defect\n * the accessibility bar names outright. The `tabindex` bound below overrides\n * Reka's, leaving exactly one trigger tabbable at a time (the one last\n * focused, else the current step); Reka's own arrow-key handler still moves\n * real focus between them, which `tabindex=\"-1\"` does not prevent.\n *\n * The second is where `aria-current` sits. Reka puts `aria-current=\"true\"` on\n * the item wrapper, a `div` with no role that a reader never lands on, so the\n * marking is not conveyed at the moment it matters. It is moved here onto the\n * trigger — the element that takes focus — and given the value the WAI-ARIA\n * pattern asks for on a step in a process.\n *\n * The third is the live region. Reka renders one of its own on the root and\n * writes \"Step N of M\" into it as a **text node inside its render function** —\n * not a prop, not a slot, not an attribute — which makes it the one string in\n * this library that no binding on Loom's side can replace. So Loom renders its\n * own alongside it and takes Reka's out of the accessibility tree from\n * `src/styles/global.css`, which carries that reasoning and the coupling it\n * creates. `e2e/stepper.e2e.ts` is what keeps the coupling honest: it asserts\n * that a Loom stepper has exactly one live region and that its words are\n * Loom's.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The current step, 1-based. Omit it and Stepper owns its own position. */\n    modelValue?: number;\n    /** The ordered steps. Their index decides their number; there is no id to keep. */\n    steps: StepperStep[];\n    /** The axis the spine runs along; vertical moves the titles beside the indicators. */\n    orientation?: StepperOrientation;\n    /** Locks the flow to its furthest point: a reader may go back, or one step on, never jump ahead. */\n    linear?: boolean;\n    /**\n     * Names for everything the spine says out loud, as any subset of\n     * `StepperLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     *\n     * A whole application's language belongs in that vocabulary rather than\n     * here. This is the per-instance correction, and the key it exists for is\n     * `group`: a page with two flows on it needs each named for what it steps\n     * through.\n     */\n    labels?: LabelOverrides<StepperLabels>;\n  }>(),\n  { orientation: \"horizontal\", linear: false },\n);\n\nconst emit = defineEmits<{\n  /** The step chosen, 1-based. Fires for a trigger click and for Enter/Space on one. */\n  \"update:modelValue\": [value: number];\n}>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"stepper\", STEPPER_LABELS, () => props.labels);\n\n// The root renders a real element and it is the one every fallthrough\n// attribute belongs on: it is the `role=\"group\"` the whole spine lives in, so\n// an `aria-label` naming the flow lands there. It is spread *after*\n// `text.group` in the template for that reason — the vocabulary supplies the\n// name a spine has when nobody names it, and a caller who does name one still\n// wins. `class` is pulled out of the spread and merged through `cn()` instead,\n// so a caller's layout utility resolves against the root's own rather than\n// merely being concatenated after it.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: rootAttrs } = useSplitAttrs();\n\n/**\n * The two layouts, side by side rather than as template branches that drift\n * apart. `satisfies` is what stops an orientation being added to the type and\n * forgotten here.\n *\n * Horizontal hangs the connector off the item box (`relative`) rather than\n * off the rail: `left-1/2 w-full` then spans exactly the distance between two\n * indicator centres, since the items are equal-width flex children. It is\n * drawn behind them — the trigger is `relative`, so it and every later item's\n * trigger paint over a line that runs under the circles.\n */\nconst LAYOUTS = {\n  horizontal: {\n    root: \"flex w-full items-start\",\n    item: \"relative flex flex-1 flex-col items-center gap-2 text-center\",\n    rail: \"\",\n    separator: \"absolute left-1/2 top-4 h-0.5 w-full -translate-y-1/2\",\n    fill: \"origin-left scale-x-0\",\n    filled: \"scale-x-100\",\n    text: \"flex flex-col gap-0.5\",\n  },\n  vertical: {\n    root: \"flex flex-col\",\n    item: \"flex gap-3\",\n    rail: \"flex flex-col items-center self-stretch\",\n    // `order-1` rather than a second template branch: the connector has to be\n    // declared before the trigger so the trigger paints over it, and has to sit\n    // below the trigger once the rail is a column.\n    separator: \"order-1 my-1 w-0.5 flex-1\",\n    fill: \"origin-top scale-y-0\",\n    filled: \"scale-y-100\",\n    text: \"flex flex-col gap-0.5\",\n  },\n} satisfies Record<StepperOrientation, Record<string, string>>;\n\nconst layout = computed(() => LAYOUTS[props.orientation]);\n\n/** The step that last held focus, and so owns the spine's single tab stop. */\nconst focused = ref<number | null>(null);\n\n/**\n * Reka's own focusability rule, mirrored: a linear stepper refuses focus to\n * anything past one step ahead of where the reader is. It has to be repeated\n * rather than read off the DOM, because the tab stop is decided while the\n * `tabindex` attributes are still being rendered — and a tab stop parked on a\n * step Reka will not focus leaves the whole spine unreachable by Tab.\n */\nfunction focusable(step: number, current: number): boolean {\n  if (props.steps[step - 1]?.disabled) return false;\n  return props.linear ? step <= current + 1 : true;\n}\n\n/**\n * The one step whose trigger is tabbable. Everything else is `tabindex=\"-1\"`.\n *\n * Reka types the value it hands its own slot as possibly absent even though\n * `StepperRoot` defaults it to 1, so the fallback here is that declaration\n * being honoured rather than a state this can reach.\n */\nfunction tabStop(current: number | undefined): number {\n  const at = current ?? 1;\n  if (focused.value !== null && focusable(focused.value, at)) return focused.value;\n  if (focusable(at, at)) return at;\n  return props.steps.findIndex((_, index) => focusable(index + 1, at)) + 1;\n}\n\n/**\n * Reka points every trigger's `aria-describedby` at a description id whether\n * or not that description was rendered, and a reference resolving to nothing\n * is worse than no reference: it claims a description exists. Binding the key\n * as `undefined` is what takes it back off, since an attribute set to\n * `undefined` is removed rather than merged.\n */\nfunction describedBy(step: StepperStep): Record<string, undefined> {\n  return step.description === undefined ? { \"aria-describedby\": undefined } : {};\n}\n\n/** Reka reports its position as possibly absent; this component's model is a step number or nothing at all. */\nfunction onUpdate(value: number | undefined): void {\n  if (value !== undefined) emit(\"update:modelValue\", value);\n}\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"{ modelValue: current }\"\n    v-bind=\"{ 'aria-label': text.group, ...rootAttrs, ...optional({ modelValue }) }\"\n    data-loom-stepper\n    :orientation=\"orientation\"\n    :linear=\"linear\"\n    :class=\"cn(layout.root, attrs.class as string)\"\n    @update:model-value=\"onUpdate\"\n  >\n    <StepperItem\n      v-for=\"(step, index) in steps\"\n      :key=\"index\"\n      v-slot=\"{ state }\"\n      :step=\"index + 1\"\n      :disabled=\"step.disabled ?? false\"\n      :aria-current=\"undefined\"\n      :class=\"layout.item\"\n    >\n      <div :class=\"layout.rail\">\n        <!-- Declared before the trigger so the trigger paints over it: the\n             connector runs from this indicator's centre to the next one's. -->\n        <StepperSeparator\n          v-if=\"index < steps.length - 1\"\n          :class=\"cn('overflow-hidden rounded-full bg-border', layout.separator)\"\n        >\n          <span\n            :class=\"\n              cn(\n                'block h-full w-full bg-primary transition-transform ease-out',\n                layout.fill,\n                state === 'completed' && layout.filled,\n              )\n            \"\n          />\n        </StepperSeparator>\n\n        <StepperTrigger\n          v-bind=\"describedBy(step)\"\n          :tabindex=\"tabStop(current) === index + 1 ? 0 : -1\"\n          :aria-current=\"state === 'active' ? 'step' : undefined\"\n          :class=\"\n            cn(\n              'relative flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-xs font-medium',\n              'transition-colors ease-out',\n              'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n              // Unavailable is a *colour*, and the whole distinction lives on\n              // the indicator. It used to be `opacity-50` on the item, which\n              // took the title and the description down with it:\n              // `--color-muted-foreground` is 5.76:1 on white and 2.11:1 once\n              // composited at half alpha, so the one thing that had to stay\n              // readable was the one thing the fade broke. A grey-filled disc\n              // against the inactive step's white one says the same thing and\n              // costs nothing, and every string below is a measured pair.\n              //\n              // Keyed off the prop and NOT off `data-[disabled]:`, because in\n              // a linear flow Reka marks every step past the next one disabled\n              // — painting all of them unavailable reads as broken rather than\n              // as later, and a step that is merely ahead already says so by\n              // being inactive. The branch also keeps the two apart in the\n              // cascade: the inactive rules carry an attribute selector, so a\n              // plain `bg-muted` alongside them would lose.\n              step.disabled\n                ? 'border-border-strong bg-muted text-muted-foreground'\n                : [\n                    'data-[state=inactive]:border-input data-[state=inactive]:bg-background data-[state=inactive]:text-muted-foreground',\n                    'data-[state=inactive]:enabled:hover:bg-subtle',\n                  ],\n              'data-[state=active]:border-primary data-[state=active]:bg-primary-muted data-[state=active]:text-primary-text',\n              'data-[state=completed]:border-primary data-[state=completed]:bg-primary data-[state=completed]:text-primary-foreground',\n              'disabled:cursor-not-allowed',\n            )\n          \"\n          @focus=\"focused = index + 1\"\n        >\n          <StepperIndicator class=\"flex items-center justify-center\">\n            <!-- Three states, none of them colour alone: the check is a shape\n                 change, the number is text, and the current step carries\n                 `aria-current` above. -->\n            <Check v-if=\"state === 'completed'\" class=\"h-4 w-4 animate-scale-in\" />\n            <template v-else>{{ index + 1 }}</template>\n          </StepperIndicator>\n        </StepperTrigger>\n      </div>\n\n      <div\n        :class=\"cn(layout.text, orientation === 'vertical' && index < steps.length - 1 && 'pb-6')\"\n      >\n        <!-- `as=\"span\"`, not Reka's default `h4`: a step label is not a\n             section heading, and a component cannot know what heading level\n             the page it lands in has room for. -->\n        <!-- The title mutes rather than fades: `--color-muted-foreground` is a\n             measured 5.76:1 on the card it sits on, two steps back from\n             `--color-foreground` and still comfortably readable. The\n             description below is already that colour and stays there — an\n             unreachable step's description is the one line a reader most needs\n             in order to find out why it is unreachable. -->\n        <StepperTitle\n          as=\"span\"\n          :class=\"\n            cn('text-sm font-medium', step.disabled ? 'text-muted-foreground' : 'text-foreground')\n          \"\n        >\n          <!-- ARIA has a value for \"you are here\" and none for \"done\", and the\n               check glyph is invisible to a screen reader. This element is what\n               `aria-labelledby` names the trigger with, so the word has to join\n               the name from inside it.\n               Two nodes rather than the title plus a trailing \"(completed)\"\n               span, because a suffix is Loom deciding where a qualifier sits\n               relative to the thing it qualifies, and that is a property of the\n               language. The visible half is `aria-hidden` and excluded from the\n               name computation; the hidden half carries the whole finished\n               sentence the vocabulary returned. -->\n          <!-- The position leads the name for the same reason: the trigger's\n               visible text is the step's number, and WCAG 2.5.3 (Label in\n               Name) makes a control's visible text part of its accessible\n               name. Measured 2026-08-26, `label-content-name-mismatch` fired\n               on every non-completed trigger until the number joined the\n               name — a voice user saying \"Step 2\" has to land on the same\n               trigger one saying \"Shipping\" does. -->\n          <span class=\"sr-only\">{{ text.step({ step: index + 1 }) }}</span>\n          <template v-if=\"state === 'completed'\">\n            <span aria-hidden=\"true\">{{ step.title }}</span>\n            <span class=\"sr-only\">{{ text.completed({ title: step.title }) }}</span>\n          </template>\n          <template v-else>{{ step.title }}</template>\n        </StepperTitle>\n        <StepperDescription v-if=\"step.description\" class=\"text-xs text-muted-foreground\">\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n\n    <!-- Loom's own position announcement, standing in for the one `StepperRoot`\n         renders as a text node its render function hard-codes in English.\n         `data-loom-live` is what the rule in `global.css` selects *around* when\n         it removes Reka's from the accessibility tree, so the two are told\n         apart by what Loom marked rather than by DOM order.\n         The count comes from `steps` rather than from Reka's registry, which\n         fills in over a tick as each trigger mounts — the same number, one\n         render sooner, which matters for a region a screen reader reads on\n         arrival. -->\n    <span data-loom-live role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{\n      text.position({ step: current ?? 1, stepCount: steps.length })\n    }}</span>\n  </StepperRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/stepper/src/Stepper.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,208 @@
+import { cn } from "../../../core/src/cn.js";
+import { optional } from "../../../core/src/props.js";
+import { useSplitAttrs } from "../../../core/src/attrs.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, withCtx } from "vue";
+import { Check } from "@lucide/vue";
+import { StepperDescription, StepperIndicator, StepperItem, StepperRoot, StepperSeparator, StepperTitle, StepperTrigger } from "reka-ui";
+//#region packages/primitives/stepper/src/Stepper.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "sr-only" };
+var _hoisted_2 = { "aria-hidden": "true" };
+var _hoisted_3 = { class: "sr-only" };
+var _hoisted_4 = {
+	"data-loom-live": "",
+	role: "status",
+	"aria-live": "polite",
+	"aria-atomic": "true",
+	class: "sr-only"
+};
+/**
+
+/**
+* Loom's English, co-located with the component so it tree-shakes with it, and
+* exported so a host can build a partial vocabulary against the real thing.
+*
+* `group` is capitalised where Reka's is not, which is what lets
+* `Stepper.test.ts` assert whose string reached the DOM rather than merely
+* what it said.
+*/
+var STEPPER_LABELS = {
+	group: "Progress",
+	position: ({ step, stepCount }) => `Step ${String(step)} of ${String(stepCount)}`,
+	step: ({ step }) => `Step ${String(step)}:`,
+	completed: ({ title }) => `${title} (completed)`
+};
+var Stepper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "Stepper",
+	props: {
+		modelValue: {},
+		steps: {},
+		orientation: { default: "horizontal" },
+		linear: {
+			type: Boolean,
+			default: false
+		},
+		labels: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const text = useLabels("stepper", STEPPER_LABELS, () => props.labels);
+		const { attrs, rest: rootAttrs } = useSplitAttrs();
+		/**
+		* The two layouts, side by side rather than as template branches that drift
+		* apart. `satisfies` is what stops an orientation being added to the type and
+		* forgotten here.
+		*
+		* Horizontal hangs the connector off the item box (`relative`) rather than
+		* off the rail: `left-1/2 w-full` then spans exactly the distance between two
+		* indicator centres, since the items are equal-width flex children. It is
+		* drawn behind them — the trigger is `relative`, so it and every later item's
+		* trigger paint over a line that runs under the circles.
+		*/
+		const LAYOUTS = {
+			horizontal: {
+				root: "flex w-full items-start",
+				item: "relative flex flex-1 flex-col items-center gap-2 text-center",
+				rail: "",
+				separator: "absolute left-1/2 top-4 h-0.5 w-full -translate-y-1/2",
+				fill: "origin-left scale-x-0",
+				filled: "scale-x-100",
+				text: "flex flex-col gap-0.5"
+			},
+			vertical: {
+				root: "flex flex-col",
+				item: "flex gap-3",
+				rail: "flex flex-col items-center self-stretch",
+				separator: "order-1 my-1 w-0.5 flex-1",
+				fill: "origin-top scale-y-0",
+				filled: "scale-y-100",
+				text: "flex flex-col gap-0.5"
+			}
+		};
+		const layout = computed(() => LAYOUTS[props.orientation]);
+		/** The step that last held focus, and so owns the spine's single tab stop. */
+		const focused = ref(null);
+		/**
+		* Reka's own focusability rule, mirrored: a linear stepper refuses focus to
+		* anything past one step ahead of where the reader is. It has to be repeated
+		* rather than read off the DOM, because the tab stop is decided while the
+		* `tabindex` attributes are still being rendered — and a tab stop parked on a
+		* step Reka will not focus leaves the whole spine unreachable by Tab.
+		*/
+		function focusable(step, current) {
+			if (props.steps[step - 1]?.disabled) return false;
+			return props.linear ? step <= current + 1 : true;
+		}
+		/**
+		* The one step whose trigger is tabbable. Everything else is `tabindex="-1"`.
+		*
+		* Reka types the value it hands its own slot as possibly absent even though
+		* `StepperRoot` defaults it to 1, so the fallback here is that declaration
+		* being honoured rather than a state this can reach.
+		*/
+		function tabStop(current) {
+			const at = current ?? 1;
+			if (focused.value !== null && focusable(focused.value, at)) return focused.value;
+			if (focusable(at, at)) return at;
+			return props.steps.findIndex((_, index) => focusable(index + 1, at)) + 1;
+		}
+		/**
+		* Reka points every trigger's `aria-describedby` at a description id whether
+		* or not that description was rendered, and a reference resolving to nothing
+		* is worse than no reference: it claims a description exists. Binding the key
+		* as `undefined` is what takes it back off, since an attribute set to
+		* `undefined` is removed rather than merged.
+		*/
+		function describedBy(step) {
+			return step.description === void 0 ? { "aria-describedby": void 0 } : {};
+		}
+		/** Reka reports its position as possibly absent; this component's model is a step number or nothing at all. */
+		function onUpdate(value) {
+			if (value !== void 0) emit("update:modelValue", value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(StepperRoot), mergeProps({
+				"aria-label": unref(text).group,
+				...unref(rootAttrs),
+				...unref(optional)({ modelValue: __props.modelValue })
+			}, {
+				"data-loom-stepper": "",
+				orientation: __props.orientation,
+				linear: __props.linear,
+				class: unref(cn)(layout.value.root, unref(attrs).class),
+				"onUpdate:modelValue": onUpdate
+			}), {
+				default: withCtx(({ modelValue: current }) => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.steps, (step, index) => {
+					return openBlock(), createBlock(unref(StepperItem), {
+						key: index,
+						step: index + 1,
+						disabled: step.disabled ?? false,
+						"aria-current": void 0,
+						class: normalizeClass(layout.value.item)
+					}, {
+						default: withCtx(({ state }) => [createElementVNode("div", { class: normalizeClass(layout.value.rail) }, [index < __props.steps.length - 1 ? (openBlock(), createBlock(unref(StepperSeparator), {
+							key: 0,
+							class: normalizeClass(unref(cn)("overflow-hidden rounded-full bg-border", layout.value.separator))
+						}, {
+							default: withCtx(() => [createElementVNode("span", { class: normalizeClass(unref(cn)("block h-full w-full bg-primary transition-transform ease-out", layout.value.fill, state === "completed" && layout.value.filled)) }, null, 2)]),
+							_: 2
+						}, 1032, ["class"])) : createCommentVNode("", true), createVNode(unref(StepperTrigger), mergeProps({ ref_for: true }, describedBy(step), {
+							tabindex: tabStop(current) === index + 1 ? 0 : -1,
+							"aria-current": state === "active" ? "step" : void 0,
+							class: unref(cn)("relative flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-xs font-medium", "transition-colors ease-out", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", step.disabled ? "border-border-strong bg-muted text-muted-foreground" : ["data-[state=inactive]:border-input data-[state=inactive]:bg-background data-[state=inactive]:text-muted-foreground", "data-[state=inactive]:enabled:hover:bg-subtle"], "data-[state=active]:border-primary data-[state=active]:bg-primary-muted data-[state=active]:text-primary-text", "data-[state=completed]:border-primary data-[state=completed]:bg-primary data-[state=completed]:text-primary-foreground", "disabled:cursor-not-allowed"),
+							onFocus: ($event) => focused.value = index + 1
+						}), {
+							default: withCtx(() => [createVNode(unref(StepperIndicator), { class: "flex items-center justify-center" }, {
+								default: withCtx(() => [state === "completed" ? (openBlock(), createBlock(unref(Check), {
+									key: 0,
+									class: "h-4 w-4 animate-scale-in"
+								})) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(index + 1), 1)], 64))]),
+								_: 2
+							}, 1024)]),
+							_: 2
+						}, 1040, [
+							"tabindex",
+							"aria-current",
+							"class",
+							"onFocus"
+						])], 2), createElementVNode("div", { class: normalizeClass(unref(cn)(layout.value.text, __props.orientation === "vertical" && index < __props.steps.length - 1 && "pb-6")) }, [createVNode(unref(StepperTitle), {
+							as: "span",
+							class: normalizeClass(unref(cn)("text-sm font-medium", step.disabled ? "text-muted-foreground" : "text-foreground"))
+						}, {
+							default: withCtx(() => [createElementVNode("span", _hoisted_1, toDisplayString(unref(text).step({ step: index + 1 })), 1), state === "completed" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_2, toDisplayString(step.title), 1), createElementVNode("span", _hoisted_3, toDisplayString(unref(text).completed({ title: step.title })), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(step.title), 1)], 64))]),
+							_: 2
+						}, 1032, ["class"]), step.description ? (openBlock(), createBlock(unref(StepperDescription), {
+							key: 0,
+							class: "text-xs text-muted-foreground"
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(step.description), 1)]),
+							_: 2
+						}, 1024)) : createCommentVNode("", true)], 2)]),
+						_: 2
+					}, 1032, [
+						"step",
+						"disabled",
+						"class"
+					]);
+				}), 128)), createElementVNode("span", _hoisted_4, toDisplayString(unref(text).position({
+					step: current ?? 1,
+					stepCount: __props.steps.length
+				})), 1)]),
+				_: 1
+			}, 16, [
+				"orientation",
+				"linear",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { STEPPER_LABELS, Stepper_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Stepper.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/stepper/src/Stepper.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/stepper/src/Stepper.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { StepperLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n *\n * `group` is capitalised where Reka's is not, which is what lets\n * `Stepper.test.ts` assert whose string reached the DOM rather than merely\n * what it said.\n */\nexport const STEPPER_LABELS: StepperLabels = {\n  group: \"Progress\",\n  position: ({ step, stepCount }) => `Step ${String(step)} of ${String(stepCount)}`,\n  step: ({ step }) => `Step ${String(step)}:`,\n  completed: ({ title }) => `${title} (completed)`,\n};\n\n/** One step in the spine. Its `title` is also the accessible name of that step's trigger. */\nexport interface StepperStep {\n  /** The step's label, shown next to its indicator and read out as the trigger's name. */\n  title: string;\n  /** A line under the title saying what the step asks for. Omit it for a bare spine. */\n  description?: string;\n  /** Present but unreachable: the indicator greys and the title mutes, and neither pointer nor keyboard can select it. */\n  disabled?: boolean;\n}\n\n/** The axis the spine runs along, which also decides which arrow keys move between steps. */\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport {\n  StepperDescription,\n  StepperIndicator,\n  StepperItem,\n  StepperRoot,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"reka-ui\";\nimport { Check } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Stepper — the progress spine of a multi-step flow: a checkout, an\n * onboarding sequence, a wizard. It says how many steps there are, which one\n * a reader is on, and which are behind them; the step's own content is the\n * host's, rendered next to or under the spine.\n *\n * It is **not** a number stepper. A numeric value with increment and\n * decrement buttons is NumberField. The word is genuinely ambiguous and both\n * controls answer to it, so the two are worth naming together: this one is\n * about position in a flow, that one is about a quantity.\n *\n * Progress shows one bar for one task whose extent is a percentage — reach\n * for it when the stages have no names worth showing. Tabs switches between\n * panels that have no order at all; a stepper's steps are ordered by\n * definition, which is why it carries a connector and Tabs carries none.\n *\n * Built on Reka UI's Stepper, which supplies the item state machine\n * (completed / active / inactive), the `linear` reachability rule and\n * arrow-key navigation along the orientation's axis.\n *\n * Three things are added on top of it.\n *\n * The first is the roving tab stop. Reka gives *every* focusable trigger\n * `tabindex=\"0\"`, so a five-step spine would be five Tab stops — the defect\n * the accessibility bar names outright. The `tabindex` bound below overrides\n * Reka's, leaving exactly one trigger tabbable at a time (the one last\n * focused, else the current step); Reka's own arrow-key handler still moves\n * real focus between them, which `tabindex=\"-1\"` does not prevent.\n *\n * The second is where `aria-current` sits. Reka puts `aria-current=\"true\"` on\n * the item wrapper, a `div` with no role that a reader never lands on, so the\n * marking is not conveyed at the moment it matters. It is moved here onto the\n * trigger — the element that takes focus — and given the value the WAI-ARIA\n * pattern asks for on a step in a process.\n *\n * The third is the live region. Reka renders one of its own on the root and\n * writes \"Step N of M\" into it as a **text node inside its render function** —\n * not a prop, not a slot, not an attribute — which makes it the one string in\n * this library that no binding on Loom's side can replace. So Loom renders its\n * own alongside it and takes Reka's out of the accessibility tree from\n * `src/styles/global.css`, which carries that reasoning and the coupling it\n * creates. `e2e/stepper.e2e.ts` is what keeps the coupling honest: it asserts\n * that a Loom stepper has exactly one live region and that its words are\n * Loom's.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The current step, 1-based. Omit it and Stepper owns its own position. */\n    modelValue?: number;\n    /** The ordered steps. Their index decides their number; there is no id to keep. */\n    steps: StepperStep[];\n    /** The axis the spine runs along; vertical moves the titles beside the indicators. */\n    orientation?: StepperOrientation;\n    /** Locks the flow to its furthest point: a reader may go back, or one step on, never jump ahead. */\n    linear?: boolean;\n    /**\n     * Names for everything the spine says out loud, as any subset of\n     * `StepperLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     *\n     * A whole application's language belongs in that vocabulary rather than\n     * here. This is the per-instance correction, and the key it exists for is\n     * `group`: a page with two flows on it needs each named for what it steps\n     * through.\n     */\n    labels?: LabelOverrides<StepperLabels>;\n  }>(),\n  { orientation: \"horizontal\", linear: false },\n);\n\nconst emit = defineEmits<{\n  /** The step chosen, 1-based. Fires for a trigger click and for Enter/Space on one. */\n  \"update:modelValue\": [value: number];\n}>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"stepper\", STEPPER_LABELS, () => props.labels);\n\n// The root renders a real element and it is the one every fallthrough\n// attribute belongs on: it is the `role=\"group\"` the whole spine lives in, so\n// an `aria-label` naming the flow lands there. It is spread *after*\n// `text.group` in the template for that reason — the vocabulary supplies the\n// name a spine has when nobody names it, and a caller who does name one still\n// wins. `class` is pulled out of the spread and merged through `cn()` instead,\n// so a caller's layout utility resolves against the root's own rather than\n// merely being concatenated after it.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: rootAttrs } = useSplitAttrs();\n\n/**\n * The two layouts, side by side rather than as template branches that drift\n * apart. `satisfies` is what stops an orientation being added to the type and\n * forgotten here.\n *\n * Horizontal hangs the connector off the item box (`relative`) rather than\n * off the rail: `left-1/2 w-full` then spans exactly the distance between two\n * indicator centres, since the items are equal-width flex children. It is\n * drawn behind them — the trigger is `relative`, so it and every later item's\n * trigger paint over a line that runs under the circles.\n */\nconst LAYOUTS = {\n  horizontal: {\n    root: \"flex w-full items-start\",\n    item: \"relative flex flex-1 flex-col items-center gap-2 text-center\",\n    rail: \"\",\n    separator: \"absolute left-1/2 top-4 h-0.5 w-full -translate-y-1/2\",\n    fill: \"origin-left scale-x-0\",\n    filled: \"scale-x-100\",\n    text: \"flex flex-col gap-0.5\",\n  },\n  vertical: {\n    root: \"flex flex-col\",\n    item: \"flex gap-3\",\n    rail: \"flex flex-col items-center self-stretch\",\n    // `order-1` rather than a second template branch: the connector has to be\n    // declared before the trigger so the trigger paints over it, and has to sit\n    // below the trigger once the rail is a column.\n    separator: \"order-1 my-1 w-0.5 flex-1\",\n    fill: \"origin-top scale-y-0\",\n    filled: \"scale-y-100\",\n    text: \"flex flex-col gap-0.5\",\n  },\n} satisfies Record<StepperOrientation, Record<string, string>>;\n\nconst layout = computed(() => LAYOUTS[props.orientation]);\n\n/** The step that last held focus, and so owns the spine's single tab stop. */\nconst focused = ref<number | null>(null);\n\n/**\n * Reka's own focusability rule, mirrored: a linear stepper refuses focus to\n * anything past one step ahead of where the reader is. It has to be repeated\n * rather than read off the DOM, because the tab stop is decided while the\n * `tabindex` attributes are still being rendered — and a tab stop parked on a\n * step Reka will not focus leaves the whole spine unreachable by Tab.\n */\nfunction focusable(step: number, current: number): boolean {\n  if (props.steps[step - 1]?.disabled) return false;\n  return props.linear ? step <= current + 1 : true;\n}\n\n/**\n * The one step whose trigger is tabbable. Everything else is `tabindex=\"-1\"`.\n *\n * Reka types the value it hands its own slot as possibly absent even though\n * `StepperRoot` defaults it to 1, so the fallback here is that declaration\n * being honoured rather than a state this can reach.\n */\nfunction tabStop(current: number | undefined): number {\n  const at = current ?? 1;\n  if (focused.value !== null && focusable(focused.value, at)) return focused.value;\n  if (focusable(at, at)) return at;\n  return props.steps.findIndex((_, index) => focusable(index + 1, at)) + 1;\n}\n\n/**\n * Reka points every trigger's `aria-describedby` at a description id whether\n * or not that description was rendered, and a reference resolving to nothing\n * is worse than no reference: it claims a description exists. Binding the key\n * as `undefined` is what takes it back off, since an attribute set to\n * `undefined` is removed rather than merged.\n */\nfunction describedBy(step: StepperStep): Record<string, undefined> {\n  return step.description === undefined ? { \"aria-describedby\": undefined } : {};\n}\n\n/** Reka reports its position as possibly absent; this component's model is a step number or nothing at all. */\nfunction onUpdate(value: number | undefined): void {\n  if (value !== undefined) emit(\"update:modelValue\", value);\n}\n</script>\n\n<template>\n  <StepperRoot\n    v-slot=\"{ modelValue: current }\"\n    v-bind=\"{ 'aria-label': text.group, ...rootAttrs, ...optional({ modelValue }) }\"\n    data-loom-stepper\n    :orientation=\"orientation\"\n    :linear=\"linear\"\n    :class=\"cn(layout.root, attrs.class as string)\"\n    @update:model-value=\"onUpdate\"\n  >\n    <StepperItem\n      v-for=\"(step, index) in steps\"\n      :key=\"index\"\n      v-slot=\"{ state }\"\n      :step=\"index + 1\"\n      :disabled=\"step.disabled ?? false\"\n      :aria-current=\"undefined\"\n      :class=\"layout.item\"\n    >\n      <div :class=\"layout.rail\">\n        <!-- Declared before the trigger so the trigger paints over it: the\n             connector runs from this indicator's centre to the next one's. -->\n        <StepperSeparator\n          v-if=\"index < steps.length - 1\"\n          :class=\"cn('overflow-hidden rounded-full bg-border', layout.separator)\"\n        >\n          <span\n            :class=\"\n              cn(\n                'block h-full w-full bg-primary transition-transform ease-out',\n                layout.fill,\n                state === 'completed' && layout.filled,\n              )\n            \"\n          />\n        </StepperSeparator>\n\n        <StepperTrigger\n          v-bind=\"describedBy(step)\"\n          :tabindex=\"tabStop(current) === index + 1 ? 0 : -1\"\n          :aria-current=\"state === 'active' ? 'step' : undefined\"\n          :class=\"\n            cn(\n              'relative flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-xs font-medium',\n              'transition-colors ease-out',\n              'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n              // Unavailable is a *colour*, and the whole distinction lives on\n              // the indicator. It used to be `opacity-50` on the item, which\n              // took the title and the description down with it:\n              // `--color-muted-foreground` is 5.76:1 on white and 2.11:1 once\n              // composited at half alpha, so the one thing that had to stay\n              // readable was the one thing the fade broke. A grey-filled disc\n              // against the inactive step's white one says the same thing and\n              // costs nothing, and every string below is a measured pair.\n              //\n              // Keyed off the prop and NOT off `data-[disabled]:`, because in\n              // a linear flow Reka marks every step past the next one disabled\n              // — painting all of them unavailable reads as broken rather than\n              // as later, and a step that is merely ahead already says so by\n              // being inactive. The branch also keeps the two apart in the\n              // cascade: the inactive rules carry an attribute selector, so a\n              // plain `bg-muted` alongside them would lose.\n              step.disabled\n                ? 'border-border-strong bg-muted text-muted-foreground'\n                : [\n                    'data-[state=inactive]:border-input data-[state=inactive]:bg-background data-[state=inactive]:text-muted-foreground',\n                    'data-[state=inactive]:enabled:hover:bg-subtle',\n                  ],\n              'data-[state=active]:border-primary data-[state=active]:bg-primary-muted data-[state=active]:text-primary-text',\n              'data-[state=completed]:border-primary data-[state=completed]:bg-primary data-[state=completed]:text-primary-foreground',\n              'disabled:cursor-not-allowed',\n            )\n          \"\n          @focus=\"focused = index + 1\"\n        >\n          <StepperIndicator class=\"flex items-center justify-center\">\n            <!-- Three states, none of them colour alone: the check is a shape\n                 change, the number is text, and the current step carries\n                 `aria-current` above. -->\n            <Check v-if=\"state === 'completed'\" class=\"h-4 w-4 animate-scale-in\" />\n            <template v-else>{{ index + 1 }}</template>\n          </StepperIndicator>\n        </StepperTrigger>\n      </div>\n\n      <div\n        :class=\"cn(layout.text, orientation === 'vertical' && index < steps.length - 1 && 'pb-6')\"\n      >\n        <!-- `as=\"span\"`, not Reka's default `h4`: a step label is not a\n             section heading, and a component cannot know what heading level\n             the page it lands in has room for. -->\n        <!-- The title mutes rather than fades: `--color-muted-foreground` is a\n             measured 5.76:1 on the card it sits on, two steps back from\n             `--color-foreground` and still comfortably readable. The\n             description below is already that colour and stays there — an\n             unreachable step's description is the one line a reader most needs\n             in order to find out why it is unreachable. -->\n        <StepperTitle\n          as=\"span\"\n          :class=\"\n            cn('text-sm font-medium', step.disabled ? 'text-muted-foreground' : 'text-foreground')\n          \"\n        >\n          <!-- ARIA has a value for \"you are here\" and none for \"done\", and the\n               check glyph is invisible to a screen reader. This element is what\n               `aria-labelledby` names the trigger with, so the word has to join\n               the name from inside it.\n               Two nodes rather than the title plus a trailing \"(completed)\"\n               span, because a suffix is Loom deciding where a qualifier sits\n               relative to the thing it qualifies, and that is a property of the\n               language. The visible half is `aria-hidden` and excluded from the\n               name computation; the hidden half carries the whole finished\n               sentence the vocabulary returned. -->\n          <!-- The position leads the name for the same reason: the trigger's\n               visible text is the step's number, and WCAG 2.5.3 (Label in\n               Name) makes a control's visible text part of its accessible\n               name. Measured 2026-08-26, `label-content-name-mismatch` fired\n               on every non-completed trigger until the number joined the\n               name — a voice user saying \"Step 2\" has to land on the same\n               trigger one saying \"Shipping\" does. -->\n          <span class=\"sr-only\">{{ text.step({ step: index + 1 }) }}</span>\n          <template v-if=\"state === 'completed'\">\n            <span aria-hidden=\"true\">{{ step.title }}</span>\n            <span class=\"sr-only\">{{ text.completed({ title: step.title }) }}</span>\n          </template>\n          <template v-else>{{ step.title }}</template>\n        </StepperTitle>\n        <StepperDescription v-if=\"step.description\" class=\"text-xs text-muted-foreground\">\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n\n    <!-- Loom's own position announcement, standing in for the one `StepperRoot`\n         renders as a text node its render function hard-codes in English.\n         `data-loom-live` is what the rule in `global.css` selects *around* when\n         it removes Reka's from the accessibility tree, so the two are told\n         apart by what Loom marked rather than by DOM order.\n         The count comes from `steps` rather than from Reka's registry, which\n         fills in over a tick as each trigger mounts — the same number, one\n         render sooner, which matters for a region a screen reader reads on\n         arrival. -->\n    <span data-loom-live role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{\n      text.position({ step: current ?? 1, stepCount: steps.length })\n    }}</span>\n  </StepperRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,IAAa,iBAAgC;CAC3C,OAAO;CACP,WAAW,EAAE,MAAM,gBAAgB,QAAQ,OAAO,IAAI,EAAE,MAAM,OAAO,SAAS;CAC9E,OAAO,EAAE,WAAW,QAAQ,OAAO,IAAI,EAAE;CACzC,YAAY,EAAE,YAAY,GAAG,MAAM;AACrC;;;;;;;;;;;;;;;;EA8EA,MAAM,QAAQ;EAyBd,MAAM,OAAO;EAQb,MAAM,OAAO,UAAU,WAAW,sBAAsB,MAAM,MAAM;EAWpE,MAAM,EAAE,OAAO,MAAM,cAAc,cAAc;;;;;;;;;;;;EAajD,MAAM,UAAU;GACd,YAAY;IACV,MAAM;IACN,MAAM;IACN,MAAM;IACN,WAAW;IACX,MAAM;IACN,QAAQ;IACR,MAAM;GACR;GACA,UAAU;IACR,MAAM;IACN,MAAM;IACN,MAAM;IAIN,WAAW;IACX,MAAM;IACN,QAAQ;IACR,MAAM;GACR;EACF;EAEA,MAAM,SAAS,eAAe,QAAQ,MAAM,YAAY;;EAGxD,MAAM,UAAU,IAAmB,IAAI;;;;;;;;EASvC,SAAS,UAAU,MAAc,SAA0B;GACzD,IAAI,MAAM,MAAM,OAAO,EAAE,EAAE,UAAU,OAAO;GAC5C,OAAO,MAAM,SAAS,QAAQ,UAAU,IAAI;EAC9C;;;;;;;;EASA,SAAS,QAAQ,SAAqC;GACpD,MAAM,KAAK,WAAW;GACtB,IAAI,QAAQ,UAAU,QAAQ,UAAU,QAAQ,OAAO,EAAE,GAAG,OAAO,QAAQ;GAC3E,IAAI,UAAU,IAAI,EAAE,GAAG,OAAO;GAC9B,OAAO,MAAM,MAAM,WAAW,GAAG,UAAU,UAAU,QAAQ,GAAG,EAAE,CAAC,IAAI;EACzE;;;;;;;;EASA,SAAS,YAAY,MAA8C;GACjE,OAAO,KAAK,gBAAgB,KAAA,IAAY,EAAE,oBAAoB,KAAA,EAAU,IAAI,CAAC;EAC/E;;EAGA,SAAS,SAAS,OAAiC;GACjD,IAAI,UAAU,KAAA,GAAW,KAAK,qBAAqB,KAAK;EAC1D;;GAIE,OAAA,UAAA,GAAA,YAgJc,MAAA,WAAA,GAhJd,WAgJc;IAAA,cA9IY,MAAA,IAAA,CAAI,CAAC;IAAK,GAAK,MAAA,SAAA;IAAS,GAAK,MAAA,QAAA,CAAQ,CAAA,EAAA,YAAG,QAAA,WAAU,CAAA;GAAA,GAAA;IAC1E,qBAAA;IACC,aAAa,QAAA;IACb,QAAQ,QAAA;IACR,OAAO,MAAA,EAAA,CAAE,CAAC,OAAA,MAAO,MAAM,MAAA,KAAA,CAAK,CAAC,KAAK;IAClC,uBAAoB;;IAGnB,SAAA,SAA8B,EAAA,YATV,cAAO,EAQ7B,UAAA,IAAA,GAAA,mBAyHc,UAAA,MAAA,WAxHY,QAAA,QAAhB,MAAM,UAAK;KADrB,OAAA,UAAA,GAAA,YAyHc,MAAA,WAAA,GAAA;MAvHX,KAAK;MAEL,MAAM,QAAK;MACX,UAAU,KAAK,YAAQ;MACvB,gBAAc,KAAA;MACd,OAAK,eAAE,OAAA,MAAO,IAAI;;MAEnB,SAAA,SAgEM,EAtEI,YAAK,CAMf,mBAgEM,OAAA,EAhEA,OAAK,eAAE,OAAA,MAAO,IAAI,EAAA,GAAA,CAId,QAAQ,QAAA,MAAM,SAAM,KAD5B,UAAA,GAAA,YAamB,MAAA,gBAAA,GAAA;;OAXhB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,0CAA2C,OAAA,MAAO,SAAS,CAAA;;OAErE,SAAA,cAQE,CARF,mBAQE,QAAA,EAPC,OAAK,eAAiB,MAAA,EAAA,CAAE,CAAA,gEAAkG,OAAA,MAAO,MAAsB,UAAK,eAAoB,OAAA,MAAO,MAAA,CAAA,EAAA,GAAA,MAAA,CAAA,CAAA,CAAA;;MAU5L,GAAA,MAAA,CAAA,OAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,YA6CiB,MAAA,cAAA,GA7CjB,WA6CiB,EAAA,SAAA,KAAA,GA5CP,YAAY,IAAI,GAAA;OACvB,UAAU,QAAQ,OAAO,MAAM,QAAK,IAAA,IAAA;OACpC,gBAAc,UAAK,WAAA,SAAyB,KAAA;OAC5C,OAAoB,MAAA,EAAA,CAAE,CAAA,sGAAA,8BAAA,+GAAu7C,KAAK,WAAA,wDAAA,CAAA,sHAAA,+CAAA,GAAA,iHAAA,0HAAA,6BAAA;OAgCl9C,UAAK,WAAE,QAAA,QAAU,QAAK;;OAEvB,SAAA,cAMmB,CANnB,YAMmB,MAAA,gBAAA,GAAA,EAND,OAAM,mCAAkC,GAAA;QAIxD,SAAA,cAAuE,CAA1D,UAAK,eAAlB,UAAA,GAAA,YAAuE,MAAA,KAAA,GAAA;;SAAnC,OAAM;QAC1C,CAAA,MAAA,UAAA,GAAA,mBAA2C,UAAA,EAAA,KAAA,EAAA,GAAA,CAAvB,gBAAA,gBAAA,QAAK,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA;;;;;;;;;MAK/B,CAAA,CAAA,GAAA,CAAA,GAAA,mBA6CM,OAAA,EA5CH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,OAAA,MAAO,MAAM,QAAA,gBAAW,cAAmB,QAAQ,QAAA,MAAM,SAAM,KAAA,MAAA,CAAA,EAAA,GAAA,CAW1E,YA6Be,MAAA,YAAA,GAAA;OA5Bb,IAAG;OACF,OAAK,eAAe,MAAA,EAAA,CAAE,CAAA,uBAAwB,KAAK,WAAQ,0BAAA,iBAAA,CAAA;;OAqB5D,SAAA,cAAiE,CAAjE,mBAAiE,QAAjE,YAAiE,gBAAxC,MAAA,IAAA,CAAI,CAAC,KAAI,EAAA,MAAS,QAAK,EAAA,CAAA,CAAA,GAAA,CAAA,GAChC,UAAK,eAArB,UAAA,GAAA,mBAGW,UAAA,EAAA,KAAA,EAAA,GAAA,CAFT,mBAAgD,QAAhD,YAAgD,gBAApB,KAAK,KAAK,GAAA,CAAA,GACtC,mBAAwE,QAAxE,YAAwE,gBAA/C,MAAA,IAAA,CAAI,CAAC,UAAS,EAAA,OAAU,KAAK,MAAK,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,MAE7D,UAAA,GAAA,mBAA4C,UAAA,EAAA,KAAA,EAAA,GAAA,CAAxB,gBAAA,gBAAA,KAAK,KAAK,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA;;MAEN,GAAA,MAAA,CAAA,OAAA,CAAA,GAAA,KAAK,eAA/B,UAAA,GAAA,YAEqB,MAAA,kBAAA,GAAA;;OAFuB,OAAM;;OAChD,SAAA,cAAsB,CAAnB,gBAAA,gBAAA,KAAK,WAAW,GAAA,CAAA,CAAA,CAAA;;;;;;;;;IAczB,CAAA,GAAA,GAAA,IAAA,mBAES,QAFT,YAES,gBADP,MAAA,IAAA,CAAI,CAAC,SAAQ;KAAA,MAAS,WAAO;KAAA,WAAkB,QAAA,MAAM;IAAM,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/primitives/surface/src/Surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Surface.js","names":[],"sources":["../../../../packages/primitives/surface/src/Surface.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * Surface — the panel/card primitive. Elevation is expressed by hairline\n * borders and background lightness, not heavy shadows (Loom principle:\n * \"hairline over shadow\"): on the paper-light ground a white `card` already\n * reads as raised, so only `overlay` carries a real shadow.\n */\nexport type SurfaceElevation = \"card\" | \"muted\" | \"overlay\";\n\nexport type SurfacePad = \"none\" | \"sm\" | \"md\" | \"lg\";\n\nexport const surfaceVariants = cva(\"rounded-lg transition-colors duration-fast\", {\n  variants: {\n    variant: {\n      card: \"bg-card text-card-foreground border border-border\",\n      muted: \"bg-muted text-foreground border border-transparent\",\n      overlay: \"bg-popover text-popover-foreground border border-border shadow-md\",\n    } satisfies Record<SurfaceElevation, string>,\n    pad: {\n      none: \"p-0\",\n      sm: \"p-3\",\n      md: \"p-4\",\n      lg: \"p-6\",\n    } satisfies Record<SurfacePad, string>,\n    // The ONE hover/press language for clickable rows and cards (a list row,\n    // a picker card): lift by fill, hairline asserts, cursor signals — so\n    // views stop hand-rolling their own `hover:bg-subtle` treatments. The\n    // Surface stays a div; the host owns the actual click/role/tabindex.\n    interactive: {\n      true: \"cursor-pointer hover:bg-subtle/60 hover:border-border-strong active:bg-subtle\",\n    },\n  },\n  defaultVariants: { variant: \"card\", pad: \"md\" },\n});\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** How the panel reads on the paper-light ground: a raised card, a recessed panel, or a floating overlay. */\n    variant?: SurfaceElevation;\n    /** Built-in inner padding, so a caller need not remember the spacing token. */\n    pad?: SurfacePad;\n    /** Clickable-surface language: hover fill lift, strong hairline, cursor. The host owns the click handler. */\n    interactive?: boolean;\n  }>(),\n  { variant: \"card\", pad: \"md\", interactive: false },\n);\n</script>\n\n<template>\n  <div :class=\"cn(surfaceVariants({ variant, pad, interactive }))\"><slot /></div>\n</template>\n"],"mappings":""}

package/dist/primitives/surface/src/Surface.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Surface.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/surface/src/Surface.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * Surface — the panel/card primitive. Elevation is expressed by hairline\n * borders and background lightness, not heavy shadows (Loom principle:\n * \"hairline over shadow\"): on the paper-light ground a white `card` already\n * reads as raised, so only `overlay` carries a real shadow.\n */\nexport type SurfaceElevation = \"card\" | \"muted\" | \"overlay\";\n\nexport type SurfacePad = \"none\" | \"sm\" | \"md\" | \"lg\";\n\nexport const surfaceVariants = cva(\"rounded-lg transition-colors duration-fast\", {\n  variants: {\n    variant: {\n      card: \"bg-card text-card-foreground border border-border\",\n      muted: \"bg-muted text-foreground border border-transparent\",\n      overlay: \"bg-popover text-popover-foreground border border-border shadow-md\",\n    } satisfies Record<SurfaceElevation, string>,\n    pad: {\n      none: \"p-0\",\n      sm: \"p-3\",\n      md: \"p-4\",\n      lg: \"p-6\",\n    } satisfies Record<SurfacePad, string>,\n    // The ONE hover/press language for clickable rows and cards (a list row,\n    // a picker card): lift by fill, hairline asserts, cursor signals — so\n    // views stop hand-rolling their own `hover:bg-subtle` treatments. The\n    // Surface stays a div; the host owns the actual click/role/tabindex.\n    interactive: {\n      true: \"cursor-pointer hover:bg-subtle/60 hover:border-border-strong active:bg-subtle\",\n    },\n  },\n  defaultVariants: { variant: \"card\", pad: \"md\" },\n});\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** How the panel reads on the paper-light ground: a raised card, a recessed panel, or a floating overlay. */\n    variant?: SurfaceElevation;\n    /** Built-in inner padding, so a caller need not remember the spacing token. */\n    pad?: SurfacePad;\n    /** Clickable-surface language: hover fill lift, strong hairline, cursor. The host owns the click handler. */\n    interactive?: boolean;\n  }>(),\n  { variant: \"card\", pad: \"md\", interactive: false },\n);\n</script>\n\n<template>\n  <div :class=\"cn(surfaceVariants({ variant, pad, interactive }))\"><slot /></div>\n</template>\n"],"mappings":";;;;;AAaA,IAAa,kBAAkB,IAAI,8CAA8C;CAC/E,UAAU;EACR,SAAS;GACP,MAAM;GACN,OAAO;GACP,SAAS;EACX;EACA,KAAK;GACH,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EAKA,aAAa,EACX,MAAM,gFACR;CACF;CACA,iBAAiB;EAAE,SAAS;EAAQ,KAAK;CAAK;AAChD,CAAC;;;;;;;;;;;;;GAoBC,OAAA,UAAA,GAAA,mBAA+E,OAAA,EAAzE,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAA,eAAA,CAAe,CAAA;IAAA,SAAG,QAAA;IAAO,KAAE,QAAA;IAAG,aAAE,QAAA;GAAW,CAAA,CAAA,CAAA,EAAA,GAAA,CAAM,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}

package/dist/primitives/switch/src/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","names":[],"sources":["../../../../packages/primitives/switch/src/Switch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SwitchRoot, SwitchThumb } from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\n\n/**\n * Switch — toggles a boolean setting that takes effect immediately, with no\n * \"Save\" step. Built on Reka UI's Switch for role=\"switch\" + aria-checked +\n * Space/Enter. Label and description live on the surrounding setting row —\n * wire them in with `aria-labelledby`, since Switch renders a button, not a\n * labelable input.\n *\n * Inside a [Field](../Field/Field.vue) that row is the wrapper itself, and the\n * wiring stops being the caller's job: `useFieldControl()` puts the row's id on\n * the button — labelable, so the row's `<label for>` names the control that has\n * no name of its own — and brings the row's description, `name`, `required` and\n * `invalid` with it.\n *\n * There is no `readonly` here, and a row's is ignored rather than approximated.\n * A switch that cannot be flipped is disabled; one that looks live and refuses\n * the flip is the only state worse than either.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Whether the setting is currently on. Omit to let the switch own its own state. */\n    modelValue?: boolean | undefined;\n    /** Blocks both click and keyboard input, and drains the control to the neutral well. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n  }>(),\n  {\n    // Not `false` — see Checkbox: a concrete default claims host ownership and\n    // leaves an unbound switch emitting updates while never moving.\n    modelValue: undefined,\n    // Not `false` either: absent has to stay tellable from `false` for a Field\n    // above to disable the row 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  },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: boolean] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: switchAttrs } = useSplitAttrs();\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** `switchAttrs`, and that position is the contract (see\n// TextField.vue). `name` in that bag reaches SwitchRoot's own `name` prop,\n// which is what mints the hidden input a `<form>` submits.\n//\n// `name`, `required` and `invalid` are omitted below because Switch has no prop\n// for any of them: the row's answer stands unopposed. `readonly` is omitted for\n// the reason the docblock gives.\n//\n// The resolved `required` then reaches the element through Reka's own prop\n// rather than the `aria-required` in `field.attrs` — see Checkbox.vue, which\n// carries the reasoning. SwitchRoot happens to spread the fallthrough last, so\n// the attribute would win here; going through the prop keeps the four\n// Reka-rooted controls one shape instead of four merge orders to re-derive.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  disabled: props.disabled,\n}));\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"{ modelValue, ...switchAttrs, ...field.attrs }\"\n    :disabled=\"field.disabled\"\n    :required=\"field.required\"\n    :class=\"\n      cn(\n        'relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border border-transparent',\n        'transition-[background-color,filter,box-shadow] duration-instant ease-out',\n        'hover:brightness-95',\n        // Checked = a decision (Loom law): the track fills with primary.\n        'data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/30',\n        // Focus draws the weave tight: the brand ring blooms.\n        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n        // Drained, not dimmed. `opacity-50` faded track and thumb together,\n        // compositing both below their measured contrast — the same failure\n        // Button records for its own dim. The unchecked track falls to\n        // `bg-muted`, the well every unavailable control drains to, with the\n        // rim Chip slackens to; a *checked* one keeps its primary fill,\n        // because switched-on is information (Chip and Pagination keep the\n        // wash a selected control already wears) and the native `disabled`\n        // attribute carries unavailability to assistive tech regardless.\n        // The compound `disabled:data-[state=unchecked]:` form is deliberate:\n        // Tailwind sorts data variants after plain `disabled:`, so a bare\n        // `disabled:bg-muted` would lose to `data-[state=unchecked]:bg-*` and\n        // never fire.\n        'disabled:cursor-not-allowed disabled:data-[state=unchecked]:bg-muted disabled:data-[state=unchecked]:border-border',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <SwitchThumb\n      style=\"transition: transform var(--duration-fast) var(--ease-spring)\"\n      :class=\"\n        cn(\n          'absolute top-1/2 start-0.5 block h-5 w-5 -translate-y-1/2 rounded-full bg-background shadow-sm',\n          'active:scale-x-[1.15] active:scale-y-[0.85]',\n          // The anchor is the *inline* start edge, so the off state rests on\n          // the reading-order side in every direction — physically left under\n          // LTR (pixel-identical to the old `left-0.5`) and right under RTL,\n          // where a physical `left` would pin both states to one edge and\n          // make the motion read backwards.\n          //\n          // The travel is still a translate, not an inset change: animating an\n          // inset relayouts the track on every frame, while a transform stays\n          // on the compositor. Its sign is the one thing direction has left to\n          // say — checked moves toward the inline-end edge, +x under LTR, -x\n          // under RTL — and it is written through this custom property rather\n          // than a second competing utility because Tailwind's `rtl:` wraps in\n          // a zero-specificity `:where()`, which would leave the flip's winner\n          // to stylesheet order. One rule writes the variable; everything else\n          // reads the fallback, so LTR needs no rule at all (and survives even\n          // a browser without `:dir()`).\n          'data-[state=checked]:translate-x-[var(--switch-travel-x,1rem)]',\n          'rtl:[--switch-travel-x:-1rem]',\n        )\n      \"\n    />\n  </SwitchRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/switch/src/Switch.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,75 @@
+import { cn } from "../../../core/src/cn.js";
+import { useSplitAttrs } from "../../../core/src/attrs.js";
+import "../../../core/src/index.js";
+import { useFieldControl } from "../../../labels/src/field-context.js";
+import "../../../labels/src/index.js";
+import { createBlock, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, unref, withCtx } from "vue";
+import { SwitchRoot, SwitchThumb } from "reka-ui";
+//#region packages/primitives/switch/src/Switch.vue?vue&type=script&setup=true&lang.ts
+/**
+* Switch — toggles a boolean setting that takes effect immediately, with no
+* "Save" step. Built on Reka UI's Switch for role="switch" + aria-checked +
+* Space/Enter. Label and description live on the surrounding setting row —
+* wire them in with `aria-labelledby`, since Switch renders a button, not a
+* labelable input.
+*
+* Inside a [Field](../Field/Field.vue) that row is the wrapper itself, and the
+* wiring stops being the caller's job: `useFieldControl()` puts the row's id on
+* the button — labelable, so the row's `<label for>` names the control that has
+* no name of its own — and brings the row's description, `name`, `required` and
+* `invalid` with it.
+*
+* There is no `readonly` here, and a row's is ignored rather than approximated.
+* A switch that cannot be flipped is disabled; one that looks live and refuses
+* the flip is the only state worse than either.
+*/
+var Switch_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "Switch",
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const { attrs, rest: switchAttrs } = useSplitAttrs();
+		const field = useFieldControl(() => ({
+			id: attrs.id,
+			describedBy: attrs["aria-describedby"],
+			disabled: props.disabled
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SwitchRoot), mergeProps({
+				modelValue: __props.modelValue,
+				...unref(switchAttrs),
+				...unref(field).attrs
+			}, {
+				disabled: unref(field).disabled,
+				required: unref(field).required,
+				class: unref(cn)("relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border border-transparent", "transition-[background-color,filter,box-shadow] duration-instant ease-out", "hover:brightness-95", "data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/30", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", "disabled:cursor-not-allowed disabled:data-[state=unchecked]:bg-muted disabled:data-[state=unchecked]:border-border", unref(attrs).class),
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event))
+			}), {
+				default: withCtx(() => [createVNode(unref(SwitchThumb), {
+					style: { "transition": "transform var(--duration-fast) var(--ease-spring)" },
+					class: normalizeClass(unref(cn)("absolute top-1/2 start-0.5 block h-5 w-5 -translate-y-1/2 rounded-full bg-background shadow-sm", "active:scale-x-[1.15] active:scale-y-[0.85]", "data-[state=checked]:translate-x-[var(--switch-travel-x,1rem)]", "rtl:[--switch-travel-x:-1rem]"))
+				}, null, 8, ["class"])]),
+				_: 1
+			}, 16, [
+				"disabled",
+				"required",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { Switch_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Switch.vue_vue_type_script_setup_true_lang.js.map

package/dist/primitives/switch/src/Switch.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../packages/primitives/switch/src/Switch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { SwitchRoot, SwitchThumb } from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\n\n/**\n * Switch — toggles a boolean setting that takes effect immediately, with no\n * \"Save\" step. Built on Reka UI's Switch for role=\"switch\" + aria-checked +\n * Space/Enter. Label and description live on the surrounding setting row —\n * wire them in with `aria-labelledby`, since Switch renders a button, not a\n * labelable input.\n *\n * Inside a [Field](../Field/Field.vue) that row is the wrapper itself, and the\n * wiring stops being the caller's job: `useFieldControl()` puts the row's id on\n * the button — labelable, so the row's `<label for>` names the control that has\n * no name of its own — and brings the row's description, `name`, `required` and\n * `invalid` with it.\n *\n * There is no `readonly` here, and a row's is ignored rather than approximated.\n * A switch that cannot be flipped is disabled; one that looks live and refuses\n * the flip is the only state worse than either.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Whether the setting is currently on. Omit to let the switch own its own state. */\n    modelValue?: boolean | undefined;\n    /** Blocks both click and keyboard input, and drains the control to the neutral well. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n  }>(),\n  {\n    // Not `false` — see Checkbox: a concrete default claims host ownership and\n    // leaves an unbound switch emitting updates while never moving.\n    modelValue: undefined,\n    // Not `false` either: absent has to stay tellable from `false` for a Field\n    // above to disable the row 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  },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: boolean] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: switchAttrs } = useSplitAttrs();\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** `switchAttrs`, and that position is the contract (see\n// TextField.vue). `name` in that bag reaches SwitchRoot's own `name` prop,\n// which is what mints the hidden input a `<form>` submits.\n//\n// `name`, `required` and `invalid` are omitted below because Switch has no prop\n// for any of them: the row's answer stands unopposed. `readonly` is omitted for\n// the reason the docblock gives.\n//\n// The resolved `required` then reaches the element through Reka's own prop\n// rather than the `aria-required` in `field.attrs` — see Checkbox.vue, which\n// carries the reasoning. SwitchRoot happens to spread the fallthrough last, so\n// the attribute would win here; going through the prop keeps the four\n// Reka-rooted controls one shape instead of four merge orders to re-derive.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  disabled: props.disabled,\n}));\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"{ modelValue, ...switchAttrs, ...field.attrs }\"\n    :disabled=\"field.disabled\"\n    :required=\"field.required\"\n    :class=\"\n      cn(\n        'relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border border-transparent',\n        'transition-[background-color,filter,box-shadow] duration-instant ease-out',\n        'hover:brightness-95',\n        // Checked = a decision (Loom law): the track fills with primary.\n        'data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/30',\n        // Focus draws the weave tight: the brand ring blooms.\n        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n        // Drained, not dimmed. `opacity-50` faded track and thumb together,\n        // compositing both below their measured contrast — the same failure\n        // Button records for its own dim. The unchecked track falls to\n        // `bg-muted`, the well every unavailable control drains to, with the\n        // rim Chip slackens to; a *checked* one keeps its primary fill,\n        // because switched-on is information (Chip and Pagination keep the\n        // wash a selected control already wears) and the native `disabled`\n        // attribute carries unavailability to assistive tech regardless.\n        // The compound `disabled:data-[state=unchecked]:` form is deliberate:\n        // Tailwind sorts data variants after plain `disabled:`, so a bare\n        // `disabled:bg-muted` would lose to `data-[state=unchecked]:bg-*` and\n        // never fire.\n        'disabled:cursor-not-allowed disabled:data-[state=unchecked]:bg-muted disabled:data-[state=unchecked]:border-border',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <SwitchThumb\n      style=\"transition: transform var(--duration-fast) var(--ease-spring)\"\n      :class=\"\n        cn(\n          'absolute top-1/2 start-0.5 block h-5 w-5 -translate-y-1/2 rounded-full bg-background shadow-sm',\n          'active:scale-x-[1.15] active:scale-y-[0.85]',\n          // The anchor is the *inline* start edge, so the off state rests on\n          // the reading-order side in every direction — physically left under\n          // LTR (pixel-identical to the old `left-0.5`) and right under RTL,\n          // where a physical `left` would pin both states to one edge and\n          // make the motion read backwards.\n          //\n          // The travel is still a translate, not an inset change: animating an\n          // inset relayouts the track on every frame, while a transform stays\n          // on the compositor. Its sign is the one thing direction has left to\n          // say — checked moves toward the inline-end edge, +x under LTR, -x\n          // under RTL — and it is written through this custom property rather\n          // than a second competing utility because Tailwind's `rtl:` wraps in\n          // a zero-specificity `:where()`, which would leave the flip's winner\n          // to stylesheet order. One rule writes the variable; everything else\n          // reads the fallback, so LTR needs no rule at all (and survives even\n          // a browser without `:dir()`).\n          'data-[state=checked]:translate-x-[var(--switch-travel-x,1rem)]',\n          'rtl:[--switch-travel-x:-1rem]',\n        )\n      \"\n    />\n  </SwitchRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,QAAQ;EAsBd,MAAM,EAAE,OAAO,MAAM,gBAAgB,cAAc;EAoBnD,MAAM,QAAQ,uBAAuB;GACnC,IAAI,MAAM;GACV,aAAa,MAAM;GACnB,UAAU,MAAM;EAClB,EAAE;;GAIA,OAAA,UAAA,GAAA,YA0Da,MAAA,UAAA,GA1Db,WA0Da;IAAA,YAzDD,QAAA;IAAU,GAAK,MAAA,WAAA;IAAW,GAAK,MAAA,KAAA,CAAK,CAAC;GAAK,GAAA;IACnD,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,OAAc,MAAA,EAAA,CAAE,CAAA,6GAAA,6EAAA,uBAAA,iFAAA,+GAAA,sHAAqiD,MAAA,KAAA,CAAK,CAAC,KAAA;IAyB3jD,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,MAAM;;IAEtD,SAAA,cA0BE,CA1BF,YA0BE,MAAA,WAAA,GAAA;KAzBA,OAAA,EAAA,cAAA,oDAAA;KACC,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,kGAAA,+CAAA,kEAAA,+BAAA,CAAA"}

package/dist/primitives/table/src/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","names":[],"sources":["../../../../packages/primitives/table/src/Table.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TableLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it,\n * and exported so a host can build a partial vocabulary against the real\n * thing rather than a transcription of it.\n */\nexport const TABLE_LABELS: TableLabels = {\n  region: \"Data table\",\n  sortedAscending: \"Sorted ascending\",\n  sortedDescending: \"Sorted descending\",\n  sort: \"Sort\",\n};\n\n/** The wrapper owns row padding so every cell under it tightens together. */\nexport type TableDensity = \"comfortable\" | \"compact\";\n\n/** Alignment vocabulary shared by headers and cells. */\nexport type TableAlign = \"left\" | \"center\" | \"right\";\n</script>\n\n<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref } from \"vue\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The table's caption, rendered as a real `<caption>` — the accessible\n     * name for the whole table and the first thing a screen reader says.\n     */\n    caption?: string;\n    /** Row padding. Compact suits dense application chrome. */\n    density?: TableDensity;\n    /** Names what the table is when no caption fits visually; falls to the labels seam otherwise. */\n    labels?: LabelOverrides<TableLabels>;\n  }>(),\n  { density: \"comfortable\" },\n);\n\n// `text`, not `labels`: the prop of that name is one of the three sources\n// this resolves, and a template reading the raw prop would be reading the\n// overrides rather than the answer.\nconst text = useLabels(\"table\", TABLE_LABELS, () => props.labels);\n\n// The region is focusable only while it can actually scroll: a Tab stop that\n// never moves is a dead one. Overflow is measured, not assumed — tables fit\n// their container most of the time — and re-measured whenever either side of\n// the ratio changes.\nconst region = ref<HTMLElement | null>(null);\nconst table = ref<HTMLElement | null>(null);\nconst scrollable = ref(false);\n\nfunction measure(): void {\n  const el = region.value;\n  if (el) scrollable.value = el.scrollWidth > el.clientWidth;\n}\n\nlet observer: ResizeObserver | undefined;\nonMounted(() => {\n  measure();\n  observer = new ResizeObserver(measure);\n  if (table.value) observer.observe(table.value);\n  window.addEventListener(\"resize\", measure, { passive: true });\n});\nonBeforeUnmount(() => {\n  observer?.disconnect();\n  window.removeEventListener(\"resize\", measure);\n});\n</script>\n\n<template>\n  <!-- A scroll container, not the table itself: wide tables overflow their\n       region instead of stretching the page (Loom's content-never-stretches\n       law), and the region carries the caption as its accessible name so a\n       screen reader announces what this scrollable thing IS before entering.\n       Focusable only while it can actually scroll — measured below, since a\n       focusable region that never scrolls is a dead Tab stop. -->\n  <div\n    ref=\"region\"\n    role=\"region\"\n    :aria-label=\"caption ?? text.region\"\n    :tabindex=\"scrollable ? 0 : undefined\"\n    class=\"w-full overflow-x-auto rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n  >\n    <table\n      ref=\"table\"\n      :data-density=\"density\"\n      :class=\"\n        cn(\n          'w-full border-collapse text-left text-sm',\n          // Descendant styling is the wrapper's job: writing these per-cell\n          // would re-litigate the hairline at every call site.\n          '[&_th]:border-b [&_th]:border-border-strong [&_th]:px-3 [&_th]:py-2.5 [&_th]:text-xs [&_th]:font-semibold [&_th]:text-muted-foreground [&_th]:whitespace-nowrap',\n          '[&_td]:border-b [&_td]:border-border [&_td]:px-3 [&_td]:align-top [&_td]:text-foreground',\n          `[&[data-density='comfortable']_td]:py-3`,\n          `[&[data-density='compact']_td]:py-1.5`,\n          `[&[data-density='compact']_th]:py-1.5`,\n          '[&_tbody_tr:last-child_td]:border-b-0',\n          '[&_tfoot_td]:border-t [&_tfoot_td]:border-border-strong [&_tfoot_td]:font-medium',\n        )\n      \"\n    >\n      <caption v-if=\"caption\" class=\"sr-only\">\n        {{\n          caption\n        }}\n      </caption>\n      <!-- @slot Real table markup: `<thead>`/`<tbody>`/`<tfoot>` rows built\n           from `TableRow`, `TableHead` and `TableCell`. -->\n      <slot />\n    </table>\n  </div>\n</template>\n"],"mappings":""}

package/dist/primitives/table/src/Table.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/table/src/Table.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TableLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it,\n * and exported so a host can build a partial vocabulary against the real\n * thing rather than a transcription of it.\n */\nexport const TABLE_LABELS: TableLabels = {\n  region: \"Data table\",\n  sortedAscending: \"Sorted ascending\",\n  sortedDescending: \"Sorted descending\",\n  sort: \"Sort\",\n};\n\n/** The wrapper owns row padding so every cell under it tightens together. */\nexport type TableDensity = \"comfortable\" | \"compact\";\n\n/** Alignment vocabulary shared by headers and cells. */\nexport type TableAlign = \"left\" | \"center\" | \"right\";\n</script>\n\n<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref } from \"vue\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The table's caption, rendered as a real `<caption>` — the accessible\n     * name for the whole table and the first thing a screen reader says.\n     */\n    caption?: string;\n    /** Row padding. Compact suits dense application chrome. */\n    density?: TableDensity;\n    /** Names what the table is when no caption fits visually; falls to the labels seam otherwise. */\n    labels?: LabelOverrides<TableLabels>;\n  }>(),\n  { density: \"comfortable\" },\n);\n\n// `text`, not `labels`: the prop of that name is one of the three sources\n// this resolves, and a template reading the raw prop would be reading the\n// overrides rather than the answer.\nconst text = useLabels(\"table\", TABLE_LABELS, () => props.labels);\n\n// The region is focusable only while it can actually scroll: a Tab stop that\n// never moves is a dead one. Overflow is measured, not assumed — tables fit\n// their container most of the time — and re-measured whenever either side of\n// the ratio changes.\nconst region = ref<HTMLElement | null>(null);\nconst table = ref<HTMLElement | null>(null);\nconst scrollable = ref(false);\n\nfunction measure(): void {\n  const el = region.value;\n  if (el) scrollable.value = el.scrollWidth > el.clientWidth;\n}\n\nlet observer: ResizeObserver | undefined;\nonMounted(() => {\n  measure();\n  observer = new ResizeObserver(measure);\n  if (table.value) observer.observe(table.value);\n  window.addEventListener(\"resize\", measure, { passive: true });\n});\nonBeforeUnmount(() => {\n  observer?.disconnect();\n  window.removeEventListener(\"resize\", measure);\n});\n</script>\n\n<template>\n  <!-- A scroll container, not the table itself: wide tables overflow their\n       region instead of stretching the page (Loom's content-never-stretches\n       law), and the region carries the caption as its accessible name so a\n       screen reader announces what this scrollable thing IS before entering.\n       Focusable only while it can actually scroll — measured below, since a\n       focusable region that never scrolls is a dead Tab stop. -->\n  <div\n    ref=\"region\"\n    role=\"region\"\n    :aria-label=\"caption ?? text.region\"\n    :tabindex=\"scrollable ? 0 : undefined\"\n    class=\"w-full overflow-x-auto rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n  >\n    <table\n      ref=\"table\"\n      :data-density=\"density\"\n      :class=\"\n        cn(\n          'w-full border-collapse text-left text-sm',\n          // Descendant styling is the wrapper's job: writing these per-cell\n          // would re-litigate the hairline at every call site.\n          '[&_th]:border-b [&_th]:border-border-strong [&_th]:px-3 [&_th]:py-2.5 [&_th]:text-xs [&_th]:font-semibold [&_th]:text-muted-foreground [&_th]:whitespace-nowrap',\n          '[&_td]:border-b [&_td]:border-border [&_td]:px-3 [&_td]:align-top [&_td]:text-foreground',\n          `[&[data-density='comfortable']_td]:py-3`,\n          `[&[data-density='compact']_td]:py-1.5`,\n          `[&[data-density='compact']_th]:py-1.5`,\n          '[&_tbody_tr:last-child_td]:border-b-0',\n          '[&_tfoot_td]:border-t [&_tfoot_td]:border-border-strong [&_tfoot_td]:font-medium',\n        )\n      \"\n    >\n      <caption v-if=\"caption\" class=\"sr-only\">\n        {{\n          caption\n        }}\n      </caption>\n      <!-- @slot Real table markup: `<thead>`/`<tbody>`/`<tfoot>` rows built\n           from `TableRow`, `TableHead` and `TableCell`. -->\n      <slot />\n    </table>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;AAQA,IAAa,eAA4B;CACvC,QAAQ;CACR,iBAAiB;CACjB,kBAAkB;CAClB,MAAM;AACR;;;;;;;;;EAcA,MAAM,QAAQ;EAkBd,MAAM,OAAO,UAAU,SAAS,oBAAoB,MAAM,MAAM;EAMhE,MAAM,SAAS,IAAwB,IAAI;EAC3C,MAAM,QAAQ,IAAwB,IAAI;EAC1C,MAAM,aAAa,IAAI,KAAK;EAE5B,SAAS,UAAgB;GACvB,MAAM,KAAK,OAAO;GAClB,IAAI,IAAI,WAAW,QAAQ,GAAG,cAAc,GAAG;EACjD;EAEA,IAAI;EACJ,gBAAgB;GACd,QAAQ;GACR,WAAW,IAAI,eAAe,OAAO;GACrC,IAAI,MAAM,OAAO,SAAS,QAAQ,MAAM,KAAK;GAC7C,OAAO,iBAAiB,UAAU,SAAS,EAAE,SAAS,KAAK,CAAC;EAC9D,CAAC;EACD,sBAAsB;GACpB,UAAU,WAAW;GACrB,OAAO,oBAAoB,UAAU,OAAO;EAC9C,CAAC;;GAUC,OAAA,UAAA,GAAA,mBAkCM,OAAA;IAjCA,SAAA;IAAJ,KAAI;IACJ,MAAK;IACJ,cAAY,QAAA,WAAW,MAAA,IAAA,CAAI,CAAC;IAC5B,UAAU,WAAA,QAAU,IAAO,KAAA;IAC5B,OAAM;GAEN,GAAA,CAAA,mBA0BQ,SAAA;IAzBF,SAAA;IAAJ,KAAI;IACH,gBAAc,QAAA;IACd,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,4CAAA,mKAAA,4FAAA,2CAAA,yCAAA,yCAAA,yCAAA,kFAAA,CAAA;GAeJ,GAAA,CAAA,QAAA,WAAf,UAAA,GAAA,mBAIU,WAJV,YAIU,gBAFN,QAAA,OAAO,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAKX,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA,CAAA,GAAA,GAAA,UAAA"}

package/dist/primitives/table/src/TableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.js","names":[],"sources":["../../../../packages/primitives/table/src/TableCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { headAlignClass } from \"./TableHead.vue\";\nimport type { TableAlign } from \"./Table.vue\";\n\nwithDefaults(\n  defineProps<{\n    /** Text alignment; numeric figures want `\"right\"` for the tabular digits. */\n    align?: TableAlign;\n  }>(),\n  {},\n);\n</script>\n\n<template>\n  <td :class=\"headAlignClass(align)\">\n    <!-- @slot The cell's content — text, a Badge, a RowActions cluster. -->\n    <slot />\n  </td>\n</template>\n"],"mappings":""}

package/dist/primitives/table/src/TableCell.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/table/src/TableCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { headAlignClass } from \"./TableHead.vue\";\nimport type { TableAlign } from \"./Table.vue\";\n\nwithDefaults(\n  defineProps<{\n    /** Text alignment; numeric figures want `\"right\"` for the tabular digits. */\n    align?: TableAlign;\n  }>(),\n  {},\n);\n</script>\n\n<template>\n  <td :class=\"headAlignClass(align)\">\n    <!-- @slot The cell's content — text, a Badge, a RowActions cluster. -->\n    <slot />\n  </td>\n</template>\n"],"mappings":";;;;;;;;;GAcE,OAAA,UAAA,GAAA,mBAGK,MAAA,EAHA,OAAK,eAAE,MAAA,cAAA,CAAc,CAAC,QAAA,KAAK,CAAA,EAAA,GAAA,CAE9B,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}

package/dist/primitives/table/src/TableHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.js","names":[],"sources":["../../../../packages/primitives/table/src/TableHead.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TableAlign } from \"./Table.vue\";\n\n/**\n * Sort state for a sortable header. Tri-state by omission: a sortable column\n * that is not the active sort simply has no direction, which is what\n * `aria-sort`'s absent-attribute form expresses.\n */\nexport type TableSort = \"asc\" | \"desc\";\n\n/** Alignment vocabulary shared with `TableCell`. */\nconst ALIGN_CLASS: Record<TableAlign, string> = {\n  left: \"text-left\",\n  center: \"text-center\",\n  // Numeric columns are read down, not across; tabular digits keep the\n  // places lined up while the eye travels.\n  right: \"text-right [font-variant-numeric:tabular-nums]\",\n};\n\nexport const headAlignClass = (align: TableAlign | undefined): string =>\n  align ? ALIGN_CLASS[align] : \"\";\n\n/** Cycle order: nothing → ascending → descending → nothing. */\nexport const nextSort = (current: TableSort | undefined): TableSort | undefined =>\n  current === undefined ? \"asc\" : current === \"asc\" ? \"desc\" : undefined;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { ChevronDown, ChevronsUpDown, ChevronUp } from \"@lucide/vue\";\nimport { useLabels, type LabelOverrides, type TableLabels } from \"@ecoma-io/loom-labels\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { TABLE_LABELS } from \"./Table.vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** Text alignment; numeric columns want `\"right\"`. */\n    align?: TableAlign;\n    /**\n     * Renders the header as a sort control cycling asc → desc → none.\n     * State is the host's through `v-model:sort`; omit the binding and the\n     * header cycles on its own while still reporting each change.\n     */\n    sortable?: boolean;\n    /** The current direction when sortable. Omit it for an uncontrolled cycle. */\n    sort?: TableSort | undefined;\n    /** Names what the control says on its own account, as any subset of `TableLabels`. */\n    labels?: LabelOverrides<TableLabels>;\n  }>(),\n  { sortable: false },\n);\n\nconst emit = defineEmits<{ \"update:sort\": [value: TableSort | undefined] }>();\n\n// `text`, not `labels`: one of three sources, resolved key by key.\nconst text = useLabels(\"table\", TABLE_LABELS, () => props.labels);\n\n// Uncontrolled fallback lives here so a host can write plain `sortable`.\nconst inner = ref<TableSort | undefined>(undefined);\nconst current = computed(() => props.sort ?? inner.value);\n\nfunction toggle(): void {\n  const next = nextSort(current.value);\n  inner.value = next;\n  emit(\"update:sort\", next);\n}\n\nconst SORT_ICON = { asc: ChevronUp, desc: ChevronDown } as const;\nconst sortIcon = computed(() => (current.value ? SORT_ICON[current.value] : ChevronsUpDown));\n\n// aria-sort takes full ARIA tokens, not our compact union.\nconst ARIA_SORT = { asc: \"ascending\", desc: \"descending\" } as const;\nconst ariaSort = computed(() => (current.value ? ARIA_SORT[current.value] : undefined));\n</script>\n\n<template>\n  <th scope=\"col\" :aria-sort=\"ariaSort\" :class=\"cn(headAlignClass(align))\">\n    <!-- The sort control carries its state in words as well as glyphs — a\n         chevron alone is colour/shape-only semantics. `min-h-6` is the WCAG\n         2.5.8 floor made explicit: a text-xs label alone sits under the 24px\n         target every interactive control owes. -->\n    <button\n      v-if=\"sortable\"\n      type=\"button\"\n      class=\"inline-flex min-h-6 items-center gap-1 rounded-sm px-1 transition-colors duration-fast ease-out hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n      @click=\"toggle()\"\n    >\n      <span class=\"group inline-flex items-center gap-1 font-semibold\">\n        <slot />\n      </span>\n      <component\n        :is=\"sortIcon\"\n        class=\"h-3.5 w-3.5 shrink-0 text-muted-foreground\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"sr-only\">{{\n        current === \"asc\"\n          ? text.sortedAscending\n          : current === \"desc\"\n            ? text.sortedDescending\n            : text.sort\n      }}</span>\n    </button>\n    <template v-else><slot /></template>\n  </th>\n</template>\n"],"mappings":""}

package/dist/primitives/table/src/TableHead.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/table/src/TableHead.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TableAlign } from \"./Table.vue\";\n\n/**\n * Sort state for a sortable header. Tri-state by omission: a sortable column\n * that is not the active sort simply has no direction, which is what\n * `aria-sort`'s absent-attribute form expresses.\n */\nexport type TableSort = \"asc\" | \"desc\";\n\n/** Alignment vocabulary shared with `TableCell`. */\nconst ALIGN_CLASS: Record<TableAlign, string> = {\n  left: \"text-left\",\n  center: \"text-center\",\n  // Numeric columns are read down, not across; tabular digits keep the\n  // places lined up while the eye travels.\n  right: \"text-right [font-variant-numeric:tabular-nums]\",\n};\n\nexport const headAlignClass = (align: TableAlign | undefined): string =>\n  align ? ALIGN_CLASS[align] : \"\";\n\n/** Cycle order: nothing → ascending → descending → nothing. */\nexport const nextSort = (current: TableSort | undefined): TableSort | undefined =>\n  current === undefined ? \"asc\" : current === \"asc\" ? \"desc\" : undefined;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { ChevronDown, ChevronsUpDown, ChevronUp } from \"@lucide/vue\";\nimport { useLabels, type LabelOverrides, type TableLabels } from \"@ecoma-io/loom-labels\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { TABLE_LABELS } from \"./Table.vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** Text alignment; numeric columns want `\"right\"`. */\n    align?: TableAlign;\n    /**\n     * Renders the header as a sort control cycling asc → desc → none.\n     * State is the host's through `v-model:sort`; omit the binding and the\n     * header cycles on its own while still reporting each change.\n     */\n    sortable?: boolean;\n    /** The current direction when sortable. Omit it for an uncontrolled cycle. */\n    sort?: TableSort | undefined;\n    /** Names what the control says on its own account, as any subset of `TableLabels`. */\n    labels?: LabelOverrides<TableLabels>;\n  }>(),\n  { sortable: false },\n);\n\nconst emit = defineEmits<{ \"update:sort\": [value: TableSort | undefined] }>();\n\n// `text`, not `labels`: one of three sources, resolved key by key.\nconst text = useLabels(\"table\", TABLE_LABELS, () => props.labels);\n\n// Uncontrolled fallback lives here so a host can write plain `sortable`.\nconst inner = ref<TableSort | undefined>(undefined);\nconst current = computed(() => props.sort ?? inner.value);\n\nfunction toggle(): void {\n  const next = nextSort(current.value);\n  inner.value = next;\n  emit(\"update:sort\", next);\n}\n\nconst SORT_ICON = { asc: ChevronUp, desc: ChevronDown } as const;\nconst sortIcon = computed(() => (current.value ? SORT_ICON[current.value] : ChevronsUpDown));\n\n// aria-sort takes full ARIA tokens, not our compact union.\nconst ARIA_SORT = { asc: \"ascending\", desc: \"descending\" } as const;\nconst ariaSort = computed(() => (current.value ? ARIA_SORT[current.value] : undefined));\n</script>\n\n<template>\n  <th scope=\"col\" :aria-sort=\"ariaSort\" :class=\"cn(headAlignClass(align))\">\n    <!-- The sort control carries its state in words as well as glyphs — a\n         chevron alone is colour/shape-only semantics. `min-h-6` is the WCAG\n         2.5.8 floor made explicit: a text-xs label alone sits under the 24px\n         target every interactive control owes. -->\n    <button\n      v-if=\"sortable\"\n      type=\"button\"\n      class=\"inline-flex min-h-6 items-center gap-1 rounded-sm px-1 transition-colors duration-fast ease-out hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n      @click=\"toggle()\"\n    >\n      <span class=\"group inline-flex items-center gap-1 font-semibold\">\n        <slot />\n      </span>\n      <component\n        :is=\"sortIcon\"\n        class=\"h-3.5 w-3.5 shrink-0 text-muted-foreground\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"sr-only\">{{\n        current === \"asc\"\n          ? text.sortedAscending\n          : current === \"desc\"\n            ? text.sortedDescending\n            : text.sort\n      }}</span>\n    </button>\n    <template v-else><slot /></template>\n  </th>\n</template>\n"],"mappings":";;;;;;;;;;;;;AAWA,IAAM,cAA0C;CAC9C,MAAM;CACN,QAAQ;CAGR,OAAO;AACT;AAEA,IAAa,kBAAkB,UAC7B,QAAQ,YAAY,SAAS;;AAG/B,IAAa,YAAY,YACvB,YAAY,KAAA,IAAY,QAAQ,YAAY,QAAQ,SAAS,KAAA;;;;;;;;;;;;;;EAU/D,MAAM,QAAQ;EAkBd,MAAM,OAAO;EAGb,MAAM,OAAO,UAAU,SAAS,oBAAoB,MAAM,MAAM;EAGhE,MAAM,QAAQ,IAA2B,KAAA,CAAS;EAClD,MAAM,UAAU,eAAe,MAAM,QAAQ,MAAM,KAAK;EAExD,SAAS,SAAe;GACtB,MAAM,OAAO,SAAS,QAAQ,KAAK;GACnC,MAAM,QAAQ;GACd,KAAK,eAAe,IAAI;EAC1B;EAEA,MAAM,YAAY;GAAE,KAAK;GAAW,MAAM;EAAY;EACtD,MAAM,WAAW,eAAgB,QAAQ,QAAQ,UAAU,QAAQ,SAAS,cAAe;EAG3F,MAAM,YAAY;GAAE,KAAK;GAAa,MAAM;EAAa;EACzD,MAAM,WAAW,eAAgB,QAAQ,QAAQ,UAAU,QAAQ,SAAS,KAAA,CAAU;;GAIpF,OAAA,UAAA,GAAA,mBA4BK,MAAA;IA5BD,OAAM;IAAO,aAAW,SAAA;IAAW,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,eAAe,QAAA,KAAK,CAAA,CAAA;GAM3D,GAAA,CAAA,QAAA,YADR,UAAA,GAAA,mBAqBS,UAAA;;IAnBP,MAAK;IACL,OAAM;IACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAM;;IAEd,mBAEO,QAFP,YAEO,CADL,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA;KAEV,UAAA,GAAA,YAIE,wBAHK,SAAA,KAAQ,GAAA;KACb,OAAM;KACN,eAAY;;IAEd,mBAMS,QANT,YAMS,gBALP,QAAA,UAAO,QAAuB,MAAA,IAAA,CAAI,CAAC,kBAA4B,QAAA,UAAO,SAA0B,MAAA,IAAA,CAAI,CAAC,mBAA+B,MAAA,IAAA,CAAI,CAAC,IAAI,GAAA,CAAA;GAOhI,CAAA,KAAA,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/primitives/table/src/TableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.js","names":[],"sources":["../../../../packages/primitives/table/src/TableRow.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/** Row emphasis. `selected` and `interactive` compose — a picked row that is\n * also clickable reads as both. */\nexport type TableRowState = \"selected\" | \"interactive\" | \"disabled\";\n\nexport const tableRowVariants = cva(\"transition-colors duration-fast ease-out\", {\n  variants: {\n    state: {\n      // Hover is a promise: only an interactive row may answer the pointer.\n      interactive:\n        \"cursor-pointer hover:bg-subtle/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring focus-visible:bg-subtle/60\",\n      selected: \"bg-primary-muted/60\",\n      disabled: \"text-muted-foreground\",\n      none: \"\",\n    },\n  },\n});\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** Hover/press language plus keyboard activation; the host owns what activation MEANS via `@activate`. */\n    interactive?: boolean;\n    /** Marks the row as the current choice among its peers (`aria-selected`). */\n    selected?: boolean;\n    /** Unavailable rather than hidden: muted, inert, still announced. */\n    disabled?: boolean;\n  }>(),\n  { interactive: false, selected: false, disabled: false },\n);\n\nconst emit = defineEmits<{ activate: [] }>();\n\n// A row is not a button, so it cannot lean on native activation. Clicks\n// coming from real controls inside a cell (RowActions, links) belong to\n// those controls — bubbling them up here would fire the row's activation\n// behind the control's back.\nfunction onActivateClick(event: MouseEvent): void {\n  if (!props.interactive || props.disabled) return;\n  const target = event.target;\n  if (\n    target instanceof Element &&\n    target.closest(\"a, button, input, select, textarea, label, [role='button']\")\n  )\n    return;\n  emit(\"activate\");\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (!props.interactive || props.disabled) return;\n  if (event.key === \"Enter\" || event.key === \" \") {\n    event.preventDefault();\n    emit(\"activate\");\n  }\n}\n\nconst state = computed(() =>\n  props.disabled\n    ? \"disabled\"\n    : props.interactive\n      ? \"interactive\"\n      : props.selected\n        ? \"selected\"\n        : \"none\",\n);\n</script>\n\n<template>\n  <tr\n    :class=\"\n      cn(\n        tableRowVariants({ state }),\n        // Selected rides above interactive's hover wash, not under it.\n        selected && !disabled && 'bg-primary-muted/60',\n      )\n    \"\n    :aria-selected=\"interactive || selected ? selected : undefined\"\n    :tabindex=\"interactive && !disabled ? 0 : undefined\"\n    @click=\"onActivateClick\"\n    @keydown=\"onKeydown\"\n  >\n    <!-- @slot The row's cells (`TableCell`, or `TableHead` inside `<thead>`). -->\n    <slot />\n  </tr>\n</template>\n"],"mappings":""}

package/dist/primitives/table/src/TableRow.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/table/src/TableRow.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/** Row emphasis. `selected` and `interactive` compose — a picked row that is\n * also clickable reads as both. */\nexport type TableRowState = \"selected\" | \"interactive\" | \"disabled\";\n\nexport const tableRowVariants = cva(\"transition-colors duration-fast ease-out\", {\n  variants: {\n    state: {\n      // Hover is a promise: only an interactive row may answer the pointer.\n      interactive:\n        \"cursor-pointer hover:bg-subtle/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring focus-visible:bg-subtle/60\",\n      selected: \"bg-primary-muted/60\",\n      disabled: \"text-muted-foreground\",\n      none: \"\",\n    },\n  },\n});\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** Hover/press language plus keyboard activation; the host owns what activation MEANS via `@activate`. */\n    interactive?: boolean;\n    /** Marks the row as the current choice among its peers (`aria-selected`). */\n    selected?: boolean;\n    /** Unavailable rather than hidden: muted, inert, still announced. */\n    disabled?: boolean;\n  }>(),\n  { interactive: false, selected: false, disabled: false },\n);\n\nconst emit = defineEmits<{ activate: [] }>();\n\n// A row is not a button, so it cannot lean on native activation. Clicks\n// coming from real controls inside a cell (RowActions, links) belong to\n// those controls — bubbling them up here would fire the row's activation\n// behind the control's back.\nfunction onActivateClick(event: MouseEvent): void {\n  if (!props.interactive || props.disabled) return;\n  const target = event.target;\n  if (\n    target instanceof Element &&\n    target.closest(\"a, button, input, select, textarea, label, [role='button']\")\n  )\n    return;\n  emit(\"activate\");\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (!props.interactive || props.disabled) return;\n  if (event.key === \"Enter\" || event.key === \" \") {\n    event.preventDefault();\n    emit(\"activate\");\n  }\n}\n\nconst state = computed(() =>\n  props.disabled\n    ? \"disabled\"\n    : props.interactive\n      ? \"interactive\"\n      : props.selected\n        ? \"selected\"\n        : \"none\",\n);\n</script>\n\n<template>\n  <tr\n    :class=\"\n      cn(\n        tableRowVariants({ state }),\n        // Selected rides above interactive's hover wash, not under it.\n        selected && !disabled && 'bg-primary-muted/60',\n      )\n    \"\n    :aria-selected=\"interactive || selected ? selected : undefined\"\n    :tabindex=\"interactive && !disabled ? 0 : undefined\"\n    @click=\"onActivateClick\"\n    @keydown=\"onKeydown\"\n  >\n    <!-- @slot The row's cells (`TableCell`, or `TableHead` inside `<thead>`). -->\n    <slot />\n  </tr>\n</template>\n"],"mappings":";;;;;;AAOA,IAAa,mBAAmB,IAAI,4CAA4C,EAC9E,UAAU,EACR,OAAO;CAEL,aACE;CACF,UAAU;CACV,UAAU;CACV,MAAM;AACR,EACF,EACF,CAAC;;;;;;;;;;;;;;;;;;;EAOD,MAAM,QAAQ;EAYd,MAAM,OAAO;EAMb,SAAS,gBAAgB,OAAyB;GAChD,IAAI,CAAC,MAAM,eAAe,MAAM,UAAU;GAC1C,MAAM,SAAS,MAAM;GACrB,IACE,kBAAkB,WAClB,OAAO,QAAQ,4DAA4D,GAE3E;GACF,KAAK,UAAU;EACjB;EAEA,SAAS,UAAU,OAA4B;GAC7C,IAAI,CAAC,MAAM,eAAe,MAAM,UAAU;GAC1C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;IAC9C,MAAM,eAAe;IACrB,KAAK,UAAU;GACjB;EACF;EAEA,MAAM,QAAQ,eACZ,MAAM,WACF,aACA,MAAM,cACJ,gBACA,MAAM,WACJ,aACA,MACV;;GAIE,OAAA,UAAA,GAAA,mBAeK,MAAA;IAdF,OAAK,eAAS,MAAA,EAAA,CAAE,CAAU,MAAA,gBAAA,CAAgB,CAAA,EAAA,OAAG,MAAA,MAAK,CAAA,GAAqF,QAAA,YAAQ,CAAK,QAAA,YAAQ,qBAAA,CAAA;IAO5J,iBAAe,QAAA,eAAe,QAAA,WAAW,QAAA,WAAW,KAAA;IACpD,UAAU,QAAA,eAAW,CAAK,QAAA,WAAQ,IAAO,KAAA;IACzC,SAAO;IACE;GAGV,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/primitives/table/src/index.js

@@ -0,0 +1,8 @@
+import { TABLE_LABELS } from "./Table.vue_vue_type_script_setup_true_lang.js";
+import Table_default from "./Table.js";
+import { tableRowVariants } from "./TableRow.vue_vue_type_script_setup_true_lang.js";
+import TableRow_default from "./TableRow.js";
+import { headAlignClass, nextSort } from "./TableHead.vue_vue_type_script_setup_true_lang.js";
+import TableHead_default from "./TableHead.js";
+import TableCell_default from "./TableCell.js";
+export { TABLE_LABELS, TableCell_default as TableCell, TableHead_default as TableHead, TableRow_default as TableRow, Table_default as default, headAlignClass, nextSort, tableRowVariants };

package/dist/primitives/tabs/src/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../../../packages/primitives/tabs/src/Tabs.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TabItem {\n  /** Selects this tab, and names the slot that carries its panel. */\n  value: string;\n  /** The trigger's visible text. */\n  label: string;\n  /** Skips this tab in pointer, click and roving-tabindex arrow navigation. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from \"reka-ui\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * Tabs — switch between panels/views, with the active panel's content shown\n * below. For picking one value of a setting with no panel underneath, reach\n * for SegmentedControl instead. Built on Reka UI's Tabs (roving tabindex,\n * arrow-key navigation, a11y sourced from the `tab`/`tabpanel` pattern).\n * Panels are supplied by the host via named slots keyed by each tab's\n * `value` — `<Tabs :tabs=\"tabs\"><template #overview>…</template></Tabs>`.\n *\n * The panels are real focus stops: Reka gives each `TabsContent`\n * `tabindex=\"0\"`, which is the ARIA tabs pattern's answer to \"how does a\n * keyboard reader get from the tab list to the content\" — Tab lands on the\n * active panel. An earlier `focus-visible:outline-none` here therefore\n * silenced a legitimate focus indicator (WCAG 2.4.7) rather than a cosmetic\n * one, so the panel wears the canonical ring like every other focusable\n * surface in the library.\n */\ndefineProps<{\n  /** The selected tab's value. Omit it and Tabs owns its own selection. */\n  modelValue?: string;\n  /** The ordered set of tabs; each entry needs a like-named slot for its panel. */\n  tabs: TabItem[];\n}>();\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n</script>\n\n<template>\n  <TabsRoot\n    v-bind=\"optional({ modelValue })\"\n    orientation=\"horizontal\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <TabsList class=\"relative inline-flex items-center gap-1 border-b border-border\">\n      <!-- A drained plate rather than a dim, and the trigger is the awkward\n           case that makes the reason clear. Its whole content is the tab's\n           label, so `disabled:opacity-50` took that label from 5.25:1 to\n           2.05:1 — but the label is *already* `text-muted-foreground` when the\n           tab is merely unselected, so simply dropping the alpha would leave an\n           unavailable tab painted exactly like an available one. The fill is\n           what carries \"unavailable\" instead: `bg-muted` under the same\n           measured text holds 4.67:1, and the plate is visible where a second\n           grey would not have been. `rounded-t-sm` is the control radius less\n           the list's own padding, and it shapes the focus outline too — the\n           plate stops at the list's bottom rule rather than crossing it. -->\n      <TabsTrigger\n        v-for=\"tab in tabs\"\n        :key=\"tab.value\"\n        :value=\"tab.value\"\n        v-bind=\"optional({ disabled: tab.disabled })\"\n        class=\"relative rounded-t-sm px-3 py-2 text-sm text-muted-foreground transition-colors duration-fast ease-out data-[state=active]:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground\"\n      >\n        {{ tab.label }}\n      </TabsTrigger>\n      <TabsIndicator\n        class=\"absolute bottom-0 left-0 h-0.5 bg-primary\"\n        style=\"\n          width: var(--reka-tabs-indicator-size);\n          transform: translateX(var(--reka-tabs-indicator-position));\n          transition:\n            width var(--duration-fast) var(--ease-spring),\n            transform var(--duration-fast) var(--ease-spring);\n        \"\n      />\n    </TabsList>\n    <TabsContent\n      v-for=\"tab in tabs\"\n      :key=\"tab.value\"\n      :value=\"tab.value\"\n      class=\"animate-fade-rise pt-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n    >\n      <slot :name=\"tab.value\" />\n    </TabsContent>\n  </TabsRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/tabs/src/Tabs.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../packages/primitives/tabs/src/Tabs.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TabItem {\n  /** Selects this tab, and names the slot that carries its panel. */\n  value: string;\n  /** The trigger's visible text. */\n  label: string;\n  /** Skips this tab in pointer, click and roving-tabindex arrow navigation. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from \"reka-ui\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * Tabs — switch between panels/views, with the active panel's content shown\n * below. For picking one value of a setting with no panel underneath, reach\n * for SegmentedControl instead. Built on Reka UI's Tabs (roving tabindex,\n * arrow-key navigation, a11y sourced from the `tab`/`tabpanel` pattern).\n * Panels are supplied by the host via named slots keyed by each tab's\n * `value` — `<Tabs :tabs=\"tabs\"><template #overview>…</template></Tabs>`.\n *\n * The panels are real focus stops: Reka gives each `TabsContent`\n * `tabindex=\"0\"`, which is the ARIA tabs pattern's answer to \"how does a\n * keyboard reader get from the tab list to the content\" — Tab lands on the\n * active panel. An earlier `focus-visible:outline-none` here therefore\n * silenced a legitimate focus indicator (WCAG 2.4.7) rather than a cosmetic\n * one, so the panel wears the canonical ring like every other focusable\n * surface in the library.\n */\ndefineProps<{\n  /** The selected tab's value. Omit it and Tabs owns its own selection. */\n  modelValue?: string;\n  /** The ordered set of tabs; each entry needs a like-named slot for its panel. */\n  tabs: TabItem[];\n}>();\n\ndefineEmits<{ \"update:modelValue\": [value: string] }>();\n</script>\n\n<template>\n  <TabsRoot\n    v-bind=\"optional({ modelValue })\"\n    orientation=\"horizontal\"\n    @update:model-value=\"$emit('update:modelValue', String($event))\"\n  >\n    <TabsList class=\"relative inline-flex items-center gap-1 border-b border-border\">\n      <!-- A drained plate rather than a dim, and the trigger is the awkward\n           case that makes the reason clear. Its whole content is the tab's\n           label, so `disabled:opacity-50` took that label from 5.25:1 to\n           2.05:1 — but the label is *already* `text-muted-foreground` when the\n           tab is merely unselected, so simply dropping the alpha would leave an\n           unavailable tab painted exactly like an available one. The fill is\n           what carries \"unavailable\" instead: `bg-muted` under the same\n           measured text holds 4.67:1, and the plate is visible where a second\n           grey would not have been. `rounded-t-sm` is the control radius less\n           the list's own padding, and it shapes the focus outline too — the\n           plate stops at the list's bottom rule rather than crossing it. -->\n      <TabsTrigger\n        v-for=\"tab in tabs\"\n        :key=\"tab.value\"\n        :value=\"tab.value\"\n        v-bind=\"optional({ disabled: tab.disabled })\"\n        class=\"relative rounded-t-sm px-3 py-2 text-sm text-muted-foreground transition-colors duration-fast ease-out data-[state=active]:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground\"\n      >\n        {{ tab.label }}\n      </TabsTrigger>\n      <TabsIndicator\n        class=\"absolute bottom-0 left-0 h-0.5 bg-primary\"\n        style=\"\n          width: var(--reka-tabs-indicator-size);\n          transform: translateX(var(--reka-tabs-indicator-position));\n          transition:\n            width var(--duration-fast) var(--ease-spring),\n            transform var(--duration-fast) var(--ease-spring);\n        \"\n      />\n    </TabsList>\n    <TabsContent\n      v-for=\"tab in tabs\"\n      :key=\"tab.value\"\n      :value=\"tab.value\"\n      class=\"animate-fade-rise pt-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\"\n    >\n      <slot :name=\"tab.value\" />\n    </TabsContent>\n  </TabsRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;GA0CE,OAAA,UAAA,GAAA,YA6CW,MAAA,QAAA,GA7CX,WACU,MA4CC,QAAA,CA5CO,CAAA,EAAA,YAAG,QAAA,WAAU,CAAA,GAAA;IAC7B,aAAY;IACX,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,OAAO,MAAM,CAAA;;IAE7D,SAAA,cA+BW,CA/BX,YA+BW,MAAA,QAAA,GAAA,EA/BD,OAAM,iEAAgE,GAAA;KAa5E,SAAA,cAAmB,EADrB,UAAA,IAAA,GAAA,mBAQc,UAAA,MAAA,WAPE,QAAA,OAAP,QAAG;MADZ,OAAA,UAAA,GAAA,YAQc,MAAA,WAAA,GARd,WAQc;OANX,KAAK,IAAI;OACT,OAAO,IAAI;MACJ,GAAA,EAAA,SAAA,KAAA,GAAA,MAAA,QAAA,CAAQ,CAAA,EAAA,UAAa,IAAI,SAAQ,CAAA,GAAA,EACzC,OAAM,6SAA4S,CAAA,GAAA;OAElT,SAAA,cAAe,CAAZ,gBAAA,gBAAA,IAAI,KAAK,GAAA,CAAA,CAAA,CAAA;;;KAEd,CAAA,GAAA,GAAA,IAAA,YASE,MAAA,aAAA,GAAA;MARA,OAAM;MACN,OAAA;OAAA,SAAA;OAAA,aAAA;OAAA,cAAA;MAAA;;;IASJ,CAAA,IAAA,UAAA,IAAA,GAAA,mBAOc,UAAA,MAAA,WANE,QAAA,OAAP,QAAG;KADZ,OAAA,UAAA,GAAA,YAOc,MAAA,WAAA,GAAA;MALX,KAAK,IAAI;MACT,OAAO,IAAI;MACZ,OAAM;;MAEN,SAAA,cAA0B,CAA1B,WAA0B,KAAA,QAAb,IAAI,KAAK,CAAA,CAAA"}