@ecoma-io/loom 0.3.0 → 0.5.0

package/dist/packages/primitives/calendar/src/Calendar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,204 @@
+import { cn } from "../../../core/src/cn.js";
+import { optional } from "../../../core/src/props.js";
+import { useSplitAttrs } from "../../../core/src/attrs.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import { getLocalTimeZone as $ad063034c8620db8$export$aa8b41735afcabd2, isToday as $ad063034c8620db8$export$629b0a497aa65267 } from "../../../../node_modules/.pnpm/@internationalized_date@3.12.4/node_modules/@internationalized/date/dist/private/queries.js";
+import { toCalendarDate as $d07e34cce18680fd$export$93522d1a439f3617 } from "../../../../node_modules/.pnpm/@internationalized_date@3.12.4/node_modules/@internationalized/date/dist/private/conversion.js";
+import { parseDate as $58246871e4652552$export$6b862160d295c8e } from "../../../../node_modules/.pnpm/@internationalized_date@3.12.4/node_modules/@internationalized/date/dist/private/string.js";
+import { CALENDAR_PANEL_LABELS, formatFullDay } from "../../../labels/src/date-labels.js";
+import "../../../labels/src/index.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, ref, renderList, toDisplayString, unref, useId, withCtx } from "vue";
+import { ChevronLeft, ChevronRight } from "@lucide/vue";
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot } from "reka-ui";
+//#region packages/primitives/calendar/src/Calendar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-hidden"];
+var _hoisted_2 = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "absolute bottom-1 h-1 w-1 rounded-full bg-primary group-data-[selected]:bg-primary-foreground"
+};
+/**
+* Loom's English for what this surface speaks of its own account — the two
+* pager names and the selection line — co-located so it tree-shakes with the
+* component that renders it, and exported so a host can build a partial
+* vocabulary against the real thing.
+*/
+var CALENDAR_LABELS = {
+	previousMonth: "Previous month",
+	nextMonth: "Next month",
+	chosen: ({ date }) => `${date} chosen.`,
+	cleared: "No date chosen."
+};
+var Calendar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "Calendar",
+	props: {
+		modelValue: {},
+		min: {},
+		max: {},
+		locale: { default: "en" },
+		dir: {},
+		labels: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const text = useLabels("calendar", CALENDAR_LABELS, () => props.labels);
+		const chromeText = useLabels("calendarPanel", CALENDAR_PANEL_LABELS);
+		const { attrs, rest: rootAttrs } = useSplitAttrs();
+		function fromIso(value) {
+			if (!value) return void 0;
+			try {
+				return $58246871e4652552$export$6b862160d295c8e(value);
+			} catch {
+				return;
+			}
+		}
+		function toIso(date) {
+			return $d07e34cce18680fd$export$93522d1a439f3617(date).toString();
+		}
+		const resolvedDir = computed(() => {
+			if (props.dir) return props.dir;
+			if (typeof document === "undefined") return void 0;
+			return document.documentElement.dir === "rtl" ? "rtl" : void 0;
+		});
+		const rootValue = computed(() => optional({
+			modelValue: fromIso(props.modelValue),
+			minValue: fromIso(props.min),
+			maxValue: fromIso(props.max),
+			dir: resolvedDir.value
+		}));
+		const announced = ref(false);
+		function onDateChange(date) {
+			announced.value = true;
+			emit("update:modelValue", date ? toIso(date) : void 0);
+		}
+		function isDateToday(date) {
+			return $ad063034c8620db8$export$629b0a497aa65267(date, $ad063034c8620db8$export$aa8b41735afcabd2());
+		}
+		const headingId = useId();
+		function dayLabel(day) {
+			return formatFullDay(props.locale, day);
+		}
+		function selectionStatus(selected) {
+			const value = Array.isArray(selected) ? void 0 : selected;
+			return value ? text.value.chosen({ date: dayLabel(value) }) : text.value.cleared;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(CalendarRoot), mergeProps({
+				...unref(rootAttrs),
+				...rootValue.value
+			}, {
+				locale: __props.locale,
+				"calendar-label": unref(chromeText).calendar,
+				class: unref(cn)("flex w-fit flex-col gap-3 rounded-md border border-border bg-popover p-3 text-popover-foreground", unref(attrs).class),
+				"onUpdate:modelValue": onDateChange
+			}), {
+				default: withCtx(({ grid, weekDays, modelValue: selected }) => [
+					createVNode(unref(CalendarHeader), { class: "flex items-center justify-between gap-2" }, {
+						default: withCtx(() => [
+							createVNode(unref(CalendarPrev), {
+								"aria-label": unref(text).previousMonth,
+								class: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+							}, {
+								default: withCtx(() => [createVNode(unref(ChevronLeft), {
+									class: "h-4 w-4 rtl:-scale-x-100",
+									"aria-hidden": "true"
+								})]),
+								_: 1
+							}, 8, ["aria-label"]),
+							createVNode(unref(CalendarHeading), {
+								id: unref(headingId),
+								"aria-live": "polite",
+								class: "text-sm font-medium text-foreground"
+							}, null, 8, ["id"]),
+							createVNode(unref(CalendarNext), {
+								"aria-label": unref(text).nextMonth,
+								class: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+							}, {
+								default: withCtx(() => [createVNode(unref(ChevronRight), {
+									class: "h-4 w-4 rtl:-scale-x-100",
+									"aria-hidden": "true"
+								})]),
+								_: 1
+							}, 8, ["aria-label"])
+						]),
+						_: 1
+					}),
+					createElementVNode("p", {
+						role: "status",
+						"aria-hidden": announced.value ? void 0 : "true",
+						class: "text-xs text-muted-foreground"
+					}, toDisplayString(selectionStatus(selected)), 9, _hoisted_1),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(grid, (month) => {
+						return openBlock(), createBlock(unref(CalendarGrid), {
+							key: month.value.toString(),
+							role: "grid",
+							"aria-labelledby": unref(headingId),
+							class: "border-collapse select-none"
+						}, {
+							default: withCtx(() => [createVNode(unref(CalendarGridHead), null, {
+								default: withCtx(() => [createVNode(unref(CalendarGridRow), null, {
+									default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(weekDays, (day, index) => {
+										return openBlock(), createBlock(unref(CalendarHeadCell), {
+											key: index,
+											class: "w-9 text-xs font-normal text-muted-foreground"
+										}, {
+											default: withCtx(() => [createTextVNode(toDisplayString(day), 1)]),
+											_: 2
+										}, 1024);
+									}), 128))]),
+									_: 2
+								}, 1024)]),
+								_: 2
+							}, 1024), createVNode(unref(CalendarGridBody), null, {
+								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(month.rows, (week, weekIndex) => {
+									return openBlock(), createBlock(unref(CalendarGridRow), { key: weekIndex }, {
+										default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(week, (day) => {
+											return openBlock(), createBlock(unref(CalendarCell), {
+												key: day.toString(),
+												date: day,
+												class: "p-0 text-center"
+											}, {
+												default: withCtx(() => [createVNode(unref(CalendarCellTrigger), {
+													day,
+													month: month.value,
+													"aria-label": dayLabel(day),
+													"aria-current": isDateToday(day) ? "date" : void 0,
+													class: "group relative inline-flex h-9 w-9 items-center justify-center rounded-sm text-sm text-foreground transition-colors duration-fast ease-out hover:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo data-[outside-view]:text-muted-foreground data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[disabled]:pointer-events-none data-[disabled]:line-through [&[data-disabled]:not([data-selected])]:text-muted-foreground"
+												}, {
+													default: withCtx(({ dayValue, today }) => [createTextVNode(toDisplayString(dayValue) + " ", 1), today ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("", true)]),
+													_: 1
+												}, 8, [
+													"day",
+													"month",
+													"aria-label",
+													"aria-current"
+												])]),
+												_: 2
+											}, 1032, ["date"]);
+										}), 128))]),
+										_: 2
+									}, 1024);
+								}), 128))]),
+								_: 2
+							}, 1024)]),
+							_: 2
+						}, 1032, ["aria-labelledby"]);
+					}), 128))
+				]),
+				_: 1
+			}, 16, [
+				"locale",
+				"calendar-label",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { CALENDAR_LABELS, Calendar_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Calendar.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/calendar/src/Calendar.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/calendar/src/Calendar.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { CalendarLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Loom's English for what this surface speaks of its own account — the two\n * pager names and the selection line — co-located so it tree-shakes with the\n * component that renders it, and exported so a host can build a partial\n * vocabulary against the real thing.\n */\nexport const CALENDAR_LABELS: CalendarLabels = {\n  previousMonth: \"Previous month\",\n  nextMonth: \"Next month\",\n  chosen: ({ date }) => `${date} chosen.`,\n  cleared: \"No date chosen.\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useId } from \"vue\";\nimport {\n  CalendarRoot,\n  CalendarHeader,\n  CalendarHeading,\n  CalendarPrev,\n  CalendarNext,\n  CalendarGrid,\n  CalendarGridHead,\n  CalendarGridRow,\n  CalendarHeadCell,\n  CalendarGridBody,\n  CalendarCell,\n  CalendarCellTrigger,\n} from \"reka-ui\";\nimport { ChevronLeft, ChevronRight } from \"@lucide/vue\";\nimport {\n  getLocalTimeZone,\n  isToday,\n  parseDate,\n  toCalendarDate,\n  type DateValue,\n} from \"@internationalized/date\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { CALENDAR_PANEL_LABELS } from \"@ecoma-io/loom-labels\";\nimport { formatFullDay } from \"@ecoma-io/loom-labels\";\n\n/**\n * Calendar — a month on a page: a heading naming it, a row of weekday names,\n * and a grid of days a reader browses and picks from directly.\n *\n * **This is not a date picker, and the difference is the whole point.**\n * DatePicker is a field first — a segmented input a reader types into, with a\n * popover calendar as its second path. This is the calendar alone: no field,\n * no trigger, no open state, nothing to close, and no value echoed anywhere.\n * Reach for it wherever the temporal surface *is* the interface — a booking\n * board's availability grid, a dashboard filter showing the month at all\n * times, a scheduling view a host embeds beside other content.\n *\n * The engine underneath is the same one the four pickers wrap — Reka UI's\n * standalone `CalendarRoot` family — so the month arithmetic, the locale\n * handling and the roving-focus keyboard model are Reka's, not hand-written\n * here. What Loom adds is the value boundary, the label seam and the\n * accessibility decisions documented below.\n *\n * **The model value is a plain ISO date string, `\"YYYY-MM-DD\"`** — parsed on\n * the way in, re-serialised on the way out, exactly as DatePicker draws the\n * same boundary. A value that does not parse is read as *no date chosen*\n * rather than thrown on; a component library cannot decide that a host's bad\n * data is fatal.\n *\n * Three states live on this surface and each has exactly one owner:\n *\n * - **Selected** — the host's, through `modelValue`. Clicking (or pressing\n *   Enter on) an already-chosen day clears it; there is no field here whose\n *   clearing could be a surprise, and a browsing surface that cannot be\n *   un-picked is worse than one that can.\n * - **Focused** — Reka's, through a roving tabindex across the cell triggers.\n *   It is not a prop: the whole grid is exactly one Tab stop, and the arrow\n *   keys walk it.\n * - **Visible month** — internal, deliberately uncontrolled in this release.\n *   Paging buttons move it; selecting a day does not navigate anything, close\n *   anything or move focus. A host that needs to drive the view gets a\n *   placeholder prop when a use case asks for one, not before.\n *\n * **Timezone assumptions:** everything here operates on bare calendar dates.\n * There are no instants and no conversions — \"today\" resolves against the\n * host's local timezone via `getLocalTimeZone()`, which is the only timezone\n * reading this component ever makes.\n *\n * **Range selection is out of scope here by design.** A future\n * `RangeCalendar` lands as its own sibling primitive — the house precedent is\n * DatePicker and DateRangePicker, separate components sharing an engine,\n * because a span has a different model from a point and pretending otherwise\n * produces a control wrong at both ends.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The chosen date as ISO `YYYY-MM-DD`. Unset, empty or unparseable means\n     * no date is chosen. The explicit `| undefined` is what lets `v-model`\n     * bind a ref that clears — clicking the chosen day again emits\n     * `undefined`, and a plain optional prop refuses to take it back.\n     */\n    modelValue?: string | undefined;\n    /** The earliest choosable date, same ISO format. Days before it are announced disabled and skipped by the keyboard. */\n    min?: string;\n    /** The latest choosable date, same ISO format. Days after it are announced disabled and skipped by the keyboard. */\n    max?: string;\n    /** BCP 47 tag driving the month and weekday names, each cell's full-date name, and which day a week starts on. */\n    locale?: string;\n    /**\n     * Writing direction of the whole surface: mirrors the pager chevrons and\n     * flips which arrow key moves backwards.\n     *\n     * Absent, it is seeded from the document's own direction — because Reka\n     * never reads the document itself. Left to its own devices it resolves\n     * `dir` through its ConfigProvider context, defaulting `\"ltr\"`, so under\n     * `<html dir=\"rtl\">` with nothing forwarded the `rtl:` chevron classes\n     * still fire off the CSS cascade while the arrow-key sign stays LTR:\n     * visuals and semantics disagreeing on one surface. An explicit prop\n     * wins over the seed, and a host driving direction through Reka's own\n     * ConfigProvider keeps that where the document declares nothing.\n     */\n    dir?: \"ltr\" | \"rtl\";\n    /**\n     * Names for everything this control says out loud, as any subset of\n     * `CalendarLabels` — 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, not the place to localise an\n     * application: both keys name controls every calendar in the library\n     * pages with, and a language is set once with `provideLoomLabels`.\n     */\n    labels?: LabelOverrides<CalendarLabels>;\n  }>(),\n  { locale: \"en\" },\n);\n\nconst emit = defineEmits<{\n  /** The chosen date as ISO `YYYY-MM-DD`, or `undefined` once the choice has been cleared. */\n  \"update:modelValue\": [value: string | undefined];\n}>();\n\n// Two slots resolved, one of them behind the prop. `text` is this control's\n// own pager vocabulary; the panel slice answers only for the surface's own\n// name (`calendar`), which Reka publishes twice — as the container's\n// `aria-label` and inside a visually-hidden live region a fallthrough\n// attribute could not reach — and which defaults to `\"Event Date\"`, a name\n// for somebody else's application. The per-instance `labels` prop stays\n// exactly `CalendarLabels`: a standalone surface renders no open button, so\n// the rest of that shared slice would be keys nothing on it could say.\nconst text = useLabels(\"calendar\", CALENDAR_LABELS, () => props.labels);\nconst chromeText = useLabels(\"calendarPanel\", CALENDAR_PANEL_LABELS);\n\n// The root is the whole surface, so every fallthrough attribute belongs on it\n// — there is no second node they could sensibly describe. `class` is pulled\n// out of that spread and merged through `cn()` instead: spreading it alongside\n// the root's own `:class` only concatenates the two lists, so a caller's\n// `w-full` would win or lose depending on which utility Tailwind emitted last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: rootAttrs } = useSplitAttrs();\n\nfunction fromIso(value: string | undefined): DateValue | undefined {\n  if (!value) return undefined;\n  try {\n    return parseDate(value);\n  } catch {\n    return undefined;\n  }\n}\n\n// `toString()` already normalises to the Gregorian ISO form whatever calendar\n// the value carries — a locale such as `th-TH` gives Reka a Buddhist\n// placeholder whose year reads 2569, and it still prints `2026-08-11`. What\n// `toCalendarDate` adds is dropping a time component if one ever arrives.\nfunction toIso(date: DateValue): string {\n  return toCalendarDate(date).toString();\n}\n\n// Reka resolves direction through its ConfigProvider context and defaults\n// `\"ltr\"` — it never reads the document (its `useDirection` is literally\n// `dir || context.dir || \"ltr\"`). Seeding the forwarded direction from the\n// document closes the half-behaviour that leaves behind: chevrons mirrored by\n// CSS, arrows still LTR. Only `\"rtl\"` is ever injected rather than a resolved\n// `\"ltr\"` too — forwarding `\"ltr\"` unconditionally would clobber a\n// ConfigProvider context the host set on purpose, and absence lets Reka's own\n// chain answer. `typeof document` guards the server-side pass that builds the\n// documentation site, where there is no document to read.\nconst resolvedDir = computed(() => {\n  if (props.dir) return props.dir;\n  if (typeof document === \"undefined\") return undefined;\n  return document.documentElement.dir === \"rtl\" ? \"rtl\" : undefined;\n});\n\n// `optional()` rather than four separate bindings: an absent bound forwarded\n// as an explicit `undefined` is still a key Reka sees, and an absent\n// `modelValue` forwarded that way is what turns an uncontrolled surface into\n// a permanently empty one. Dropping the key says what is true — including\n// for `dir`, whose absence defers to Reka's own resolution wherever neither\n// the prop nor the document speaks.\nconst rootValue = computed(() =>\n  optional({\n    modelValue: fromIso(props.modelValue),\n    minValue: fromIso(props.min),\n    maxValue: fromIso(props.max),\n    dir: resolvedDir.value,\n  }),\n);\n\n// The status line below announces by changing, but a live region also\n// announces its content the moment it enters the document — so a calendar\n// mounted with a preselected value would read the chosen date out as if the\n// user had just picked it. `announced` stays false until the first real\n// selection event, and the line is aria-hidden meanwhile: hidden, it says\n// nothing at mount; revealed on the first change, it announces exactly that\n// change. Programmatic `modelValue` sets never fire this handler (a host\n// prop write is not an interaction), so before the first user action they\n// stay silent too — after it, the region is an ordinary live region and\n// speaks real changes from either side, which is correct.\nconst announced = ref(false);\n\nfunction onDateChange(date: DateValue | undefined) {\n  announced.value = true;\n  emit(\"update:modelValue\", date ? toIso(date) : undefined);\n}\n\n// Today is a state, and it may not be carried by the marker dot alone — a\n// reader who cannot see the dot gets `aria-current=\"date\"`, which is the one\n// attribute screen readers already announce for \"this is the current one\".\n// Reka publishes today only as a `data-` attribute and a slot prop, neither of\n// which can reach an attribute binding on the cell itself.\nfunction isDateToday(date: DateValue): boolean {\n  return isToday(date, getLocalTimeZone());\n}\n\n// The month-and-year heading names the grid, so the two are wired together\n// rather than the grid being an unnamed table of numbers.\nconst headingId = useId();\n\n// Each cell's accessible name is formatted here rather than read off Reka,\n// replacing Reka's own — the same mechanism DateRangePicker's cells rely on:\n// the binding reaches the node as a fallthrough attribute, which Vue merges\n// last, so it replaces rather than competes. A standalone calendar has no\n// input echoing the chosen value back, so the full date is the only thing a\n// screen reader ever says for a day, and it comes from the shared cached\n// formatter rather than a second `Intl` path built for this one component.\nfunction dayLabel(day: DateValue): string {\n  return formatFullDay(props.locale, day);\n}\n\n// A choice announces itself through no attribute of this engine: Reka\n// publishes a selection only as `aria-selected` flipping on a cell under an\n// unmoved focus point, and a flipped attribute announces nothing — there is\n// no field here whose value change would speak instead. DateRangePicker met\n// the identical fieldless-announcement problem with a `role=\"status\"` line,\n// and this mirrors that precedent. It changes exactly when the selection\n// changes, which is what makes it announceable rather than noise.\n//\n// It reads the selection off Reka's own slot rather than off `modelValue`:\n// the two agree once a host binds one, but this surface is usable unbound,\n// and a line wired to the prop would stay silent about exactly the clicks it\n// exists to announce.\nfunction selectionStatus(selected: DateValue | DateValue[] | undefined): string {\n  const value = Array.isArray(selected) ? undefined : selected;\n  return value ? text.value.chosen({ date: dayLabel(value) }) : text.value.cleared;\n}\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ grid, weekDays, modelValue: selected }\"\n    v-bind=\"{ ...rootAttrs, ...rootValue }\"\n    :locale=\"locale\"\n    :calendar-label=\"chromeText.calendar\"\n    :class=\"\n      cn(\n        'flex w-fit flex-col gap-3 rounded-md border border-border bg-popover p-3 text-popover-foreground',\n        attrs.class as string,\n      )\n    \"\n    @update:model-value=\"onDateChange\"\n  >\n    <CalendarHeader class=\"flex items-center justify-between gap-2\">\n      <!-- The two pagers keep `data-[disabled]:opacity-50` where the cells\n           gave it up, and the difference is what is inside them: a chevron and\n           nothing else. Fading a glyph costs a reader nothing, and the buttons\n           carry their name in `aria-label` rather than in dimmed text. -->\n      <CalendarPrev\n        :aria-label=\"text.previousMonth\"\n        class=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n      >\n        <ChevronLeft class=\"h-4 w-4 rtl:-scale-x-100\" aria-hidden=\"true\" />\n      </CalendarPrev>\n\n      <!-- Paging the calendar changes nothing a reader is looking at except\n           this line, and nothing moves focus — so without the live region the\n           month silently becomes a different month. -->\n      <CalendarHeading\n        :id=\"headingId\"\n        aria-live=\"polite\"\n        class=\"text-sm font-medium text-foreground\"\n      />\n\n      <CalendarNext\n        :aria-label=\"text.nextMonth\"\n        class=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n      >\n        <ChevronRight class=\"h-4 w-4 rtl:-scale-x-100\" aria-hidden=\"true\" />\n      </CalendarNext>\n    </CalendarHeader>\n\n    <!-- Visually subordinate on purpose — the grid is the interface, and this\n         is its spoken half: what a picker's field would have echoed. -->\n    <p\n      role=\"status\"\n      :aria-hidden=\"announced ? undefined : 'true'\"\n      class=\"text-xs text-muted-foreground\"\n    >\n      {{ selectionStatus(selected) }}\n    </p>\n\n    <CalendarGrid\n      v-for=\"month in grid\"\n      :key=\"month.value.toString()\"\n      role=\"grid\"\n      :aria-labelledby=\"headingId\"\n      class=\"border-collapse select-none\"\n    >\n      <!-- Reka renders `role=\"application\"` here, which hands every key\n            straight to the page and takes the table's own semantics away\n            with it. A calendar is a grid: `role=\"grid\"` is what makes the\n            cells rows and columns to a screen reader rather than 42\n            unrelated buttons, and the arrow-key handling Reka installs on\n            the cells is what a grid promises anyway.\n\n            The rows and cells below are laid out by the table itself\n            rather than by flex, and that is load-bearing: `display: flex`\n            on a `tr` drops its implicit `row` mapping in Chromium and\n            WebKit, which leaves `role=\"gridcell\"` inside a grid with no\n            row between them — a broken grid that looks identical. -->\n      <CalendarGridHead>\n        <CalendarGridRow>\n          <CalendarHeadCell\n            v-for=\"(day, index) in weekDays\"\n            :key=\"index\"\n            class=\"w-9 text-xs font-normal text-muted-foreground\"\n          >\n            {{ day }}\n          </CalendarHeadCell>\n        </CalendarGridRow>\n      </CalendarGridHead>\n\n      <CalendarGridBody>\n        <CalendarGridRow v-for=\"(week, weekIndex) in month.rows\" :key=\"weekIndex\">\n          <CalendarCell\n            v-for=\"day in week\"\n            :key=\"day.toString()\"\n            :date=\"day\"\n            class=\"p-0 text-center\"\n          >\n            <!-- The `:aria-label` below replaces one Reka writes inside its\n                  own render function, reaching the DOM node as a fallthrough\n                  attribute that Vue merges last. Removing it falls back not\n                  to English but to the engine's own locale-formatted cell\n                  names. -->\n            <CalendarCellTrigger\n              v-slot=\"{ dayValue, today }\"\n              :day=\"day\"\n              :month=\"month.value\"\n              :aria-label=\"dayLabel(day)\"\n              :aria-current=\"isDateToday(day) ? 'date' : undefined\"\n              class=\"group relative inline-flex h-9 w-9 items-center justify-center rounded-sm text-sm text-foreground transition-colors duration-fast ease-out hover:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo data-[outside-view]:text-muted-foreground data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[disabled]:pointer-events-none data-[disabled]:line-through [&[data-disabled]:not([data-selected])]:text-muted-foreground\"\n            >\n              {{ dayValue }}\n              <!-- Today's second cue. The dot is decoration to a screen\n                   reader — `aria-current` on the cell is what it reads — but\n                   it is the whole cue for a reader who is looking at the\n                   grid, and it is a shape rather than a hue so it survives a\n                   colour deficiency and forced-colors both. -->\n              <span\n                v-if=\"today\"\n                aria-hidden=\"true\"\n                class=\"absolute bottom-1 h-1 w-1 rounded-full bg-primary group-data-[selected]:bg-primary-foreground\"\n              />\n            </CalendarCellTrigger>\n          </CalendarCell>\n        </CalendarGridRow>\n      </CalendarGridBody>\n    </CalendarGrid>\n  </CalendarRoot>\n</template>\n"],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+export { default, CALENDAR_LABELS } from "./Calendar.vue";
+export type { CalendarLabels } from "../../../labels/src/index";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,3 @@
+import { CALENDAR_LABELS } from "./Calendar.vue_vue_type_script_setup_true_lang.js";
+import Calendar_default from "./Calendar.js";
+export { CALENDAR_LABELS, Calendar_default as default };

package/dist/packages/primitives/card/src/Card.js

@@ -0,0 +1,7 @@
+import Card_vue_vue_type_script_setup_true_lang_default from "./Card.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/card/src/Card.vue
+var Card_default = Card_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Card_default as default };
+
+//# sourceMappingURL=Card.js.map

package/dist/packages/primitives/card/src/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","names":[],"sources":["../../../../../packages/primitives/card/src/Card.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { SurfacePad } from \"@ecoma-io/loom-surface\";\n\n/**\n * Card — a compositional surface. The box styling is Surface's own `card`\n * variant consumed as data (`surfaceVariants`), so a card and a bare Surface\n * can never drift apart on radius, hairline or ground, while Card owns what\n * Surface deliberately does not: the section rhythm, the title/description\n * contract and the two ways a card becomes interactive.\n *\n * Interactive comes in exactly two shapes, because a third would be a lie:\n *\n *   • `href` — the whole card IS one link. One tab stop, one action, real\n *     anchor semantics, the content itself for an accessible name — and one\n *     rule: nothing interactive may be placed inside, because nested\n *     controls inside an anchor are unreadable to assistive tech.\n *   • `interactive` — hover/press language only. The host owns the role,\n *     tabindex and handler, exactly as `Surface.interactive` documents; a\n *     component cannot invent semantics for somebody else's behaviour.\n */\nexport type { SurfacePad as CardPad };\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { surfaceVariants } from \"@ecoma-io/loom-surface\";\n\nconst props = defineProps<{\n  /** The card's heading. Omit for a purely visual composition. */\n  title?: string;\n  /** Supporting line under the title. */\n  description?: string;\n  /**\n   * Renders the whole card as one link. The strongest card-link semantics —\n   * a real anchor, one Tab stop — and therefore a rule: nothing interactive\n   * may be placed inside.\n   */\n  href?: string;\n  /**\n   * Hover/press language for a clickable card whose behaviour belongs to the\n   * host. Like `Surface.interactive`, this paints intent only — attach the\n   * role, `tabindex` and handler yourself, or reach for `href` when the card\n   * genuinely navigates.\n   */\n  interactive?: boolean;\n}>();\n\n/** Section rhythm: one inset owned once, so every card padds alike. */\nconst CARD_SECTIONS = {\n  header: \"px-4 pt-4\",\n  body: \"px-4 py-4\",\n  // A recessed strip under a hairline: the footer reads as chrome for the\n  // content above it, not as more content.\n  footer: \"border-t border-border bg-muted/40 px-4 py-3\",\n} as const;\n\nconst rootClasses = computed(() =>\n  cn(\n    // Box styling stays Surface's decision, consumed as data so the two\n    // cannot drift; `pad: none` because the sections carry their own rhythm.\n    // The interactive language rides the same map for both shapes — an anchor\n    // is simply always interactive.\n    surfaceVariants({\n      variant: \"card\",\n      pad: \"none\",\n      interactive: Boolean(props.href) || props.interactive,\n    }),\n    \"overflow-hidden\",\n    props.href &&\n      // Focus and press join the library's languages only when there is\n      // something to act on. The transform composite mirrors Button's:\n      // scale on spring, colour steady on ease-out.\n      \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out)] active:scale-press\",\n  ),\n);\n</script>\n\n<template>\n  <component :is=\"href ? 'a' : 'div'\" :href=\"href\" :class=\"rootClasses\">\n    <!-- @slot Edge-to-edge media above every section; the card clips its corners. -->\n    <div v-if=\"$slots.media\" class=\"[&>img]:block [&>img]:w-full\">\n      <slot name=\"media\" />\n    </div>\n\n    <div v-if=\"$slots.header || title || description\" :class=\"cn(CARD_SECTIONS.header)\">\n      <!-- @slot Replaces the title/description pair wholesale for custom header layouts. -->\n      <slot name=\"header\">\n        <p v-if=\"title\" class=\"text-sm font-medium\">{{ title }}</p>\n        <p v-if=\"description\" class=\"mt-1 text-small text-muted-foreground\">{{ description }}</p>\n      </slot>\n    </div>\n\n    <!-- @slot The card's substance. -->\n    <div :class=\"cn(CARD_SECTIONS.body)\"><slot /></div>\n\n    <!-- @slot Actions or metadata, recessed under a hairline. -->\n    <div v-if=\"$slots.footer\" :class=\"cn(CARD_SECTIONS.footer)\">\n      <slot name=\"footer\" />\n    </div>\n  </component>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/card/src/Card.vue.d.ts

@@ -0,0 +1,72 @@
+import type { SurfacePad } from "../../surface/src/index";
+/**
+ * Card — a compositional surface. The box styling is Surface's own `card`
+ * variant consumed as data (`surfaceVariants`), so a card and a bare Surface
+ * can never drift apart on radius, hairline or ground, while Card owns what
+ * Surface deliberately does not: the section rhythm, the title/description
+ * contract and the two ways a card becomes interactive.
+ *
+ * Interactive comes in exactly two shapes, because a third would be a lie:
+ *
+ *   • `href` — the whole card IS one link. One tab stop, one action, real
+ *     anchor semantics, the content itself for an accessible name — and one
+ *     rule: nothing interactive may be placed inside, because nested
+ *     controls inside an anchor are unreadable to assistive tech.
+ *   • `interactive` — hover/press language only. The host owns the role,
+ *     tabindex and handler, exactly as `Surface.interactive` documents; a
+ *     component cannot invent semantics for somebody else's behaviour.
+ */
+export type { SurfacePad as CardPad };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** The card's heading. Omit for a purely visual composition. */
+    title?: string;
+    /** Supporting line under the title. */
+    description?: string;
+    /**
+     * Renders the whole card as one link. The strongest card-link semantics —
+     * a real anchor, one Tab stop — and therefore a rule: nothing interactive
+     * may be placed inside.
+     */
+    href?: string;
+    /**
+     * Hover/press language for a clickable card whose behaviour belongs to the
+     * host. Like `Surface.interactive`, this paints intent only — attach the
+     * role, `tabindex` and handler yourself, or reach for `href` when the card
+     * genuinely navigates.
+     */
+    interactive?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** The card's heading. Omit for a purely visual composition. */
+    title?: string;
+    /** Supporting line under the title. */
+    description?: string;
+    /**
+     * Renders the whole card as one link. The strongest card-link semantics —
+     * a real anchor, one Tab stop — and therefore a rule: nothing interactive
+     * may be placed inside.
+     */
+    href?: string;
+    /**
+     * Hover/press language for a clickable card whose behaviour belongs to the
+     * host. Like `Surface.interactive`, this paints intent only — attach the
+     * role, `tabindex` and handler yourself, or reach for `href` when the card
+     * genuinely navigates.
+     */
+    interactive?: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    media?: (props: {}) => any;
+} & {
+    header?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    footer?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Card.vue.d.ts.map

package/dist/packages/primitives/card/src/Card.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,65 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { surfaceVariants } from "../../surface/src/Surface.vue_vue_type_script_setup_true_lang.js";
+import "../../surface/src/index.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+//#region packages/primitives/card/src/Card.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "[&>img]:block [&>img]:w-full"
+};
+var _hoisted_2 = {
+	key: 0,
+	class: "text-sm font-medium"
+};
+var _hoisted_3 = {
+	key: 1,
+	class: "mt-1 text-small text-muted-foreground"
+};
+var Card_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Card",
+	props: {
+		title: {},
+		description: {},
+		href: {},
+		interactive: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		/** Section rhythm: one inset owned once, so every card padds alike. */
+		const CARD_SECTIONS = {
+			header: "px-4 pt-4",
+			body: "px-4 py-4",
+			footer: "border-t border-border bg-muted/40 px-4 py-3"
+		};
+		const rootClasses = computed(() => cn(surfaceVariants({
+			variant: "card",
+			pad: "none",
+			interactive: Boolean(props.href) || props.interactive
+		}), "overflow-hidden", props.href && "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out)] active:scale-press"));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.href ? "a" : "div"), {
+				href: __props.href,
+				class: normalizeClass(rootClasses.value)
+			}, {
+				default: withCtx(() => [
+					_ctx.$slots.media ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "media")])) : createCommentVNode("", true),
+					_ctx.$slots.header || __props.title || __props.description ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: normalizeClass(unref(cn)(CARD_SECTIONS.header))
+					}, [renderSlot(_ctx.$slots, "header", {}, () => [__props.title ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString(__props.title), 1)) : createCommentVNode("", true), __props.description ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(__props.description), 1)) : createCommentVNode("", true)])], 2)) : createCommentVNode("", true),
+					createElementVNode("div", { class: normalizeClass(unref(cn)(CARD_SECTIONS.body)) }, [renderSlot(_ctx.$slots, "default")], 2),
+					_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
+						key: 2,
+						class: normalizeClass(unref(cn)(CARD_SECTIONS.footer))
+					}, [renderSlot(_ctx.$slots, "footer")], 2)) : createCommentVNode("", true)
+				]),
+				_: 3
+			}, 8, ["href", "class"]);
+		};
+	}
+});
+//#endregion
+export { Card_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Card.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/card/src/Card.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../packages/primitives/card/src/Card.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { SurfacePad } from \"@ecoma-io/loom-surface\";\n\n/**\n * Card — a compositional surface. The box styling is Surface's own `card`\n * variant consumed as data (`surfaceVariants`), so a card and a bare Surface\n * can never drift apart on radius, hairline or ground, while Card owns what\n * Surface deliberately does not: the section rhythm, the title/description\n * contract and the two ways a card becomes interactive.\n *\n * Interactive comes in exactly two shapes, because a third would be a lie:\n *\n *   • `href` — the whole card IS one link. One tab stop, one action, real\n *     anchor semantics, the content itself for an accessible name — and one\n *     rule: nothing interactive may be placed inside, because nested\n *     controls inside an anchor are unreadable to assistive tech.\n *   • `interactive` — hover/press language only. The host owns the role,\n *     tabindex and handler, exactly as `Surface.interactive` documents; a\n *     component cannot invent semantics for somebody else's behaviour.\n */\nexport type { SurfacePad as CardPad };\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { surfaceVariants } from \"@ecoma-io/loom-surface\";\n\nconst props = defineProps<{\n  /** The card's heading. Omit for a purely visual composition. */\n  title?: string;\n  /** Supporting line under the title. */\n  description?: string;\n  /**\n   * Renders the whole card as one link. The strongest card-link semantics —\n   * a real anchor, one Tab stop — and therefore a rule: nothing interactive\n   * may be placed inside.\n   */\n  href?: string;\n  /**\n   * Hover/press language for a clickable card whose behaviour belongs to the\n   * host. Like `Surface.interactive`, this paints intent only — attach the\n   * role, `tabindex` and handler yourself, or reach for `href` when the card\n   * genuinely navigates.\n   */\n  interactive?: boolean;\n}>();\n\n/** Section rhythm: one inset owned once, so every card padds alike. */\nconst CARD_SECTIONS = {\n  header: \"px-4 pt-4\",\n  body: \"px-4 py-4\",\n  // A recessed strip under a hairline: the footer reads as chrome for the\n  // content above it, not as more content.\n  footer: \"border-t border-border bg-muted/40 px-4 py-3\",\n} as const;\n\nconst rootClasses = computed(() =>\n  cn(\n    // Box styling stays Surface's decision, consumed as data so the two\n    // cannot drift; `pad: none` because the sections carry their own rhythm.\n    // The interactive language rides the same map for both shapes — an anchor\n    // is simply always interactive.\n    surfaceVariants({\n      variant: \"card\",\n      pad: \"none\",\n      interactive: Boolean(props.href) || props.interactive,\n    }),\n    \"overflow-hidden\",\n    props.href &&\n      // Focus and press join the library's languages only when there is\n      // something to act on. The transform composite mirrors Button's:\n      // scale on spring, colour steady on ease-out.\n      \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo [transition:transform_var(--duration-fast)_var(--ease-spring),background-color_var(--duration-fast)_var(--ease-out)] active:scale-press\",\n  ),\n);\n</script>\n\n<template>\n  <component :is=\"href ? 'a' : 'div'\" :href=\"href\" :class=\"rootClasses\">\n    <!-- @slot Edge-to-edge media above every section; the card clips its corners. -->\n    <div v-if=\"$slots.media\" class=\"[&>img]:block [&>img]:w-full\">\n      <slot name=\"media\" />\n    </div>\n\n    <div v-if=\"$slots.header || title || description\" :class=\"cn(CARD_SECTIONS.header)\">\n      <!-- @slot Replaces the title/description pair wholesale for custom header layouts. -->\n      <slot name=\"header\">\n        <p v-if=\"title\" class=\"text-sm font-medium\">{{ title }}</p>\n        <p v-if=\"description\" class=\"mt-1 text-small text-muted-foreground\">{{ description }}</p>\n      </slot>\n    </div>\n\n    <!-- @slot The card's substance. -->\n    <div :class=\"cn(CARD_SECTIONS.body)\"><slot /></div>\n\n    <!-- @slot Actions or metadata, recessed under a hairline. -->\n    <div v-if=\"$slots.footer\" :class=\"cn(CARD_SECTIONS.footer)\">\n      <slot name=\"footer\" />\n    </div>\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BA,MAAM,QAAQ;;EAqBd,MAAM,gBAAgB;GACpB,QAAQ;GACR,MAAM;GAGN,QAAQ;EACV;EAEA,MAAM,cAAc,eAClB,GAKE,gBAAgB;GACd,SAAS;GACT,KAAK;GACL,aAAa,QAAQ,MAAM,IAAI,KAAK,MAAM;EAC5C,CAAC,GACD,mBACA,MAAM,QAIJ,qPACJ,CACF;;GAIE,OAAA,UAAA,GAAA,YAqBY,wBArBI,QAAA,OAAI,MAAA,KAAA,GAAA;IAAiB,MAAM,QAAA;IAAO,OAAK,eAAE,YAAA,KAAW;;IAElE,SAAA,cAEM;KAFKA,KAAAA,OAAO,SAAlB,UAAA,GAAA,mBAEM,OAFN,YAEM,CADJ,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAGZA,KAAAA,OAAO,UAAU,QAAA,SAAS,QAAA,eAArC,UAAA,GAAA,mBAMM,OAAA;;MAN6C,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,cAAc,MAAM,CAAA;KAE/E,GAAA,CAAA,WAGO,KAAA,QAAA,UAAA,CAAA,SAAA,CAFI,QAAA,SAAT,UAAA,GAAA,mBAA2D,KAA3D,YAA2D,gBAAZ,QAAA,KAAK,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAC3C,QAAA,eAAT,UAAA,GAAA,mBAAyF,KAAzF,YAAyF,gBAAlB,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAKtF,mBAAmD,OAAA,EAA7C,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,cAAc,IAAI,CAAA,EAAA,GAAA,CAAG,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA;KAGlCA,KAAAA,OAAO,UAAlB,UAAA,GAAA,mBAEM,OAAA;;MAFqB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,cAAc,MAAM,CAAA;KACvD,GAAA,CAAA,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

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

@@ -0,0 +1,3 @@
+export { default } from "./Card.vue";
+export type { CardPad } from "./Card.vue";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/card/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/card/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}

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

