@ecoma-io/loom 0.4.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":";;;;;;;;;;;;;;;;;;;;;;;;;;AASA,IAAa,kBAAkC;CAC7C,eAAe;CACf,WAAW;CACX,SAAS,EAAE,WAAW,GAAG,KAAK;CAC9B,SAAS;AACX;;;;;;;;;;;;;;EAmFA,MAAM,QAAQ;EA2Cd,MAAM,OAAO;EAab,MAAM,OAAO,UAAU,YAAY,uBAAuB,MAAM,MAAM;EACtE,MAAM,aAAa,UAAU,iBAAiB,qBAAqB;EAQnE,MAAM,EAAE,OAAO,MAAM,cAAc,cAAc;EAEjD,SAAS,QAAQ,OAAkD;GACjE,IAAI,CAAC,OAAO,OAAO,KAAA;GACnB,IAAI;IACF,OAAO,yCAAU,KAAK;GACxB,QAAQ;IACN;GACF;EACF;EAMA,SAAS,MAAM,MAAyB;GACtC,OAAO,0CAAe,IAAI,CAAC,CAAC,SAAS;EACvC;EAWA,MAAM,cAAc,eAAe;GACjC,IAAI,MAAM,KAAK,OAAO,MAAM;GAC5B,IAAI,OAAO,aAAa,aAAa,OAAO,KAAA;GAC5C,OAAO,SAAS,gBAAgB,QAAQ,QAAQ,QAAQ,KAAA;EAC1D,CAAC;EAQD,MAAM,YAAY,eAChB,SAAS;GACP,YAAY,QAAQ,MAAM,UAAU;GACpC,UAAU,QAAQ,MAAM,GAAG;GAC3B,UAAU,QAAQ,MAAM,GAAG;GAC3B,KAAK,YAAY;EACnB,CAAC,CACH;EAYA,MAAM,YAAY,IAAI,KAAK;EAE3B,SAAS,aAAa,MAA6B;GACjD,UAAU,QAAQ;GAClB,KAAK,qBAAqB,OAAO,MAAM,IAAI,IAAI,KAAA,CAAS;EAC1D;EAOA,SAAS,YAAY,MAA0B;GAC7C,OAAO,0CAAQ,MAAM,0CAAiB,CAAC;EACzC;EAIA,MAAM,YAAY,MAAM;EASxB,SAAS,SAAS,KAAwB;GACxC,OAAO,cAAc,MAAM,QAAQ,GAAG;EACxC;EAcA,SAAS,gBAAgB,UAAuD;GAC9E,MAAM,QAAQ,MAAM,QAAQ,QAAQ,IAAI,KAAA,IAAY;GACpD,OAAO,QAAQ,KAAK,MAAM,OAAO,EAAE,MAAM,SAAS,KAAK,EAAE,CAAC,IAAI,KAAK,MAAM;EAC3E;;GAIE,OAAA,UAAA,GAAA,YAwHe,MAAA,YAAA,GAxHf,WAwHe;IAAA,GAtHA,MAAA,SAAA;IAAS,GAAK,UAAA;GAAS,GAAA;IACnC,QAAQ,QAAA;IACR,kBAAgB,MAAA,UAAA,CAAU,CAAC;IAC3B,OAAc,MAAA,EAAA,CAAE,CAAA,oGAAsH,MAAA,KAAA,CAAK,CAAC,KAAA;IAM5I,uBAAoB;;IAErB,SAAA,SA2BiB,EAvCP,MAAM,UAAQ,YAAc,eAAQ;KAY9C,YA2BiB,MAAA,cAAA,GAAA,EA3BD,OAAM,0CAAyC,GAAA;MAK7D,SAAA,cAKe;OALf,YAKe,MAAA,YAAA,GAAA;QAJZ,cAAY,MAAA,IAAA,CAAI,CAAC;QAClB,OAAM;;QAEN,SAAA,cAAmE,CAAnE,YAAmE,MAAA,WAAA,GAAA;SAAtD,OAAM;SAA2B,eAAY;;;;OAM5D,YAIE,MAAA,eAAA,GAAA;QAHC,IAAI,MAAA,SAAA;QACL,aAAU;QACV,OAAM;;OAGR,YAKe,MAAA,YAAA,GAAA;QAJZ,cAAY,MAAA,IAAA,CAAI,CAAC;QAClB,OAAM;;QAEN,SAAA,cAAoE,CAApE,YAAoE,MAAA,YAAA,GAAA;SAAtD,OAAM;SAA2B,eAAY;;;;;;;KAM/D,mBAMI,KAAA;MALF,MAAK;MACJ,eAAa,UAAA,QAAY,KAAA,IAAS;MACnC,OAAM;KAEH,GAAA,gBAAA,gBAAgB,QAAQ,CAAA,GAAA,GAAA,UAAA;MAG7B,UAAA,IAAA,GAAA,mBAmEe,UAAA,MAAA,WAlEG,OAAT,UAAK;MADd,OAAA,UAAA,GAAA,YAmEe,MAAA,YAAA,GAAA;OAjEZ,KAAK,MAAM,MAAM,SAAQ;OAC1B,MAAK;OACJ,mBAAiB,MAAA,SAAA;OAClB,OAAM;;OAcN,SAAA,cAUmB,CAVnB,YAUmB,MAAA,gBAAA,GAAA,MAAA;QATjB,SAAA,cAQkB,CARlB,YAQkB,MAAA,eAAA,GAAA,MAAA;SANd,SAAA,cAAgC,EADlC,UAAA,IAAA,GAAA,mBAMmB,UAAA,MAAA,WALM,WAAf,KAAK,UAAK;UADpB,OAAA,UAAA,GAAA,YAMmB,MAAA,gBAAA,GAAA;WAJhB,KAAK;WACN,OAAM;;WAEN,SAAA,cAAS,CAAN,gBAAA,gBAAA,GAAG,GAAA,CAAA,CAAA,CAAA;;;;;;;OAKZ,GAAA,IAAA,GAAA,YAmCmB,MAAA,gBAAA,GAAA,MAAA;QAlCA,SAAA,cAAuC,EAAxD,UAAA,IAAA,GAAA,mBAiCkB,UAAA,MAAA,WAjC2B,MAAM,OAA1B,MAAM,cAAS;SAAxC,OAAA,UAAA,GAAA,YAiCkB,MAAA,eAAA,GAAA,EAjCwC,KAAK,UAAS,GAAA;UAEpE,SAAA,cAAmB,EADrB,UAAA,IAAA,GAAA,mBA+Be,UAAA,MAAA,WA9BC,OAAP,QAAG;WADZ,OAAA,UAAA,GAAA,YA+Be,MAAA,YAAA,GAAA;YA7BZ,KAAK,IAAI,SAAQ;YACjB,MAAM;YACP,OAAM;;YAON,SAAA,cAmBsB,CAnBtB,YAmBsB,MAAA,mBAAA,GAAA;aAjBd;aACL,OAAO,MAAM;aACb,cAAY,SAAS,GAAG;aACxB,gBAAc,YAAY,GAAG,IAAA,SAAa,KAAA;aAC3C,OAAM;;aAEN,SAAA,SAAc,EAPJ,UAAU,YAAK,CAOtB,gBAAA,gBAAA,QAAQ,IAAG,KAMd,CAAA,GACQ,SADR,UAAA,GAAA,mBAIE,QAJF,UAIE,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

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/combobox/src/Combobox.vue.d.ts

