@ecoma-io/loom 0.3.0 → 0.5.0

package/dist/packages/blocks/error-summary/src/ErrorSummary.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,90 @@
+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, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useId, watch, withModifiers } from "vue";
+import { TriangleAlert } from "@lucide/vue";
+//#region packages/blocks/error-summary/src/ErrorSummary.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["role", "aria-labelledby"];
+var _hoisted_2 = { class: "flex items-start gap-2" };
+var _hoisted_3 = { class: "min-w-0" };
+var _hoisted_4 = ["id"];
+var _hoisted_5 = {
+	key: 0,
+	class: "mt-1 text-sm"
+};
+var _hoisted_6 = { class: "mt-2 list-disc space-y-1 pl-5" };
+var _hoisted_7 = ["href", "onClick"];
+/**
+* Loom's English, co-located with the component so it tree-shakes with it.
+* `heading` takes the count rather than a finished sentence for the reason
+* `LabelOf` in `@ecoma-io/loom-labels` records: plurals are a language
+* decision, and Loom's English has no right to make it for anyone else.
+*/
+var ERROR_SUMMARY_LABELS = {
+	heading: ({ count }) => `There is a problem (${String(count)} ${count === 1 ? "error" : "errors"})`,
+	description: () => ""
+};
+var ErrorSummary_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ErrorSummary",
+	props: {
+		errors: {},
+		labels: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const text = useLabels("errorSummary", ERROR_SUMMARY_LABELS, () => props.labels);
+		const box = ref(null);
+		const headingId = useId();
+		const announcing = ref(false);
+		let invalid = false;
+		watch(() => props.errors, async (errors) => {
+			if (errors.length === 0) {
+				invalid = false;
+				return;
+			}
+			announcing.value = !invalid;
+			invalid = true;
+			await nextTick();
+			box.value?.focus();
+		}, {
+			deep: true,
+			immediate: true
+		});
+		function focusField(id) {
+			document.getElementById(id)?.focus();
+		}
+		return (_ctx, _cache) => {
+			return __props.errors.length > 0 ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				ref_key: "box",
+				ref: box,
+				tabindex: "-1",
+				role: announcing.value ? "alert" : void 0,
+				"aria-labelledby": unref(headingId),
+				class: normalizeClass(unref(cn)("rounded-md border border-destructive/30 bg-destructive/10 px-4 py-3 text-destructive-text", "animate-fade-rise", "focus:outline-2 focus:outline-offset-2 focus:outline-destructive")),
+				onFocus: _cache[0] || (_cache[0] = ($event) => announcing.value = false)
+			}, [createElementVNode("div", _hoisted_2, [createVNode(unref(TriangleAlert), {
+				class: "mt-0.5 h-4 w-4 shrink-0",
+				"aria-hidden": "true"
+			}), createElementVNode("div", _hoisted_3, [
+				createElementVNode("h2", {
+					id: unref(headingId),
+					class: "text-sm font-semibold"
+				}, toDisplayString(unref(text).heading({ count: __props.errors.length })), 9, _hoisted_4),
+				unref(text).description({ count: __props.errors.length }) !== "" ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(unref(text).description({ count: __props.errors.length })), 1)) : createCommentVNode("", true),
+				createElementVNode("ul", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.errors, (error) => {
+					return openBlock(), createElementBlock("li", { key: error.id }, [createElementVNode("a", {
+						href: `#${error.id}`,
+						class: "font-medium underline underline-offset-2",
+						onClick: withModifiers(($event) => focusField(error.id), ["prevent"])
+					}, toDisplayString(error.fieldLabel ? `${error.fieldLabel}: ${error.message}` : error.message), 9, _hoisted_7)]);
+				}), 128))])
+			])])], 42, _hoisted_1)) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { ERROR_SUMMARY_LABELS, ErrorSummary_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ErrorSummary.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/blocks/error-summary/src/ErrorSummary.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorSummary.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/blocks/error-summary/src/ErrorSummary.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ErrorSummaryLabels, LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/** One invalid field the summary lists. */\nexport interface ErrorSummaryEntry {\n  /** The id of the element the entry links to — the invalid field's control. Give it `tabindex=\"-1\"` (or be natively focusable) so focus can land. */\n  id: string;\n  /** The error text for that field. */\n  message: string;\n  /** The field's visible label, spoken ahead of the message in the link text. */\n  fieldLabel?: string;\n}\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it.\n * `heading` takes the count rather than a finished sentence for the reason\n * `LabelOf` in `@ecoma-io/loom-labels` records: plurals are a language\n * decision, and Loom's English has no right to make it for anyone else.\n */\nexport const ERROR_SUMMARY_LABELS: ErrorSummaryLabels = {\n  heading: ({ count }) =>\n    `There is a problem (${String(count)} ${count === 1 ? \"error\" : \"errors\"})`,\n  description: () => \"\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, ref, useId, watch } from \"vue\";\nimport { TriangleAlert } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * ErrorSummary — the GOV.UK error-summary pattern. On submit-failure, focus\n * moves to a summary listing every field error, each entry a link that moves\n * focus to the invalid field. The container takes `tabindex=\"-1\"` and is\n * focused programmatically whenever the errors first render or change while\n * the form stays invalid.\n *\n * The announcement happens once. `role=\"alert\"` exists only between the\n * summary's appearance and the focus this component immediately gives it —\n * a region that stayed alert would re-announce the whole list on every\n * later change, which is the failure the pattern exists to avoid. Where\n * InlineError annotates one field, this orients the reader across the whole\n * form.\n */\nconst props = defineProps<{\n  /** Every invalid field, most important first. Give each `id` a focusable target. */\n  errors: ErrorSummaryEntry[];\n  /** Names for the summary's own copy — the heading takes the count, so a host owns its plural forms. */\n  labels?: LabelOverrides<ErrorSummaryLabels> | undefined;\n}>();\n\nconst text = useLabels(\"errorSummary\", ERROR_SUMMARY_LABELS, () => props.labels);\n\nconst box = ref<HTMLElement | null>(null);\nconst headingId = useId();\nconst announcing = ref(false);\n// True while the form is known to be invalid: the announcement belongs to\n// the empty→invalid transition alone, not to any later change of detail.\nlet invalid = false;\n\nwatch(\n  () => props.errors,\n  async (errors) => {\n    if (errors.length === 0) {\n      invalid = false;\n      return;\n    }\n    announcing.value = !invalid;\n    invalid = true;\n    await nextTick();\n    box.value?.focus();\n  },\n  { deep: true, immediate: true },\n);\n\nfunction focusField(id: string): void {\n  // The link's native jump is suppressed: focusing scrolls the field into\n  // view, and a jump-to-anchor from a link moves no focus at all when the\n  // target is a tabindex=\"-1\" field — which is the documented host contract.\n  document.getElementById(id)?.focus();\n}\n</script>\n\n<template>\n  <!-- Mounted only while invalid, like InlineError: `v-if`, never `v-show` —\n       a summary that never leaves the DOM cannot announce its return. -->\n  <div\n    v-if=\"errors.length > 0\"\n    ref=\"box\"\n    tabindex=\"-1\"\n    :role=\"announcing ? 'alert' : undefined\"\n    :aria-labelledby=\"headingId\"\n    :class=\"\n      cn(\n        'rounded-md border border-destructive/30 bg-destructive/10 px-4 py-3 text-destructive-text',\n        'animate-fade-rise',\n        'focus:outline-2 focus:outline-offset-2 focus:outline-destructive',\n      )\n    \"\n    @focus=\"announcing = false\"\n  >\n    <div class=\"flex items-start gap-2\">\n      <TriangleAlert class=\"mt-0.5 h-4 w-4 shrink-0\" aria-hidden=\"true\" />\n      <div class=\"min-w-0\">\n        <h2 :id=\"headingId\" class=\"text-sm font-semibold\">\n          {{ text.heading({ count: errors.length }) }}\n        </h2>\n        <p v-if=\"text.description({ count: errors.length }) !== ''\" class=\"mt-1 text-sm\">\n          {{ text.description({ count: errors.length }) }}\n        </p>\n        <ul class=\"mt-2 list-disc space-y-1 pl-5\">\n          <li v-for=\"error in errors\" :key=\"error.id\">\n            <a\n              :href=\"`#${error.id}`\"\n              class=\"font-medium underline underline-offset-2\"\n              @click.prevent=\"focusField(error.id)\"\n              >{{ error.fieldLabel ? `${error.fieldLabel}: ${error.message}` : error.message }}</a\n            >\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmBA,IAAa,uBAA2C;CACtD,UAAU,EAAE,YACV,uBAAuB,OAAO,KAAK,EAAE,GAAG,UAAU,IAAI,UAAU,SAAS;CAC3E,mBAAmB;AACrB;;;;;;;;EAuBA,MAAM,QAAQ;EAOd,MAAM,OAAO,UAAU,gBAAgB,4BAA4B,MAAM,MAAM;EAE/E,MAAM,MAAM,IAAwB,IAAI;EACxC,MAAM,YAAY,MAAM;EACxB,MAAM,aAAa,IAAI,KAAK;EAG5B,IAAI,UAAU;EAEd,YACQ,MAAM,QACZ,OAAO,WAAW;GAChB,IAAI,OAAO,WAAW,GAAG;IACvB,UAAU;IACV;GACF;GACA,WAAW,QAAQ,CAAC;GACpB,UAAU;GACV,MAAM,SAAS;GACf,IAAI,OAAO,MAAM;EACnB,GACA;GAAE,MAAM;GAAM,WAAW;EAAK,CAChC;EAEA,SAAS,WAAW,IAAkB;GAIpC,SAAS,eAAe,EAAE,CAAC,EAAE,MAAM;EACrC;;GAOU,OAAA,QAAA,OAAO,SAAM,KADrB,UAAA,GAAA,mBAoCM,OAAA;;IAlCA,SAAA;IAAJ,KAAI;IACJ,UAAS;IACR,MAAM,WAAA,QAAU,UAAa,KAAA;IAC7B,mBAAiB,MAAA,SAAA;IACjB,OAAK,eAAS,MAAA,EAAA,CAAE,CAAA,6FAAA,qBAAA,kEAAA,CAAA;IAOhB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,WAAA,QAAU;GAElB,GAAA,CAAA,mBAoBM,OApBN,YAoBM,CAnBJ,YAAoE,MAAA,aAAA,GAAA;IAArD,OAAM;IAA0B,eAAY;GAC3D,CAAA,GAAA,mBAiBM,OAjBN,YAiBM;IAhBJ,mBAEK,MAAA;KAFA,IAAI,MAAA,SAAA;KAAW,OAAM;IACrB,GAAA,gBAAA,MAAA,IAAA,CAAI,CAAC,QAAO,EAAA,OAAU,QAAA,OAAO,OAAM,CAAA,CAAA,GAAA,GAAA,UAAA;IAE/B,MAAA,IAAA,CAAI,CAAC,YAAW,EAAA,OAAU,QAAA,OAAO,OAAM,CAAA,MAAA,MAAhD,UAAA,GAAA,mBAEI,KAFJ,YAEI,gBADC,MAAA,IAAA,CAAI,CAAC,YAAW,EAAA,OAAU,QAAA,OAAO,OAAM,CAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAE5C,mBASK,MATL,YASK,EARH,UAAA,IAAA,GAAA,mBAOK,UAAA,MAAA,WAPe,QAAA,SAAT,UAAK;KAAhB,OAAA,UAAA,GAAA,mBAOK,MAAA,EAPwB,KAAK,MAAM,GAAA,GAAA,CACtC,mBAKC,KAAA;MAJE,MAAI,IAAM,MAAM;MACjB,OAAM;MACL,SAAK,eAAA,WAAU,WAAW,MAAM,EAAE,GAAA,CAAA,SAAA,CAAA;KAC/B,GAAA,gBAAA,MAAM,aAAU,GAAM,MAAM,WAAU,IAAK,MAAM,YAAY,MAAM,OAAO,GAAA,GAAA,UAAA,CAAA,CAAA"}

package/dist/packages/blocks/error-summary/src/index.d.ts

@@ -0,0 +1,4 @@
+export { default, ERROR_SUMMARY_LABELS } from "./ErrorSummary.vue";
+export type { ErrorSummaryEntry } from "./ErrorSummary.vue";
+export type { ErrorSummaryLabels } from "../../../labels/src/index";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/blocks/error-summary/src/index.js

@@ -0,0 +1,3 @@
+import { ERROR_SUMMARY_LABELS } from "./ErrorSummary.vue_vue_type_script_setup_true_lang.js";
+import ErrorSummary_default from "./ErrorSummary.js";
+export { ERROR_SUMMARY_LABELS, ErrorSummary_default as default };

package/dist/packages/blocks/metric-card/src/MetricCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricCard.js","names":[],"sources":["../../../../../packages/blocks/metric-card/src/MetricCard.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * MetricCard — one KPI on a dashboard: a compact surface carrying a metric\n * value, its label, and an optional trend arrow. The shape is fixed (icon →\n * label → value + trend) because a hand-rolled metric row drifts from call\n * site to call site — the icon above the label here, the trend on a second\n * line there — and this block pins one layout so the row scans left-to-right.\n *\n * The trend is always inline with the value, never a separate line. A trend\n * on its own row reads as a second metric; sharing the value line reads as\n * context for that metric, which is what it is. The arrows are inline SVGs\n * (12px) rather than an icon-library dependency: a trend indicator is a\n * single directional glyph, and pulling in an icon package for three paths\n * is weight the host did not ask for.\n *\n * Colour encodes direction but is never the only signal: the arrow shape\n * distinguishes up from down even without hue, and \"flat\" is an em dash\n * rather than a horizontal arrow that could be mistaken for a minus sign or\n * a separator. `text-success-text` / `text-destructive-text` / `text-muted-foreground`\n * are the semantic tokens rather than fixed greens and reds, so the card\n * adapts to whatever the theme maps those to.\n */\nexport type MetricCardTrend = \"up\" | \"down\" | \"flat\";\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\ndefineProps<{\n  /** The metric value — a formatted string or number the host has already\n   *  localised (e.g. \"1,234\", \"98.5%\", \"$42k\"). Raw numbers are not\n   *  formatted by the card; the host owns formatting so the same value\n   *  can be \"$42k\" in one place and \"42,000\" in another. */\n  value: string | number;\n  /** What the metric measures — always shown. */\n  label: string;\n  /** Direction of change. When absent, no trend indicator is rendered. */\n  trend?: MetricCardTrend;\n  /** The trend magnitude (e.g. \"+12.5%\", \"-3.2%\"). Shown only when `trend`\n   *  is also provided; a magnitude with no direction has no meaning. */\n  trendValue?: string;\n}>();\n</script>\n\n<template>\n  <div :class=\"cn('rounded-lg border border-border bg-card p-4')\">\n    <!-- Decorative icon — hidden from assistive tech because the label and\n         value already carry the metric's meaning. -->\n    <div\n      v-if=\"$slots.icon\"\n      aria-hidden=\"true\"\n      class=\"mb-2 text-muted-foreground [&_svg]:h-4 [&_svg]:w-4\"\n    >\n      <slot name=\"icon\" />\n    </div>\n    <p class=\"text-small text-muted-foreground\">{{ label }}</p>\n    <div class=\"flex items-baseline gap-1.5\">\n      <span class=\"text-2xl font-semibold tracking-tight text-foreground\">\n        {{ value }}\n      </span>\n      <span\n        v-if=\"trend\"\n        :class=\"\n          cn('inline-flex items-center gap-0.5 text-small font-medium', {\n            'text-success-text': trend === 'up',\n            'text-destructive-text': trend === 'down',\n            'text-muted-foreground': trend === 'flat',\n          })\n        \"\n      >\n        <!-- Up arrow: a single upward stroke with a chevron head. -->\n        <svg\n          v-if=\"trend === 'up'\"\n          class=\"inline h-3 w-3\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M6 2v8M3 5l3-3 3 3\" />\n        </svg>\n        <!-- Down arrow: a single downward stroke with a chevron head. -->\n        <svg\n          v-else-if=\"trend === 'down'\"\n          class=\"inline h-3 w-3\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M6 10V2M3 7l3 3 3-3\" />\n        </svg>\n        <!-- Flat: an em dash rather than a horizontal arrow — a horizontal\n             arrow at this size reads as a minus sign or a separator. -->\n        <span v-else aria-hidden=\"true\">&mdash;</span>\n        <span v-if=\"trendValue\">{{ trendValue }}</span>\n      </span>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"MetricCard.js","names":[],"sources":["../../../../../packages/blocks/metric-card/src/MetricCard.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * MetricCard — one KPI on a dashboard: a compact surface carrying a metric\n * value, its label, and an optional trend arrow. The shape is fixed (icon →\n * label → value + trend) because a hand-rolled metric row drifts from call\n * site to call site — the icon above the label here, the trend on a second\n * line there — and this block pins one layout so the row scans left-to-right.\n *\n * The trend is always inline with the value, never a separate line. A trend\n * on its own row reads as a second metric; sharing the value line reads as\n * context for that metric, which is what it is. The arrows are inline SVGs\n * (12px) rather than an icon-library dependency: a trend indicator is a\n * single directional glyph, and pulling in an icon package for three paths\n * is weight the host did not ask for.\n *\n * Colour encodes direction but is never the only signal: the arrow shape\n * distinguishes up from down even without hue, and \"flat\" is an em dash\n * rather than a horizontal arrow that could be mistaken for a minus sign or\n * a separator. `text-success-text` / `text-destructive-text` / `text-muted-foreground`\n * are the semantic tokens rather than fixed greens and reds, so the card\n * adapts to whatever the theme maps those to.\n */\nexport type MetricCardTrend = \"up\" | \"down\" | \"flat\";\n</script>\n\n<script setup lang=\"ts\">\nimport { watchEffect } from \"vue\";\nimport Skeleton from \"@ecoma-io/loom-skeleton\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\nconst props = defineProps<{\n  /** The metric value — a formatted string or number the host has already\n   *  localised (e.g. \"1,234\", \"98.5%\", \"$42k\"). Raw numbers are not\n   *  formatted by the card; the host owns formatting so the same value\n   *  can be \"$42k\" in one place and \"42,000\" in another. Optional only\n   *  while `loading`. */\n  value?: string | number;\n  /** What the metric measures — always shown. */\n  label: string;\n  /** Direction of change. When absent, no trend indicator is rendered. */\n  trend?: MetricCardTrend;\n  /** The trend magnitude (e.g. \"+12.5%\", \"-3.2%\"). Shown only when `trend`\n   *  is also provided; a magnitude with no direction has no meaning. */\n  trendValue?: string;\n  /** Context line under the value row — a period, a comparison base. */\n  description?: string;\n  /**\n   * Renders the label and value as Skeleton placeholders sized to the real\n   * layout, so the card keeps its height and does not reflow when data\n   * lands.\n   */\n  loading?: boolean;\n}>();\n\n// `value` went optional for the loading state; this keeps a forgotten value\n// from landing as an empty heading once data arrives.\nwatchEffect(() => {\n  if (!props.loading && props.value === undefined) {\n    console.warn(\n      \"[MetricCard] no `value` given and `loading` is false — the card renders an empty metric.\",\n    );\n  }\n});\n</script>\n\n<template>\n  <div :aria-busy=\"loading || undefined\" :class=\"cn('rounded-lg border border-border bg-card p-4')\">\n    <!-- Decorative icon — hidden from assistive tech because the label and\n         value already carry the metric's meaning. -->\n    <div\n      v-if=\"$slots.icon\"\n      aria-hidden=\"true\"\n      class=\"mb-2 text-muted-foreground [&_svg]:h-4 [&_svg]:w-4\"\n    >\n      <slot name=\"icon\" />\n    </div>\n    <!-- Loading keeps the card's height by sizing each placeholder to the\n         row it stands in for — a single generic bar would let the value\n         land with a jolt. aria-hidden pairs with the parent's own\n         aria-busy below. -->\n    <template v-if=\"loading\">\n      <Skeleton variant=\"text\" class=\"mb-2 h-3 w-20\" />\n      <div class=\"flex items-baseline gap-1.5\">\n        <Skeleton variant=\"text\" class=\"h-7 w-24\" />\n      </div>\n    </template>\n    <template v-else>\n      <p class=\"text-small text-muted-foreground\">{{ label }}</p>\n      <div class=\"flex items-baseline gap-1.5\">\n        <!-- `text-heading`, not a hand-assembled `text-2xl font-semibold\n           tracking-tight`: the named rung is near-parity with that stack\n           (1.5rem, weight 600) by design, and composing it here meant the KPI\n           drifted silently if the scale ever moved. The two real deltas are\n           deliberate — letter-spacing slackens from tight's −0.025em to the\n           heading rung's −0.01em, and the line-height comes down to 1.2 —\n           both invisible on a single baseline row like this one. -->\n        <span class=\"text-heading text-foreground\">\n          {{ value }}\n        </span>\n        <span\n          v-if=\"trend\"\n          :class=\"\n            cn('inline-flex items-center gap-0.5 text-small font-medium', {\n              'text-success-text': trend === 'up',\n              'text-destructive-text': trend === 'down',\n              'text-muted-foreground': trend === 'flat',\n            })\n          \"\n        >\n          <!-- Up arrow: a single upward stroke with a chevron head. -->\n          <svg\n            v-if=\"trend === 'up'\"\n            class=\"inline h-3 w-3\"\n            viewBox=\"0 0 12 12\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M6 2v8M3 5l3-3 3 3\" />\n          </svg>\n          <!-- Down arrow: a single downward stroke with a chevron head. -->\n          <svg\n            v-else-if=\"trend === 'down'\"\n            class=\"inline h-3 w-3\"\n            viewBox=\"0 0 12 12\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M6 10V2M3 7l3 3 3-3\" />\n          </svg>\n          <!-- Flat: an em dash rather than a horizontal arrow — a horizontal\n             arrow at this size reads as a minus sign or a separator. -->\n          <span v-else aria-hidden=\"true\">&mdash;</span>\n          <span v-if=\"trendValue\">{{ trendValue }}</span>\n        </span>\n      </div>\n      <p v-if=\"description\" class=\"mt-1 text-small text-muted-foreground\">\n        {{ description }}\n      </p>\n    </template>\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/blocks/metric-card/src/MetricCard.vue.d.ts

@@ -26,8 +26,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /** The metric value — a formatted string or number the host has already
      *  localised (e.g. "1,234", "98.5%", "$42k"). Raw numbers are not
      *  formatted by the card; the host owns formatting so the same value
-     *  can be "$42k" in one place and "42,000" in another. */
-    value: string | number;
+     *  can be "$42k" in one place and "42,000" in another. Optional only
+     *  while `loading`. */
+    value?: string | number;
     /** What the metric measures — always shown. */
     label: string;
     /** Direction of change. When absent, no trend indicator is rendered. */
@@ -35,12 +36,21 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /** The trend magnitude (e.g. "+12.5%", "-3.2%"). Shown only when `trend`
      *  is also provided; a magnitude with no direction has no meaning. */
     trendValue?: string;
+    /** Context line under the value row — a period, a comparison base. */
+    description?: string;
+    /**
+     * Renders the label and value as Skeleton placeholders sized to the real
+     * layout, so the card keeps its height and does not reflow when data
+     * lands.
+     */
+    loading?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /** The metric value — a formatted string or number the host has already
      *  localised (e.g. "1,234", "98.5%", "$42k"). Raw numbers are not
      *  formatted by the card; the host owns formatting so the same value
-     *  can be "$42k" in one place and "42,000" in another. */
-    value: string | number;
+     *  can be "$42k" in one place and "42,000" in another. Optional only
+     *  while `loading`. */
+    value?: string | number;
     /** What the metric measures — always shown. */
     label: string;
     /** Direction of change. When absent, no trend indicator is rendered. */
@@ -48,6 +58,14 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /** The trend magnitude (e.g. "+12.5%", "-3.2%"). Shown only when `trend`
      *  is also provided; a magnitude with no direction has no meaning. */
     trendValue?: string;
+    /** Context line under the value row — a period, a comparison base. */
+    description?: string;
+    /**
+     * Renders the label and value as Skeleton placeholders sized to the real
+     * layout, so the card keeps its height and does not reflow when data
+     * lands.
+     */
+    loading?: boolean;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     icon?: (props: {}) => any;
 }>;

