@ecoma-io/loom 0.1.1 → 0.2.0

package/dist/primitives/SpeedDial/SpeedDial.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,175 @@
+import { cn } from "../../lib/cn.js";
+import { optional } from "../../lib/props.js";
+import { listStaggerDelay } from "../../lib/motion.js";
+import { useSplitAttrs } from "../../lib/attrs.js";
+import { Plus, X } from "@lucide/vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+import { DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger } from "reka-ui";
+//#region src/primitives/SpeedDial/SpeedDial.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	"aria-hidden": "true",
+	class: "inline-grid place-items-center"
+};
+var _hoisted_2 = { class: "[grid-area:1/1] transition-[opacity,transform] duration-fast ease-out group-data-[state=open]:rotate-45 group-data-[state=open]:opacity-0" };
+var _hoisted_3 = { class: "[grid-area:1/1] -rotate-45 opacity-0 transition-[opacity,transform] duration-fast ease-out group-data-[state=open]:rotate-0 group-data-[state=open]:opacity-100" };
+var _hoisted_4 = ["aria-orientation"];
+/**
+* The three things a direction decides — which side the popper puts the fan
+* on, which axis it stacks along, and which axis the arrow keys walk — are one
+* decision, so they are one table rather than a `cva` map plus two lookups.
+* Split across three structures they drift, and a fan laid out on one axis and
+* navigated on another is exactly the defect that is invisible until someone
+* reaches for the keyboard.
+*
+* `flex-col` for `up` and not `flex-col-reverse`: reversing the visual order
+* would put `actions[0]` nearest the trigger, which is the convention, at the
+* price of making Arrow Down move the highlight *up* the screen and making a
+* screen reader read the fan bottom-to-top. So the rule is one line instead —
+* the actions always render in array order along the fan's own reading
+* direction — and the arrow keys, the reading order and the eye all agree.
+*/
+var FANS = {
+	up: {
+		side: "top",
+		stack: "flex-col",
+		axis: "vertical"
+	},
+	down: {
+		side: "bottom",
+		stack: "flex-col",
+		axis: "vertical"
+	},
+	left: {
+		side: "left",
+		stack: "flex-row",
+		axis: "horizontal"
+	},
+	right: {
+		side: "right",
+		stack: "flex-row",
+		axis: "horizontal"
+	}
+};
+/**
+* Button's press language, mirrored rather than imported. A FAB is circular,
+* elevated and sized off its own scale, so `Button`'s height variants would
+* fight it — but the *feel* of a press is not per-component, so the transform
+* spring, the 0.97 press and the focus treatment are the same strings Button
+* carries.
+*/
+var PRESS = [
+	"[transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),box-shadow_var(--duration-fast)_var(--ease-out)]",
+	"active:scale-press",
+	"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo"
+].join(" ");
+/**
+* Reka's menu is a *vertical* roving-focus group: `MenuContentImpl` hard-codes
+* `arrowKeyOptions: "vertical"`, so Arrow Left and Arrow Right do nothing in
+* it. In a `left` or `right` fan that leaves the keys that move the highlight
+* running across the axis the reader can see.
+*
+* Re-issuing the press as the key Reka already listens for keeps one
+* implementation of the navigation — the typeahead, the highlight bookkeeping
+* and the skipping of disabled items all still come from Reka — instead of a
+* second, hand-rolled one running beside it and disagreeing with it.
+*/
+var MIRRORED_ARROWS = {
+	ArrowRight: "ArrowDown",
+	ArrowLeft: "ArrowUp"
+};
+var SpeedDial_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "SpeedDial",
+	props: {
+		actions: {},
+		label: {},
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		direction: { default: "up" }
+	},
+	emits: ["select", "update:open"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const fan = computed(() => FANS[props.direction]);
+		const { attrs, rest: triggerAttrs } = useSplitAttrs();
+		/**
+		* A disabled action selects nothing. Reka already blocks the pointer path on
+		* the disabled row; this is the second half, for a keyboard press that reaches
+		* it anyway.
+		*/
+		function choose(action, index) {
+			if (action.disabled) return;
+			emit("select", action, index);
+		}
+		/** See `MIRRORED_ARROWS`. Vertical fans are left alone — Reka already owns them. */
+		function mirrorArrows(event) {
+			if (fan.value.axis !== "horizontal") return;
+			const mapped = MIRRORED_ARROWS[event.key];
+			if (mapped === void 0) return;
+			event.preventDefault();
+			event.currentTarget?.dispatchEvent(new KeyboardEvent("keydown", {
+				key: mapped,
+				bubbles: true,
+				cancelable: true
+			}));
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DropdownMenuRoot), mergeProps(unref(optional)({ open: __props.open }), {
+				modal: false,
+				"onUpdate:open": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:open", $event))
+			}), {
+				default: withCtx(() => [createVNode(unref(DropdownMenuTrigger), mergeProps(unref(triggerAttrs), {
+					type: "button",
+					"aria-label": __props.label,
+					class: unref(cn)("group inline-flex h-14 w-14 shrink-0 select-none items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg", "hover:bg-primary/90", unref(PRESS), unref(attrs).class)
+				}), {
+					default: withCtx(() => [createElementVNode("span", _hoisted_1, [createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(unref(Plus), { class: "h-6 w-6" })])]), createElementVNode("span", _hoisted_3, [createVNode(unref(X), { class: "h-6 w-6" })])])]),
+					_: 3
+				}, 16, ["aria-label", "class"]), createVNode(unref(DropdownMenuPortal), null, {
+					default: withCtx(() => [createVNode(unref(DropdownMenuContent), {
+						"as-child": "",
+						side: fan.value.side,
+						"side-offset": 12,
+						align: "center",
+						onKeydown: mirrorArrows
+					}, {
+						default: withCtx(() => [createElementVNode("div", {
+							"aria-orientation": fan.value.axis,
+							class: normalizeClass(unref(cn)("z-50 flex items-center gap-3 outline-none", fan.value.stack))
+						}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.actions, (action, index) => {
+							return openBlock(), createBlock(unref(DropdownMenuItem), {
+								key: index,
+								disabled: action.disabled ?? false,
+								class: normalizeClass(unref(cn)("inline-flex h-9 shrink-0 cursor-pointer select-none items-center gap-2 whitespace-nowrap rounded-full border border-border bg-popover px-3 text-sm text-popover-foreground shadow-md outline-none", unref(PRESS), "data-[highlighted]:bg-subtle", "data-[disabled]:pointer-events-none data-[disabled]:border-border-strong data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:shadow-none", "animate-scale-in")),
+								style: normalizeStyle({ animationDelay: unref(listStaggerDelay)(index) }),
+								onSelect: ($event) => choose(action, index)
+							}, {
+								default: withCtx(() => [action.icon ? (openBlock(), createBlock(resolveDynamicComponent(action.icon), {
+									key: 0,
+									class: "h-4 w-4",
+									"aria-hidden": "true"
+								})) : createCommentVNode("", true), createElementVNode("span", null, toDisplayString(action.label), 1)]),
+								_: 2
+							}, 1032, [
+								"disabled",
+								"class",
+								"style",
+								"onSelect"
+							]);
+						}), 128))], 10, _hoisted_4)]),
+						_: 1
+					}, 8, ["side"])]),
+					_: 1
+				})]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { SpeedDial_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=SpeedDial.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpeedDial.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/primitives/SpeedDial/SpeedDial.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Component } from \"vue\";\n\n/**\n * One action in the fan.\n *\n * `label` is required and it is not a tooltip: it is rendered as real text\n * beside the glyph. A column of unlabelled circles is the failure mode of this\n * pattern — it reads only to whoever already knows the icons — and a `title`\n * attribute does not fix it, because it is not an accessible name and never\n * appears for a touch or keyboard user at all.\n */\nexport interface SpeedDialAction {\n  /** The visible text on the action, and its accessible name. Required. */\n  label: string;\n  /** A glyph shown before the label. Decorative — the label carries the meaning. */\n  icon?: Component;\n  /** Visible but inert: announced as disabled, and choosing it emits nothing. */\n  disabled?: boolean;\n}\n\n/** Which side of the trigger the fan opens onto. */\nexport type SpeedDialDirection = \"up\" | \"down\" | \"left\" | \"right\";\n\n/**\n * The three things a direction decides — which side the popper puts the fan\n * on, which axis it stacks along, and which axis the arrow keys walk — are one\n * decision, so they are one table rather than a `cva` map plus two lookups.\n * Split across three structures they drift, and a fan laid out on one axis and\n * navigated on another is exactly the defect that is invisible until someone\n * reaches for the keyboard.\n *\n * `flex-col` for `up` and not `flex-col-reverse`: reversing the visual order\n * would put `actions[0]` nearest the trigger, which is the convention, at the\n * price of making Arrow Down move the highlight *up* the screen and making a\n * screen reader read the fan bottom-to-top. So the rule is one line instead —\n * the actions always render in array order along the fan's own reading\n * direction — and the arrow keys, the reading order and the eye all agree.\n */\nconst FANS = {\n  up: { side: \"top\", stack: \"flex-col\", axis: \"vertical\" },\n  down: { side: \"bottom\", stack: \"flex-col\", axis: \"vertical\" },\n  left: { side: \"left\", stack: \"flex-row\", axis: \"horizontal\" },\n  right: { side: \"right\", stack: \"flex-row\", axis: \"horizontal\" },\n} satisfies Record<\n  SpeedDialDirection,\n  { side: \"top\" | \"bottom\" | \"left\" | \"right\"; stack: string; axis: \"vertical\" | \"horizontal\" }\n>;\n\n/**\n * Button's press language, mirrored rather than imported. A FAB is circular,\n * elevated and sized off its own scale, so `Button`'s height variants would\n * fight it — but the *feel* of a press is not per-component, so the transform\n * spring, the 0.97 press and the focus treatment are the same strings Button\n * carries.\n */\nconst PRESS = [\n  \"[transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out),box-shadow_var(--duration-fast)_var(--ease-out)]\",\n  \"active:scale-press\",\n  \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n].join(\" \");\n\n/**\n * Reka's menu is a *vertical* roving-focus group: `MenuContentImpl` hard-codes\n * `arrowKeyOptions: \"vertical\"`, so Arrow Left and Arrow Right do nothing in\n * it. In a `left` or `right` fan that leaves the keys that move the highlight\n * running across the axis the reader can see.\n *\n * Re-issuing the press as the key Reka already listens for keeps one\n * implementation of the navigation — the typeahead, the highlight bookkeeping\n * and the skipping of disabled items all still come from Reka — instead of a\n * second, hand-rolled one running beside it and disagreeing with it.\n */\nconst MIRRORED_ARROWS: Record<string, string | undefined> = {\n  ArrowRight: \"ArrowDown\",\n  ArrowLeft: \"ArrowUp\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport {\n  DropdownMenuRoot,\n  DropdownMenuTrigger,\n  DropdownMenuPortal,\n  DropdownMenuContent,\n  DropdownMenuItem,\n} from \"reka-ui\";\nimport { Plus, X } from \"@lucide/vue\";\nimport { cn } from \"../../lib/cn\";\nimport { listStaggerDelay } from \"../../lib/motion\";\nimport { optional } from \"../../lib/props\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\n\n/**\n * SpeedDial — one prominent circular button that expands into a short fan of\n * related actions. The floating-action-button pattern: the single most likely\n * thing to do on a screen, with its three or four near neighbours a press\n * away.\n *\n * Built on Reka UI's DropdownMenu parts, and that is the load-bearing decision\n * here. Strip the circle and the fan away and what is left is a menu button:\n * `aria-haspopup=\"menu\"`, `aria-expanded` tracking the state, one Tab stop with\n * roving focus across the actions, typeahead, Esc closing and returning focus\n * to the trigger. Reka supplies every one of those, tested, and `DropdownMenu`\n * in this same directory already proves the wiring. Hand-rolling it would mean\n * re-solving focus management — the part of this pattern that is actually hard\n * and the part that silently rots — in order to change nothing a reader could\n * name. What is different about a SpeedDial is its *shape*: a circular trigger,\n * a fan of labelled pills instead of a panel of rows, and a direction. That is\n * layout, and layout is all this component adds.\n *\n * It is deliberately not modal, unlike `DropdownMenu`. Reka's modal path locks\n * the body and compensates for the vanished scrollbar with padding — which\n * widens the viewport and slides a viewport-pinned trigger sideways the moment\n * it opens. A control whose whole job is to sit in a corner cannot jump out of\n * it on press.\n *\n * **Positioning is the caller's.** This renders as an ordinary inline-level\n * element and pins itself to nothing; a `class` of `fixed bottom-6 right-6`\n * lands on the trigger. A library that nailed itself to a viewport corner could\n * never be placed in a panel.\n *\n * Reach for `DropdownMenu` when the trigger belongs in a toolbar or a row and\n * the commands are a list rather than a fan, and for `Button` when there is one\n * action and no menu at all.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The actions, in the order they read along the fan. Three or four; this is a shortcut, not a menu. */\n    actions: SpeedDialAction[];\n    /** The trigger's accessible name, e.g. \"Create\". Required — a lone glyph names nothing. */\n    label: string;\n    /** Drive the fan from the host with `v-model:open`; omit it and the component owns its own state. */\n    open?: boolean | undefined;\n    /** Which side of the trigger the fan opens onto. */\n    direction?: SpeedDialDirection;\n  }>(),\n  // `open: undefined` is load-bearing rather than a redundant default — it is\n  // what keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting. `optional()` in the template is the other half; its docblock\n  // carries the reasoning for both.\n  { open: undefined, direction: \"up\" },\n);\n\nconst emit = defineEmits<{\n  /** The chosen action, and its index in `actions` — the index is the stable identity, since a label is display text and gets translated. */\n  select: [action: SpeedDialAction, index: number];\n  /** The fan opened or closed, for `v-model:open`. */\n  \"update:open\": [value: boolean];\n}>();\n\nconst fan = computed(() => FANS[props.direction]);\n\n// `DropdownMenuRoot` renders no DOM node at all, so fallthrough attributes\n// would be dropped on the floor rather than landing anywhere. They go to the\n// trigger, which is both the interactive element they describe and the element\n// a caller positions.\n//\n// `class` is pulled out of that spread and merged through `cn()` instead:\n// spreading it alongside the trigger's own `:class` only concatenates the two\n// lists — Vue's merge is generic, not Tailwind-aware — so a caller's `h-12`\n// would lose to the trigger's own `h-14` depending on which utility Tailwind\n// happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: triggerAttrs } = useSplitAttrs();\n\n/**\n * A disabled action selects nothing. Reka already blocks the pointer path on\n * the disabled row; this is the second half, for a keyboard press that reaches\n * it anyway.\n */\nfunction choose(action: SpeedDialAction, index: number): void {\n  if (action.disabled) return;\n  emit(\"select\", action, index);\n}\n\n/** See `MIRRORED_ARROWS`. Vertical fans are left alone — Reka already owns them. */\nfunction mirrorArrows(event: KeyboardEvent): void {\n  if (fan.value.axis !== \"horizontal\") return;\n  const mapped = MIRRORED_ARROWS[event.key];\n  if (mapped === undefined) return;\n  event.preventDefault();\n  (event.currentTarget as HTMLElement | null)?.dispatchEvent(\n    new KeyboardEvent(\"keydown\", { key: mapped, bubbles: true, cancelable: true }),\n  );\n}\n</script>\n\n<template>\n  <DropdownMenuRoot\n    v-bind=\"optional({ open })\"\n    :modal=\"false\"\n    @update:open=\"$emit('update:open', $event)\"\n  >\n    <DropdownMenuTrigger\n      v-bind=\"triggerAttrs\"\n      type=\"button\"\n      :aria-label=\"label\"\n      :class=\"\n        cn(\n          // `shadow-lg`, which `theme.css` reserves for true overlays and which\n          // would be wrong on an ordinary control: this one genuinely floats\n          // over the page rather than sitting in it, so the largest elevation is\n          // depth reported honestly rather than a glow on something flush.\n          'group inline-flex h-14 w-14 shrink-0 select-none items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg',\n          'hover:bg-primary/90',\n          PRESS,\n          attrs.class as string,\n        )\n      \"\n    >\n      <!-- Both glyphs are hidden from assistive technology: the button's name\n           is `label`, and a second reading of \"plus\" would only compete with\n           it. The open glyph cross-fades rather than the trigger simply\n           rotating 45° into a cross, because the slot lets a caller supply a\n           domain glyph — a pencil rotated 45° is a tilted pencil, not a\n           dismissal. -->\n      <span aria-hidden=\"true\" class=\"inline-grid place-items-center\">\n        <span\n          class=\"[grid-area:1/1] transition-[opacity,transform] duration-fast ease-out group-data-[state=open]:rotate-45 group-data-[state=open]:opacity-0\"\n        >\n          <!-- @slot The trigger's resting glyph. Defaults to a plus. -->\n          <slot><Plus class=\"h-6 w-6\" /></slot>\n        </span>\n        <span\n          class=\"[grid-area:1/1] -rotate-45 opacity-0 transition-[opacity,transform] duration-fast ease-out group-data-[state=open]:rotate-0 group-data-[state=open]:opacity-100\"\n        >\n          <X class=\"h-6 w-6\" />\n        </span>\n      </span>\n    </DropdownMenuTrigger>\n\n    <DropdownMenuPortal>\n      <!-- `as-child` for one reason: `aria-orientation`. Reka hard-codes it to\n           \"vertical\" as a *prop*, which a fallthrough attribute cannot beat —\n           and announcing a `left` or `right` fan as a vertical menu tells a\n           screen-reader user the opposite of what the arrow keys now do. The\n           slot's own props win the merge, so the element below is where the\n           correction can land. -->\n      <DropdownMenuContent\n        as-child\n        :side=\"fan.side\"\n        :side-offset=\"12\"\n        align=\"center\"\n        @keydown=\"mirrorArrows\"\n      >\n        <div\n          :aria-orientation=\"fan.axis\"\n          :class=\"\n            cn(\n              // No popover surface of its own. The fan is a set of floating\n              // pills over the page, not a panel holding them, so the elevation\n              // belongs to each action and there is no box drawn around them.\n              'z-50 flex items-center gap-3 outline-none',\n              fan.stack,\n            )\n          \"\n        >\n          <DropdownMenuItem\n            v-for=\"(action, index) in actions\"\n            :key=\"index\"\n            :disabled=\"action.disabled ?? false\"\n            :class=\"\n              cn(\n                'inline-flex h-9 shrink-0 cursor-pointer select-none items-center gap-2 whitespace-nowrap rounded-full border border-border bg-popover px-3 text-sm text-popover-foreground shadow-md outline-none',\n                PRESS,\n                'data-[highlighted]:bg-subtle',\n                // The pill drains rather than fades. Each action is a floating\n                // label — it has no panel behind it and no tooltip beside it,\n                // so the words *are* the control, and `data-[disabled]:opacity-50`\n                // composited them to 3.21:1 against the page showing through.\n                // Drained, the fill goes to the neutral well and the label to\n                // the measured muted colour: 4.67:1 over it, and a pill that\n                // has plainly given up its card-white surface. The elevation\n                // goes with it, because a shadow is depth and an unavailable\n                // action is not lifted off the page.\n                //\n                // The rim is the one place this pill diverges from the library's\n                // disabled row, which slackens `input` to the lighter `border`\n                // — and it has to. Every other control drains against a surface\n                // that stays behind it; this one floats, so once the shadow\n                // goes the rim is the only thing delimiting it, and `muted` on\n                // the page ground is 1.12:1. Tightening to the strong weight is\n                // what keeps an unavailable action locatable at all, which is\n                // the prior question to it reading as unavailable.\n                'data-[disabled]:pointer-events-none data-[disabled]:border-border-strong data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:shadow-none',\n                // The actions fan out one after another, which is what makes\n                // this read as a fan opening rather than a block appearing. The\n                // delay is the shared stagger vocabulary, capped there so a\n                // fifth action does not trail in noticeably later than the\n                // second.\n                //\n                // Entry only, and it stays that way for free: the content\n                // declares no animation of its own, so on close Reka's Presence\n                // sees `animation-name: none`, unmounts the whole fan in one\n                // frame, and there is no interval left for the stagger to play\n                // backwards in. Collapsing is instant by construction, not by a\n                // second set of reversed delays.\n                'animate-scale-in',\n              )\n            \"\n            :style=\"{ animationDelay: listStaggerDelay(index) }\"\n            @select=\"choose(action, index)\"\n          >\n            <component :is=\"action.icon\" v-if=\"action.icon\" class=\"h-4 w-4\" aria-hidden=\"true\" />\n            <span>{{ action.label }}</span>\n          </DropdownMenuItem>\n        </div>\n      </DropdownMenuContent>\n    </DropdownMenuPortal>\n  </DropdownMenuRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,IAAM,OAAO;CACX,IAAI;EAAE,MAAM;EAAO,OAAO;EAAY,MAAM;CAAW;CACvD,MAAM;EAAE,MAAM;EAAU,OAAO;EAAY,MAAM;CAAW;CAC5D,MAAM;EAAE,MAAM;EAAQ,OAAO;EAAY,MAAM;CAAa;CAC5D,OAAO;EAAE,MAAM;EAAS,OAAO;EAAY,MAAM;CAAa;AAChE;;;;;;;;AAYA,IAAM,QAAQ;CACZ;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;;;;;;;;;;;AAaV,IAAM,kBAAsD;CAC1D,YAAY;CACZ,WAAW;AACb;;;;;;;;;;;;;;;EAmDA,MAAM,QAAQ;EAkBd,MAAM,OAAO;EAOb,MAAM,MAAM,eAAe,KAAK,MAAM,UAAU;EAahD,MAAM,EAAE,OAAO,MAAM,iBAAiB,cAAc;;;;;;EAOpD,SAAS,OAAO,QAAyB,OAAqB;GAC5D,IAAI,OAAO,UAAU;GACrB,KAAK,UAAU,QAAQ,KAAK;EAC9B;;EAGA,SAAS,aAAa,OAA4B;GAChD,IAAI,IAAI,MAAM,SAAS,cAAc;GACrC,MAAM,SAAS,gBAAgB,MAAM;GACrC,IAAI,WAAW,KAAA,GAAW;GAC1B,MAAM,eAAe;GACrB,MAAO,eAAsC,cAC3C,IAAI,cAAc,WAAW;IAAE,KAAK;IAAQ,SAAS;IAAM,YAAY;GAAK,CAAC,CAC/E;EACF;;GAIE,OAAA,UAAA,GAAA,YAyHmB,MAAA,gBAAA,GAzHnB,WACU,MAwHS,QAAA,CAxHD,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAA;IACtB,OAAO;IACP,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,eAAgB,MAAM;;IAEzC,SAAA,cAoCsB,CApCtB,YAoCsB,MAAA,mBAAA,GApCtB,WACU,MAmCY,YAAA,GAnCA;KACpB,MAAK;KACJ,cAAY,QAAA;KACZ,OAAgB,MAAA,EAAA,CAAE,CAAA,0IAAA,uBAA8f,MAAA,KAAA,GAAiB,MAAA,KAAA,CAAK,CAAC,KAAA;;KAmBxiB,SAAA,cAYO,CAZP,mBAYO,QAZP,YAYO,CAXL,mBAKO,QALP,YAKO,CADL,WAAqC,KAAA,QAAA,WAAA,CAAA,SAAA,CAA/B,YAAwB,MAAA,IAAA,GAAA,EAAlB,OAAM,UAAS,CAAA,CAAA,CAAA,CAAA,CAAA,GAE7B,mBAIO,QAJP,YAIO,CADL,YAAqB,MAAA,CAAA,GAAA,EAAlB,OAAM,UAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;IAKxB,GAAA,IAAA,CAAA,cAAA,OAAA,CAAA,GAAA,YA6EqB,MAAA,kBAAA,GAAA,MAAA;KAtEnB,SAAA,cAqEsB,CArEtB,YAqEsB,MAAA,mBAAA,GAAA;MApEpB,YAAA;MACC,MAAM,IAAA,MAAI;MACV,eAAa;MACd,OAAM;MACL,WAAS;;MAEV,SAAA,cA6DM,CA7DN,mBA6DM,OAAA;OA5DH,oBAAkB,IAAA,MAAI;OACtB,OAAK,eAAe,MAAA,EAAA,CAAE,CAAA,6CAAwT,IAAA,MAAI,KAAA,CAAA;MAUnV,GAAA,EAAA,UAAA,IAAA,GAAA,mBAgDmB,UAAA,MAAA,WA/CS,QAAA,UAAlB,QAAQ,UAAK;OADvB,OAAA,UAAA,GAAA,YAgDmB,MAAA,gBAAA,GAAA;QA9ChB,KAAK;QACL,UAAU,OAAO,YAAQ;QACzB,OAAK,eAAiB,MAAA,EAAA,CAAE,CAAA,qMAAuO,MAAA,KAAA,GAAA,gCAAA,uKAAA,kBAAA,CAAA;QAuC/P,OAAK,eAAA,EAAA,gBAAoB,MAAA,gBAAA,CAAgB,CAAC,KAAK,EAAA,CAAA;QAC/C,WAAM,WAAE,OAAO,QAAQ,KAAK;;QAE7B,SAAA,cAAqF,CAAlD,OAAO,QAA1C,UAAA,GAAA,YAAqF,wBAArE,OAAO,IAAI,GAAA;;SAAqB,OAAM;SAAU,eAAY;QAC5E,CAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,mBAA+B,QAAA,MAAA,gBAAtB,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA"}

