@ecoma-io/loom 0.3.0 → 0.4.0

package/dist/packages/primitives/alert/src/Alert.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,127 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import IconButton_default from "../../icon-button/src/IconButton.js";
+import "../../icon-button/src/index.js";
+import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+import { CircleCheck, CircleX, Info, TriangleAlert, X } from "@lucide/vue";
+//#region packages/primitives/alert/src/Alert.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "min-w-0 flex-1 break-words" };
+var _hoisted_2 = {
+	key: 0,
+	class: "text-sm font-medium"
+};
+/**
+* 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 rather than a transcription of it.
+*/
+var ALERT_LABELS = { dismiss: "Dismiss" };
+var Alert_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "Alert",
+	props: {
+		variant: { default: "neutral" },
+		title: {},
+		description: {},
+		dismissible: {
+			type: Boolean,
+			default: false
+		},
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		labels: {}
+	},
+	emits: ["update:open"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const text = useLabels("alert", ALERT_LABELS, () => props.labels);
+		/**
+		* Per-tone accent icon and measured wash. The tinted pairs are the same ones
+		* Badge paints (`bg-*-muted text-*-text`) because those are the tokens mixed
+		* to hold their contrast in both themes; `-text`, never the bare `warning`,
+		* for the failure Badge records. `neutral` carries no icon of its own — an
+		* unremarkable note does not need one, and the slot remains available.
+		*/
+		const TONE_ACCENTS = {
+			neutral: {
+				icon: void 0,
+				wash: "bg-subtle text-subtle-foreground"
+			},
+			info: {
+				icon: Info,
+				wash: "bg-info-muted text-info-text"
+			},
+			success: {
+				icon: CircleCheck,
+				wash: "bg-success-muted text-success-text"
+			},
+			warning: {
+				icon: TriangleAlert,
+				wash: "bg-warning-muted text-warning-text"
+			},
+			destructive: {
+				icon: CircleX,
+				wash: "bg-destructive-muted text-destructive-text"
+			}
+		};
+		const innerOpen = ref(true);
+		const isOpen = computed(() => props.open ?? innerOpen.value);
+		function dismiss() {
+			if (props.open === void 0) innerOpen.value = false;
+			emit("update:open", false);
+		}
+		const accent = computed(() => TONE_ACCENTS[props.variant]);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Transition, {
+				"enter-active-class": "animate-fade-rise",
+				"leave-active-class": "animate-fade-fall"
+			}, {
+				default: withCtx(() => [isOpen.value ? (openBlock(), createElementBlock("div", mergeProps({ key: 0 }, _ctx.$attrs, {
+					role: "alert",
+					class: unref(cn)("flex items-start gap-3 rounded-md border border-transparent p-3", accent.value?.wash)
+				}), [
+					renderSlot(_ctx.$slots, "icon", {}, () => [accent.value?.icon ? (openBlock(), createBlock(resolveDynamicComponent(accent.value.icon), {
+						key: 0,
+						class: "mt-0.5 h-4 w-4 shrink-0",
+						"aria-hidden": "true"
+					})) : createCommentVNode("", true)]),
+					createElementVNode("div", _hoisted_1, [
+						__props.title ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+						__props.description ? (openBlock(), createElementBlock("p", {
+							key: 1,
+							class: normalizeClass(unref(cn)("text-small", __props.title && "mt-0.5"))
+						}, toDisplayString(__props.description), 3)) : createCommentVNode("", true),
+						_ctx.$slots.default ? (openBlock(), createElementBlock("div", {
+							key: 2,
+							class: normalizeClass(unref(cn)((__props.title || __props.description) && "mt-1"))
+						}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("", true)
+					]),
+					__props.dismissible ? (openBlock(), createBlock(unref(IconButton_default), {
+						key: 0,
+						variant: "ghost",
+						size: "sm",
+						label: unref(text).dismiss,
+						class: "-mr-1 -mt-1 shrink-0",
+						onClick: _cache[0] || (_cache[0] = ($event) => dismiss())
+					}, {
+						default: withCtx(() => [createVNode(unref(X), {
+							class: "h-4 w-4",
+							"aria-hidden": "true"
+						})]),
+						_: 1
+					}, 8, ["label"])) : createCommentVNode("", true)
+				], 16)) : createCommentVNode("", true)]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { ALERT_LABELS, Alert_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Alert.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/alert/src/Alert.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../../packages/primitives/alert/src/Alert.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { AlertLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * The feedback tones, matching Toast and Badge so one functional hue means\n * one thing everywhere. `neutral` is the default because an alert's first\n * job is to be seen at all, not to alarm.\n */\nexport type AlertVariant = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"destructive\";\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 ALERT_LABELS: AlertLabels = {\n  dismiss: \"Dismiss\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { Info, CircleCheck, TriangleAlert, CircleX, X } from \"@lucide/vue\";\nimport IconButton from \"@ecoma-io/loom-icon-button\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** Selects the tinted wash and the default icon. */\n    variant?: AlertVariant;\n    /** The headline. Optional — a one-line alert can speak through its body alone. */\n    title?: string;\n    /** The detail line below the title. Longer content belongs in the default slot. */\n    description?: string;\n    /** Shows the dismiss control and lets the alert leave; pair with `v-model:open`. */\n    dismissible?: boolean;\n    /**\n     * Controls visibility. Omit it and the alert owns its own state until\n     * dismissed; pass bindings through `v-model:open` to own it yourself.\n     * Pick one mode per instance and stay there: while the prop is bound the\n     * internal state never moves, so removing the binding later brings back\n     * whatever the host last left visible.\n     */\n    open?: boolean | undefined;\n    /** Names for what the alert says on its own account, as any subset of `AlertLabels`. */\n    labels?: LabelOverrides<AlertLabels>;\n  }>(),\n  {\n    // `undefined` is the uncontrolled state, and only an explicit default\n    // keeps it reachable past Vue's Boolean casting.\n    open: undefined,\n    variant: \"neutral\",\n    dismissible: false,\n  },\n);\n\nconst emit = defineEmits<{ \"update:open\": [value: boolean] }>();\n\n// `<Transition>` cannot pass fallthrough attributes through to its child —\n// a `class` or `@click` on the caller's `<Alert>` would land on the\n// Transition node and vanish. Opting out and forwarding by hand is what\n// keeps this component ordinary from the outside.\ndefineOptions({ inheritAttrs: false });\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(\"alert\", ALERT_LABELS, () => props.labels);\n\n/**\n * Per-tone accent icon and measured wash. The tinted pairs are the same ones\n * Badge paints (`bg-*-muted text-*-text`) because those are the tokens mixed\n * to hold their contrast in both themes; `-text`, never the bare `warning`,\n * for the failure Badge records. `neutral` carries no icon of its own — an\n * unremarkable note does not need one, and the slot remains available.\n */\nconst TONE_ACCENTS = {\n  // Badge's own neutral pair: the recessed well, not a borrowed status hue.\n  neutral: { icon: undefined, wash: \"bg-subtle text-subtle-foreground\" },\n  info: { icon: Info, wash: \"bg-info-muted text-info-text\" },\n  success: { icon: CircleCheck, wash: \"bg-success-muted text-success-text\" },\n  warning: { icon: TriangleAlert, wash: \"bg-warning-muted text-warning-text\" },\n  destructive: { icon: CircleX, wash: \"bg-destructive-muted text-destructive-text\" },\n} satisfies Record<AlertVariant, { icon: typeof Info | undefined; wash: string }>;\n\n// Controlled/uncontrolled split by hand — there is no Reka root to lean on,\n// and `optional()` exists for exactly the prop-forwarding case this is not.\nconst innerOpen = ref(true);\nconst isOpen = computed(() => props.open ?? innerOpen.value);\n\nfunction dismiss(): void {\n  if (props.open === undefined) innerOpen.value = false;\n  emit(\"update:open\", false);\n}\n\nconst accent = computed(() => TONE_ACCENTS[props.variant]);\n</script>\n\n<template>\n  <!-- Enter rises like every revealed surface; exit falls back down it. Vue\n       holds the leaving element itself, so no Presence machinery is needed\n       the way it is under Reka, and the global reduced-motion collapse still\n       ends both phases instantly — dismissal stays immediate for readers who\n       asked for less motion. -->\n  <Transition enter-active-class=\"animate-fade-rise\" leave-active-class=\"animate-fade-fall\">\n    <div\n      v-if=\"isOpen\"\n      v-bind=\"$attrs\"\n      role=\"alert\"\n      :class=\"cn('flex items-start gap-3 rounded-md border border-transparent p-3', accent?.wash)\"\n    >\n      <slot name=\"icon\">\n        <component\n          :is=\"accent.icon\"\n          v-if=\"accent?.icon\"\n          class=\"mt-0.5 h-4 w-4 shrink-0\"\n          aria-hidden=\"true\"\n        />\n      </slot>\n\n      <div class=\"min-w-0 flex-1 break-words\">\n        <p v-if=\"title\" class=\"text-sm font-medium\">{{ title }}</p>\n        <p v-if=\"description\" :class=\"cn('text-small', title && 'mt-0.5')\">\n          {{ description }}\n        </p>\n        <!-- @slot Anything beyond a title and one line of detail — a list of\n             what failed, a link out. Rendered after the description, inside\n             the tone's measured text colour. -->\n        <div v-if=\"$slots.default\" :class=\"cn((title || description) && 'mt-1')\">\n          <slot />\n        </div>\n      </div>\n\n      <!-- In the flow, not overlaid: an absolutely-positioned close control\n           collides with long titles at narrow widths, which is exactly where\n           alerts wrap. -->\n      <IconButton\n        v-if=\"dismissible\"\n        variant=\"ghost\"\n        size=\"sm\"\n        :label=\"text.dismiss\"\n        class=\"-mr-1 -mt-1 shrink-0\"\n        @click=\"dismiss()\"\n      >\n        <X class=\"h-4 w-4\" aria-hidden=\"true\" />\n      </IconButton>\n    </div>\n  </Transition>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAeA,IAAa,eAA4B,EACvC,SAAS,UACX;;;;;;;;;;;;;;;;;;;;EAUA,MAAM,QAAQ;EA8Bd,MAAM,OAAO;EAWb,MAAM,OAAO,UAAU,SAAS,oBAAoB,MAAM,MAAM;;;;;;;;EAShE,MAAM,eAAe;GAEnB,SAAS;IAAE,MAAM,KAAA;IAAW,MAAM;GAAmC;GACrE,MAAM;IAAE,MAAM;IAAM,MAAM;GAA+B;GACzD,SAAS;IAAE,MAAM;IAAa,MAAM;GAAqC;GACzE,SAAS;IAAE,MAAM;IAAe,MAAM;GAAqC;GAC3E,aAAa;IAAE,MAAM;IAAS,MAAM;GAA6C;EACnF;EAIA,MAAM,YAAY,IAAI,IAAI;EAC1B,MAAM,SAAS,eAAe,MAAM,QAAQ,UAAU,KAAK;EAE3D,SAAS,UAAgB;GACvB,IAAI,MAAM,SAAS,KAAA,GAAW,UAAU,QAAQ;GAChD,KAAK,eAAe,KAAK;EAC3B;EAEA,MAAM,SAAS,eAAe,aAAa,MAAM,QAAQ;;GASvD,OAAA,UAAA,GAAA,YA2Ca,YAAA;IA3CD,sBAAmB;IAAoB,sBAAmB;;IACpE,SAAA,cAyCM,CAxCE,OAAA,SADR,UAAA,GAAA,mBAyCM,OAzCN,WAyCM,EAAA,KAAA,EAAA,GAvCIA,KAAAA,QAAM;KACd,MAAK;KACJ,OAAO,MAAA,EAAA,CAAE,CAAA,mEAAoE,OAAA,OAAQ,IAAI;;KAE1F,WAOO,KAAA,QAAA,QAAA,CAAA,SAAA,CAJG,OAAA,OAAQ,QAFhB,UAAA,GAAA,YAKE,wBAJK,OAAA,MAAO,IAAI,GAAA;;MAEhB,OAAM;MACN,eAAY;;KAIhB,mBAWM,OAXN,YAWM;MAVK,QAAA,SAAT,UAAA,GAAA,mBAA2D,KAA3D,YAA2D,gBAAZ,QAAA,KAAK,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;MAC3C,QAAA,eAAT,UAAA,GAAA,mBAEI,KAAA;;OAFmB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,cAAe,QAAA,SAAK,QAAA,CAAA;MAC/C,GAAA,gBAAA,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;MAKLC,KAAAA,OAAO,WAAlB,UAAA,GAAA,mBAEM,OAAA;;OAFsB,OAAK,eAAE,MAAA,EAAA,CAAE,EAAE,QAAA,SAAS,QAAA,gBAAW,MAAA,CAAA;MACzD,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;;KAQJ,QAAA,eADR,UAAA,GAAA,YASa,MAAA,kBAAA,GAAA;;MAPX,SAAQ;MACR,MAAK;MACJ,OAAO,MAAA,IAAA,CAAI,CAAC;MACb,OAAM;MACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAO;;MAEf,SAAA,cAAwC,CAAxC,YAAwC,MAAA,CAAA,GAAA;OAArC,OAAM;OAAU,eAAY"}

package/dist/packages/primitives/alert/src/index.d.ts

@@ -0,0 +1,4 @@
+export { default, ALERT_LABELS } from "./Alert.vue";
+export type { AlertVariant } from "./Alert.vue";
+export type { AlertLabels } from "../../../labels/src/index";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/alert/src/index.js

@@ -0,0 +1,3 @@
+import { ALERT_LABELS } from "./Alert.vue_vue_type_script_setup_true_lang.js";
+import Alert_default from "./Alert.js";
+export { ALERT_LABELS, Alert_default as default };

package/dist/packages/primitives/alert-dialog/src/AlertDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.js","names":[],"sources":["../../../../../packages/primitives/alert-dialog/src/AlertDialog.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { AlertDialogLabels } from \"@ecoma-io/loom-labels\";\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 */\nexport const ALERT_DIALOG_LABELS: AlertDialogLabels = {\n  confirm: \"Confirm\",\n  cancel: \"Cancel\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport {\n  AlertDialogRoot,\n  AlertDialogTrigger,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogContent,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { buttonVariants } from \"@ecoma-io/loom-button\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * AlertDialog — the modal that demands a decision before anything else\n * happens: \"Delete this permanently?\", \"Discard unsaved changes?\".\n *\n * It is `Dialog` with the exits removed, and that is the whole of the\n * difference. A `Dialog` is dismissible: Esc, a click on the overlay and the\n * close glyph all mean \"not now\", which is right for a task surface. An\n * AlertDialog has no such exit — a click outside does nothing, there is no\n * close glyph, and the only ways out are the two buttons. It carries\n * `role=\"alertdialog\"`, so its description is announced with its name rather\n * than waiting to be navigated to.\n *\n * Reach for it only when dismissing by accident would lose work or destroy\n * something. Reach for `Dialog` for everything else — an AlertDialog used for\n * an ordinary form is a control that traps a reader for no reason.\n *\n * There is deliberately no body slot. A question that needs body content is a\n * task, and a task is a `Dialog`; keeping the surface to a title, a\n * consequence line and two buttons is what stops this component from becoming\n * an undismissible form.\n *\n * Initial focus lands on **Cancel**, never on the action. A destructive\n * confirm that focuses \"Delete\" turns a reflexive Enter — from a reader who\n * has not finished the sentence — into a deletion. Reka does this in\n * `AlertDialogContent`; the test pins it, because it is the single behaviour\n * this component exists to guarantee.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Drive the alert from the host with `v-model:open`; omit it and the alert owns its own state. */\n    open?: boolean | undefined;\n    /** The accessible name, and the decision being asked for. State the consequence (\"Delete scene?\"), not \"Are you sure?\". */\n    title: string;\n    /** The consequence line, announced with the title rather than found later. Omit it only when the title already says everything. */\n    description?: string;\n    /** Paints the action in the destructive language. The verb in `labels.confirm` is what carries the meaning; this only adds emphasis to it. */\n    destructive?: boolean;\n    /**\n     * The two button names, as any subset of `AlertDialogLabels` — what it\n     * leaves out stays as the host's `provideLoomLabels` vocabulary left it,\n     * and then as Loom's English.\n     *\n     * **`confirm` is meant to be set here on all but the rarest alert**, since\n     * the verb is what tells a reader what the button does; `cancel` belongs in\n     * the application's vocabulary, where it is written once.\n     */\n    labels?: LabelOverrides<AlertDialogLabels>;\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting, and `optional()` in the template is the other half. Its docblock\n  // carries the reasoning for both.\n  {\n    open: undefined,\n    destructive: false,\n  },\n);\n\ndefineEmits<{\n  /** The reader chose the action. The alert does not close itself — the host decides, so a failed save can keep it open. */\n  confirm: [];\n  /** The reader backed out, by the cancel button or by Esc. */\n  cancel: [];\n  /** A close was requested. Fires alongside `confirm` and `cancel`, so a host driving `v-model:open` needs only this one. */\n  \"update:open\": [value: boolean];\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(\"alertDialog\", ALERT_DIALOG_LABELS, () => props.labels);\n\n// The root renders no DOM node at all, so fallthrough attributes would be\n// dropped on the floor rather than landing anywhere. They go to the panel,\n// which is the only element this component reliably renders — there may be no\n// trigger at all when the host drives `open` itself.\n//\n// `class` is pulled out of that spread and merged through `cn()` instead:\n// spreading it alongside the panel's own `:class` only concatenates the two\n// lists, so a caller's width silently wins or loses depending on which utility\n// Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: panelAttrs } = useSplitAttrs();\n\n// Reka wires `aria-describedby` to its own description id unconditionally, so\n// a panel rendered without a description ships a reference to an element that\n// does not exist. That is not cosmetic here: `role=\"alertdialog\"` earns its\n// keep by having the description announced with the name, and a dangling IDREF\n// announces nothing. Clearing the attribute is what removes it — fallthrough\n// attributes are merged after Reka's own, and Vue drops an attribute bound to\n// `undefined`. A caller's own `aria-describedby` still wins, because\n// `panelAttrs` is spread last.\nconst panelBindings = computed(() => ({\n  ...(props.description ? {} : { \"aria-describedby\": undefined }),\n  ...panelAttrs.value,\n}));\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"optional({ open })\" @update:open=\"$emit('update:open', $event)\">\n    <!-- @slot The control that opens the alert. Optional — omit it and drive\n         the alert entirely from the host with `v-model:open`. -->\n    <AlertDialogTrigger v-if=\"$slots.trigger\" as-child>\n      <slot name=\"trigger\" />\n    </AlertDialogTrigger>\n\n    <AlertDialogPortal>\n      <!-- Same scrim as Dialog, and it is inert here: Reka's AlertDialogContent\n           prevents both `pointerDownOutside` and `interactOutside`, so a click\n           lands on nothing. That is the point — an accidental click at the edge\n           of the screen must not be able to answer the question. -->\n      <AlertDialogOverlay\n        class=\"fixed inset-0 z-50 bg-foreground/70 data-[state=open]:animate-fade\"\n      />\n      <AlertDialogContent\n        v-bind=\"panelBindings\"\n        :data-destructive=\"destructive || undefined\"\n        :class=\"\n          cn(\n            'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',\n            // One width, and no `size` prop to vary it. A decision has one\n            // shape; the wider panels exist on Dialog because an authoring\n            // surface needs them, and there is no authoring surface here.\n            'w-[min(92vw,32rem)]',\n            'rounded-lg border border-border bg-popover p-6 text-popover-foreground shadow-lg outline-none',\n            // Scoped to the open state, never unconditional. Reka's Presence\n            // keeps closed content mounted until an animationend arrives, and a\n            // mount-only animation never fires a second one — which here would\n            // strand a full-screen, input-blocking overlay over a page with no\n            // alert on it. Scoped, the closed element computes\n            // `animation-name: none` and Presence unmounts it at once.\n            'data-[state=open]:animate-scale-in',\n            attrs.class as string,\n          )\n        \"\n        @escape-key-down=\"$emit('cancel')\"\n      >\n        <AlertDialogTitle class=\"text-base font-semibold\">{{ title }}</AlertDialogTitle>\n        <AlertDialogDescription v-if=\"description\" class=\"mt-1 text-sm text-muted-foreground\">\n          {{ description }}\n        </AlertDialogDescription>\n\n        <div class=\"mt-6 flex items-center justify-end gap-2\">\n          <!-- Cancel is first in the DOM as well as first visually, so the\n               order a screen reader reads matches the order the eye does. It is\n               also the element Reka focuses on open. -->\n          <AlertDialogCancel\n            :class=\"buttonVariants({ variant: 'subtle' })\"\n            @click=\"$emit('cancel')\"\n          >\n            {{ text.cancel }}\n          </AlertDialogCancel>\n          <!-- The destructive paint is emphasis, not the signal. What tells a\n               reader this button destroys something is the verb in its label,\n               which is why `labels.confirm` is meant to be replaced rather than\n               left as \"Confirm\". -->\n          <AlertDialogAction\n            :class=\"buttonVariants({ variant: destructive ? 'destructive' : 'primary' })\"\n            @click=\"$emit('confirm')\"\n          >\n            {{ text.confirm }}\n          </AlertDialogAction>\n        </div>\n      </AlertDialogContent>\n    </AlertDialogPortal>\n  </AlertDialogRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"AlertDialog.js","names":[],"sources":["../../../../../packages/primitives/alert-dialog/src/AlertDialog.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { AlertDialogLabels } from \"@ecoma-io/loom-labels\";\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 */\nexport const ALERT_DIALOG_LABELS: AlertDialogLabels = {\n  confirm: \"Confirm\",\n  cancel: \"Cancel\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport {\n  AlertDialogRoot,\n  AlertDialogTrigger,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogContent,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { buttonVariants } from \"@ecoma-io/loom-button\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * AlertDialog — the modal that demands a decision before anything else\n * happens: \"Delete this permanently?\", \"Discard unsaved changes?\".\n *\n * It is `Dialog` with the exits removed, and that is the whole of the\n * difference. A `Dialog` is dismissible: Esc, a click on the overlay and the\n * close glyph all mean \"not now\", which is right for a task surface. An\n * AlertDialog has no such exit — a click outside does nothing, there is no\n * close glyph, and the only ways out are the two buttons. It carries\n * `role=\"alertdialog\"`, so its description is announced with its name rather\n * than waiting to be navigated to.\n *\n * Reach for it only when dismissing by accident would lose work or destroy\n * something. Reach for `Dialog` for everything else — an AlertDialog used for\n * an ordinary form is a control that traps a reader for no reason.\n *\n * There is deliberately no body slot. A question that needs body content is a\n * task, and a task is a `Dialog`; keeping the surface to a title, a\n * consequence line and two buttons is what stops this component from becoming\n * an undismissible form.\n *\n * Initial focus lands on **Cancel**, never on the action. A destructive\n * confirm that focuses \"Delete\" turns a reflexive Enter — from a reader who\n * has not finished the sentence — into a deletion. Reka does this in\n * `AlertDialogContent`; the test pins it, because it is the single behaviour\n * this component exists to guarantee.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Drive the alert from the host with `v-model:open`; omit it and the alert owns its own state. */\n    open?: boolean | undefined;\n    /** The accessible name, and the decision being asked for. State the consequence (\"Delete scene?\"), not \"Are you sure?\". */\n    title: string;\n    /** The consequence line, announced with the title rather than found later. Omit it only when the title already says everything. */\n    description?: string;\n    /** Paints the action in the destructive language. The verb in `labels.confirm` is what carries the meaning; this only adds emphasis to it. */\n    destructive?: boolean;\n    /**\n     * The two button names, as any subset of `AlertDialogLabels` — what it\n     * leaves out stays as the host's `provideLoomLabels` vocabulary left it,\n     * and then as Loom's English.\n     *\n     * **`confirm` is meant to be set here on all but the rarest alert**, since\n     * the verb is what tells a reader what the button does; `cancel` belongs in\n     * the application's vocabulary, where it is written once.\n     */\n    labels?: LabelOverrides<AlertDialogLabels>;\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting, and `optional()` in the template is the other half. Its docblock\n  // carries the reasoning for both.\n  {\n    open: undefined,\n    destructive: false,\n  },\n);\n\ndefineEmits<{\n  /** The reader chose the action. The alert does not close itself — the host decides, so a failed save can keep it open. */\n  confirm: [];\n  /** The reader backed out, by the cancel button or by Esc. */\n  cancel: [];\n  /** A close was requested. Fires alongside `confirm` and `cancel`, so a host driving `v-model:open` needs only this one. */\n  \"update:open\": [value: boolean];\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(\"alertDialog\", ALERT_DIALOG_LABELS, () => props.labels);\n\n// The root renders no DOM node at all, so fallthrough attributes would be\n// dropped on the floor rather than landing anywhere. They go to the panel,\n// which is the only element this component reliably renders — there may be no\n// trigger at all when the host drives `open` itself.\n//\n// `class` is pulled out of that spread and merged through `cn()` instead:\n// spreading it alongside the panel's own `:class` only concatenates the two\n// lists, so a caller's width silently wins or loses depending on which utility\n// Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: panelAttrs } = useSplitAttrs();\n\n// Reka wires `aria-describedby` to its own description id unconditionally, so\n// a panel rendered without a description ships a reference to an element that\n// does not exist. That is not cosmetic here: `role=\"alertdialog\"` earns its\n// keep by having the description announced with the name, and a dangling IDREF\n// announces nothing. Clearing the attribute is what removes it — fallthrough\n// attributes are merged after Reka's own, and Vue drops an attribute bound to\n// `undefined`. A caller's own `aria-describedby` still wins, because\n// `panelAttrs` is spread last.\nconst panelBindings = computed(() => ({\n  ...(props.description ? {} : { \"aria-describedby\": undefined }),\n  ...panelAttrs.value,\n}));\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"optional({ open })\" @update:open=\"$emit('update:open', $event)\">\n    <!-- @slot The control that opens the alert. Optional — omit it and drive\n         the alert entirely from the host with `v-model:open`. -->\n    <AlertDialogTrigger v-if=\"$slots.trigger\" as-child>\n      <slot name=\"trigger\" />\n    </AlertDialogTrigger>\n\n    <AlertDialogPortal>\n      <!-- The scrim token Dialog uses, and its paired exit, so a dismissed\n           alert fades rather than cuts. It is inert here: Reka's\n           AlertDialogContent prevents both `pointerDownOutside` and\n           `interactOutside`, so a click lands on nothing. That is the point —\n           an accidental click at the edge of the screen must not be able to\n           answer the question. -->\n      <AlertDialogOverlay\n        class=\"fixed inset-0 z-overlay bg-foreground/scrim data-[state=open]:animate-fade data-[state=closed]:animate-fade-out\"\n      />\n      <AlertDialogContent\n        v-bind=\"panelBindings\"\n        :data-destructive=\"destructive || undefined\"\n        :class=\"\n          cn(\n            'fixed left-1/2 top-1/2 z-overlay -translate-x-1/2 -translate-y-1/2',\n            // One width, and no `size` prop to vary it. A decision has one\n            // shape; the wider panels exist on Dialog because an authoring\n            // surface needs them, and there is no authoring surface here.\n            'w-[min(92vw,32rem)]',\n            'rounded-lg border border-border bg-popover p-6 text-popover-foreground shadow-lg outline-none',\n            // Both states scoped, never unconditional. Reka's Presence keeps\n            // closed content mounted until an animationend arrives, and a\n            // mount-only animation never fires a second one — which here would\n            // strand a full-screen, input-blocking overlay over a page with no\n            // alert on it. The paired exit answers the entrance as Dialog's\n            // does, and stays safe under `prefers-reduced-motion`: the 0.01ms\n            // collapse still fires `animationend`, so Presence still unmounts.\n            'data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out',\n            attrs.class as string,\n          )\n        \"\n        @escape-key-down=\"$emit('cancel')\"\n      >\n        <AlertDialogTitle class=\"text-base font-semibold\">{{ title }}</AlertDialogTitle>\n        <AlertDialogDescription v-if=\"description\" class=\"mt-1 text-sm text-muted-foreground\">\n          {{ description }}\n        </AlertDialogDescription>\n\n        <div class=\"mt-6 flex items-center justify-end gap-2\">\n          <!-- Cancel is first in the DOM as well as first visually, so the\n               order a screen reader reads matches the order the eye does. It is\n               also the element Reka focuses on open. -->\n          <AlertDialogCancel\n            :class=\"buttonVariants({ variant: 'subtle' })\"\n            @click=\"$emit('cancel')\"\n          >\n            {{ text.cancel }}\n          </AlertDialogCancel>\n          <!-- The destructive paint is emphasis, not the signal. What tells a\n               reader this button destroys something is the verb in its label,\n               which is why `labels.confirm` is meant to be replaced rather than\n               left as \"Confirm\". -->\n          <AlertDialogAction\n            :class=\"buttonVariants({ variant: destructive ? 'destructive' : 'primary' })\"\n            @click=\"$emit('confirm')\"\n          >\n            {{ text.confirm }}\n          </AlertDialogAction>\n        </div>\n      </AlertDialogContent>\n    </AlertDialogPortal>\n  </AlertDialogRoot>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/alert-dialog/src/AlertDialog.vue.d.ts

@@ -1,5 +1,5 @@
-import { type LabelOverrides } from "@ecoma-io/loom-labels";
-import type { AlertDialogLabels } from "@ecoma-io/loom-labels";
+import { type LabelOverrides } from "../../../labels/src/index";
+import type { AlertDialogLabels } from "../../../labels/src/index";
 /**
 
 /**

package/dist/packages/primitives/alert-dialog/src/AlertDialog.vue_vue_type_script_setup_true_lang.js

@@ -58,9 +58,9 @@ var AlertDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 					default: withCtx(() => [renderSlot(_ctx.$slots, "trigger")]),
 					_: 3
 				})) : createCommentVNode("", true), createVNode(unref(AlertDialogPortal), null, {
-					default: withCtx(() => [createVNode(unref(AlertDialogOverlay), { class: "fixed inset-0 z-50 bg-foreground/70 data-[state=open]:animate-fade" }), createVNode(unref(AlertDialogContent), mergeProps(panelBindings.value, {
+					default: withCtx(() => [createVNode(unref(AlertDialogOverlay), { class: "fixed inset-0 z-overlay bg-foreground/scrim data-[state=open]:animate-fade data-[state=closed]:animate-fade-out" }), createVNode(unref(AlertDialogContent), mergeProps(panelBindings.value, {
 						"data-destructive": __props.destructive || void 0,
-						class: unref(cn)("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "w-[min(92vw,32rem)]", "rounded-lg border border-border bg-popover p-6 text-popover-foreground shadow-lg outline-none", "data-[state=open]:animate-scale-in", unref(attrs).class),
+						class: unref(cn)("fixed left-1/2 top-1/2 z-overlay -translate-x-1/2 -translate-y-1/2", "w-[min(92vw,32rem)]", "rounded-lg border border-border bg-popover p-6 text-popover-foreground shadow-lg outline-none", "data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out", unref(attrs).class),
 						onEscapeKeyDown: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("cancel"))
 					}), {
 						default: withCtx(() => [

package/dist/packages/primitives/alert-dialog/src/AlertDialog.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.vue_vue_type_script_setup_true_lang.js","names":["$emit","$slots"],"sources":["../../../../../packages/primitives/alert-dialog/src/AlertDialog.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { AlertDialogLabels } from \"@ecoma-io/loom-labels\";\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 */\nexport const ALERT_DIALOG_LABELS: AlertDialogLabels = {\n  confirm: \"Confirm\",\n  cancel: \"Cancel\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport {\n  AlertDialogRoot,\n  AlertDialogTrigger,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogContent,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { buttonVariants } from \"@ecoma-io/loom-button\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * AlertDialog — the modal that demands a decision before anything else\n * happens: \"Delete this permanently?\", \"Discard unsaved changes?\".\n *\n * It is `Dialog` with the exits removed, and that is the whole of the\n * difference. A `Dialog` is dismissible: Esc, a click on the overlay and the\n * close glyph all mean \"not now\", which is right for a task surface. An\n * AlertDialog has no such exit — a click outside does nothing, there is no\n * close glyph, and the only ways out are the two buttons. It carries\n * `role=\"alertdialog\"`, so its description is announced with its name rather\n * than waiting to be navigated to.\n *\n * Reach for it only when dismissing by accident would lose work or destroy\n * something. Reach for `Dialog` for everything else — an AlertDialog used for\n * an ordinary form is a control that traps a reader for no reason.\n *\n * There is deliberately no body slot. A question that needs body content is a\n * task, and a task is a `Dialog`; keeping the surface to a title, a\n * consequence line and two buttons is what stops this component from becoming\n * an undismissible form.\n *\n * Initial focus lands on **Cancel**, never on the action. A destructive\n * confirm that focuses \"Delete\" turns a reflexive Enter — from a reader who\n * has not finished the sentence — into a deletion. Reka does this in\n * `AlertDialogContent`; the test pins it, because it is the single behaviour\n * this component exists to guarantee.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Drive the alert from the host with `v-model:open`; omit it and the alert owns its own state. */\n    open?: boolean | undefined;\n    /** The accessible name, and the decision being asked for. State the consequence (\"Delete scene?\"), not \"Are you sure?\". */\n    title: string;\n    /** The consequence line, announced with the title rather than found later. Omit it only when the title already says everything. */\n    description?: string;\n    /** Paints the action in the destructive language. The verb in `labels.confirm` is what carries the meaning; this only adds emphasis to it. */\n    destructive?: boolean;\n    /**\n     * The two button names, as any subset of `AlertDialogLabels` — what it\n     * leaves out stays as the host's `provideLoomLabels` vocabulary left it,\n     * and then as Loom's English.\n     *\n     * **`confirm` is meant to be set here on all but the rarest alert**, since\n     * the verb is what tells a reader what the button does; `cancel` belongs in\n     * the application's vocabulary, where it is written once.\n     */\n    labels?: LabelOverrides<AlertDialogLabels>;\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting, and `optional()` in the template is the other half. Its docblock\n  // carries the reasoning for both.\n  {\n    open: undefined,\n    destructive: false,\n  },\n);\n\ndefineEmits<{\n  /** The reader chose the action. The alert does not close itself — the host decides, so a failed save can keep it open. */\n  confirm: [];\n  /** The reader backed out, by the cancel button or by Esc. */\n  cancel: [];\n  /** A close was requested. Fires alongside `confirm` and `cancel`, so a host driving `v-model:open` needs only this one. */\n  \"update:open\": [value: boolean];\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(\"alertDialog\", ALERT_DIALOG_LABELS, () => props.labels);\n\n// The root renders no DOM node at all, so fallthrough attributes would be\n// dropped on the floor rather than landing anywhere. They go to the panel,\n// which is the only element this component reliably renders — there may be no\n// trigger at all when the host drives `open` itself.\n//\n// `class` is pulled out of that spread and merged through `cn()` instead:\n// spreading it alongside the panel's own `:class` only concatenates the two\n// lists, so a caller's width silently wins or loses depending on which utility\n// Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: panelAttrs } = useSplitAttrs();\n\n// Reka wires `aria-describedby` to its own description id unconditionally, so\n// a panel rendered without a description ships a reference to an element that\n// does not exist. That is not cosmetic here: `role=\"alertdialog\"` earns its\n// keep by having the description announced with the name, and a dangling IDREF\n// announces nothing. Clearing the attribute is what removes it — fallthrough\n// attributes are merged after Reka's own, and Vue drops an attribute bound to\n// `undefined`. A caller's own `aria-describedby` still wins, because\n// `panelAttrs` is spread last.\nconst panelBindings = computed(() => ({\n  ...(props.description ? {} : { \"aria-describedby\": undefined }),\n  ...panelAttrs.value,\n}));\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"optional({ open })\" @update:open=\"$emit('update:open', $event)\">\n    <!-- @slot The control that opens the alert. Optional — omit it and drive\n         the alert entirely from the host with `v-model:open`. -->\n    <AlertDialogTrigger v-if=\"$slots.trigger\" as-child>\n      <slot name=\"trigger\" />\n    </AlertDialogTrigger>\n\n    <AlertDialogPortal>\n      <!-- Same scrim as Dialog, and it is inert here: Reka's AlertDialogContent\n           prevents both `pointerDownOutside` and `interactOutside`, so a click\n           lands on nothing. That is the point — an accidental click at the edge\n           of the screen must not be able to answer the question. -->\n      <AlertDialogOverlay\n        class=\"fixed inset-0 z-50 bg-foreground/70 data-[state=open]:animate-fade\"\n      />\n      <AlertDialogContent\n        v-bind=\"panelBindings\"\n        :data-destructive=\"destructive || undefined\"\n        :class=\"\n          cn(\n            'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',\n            // One width, and no `size` prop to vary it. A decision has one\n            // shape; the wider panels exist on Dialog because an authoring\n            // surface needs them, and there is no authoring surface here.\n            'w-[min(92vw,32rem)]',\n            'rounded-lg border border-border bg-popover p-6 text-popover-foreground shadow-lg outline-none',\n            // Scoped to the open state, never unconditional. Reka's Presence\n            // keeps closed content mounted until an animationend arrives, and a\n            // mount-only animation never fires a second one — which here would\n            // strand a full-screen, input-blocking overlay over a page with no\n            // alert on it. Scoped, the closed element computes\n            // `animation-name: none` and Presence unmounts it at once.\n            'data-[state=open]:animate-scale-in',\n            attrs.class as string,\n          )\n        \"\n        @escape-key-down=\"$emit('cancel')\"\n      >\n        <AlertDialogTitle class=\"text-base font-semibold\">{{ title }}</AlertDialogTitle>\n        <AlertDialogDescription v-if=\"description\" class=\"mt-1 text-sm text-muted-foreground\">\n          {{ description }}\n        </AlertDialogDescription>\n\n        <div class=\"mt-6 flex items-center justify-end gap-2\">\n          <!-- Cancel is first in the DOM as well as first visually, so the\n               order a screen reader reads matches the order the eye does. It is\n               also the element Reka focuses on open. -->\n          <AlertDialogCancel\n            :class=\"buttonVariants({ variant: 'subtle' })\"\n            @click=\"$emit('cancel')\"\n          >\n            {{ text.cancel }}\n          </AlertDialogCancel>\n          <!-- The destructive paint is emphasis, not the signal. What tells a\n               reader this button destroys something is the verb in its label,\n               which is why `labels.confirm` is meant to be replaced rather than\n               left as \"Confirm\". -->\n          <AlertDialogAction\n            :class=\"buttonVariants({ variant: destructive ? 'destructive' : 'primary' })\"\n            @click=\"$emit('confirm')\"\n          >\n            {{ text.confirm }}\n          </AlertDialogAction>\n        </div>\n      </AlertDialogContent>\n    </AlertDialogPortal>\n  </AlertDialogRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;AAQA,IAAa,sBAAyC;CACpD,SAAS;CACT,QAAQ;AACV;;;;;;;;;;;;;;;;;;;;;;;EAiDA,MAAM,QAAQ;EA2Cd,MAAM,OAAO,UAAU,eAAe,2BAA2B,MAAM,MAAM;EAY7E,MAAM,EAAE,OAAO,MAAM,eAAe,cAAc;EAUlD,MAAM,gBAAgB,gBAAgB;GACpC,GAAI,MAAM,cAAc,CAAC,IAAI,EAAE,oBAAoB,KAAA,EAAU;GAC7D,GAAG,WAAW;EAChB,EAAE;;GAIA,OAAA,UAAA,GAAA,YAkEkB,MAAA,eAAA,GAlElB,WAAyB,MAkEP,QAAA,CAlEe,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAA,EAAM,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,eAAgB,MAAM,GAAA,CAAA,GAAA;IAGpF,SAAA,cAEqB,CAFKC,KAAAA,OAAO,WAAjC,UAAA,GAAA,YAEqB,MAAA,kBAAA,GAAA;;KAFqB,YAAA;;KACxC,SAAA,cAAuB,CAAvB,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;IAGzB,CAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,YA0DoB,MAAA,iBAAA,GAAA,MAAA;KArDlB,SAAA,cAEE,CAFF,YAEE,MAAA,kBAAA,GAAA,EADA,OAAM,qEAAoE,CAAA,GAE5E,YAiDqB,MAAA,kBAAA,GAjDrB,WACU,cAgDW,OAhDE;MACpB,oBAAkB,QAAA,eAAe,KAAA;MACjC,OAAkB,MAAA,EAAA,CAAE,CAAA,iEAAA,uBAAA,iGAAA,sCAAu8B,MAAA,KAAA,CAAK,CAAC,KAAA;MAkBj+B,iBAAe,OAAA,OAAA,OAAA,MAAA,WAAED,KAAAA,MAAK,QAAA;;MAEvB,SAAA,cAAgF;OAAhF,YAAgF,MAAA,gBAAA,GAAA,EAA9D,OAAM,0BAAyB,GAAA;QAAC,SAAA,cAAW,CAAR,gBAAA,gBAAA,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;;OAC5B,QAAA,eAA9B,UAAA,GAAA,YAEyB,MAAA,sBAAA,GAAA;;QAFkB,OAAM;;QAC/C,SAAA,cAAiB,CAAd,gBAAA,gBAAA,QAAA,WAAW,GAAA,CAAA,CAAA,CAAA;;;OAGhB,mBAoBM,OApBN,YAoBM,CAhBJ,YAKoB,MAAA,iBAAA,GAAA;QAJjB,OAAK,eAAE,MAAA,cAAA,CAAc,CAAA,EAAA,SAAA,SAAA,CAAA,CAAA;QACrB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,QAAA;;QAEb,SAAA,cAAiB,CAAd,gBAAA,gBAAA,MAAA,IAAA,CAAI,CAAC,MAAM,GAAA,CAAA,CAAA,CAAA;;OAMhB,GAAA,GAAA,CAAA,OAAA,CAAA,GAAA,YAKoB,MAAA,iBAAA,GAAA;QAJjB,OAAK,eAAE,MAAA,cAAA,CAAc,CAAA,EAAA,SAAY,QAAA,cAAW,gBAAA,UAAA,CAAA,CAAA;QAC5C,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,SAAA;;QAEb,SAAA,cAAkB,CAAf,gBAAA,gBAAA,MAAA,IAAA,CAAI,CAAC,OAAO,GAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"AlertDialog.vue_vue_type_script_setup_true_lang.js","names":["$emit","$slots"],"sources":["../../../../../packages/primitives/alert-dialog/src/AlertDialog.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { AlertDialogLabels } from \"@ecoma-io/loom-labels\";\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 */\nexport const ALERT_DIALOG_LABELS: AlertDialogLabels = {\n  confirm: \"Confirm\",\n  cancel: \"Cancel\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport {\n  AlertDialogRoot,\n  AlertDialogTrigger,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogContent,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { buttonVariants } from \"@ecoma-io/loom-button\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * AlertDialog — the modal that demands a decision before anything else\n * happens: \"Delete this permanently?\", \"Discard unsaved changes?\".\n *\n * It is `Dialog` with the exits removed, and that is the whole of the\n * difference. A `Dialog` is dismissible: Esc, a click on the overlay and the\n * close glyph all mean \"not now\", which is right for a task surface. An\n * AlertDialog has no such exit — a click outside does nothing, there is no\n * close glyph, and the only ways out are the two buttons. It carries\n * `role=\"alertdialog\"`, so its description is announced with its name rather\n * than waiting to be navigated to.\n *\n * Reach for it only when dismissing by accident would lose work or destroy\n * something. Reach for `Dialog` for everything else — an AlertDialog used for\n * an ordinary form is a control that traps a reader for no reason.\n *\n * There is deliberately no body slot. A question that needs body content is a\n * task, and a task is a `Dialog`; keeping the surface to a title, a\n * consequence line and two buttons is what stops this component from becoming\n * an undismissible form.\n *\n * Initial focus lands on **Cancel**, never on the action. A destructive\n * confirm that focuses \"Delete\" turns a reflexive Enter — from a reader who\n * has not finished the sentence — into a deletion. Reka does this in\n * `AlertDialogContent`; the test pins it, because it is the single behaviour\n * this component exists to guarantee.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Drive the alert from the host with `v-model:open`; omit it and the alert owns its own state. */\n    open?: boolean | undefined;\n    /** The accessible name, and the decision being asked for. State the consequence (\"Delete scene?\"), not \"Are you sure?\". */\n    title: string;\n    /** The consequence line, announced with the title rather than found later. Omit it only when the title already says everything. */\n    description?: string;\n    /** Paints the action in the destructive language. The verb in `labels.confirm` is what carries the meaning; this only adds emphasis to it. */\n    destructive?: boolean;\n    /**\n     * The two button names, as any subset of `AlertDialogLabels` — what it\n     * leaves out stays as the host's `provideLoomLabels` vocabulary left it,\n     * and then as Loom's English.\n     *\n     * **`confirm` is meant to be set here on all but the rarest alert**, since\n     * the verb is what tells a reader what the button does; `cancel` belongs in\n     * the application's vocabulary, where it is written once.\n     */\n    labels?: LabelOverrides<AlertDialogLabels>;\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting, and `optional()` in the template is the other half. Its docblock\n  // carries the reasoning for both.\n  {\n    open: undefined,\n    destructive: false,\n  },\n);\n\ndefineEmits<{\n  /** The reader chose the action. The alert does not close itself — the host decides, so a failed save can keep it open. */\n  confirm: [];\n  /** The reader backed out, by the cancel button or by Esc. */\n  cancel: [];\n  /** A close was requested. Fires alongside `confirm` and `cancel`, so a host driving `v-model:open` needs only this one. */\n  \"update:open\": [value: boolean];\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(\"alertDialog\", ALERT_DIALOG_LABELS, () => props.labels);\n\n// The root renders no DOM node at all, so fallthrough attributes would be\n// dropped on the floor rather than landing anywhere. They go to the panel,\n// which is the only element this component reliably renders — there may be no\n// trigger at all when the host drives `open` itself.\n//\n// `class` is pulled out of that spread and merged through `cn()` instead:\n// spreading it alongside the panel's own `:class` only concatenates the two\n// lists, so a caller's width silently wins or loses depending on which utility\n// Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: panelAttrs } = useSplitAttrs();\n\n// Reka wires `aria-describedby` to its own description id unconditionally, so\n// a panel rendered without a description ships a reference to an element that\n// does not exist. That is not cosmetic here: `role=\"alertdialog\"` earns its\n// keep by having the description announced with the name, and a dangling IDREF\n// announces nothing. Clearing the attribute is what removes it — fallthrough\n// attributes are merged after Reka's own, and Vue drops an attribute bound to\n// `undefined`. A caller's own `aria-describedby` still wins, because\n// `panelAttrs` is spread last.\nconst panelBindings = computed(() => ({\n  ...(props.description ? {} : { \"aria-describedby\": undefined }),\n  ...panelAttrs.value,\n}));\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"optional({ open })\" @update:open=\"$emit('update:open', $event)\">\n    <!-- @slot The control that opens the alert. Optional — omit it and drive\n         the alert entirely from the host with `v-model:open`. -->\n    <AlertDialogTrigger v-if=\"$slots.trigger\" as-child>\n      <slot name=\"trigger\" />\n    </AlertDialogTrigger>\n\n    <AlertDialogPortal>\n      <!-- The scrim token Dialog uses, and its paired exit, so a dismissed\n           alert fades rather than cuts. It is inert here: Reka's\n           AlertDialogContent prevents both `pointerDownOutside` and\n           `interactOutside`, so a click lands on nothing. That is the point —\n           an accidental click at the edge of the screen must not be able to\n           answer the question. -->\n      <AlertDialogOverlay\n        class=\"fixed inset-0 z-overlay bg-foreground/scrim data-[state=open]:animate-fade data-[state=closed]:animate-fade-out\"\n      />\n      <AlertDialogContent\n        v-bind=\"panelBindings\"\n        :data-destructive=\"destructive || undefined\"\n        :class=\"\n          cn(\n            'fixed left-1/2 top-1/2 z-overlay -translate-x-1/2 -translate-y-1/2',\n            // One width, and no `size` prop to vary it. A decision has one\n            // shape; the wider panels exist on Dialog because an authoring\n            // surface needs them, and there is no authoring surface here.\n            'w-[min(92vw,32rem)]',\n            'rounded-lg border border-border bg-popover p-6 text-popover-foreground shadow-lg outline-none',\n            // Both states scoped, never unconditional. Reka's Presence keeps\n            // closed content mounted until an animationend arrives, and a\n            // mount-only animation never fires a second one — which here would\n            // strand a full-screen, input-blocking overlay over a page with no\n            // alert on it. The paired exit answers the entrance as Dialog's\n            // does, and stays safe under `prefers-reduced-motion`: the 0.01ms\n            // collapse still fires `animationend`, so Presence still unmounts.\n            'data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out',\n            attrs.class as string,\n          )\n        \"\n        @escape-key-down=\"$emit('cancel')\"\n      >\n        <AlertDialogTitle class=\"text-base font-semibold\">{{ title }}</AlertDialogTitle>\n        <AlertDialogDescription v-if=\"description\" class=\"mt-1 text-sm text-muted-foreground\">\n          {{ description }}\n        </AlertDialogDescription>\n\n        <div class=\"mt-6 flex items-center justify-end gap-2\">\n          <!-- Cancel is first in the DOM as well as first visually, so the\n               order a screen reader reads matches the order the eye does. It is\n               also the element Reka focuses on open. -->\n          <AlertDialogCancel\n            :class=\"buttonVariants({ variant: 'subtle' })\"\n            @click=\"$emit('cancel')\"\n          >\n            {{ text.cancel }}\n          </AlertDialogCancel>\n          <!-- The destructive paint is emphasis, not the signal. What tells a\n               reader this button destroys something is the verb in its label,\n               which is why `labels.confirm` is meant to be replaced rather than\n               left as \"Confirm\". -->\n          <AlertDialogAction\n            :class=\"buttonVariants({ variant: destructive ? 'destructive' : 'primary' })\"\n            @click=\"$emit('confirm')\"\n          >\n            {{ text.confirm }}\n          </AlertDialogAction>\n        </div>\n      </AlertDialogContent>\n    </AlertDialogPortal>\n  </AlertDialogRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;AAQA,IAAa,sBAAyC;CACpD,SAAS;CACT,QAAQ;AACV;;;;;;;;;;;;;;;;;;;;;;;EAiDA,MAAM,QAAQ;EA2Cd,MAAM,OAAO,UAAU,eAAe,2BAA2B,MAAM,MAAM;EAY7E,MAAM,EAAE,OAAO,MAAM,eAAe,cAAc;EAUlD,MAAM,gBAAgB,gBAAgB;GACpC,GAAI,MAAM,cAAc,CAAC,IAAI,EAAE,oBAAoB,KAAA,EAAU;GAC7D,GAAG,WAAW;EAChB,EAAE;;GAIA,OAAA,UAAA,GAAA,YAqEkB,MAAA,eAAA,GArElB,WAAyB,MAqEP,QAAA,CArEe,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAA,EAAM,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,eAAgB,MAAM,GAAA,CAAA,GAAA;IAGpF,SAAA,cAEqB,CAFKC,KAAAA,OAAO,WAAjC,UAAA,GAAA,YAEqB,MAAA,kBAAA,GAAA;;KAFqB,YAAA;;KACxC,SAAA,cAAuB,CAAvB,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;IAGzB,CAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,YA6DoB,MAAA,iBAAA,GAAA,MAAA;KAtDlB,SAAA,cAEE,CAFF,YAEE,MAAA,kBAAA,GAAA,EADA,OAAM,kHAAiH,CAAA,GAEzH,YAkDqB,MAAA,kBAAA,GAlDrB,WACU,cAiDW,OAjDE;MACpB,oBAAkB,QAAA,eAAe,KAAA;MACjC,OAAkB,MAAA,EAAA,CAAE,CAAA,sEAAA,uBAAA,iGAAA,4EAAglC,MAAA,KAAA,CAAK,CAAC,KAAA;MAmB1mC,iBAAe,OAAA,OAAA,OAAA,MAAA,WAAED,KAAAA,MAAK,QAAA;;MAEvB,SAAA,cAAgF;OAAhF,YAAgF,MAAA,gBAAA,GAAA,EAA9D,OAAM,0BAAyB,GAAA;QAAC,SAAA,cAAW,CAAR,gBAAA,gBAAA,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;;OAC5B,QAAA,eAA9B,UAAA,GAAA,YAEyB,MAAA,sBAAA,GAAA;;QAFkB,OAAM;;QAC/C,SAAA,cAAiB,CAAd,gBAAA,gBAAA,QAAA,WAAW,GAAA,CAAA,CAAA,CAAA;;;OAGhB,mBAoBM,OApBN,YAoBM,CAhBJ,YAKoB,MAAA,iBAAA,GAAA;QAJjB,OAAK,eAAE,MAAA,cAAA,CAAc,CAAA,EAAA,SAAA,SAAA,CAAA,CAAA;QACrB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,QAAA;;QAEb,SAAA,cAAiB,CAAd,gBAAA,gBAAA,MAAA,IAAA,CAAI,CAAC,MAAM,GAAA,CAAA,CAAA,CAAA;;OAMhB,GAAA,GAAA,CAAA,OAAA,CAAA,GAAA,YAKoB,MAAA,iBAAA,GAAA;QAJjB,OAAK,eAAE,MAAA,cAAA,CAAc,CAAA,EAAA,SAAY,QAAA,cAAW,gBAAA,UAAA,CAAA,CAAA;QAC5C,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,SAAA;;QAEb,SAAA,cAAkB,CAAf,gBAAA,gBAAA,MAAA,IAAA,CAAI,CAAC,OAAO,GAAA,CAAA,CAAA,CAAA"}

package/dist/packages/primitives/alert-dialog/src/index.d.ts

@@ -1,3 +1,3 @@
 export { ALERT_DIALOG_LABELS, default } from "./AlertDialog.vue";
-export type { AlertDialogLabels } from "@ecoma-io/loom-labels";
+export type { AlertDialogLabels } from "../../../labels/src/index";
 //# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/avatar-group/src/AvatarGroup.vue.d.ts

@@ -1,6 +1,6 @@
-import { type LabelOverrides } from "@ecoma-io/loom-labels";
-import type { AvatarGroupLabels } from "@ecoma-io/loom-labels";
-import type { AvatarShape, AvatarSize, AvatarVariant } from "@ecoma-io/loom-avatar";
+import { type LabelOverrides } from "../../../labels/src/index";
+import type { AvatarGroupLabels } from "../../../labels/src/index";
+import type { AvatarShape, AvatarSize, AvatarVariant } from "../../avatar/src/index";
 /** One face in the row. */
 export interface AvatarGroupItem {
     /** Image URL. Omit it and this face renders `fallback` instead. */

package/dist/packages/primitives/avatar-group/src/index.d.ts

@@ -1,4 +1,4 @@
 export { default, AVATAR_GROUP_LABELS } from "./AvatarGroup.vue";
 export type { AvatarGroupItem, AvatarGroupSurface } from "./AvatarGroup.vue";
-export type { AvatarGroupLabels } from "@ecoma-io/loom-labels";
+export type { AvatarGroupLabels } from "../../../labels/src/index";
 //# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/badge/src/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":[],"sources":["../../../../../packages/primitives/badge/src/Badge.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * Badge — small status / meta chip. The `accent` variant wears the accent\n * colour used to signal a second semantic category distinct from primary.\n */\nexport type BadgeVariant =\n  \"neutral\" | \"outline\" | \"primary\" | \"success\" | \"warning\" | \"info\" | \"destructive\" | \"accent\";\n\nexport const badgeVariants = cva(\n  \"inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium transition-colors duration-fast\",\n  {\n    variants: {\n      variant: {\n        neutral: \"border-transparent bg-subtle text-subtle-foreground\",\n        outline: \"border-border bg-transparent text-muted-foreground\",\n        // The tinted washes use the opaque `*-muted` tokens, not an alpha of\n        // the base hue: `bg-*-/12` composites against the surface behind it, so\n        // the same badge renders at 4.46:1 on `bg-card` and differently on\n        // `bg-sunken` — under the AA floor and inconsistent. `*-muted` is mixed\n        // to hold ≥4.5:1 against its own `*-text` in both themes (see\n        // theme.css), which is what these variants were named for.\n        primary: \"border-transparent bg-primary-muted text-primary-text\",\n        success: \"border-transparent bg-success-muted text-success-text\",\n        warning: \"border-transparent bg-warning-muted text-warning\",\n        info: \"border-transparent bg-info-muted text-info-text\",\n        destructive: \"border-transparent bg-destructive-muted text-destructive-text\",\n        accent: \"border-accent/40 bg-accent-muted text-accent-text\",\n      } satisfies Record<BadgeVariant, string>,\n    },\n    defaultVariants: { variant: \"neutral\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Which status or meta this chip carries. `accent` is for signalling a second semantic category distinct from primary. */\n    variant?: BadgeVariant;\n  }>(),\n  { variant: \"neutral\" },\n);\n</script>\n\n<template>\n  <span :class=\"cn(badgeVariants({ variant }))\"><slot /></span>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Badge.js","names":[],"sources":["../../../../../packages/primitives/badge/src/Badge.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * Badge — small status / meta chip. The `accent` variant wears the accent\n * colour used to signal a second semantic category distinct from primary.\n */\nexport type BadgeVariant =\n  \"neutral\" | \"outline\" | \"primary\" | \"success\" | \"warning\" | \"info\" | \"destructive\" | \"accent\";\n\nexport const badgeVariants = cva(\n  \"inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium transition-colors duration-fast\",\n  {\n    variants: {\n      variant: {\n        neutral: \"border-transparent bg-subtle text-subtle-foreground\",\n        outline: \"border-border bg-transparent text-muted-foreground\",\n        // The tinted washes use the opaque `*-muted` tokens, not an alpha of\n        // the base hue: `bg-*-/12` composites against the surface behind it, so\n        // the same badge renders at 4.46:1 on `bg-card` and differently on\n        // `bg-sunken` — under the AA floor and inconsistent. `*-muted` is mixed\n        // to hold ≥4.5:1 against its own `*-text` in both themes (see\n        // theme.css), which is what these variants were named for.\n        primary: \"border-transparent bg-primary-muted text-primary-text\",\n        success: \"border-transparent bg-success-muted text-success-text\",\n        // `-text`, not the bare `warning`: the tinted washes are mixed to hold\n        // their contrast against the `*-text` rung in both themes, and the\n        // base hue is not — on the dark `--color-warning` dropped to a\n        // mid-amber that washed out against its own muted fill.\n        warning: \"border-transparent bg-warning-muted text-warning-text\",\n        info: \"border-transparent bg-info-muted text-info-text\",\n        destructive: \"border-transparent bg-destructive-muted text-destructive-text\",\n        accent: \"border-accent/40 bg-accent-muted text-accent-text\",\n      } satisfies Record<BadgeVariant, string>,\n    },\n    defaultVariants: { variant: \"neutral\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Which status or meta this chip carries. `accent` is for signalling a second semantic category distinct from primary. */\n    variant?: BadgeVariant;\n  }>(),\n  { variant: \"neutral\" },\n);\n</script>\n\n<template>\n  <span :class=\"cn(badgeVariants({ variant }))\"><slot /></span>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/badge/src/Badge.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/badge/src/Badge.vue"],"names":[],"mappings":"AA2DA;;;GAGG;AACH,MAAM,MAAM,YAAY,GACtB,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,CAAC;AAEhG,eAAO,MAAM,aAAa;;8EAuBzB,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,2HAA2H;cACjH,YAAY;;IADtB,2HAA2H;cACjH,YAAY;;aAAZ,YAAY;;cAkCZ,CAAC,KAAK,IAAgB,KAAK,GAAG;EAUxC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"Badge.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/badge/src/Badge.vue"],"names":[],"mappings":"AA+DA;;;GAGG;AACH,MAAM,MAAM,YAAY,GACtB,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,CAAC;AAEhG,eAAO,MAAM,aAAa;;8EA2BzB,CAAC;wBACmB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,2HAA2H;cACjH,YAAY;;IADtB,2HAA2H;cACjH,YAAY;;aAAZ,YAAY;;cAkCZ,CAAC,KAAK,IAAgB,KAAK,GAAG;EAUxC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/packages/primitives/badge/src/Badge.vue_vue_type_script_setup_true_lang.js

@@ -9,7 +9,7 @@ var badgeVariants = cva("inline-flex items-center gap-1 rounded-full border px-2
 		outline: "border-border bg-transparent text-muted-foreground",
 		primary: "border-transparent bg-primary-muted text-primary-text",
 		success: "border-transparent bg-success-muted text-success-text",
-		warning: "border-transparent bg-warning-muted text-warning",
+		warning: "border-transparent bg-warning-muted text-warning-text",
 		info: "border-transparent bg-info-muted text-info-text",
 		destructive: "border-transparent bg-destructive-muted text-destructive-text",
 		accent: "border-accent/40 bg-accent-muted text-accent-text"

package/dist/packages/primitives/badge/src/Badge.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/badge/src/Badge.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * Badge — small status / meta chip. The `accent` variant wears the accent\n * colour used to signal a second semantic category distinct from primary.\n */\nexport type BadgeVariant =\n  \"neutral\" | \"outline\" | \"primary\" | \"success\" | \"warning\" | \"info\" | \"destructive\" | \"accent\";\n\nexport const badgeVariants = cva(\n  \"inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium transition-colors duration-fast\",\n  {\n    variants: {\n      variant: {\n        neutral: \"border-transparent bg-subtle text-subtle-foreground\",\n        outline: \"border-border bg-transparent text-muted-foreground\",\n        // The tinted washes use the opaque `*-muted` tokens, not an alpha of\n        // the base hue: `bg-*-/12` composites against the surface behind it, so\n        // the same badge renders at 4.46:1 on `bg-card` and differently on\n        // `bg-sunken` — under the AA floor and inconsistent. `*-muted` is mixed\n        // to hold ≥4.5:1 against its own `*-text` in both themes (see\n        // theme.css), which is what these variants were named for.\n        primary: \"border-transparent bg-primary-muted text-primary-text\",\n        success: \"border-transparent bg-success-muted text-success-text\",\n        warning: \"border-transparent bg-warning-muted text-warning\",\n        info: \"border-transparent bg-info-muted text-info-text\",\n        destructive: \"border-transparent bg-destructive-muted text-destructive-text\",\n        accent: \"border-accent/40 bg-accent-muted text-accent-text\",\n      } satisfies Record<BadgeVariant, string>,\n    },\n    defaultVariants: { variant: \"neutral\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Which status or meta this chip carries. `accent` is for signalling a second semantic category distinct from primary. */\n    variant?: BadgeVariant;\n  }>(),\n  { variant: \"neutral\" },\n);\n</script>\n\n<template>\n  <span :class=\"cn(badgeVariants({ variant }))\"><slot /></span>\n</template>\n"],"mappings":";;;;;AAUA,IAAa,gBAAgB,IAC3B,sHACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;EAOT,SAAS;EACT,SAAS;EACT,SAAS;EACT,MAAM;EACN,aAAa;EACb,QAAQ;CACV,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;;;;;;GAgBE,OAAA,UAAA,GAAA,mBAA6D,QAAA,EAAtD,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAA,aAAA,CAAa,CAAA,EAAA,SAAG,QAAA,QAAO,CAAA,CAAA,CAAA,EAAA,GAAA,CAAM,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"Badge.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/badge/src/Badge.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * Badge — small status / meta chip. The `accent` variant wears the accent\n * colour used to signal a second semantic category distinct from primary.\n */\nexport type BadgeVariant =\n  \"neutral\" | \"outline\" | \"primary\" | \"success\" | \"warning\" | \"info\" | \"destructive\" | \"accent\";\n\nexport const badgeVariants = cva(\n  \"inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium transition-colors duration-fast\",\n  {\n    variants: {\n      variant: {\n        neutral: \"border-transparent bg-subtle text-subtle-foreground\",\n        outline: \"border-border bg-transparent text-muted-foreground\",\n        // The tinted washes use the opaque `*-muted` tokens, not an alpha of\n        // the base hue: `bg-*-/12` composites against the surface behind it, so\n        // the same badge renders at 4.46:1 on `bg-card` and differently on\n        // `bg-sunken` — under the AA floor and inconsistent. `*-muted` is mixed\n        // to hold ≥4.5:1 against its own `*-text` in both themes (see\n        // theme.css), which is what these variants were named for.\n        primary: \"border-transparent bg-primary-muted text-primary-text\",\n        success: \"border-transparent bg-success-muted text-success-text\",\n        // `-text`, not the bare `warning`: the tinted washes are mixed to hold\n        // their contrast against the `*-text` rung in both themes, and the\n        // base hue is not — on the dark `--color-warning` dropped to a\n        // mid-amber that washed out against its own muted fill.\n        warning: \"border-transparent bg-warning-muted text-warning-text\",\n        info: \"border-transparent bg-info-muted text-info-text\",\n        destructive: \"border-transparent bg-destructive-muted text-destructive-text\",\n        accent: \"border-accent/40 bg-accent-muted text-accent-text\",\n      } satisfies Record<BadgeVariant, string>,\n    },\n    defaultVariants: { variant: \"neutral\" },\n  },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Which status or meta this chip carries. `accent` is for signalling a second semantic category distinct from primary. */\n    variant?: BadgeVariant;\n  }>(),\n  { variant: \"neutral\" },\n);\n</script>\n\n<template>\n  <span :class=\"cn(badgeVariants({ variant }))\"><slot /></span>\n</template>\n"],"mappings":";;;;;AAUA,IAAa,gBAAgB,IAC3B,sHACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;EAOT,SAAS;EACT,SAAS;EAKT,SAAS;EACT,MAAM;EACN,aAAa;EACb,QAAQ;CACV,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;;;;;;GAgBE,OAAA,UAAA,GAAA,mBAA6D,QAAA,EAAtD,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAA,aAAA,CAAa,CAAA,EAAA,SAAG,QAAA,QAAO,CAAA,CAAA,CAAA,EAAA,GAAA,CAAM,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}

package/dist/packages/primitives/breadcrumb/src/Breadcrumb.js

@@ -1,7 +1,7 @@
-import Breadcrumb_vue_vue_type_script_setup_true_lang_default from "./Breadcrumb.vue_vue_type_script_setup_true_lang.js";
+import Breadcrumb_vue_vue_type_script_setup_true_lang_default, { BREADCRUMB_LABELS } from "./Breadcrumb.vue_vue_type_script_setup_true_lang.js";
 //#region packages/primitives/breadcrumb/src/Breadcrumb.vue
 var Breadcrumb_default = Breadcrumb_vue_vue_type_script_setup_true_lang_default;
 //#endregion
-export { Breadcrumb_default as default };
+export { BREADCRUMB_LABELS, Breadcrumb_default as default };
 
 //# sourceMappingURL=Breadcrumb.js.map

package/dist/packages/primitives/breadcrumb/src/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","names":[],"sources":["../../../../../packages/primitives/breadcrumb/src/Breadcrumb.vue"],"sourcesContent":["<script lang=\"ts\">\n/** The visible label text and optional link target for one step in the trail. */\nexport interface BreadcrumbItem {\n  /** The visible label text. */\n  label: string;\n  /** The link target. Omit for the current (last) item. */\n  href?: string;\n}\n\n/** Visual separators between breadcrumb steps. `chevron` renders an inline SVG. */\nexport type BreadcrumbSeparator = \"/\" | \"\\\\\" | \">\" | \"→\" | \"chevron\";\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\n/**\n * Breadcrumb — a navigation trail showing the page's position in the site\n * hierarchy. The last item is always the current page (no href,\n * `aria-current=\"page\"`); items with an href render as links. Built without\n * Reka UI, which has no Breadcrumb primitive.\n */\nwithDefaults(\n  defineProps<{\n    /** The breadcrumb trail, last item is the current page. */\n    items: BreadcrumbItem[];\n    /** Visual separator between items. `chevron` renders an inline SVG arrow. */\n    separator?: BreadcrumbSeparator;\n  }>(),\n  { separator: \"/\" },\n);\n</script>\n\n<template>\n  <nav aria-label=\"Breadcrumb\">\n    <ol class=\"flex items-center gap-1.5 text-sm\">\n      <template v-for=\"(item, index) in items\" :key=\"index\">\n        <li v-if=\"index > 0\" aria-hidden=\"true\" :class=\"cn('text-muted-foreground/50')\">\n          <svg\n            v-if=\"separator === 'chevron'\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"m9 18 6-6-6-6\" />\n          </svg>\n          <template v-else>{{ separator }}</template>\n        </li>\n\n        <!-- The last item is always the current page, regardless of href -->\n        <li v-if=\"index === items.length - 1\">\n          <span aria-current=\"page\" :class=\"cn('text-foreground font-medium')\">\n            {{ item.label }}\n          </span>\n        </li>\n        <li v-else>\n          <a\n            :href=\"item.href\"\n            :class=\"\n              cn(\n                'inline-flex min-h-6 items-center text-muted-foreground hover:text-foreground transition-colors duration-fast',\n              )\n            \"\n          >\n            {{ item.label }}\n          </a>\n        </li>\n      </template>\n    </ol>\n  </nav>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Breadcrumb.js","names":[],"sources":["../../../../../packages/primitives/breadcrumb/src/Breadcrumb.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { BreadcrumbLabels } from \"@ecoma-io/loom-labels\";\n\n/** The visible label text and optional link target for one step in the trail. */\nexport interface BreadcrumbItem {\n  /** The visible label text. */\n  label: string;\n  /** The link target. Omit for the current (last) item. */\n  href?: string;\n}\n\n/** Visual separators between breadcrumb steps. `chevron` renders an inline SVG. */\nexport type BreadcrumbSeparator = \"/\" | \"\\\\\" | \">\" | \"→\" | \"chevron\";\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 BREADCRUMB_LABELS: BreadcrumbLabels = {\n  label: \"Breadcrumb\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Breadcrumb — a navigation trail showing the page's position in the site\n * hierarchy. The last item is always the current page (no href,\n * `aria-current=\"page\"`); items with an href render as links. Built without\n * Reka UI, which has no Breadcrumb primitive.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The breadcrumb trail, last item is the current page. */\n    items: BreadcrumbItem[];\n    /** Visual separator between items. `chevron` renders an inline SVG arrow. */\n    separator?: BreadcrumbSeparator;\n    /**\n     * Names for what this component says out loud, as any subset of\n     * `BreadcrumbLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     *\n     * This is the per-instance correction: a page that carries two trails —\n     * above and below an article, say — names each one for where it stands,\n     * which an application-wide vocabulary alone cannot do.\n     */\n    labels?: LabelOverrides<BreadcrumbLabels>;\n  }>(),\n  { separator: \"/\" },\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(\"breadcrumb\", BREADCRUMB_LABELS, () => props.labels);\n</script>\n\n<template>\n  <nav :aria-label=\"text.label\">\n    <ol class=\"flex items-center gap-1.5 text-sm\">\n      <template v-for=\"(item, index) in items\" :key=\"index\">\n        <li v-if=\"index > 0\" aria-hidden=\"true\" :class=\"cn('text-muted-foreground/50')\">\n          <svg\n            v-if=\"separator === 'chevron'\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"m9 18 6-6-6-6\" />\n          </svg>\n          <template v-else>{{ separator }}</template>\n        </li>\n\n        <!-- The last item is always the current page, regardless of href -->\n        <li v-if=\"index === items.length - 1\">\n          <span aria-current=\"page\" :class=\"cn('text-foreground font-medium')\">\n            {{ item.label }}\n          </span>\n        </li>\n        <li v-else>\n          <a\n            :href=\"item.href\"\n            :class=\"\n              cn(\n                'inline-flex min-h-6 items-center text-muted-foreground hover:text-foreground transition-colors duration-fast',\n              )\n            \"\n          >\n            {{ item.label }}\n          </a>\n        </li>\n      </template>\n    </ol>\n  </nav>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/breadcrumb/src/Breadcrumb.vue.d.ts

@@ -1,3 +1,5 @@
+import { type LabelOverrides } from "../../../labels/src/index";
+import type { BreadcrumbLabels } from "../../../labels/src/index";
 /** The visible label text and optional link target for one step in the trail. */
 export interface BreadcrumbItem {
     /** The visible label text. */
@@ -7,6 +9,12 @@ export interface BreadcrumbItem {
 }
 /** Visual separators between breadcrumb steps. `chevron` renders an inline SVG. */
 export type BreadcrumbSeparator = "/" | "\\" | ">" | "→" | "chevron";
+/**
+ * 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 rather than a transcription of it.
+ */
+export declare const BREADCRUMB_LABELS: BreadcrumbLabels;
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
@@ -14,11 +22,31 @@ declare const __VLS_export: import("vue").DefineComponent<{
     items: BreadcrumbItem[];
     /** Visual separator between items. `chevron` renders an inline SVG arrow. */
     separator?: BreadcrumbSeparator;
+    /**
+     * Names for what this component says out loud, as any subset of
+     * `BreadcrumbLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * This is the per-instance correction: a page that carries two trails —
+     * above and below an article, say — names each one for where it stands,
+     * which an application-wide vocabulary alone cannot do.
+     */
+    labels?: LabelOverrides<BreadcrumbLabels>;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /** The breadcrumb trail, last item is the current page. */
     items: BreadcrumbItem[];
     /** Visual separator between items. `chevron` renders an inline SVG arrow. */
     separator?: BreadcrumbSeparator;
+    /**
+     * Names for what this component says out loud, as any subset of
+     * `BreadcrumbLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * This is the per-instance correction: a page that carries two trails —
+     * above and below an article, say — names each one for where it stands,
+     * which an application-wide vocabulary alone cannot do.
+     */
+    labels?: LabelOverrides<BreadcrumbLabels>;
 }> & Readonly<{}>, {
     separator: BreadcrumbSeparator;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/packages/primitives/breadcrumb/src/Breadcrumb.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,10 @@
 import { cn } from "../../../core/src/cn.js";
 import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
 import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref } from "vue";
 //#region packages/primitives/breadcrumb/src/Breadcrumb.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { "aria-label": "Breadcrumb" };
+var _hoisted_1 = ["aria-label"];
 var _hoisted_2 = { class: "flex items-center gap-1.5 text-sm" };
 var _hoisted_3 = {
 	key: 0,
@@ -19,15 +21,24 @@ var _hoisted_3 = {
 var _hoisted_4 = { key: 1 };
 var _hoisted_5 = { key: 2 };
 var _hoisted_6 = ["href"];
+/**
+* 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 rather than a transcription of it.
+*/
+var BREADCRUMB_LABELS = { label: "Breadcrumb" };
 var Breadcrumb_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Breadcrumb",
 	props: {
 		items: {},
-		separator: { default: "/" }
+		separator: { default: "/" },
+		labels: {}
 	},
 	setup(__props) {
+		const props = __props;
+		const text = useLabels("breadcrumb", BREADCRUMB_LABELS, () => props.labels);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("nav", _hoisted_1, [createElementVNode("ol", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+			return openBlock(), createElementBlock("nav", { "aria-label": unref(text).label }, [createElementVNode("ol", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
 				return openBlock(), createElementBlock(Fragment, { key: index }, [index > 0 ? (openBlock(), createElementBlock("li", {
 					key: 0,
 					"aria-hidden": "true",
@@ -39,11 +50,11 @@ var Breadcrumb_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					href: item.href,
 					class: normalizeClass(unref(cn)("inline-flex min-h-6 items-center text-muted-foreground hover:text-foreground transition-colors duration-fast"))
 				}, toDisplayString(item.label), 11, _hoisted_6)]))], 64);
-			}), 128))])]);
+			}), 128))])], 8, _hoisted_1);
 		};
 	}
 });
 //#endregion