package/dist/packages/blocks/metric-card/src/MetricCard.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricCard.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/blocks/metric-card/src/MetricCard.vue"],"names":[],"mappings":"AA4GA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;wBAChC,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEhB;;;8DAG0D;WACnD,MAAM,GAAG,MAAM;IACtB,+CAA+C;WACxC,MAAM;IACb,wEAAwE;YAChE,eAAe;IACvB;0EACsE;iBACzD,MAAM;;IAXnB;;;8DAG0D;WACnD,MAAM,GAAG,MAAM;IACtB,+CAA+C;WACxC,MAAM;IACb,wEAAwE;YAChE,eAAe;IACvB;0EACsE;iBACzD,MAAM;;WAgHV,CAAC,KAAK,IAAgB,KAAK,GAAG;EASrC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"MetricCard.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/blocks/metric-card/src/MetricCard.vue"],"names":[],"mappings":"AAyJA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;wBAChC,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEhB;;;;2BAIuB;YACf,MAAM,GAAG,MAAM;IACvB,+CAA+C;WACxC,MAAM;IACb,wEAAwE;YAChE,eAAe;IACvB;0EACsE;iBACzD,MAAM;IACnB,sEAAsE;kBACxD,MAAM;IACpB;;;;OAIG;cACO,OAAO;;IApBjB;;;;2BAIuB;YACf,MAAM,GAAG,MAAM;IACvB,+CAA+C;WACxC,MAAM;IACb,wEAAwE;YAChE,eAAe;IACvB;0EACsE;iBACzD,MAAM;IACnB,sEAAsE;kBACxD,MAAM;IACpB;;;;OAIG;cACO,OAAO;;WA0KR,CAAC,KAAK,IAAgB,KAAK,GAAG;EASrC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/packages/blocks/metric-card/src/MetricCard.vue_vue_type_script_setup_true_lang.js