@@ -0,0 +1,2 @@
+import Card_default from "./Card.js";
+export { Card_default as default };

package/dist/packages/primitives/carousel/src/Carousel.js

@@ -0,0 +1,7 @@
+import Carousel_vue_vue_type_script_setup_true_lang_default, { CAROUSEL_LABELS } from "./Carousel.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/carousel/src/Carousel.vue
+var Carousel_default = Carousel_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { CAROUSEL_LABELS, Carousel_default as default };
+
+//# sourceMappingURL=Carousel.js.map

package/dist/packages/primitives/carousel/src/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","names":[],"sources":["../../../../../packages/primitives/carousel/src/Carousel.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { CarouselLabels } from \"@ecoma-io/loom-labels\";\nimport type { VNode } from \"vue\";\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. `slide` receives the raw numbers\n * and returns the finished sentence — pluralisation and digit shaping stay\n * in the consumer's locale code, per the labels package's contract.\n */\nexport const CAROUSEL_LABELS: CarouselLabels = {\n  region: \"Carousel\",\n  previous: \"Previous slide\",\n  next: \"Next slide\",\n  slide: ({ position, total }) => `Slide ${String(position)} of ${String(total)}`,\n};\n\n/**\n * One slide per child of the default slot; a fragment child (a bare `v-for`\n * on the host) contributes its own children as further slides.\n */\nfunction flatten(vnodes: VNode[]): VNode[] {\n  return vnodes.flatMap((vnode) =>\n    typeof vnode.type === \"symbol\" && Array.isArray(vnode.children)\n      ? (vnode.children as VNode[])\n      : [vnode],\n  );\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref } from \"vue\";\nimport { useSlots } from \"vue\";\nimport { ChevronLeft, ChevronRight } from \"@lucide/vue\";\nimport IconButton from \"@ecoma-io/loom-icon-button\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport { cn, smoothScrollBehavior } from \"@ecoma-io/loom-core\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** Names the whole region for assistive technology. */\n    labels?: LabelOverrides<CarouselLabels>;\n    /**\n     * Wraps at both ends instead of stopping. Off by default: a carousel\n     * that silently jumps from last back to first reads as a glitch unless\n     * the product actually means it.\n     */\n    loop?: boolean;\n  }>(),\n  { loop: false },\n);\n\n// `text`, not `labels`: the prop of that name is one of the three sources\n// this resolves, and a template reading the raw prop would be reading the\n// overrides rather than the answer.\nconst text = useLabels(\"carousel\", CAROUSEL_LABELS, () => props.labels);\n\n// Invoked during render, never cached: a computed holding slot vnodes would\n// freeze the list against a host that adds or removes slides reactively\n// (Vue does not track dependencies used inside a slot from outside it).\nconst slots = useSlots();\n\n// The slot function runs here on every render — fresh vnodes each time; only\n// the slot lookup itself is captured in setup.\nfunction slideVnodes(): VNode[] {\n  return flatten(slots.default?.() ?? []);\n}\n\nfunction totalCount(): number {\n  return slideVnodes().length;\n}\nconst last = computed(() => totalCount() - 1);\n\nconst track = ref<HTMLElement | null>(null);\nconst index = ref(0);\n\nfunction goTo(next: number): void {\n  const el = track.value;\n  const total = totalCount();\n  if (!el || !total) return;\n  let target = next;\n  // Modulo of zero is NaN — an empty strip has nowhere to go.\n  if (props.loop) target = ((next % total) + total) % total;\n  else target = Math.max(0, Math.min(total - 1, target));\n  index.value = target;\n  el.scrollTo({ left: target * el.clientWidth, behavior: smoothScrollBehavior() });\n}\n\nconst atStart = computed(() => !props.loop && index.value <= 0);\nconst atEnd = computed(() => !props.loop && index.value >= last.value);\n\n/** Arrows walk pages while the strip itself holds focus; Home/End jump. */\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\") {\n    event.preventDefault();\n    goTo(index.value + (event.key === \"ArrowRight\" ? 1 : -1));\n  } else if (event.key === \"Home\") {\n    event.preventDefault();\n    goTo(0);\n  } else if (event.key === \"End\") {\n    event.preventDefault();\n    goTo(last.value);\n  }\n}\n\n// Touch swipes land here too: native scroll moves the strip and the reader's\n// finger — not the component — decides where it settles. Work happens once\n// per frame rather than on every scroll tick.\nlet frame = 0;\nfunction onScroll(): void {\n  cancelAnimationFrame(frame);\n  frame = requestAnimationFrame(() => {\n    const el = track.value;\n    if (!el || !el.clientWidth) return;\n    index.value = Math.max(0, Math.min(last.value, Math.round(el.scrollLeft / el.clientWidth)));\n  });\n}\n\nonMounted(() => track.value?.addEventListener(\"scroll\", onScroll, { passive: true }));\nonBeforeUnmount(() => {\n  track.value?.removeEventListener(\"scroll\", onScroll);\n  cancelAnimationFrame(frame);\n});\n\nconst trackClasses = cn(\n  \"flex snap-x snap-mandatory overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden rounded-md\",\n  \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n);\n\n// The controls float above media, so they carry their own ground instead of\n// inheriting whatever slide sits beneath them.\nconst controlClasses =\n  \"absolute top-1/2 z-raised -translate-y-1/2 bg-background/80 shadow-sm hover:bg-background\";\n</script>\n\n<template>\n  <div role=\"region\" aria-roledescription=\"carousel\" :aria-label=\"text.region\" class=\"relative\">\n    <!-- @slot One element per slide. Each becomes a full-width,\n         snap-aligned page; give every child the same intrinsic height or pad\n         it yourself. The slides are wrapped here rather than rendered bare so\n         each can carry its own slide semantics. -->\n    <!-- A named, focusable scroll container whose arrow keys page the\n         strip: a genuine interaction on a genuinely interactive element.\n         The accessibility rule cannot see that combination from a plain\n         div, so it is answered here rather than by inventing a role the\n         element does not have. -->\n    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n    <div ref=\"track\" :class=\"trackClasses\" tabindex=\"0\" @keydown=\"onKeydown\">\n      <div\n        v-for=\"(slide, i) in slideVnodes()\"\n        :key=\"i\"\n        role=\"group\"\n        aria-roledescription=\"slide\"\n        :aria-label=\"text.slide({ position: i + 1, total: totalCount() })\"\n        class=\"w-full shrink-0 snap-start\"\n      >\n        <component :is=\"slide\" />\n      </div>\n    </div>\n\n    <IconButton\n      variant=\"ghost\"\n      size=\"sm\"\n      :label=\"text.previous\"\n      :disabled=\"atStart\"\n      :class=\"cn(controlClasses, 'left-2')\"\n      @click=\"goTo(index - 1)\"\n    >\n      <ChevronLeft class=\"h-4 w-4\" aria-hidden=\"true\" />\n    </IconButton>\n    <IconButton\n      variant=\"ghost\"\n      size=\"sm\"\n      :label=\"text.next\"\n      :disabled=\"atEnd\"\n      :class=\"cn(controlClasses, 'right-2')\"\n      @click=\"goTo(index + 1)\"\n    >\n      <ChevronRight class=\"h-4 w-4\" aria-hidden=\"true\" />\n    </IconButton>\n\n    <!-- Present from the first render: a live region mounted in the same\n         moment as its text is a region assistive tech was not yet listening\n         to. Position changes announce politely; nothing announces on load. -->\n    <p class=\"sr-only\" aria-live=\"polite\">\n      {{ text.slide({ position: index + 1, total: totalCount() }) }}\n    </p>\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/carousel/src/Carousel.vue.d.ts

@@ -0,0 +1,34 @@
+import { type LabelOverrides } from "../../../labels/src/index";
+import type { CarouselLabels } from "../../../labels/src/index";
+/**
+ * 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. `slide` receives the raw numbers
+ * and returns the finished sentence — pluralisation and digit shaping stay
+ * in the consumer's locale code, per the labels package's contract.
+ */
+export declare const CAROUSEL_LABELS: CarouselLabels;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** Names the whole region for assistive technology. */
+    labels?: LabelOverrides<CarouselLabels>;
+    /**
+     * Wraps at both ends instead of stopping. Off by default: a carousel
+     * that silently jumps from last back to first reads as a glitch unless
+     * the product actually means it.
+     */
+    loop?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** Names the whole region for assistive technology. */
+    labels?: LabelOverrides<CarouselLabels>;
+    /**
+     * Wraps at both ends instead of stopping. Off by default: a carousel
+     * that silently jumps from last back to first reads as a glitch unless
+     * the product actually means it.
+     */
+    loop?: boolean;
+}> & Readonly<{}>, {
+    loop: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=Carousel.vue.d.ts.map