package/dist/primitives/Stepper/Stepper.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","names":[],"sources":["../../../src/primitives/Stepper/Stepper.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { LabelOf } from \"../../lib/labels\";\n\n/**\n * Everything the spine publishes that is not one of the host's own step\n * titles — and two of the three exist because Reka UI says them in English of\n * its own accord.\n *\n * `group` replaces the literal `aria-label=\"progress\"` that `StepperRoot`\n * writes into its own vnode props, which it exposes no prop for. `position`\n * replaces the live region it renders as a bare text node inside its render\n * function, which no attribute can reach at all — `src/styles/global.css`\n * carries how that one is taken out of the accessibility tree, and why it has\n * to be taken out rather than translated in place.\n *\n * `position` and `completed` take values rather than returning fragments Loom\n * would join. \"Step 3 of 12\" is not four keys and a preposition; it is one\n * sentence a translator has to be able to re-order, and the same is true of\n * where a language puts a qualifier relative to the thing it qualifies. See\n * `LabelOf` in `src/lib/labels.ts`.\n */\nexport interface StepperLabels {\n  /**\n   * The name of the whole spine, as a group. A page carrying two flows should\n   * name each one for what it steps through rather than leaving both\n   * \"Progress\"; a caller's own `aria-label` on `<Stepper>` still wins over\n   * this, for the instance that needs it.\n   */\n  readonly group: string;\n  /**\n   * The position, announced politely each time the flow advances. It takes the\n   * two numbers raw, so a language can order them its own way and\n   * `Intl.NumberFormat` can write the digits.\n   */\n  readonly position: LabelOf<{ step: number; stepCount: number }>;\n  /**\n   * A finished step's whole accessible name, built from its title. ARIA has a\n   * value for \"you are here\" and none for \"done\", and the check glyph is\n   * invisible to a screen reader, so the word has to join the name — and where\n   * it joins is a property of the language, which is why this receives the\n   * title rather than being a suffix Loom appends to it.\n   */\n  readonly completed: LabelOf<{ title: string }>;\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  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 \"../../lib/cn\";\nimport { optional } from \"../../lib/props\";\nimport { useSplitAttrs } from \"../../lib/attrs\";\nimport { useLabels, type LabelOverrides } from \"../../lib/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',\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          <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/Stepper.vue.d.ts