@@ -1,16 +1,20 @@
 import { cn } from "../../../core/src/cn.js";
 import "../../../core/src/index.js";
-import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref } from "vue";
+import Skeleton_default from "../../../primitives/skeleton/src/Skeleton.js";
+import "../../../primitives/skeleton/src/index.js";
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, watchEffect } from "vue";
 //#region packages/blocks/metric-card/src/MetricCard.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
+var _hoisted_1 = ["aria-busy"];
+var _hoisted_2 = {
 	key: 0,
 	"aria-hidden": "true",
 	class: "mb-2 text-muted-foreground [&_svg]:h-4 [&_svg]:w-4"
 };
-var _hoisted_2 = { class: "text-small text-muted-foreground" };
 var _hoisted_3 = { class: "flex items-baseline gap-1.5" };
-var _hoisted_4 = { class: "text-2xl font-semibold tracking-tight text-foreground" };
-var _hoisted_5 = {
+var _hoisted_4 = { class: "text-small text-muted-foreground" };
+var _hoisted_5 = { class: "flex items-baseline gap-1.5" };
+var _hoisted_6 = { class: "text-heading text-foreground" };
+var _hoisted_7 = {
 	key: 0,
 	class: "inline h-3 w-3",
 	viewBox: "0 0 12 12",
@@ -19,7 +23,7 @@ var _hoisted_5 = {
 	"stroke-width": "2",
 	"aria-hidden": "true"
 };
-var _hoisted_6 = {
+var _hoisted_8 = {
 	key: 1,
 	class: "inline h-3 w-3",
 	viewBox: "0 0 12 12",
@@ -28,33 +32,52 @@ var _hoisted_6 = {
 	"stroke-width": "2",
 	"aria-hidden": "true"
 };
-var _hoisted_7 = {
+var _hoisted_9 = {
 	key: 2,
 	"aria-hidden": "true"
 };
-var _hoisted_8 = { key: 3 };
+var _hoisted_10 = { key: 3 };
+var _hoisted_11 = {
+	key: 0,
+	class: "mt-1 text-small text-muted-foreground"
+};
 var MetricCard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "MetricCard",
 	props: {
 		value: {},
 		label: {},
 		trend: {},
-		trendValue: {}
+		trendValue: {},
+		description: {},
+		loading: { type: Boolean }
 	},
 	setup(__props) {
+		const props = __props;
+		watchEffect(() => {
+			if (!props.loading && props.value === void 0) console.warn("[MetricCard] no `value` given and `loading` is false — the card renders an empty metric.");
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)("rounded-lg border border-border bg-card p-4")) }, [
-				_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true),
-				createElementVNode("p", _hoisted_2, toDisplayString(__props.label), 1),
-				createElementVNode("div", _hoisted_3, [createElementVNode("span", _hoisted_4, toDisplayString(__props.value), 1), __props.trend ? (openBlock(), createElementBlock("span", {
+			return openBlock(), createElementBlock("div", {
+				"aria-busy": __props.loading || void 0,
+				class: normalizeClass(unref(cn)("rounded-lg border border-border bg-card p-4"))
+			}, [_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true), __props.loading ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(unref(Skeleton_default), {
+				variant: "text",
+				class: "mb-2 h-3 w-20"
+			}), createElementVNode("div", _hoisted_3, [createVNode(unref(Skeleton_default), {
+				variant: "text",
+				class: "h-7 w-24"
+			})])], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+				createElementVNode("p", _hoisted_4, toDisplayString(__props.label), 1),
+				createElementVNode("div", _hoisted_5, [createElementVNode("span", _hoisted_6, toDisplayString(__props.value), 1), __props.trend ? (openBlock(), createElementBlock("span", {
 					key: 0,
 					class: normalizeClass(unref(cn)("inline-flex items-center gap-0.5 text-small font-medium", {
 						"text-success-text": __props.trend === "up",
 						"text-destructive-text": __props.trend === "down",
 						"text-muted-foreground": __props.trend === "flat"
 					}))
-				}, [__props.trend === "up" ? (openBlock(), createElementBlock("svg", _hoisted_5, [..._cache[0] || (_cache[0] = [createElementVNode("path", { d: "M6 2v8M3 5l3-3 3 3" }, null, -1)])])) : __props.trend === "down" ? (openBlock(), createElementBlock("svg", _hoisted_6, [..._cache[1] || (_cache[1] = [createElementVNode("path", { d: "M6 10V2M3 7l3 3 3-3" }, null, -1)])])) : (openBlock(), createElementBlock("span", _hoisted_7, "—")), __props.trendValue ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(__props.trendValue), 1)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)])
-			], 2);
+				}, [__props.trend === "up" ? (openBlock(), createElementBlock("svg", _hoisted_7, [..._cache[0] || (_cache[0] = [createElementVNode("path", { d: "M6 2v8M3 5l3-3 3 3" }, null, -1)])])) : __props.trend === "down" ? (openBlock(), createElementBlock("svg", _hoisted_8, [..._cache[1] || (_cache[1] = [createElementVNode("path", { d: "M6 10V2M3 7l3 3 3-3" }, null, -1)])])) : (openBlock(), createElementBlock("span", _hoisted_9, "—")), __props.trendValue ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(__props.trendValue), 1)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)]),
+				__props.description ? (openBlock(), createElementBlock("p", _hoisted_11, toDisplayString(__props.description), 1)) : createCommentVNode("", true)
+			], 64))], 10, _hoisted_1);
 		};
 	}
 });