@@ -159,7 +159,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     invalid: boolean | undefined;
     modelValue: string | string[] | undefined;
     multiple: boolean;
-    visibleValues: number;
     emptyMessage: string | undefined;
+    visibleValues: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 //# sourceMappingURL=Combobox.vue.d.ts.map

package/dist/packages/primitives/command/src/Command.js

@@ -0,0 +1,7 @@
+import Command_vue_vue_type_script_setup_true_lang_default, { COMMAND_LABELS } from "./Command.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/command/src/Command.vue
+var Command_default = Command_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { COMMAND_LABELS, Command_default as default };
+
+//# sourceMappingURL=Command.js.map

package/dist/packages/primitives/command/src/Command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command.js","names":[],"sources":["../../../../../packages/primitives/command/src/Command.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { CommandLabels, LabelOverrides } from \"@ecoma-io/loom-labels\";\n/**\n * One searchable item in the command list. `value` is what the host receives on\n * select; `label` is what the reader sees and what the filter matches against.\n *\n * Deliberately not `ComboboxOption` or `DropdownMenuEntry`: those shapes carry\n * `modelValue` and `separator` fields respectively, and either would be\n * dead weight here — a command is an action, not a value or a menu row.\n */\nexport interface CommandItem {\n  /** Unique key. */\n  value: string;\n  /** Visible label. */\n  label: string;\n  /** Optional description shown below the label. */\n  description?: string;\n  /** Group heading this item belongs to. */\n  group?: string;\n  /** Disabled state. */\n  disabled?: boolean;\n}\n\n/**\n * A named section heading above a run of items. Only rendered when the group\n * contains at least one item that survived the current filter.\n */\nexport interface CommandGroup {\n  /** Group heading text. */\n  heading: string;\n}\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it.\n * Every string a Command actually says is the chrome around the host's items,\n * so the whole slot is here and none of it hides in the template.\n */\nexport const COMMAND_LABELS: CommandLabels = {\n  placeholder: \"Type to search…\",\n  emptyMessage: \"No results found.\",\n  searchLabel: \"Search\",\n  resultSingular: \"{count} result available\",\n  resultPlural: \"{count} results available\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref, useId, watch } from \"vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n * Command — a keyboard-driven command search, the universal \"Cmd+K\" pattern.\n *\n * A text input that narrows a grouped list as you type, for executing actions\n * rather than selecting values. Its neighbour is `Combobox`, which selects a\n * value for a form field; this control runs an action and has no `modelValue`.\n *\n * The two are one family in the same way a Combobox and a Select are: the same\n * surface vocabulary, the same tokens, the same keyboard model. What differs is\n * intent — \"open settings\" is not a value you could submit in a form — and that\n * intent shapes the API: `onSelect` rather than `v-model`.\n *\n * Built from native ARIA roles rather than Reka UI, because Reka ships no\n * Command primitive. The semantics follow the WAI-ARIA combobox pattern with\n * `aria-activedescendant` navigation: focus stays in the input while the\n * highlighted item moves, which is the only model that keeps typing fluid.\n *\n * `aria-expanded` is deliberately absent. The input is a fixed searchbox, not\n * a popover trigger, so it has no collapsed state to announce: the listbox is\n * visible on mount and returns on any interaction after Escape closes it.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The items to search through. */\n    items: CommandItem[];\n    /** Optional group definitions for section headers. */\n    groups?: CommandGroup[];\n    /** Controlled search query. */\n    query?: string | undefined;\n    /** Whether the command menu is open. */\n    open?: boolean | undefined;\n    /** Names for the strings this control supplies itself. */\n    labels?: LabelOverrides<CommandLabels> | undefined;\n    /** Accessible label by reference for the search input. */\n    ariaLabelledby?: string;\n  }>(),\n  {\n    query: undefined,\n    open: undefined,\n    labels: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** Fired when an item is selected. */\n  select: [value: string];\n  /** Fired when the query changes. */\n  \"update:query\": [value: string];\n  /** Fired when open state changes. */\n  \"update:open\": [value: boolean];\n}>();\n\nconst resolvedLabels = useLabels(\"command\", COMMAND_LABELS, () => props.labels);\n\nconst inputId = useId();\nconst listboxId = useId();\nconst liveRegionId = useId();\n\n/**\n * The controlled/uncontrolled query. When `query` is bound from outside, the\n * prop wins; otherwise the component owns its own state.\n */\nconst internalQuery = ref(\"\");\nconst queryValue = computed(() => props.query ?? internalQuery.value);\n\nfunction setQuery(value: string): void {\n  internalQuery.value = value;\n  emit(\"update:query\", value);\n}\n\n/**\n * The controlled/uncontrolled open state. `true` when the listbox is visible.\n */\nconst internalOpen = ref(true);\nconst isOpen = computed(() => props.open ?? internalOpen.value);\n\nfunction setOpen(value: boolean): void {\n  if (props.open !== undefined) {\n    emit(\"update:open\", value);\n  } else {\n    internalOpen.value = value;\n  }\n}\n\n/**\n * Bring the listbox back after Escape closed it. Focus never leaves the\n * search input, so without this a closed Command is a dead end — the only\n * escape, before this fix, was unmounting the component. Controlled mode is\n * untouched: the emit the host chose stays with the host, and this rewrites\n * only the fallback state a host never bound.\n */\nfunction restoreOpen(): void {\n  if (props.open === undefined) internalOpen.value = true;\n}\n\n/**\n * The index of the highlighted item within the filtered list. Reset to `0`\n * whenever the query changes so the first match is always ready to select.\n */\nconst highlightedIndex = ref(0);\n\nconst listboxRef = ref<HTMLElement | null>(null);\n\n// Arrow-key focus never leaves the input (aria-activedescendant), so the\n// scrollable listbox must be tab-reachable itself — an overflow container no\n// keyboard can reach is the scrollable-region-focusable violation the harness\n// axe gate exists to catch. Scrolling the highlighted option into view is the\n// other half: an active item moved off-screen is navigation the user cannot\n// see. jsdom has no scrollIntoView, hence the optional call.\nwatch([highlightedIndex, isOpen], async () => {\n  if (!isOpen.value) return;\n  await nextTick();\n  listboxRef.value?.querySelector(\"[data-active]\")?.scrollIntoView?.({ block: \"nearest\" });\n});\n\n/**\n * Items filtered by the current query. Case-insensitive substring match\n * across `label`, `description` and `value`.\n */\nconst filteredItems = computed(() => {\n  const needle = queryValue.value.trim().toLowerCase();\n  if (!needle) return props.items;\n  return props.items.filter((item) => {\n    const haystack = [item.label, item.description ?? \"\", item.value].join(\" \").toLowerCase();\n    return haystack.includes(needle);\n  });\n});\n\n/**\n * Items grouped for rendering. Each entry is either a group heading or a flat\n * item. Groups with no matching items are omitted entirely.\n */\ninterface GroupedEntry {\n  kind: \"heading\";\n  heading: string;\n  groupId: string;\n}\n\ninterface GroupedItem {\n  kind: \"item\";\n  item: CommandItem;\n  globalIndex: number;\n}\n\ntype RenderEntry = GroupedEntry | GroupedItem;\n\nconst renderEntries = computed<RenderEntry[]>(() => {\n  if (filteredItems.value.length === 0) return [];\n\n  const groupDefs = props.groups;\n  if (!groupDefs || groupDefs.length === 0) {\n    return filteredItems.value.map((item, i) => ({ kind: \"item\", item, globalIndex: i }));\n  }\n\n  const ungrouped: CommandItem[] = [];\n  const grouped = new Map<string, CommandItem[]>();\n\n  for (const item of filteredItems.value) {\n    if (item.group) {\n      const list = grouped.get(item.group) ?? [];\n      list.push(item);\n      grouped.set(item.group, list);\n    } else {\n      ungrouped.push(item);\n    }\n  }\n\n  const entries: RenderEntry[] = [];\n  let globalIndex = 0;\n\n  for (const def of groupDefs) {\n    const items = grouped.get(def.heading);\n    if (!items || items.length === 0) continue;\n    entries.push({\n      kind: \"heading\",\n      heading: def.heading,\n      groupId: `${inputId}-group-${def.heading}`,\n    });\n    for (const item of items) {\n      entries.push({ kind: \"item\", item, globalIndex });\n      globalIndex++;\n    }\n  }\n\n  for (const item of ungrouped) {\n    entries.push({ kind: \"item\", item, globalIndex });\n    globalIndex++;\n  }\n\n  return entries;\n});\n\n/**\n * The item list for the non-grouped case, used by keyboard navigation. Derived\n * from `renderEntries` so the two are always in sync.\n */\nconst flatItems = computed(() =>\n  renderEntries.value.filter((e): e is GroupedItem => e.kind === \"item\"),\n);\n\n/**\n * Keep the highlight within bounds. A filter that removes items can strand the\n * index past the end.\n */\nwatch(flatItems, (items) => {\n  if (highlightedIndex.value >= items.length) {\n    highlightedIndex.value = Math.max(0, items.length - 1);\n  }\n});\n\n/**\n * The documented reset: the highlight returns to the first match whenever the\n * query changes — whether the query came from typing or from a parent updating\n * the controlled `query` prop. Typing reaches this watcher through `setQuery`,\n * which is why onInput no longer resets the highlight itself.\n */\nwatch(queryValue, () => {\n  highlightedIndex.value = 0;\n});\n\n/**\n * The total number of results, announced to assistive technology through a live\n * region. Changes only when the filtered set changes, not on every keystroke.\n */\nconst resultCount = computed(() => filteredItems.value.length);\nconst announcement = ref(\"\");\nwatch(resultCount, (count) => {\n  const template =\n    count === 1 ? resolvedLabels.value.resultSingular : resolvedLabels.value.resultPlural;\n  announcement.value = template.replace(\"{count}\", String(count));\n});\n\n/**\n * The currently highlighted item, or `undefined` when the list is empty.\n */\nconst highlightedItem = computed(() => flatItems.value[highlightedIndex.value]?.item);\n\nfunction highlightUp(): void {\n  if (flatItems.value.length === 0) return;\n  highlightedIndex.value =\n    highlightedIndex.value <= 0 ? flatItems.value.length - 1 : highlightedIndex.value - 1;\n}\n\nfunction highlightDown(): void {\n  if (flatItems.value.length === 0) return;\n  highlightedIndex.value =\n    highlightedIndex.value >= flatItems.value.length - 1 ? 0 : highlightedIndex.value + 1;\n}\n\nfunction selectHighlighted(): void {\n  const item = highlightedItem.value;\n  if (!item || item.disabled) return;\n  emit(\"select\", item.value);\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  // A closed Command returns on any interaction except the two that leave it —\n  // Escape (the key that closed it, still under the same finger) and Tab\n  // (which moves focus elsewhere). Keydown fires before the input event, so\n  // typing also lands on an open list.\n  if (!isOpen.value && event.key !== \"Escape\" && event.key !== \"Tab\") restoreOpen();\n  switch (event.key) {\n    case \"ArrowDown\": {\n      event.preventDefault();\n      highlightDown();\n      break;\n    }\n    case \"ArrowUp\": {\n      event.preventDefault();\n      highlightUp();\n      break;\n    }\n    case \"Enter\": {\n      event.preventDefault();\n      selectHighlighted();\n      break;\n    }\n    case \"Escape\": {\n      event.preventDefault();\n      if (queryValue.value.length > 0) {\n        setQuery(\"\");\n      } else {\n        setOpen(false);\n      }\n      break;\n    }\n    case \"Home\": {\n      event.preventDefault();\n      if (flatItems.value.length > 0) highlightedIndex.value = 0;\n      break;\n    }\n    case \"End\": {\n      event.preventDefault();\n      if (flatItems.value.length > 0) highlightedIndex.value = flatItems.value.length - 1;\n      break;\n    }\n  }\n}\n\nfunction onInput(event: Event): void {\n  const value = (event.target as HTMLInputElement).value;\n  setQuery(value);\n}\n\nfunction selectItem(item: CommandItem): void {\n  if (item.disabled) return;\n  emit(\"select\", item.value);\n}\n\nfunction itemId(index: number): string {\n  return `${inputId}-option-${String(index)}`;\n}\n</script>\n\n<template>\n  <div\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n    :class=\"\n      cn(\n        'rounded-md border border-border bg-popover text-popover-foreground shadow-md overflow-hidden',\n        'outline-none',\n      )\n    \"\n  >\n    <div class=\"flex items-center border-b border-border\">\n      <input\n        :id=\"inputId\"\n        type=\"text\"\n        role=\"searchbox\"\n        autocomplete=\"off\"\n        autocorrect=\"off\"\n        spellcheck=\"false\"\n        aria-autocomplete=\"list\"\n        :aria-controls=\"listboxId\"\n        :aria-activedescendant=\"highlightedItem ? itemId(highlightedIndex) : undefined\"\n        :aria-labelledby=\"ariaLabelledby\"\n        :aria-label=\"ariaLabelledby ? undefined : resolvedLabels.searchLabel\"\n        :placeholder=\"resolvedLabels.placeholder\"\n        :value=\"queryValue\"\n        class=\"w-full px-3 py-2 text-sm bg-transparent text-foreground border-none outline-none placeholder:text-muted-foreground\"\n        @input=\"onInput\"\n        @keydown=\"onKeydown\"\n        @focus=\"restoreOpen\"\n        @click=\"restoreOpen\"\n      />\n    </div>\n    <div\n      v-if=\"isOpen\"\n      :id=\"listboxId\"\n      ref=\"listboxRef\"\n      role=\"listbox\"\n      tabindex=\"0\"\n      :aria-labelledby=\"inputId\"\n      class=\"max-h-[300px] overflow-y-auto p-1\"\n    >\n      <template\n        v-for=\"entry in renderEntries\"\n        :key=\"entry.kind === 'heading' ? entry.groupId : entry.item.value\"\n      >\n        <div\n          v-if=\"entry.kind === 'heading'\"\n          :id=\"entry.groupId\"\n          role=\"presentation\"\n          class=\"px-2 py-1.5 text-micro font-medium uppercase tracking-wide text-muted-foreground\"\n        >\n          {{ entry.heading }}\n        </div>\n        <!-- eslint-disable vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/interactive-supports-focus, vuejs-accessibility/mouse-events-have-key-events -->\n        <div\n          v-else\n          :id=\"itemId(entry.globalIndex)\"\n          role=\"option\"\n          :aria-selected=\"highlightedIndex === entry.globalIndex\"\n          :aria-disabled=\"entry.item.disabled || undefined\"\n          :data-active=\"highlightedIndex === entry.globalIndex || undefined\"\n          class=\"flex flex-col gap-0.5 rounded-sm px-2 py-1.5 text-sm cursor-pointer outline-none transition-colors duration-fast ease-out data-[active]:bg-primary-muted data-[active]:text-primary-text\"\n          @mouseenter=\"highlightedIndex = entry.globalIndex\"\n          @click=\"selectItem(entry.item)\"\n        >\n          <span>{{ entry.item.label }}</span>\n          <span v-if=\"entry.item.description\" class=\"text-xs text-muted-foreground\">\n            {{ entry.item.description }}\n          </span>\n        </div>\n      </template>\n\n      <div\n        v-if=\"filteredItems.length === 0\"\n        role=\"option\"\n        aria-selected=\"false\"\n        aria-disabled=\"true\"\n        class=\"px-2 py-6 text-center text-sm text-muted-foreground\"\n      >\n        {{ resolvedLabels.emptyMessage }}\n      </div>\n    </div>\n\n    <span :id=\"liveRegionId\" role=\"status\" aria-live=\"polite\" class=\"sr-only\">\n      {{ announcement }}\n    </span>\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/primitives/command/src/Command.vue.d.ts