@@ -0,0 +1,119 @@
+import { type LabelOverrides } from "../../lib/labels";
+import type { LabelOf } from "../../lib/labels";
+/**
+ * Everything the spine publishes that is not one of the host's own step
+ * titles — and two of the three exist because Reka UI says them in English of
+ * its own accord.
+ *
+ * `group` replaces the literal `aria-label="progress"` that `StepperRoot`
+ * writes into its own vnode props, which it exposes no prop for. `position`
+ * replaces the live region it renders as a bare text node inside its render
+ * function, which no attribute can reach at all — `src/styles/global.css`
+ * carries how that one is taken out of the accessibility tree, and why it has
+ * to be taken out rather than translated in place.
+ *
+ * `position` and `completed` take values rather than returning fragments Loom
+ * would join. "Step 3 of 12" is not four keys and a preposition; it is one
+ * sentence a translator has to be able to re-order, and the same is true of
+ * where a language puts a qualifier relative to the thing it qualifies. See
+ * `LabelOf` in `src/lib/labels.ts`.
+ */
+export interface StepperLabels {
+    /**
+     * The name of the whole spine, as a group. A page carrying two flows should
+     * name each one for what it steps through rather than leaving both
+     * "Progress"; a caller's own `aria-label` on `<Stepper>` still wins over
+     * this, for the instance that needs it.
+     */
+    readonly group: string;
+    /**
+     * The position, announced politely each time the flow advances. It takes the
+     * two numbers raw, so a language can order them its own way and
+     * `Intl.NumberFormat` can write the digits.
+     */
+    readonly position: LabelOf<{
+        step: number;
+        stepCount: number;
+    }>;
+    /**
+     * A finished step's whole accessible name, built from its title. ARIA has a
+     * value for "you are here" and none for "done", and the check glyph is
+     * invisible to a screen reader, so the word has to join the name — and where
+     * it joins is a property of the language, which is why this receives the
+     * title rather than being a suffix Loom appends to it.
+     */
+    readonly completed: LabelOf<{
+        title: string;
+    }>;
+}
+/**
+ * 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.
+ */
+export declare const STEPPER_LABELS: StepperLabels;
+/** One step in the spine. Its `title` is also the accessible name of that step's trigger. */
+export interface StepperStep {
+    /** The step's label, shown next to its indicator and read out as the trigger's name. */
+    title: string;
+    /** A line under the title saying what the step asks for. Omit it for a bare spine. */
+    description?: string;
+    /** Present but unreachable: the indicator greys and the title mutes, and neither pointer nor keyboard can select it. */
+    disabled?: boolean;
+}
+/** The axis the spine runs along, which also decides which arrow keys move between steps. */
+export type StepperOrientation = "horizontal" | "vertical";
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** The current step, 1-based. Omit it and Stepper owns its own position. */
+    modelValue?: number;
+    /** The ordered steps. Their index decides their number; there is no id to keep. */
+    steps: StepperStep[];
+    /** The axis the spine runs along; vertical moves the titles beside the indicators. */
+    orientation?: StepperOrientation;
+    /** Locks the flow to its furthest point: a reader may go back, or one step on, never jump ahead. */
+    linear?: boolean;
+    /**
+     * Names for everything the spine says out loud, as any subset of
+     * `StepperLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * A whole application's language belongs in that vocabulary rather than
+     * here. This is the per-instance correction, and the key it exists for is
+     * `group`: a page with two flows on it needs each named for what it steps
+     * through.
+     */
+    labels?: LabelOverrides<StepperLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** The current step, 1-based. Omit it and Stepper owns its own position. */
+    modelValue?: number;
+    /** The ordered steps. Their index decides their number; there is no id to keep. */
+    steps: StepperStep[];
+    /** The axis the spine runs along; vertical moves the titles beside the indicators. */
+    orientation?: StepperOrientation;
+    /** Locks the flow to its furthest point: a reader may go back, or one step on, never jump ahead. */
+    linear?: boolean;
+    /**
+     * Names for everything the spine says out loud, as any subset of
+     * `StepperLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * A whole application's language belongs in that vocabulary rather than
+     * here. This is the per-instance correction, and the key it exists for is
+     * `group`: a page with two flows on it needs each named for what it steps
+     * through.
+     */
+    labels?: LabelOverrides<StepperLabels>;
+}> & Readonly<{
+    "onUpdate:modelValue"?: (value: number) => any;
+}>, {
+    orientation: StepperOrientation;
+    linear: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=Stepper.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.vue.d.ts","sourceRoot":"","sources":["../../../src/primitives/Stepper/Stepper.vue"],"names":[],"mappings":"AAoaA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEhD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;;OAKG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChE;;;;;;OAMG;IACH,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAChD;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,EAAE,aAI5B,CAAC;AAEF,6FAA6F;AAC7F,MAAM,WAAW,WAAW;IAC1B,wFAAwF;IACxF,KAAK,EAAE,MAAM,CAAC;IACd,sFAAsF;IACtF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wHAAwH;IACxH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,6FAA6F;AAC7F,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;wBACtC,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IA+Cd,4EAA4E;iBAC/D,MAAM;IACnB,mFAAmF;WAC5E,WAAW,EAAE;IACpB,sFAAsF;kBACxE,kBAAkB;IAChC,oGAAoG;aAC3F,OAAO;IAChB;;;;;;;;;OASG;aACM,cAAc,CAAC,aAAa,CAAC;;;;IAlBtC,4EAA4E;iBAC/D,MAAM;IACnB,mFAAmF;WAC5E,WAAW,EAAE;IACpB,sFAAsF;kBACxE,kBAAkB;IAChC,oGAAoG;aAC3F,OAAO;IAChB;;;;;;;;;OASG;aACM,cAAc,CAAC,aAAa,CAAC;;;;iBAbxB,kBAAkB;YAEvB,OAAO;6EAychB,CAAC"}

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

@@ -0,0 +1,202 @@
+import { cn } from "../../lib/cn.js";
+import { optional } from "../../lib/props.js";
+import { useLabels } from "../../lib/labels.js";
+import { useSplitAttrs } from "../../lib/attrs.js";
+import { Check } from "@lucide/vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, withCtx } from "vue";
+import { StepperDescription, StepperIndicator, StepperItem, StepperRoot, StepperSeparator, StepperTitle, StepperTrigger } from "reka-ui";
+//#region src/primitives/Stepper/Stepper.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { "aria-hidden": "true" };
+var _hoisted_2 = { class: "sr-only" };
+var _hoisted_3 = {
+	"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)}`,
+	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", "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(() => [state === "completed" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_1, toDisplayString(step.title), 1), createElementVNode("span", _hoisted_2, 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_3, 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