-export { Breadcrumb_vue_vue_type_script_setup_true_lang_default as default };
+export { BREADCRUMB_LABELS, Breadcrumb_vue_vue_type_script_setup_true_lang_default as default };
 
 //# sourceMappingURL=Breadcrumb.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/breadcrumb/src/Breadcrumb.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/breadcrumb/src/Breadcrumb.vue"],"sourcesContent":["<script lang=\"ts\">\n/** The visible label text and optional link target for one step in the trail. */\nexport interface BreadcrumbItem {\n  /** The visible label text. */\n  label: string;\n  /** The link target. Omit for the current (last) item. */\n  href?: string;\n}\n\n/** Visual separators between breadcrumb steps. `chevron` renders an inline SVG. */\nexport type BreadcrumbSeparator = \"/\" | \"\\\\\" | \">\" | \"→\" | \"chevron\";\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\n/**\n * Breadcrumb — a navigation trail showing the page's position in the site\n * hierarchy. The last item is always the current page (no href,\n * `aria-current=\"page\"`); items with an href render as links. Built without\n * Reka UI, which has no Breadcrumb primitive.\n */\nwithDefaults(\n  defineProps<{\n    /** The breadcrumb trail, last item is the current page. */\n    items: BreadcrumbItem[];\n    /** Visual separator between items. `chevron` renders an inline SVG arrow. */\n    separator?: BreadcrumbSeparator;\n  }>(),\n  { separator: \"/\" },\n);\n</script>\n\n<template>\n  <nav aria-label=\"Breadcrumb\">\n    <ol class=\"flex items-center gap-1.5 text-sm\">\n      <template v-for=\"(item, index) in items\" :key=\"index\">\n        <li v-if=\"index > 0\" aria-hidden=\"true\" :class=\"cn('text-muted-foreground/50')\">\n          <svg\n            v-if=\"separator === 'chevron'\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"m9 18 6-6-6-6\" />\n          </svg>\n          <template v-else>{{ separator }}</template>\n        </li>\n\n        <!-- The last item is always the current page, regardless of href -->\n        <li v-if=\"index === items.length - 1\">\n          <span aria-current=\"page\" :class=\"cn('text-foreground font-medium')\">\n            {{ item.label }}\n          </span>\n        </li>\n        <li v-else>\n          <a\n            :href=\"item.href\"\n            :class=\"\n              cn(\n                'inline-flex min-h-6 items-center text-muted-foreground hover:text-foreground transition-colors duration-fast',\n              )\n            \"\n          >\n            {{ item.label }}\n          </a>\n        </li>\n      </template>\n    </ol>\n  </nav>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCE,OAAA,UAAA,GAAA,mBAyCM,OAzCN,YAyCM,CAxCJ,mBAuCK,MAvCL,YAuCK,EAtCH,UAAA,IAAA,GAAA,mBAqCW,UAAA,MAAA,WArCuB,QAAA,QAAhB,MAAM,UAAK;IAAkB,OAAA,UAAA,GAAA,mBAAA,UAAA,EAAA,KAAA,MAAK,GAAA,CACxC,QAAK,KAAf,UAAA,GAAA,mBAgBK,MAAA;;KAhBgB,eAAY;KAAQ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,0BAAA,CAAA;IAExC,GAAA,CAAA,QAAA,cAAS,aADjB,UAAA,GAAA,mBAaM,OAbN,YAaM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAA0B,QAAA,EAApB,GAAE,gBAAe,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA,MAEzB,UAAA,GAAA,mBAA2C,UAAA,EAAA,KAAA,EAAA,GAAA,CAAvB,gBAAA,gBAAA,QAAA,SAAS,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAIrB,UAAU,QAAA,MAAM,SAAM,KAAhC,UAAA,GAAA,mBAIK,MAAA,YAAA,CAHH,mBAEO,QAAA;KAFD,gBAAa;KAAQ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,6BAAA,CAAA;IAC/B,GAAA,gBAAA,KAAK,KAAK,GAAA,CAAA,CAAA,CAAA,MAGjB,UAAA,GAAA,mBAWK,MAAA,YAAA,CAVH,mBASI,KAAA;KARD,MAAM,KAAK;KACX,OAAK,eAAiB,MAAA,EAAA,CAAE,CAAA,8GAAA,CAAA;IAMtB,GAAA,gBAAA,KAAK,KAAK,GAAA,IAAA,UAAA,CAAA,CAAA,EAAA,GAAA,EAAA"}