@@ -0,0 +1,77 @@
+import type { CommandLabels, LabelOverrides } from "../../../labels/src/index";
+/**
+ * One searchable item in the command list. `value` is what the host receives on
+ * select; `label` is what the reader sees and what the filter matches against.
+ *
+ * Deliberately not `ComboboxOption` or `DropdownMenuEntry`: those shapes carry
+ * `modelValue` and `separator` fields respectively, and either would be
+ * dead weight here — a command is an action, not a value or a menu row.
+ */
+export interface CommandItem {
+    /** Unique key. */
+    value: string;
+    /** Visible label. */
+    label: string;
+    /** Optional description shown below the label. */
+    description?: string;
+    /** Group heading this item belongs to. */
+    group?: string;
+    /** Disabled state. */
+    disabled?: boolean;
+}
+/**
+ * A named section heading above a run of items. Only rendered when the group
+ * contains at least one item that survived the current filter.
+ */
+export interface CommandGroup {
+    /** Group heading text. */
+    heading: string;
+}
+/**
+ * Loom's English, co-located with the component so it tree-shakes with it.
+ * Every string a Command actually says is the chrome around the host's items,
+ * so the whole slot is here and none of it hides in the template.
+ */
+export declare const COMMAND_LABELS: CommandLabels;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /** The items to search through. */
+    items: CommandItem[];
+    /** Optional group definitions for section headers. */
+    groups?: CommandGroup[];
+    /** Controlled search query. */
+    query?: string | undefined;
+    /** Whether the command menu is open. */
+    open?: boolean | undefined;
+    /** Names for the strings this control supplies itself. */
+    labels?: LabelOverrides<CommandLabels> | undefined;
+    /** Accessible label by reference for the search input. */
+    ariaLabelledby?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (value: string) => any;
+    "update:open": (value: boolean) => any;
+    "update:query": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** The items to search through. */
+    items: CommandItem[];
+    /** Optional group definitions for section headers. */
+    groups?: CommandGroup[];
+    /** Controlled search query. */
+    query?: string | undefined;
+    /** Whether the command menu is open. */
+    open?: boolean | undefined;
+    /** Names for the strings this control supplies itself. */
+    labels?: LabelOverrides<CommandLabels> | undefined;
+    /** Accessible label by reference for the search input. */
+    ariaLabelledby?: string;
+}> & Readonly<{
+    onSelect?: (value: string) => any;
+    "onUpdate:open"?: (value: boolean) => any;
+    "onUpdate:query"?: (value: string) => any;
+}>, {
+    open: boolean | undefined;
+    labels: LabelOverrides<CommandLabels> | undefined;
+    query: string | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=Command.vue.d.ts.map