package/dist/packages/blocks/metric-card/src/MetricCard.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricCard.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../packages/blocks/metric-card/src/MetricCard.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * MetricCard — one KPI on a dashboard: a compact surface carrying a metric\n * value, its label, and an optional trend arrow. The shape is fixed (icon →\n * label → value + trend) because a hand-rolled metric row drifts from call\n * site to call site — the icon above the label here, the trend on a second\n * line there — and this block pins one layout so the row scans left-to-right.\n *\n * The trend is always inline with the value, never a separate line. A trend\n * on its own row reads as a second metric; sharing the value line reads as\n * context for that metric, which is what it is. The arrows are inline SVGs\n * (12px) rather than an icon-library dependency: a trend indicator is a\n * single directional glyph, and pulling in an icon package for three paths\n * is weight the host did not ask for.\n *\n * Colour encodes direction but is never the only signal: the arrow shape\n * distinguishes up from down even without hue, and \"flat\" is an em dash\n * rather than a horizontal arrow that could be mistaken for a minus sign or\n * a separator. `text-success-text` / `text-destructive-text` / `text-muted-foreground`\n * are the semantic tokens rather than fixed greens and reds, so the card\n * adapts to whatever the theme maps those to.\n */\nexport type MetricCardTrend = \"up\" | \"down\" | \"flat\";\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\ndefineProps<{\n  /** The metric value — a formatted string or number the host has already\n   *  localised (e.g. \"1,234\", \"98.5%\", \"$42k\"). Raw numbers are not\n   *  formatted by the card; the host owns formatting so the same value\n   *  can be \"$42k\" in one place and \"42,000\" in another. */\n  value: string | number;\n  /** What the metric measures — always shown. */\n  label: string;\n  /** Direction of change. When absent, no trend indicator is rendered. */\n  trend?: MetricCardTrend;\n  /** The trend magnitude (e.g. \"+12.5%\", \"-3.2%\"). Shown only when `trend`\n   *  is also provided; a magnitude with no direction has no meaning. */\n  trendValue?: string;\n}>();\n</script>\n\n<template>\n  <div :class=\"cn('rounded-lg border border-border bg-card p-4')\">\n    <!-- Decorative icon — hidden from assistive tech because the label and\n         value already carry the metric's meaning. -->\n    <div\n      v-if=\"$slots.icon\"\n      aria-hidden=\"true\"\n      class=\"mb-2 text-muted-foreground [&_svg]:h-4 [&_svg]:w-4\"\n    >\n      <slot name=\"icon\" />\n    </div>\n    <p class=\"text-small text-muted-foreground\">{{ label }}</p>\n    <div class=\"flex items-baseline gap-1.5\">\n      <span class=\"text-2xl font-semibold tracking-tight text-foreground\">\n        {{ value }}\n      </span>\n      <span\n        v-if=\"trend\"\n        :class=\"\n          cn('inline-flex items-center gap-0.5 text-small font-medium', {\n            'text-success-text': trend === 'up',\n            'text-destructive-text': trend === 'down',\n            'text-muted-foreground': trend === 'flat',\n          })\n        \"\n      >\n        <!-- Up arrow: a single upward stroke with a chevron head. -->\n        <svg\n          v-if=\"trend === 'up'\"\n          class=\"inline h-3 w-3\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M6 2v8M3 5l3-3 3 3\" />\n        </svg>\n        <!-- Down arrow: a single downward stroke with a chevron head. -->\n        <svg\n          v-else-if=\"trend === 'down'\"\n          class=\"inline h-3 w-3\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M6 10V2M3 7l3 3 3-3\" />\n        </svg>\n        <!-- Flat: an em dash rather than a horizontal arrow — a horizontal\n             arrow at this size reads as a minus sign or a separator. -->\n        <span v-else aria-hidden=\"true\">&mdash;</span>\n        <span v-if=\"trendValue\">{{ trendValue }}</span>\n      </span>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CE,OAAA,UAAA,GAAA,mBAuDM,OAAA,EAvDA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,6CAAA,CAAA,EAAA,GAAA;IAILA,KAAAA,OAAO,QADf,UAAA,GAAA,mBAMM,OANN,YAMM,CADJ,WAAoB,KAAA,QAAA,MAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEtB,mBAA2D,KAA3D,YAA2D,gBAAZ,QAAA,KAAK,GAAA,CAAA;IACpD,mBA2CM,OA3CN,YA2CM,CA1CJ,mBAEO,QAFP,YAEO,gBADF,QAAA,KAAK,GAAA,CAAA,GAGF,QAAA,SADR,UAAA,GAAA,mBAsCO,QAAA;;KApCJ,OAAK,eAAa,MAAA,EAAA,CAAE,CAAA,2DAAA;MAA+F,qBAAA,QAAA,UAAK;MAAgD,yBAAA,QAAA,UAAK;MAAkD,yBAAA,QAAA,UAAK;;IAU7N,GAAA,CAAA,QAAA,UAAK,QADb,UAAA,GAAA,mBAUM,OAVN,YAUM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAA+B,QAAA,EAAzB,GAAE,qBAAoB,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA,KAIjB,QAAA,UAAK,UADlB,UAAA,GAAA,mBAUM,OAVN,YAUM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAAgC,QAAA,EAA1B,GAAE,sBAAqB,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA,MAI/B,UAAA,GAAA,mBAA8C,QAA9C,YAAgC,GAAO,IAC3B,QAAA,cAAZ,UAAA,GAAA,mBAA+C,QAAA,YAAA,gBAApB,QAAA,UAAU,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}
+{"version":3,"file":"MetricCard.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../packages/blocks/metric-card/src/MetricCard.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * MetricCard — one KPI on a dashboard: a compact surface carrying a metric\n * value, its label, and an optional trend arrow. The shape is fixed (icon →\n * label → value + trend) because a hand-rolled metric row drifts from call\n * site to call site — the icon above the label here, the trend on a second\n * line there — and this block pins one layout so the row scans left-to-right.\n *\n * The trend is always inline with the value, never a separate line. A trend\n * on its own row reads as a second metric; sharing the value line reads as\n * context for that metric, which is what it is. The arrows are inline SVGs\n * (12px) rather than an icon-library dependency: a trend indicator is a\n * single directional glyph, and pulling in an icon package for three paths\n * is weight the host did not ask for.\n *\n * Colour encodes direction but is never the only signal: the arrow shape\n * distinguishes up from down even without hue, and \"flat\" is an em dash\n * rather than a horizontal arrow that could be mistaken for a minus sign or\n * a separator. `text-success-text` / `text-destructive-text` / `text-muted-foreground`\n * are the semantic tokens rather than fixed greens and reds, so the card\n * adapts to whatever the theme maps those to.\n */\nexport type MetricCardTrend = \"up\" | \"down\" | \"flat\";\n</script>\n\n<script setup lang=\"ts\">\nimport { watchEffect } from \"vue\";\nimport Skeleton from \"@ecoma-io/loom-skeleton\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\nconst props = defineProps<{\n  /** The metric value — a formatted string or number the host has already\n   *  localised (e.g. \"1,234\", \"98.5%\", \"$42k\"). Raw numbers are not\n   *  formatted by the card; the host owns formatting so the same value\n   *  can be \"$42k\" in one place and \"42,000\" in another. Optional only\n   *  while `loading`. */\n  value?: string | number;\n  /** What the metric measures — always shown. */\n  label: string;\n  /** Direction of change. When absent, no trend indicator is rendered. */\n  trend?: MetricCardTrend;\n  /** The trend magnitude (e.g. \"+12.5%\", \"-3.2%\"). Shown only when `trend`\n   *  is also provided; a magnitude with no direction has no meaning. */\n  trendValue?: string;\n  /** Context line under the value row — a period, a comparison base. */\n  description?: string;\n  /**\n   * Renders the label and value as Skeleton placeholders sized to the real\n   * layout, so the card keeps its height and does not reflow when data\n   * lands.\n   */\n  loading?: boolean;\n}>();\n\n// `value` went optional for the loading state; this keeps a forgotten value\n// from landing as an empty heading once data arrives.\nwatchEffect(() => {\n  if (!props.loading && props.value === undefined) {\n    console.warn(\n      \"[MetricCard] no `value` given and `loading` is false — the card renders an empty metric.\",\n    );\n  }\n});\n</script>\n\n<template>\n  <div :aria-busy=\"loading || undefined\" :class=\"cn('rounded-lg border border-border bg-card p-4')\">\n    <!-- Decorative icon — hidden from assistive tech because the label and\n         value already carry the metric's meaning. -->\n    <div\n      v-if=\"$slots.icon\"\n      aria-hidden=\"true\"\n      class=\"mb-2 text-muted-foreground [&_svg]:h-4 [&_svg]:w-4\"\n    >\n      <slot name=\"icon\" />\n    </div>\n    <!-- Loading keeps the card's height by sizing each placeholder to the\n         row it stands in for — a single generic bar would let the value\n         land with a jolt. aria-hidden pairs with the parent's own\n         aria-busy below. -->\n    <template v-if=\"loading\">\n      <Skeleton variant=\"text\" class=\"mb-2 h-3 w-20\" />\n      <div class=\"flex items-baseline gap-1.5\">\n        <Skeleton variant=\"text\" class=\"h-7 w-24\" />\n      </div>\n    </template>\n    <template v-else>\n      <p class=\"text-small text-muted-foreground\">{{ label }}</p>\n      <div class=\"flex items-baseline gap-1.5\">\n        <!-- `text-heading`, not a hand-assembled `text-2xl font-semibold\n           tracking-tight`: the named rung is near-parity with that stack\n           (1.5rem, weight 600) by design, and composing it here meant the KPI\n           drifted silently if the scale ever moved. The two real deltas are\n           deliberate — letter-spacing slackens from tight's −0.025em to the\n           heading rung's −0.01em, and the line-height comes down to 1.2 —\n           both invisible on a single baseline row like this one. -->\n        <span class=\"text-heading text-foreground\">\n          {{ value }}\n        </span>\n        <span\n          v-if=\"trend\"\n          :class=\"\n            cn('inline-flex items-center gap-0.5 text-small font-medium', {\n              'text-success-text': trend === 'up',\n              'text-destructive-text': trend === 'down',\n              'text-muted-foreground': trend === 'flat',\n            })\n          \"\n        >\n          <!-- Up arrow: a single upward stroke with a chevron head. -->\n          <svg\n            v-if=\"trend === 'up'\"\n            class=\"inline h-3 w-3\"\n            viewBox=\"0 0 12 12\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M6 2v8M3 5l3-3 3 3\" />\n          </svg>\n          <!-- Down arrow: a single downward stroke with a chevron head. -->\n          <svg\n            v-else-if=\"trend === 'down'\"\n            class=\"inline h-3 w-3\"\n            viewBox=\"0 0 12 12\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M6 10V2M3 7l3 3 3-3\" />\n          </svg>\n          <!-- Flat: an em dash rather than a horizontal arrow — a horizontal\n             arrow at this size reads as a minus sign or a separator. -->\n          <span v-else aria-hidden=\"true\">&mdash;</span>\n          <span v-if=\"trendValue\">{{ trendValue }}</span>\n        </span>\n      </div>\n      <p v-if=\"description\" class=\"mt-1 text-small text-muted-foreground\">\n        {{ description }}\n      </p>\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BA,MAAM,QAAQ;EA0Bd,kBAAkB;GAChB,IAAI,CAAC,MAAM,WAAW,MAAM,UAAU,KAAA,GACpC,QAAQ,KACN,0FACF;EAEJ,CAAC;;GAIC,OAAA,UAAA,GAAA,mBA6EM,OAAA;IA7EA,aAAW,QAAA,WAAW,KAAA;IAAY,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,6CAAA,CAAA;GAIvCA,GAAAA,CAAAA,KAAAA,OAAO,QADf,UAAA,GAAA,mBAMM,OANN,YAMM,CADJ,WAAoB,KAAA,QAAA,MAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAMN,QAAA,WAAhB,UAAA,GAAA,mBAKW,UAAA,EAAA,KAAA,EAAA,GAAA,CAJT,YAAiD,MAAA,gBAAA,GAAA;IAAvC,SAAQ;IAAO,OAAM;GAC/B,CAAA,GAAA,mBAEM,OAFN,YAEM,CADJ,YAA4C,MAAA,gBAAA,GAAA;IAAlC,SAAQ;IAAO,OAAM;GAGnC,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,MAAA,UAAA,GAAA,mBAwDW,UAAA,EAAA,KAAA,EAAA,GAAA;IAvDT,mBAA2D,KAA3D,YAA2D,gBAAZ,QAAA,KAAK,GAAA,CAAA;IACpD,mBAkDM,OAlDN,YAkDM,CA1CJ,mBAEO,QAFP,YAEO,gBADF,QAAA,KAAK,GAAA,CAAA,GAGF,QAAA,SADR,UAAA,GAAA,mBAsCO,QAAA;;KApCJ,OAAK,eAAe,MAAA,EAAA,CAAE,CAAA,2DAAA;MAAiG,qBAAA,QAAA,UAAK;MAAkD,yBAAA,QAAA,UAAK;MAAoD,yBAAA,QAAA,UAAK;;IAUrO,GAAA,CAAA,QAAA,UAAK,QADb,UAAA,GAAA,mBAUM,OAVN,YAUM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAA+B,QAAA,EAAzB,GAAE,qBAAoB,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA,KAIjB,QAAA,UAAK,UADlB,UAAA,GAAA,mBAUM,OAVN,YAUM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAAgC,QAAA,EAA1B,GAAE,sBAAqB,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA,MAI/B,UAAA,GAAA,mBAA8C,QAA9C,YAAgC,GAAO,IAC3B,QAAA,cAAZ,UAAA,GAAA,mBAA+C,QAAA,aAAA,gBAApB,QAAA,UAAU,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA;IAGhC,QAAA,eAAT,UAAA,GAAA,mBAEI,KAFJ,aAEI,gBADC,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

package/dist/packages/blocks/title-bar/src/TitleBar.vue.d.ts

@@ -1,4 +1,4 @@
-import { type WindowControlsLabels } from "@ecoma-io/loom-window-controls";
+import { type WindowControlsLabels } from "../../../primitives/window-controls/src/index";
 /**
  * TitleBar — a desktop app's custom window chrome (a block: composed from
  * primitives, domain-aware, but still presentational). Layout:
@@ -19,8 +19,8 @@ import { type WindowControlsLabels } from "@ecoma-io/loom-window-controls";
  * the brand cluster shifts right to leave room for the native traffic-light
  * buttons, and WindowControls renders nothing (the OS owns those buttons).
  */
-import type { MenubarMenu } from "@ecoma-io/loom-menubar";
-import type { WindowPlatform } from "@ecoma-io/loom-window-controls";
+import type { MenubarMenu } from "../../../primitives/menubar/src/index";
+import type { WindowPlatform } from "../../../primitives/window-controls/src/index";
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{

package/dist/packages/blocks/toast-stack/src/ToastStack.vue.d.ts

@@ -1,6 +1,6 @@
-import { type LabelOverrides } from "@ecoma-io/loom-labels";
-import { type ToastLabels } from "@ecoma-io/loom-toast";
-import type { ToastVariant } from "@ecoma-io/loom-toast";
+import { type LabelOverrides } from "../../../labels/src/index";
+import { type ToastLabels } from "../../../primitives/toast/src/index";
+import type { ToastVariant } from "../../../primitives/toast/src/index";
 /** One entry of a host-owned toast queue, rendered by `ToastStack`. */
 export interface ToastStackItem {
     readonly id: string | number;

package/dist/packages/composition/scroll-reel/src/ScrollReel.js

@@ -1,7 +1,7 @@
-import ScrollReel_vue_vue_type_script_setup_true_lang_default, { gapClass, snapClass } from "./ScrollReel.vue_vue_type_script_setup_true_lang.js";
+import ScrollReel_vue_vue_type_script_setup_true_lang_default, { SCROLL_REEL_LABELS, gapClass, snapClass } from "./ScrollReel.vue_vue_type_script_setup_true_lang.js";
 //#region packages/composition/scroll-reel/src/ScrollReel.vue
 var ScrollReel_default = ScrollReel_vue_vue_type_script_setup_true_lang_default;
 //#endregion
-export { ScrollReel_default as default, gapClass, snapClass };
+export { SCROLL_REEL_LABELS, ScrollReel_default as default, gapClass, snapClass };
 
 //# sourceMappingURL=ScrollReel.js.map

package/dist/packages/composition/scroll-reel/src/ScrollReel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollReel.js","names":[],"sources":["../../../../../packages/composition/scroll-reel/src/ScrollReel.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * ScrollReel — horizontal scrolling strip with scroll-snap.\n *\n * A touch-friendly, keyboard-navigable horizontal scroll container with\n * optional scroll-snap alignment. Arrow keys scroll to the next or previous\n * snap point; the `Home` and `End` keys jump to the start or end of the\n * strip.\n *\n * A ScrollReel is a component, not `overflow-x-auto snap-x snap-mandatory`,\n * because keyboard accessibility for scroll-snap requires JavaScript (arrow\n * keys must find the next snap-aligned child and scroll it into view), and\n * the gap tightens one step below `sm` like Stack and DashboardGrid.\n */\nexport type ScrollReelSnap = \"start\" | \"center\" | \"end\" | \"none\";\n\nexport type ScrollReelGap = \"sm\" | \"md\" | \"lg\";\n\nconst snapClass: Record<ScrollReelSnap, string> = {\n  start: \"snap-x snap-mandatory snap-start\",\n  center: \"snap-x snap-mandatory snap-center\",\n  end: \"snap-x snap-mandatory snap-end\",\n  // `none` means no snap alignment — items scroll freely.\n  none: \"\",\n} as const;\n\nconst gapClass: Record<ScrollReelGap, string> = {\n  sm: \"gap-2 sm:gap-3\",\n  md: \"gap-3 sm:gap-4\",\n  lg: \"gap-4 sm:gap-6\",\n} as const;\n\nexport { snapClass, gapClass };\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Scroll-snap alignment. \"none\" disables snap entirely. */\n    snap?: ScrollReelSnap;\n    /** Gap between items — mirrors Stack's scale. Tightens one notch below `sm`. */\n    gap?: ScrollReelGap;\n  }>(),\n  { snap: \"start\", gap: \"md\" },\n);\n\nconst reel = ref<HTMLDivElement | null>(null);\n\n/**\n * Keyboard navigation for scroll-snap: arrow keys scroll to the next or\n * previous snap-aligned child. Without this, the browser's default arrow-key\n * behaviour scrolls by a fixed pixel amount that rarely aligns with snap\n * points, leaving the strip between two items.\n */\nfunction onKeydown(event: KeyboardEvent) {\n  const el = reel.value;\n  if (!el) return;\n\n  const direction = event.key === \"ArrowRight\" ? 1 : event.key === \"ArrowLeft\" ? -1 : 0;\n  if (direction === 0 && event.key !== \"Home\" && event.key !== \"End\") return;\n\n  event.preventDefault();\n\n  if (event.key === \"Home\") {\n    el.scrollTo({ left: 0, behavior: \"smooth\" });\n    return;\n  }\n  if (event.key === \"End\") {\n    el.scrollTo({ left: el.scrollWidth, behavior: \"smooth\" });\n    return;\n  }\n\n  // Find the next snap-aligned child in the scroll direction.\n  const children = [...el.children] as HTMLElement[];\n  const scrollEdge = direction === 1 ? el.scrollLeft + el.clientWidth : el.scrollLeft;\n\n  for (const child of direction === 1 ? children : children.reverse()) {\n    const childEdge = direction === 1 ? child.offsetLeft : child.offsetLeft + child.offsetWidth;\n    const isNext = direction === 1 ? childEdge > scrollEdge - 1 : childEdge < scrollEdge + 1;\n    if (isNext) {\n      child.scrollIntoView({ behavior: \"smooth\", block: \"nearest\", inline: \"start\" });\n      break;\n    }\n  }\n}\n</script>\n\n<template>\n  <!-- `role=\"region\"` + `tabindex=\"0\"` + `aria-label` make this a named,\n    focusable landmark region. The keyboard handler is what makes the\n    scroll-snap strip navigable by arrow keys — a genuine interaction on\n    a genuinely interactive element. The rule does not account for\n    non-interactive ARIA roles with an explicit tabindex. -->\n  <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n  <div\n    ref=\"reel\"\n    class=\"overflow-x-auto\"\n    :class=\"cn('flex flex-row', snapClass[snap], gapClass[gap])\"\n    tabindex=\"0\"\n    role=\"region\"\n    aria-label=\"Scrollable content\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScrollReel.js","names":[],"sources":["../../../../../packages/composition/scroll-reel/src/ScrollReel.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * ScrollReel — horizontal scrolling strip with scroll-snap.\n *\n * A touch-friendly, keyboard-navigable horizontal scroll container with\n * optional scroll-snap alignment. Arrow keys scroll to the next or previous\n * snap point; the `Home` and `End` keys jump to the start or end of the\n * strip.\n *\n * A ScrollReel is a component, not `overflow-x-auto snap-x snap-mandatory`,\n * because keyboard accessibility for scroll-snap requires JavaScript (arrow\n * keys must find the next snap-aligned child and scroll it into view), and\n * the gap tightens one step below `sm` like Stack and DashboardGrid.\n */\nexport type ScrollReelSnap = \"start\" | \"center\" | \"end\" | \"none\";\n\nexport type ScrollReelGap = \"sm\" | \"md\" | \"lg\";\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. The type itself lives in the\n * labels registry (`ScrollReelLabels`) like every other slot's, so\n * `provideLoomLabels({ scrollReel: … })` reaches this component exactly as\n * it reaches every primitive — composition sits above labels in the layer\n * direction, and a host localising one reel should not have to learn a\n * second seam to do it.\n */\nexport const SCROLL_REEL_LABELS: ScrollReelLabels = {\n  region: \"Scrollable content\",\n};\n\nconst snapClass: Record<ScrollReelSnap, string> = {\n  start: \"snap-x snap-mandatory snap-start\",\n  center: \"snap-x snap-mandatory snap-center\",\n  end: \"snap-x snap-mandatory snap-end\",\n  // `none` means no snap alignment — items scroll freely.\n  none: \"\",\n} as const;\n\nconst gapClass: Record<ScrollReelGap, string> = {\n  sm: \"gap-2 sm:gap-3\",\n  md: \"gap-3 sm:gap-4\",\n  lg: \"gap-4 sm:gap-6\",\n} as const;\n\nexport { snapClass, gapClass };\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { cn, smoothScrollBehavior } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides, type ScrollReelLabels } from \"@ecoma-io/loom-labels\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** Scroll-snap alignment. \"none\" disables snap entirely. */\n    snap?: ScrollReelSnap;\n    /** Gap between items — mirrors Stack's scale. Tightens one notch below `sm`. */\n    gap?: ScrollReelGap;\n    /**\n     * Names for what the reel says out loud, as any subset of\n     * `ScrollReelLabels` — the per-instance correction over\n     * `SCROLL_REEL_LABELS`, in the same shape a primitive's `labels` prop\n     * takes.\n     */\n    labels?: LabelOverrides<ScrollReelLabels>;\n  }>(),\n  { snap: \"start\", gap: \"md\" },\n);\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves (own prop, then the host vocabulary from `provideLoomLabels`, then\n// these English defaults), and a template reading the raw prop would be\n// reading the overrides rather than the answer.\nconst text = useLabels(\"scrollReel\", SCROLL_REEL_LABELS, () => props.labels);\n\nconst reel = ref<HTMLDivElement | null>(null);\n\n// The reduced-motion softening lives in core (`smoothScrollBehavior`): an\n// explicit `\"smooth\"` in a scrollTo dictionary overrides the stylesheet's\n// kill-switch, so the question has to be answered at the call site — and\n// Carousel asks it too, which is why the answer is shared rather than owned.\nconst scrollBehavior = smoothScrollBehavior;\n\n/**\n * Keyboard navigation for scroll-snap: arrow keys scroll to the next or\n * previous snap-aligned child. Without this, the browser's default arrow-key\n * behaviour scrolls by a fixed pixel amount that rarely aligns with snap\n * points, leaving the strip between two items.\n */\nfunction onKeydown(event: KeyboardEvent) {\n  const el = reel.value;\n  if (!el) return;\n\n  // A keypress inside a nested editable (search field, combobox, contenteditable\n  // chip) bubbles up to this listener: the arrows and Home/End are the caret's\n  // keys there, not the reel's. Step aside so the text control keeps them —\n  // the same boundary Toolbar draws at its own listener.\n  if ((event.target as HTMLElement).closest(\"input, select, textarea, [contenteditable]\")) return;\n\n  const direction = event.key === \"ArrowRight\" ? 1 : event.key === \"ArrowLeft\" ? -1 : 0;\n  if (direction === 0 && event.key !== \"Home\" && event.key !== \"End\") return;\n\n  event.preventDefault();\n\n  const behavior = scrollBehavior();\n  if (event.key === \"Home\") {\n    el.scrollTo({ left: 0, behavior });\n    return;\n  }\n  if (event.key === \"End\") {\n    el.scrollTo({ left: el.scrollWidth, behavior });\n    return;\n  }\n\n  // Find the next snap-aligned child in the scroll direction.\n  const children = [...el.children] as HTMLElement[];\n  const scrollEdge = direction === 1 ? el.scrollLeft + el.clientWidth : el.scrollLeft;\n\n  for (const child of direction === 1 ? children : children.reverse()) {\n    const childEdge = direction === 1 ? child.offsetLeft : child.offsetLeft + child.offsetWidth;\n    const isNext = direction === 1 ? childEdge > scrollEdge - 1 : childEdge < scrollEdge + 1;\n    if (isNext) {\n      child.scrollIntoView({ behavior, block: \"nearest\", inline: \"start\" });\n      break;\n    }\n  }\n}\n</script>\n\n<template>\n  <!-- `role=\"region\"` + `tabindex=\"0\"` + an accessible name make this a named,\n    focusable landmark region. The keyboard handler is what makes the\n    scroll-snap strip navigable by arrow keys — a genuine interaction on\n    a genuinely interactive element. The rule does not account for\n    non-interactive ARIA roles with an explicit tabindex. -->\n  <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n  <div\n    ref=\"reel\"\n    class=\"overflow-x-auto\"\n    :class=\"cn('flex flex-row', snapClass[snap], gapClass[gap])\"\n    tabindex=\"0\"\n    role=\"region\"\n    :aria-label=\"text.region\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/composition/scroll-reel/src/ScrollReel.vue.d.ts

@@ -1,3 +1,4 @@
+import { type LabelOverrides, type ScrollReelLabels } from "../../../labels/src/index";
 /**
  * ScrollReel — horizontal scrolling strip with scroll-snap.
  *
@@ -13,6 +14,17 @@
  */
 export type ScrollReelSnap = "start" | "center" | "end" | "none";
 export type ScrollReelGap = "sm" | "md" | "lg";
+/**
+ * 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. The type itself lives in the
+ * labels registry (`ScrollReelLabels`) like every other slot's, so
+ * `provideLoomLabels({ scrollReel: … })` reaches this component exactly as
+ * it reaches every primitive — composition sits above labels in the layer
+ * direction, and a host localising one reel should not have to learn a
+ * second seam to do it.
+ */
+export declare const SCROLL_REEL_LABELS: ScrollReelLabels;
 declare const snapClass: Record<ScrollReelSnap, string>;
 declare const gapClass: Record<ScrollReelGap, string>;
 export { snapClass, gapClass };
@@ -23,11 +35,25 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     snap?: ScrollReelSnap;
     /** Gap between items — mirrors Stack's scale. Tightens one notch below `sm`. */
     gap?: ScrollReelGap;
+    /**
+     * Names for what the reel says out loud, as any subset of
+     * `ScrollReelLabels` — the per-instance correction over
+     * `SCROLL_REEL_LABELS`, in the same shape a primitive's `labels` prop
+     * takes.
+     */
+    labels?: LabelOverrides<ScrollReelLabels>;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /** Scroll-snap alignment. "none" disables snap entirely. */
     snap?: ScrollReelSnap;
     /** Gap between items — mirrors Stack's scale. Tightens one notch below `sm`. */
     gap?: ScrollReelGap;
+    /**
+     * Names for what the reel says out loud, as any subset of
+     * `ScrollReelLabels` — the per-instance correction over
+     * `SCROLL_REEL_LABELS`, in the same shape a primitive's `labels` prop
+     * takes.
+     */
+    labels?: LabelOverrides<ScrollReelLabels>;
 }> & Readonly<{}>, {
     gap: ScrollReelGap;
     snap: ScrollReelSnap;

package/dist/packages/composition/scroll-reel/src/ScrollReel.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,22 @@
 import { cn } from "../../../core/src/cn.js";
+import { smoothScrollBehavior } from "../../../core/src/motion.js";
 import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
 import { createElementBlock, defineComponent, normalizeClass, openBlock, ref, renderSlot, unref } from "vue";
 //#region packages/composition/scroll-reel/src/ScrollReel.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+/**
+* 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. The type itself lives in the
+* labels registry (`ScrollReelLabels`) like every other slot's, so
+* `provideLoomLabels({ scrollReel: … })` reaches this component exactly as
+* it reaches every primitive — composition sits above labels in the layer
+* direction, and a host localising one reel should not have to learn a
+* second seam to do it.
+*/
+var SCROLL_REEL_LABELS = { region: "Scrollable content" };
 var snapClass = {
 	start: "snap-x snap-mandatory snap-start",
 	center: "snap-x snap-mandatory snap-center",
@@ -17,10 +32,14 @@ var ScrollReel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 	__name: "ScrollReel",
 	props: {
 		snap: { default: "start" },
-		gap: { default: "md" }
+		gap: { default: "md" },
+		labels: {}
 	},
 	setup(__props) {
+		const props = __props;
+		const text = useLabels("scrollReel", SCROLL_REEL_LABELS, () => props.labels);
 		const reel = ref(null);
+		const scrollBehavior = smoothScrollBehavior;
 		/**
 		* Keyboard navigation for scroll-snap: arrow keys scroll to the next or
 		* previous snap-aligned child. Without this, the browser's default arrow-key
@@ -30,20 +49,22 @@ var ScrollReel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		function onKeydown(event) {
 			const el = reel.value;
 			if (!el) return;
+			if (event.target.closest("input, select, textarea, [contenteditable]")) return;
 			const direction = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
 			if (direction === 0 && event.key !== "Home" && event.key !== "End") return;
 			event.preventDefault();
+			const behavior = scrollBehavior();
 			if (event.key === "Home") {
 				el.scrollTo({
 					left: 0,
-					behavior: "smooth"
+					behavior
 				});
 				return;
 			}
 			if (event.key === "End") {
 				el.scrollTo({
 					left: el.scrollWidth,
-					behavior: "smooth"
+					behavior
 				});
 				return;
 			}
@@ -53,7 +74,7 @@ var ScrollReel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				const childEdge = direction === 1 ? child.offsetLeft : child.offsetLeft + child.offsetWidth;
 				if (direction === 1 ? childEdge > scrollEdge - 1 : childEdge < scrollEdge + 1) {
 					child.scrollIntoView({
-						behavior: "smooth",
+						behavior,
 						block: "nearest",
 						inline: "start"
 					});
@@ -68,13 +89,13 @@ var ScrollReel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				class: normalizeClass(["overflow-x-auto", unref(cn)("flex flex-row", snapClass[__props.snap], gapClass[__props.gap])]),
 				tabindex: "0",
 				role: "region",
-				"aria-label": "Scrollable content",
+				"aria-label": unref(text).region,
 				onKeydown
-			}, [renderSlot(_ctx.$slots, "default")], 34);
+			}, [renderSlot(_ctx.$slots, "default")], 42, _hoisted_1);
 		};
 	}
 });
 //#endregion
-export { ScrollReel_vue_vue_type_script_setup_true_lang_default as default, gapClass, snapClass };
+export { SCROLL_REEL_LABELS, ScrollReel_vue_vue_type_script_setup_true_lang_default as default, gapClass, snapClass };
 
 //# sourceMappingURL=ScrollReel.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/composition/scroll-reel/src/ScrollReel.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollReel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/composition/scroll-reel/src/ScrollReel.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * ScrollReel — horizontal scrolling strip with scroll-snap.\n *\n * A touch-friendly, keyboard-navigable horizontal scroll container with\n * optional scroll-snap alignment. Arrow keys scroll to the next or previous\n * snap point; the `Home` and `End` keys jump to the start or end of the\n * strip.\n *\n * A ScrollReel is a component, not `overflow-x-auto snap-x snap-mandatory`,\n * because keyboard accessibility for scroll-snap requires JavaScript (arrow\n * keys must find the next snap-aligned child and scroll it into view), and\n * the gap tightens one step below `sm` like Stack and DashboardGrid.\n */\nexport type ScrollReelSnap = \"start\" | \"center\" | \"end\" | \"none\";\n\nexport type ScrollReelGap = \"sm\" | \"md\" | \"lg\";\n\nconst snapClass: Record<ScrollReelSnap, string> = {\n  start: \"snap-x snap-mandatory snap-start\",\n  center: \"snap-x snap-mandatory snap-center\",\n  end: \"snap-x snap-mandatory snap-end\",\n  // `none` means no snap alignment — items scroll freely.\n  none: \"\",\n} as const;\n\nconst gapClass: Record<ScrollReelGap, string> = {\n  sm: \"gap-2 sm:gap-3\",\n  md: \"gap-3 sm:gap-4\",\n  lg: \"gap-4 sm:gap-6\",\n} as const;\n\nexport { snapClass, gapClass };\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Scroll-snap alignment. \"none\" disables snap entirely. */\n    snap?: ScrollReelSnap;\n    /** Gap between items — mirrors Stack's scale. Tightens one notch below `sm`. */\n    gap?: ScrollReelGap;\n  }>(),\n  { snap: \"start\", gap: \"md\" },\n);\n\nconst reel = ref<HTMLDivElement | null>(null);\n\n/**\n * Keyboard navigation for scroll-snap: arrow keys scroll to the next or\n * previous snap-aligned child. Without this, the browser's default arrow-key\n * behaviour scrolls by a fixed pixel amount that rarely aligns with snap\n * points, leaving the strip between two items.\n */\nfunction onKeydown(event: KeyboardEvent) {\n  const el = reel.value;\n  if (!el) return;\n\n  const direction = event.key === \"ArrowRight\" ? 1 : event.key === \"ArrowLeft\" ? -1 : 0;\n  if (direction === 0 && event.key !== \"Home\" && event.key !== \"End\") return;\n\n  event.preventDefault();\n\n  if (event.key === \"Home\") {\n    el.scrollTo({ left: 0, behavior: \"smooth\" });\n    return;\n  }\n  if (event.key === \"End\") {\n    el.scrollTo({ left: el.scrollWidth, behavior: \"smooth\" });\n    return;\n  }\n\n  // Find the next snap-aligned child in the scroll direction.\n  const children = [...el.children] as HTMLElement[];\n  const scrollEdge = direction === 1 ? el.scrollLeft + el.clientWidth : el.scrollLeft;\n\n  for (const child of direction === 1 ? children : children.reverse()) {\n    const childEdge = direction === 1 ? child.offsetLeft : child.offsetLeft + child.offsetWidth;\n    const isNext = direction === 1 ? childEdge > scrollEdge - 1 : childEdge < scrollEdge + 1;\n    if (isNext) {\n      child.scrollIntoView({ behavior: \"smooth\", block: \"nearest\", inline: \"start\" });\n      break;\n    }\n  }\n}\n</script>\n\n<template>\n  <!-- `role=\"region\"` + `tabindex=\"0\"` + `aria-label` make this a named,\n    focusable landmark region. The keyboard handler is what makes the\n    scroll-snap strip navigable by arrow keys — a genuine interaction on\n    a genuinely interactive element. The rule does not account for\n    non-interactive ARIA roles with an explicit tabindex. -->\n  <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n  <div\n    ref=\"reel\"\n    class=\"overflow-x-auto\"\n    :class=\"cn('flex flex-row', snapClass[snap], gapClass[gap])\"\n    tabindex=\"0\"\n    role=\"region\"\n    aria-label=\"Scrollable content\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;AAkBA,IAAM,YAA4C;CAChD,OAAO;CACP,QAAQ;CACR,KAAK;CAEL,MAAM;AACR;AAEA,IAAM,WAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;EAmBA,MAAM,OAAO,IAA2B,IAAI;;;;;;;EAQ5C,SAAS,UAAU,OAAsB;GACvC,MAAM,KAAK,KAAK;GAChB,IAAI,CAAC,IAAI;GAET,MAAM,YAAY,MAAM,QAAQ,eAAe,IAAI,MAAM,QAAQ,cAAc,KAAK;GACpF,IAAI,cAAc,KAAK,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAAO;GAEpE,MAAM,eAAe;GAErB,IAAI,MAAM,QAAQ,QAAQ;IACxB,GAAG,SAAS;KAAE,MAAM;KAAG,UAAU;IAAS,CAAC;IAC3C;GACF;GACA,IAAI,MAAM,QAAQ,OAAO;IACvB,GAAG,SAAS;KAAE,MAAM,GAAG;KAAa,UAAU;IAAS,CAAC;IACxD;GACF;GAGA,MAAM,WAAW,CAAC,GAAG,GAAG,QAAQ;GAChC,MAAM,aAAa,cAAc,IAAI,GAAG,aAAa,GAAG,cAAc,GAAG;GAEzE,KAAK,MAAM,SAAS,cAAc,IAAI,WAAW,SAAS,QAAQ,GAAG;IACnE,MAAM,YAAY,cAAc,IAAI,MAAM,aAAa,MAAM,aAAa,MAAM;IAEhF,IADe,cAAc,IAAI,YAAY,aAAa,IAAI,YAAY,aAAa,GAC3E;KACV,MAAM,eAAe;MAAE,UAAU;MAAU,OAAO;MAAW,QAAQ;KAAQ,CAAC;KAC9E;IACF;GACF;EACF;;GAUE,OAAA,UAAA,GAAA,mBAUM,OAAA;IATA,SAAA;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,mBACE,MAAA,EAAA,CAAE,CAAA,iBAAkB,UAAU,QAAA,OAAO,SAAS,QAAA,IAAG,CAAA,CAAA;IACzD,UAAS;IACT,MAAK;IACL,cAAW;IACD;GAEV,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA"}
+{"version":3,"file":"ScrollReel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/composition/scroll-reel/src/ScrollReel.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * ScrollReel — horizontal scrolling strip with scroll-snap.\n *\n * A touch-friendly, keyboard-navigable horizontal scroll container with\n * optional scroll-snap alignment. Arrow keys scroll to the next or previous\n * snap point; the `Home` and `End` keys jump to the start or end of the\n * strip.\n *\n * A ScrollReel is a component, not `overflow-x-auto snap-x snap-mandatory`,\n * because keyboard accessibility for scroll-snap requires JavaScript (arrow\n * keys must find the next snap-aligned child and scroll it into view), and\n * the gap tightens one step below `sm` like Stack and DashboardGrid.\n */\nexport type ScrollReelSnap = \"start\" | \"center\" | \"end\" | \"none\";\n\nexport type ScrollReelGap = \"sm\" | \"md\" | \"lg\";\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. The type itself lives in the\n * labels registry (`ScrollReelLabels`) like every other slot's, so\n * `provideLoomLabels({ scrollReel: … })` reaches this component exactly as\n * it reaches every primitive — composition sits above labels in the layer\n * direction, and a host localising one reel should not have to learn a\n * second seam to do it.\n */\nexport const SCROLL_REEL_LABELS: ScrollReelLabels = {\n  region: \"Scrollable content\",\n};\n\nconst snapClass: Record<ScrollReelSnap, string> = {\n  start: \"snap-x snap-mandatory snap-start\",\n  center: \"snap-x snap-mandatory snap-center\",\n  end: \"snap-x snap-mandatory snap-end\",\n  // `none` means no snap alignment — items scroll freely.\n  none: \"\",\n} as const;\n\nconst gapClass: Record<ScrollReelGap, string> = {\n  sm: \"gap-2 sm:gap-3\",\n  md: \"gap-3 sm:gap-4\",\n  lg: \"gap-4 sm:gap-6\",\n} as const;\n\nexport { snapClass, gapClass };\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { cn, smoothScrollBehavior } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides, type ScrollReelLabels } from \"@ecoma-io/loom-labels\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** Scroll-snap alignment. \"none\" disables snap entirely. */\n    snap?: ScrollReelSnap;\n    /** Gap between items — mirrors Stack's scale. Tightens one notch below `sm`. */\n    gap?: ScrollReelGap;\n    /**\n     * Names for what the reel says out loud, as any subset of\n     * `ScrollReelLabels` — the per-instance correction over\n     * `SCROLL_REEL_LABELS`, in the same shape a primitive's `labels` prop\n     * takes.\n     */\n    labels?: LabelOverrides<ScrollReelLabels>;\n  }>(),\n  { snap: \"start\", gap: \"md\" },\n);\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves (own prop, then the host vocabulary from `provideLoomLabels`, then\n// these English defaults), and a template reading the raw prop would be\n// reading the overrides rather than the answer.\nconst text = useLabels(\"scrollReel\", SCROLL_REEL_LABELS, () => props.labels);\n\nconst reel = ref<HTMLDivElement | null>(null);\n\n// The reduced-motion softening lives in core (`smoothScrollBehavior`): an\n// explicit `\"smooth\"` in a scrollTo dictionary overrides the stylesheet's\n// kill-switch, so the question has to be answered at the call site — and\n// Carousel asks it too, which is why the answer is shared rather than owned.\nconst scrollBehavior = smoothScrollBehavior;\n\n/**\n * Keyboard navigation for scroll-snap: arrow keys scroll to the next or\n * previous snap-aligned child. Without this, the browser's default arrow-key\n * behaviour scrolls by a fixed pixel amount that rarely aligns with snap\n * points, leaving the strip between two items.\n */\nfunction onKeydown(event: KeyboardEvent) {\n  const el = reel.value;\n  if (!el) return;\n\n  // A keypress inside a nested editable (search field, combobox, contenteditable\n  // chip) bubbles up to this listener: the arrows and Home/End are the caret's\n  // keys there, not the reel's. Step aside so the text control keeps them —\n  // the same boundary Toolbar draws at its own listener.\n  if ((event.target as HTMLElement).closest(\"input, select, textarea, [contenteditable]\")) return;\n\n  const direction = event.key === \"ArrowRight\" ? 1 : event.key === \"ArrowLeft\" ? -1 : 0;\n  if (direction === 0 && event.key !== \"Home\" && event.key !== \"End\") return;\n\n  event.preventDefault();\n\n  const behavior = scrollBehavior();\n  if (event.key === \"Home\") {\n    el.scrollTo({ left: 0, behavior });\n    return;\n  }\n  if (event.key === \"End\") {\n    el.scrollTo({ left: el.scrollWidth, behavior });\n    return;\n  }\n\n  // Find the next snap-aligned child in the scroll direction.\n  const children = [...el.children] as HTMLElement[];\n  const scrollEdge = direction === 1 ? el.scrollLeft + el.clientWidth : el.scrollLeft;\n\n  for (const child of direction === 1 ? children : children.reverse()) {\n    const childEdge = direction === 1 ? child.offsetLeft : child.offsetLeft + child.offsetWidth;\n    const isNext = direction === 1 ? childEdge > scrollEdge - 1 : childEdge < scrollEdge + 1;\n    if (isNext) {\n      child.scrollIntoView({ behavior, block: \"nearest\", inline: \"start\" });\n      break;\n    }\n  }\n}\n</script>\n\n<template>\n  <!-- `role=\"region\"` + `tabindex=\"0\"` + an accessible name make this a named,\n    focusable landmark region. The keyboard handler is what makes the\n    scroll-snap strip navigable by arrow keys — a genuine interaction on\n    a genuinely interactive element. The rule does not account for\n    non-interactive ARIA roles with an explicit tabindex. -->\n  <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n  <div\n    ref=\"reel\"\n    class=\"overflow-x-auto\"\n    :class=\"cn('flex flex-row', snapClass[snap], gapClass[gap])\"\n    tabindex=\"0\"\n    role=\"region\"\n    :aria-label=\"text.region\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;AA4BA,IAAa,qBAAuC,EAClD,QAAQ,qBACV;AAEA,IAAM,YAA4C;CAChD,OAAO;CACP,QAAQ;CACR,KAAK;CAEL,MAAM;AACR;AAEA,IAAM,WAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;;EAUA,MAAM,QAAQ;EAqBd,MAAM,OAAO,UAAU,cAAc,0BAA0B,MAAM,MAAM;EAE3E,MAAM,OAAO,IAA2B,IAAI;EAM5C,MAAM,iBAAiB;;;;;;;EAQvB,SAAS,UAAU,OAAsB;GACvC,MAAM,KAAK,KAAK;GAChB,IAAI,CAAC,IAAI;GAMT,IAAK,MAAM,OAAuB,QAAQ,4CAA4C,GAAG;GAEzF,MAAM,YAAY,MAAM,QAAQ,eAAe,IAAI,MAAM,QAAQ,cAAc,KAAK;GACpF,IAAI,cAAc,KAAK,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAAO;GAEpE,MAAM,eAAe;GAErB,MAAM,WAAW,eAAe;GAChC,IAAI,MAAM,QAAQ,QAAQ;IACxB,GAAG,SAAS;KAAE,MAAM;KAAG;IAAS,CAAC;IACjC;GACF;GACA,IAAI,MAAM,QAAQ,OAAO;IACvB,GAAG,SAAS;KAAE,MAAM,GAAG;KAAa;IAAS,CAAC;IAC9C;GACF;GAGA,MAAM,WAAW,CAAC,GAAG,GAAG,QAAQ;GAChC,MAAM,aAAa,cAAc,IAAI,GAAG,aAAa,GAAG,cAAc,GAAG;GAEzE,KAAK,MAAM,SAAS,cAAc,IAAI,WAAW,SAAS,QAAQ,GAAG;IACnE,MAAM,YAAY,cAAc,IAAI,MAAM,aAAa,MAAM,aAAa,MAAM;IAEhF,IADe,cAAc,IAAI,YAAY,aAAa,IAAI,YAAY,aAAa,GAC3E;KACV,MAAM,eAAe;MAAE;MAAU,OAAO;MAAW,QAAQ;KAAQ,CAAC;KACpE;IACF;GACF;EACF;;GAUE,OAAA,UAAA,GAAA,mBAUM,OAAA;IATA,SAAA;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,mBACE,MAAA,EAAA,CAAE,CAAA,iBAAkB,UAAU,QAAA,OAAO,SAAS,QAAA,IAAG,CAAA,CAAA;IACzD,UAAS;IACT,MAAK;IACJ,cAAY,MAAA,IAAA,CAAI,CAAC;IACR;GAEV,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/packages/composition/scroll-reel/src/index.d.ts

@@ -1,3 +1,4 @@
-export { default } from "./ScrollReel.vue";
+export { default, SCROLL_REEL_LABELS } from "./ScrollReel.vue";
 export type { ScrollReelGap, ScrollReelSnap } from "./ScrollReel.vue";
+export type { ScrollReelLabels } from "../../../labels/src/index";
 //# sourceMappingURL=index.d.ts.map

package/dist/packages/composition/scroll-reel/src/index.js

@@ -1,2 +1,3 @@
+import { SCROLL_REEL_LABELS } from "./ScrollReel.vue_vue_type_script_setup_true_lang.js";
 import ScrollReel_default from "./ScrollReel.js";
-export { ScrollReel_default as default };
+export { SCROLL_REEL_LABELS, ScrollReel_default as default };