+{"version":3,"file":"Breadcrumb.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/breadcrumb/src/Breadcrumb.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { BreadcrumbLabels } from \"@ecoma-io/loom-labels\";\n\n/** The visible label text and optional link target for one step in the trail. */\nexport interface BreadcrumbItem {\n  /** The visible label text. */\n  label: string;\n  /** The link target. Omit for the current (last) item. */\n  href?: string;\n}\n\n/** Visual separators between breadcrumb steps. `chevron` renders an inline SVG. */\nexport type BreadcrumbSeparator = \"/\" | \"\\\\\" | \">\" | \"→\" | \"chevron\";\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 BREADCRUMB_LABELS: BreadcrumbLabels = {\n  label: \"Breadcrumb\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Breadcrumb — a navigation trail showing the page's position in the site\n * hierarchy. The last item is always the current page (no href,\n * `aria-current=\"page\"`); items with an href render as links. Built without\n * Reka UI, which has no Breadcrumb primitive.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The breadcrumb trail, last item is the current page. */\n    items: BreadcrumbItem[];\n    /** Visual separator between items. `chevron` renders an inline SVG arrow. */\n    separator?: BreadcrumbSeparator;\n    /**\n     * Names for what this component says out loud, as any subset of\n     * `BreadcrumbLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     *\n     * This is the per-instance correction: a page that carries two trails —\n     * above and below an article, say — names each one for where it stands,\n     * which an application-wide vocabulary alone cannot do.\n     */\n    labels?: LabelOverrides<BreadcrumbLabels>;\n  }>(),\n  { separator: \"/\" },\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(\"breadcrumb\", BREADCRUMB_LABELS, () => props.labels);\n</script>\n\n<template>\n  <nav :aria-label=\"text.label\">\n    <ol class=\"flex items-center gap-1.5 text-sm\">\n      <template v-for=\"(item, index) in items\" :key=\"index\">\n        <li v-if=\"index > 0\" aria-hidden=\"true\" :class=\"cn('text-muted-foreground/50')\">\n          <svg\n            v-if=\"separator === 'chevron'\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"m9 18 6-6-6-6\" />\n          </svg>\n          <template v-else>{{ separator }}</template>\n        </li>\n\n        <!-- The last item is always the current page, regardless of href -->\n        <li v-if=\"index === items.length - 1\">\n          <span aria-current=\"page\" :class=\"cn('text-foreground font-medium')\">\n            {{ item.label }}\n          </span>\n        </li>\n        <li v-else>\n          <a\n            :href=\"item.href\"\n            :class=\"\n              cn(\n                'inline-flex min-h-6 items-center text-muted-foreground hover:text-foreground transition-colors duration-fast',\n              )\n            \"\n          >\n            {{ item.label }}\n          </a>\n        </li>\n      </template>\n    </ol>\n  </nav>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,IAAa,oBAAsC,EACjD,OAAO,aACT;;;;;;;;;EAaA,MAAM,QAAQ;EAuBd,MAAM,OAAO,UAAU,cAAc,yBAAyB,MAAM,MAAM;;GAIxE,OAAA,UAAA,GAAA,mBAyCM,OAAA,EAzCA,cAAY,MAAA,IAAA,CAAI,CAAC,MAAA,GAAA,CACrB,mBAuCK,MAvCL,YAuCK,EAtCH,UAAA,IAAA,GAAA,mBAqCW,UAAA,MAAA,WArCuB,QAAA,QAAhB,MAAM,UAAK;IAAkB,OAAA,UAAA,GAAA,mBAAA,UAAA,EAAA,KAAA,MAAK,GAAA,CACxC,QAAK,KAAf,UAAA,GAAA,mBAgBK,MAAA;;KAhBgB,eAAY;KAAQ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,0BAAA,CAAA;IAExC,GAAA,CAAA,QAAA,cAAS,aADjB,UAAA,GAAA,mBAaM,OAbN,YAaM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAA0B,QAAA,EAApB,GAAE,gBAAe,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA,MAEzB,UAAA,GAAA,mBAA2C,UAAA,EAAA,KAAA,EAAA,GAAA,CAAvB,gBAAA,gBAAA,QAAA,SAAS,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAIrB,UAAU,QAAA,MAAM,SAAM,KAAhC,UAAA,GAAA,mBAIK,MAAA,YAAA,CAHH,mBAEO,QAAA;KAFD,gBAAa;KAAQ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,6BAAA,CAAA;IAC/B,GAAA,gBAAA,KAAK,KAAK,GAAA,CAAA,CAAA,CAAA,MAGjB,UAAA,GAAA,mBAWK,MAAA,YAAA,CAVH,mBASI,KAAA;KARD,MAAM,KAAK;KACX,OAAK,eAAiB,MAAA,EAAA,CAAE,CAAA,8GAAA,CAAA;IAMtB,GAAA,gBAAA,KAAK,KAAK,GAAA,IAAA,UAAA,CAAA,CAAA,EAAA,GAAA,EAAA"}

package/dist/packages/primitives/breadcrumb/src/index.d.ts

@@ -1,3 +1,4 @@
-export { default } from "./Breadcrumb.vue";
+export { default, BREADCRUMB_LABELS } from "./Breadcrumb.vue";
 export type { BreadcrumbItem, BreadcrumbSeparator } from "./Breadcrumb.vue";
+export type { BreadcrumbLabels } from "../../../labels/src/index";
 //# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/breadcrumb/src/index.js

@@ -1,2 +1,3 @@
+import { BREADCRUMB_LABELS } from "./Breadcrumb.vue_vue_type_script_setup_true_lang.js";
 import Breadcrumb_default from "./Breadcrumb.js";
-export { Breadcrumb_default as default };
+export { BREADCRUMB_LABELS, Breadcrumb_default as default };