npm - @ecoma-io/loom - Versions diffs - 0.5.0 → 0.6.0 - Mend

@ecoma-io/loom 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1023) hide show

package/dist/primitives/calendar/src/Calendar.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Calendar.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 \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 \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 \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 \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 \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 \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":""}

package/dist/primitives/calendar/src/Calendar.vue_vue_type_script_setup_true_lang.js ADDED Viewed

@@ -0,0 +1,202 @@
+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 { 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 { getLocalTimeZone, isToday, parseDate, toCalendarDate } from "@internationalized/date";
+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 parseDate(value);
+			} catch {
+				return;
+			}
+		}
+		function toIso(date) {
+			return toCalendarDate(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 isToday(date, getLocalTimeZone());
+		}
+		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/primitives/calendar/src/Calendar.vue_vue_type_script_setup_true_lang.js.map ADDED Viewed

@@ -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 \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 \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 \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 \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 \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 \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,UAAU,KAAK;GACxB,QAAQ;IACN;GACF;EACF;EAMA,SAAS,MAAM,MAAyB;GACtC,OAAO,eAAe,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,QAAQ,MAAM,iBAAiB,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/primitives/card/src/Card.js.map ADDED Viewed

@@ -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 \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 \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 \n <div :class=\"cn(CARD_SECTIONS.body)\"><slot /></div>\n\n \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/primitives/card/src/Card.vue_vue_type_script_setup_true_lang.js.map ADDED Viewed

@@ -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 \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 \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 \n <div :class=\"cn(CARD_SECTIONS.body)\"><slot /></div>\n\n \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/primitives/carousel/src/Carousel.js.map ADDED Viewed

@@ -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 \n \n \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 \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/primitives/carousel/src/Carousel.vue_vue_type_script_setup_true_lang.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Carousel.vue_vue_type_script_setup_true_lang.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 \n \n \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 \n <p class=\"sr-only\" aria-live=\"polite\">\n {{ text.slide({ position: index + 1, total: totalCount() }) }}\n </p>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/primitives/checkbox/src/Checkbox.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Checkbox.js","names":[],"sources":["../../../../packages/primitives/checkbox/src/Checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CheckboxIndicator, CheckboxRoot } from \"reka-ui\";\nimport { Check, Minus } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\n\n/**\n * Checkbox — a single boolean choice inside a form (as opposed to Switch,\n * which flips a setting immediately, no form/\"Save\" involved). Built on Reka\n * UI's Checkbox (role=\"checkbox\" + aria-checked, Space toggles); also\n * supports the third \"indeterminate\" state for a parent checkbox over a\n * partially-selected group — shown as a dash instead of a check.\n *\n * An inline `label` wraps the control in a real `<label>` (a11y name comes\n * free); omit it and pass `ariaLabel`/`ariaLabelledby` instead when the\n * visible label lives elsewhere (e.g. a table header cell).\n *\n * Inside a [Field](../Field/Field.vue) it wires itself through\n * `useFieldControl()`. CheckboxRoot renders a labelable `<button\n * role=\"checkbox\">`, so the row's id lands on the box and the row's\n * `<label for>` names it, with the row's description, `name`, `required` and\n * `invalid` arriving alongside. **Name it in one place.** A `label` here *and*\n * a label on the row gives one control two accessible names, read one after\n * the other, and nothing reports it — not axe, which has no rule for a name\n * that is merely doubled.\n *\n * There is no `readonly`, and a row's is ignored rather than approximated. A\n * checkbox that may be read but not toggled is a disabled checkbox: the native\n * `readonly` attribute is a no-op on `<input type=\"checkbox\">` for exactly that\n * reason, and painting one as editable-but-filled would promise an edit that\n * never lands.\n */\nconst props = withDefaults(\n defineProps<{\n /** `true`/`false` for a plain toggle, `\"indeterminate\"` for a parent over a partially-selected group. Omit to let the box own its own state. */\n modelValue?: boolean | \"indeterminate\" | undefined;\n /** Blocks both click and keyboard input, and drains the box to the neutral well. Unset defers to a wrapping Field. */\n disabled?: boolean | undefined;\n /** Visible text, rendered inside the wrapping `<label>`. Omit and use `ariaLabel`/`ariaLabelledby` when the label lives elsewhere. */\n label?: string;\n /** Accessible name when no visible `label` is rendered by this component. */\n ariaLabel?: string;\n /** Accessible name sourced from another element's id, when no visible `label` is rendered by this component. */\n ariaLabelledby?: string;\n }>(),\n {\n // Not `false`. A concrete value here would mean \"the host owns this\", and\n // a host that passes nothing would get a box that emits its update event\n // and never moves — a control that looks broken rather than one that\n // reports an error. `undefined` is what leaves it self-managing, and the\n // explicit default is what survives Vue's absent-Boolean-casts-to-false\n // rule.\n modelValue: undefined,\n // Not `false` either, and for the second half of the same reason: absent\n // has to stay tellable from `false` all the way into `useFieldControl()`,\n // or a Field above could never disable the row while `:disabled=\"false\"`\n // could never overrule one that did.\n disabled: undefined,\n },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: boolean | \"indeterminate\"] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: boxAttrs } = useSplitAttrs();\n\n// Routed by hand because nothing was routing it: the two branches and the\n// comment between them make this component's root a *fragment*, and Vue never\n// auto-inherits onto one — it warns and drops the attributes. So `id`,\n// `data-testid` and a caller's `class` all went nowhere until this split.\n// `class` now lands on whichever branch's root renders (a caller sizes the\n// labelled row, or the bare box) and everything else on the CheckboxRoot in\n// both, which is where a row's id has to be: `<label for>` resolves to a\n// labelable element, and the `<button role=\"checkbox\">` is the one here.\n//\n// `field.attrs` spreads **after** `boxAttrs` — see TextField.vue for the full\n// reasoning. The bag has already resolved the caller's own id and merged their\n// description with the row's, and it drops every key that resolved to nothing,\n// so it can only add.\n//\n// `name`, `required` and `invalid` are absent from the bag below because this\n// component has no prop for any of them; the row's answer then stands\n// unopposed, which is what wrapping it in a Field asked for. `readonly` is\n// absent for the different reason the docblock gives.\n//\n// `required` is then the one resolved value that cannot ride in on\n// `field.attrs`: CheckboxRoot renders `aria-required` itself, from its own\n// prop, *after* it spreads the fallthrough attrs — so an `aria-required` in\n// that bag is overwritten by a `false` and the row is silently unheard. It goes\n// through `:required` on the element below instead. That prop also reaches the\n// hidden input Reka mints inside a `<form>`, so unlike TextField this control\n// does carry native enforcement with it; the alternative is a checkbox that\n// tells a screen reader it is optional while its row's asterisk says otherwise.\nconst field = useFieldControl(() => ({\n id: attrs.id as string | undefined,\n describedBy: attrs[\"aria-describedby\"] as string | undefined,\n disabled: props.disabled,\n}));\n\nconst boxClass = cn(\n \"flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-input bg-background\",\n // Transform (the press squish) rides --ease-spring for a restrained release,\n // while fill/border stay on the instant --ease-out — the \"springy transform,\n // steady color\" split (boxStyle below), same language as Button/Switch.\n \"active:scale-90\",\n // Checked = a decision (Loom law): the box fills with primary.\n \"data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n \"data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground\",\n // Focus draws the weave tight: the brand ring blooms.\n \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n \"disabled:cursor-not-allowed\",\n // Drained, not dimmed. `opacity-50` faded box and border together — the\n // failure Button records for its own dim, and no smaller for holding a\n // glyph rather than words. An unchecked box falls to `bg-muted` with the\n // rim every unavailable control slackens to; a checked or indeterminate\n // one keeps its primary fill untouched, because switched-on is information\n // — the same verdict Switch's thumb and RadioGroup's dot render, so a\n // selected control reads as selected whether it is available or not, and\n // the native `disabled` attribute carries unavailability regardless. The\n // compound `disabled:data-[state=unchecked]:` form is deliberate: Tailwind\n // sorts data variants after plain `disabled:`, so a bare `disabled:bg-muted`\n // would lose to `data-[state=checked]:bg-primary` and never fire.\n \"disabled:data-[state=unchecked]:border-border disabled:data-[state=unchecked]:bg-muted\",\n);\n\nconst boxStyle =\n \"transition: transform var(--duration-fast) var(--ease-spring), background-color var(--duration-instant) var(--ease-out), border-color var(--duration-instant) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);\";\n</script>\n\n<template>\n \n \n <label\n v-if=\"label\"\n :class=\"\n cn(\n 'inline-flex min-h-6 items-center gap-2 text-sm text-foreground',\n // Disabled text stays readable (AA on the light ground) — only the box drains.\n field.disabled ? 'cursor-not-allowed text-muted-foreground' : 'cursor-pointer',\n attrs.class as string,\n )\n \"\n >\n <CheckboxRoot\n v-bind=\"{ ...optional({ modelValue }), ...boxAttrs, ...field.attrs }\"\n :disabled=\"field.disabled\"\n :required=\"field.required\"\n :class=\"cn(boxClass)\"\n :style=\"boxStyle\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n >\n <template #default=\"{ state }\">\n \n <CheckboxIndicator class=\"flex animate-scale-in items-center justify-center text-current\">\n <Minus v-if=\"state === 'indeterminate'\" class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n <Check v-else class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n </CheckboxIndicator>\n </template>\n </CheckboxRoot>\n {{ label }}\n </label>\n \n <CheckboxRoot\n v-else\n v-bind=\"{ ...optional({ modelValue }), ...boxAttrs, ...field.attrs }\"\n :disabled=\"field.disabled\"\n :required=\"field.required\"\n :aria-label=\"ariaLabel\"\n :aria-labelledby=\"ariaLabelledby\"\n :class=\"cn(boxClass, 'min-h-6 min-w-6', attrs.class as string)\"\n :style=\"boxStyle\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n >\n <template #default=\"{ state }\">\n <CheckboxIndicator class=\"flex animate-scale-in items-center justify-center text-current\">\n <Minus v-if=\"state === 'indeterminate'\" class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n <Check v-else class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n </CheckboxIndicator>\n </template>\n </CheckboxRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/checkbox/src/Checkbox.vue_vue_type_script_setup_true_lang.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Checkbox.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../packages/primitives/checkbox/src/Checkbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CheckboxIndicator, CheckboxRoot } from \"reka-ui\";\nimport { Check, Minus } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\n\n/**\n * Checkbox — a single boolean choice inside a form (as opposed to Switch,\n * which flips a setting immediately, no form/\"Save\" involved). Built on Reka\n * UI's Checkbox (role=\"checkbox\" + aria-checked, Space toggles); also\n * supports the third \"indeterminate\" state for a parent checkbox over a\n * partially-selected group — shown as a dash instead of a check.\n *\n * An inline `label` wraps the control in a real `<label>` (a11y name comes\n * free); omit it and pass `ariaLabel`/`ariaLabelledby` instead when the\n * visible label lives elsewhere (e.g. a table header cell).\n *\n * Inside a [Field](../Field/Field.vue) it wires itself through\n * `useFieldControl()`. CheckboxRoot renders a labelable `<button\n * role=\"checkbox\">`, so the row's id lands on the box and the row's\n * `<label for>` names it, with the row's description, `name`, `required` and\n * `invalid` arriving alongside. **Name it in one place.** A `label` here *and*\n * a label on the row gives one control two accessible names, read one after\n * the other, and nothing reports it — not axe, which has no rule for a name\n * that is merely doubled.\n *\n * There is no `readonly`, and a row's is ignored rather than approximated. A\n * checkbox that may be read but not toggled is a disabled checkbox: the native\n * `readonly` attribute is a no-op on `<input type=\"checkbox\">` for exactly that\n * reason, and painting one as editable-but-filled would promise an edit that\n * never lands.\n */\nconst props = withDefaults(\n defineProps<{\n /** `true`/`false` for a plain toggle, `\"indeterminate\"` for a parent over a partially-selected group. Omit to let the box own its own state. */\n modelValue?: boolean | \"indeterminate\" | undefined;\n /** Blocks both click and keyboard input, and drains the box to the neutral well. Unset defers to a wrapping Field. */\n disabled?: boolean | undefined;\n /** Visible text, rendered inside the wrapping `<label>`. Omit and use `ariaLabel`/`ariaLabelledby` when the label lives elsewhere. */\n label?: string;\n /** Accessible name when no visible `label` is rendered by this component. */\n ariaLabel?: string;\n /** Accessible name sourced from another element's id, when no visible `label` is rendered by this component. */\n ariaLabelledby?: string;\n }>(),\n {\n // Not `false`. A concrete value here would mean \"the host owns this\", and\n // a host that passes nothing would get a box that emits its update event\n // and never moves — a control that looks broken rather than one that\n // reports an error. `undefined` is what leaves it self-managing, and the\n // explicit default is what survives Vue's absent-Boolean-casts-to-false\n // rule.\n modelValue: undefined,\n // Not `false` either, and for the second half of the same reason: absent\n // has to stay tellable from `false` all the way into `useFieldControl()`,\n // or a Field above could never disable the row while `:disabled=\"false\"`\n // could never overrule one that did.\n disabled: undefined,\n },\n);\n\ndefineEmits<{ \"update:modelValue\": [value: boolean | \"indeterminate\"] }>();\n\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: boxAttrs } = useSplitAttrs();\n\n// Routed by hand because nothing was routing it: the two branches and the\n// comment between them make this component's root a *fragment*, and Vue never\n// auto-inherits onto one — it warns and drops the attributes. So `id`,\n// `data-testid` and a caller's `class` all went nowhere until this split.\n// `class` now lands on whichever branch's root renders (a caller sizes the\n// labelled row, or the bare box) and everything else on the CheckboxRoot in\n// both, which is where a row's id has to be: `<label for>` resolves to a\n// labelable element, and the `<button role=\"checkbox\">` is the one here.\n//\n// `field.attrs` spreads **after** `boxAttrs` — see TextField.vue for the full\n// reasoning. The bag has already resolved the caller's own id and merged their\n// description with the row's, and it drops every key that resolved to nothing,\n// so it can only add.\n//\n// `name`, `required` and `invalid` are absent from the bag below because this\n// component has no prop for any of them; the row's answer then stands\n// unopposed, which is what wrapping it in a Field asked for. `readonly` is\n// absent for the different reason the docblock gives.\n//\n// `required` is then the one resolved value that cannot ride in on\n// `field.attrs`: CheckboxRoot renders `aria-required` itself, from its own\n// prop, *after* it spreads the fallthrough attrs — so an `aria-required` in\n// that bag is overwritten by a `false` and the row is silently unheard. It goes\n// through `:required` on the element below instead. That prop also reaches the\n// hidden input Reka mints inside a `<form>`, so unlike TextField this control\n// does carry native enforcement with it; the alternative is a checkbox that\n// tells a screen reader it is optional while its row's asterisk says otherwise.\nconst field = useFieldControl(() => ({\n id: attrs.id as string | undefined,\n describedBy: attrs[\"aria-describedby\"] as string | undefined,\n disabled: props.disabled,\n}));\n\nconst boxClass = cn(\n \"flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-input bg-background\",\n // Transform (the press squish) rides --ease-spring for a restrained release,\n // while fill/border stay on the instant --ease-out — the \"springy transform,\n // steady color\" split (boxStyle below), same language as Button/Switch.\n \"active:scale-90\",\n // Checked = a decision (Loom law): the box fills with primary.\n \"data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n \"data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground\",\n // Focus draws the weave tight: the brand ring blooms.\n \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n \"disabled:cursor-not-allowed\",\n // Drained, not dimmed. `opacity-50` faded box and border together — the\n // failure Button records for its own dim, and no smaller for holding a\n // glyph rather than words. An unchecked box falls to `bg-muted` with the\n // rim every unavailable control slackens to; a checked or indeterminate\n // one keeps its primary fill untouched, because switched-on is information\n // — the same verdict Switch's thumb and RadioGroup's dot render, so a\n // selected control reads as selected whether it is available or not, and\n // the native `disabled` attribute carries unavailability regardless. The\n // compound `disabled:data-[state=unchecked]:` form is deliberate: Tailwind\n // sorts data variants after plain `disabled:`, so a bare `disabled:bg-muted`\n // would lose to `data-[state=checked]:bg-primary` and never fire.\n \"disabled:data-[state=unchecked]:border-border disabled:data-[state=unchecked]:bg-muted\",\n);\n\nconst boxStyle =\n \"transition: transform var(--duration-fast) var(--ease-spring), background-color var(--duration-instant) var(--ease-out), border-color var(--duration-instant) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);\";\n</script>\n\n<template>\n \n \n <label\n v-if=\"label\"\n :class=\"\n cn(\n 'inline-flex min-h-6 items-center gap-2 text-sm text-foreground',\n // Disabled text stays readable (AA on the light ground) — only the box drains.\n field.disabled ? 'cursor-not-allowed text-muted-foreground' : 'cursor-pointer',\n attrs.class as string,\n )\n \"\n >\n <CheckboxRoot\n v-bind=\"{ ...optional({ modelValue }), ...boxAttrs, ...field.attrs }\"\n :disabled=\"field.disabled\"\n :required=\"field.required\"\n :class=\"cn(boxClass)\"\n :style=\"boxStyle\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n >\n <template #default=\"{ state }\">\n \n <CheckboxIndicator class=\"flex animate-scale-in items-center justify-center text-current\">\n <Minus v-if=\"state === 'indeterminate'\" class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n <Check v-else class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n </CheckboxIndicator>\n </template>\n </CheckboxRoot>\n {{ label }}\n </label>\n \n <CheckboxRoot\n v-else\n v-bind=\"{ ...optional({ modelValue }), ...boxAttrs, ...field.attrs }\"\n :disabled=\"field.disabled\"\n :required=\"field.required\"\n :aria-label=\"ariaLabel\"\n :aria-labelledby=\"ariaLabelledby\"\n :class=\"cn(boxClass, 'min-h-6 min-w-6', attrs.class as string)\"\n :style=\"boxStyle\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n >\n <template #default=\"{ state }\">\n <CheckboxIndicator class=\"flex animate-scale-in items-center justify-center text-current\">\n <Minus v-if=\"state === 'indeterminate'\" class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n <Check v-else class=\"h-3 w-3\" :stroke-width=\"2.5\" />\n </CheckboxIndicator>\n </template>\n </CheckboxRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+HA,IAAM,WACJ;;;;;;;;;;;;;;;;;;;EA9FF,MAAM,QAAQ;EAgCd,MAAM,EAAE,OAAO,MAAM,aAAa,cAAc;EA6BhD,MAAM,QAAQ,uBAAuB;GACnC,IAAI,MAAM;GACV,aAAa,MAAM;GACnB,UAAU,MAAM;EAClB,EAAE;EAEF,MAAM,WAAW,GACf,kGAIA,mBAEA,oHACA,sIAEA,+GACA,+BAYA,wFACF;;GAaU,OAAA,QAAA,SADR,UAAA,GAAA,mBA+BQ,SAAA;;IA7BL,OAAK,eAAS,MAAA,EAAA,CAAE,CAAA,kEAA4K,MAAA,KAAA,CAAK,CAAC,WAAQ,6CAAA,kBAA0E,MAAA,KAAA,CAAK,CAAC,KAAA,CAAA;GAS3R,GAAA,CAAA,YAkBe,MAAA,YAAA,GAlBf,WAkBe;IAAA,GAjBA,MAAA,QAAA,CAAQ,CAAA,EAAA,YAAG,QAAA,WAAU,CAAA;IAAA,GAAQ,MAAA,QAAA;IAAQ,GAAK,MAAA,KAAA,CAAK,CAAC;GAAK,GAAA;IACjE,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,OAAO,MAAA,EAAA,CAAE,CAAC,MAAA,QAAA,CAAQ;IAClB,OAAO;IACP,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,MAAM;;IAE3C,SAAO,SAQI,EARA,YAAK,CAKzB,YAGoB,MAAA,iBAAA,GAAA,EAHD,OAAM,iEAAgE,GAAA;KACvF,SAAA,cAA8E,CAAjE,UAAK,mBAAlB,UAAA,GAAA,YAA8E,MAAA,KAAA,GAAA;;MAAtC,OAAM;MAAW,gBAAc;KACvE,CAAA,MAAA,UAAA,GAAA,YAAoD,MAAA,KAAA,GAAA;;MAAtC,OAAM;MAAW,gBAAc;;;;;;;;;GAGpC,CAAA,GAAA,gBAAA,MACf,gBAAG,QAAA,KAAK,GAAA,CAAA,CAAA,GAAA,CAAA,MAIV,UAAA,GAAA,YAiBe,MAAA,YAAA,GAjBf,WAiBe,EAAA,KAAA,EAAA,GAAA;IAAA,GAfA,MAAA,QAAA,CAAQ,CAAA,EAAA,YAAG,QAAA,WAAU,CAAA;IAAA,GAAQ,MAAA,QAAA;IAAQ,GAAK,MAAA,KAAA,CAAK,CAAC;GAAK,GAAA;IACjE,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,cAAY,QAAA;IACZ,mBAAiB,QAAA;IACjB,OAAO,MAAA,EAAA,CAAE,CAAC,MAAA,QAAA,GAAQ,mBAAqB,MAAA,KAAA,CAAK,CAAC,KAAK;IAClD,OAAO;IACP,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,qBAAsB,MAAM;;IAE3C,SAAO,SAII,EAJA,YAAK,CACzB,YAGoB,MAAA,iBAAA,GAAA,EAHD,OAAM,iEAAgE,GAAA;KACvF,SAAA,cAA8E,CAAjE,UAAK,mBAAlB,UAAA,GAAA,YAA8E,MAAA,KAAA,GAAA;;MAAtC,OAAM;MAAW,gBAAc;KACvE,CAAA,MAAA,UAAA,GAAA,YAAoD,MAAA,KAAA,GAAA;;MAAtC,OAAM;MAAW,gBAAc"}

package/dist/primitives/chip/src/Chip.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Chip.js","names":[],"sources":["../../../../packages/primitives/chip/src/Chip.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * The same eight names Badge carries, deliberately — a chip and a badge sitting\n * in one row are the same object in two moods, so `success` has to mean the\n * same green in both. A ninth name here would be a second vocabulary for one\n * palette.\n */\nexport type ChipVariant =\n \"neutral\" | \"outline\" | \"primary\" | \"success\" | \"warning\" | \"info\" | \"destructive\" | \"accent\";\n\n/**\n * Two heights off the shared control scale (the text input's `sm` and `md`), so\n * a row of chips above a field lines up with it. There is no `lg`: a chip is a\n * token, and one big enough to need the 44px step is a Button.\n */\nexport type ChipSize = \"sm\" | \"md\";\n\n/**\n * The container. It is the coloured pill, and it is deliberately not the\n * interactive node — see the docblock below for why that separation is the\n * whole component.\n *\n * Selection is a state the *edges* deepen: the hue-carrying variants draw a\n * stronger border around the wash they already sit in, the hueless ones swap\n * their fill for the primary wash. It is never any one signal alone that says\n * so — every selected chip also carries `aria-pressed=\"true\"` and a check\n * glyph, which is what keeps the state legible to a reader who cannot resolve\n * a deepened edge from a resting one.\n */\nexport const chipVariants = cva(\n [\n \"group inline-flex max-w-full items-center rounded-full border align-middle font-medium\",\n \"transition-[background-color,border-color,color] duration-fast ease-out\",\n // No `opacity` here, and that is the point. `data-[disabled]:opacity-50`\n // dimmed the pill *and* its label together, taking a 5.01:1 label down to\n // 2.78:1 against its own fill — halving the alpha more than halves the\n // contrast. Unavailability is painted in measured colours instead: the\n // fill and border below, and `disabledText` on the label and the glyph\n // beside it.\n \"data-[disabled]:cursor-not-allowed\",\n ],\n {\n // `satisfies` keeps the two halves honest: the union above is the name a\n // consumer imports and the documentation prints, the map below is the\n // classes. Adding a member to one and not the other stops compiling.\n variants: {\n variant: {\n // The two hueless variants take the primary wash when selected —\n // `--color-primary-muted` is the repository's selected/active fill, the\n // one Select's checked row already uses, so a chosen filter reads as a\n // human decision rather than as a new colour invented here.\n neutral:\n \"border-transparent bg-subtle text-subtle-foreground data-[selected]:border-primary/40 data-[selected]:bg-primary-muted data-[selected]:text-primary-text\",\n outline:\n \"border-border bg-transparent text-muted-foreground data-[selected]:border-primary/40 data-[selected]:bg-primary-muted data-[selected]:text-primary-text\",\n // The hue-carrying variants deepen their own hue instead of jumping to\n // the primary: a reader picked this chip *because* it is the destructive\n // one, and swapping its colour on selection would throw that away.\n // The tinted washes use the opaque `*-muted` tokens, not an alpha of\n // the base hue: `bg-*-/12` composites against the surface behind it, so\n // a chip renders at 4.46:1 on `bg-card` and differently on `bg-sunken`\n // — under the AA floor and inconsistent. `*-muted` is mixed to hold\n // ≥4.5:1 against its own `*-text` in both themes (see theme.css),\n // which is what these variants were named for.\n //\n // Selection deepens the border, not the fill: a `data-[selected]:bg-*-/20`\n // over the wash drops the text to ~4.2:1 in light mode (success, warning,\n // info, destructive), below the same floor the unselected state holds.\n // `*-muted` is the theme's \"selected/active fill\" anyway, so the state is\n // carried by the deeper border, the check glyph and `aria-pressed` — the\n // signals the docblock below already names as what makes selection legible.\n primary:\n \"border-transparent bg-primary-muted text-primary-text data-[selected]:border-primary/45\",\n success:\n \"border-transparent bg-success-muted text-success-text data-[selected]:border-success/45\",\n // `-text`, matching Badge and the other functional siblings: the wash\n // is mixed to hold contrast against the `*-text` rung in both themes,\n // not against the base hue.\n warning:\n \"border-transparent bg-warning-muted text-warning-text data-[selected]:border-warning/45\",\n info: \"border-transparent bg-info-muted text-info-text data-[selected]:border-info/45\",\n destructive:\n \"border-transparent bg-destructive-muted text-destructive-text data-[selected]:border-destructive/45\",\n accent:\n \"border-accent/40 bg-accent-muted text-accent-text data-[selected]:border-accent/70\",\n } satisfies Record<ChipVariant, string>,\n size: {\n sm: \"h-8 text-xs\",\n md: \"h-9 text-sm\",\n } satisfies Record<ChipSize, string>,\n },\n defaultVariants: { variant: \"neutral\", size: \"md\" },\n },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Check, X } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\n\n/**\n * Chip — an interactive token: a filter that switches on, an entity that can be\n * dismissed, a recipient sitting in a picker.\n *\n * The line against Badge is the one worth knowing, because the two look almost\n * identical: **Badge is a status label a reader only looks at; Chip is a\n * control a reader acts on.** A Badge that gained a click handler would be a\n * Chip, and a Chip nobody can toggle or dismiss is a Badge wearing a button's\n * clothes — it takes a Tab stop and announces itself as pressable while doing\n * nothing. Reach for Button when the token *is* the action rather than a\n * standing state, and for SegmentedControl when exactly one of a small set must\n * be chosen; a row of chips is many-of-many, and none-of-them is a valid answer.\n *\n * The structure is the component. A chip that both toggles and dismisses has\n * two controls, and they are **siblings inside a non-interactive container** —\n * never a dismiss `<button>` nested inside a toggle `<button>`. Nested buttons\n * are invalid HTML: the parser reparents them, and screen readers disagree\n * about which one they are on and what a press means. So the pill is a `<span>`\n * that paints, and everything pressable is a child of it.\n *\n * Both controls stay on the natural Tab order rather than roving. They are two\n * different actions on one object, not N instances of one control, and a reader\n * who tabbed to the chip has to be able to reach \"remove\" without guessing an\n * arrow key.\n */\nconst props = withDefaults(\n defineProps<{\n /** Whether the chip is switched on. Binding it is what makes the chip a toggle — leave it unset for a chip that is only dismissable, and the label renders as inert text instead of a press target. */\n selected?: boolean | undefined;\n /** Renders a dismiss control beside the label, as a sibling of the toggle rather than inside it. */\n removable?: boolean;\n /** The accessible name of the dismiss control. Localise it, or qualify it — \"Remove Ana Duarte\" reads far better in a list of recipients. */\n removeLabel?: string;\n /** Unavailable: drains the pill to a neutral fill, mutes the label, and makes both controls inert to pointer and keyboard. */\n disabled?: boolean;\n /** Which status or meta the token carries. The names and colours are Badge's, so a chip and a badge never disagree. */\n variant?: ChipVariant;\n /** Chip height, off the shared control scale so a row of chips lines up with the field above it. */\n size?: ChipSize;\n }>(),\n {\n // Not `false`. `undefined` is the signal that this chip is not a toggle at\n // all, and Vue casts an absent Boolean prop to `false` unless a default\n // says otherwise — without this line every chip would claim to be a toggle\n // that is switched off, and a dismiss-only chip would grow a dead Tab stop.\n selected: undefined,\n removable: false,\n removeLabel: \"Remove\",\n disabled: false,\n variant: \"neutral\",\n size: \"md\",\n },\n);\n\nconst emit = defineEmits<{\n /** The flipped selection. The chip does not update itself: a filter chip's state is the query it stands for, and a chip that switched on locally would keep claiming a result set the host never fetched. */\n \"update:selected\": [value: boolean];\n /** The dismiss control was activated. Removing the chip from the list is the host's to do. */\n remove: [];\n}>();\n\nconst toggleable = computed(() => props.selected !== undefined);\n\n// The label's horizontal padding, shared by both branches below so the pill is\n// the same width whether or not it is pressable. The dismiss control supplies\n// its own trailing room, so the label gives its right side back when one is\n// present.\nconst labelPad = computed(() =>\n cn(props.size === \"sm\" ? \"px-2.5\" : \"px-3\", props.removable && \"pr-1\"),\n);\n\n// Springy transform, steady colour — the same split Button and Checkbox use, so\n// a chip press feels like every other press in the library.\nconst pressStyle =\n \"transition: transform var(--duration-fast) var(--ease-spring), background-color var(--duration-fast) var(--ease-out);\";\n\n// The unavailable label colour, and it belongs on the label rather than on the\n// pill around it. A colour set on the container is only *inherited* here, and\n// the container already carries `data-[selected]:text-primary-text` — an attribute\n// selector no plain class on the same element outranks. On the label itself it\n// is a declaration rather than an inheritance, so it wins whatever the pill\n// resolved to: 4.67:1 over the drained `--color-muted` fill, 4.77:1 over the\n// primary wash a selected chip keeps.\nconst disabledText = \"group-data-[disabled]:text-muted-foreground\";\n\n// Both inner controls are surfaces *inside* a 32px pill, so the standard\n// outward `outline-offset-2` would draw the toggle's ring straight through the\n// dismiss control sitting 4px to its right, and vice versa. Inset instead —\n// the ring lands just inside the pill's own border, which is where the eye\n// already is. WindowControls takes the same offset for the same reason.\nconst focusRing =\n \"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\";\n\n// Everything a host passes lands on the container: it is the node with an\n// identity (a data-testid, a key in a list), while the two controls inside it\n// are named by their own content and by `removeLabel`. `class` is pulled out of\n// that spread and merged through `cn()` instead — Vue's own class merge only\n// concatenates, so a caller's `max-w-32` would win or lose against the pill's\n// own utilities depending on Tailwind's emission order rather than on intent.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: containerAttrs } = useSplitAttrs();\n</script>\n\n<template>\n <span\n v-bind=\"containerAttrs\"\n :data-selected=\"selected || undefined\"\n :data-disabled=\"disabled || undefined\"\n :class=\"\n cn(\n chipVariants({ variant, size }),\n // Drained to the neutral well, with the hairline the coloured variants\n // hide: an unavailable chip gives up its hue rather than its legibility.\n // A *selected* one keeps the primary wash — `data-[selected]:bg-primary-muted`\n // outranks a plain class — which is right: switched-on is information,\n // and the label is muted over either fill.\n //\n // `border-border` and not the strong weight it used to take.\n // `theme.css` reserves the strong hairline for a block that must\n // *assert* its edge, which is the opposite of what this state says, and\n // the lighter rim is the same one every other unavailable control in the\n // library slackens to — so a disabled chip in a row of disabled\n // controls is one treatment rather than a second.\n disabled && 'border-border bg-muted',\n removable && 'pr-1',\n attrs.class as string,\n )\n \"\n >\n <button\n v-if=\"toggleable\"\n type=\"button\"\n :aria-pressed=\"selected\"\n :disabled=\"disabled\"\n :style=\"pressStyle\"\n :class=\"\n cn(\n 'inline-flex h-full min-w-0 select-none items-center gap-1 rounded-full',\n labelPad,\n // A neutral darkening rather than a token fill: the pill underneath\n // can be any of eight colours, and a hover state is not an action\n // colour.\n 'hover:bg-foreground/5 active:scale-press',\n focusRing,\n 'disabled:pointer-events-none',\n )\n \"\n @click=\"emit('update:selected', !selected)\"\n >\n \n <span\n aria-hidden=\"true\"\n class=\"inline-flex w-0 shrink-0 items-center overflow-hidden opacity-0 transition-[width,opacity] duration-fast ease-spring group-data-[selected]:w-4 group-data-[selected]:opacity-100\"\n >\n <Check class=\"h-3.5 w-3.5 shrink-0\" />\n </span>\n <span :class=\"cn('truncate', disabledText)\">\n \n <slot />\n </span>\n </button>\n <span v-else :class=\"cn('inline-flex min-w-0 items-center', labelPad)\">\n <span :class=\"cn('truncate', disabledText)\"><slot /></span>\n </span>\n\n \n <button\n v-if=\"removable\"\n type=\"button\"\n :aria-label=\"removeLabel\"\n :disabled=\"disabled\"\n :style=\"pressStyle\"\n :class=\"\n cn(\n 'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full',\n // Not `hover:bg-subtle`, the usual neutral well: it is opaque, and\n // over a coloured pill it punches a grey hole through the fill\n // instead of darkening it.\n 'hover:bg-foreground/10 active:scale-90',\n focusRing,\n disabledText,\n 'disabled:pointer-events-none',\n )\n \"\n @click=\"emit('remove')\"\n >\n <X class=\"h-3.5 w-3.5\" />\n </button>\n </span>\n</template>\n"],"mappings":""}

package/dist/primitives/chip/src/Chip.vue_vue_type_script_setup_true_lang.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Chip.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/chip/src/Chip.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { cva } from \"class-variance-authority\";\n\n/**\n * The same eight names Badge carries, deliberately — a chip and a badge sitting\n * in one row are the same object in two moods, so `success` has to mean the\n * same green in both. A ninth name here would be a second vocabulary for one\n * palette.\n */\nexport type ChipVariant =\n \"neutral\" | \"outline\" | \"primary\" | \"success\" | \"warning\" | \"info\" | \"destructive\" | \"accent\";\n\n/**\n * Two heights off the shared control scale (the text input's `sm` and `md`), so\n * a row of chips above a field lines up with it. There is no `lg`: a chip is a\n * token, and one big enough to need the 44px step is a Button.\n */\nexport type ChipSize = \"sm\" | \"md\";\n\n/**\n * The container. It is the coloured pill, and it is deliberately not the\n * interactive node — see the docblock below for why that separation is the\n * whole component.\n *\n * Selection is a state the *edges* deepen: the hue-carrying variants draw a\n * stronger border around the wash they already sit in, the hueless ones swap\n * their fill for the primary wash. It is never any one signal alone that says\n * so — every selected chip also carries `aria-pressed=\"true\"` and a check\n * glyph, which is what keeps the state legible to a reader who cannot resolve\n * a deepened edge from a resting one.\n */\nexport const chipVariants = cva(\n [\n \"group inline-flex max-w-full items-center rounded-full border align-middle font-medium\",\n \"transition-[background-color,border-color,color] duration-fast ease-out\",\n // No `opacity` here, and that is the point. `data-[disabled]:opacity-50`\n // dimmed the pill *and* its label together, taking a 5.01:1 label down to\n // 2.78:1 against its own fill — halving the alpha more than halves the\n // contrast. Unavailability is painted in measured colours instead: the\n // fill and border below, and `disabledText` on the label and the glyph\n // beside it.\n \"data-[disabled]:cursor-not-allowed\",\n ],\n {\n // `satisfies` keeps the two halves honest: the union above is the name a\n // consumer imports and the documentation prints, the map below is the\n // classes. Adding a member to one and not the other stops compiling.\n variants: {\n variant: {\n // The two hueless variants take the primary wash when selected —\n // `--color-primary-muted` is the repository's selected/active fill, the\n // one Select's checked row already uses, so a chosen filter reads as a\n // human decision rather than as a new colour invented here.\n neutral:\n \"border-transparent bg-subtle text-subtle-foreground data-[selected]:border-primary/40 data-[selected]:bg-primary-muted data-[selected]:text-primary-text\",\n outline:\n \"border-border bg-transparent text-muted-foreground data-[selected]:border-primary/40 data-[selected]:bg-primary-muted data-[selected]:text-primary-text\",\n // The hue-carrying variants deepen their own hue instead of jumping to\n // the primary: a reader picked this chip *because* it is the destructive\n // one, and swapping its colour on selection would throw that away.\n // The tinted washes use the opaque `*-muted` tokens, not an alpha of\n // the base hue: `bg-*-/12` composites against the surface behind it, so\n // a chip renders at 4.46:1 on `bg-card` and differently on `bg-sunken`\n // — under the AA floor and inconsistent. `*-muted` is mixed to hold\n // ≥4.5:1 against its own `*-text` in both themes (see theme.css),\n // which is what these variants were named for.\n //\n // Selection deepens the border, not the fill: a `data-[selected]:bg-*-/20`\n // over the wash drops the text to ~4.2:1 in light mode (success, warning,\n // info, destructive), below the same floor the unselected state holds.\n // `*-muted` is the theme's \"selected/active fill\" anyway, so the state is\n // carried by the deeper border, the check glyph and `aria-pressed` — the\n // signals the docblock below already names as what makes selection legible.\n primary:\n \"border-transparent bg-primary-muted text-primary-text data-[selected]:border-primary/45\",\n success:\n \"border-transparent bg-success-muted text-success-text data-[selected]:border-success/45\",\n // `-text`, matching Badge and the other functional siblings: the wash\n // is mixed to hold contrast against the `*-text` rung in both themes,\n // not against the base hue.\n warning:\n \"border-transparent bg-warning-muted text-warning-text data-[selected]:border-warning/45\",\n info: \"border-transparent bg-info-muted text-info-text data-[selected]:border-info/45\",\n destructive:\n \"border-transparent bg-destructive-muted text-destructive-text data-[selected]:border-destructive/45\",\n accent:\n \"border-accent/40 bg-accent-muted text-accent-text data-[selected]:border-accent/70\",\n } satisfies Record<ChipVariant, string>,\n size: {\n sm: \"h-8 text-xs\",\n md: \"h-9 text-sm\",\n } satisfies Record<ChipSize, string>,\n },\n defaultVariants: { variant: \"neutral\", size: \"md\" },\n },\n);\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Check, X } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\n\n/**\n * Chip — an interactive token: a filter that switches on, an entity that can be\n * dismissed, a recipient sitting in a picker.\n *\n * The line against Badge is the one worth knowing, because the two look almost\n * identical: **Badge is a status label a reader only looks at; Chip is a\n * control a reader acts on.** A Badge that gained a click handler would be a\n * Chip, and a Chip nobody can toggle or dismiss is a Badge wearing a button's\n * clothes — it takes a Tab stop and announces itself as pressable while doing\n * nothing. Reach for Button when the token *is* the action rather than a\n * standing state, and for SegmentedControl when exactly one of a small set must\n * be chosen; a row of chips is many-of-many, and none-of-them is a valid answer.\n *\n * The structure is the component. A chip that both toggles and dismisses has\n * two controls, and they are **siblings inside a non-interactive container** —\n * never a dismiss `<button>` nested inside a toggle `<button>`. Nested buttons\n * are invalid HTML: the parser reparents them, and screen readers disagree\n * about which one they are on and what a press means. So the pill is a `<span>`\n * that paints, and everything pressable is a child of it.\n *\n * Both controls stay on the natural Tab order rather than roving. They are two\n * different actions on one object, not N instances of one control, and a reader\n * who tabbed to the chip has to be able to reach \"remove\" without guessing an\n * arrow key.\n */\nconst props = withDefaults(\n defineProps<{\n /** Whether the chip is switched on. Binding it is what makes the chip a toggle — leave it unset for a chip that is only dismissable, and the label renders as inert text instead of a press target. */\n selected?: boolean | undefined;\n /** Renders a dismiss control beside the label, as a sibling of the toggle rather than inside it. */\n removable?: boolean;\n /** The accessible name of the dismiss control. Localise it, or qualify it — \"Remove Ana Duarte\" reads far better in a list of recipients. */\n removeLabel?: string;\n /** Unavailable: drains the pill to a neutral fill, mutes the label, and makes both controls inert to pointer and keyboard. */\n disabled?: boolean;\n /** Which status or meta the token carries. The names and colours are Badge's, so a chip and a badge never disagree. */\n variant?: ChipVariant;\n /** Chip height, off the shared control scale so a row of chips lines up with the field above it. */\n size?: ChipSize;\n }>(),\n {\n // Not `false`. `undefined` is the signal that this chip is not a toggle at\n // all, and Vue casts an absent Boolean prop to `false` unless a default\n // says otherwise — without this line every chip would claim to be a toggle\n // that is switched off, and a dismiss-only chip would grow a dead Tab stop.\n selected: undefined,\n removable: false,\n removeLabel: \"Remove\",\n disabled: false,\n variant: \"neutral\",\n size: \"md\",\n },\n);\n\nconst emit = defineEmits<{\n /** The flipped selection. The chip does not update itself: a filter chip's state is the query it stands for, and a chip that switched on locally would keep claiming a result set the host never fetched. */\n \"update:selected\": [value: boolean];\n /** The dismiss control was activated. Removing the chip from the list is the host's to do. */\n remove: [];\n}>();\n\nconst toggleable = computed(() => props.selected !== undefined);\n\n// The label's horizontal padding, shared by both branches below so the pill is\n// the same width whether or not it is pressable. The dismiss control supplies\n// its own trailing room, so the label gives its right side back when one is\n// present.\nconst labelPad = computed(() =>\n cn(props.size === \"sm\" ? \"px-2.5\" : \"px-3\", props.removable && \"pr-1\"),\n);\n\n// Springy transform, steady colour — the same split Button and Checkbox use, so\n// a chip press feels like every other press in the library.\nconst pressStyle =\n \"transition: transform var(--duration-fast) var(--ease-spring), background-color var(--duration-fast) var(--ease-out);\";\n\n// The unavailable label colour, and it belongs on the label rather than on the\n// pill around it. A colour set on the container is only *inherited* here, and\n// the container already carries `data-[selected]:text-primary-text` — an attribute\n// selector no plain class on the same element outranks. On the label itself it\n// is a declaration rather than an inheritance, so it wins whatever the pill\n// resolved to: 4.67:1 over the drained `--color-muted` fill, 4.77:1 over the\n// primary wash a selected chip keeps.\nconst disabledText = \"group-data-[disabled]:text-muted-foreground\";\n\n// Both inner controls are surfaces *inside* a 32px pill, so the standard\n// outward `outline-offset-2` would draw the toggle's ring straight through the\n// dismiss control sitting 4px to its right, and vice versa. Inset instead —\n// the ring lands just inside the pill's own border, which is where the eye\n// already is. WindowControls takes the same offset for the same reason.\nconst focusRing =\n \"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\";\n\n// Everything a host passes lands on the container: it is the node with an\n// identity (a data-testid, a key in a list), while the two controls inside it\n// are named by their own content and by `removeLabel`. `class` is pulled out of\n// that spread and merged through `cn()` instead — Vue's own class merge only\n// concatenates, so a caller's `max-w-32` would win or lose against the pill's\n// own utilities depending on Tailwind's emission order rather than on intent.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: containerAttrs } = useSplitAttrs();\n</script>\n\n<template>\n <span\n v-bind=\"containerAttrs\"\n :data-selected=\"selected || undefined\"\n :data-disabled=\"disabled || undefined\"\n :class=\"\n cn(\n chipVariants({ variant, size }),\n // Drained to the neutral well, with the hairline the coloured variants\n // hide: an unavailable chip gives up its hue rather than its legibility.\n // A *selected* one keeps the primary wash — `data-[selected]:bg-primary-muted`\n // outranks a plain class — which is right: switched-on is information,\n // and the label is muted over either fill.\n //\n // `border-border` and not the strong weight it used to take.\n // `theme.css` reserves the strong hairline for a block that must\n // *assert* its edge, which is the opposite of what this state says, and\n // the lighter rim is the same one every other unavailable control in the\n // library slackens to — so a disabled chip in a row of disabled\n // controls is one treatment rather than a second.\n disabled && 'border-border bg-muted',\n removable && 'pr-1',\n attrs.class as string,\n )\n \"\n >\n <button\n v-if=\"toggleable\"\n type=\"button\"\n :aria-pressed=\"selected\"\n :disabled=\"disabled\"\n :style=\"pressStyle\"\n :class=\"\n cn(\n 'inline-flex h-full min-w-0 select-none items-center gap-1 rounded-full',\n labelPad,\n // A neutral darkening rather than a token fill: the pill underneath\n // can be any of eight colours, and a hover state is not an action\n // colour.\n 'hover:bg-foreground/5 active:scale-press',\n focusRing,\n 'disabled:pointer-events-none',\n )\n \"\n @click=\"emit('update:selected', !selected)\"\n >\n \n <span\n aria-hidden=\"true\"\n class=\"inline-flex w-0 shrink-0 items-center overflow-hidden opacity-0 transition-[width,opacity] duration-fast ease-spring group-data-[selected]:w-4 group-data-[selected]:opacity-100\"\n >\n <Check class=\"h-3.5 w-3.5 shrink-0\" />\n </span>\n <span :class=\"cn('truncate', disabledText)\">\n \n <slot />\n </span>\n </button>\n <span v-else :class=\"cn('inline-flex min-w-0 items-center', labelPad)\">\n <span :class=\"cn('truncate', disabledText)\"><slot /></span>\n </span>\n\n \n <button\n v-if=\"removable\"\n type=\"button\"\n :aria-label=\"removeLabel\"\n :disabled=\"disabled\"\n :style=\"pressStyle\"\n :class=\"\n cn(\n 'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full',\n // Not `hover:bg-subtle`, the usual neutral well: it is opaque, and\n // over a coloured pill it punches a grey hole through the fill\n // instead of darkening it.\n 'hover:bg-foreground/10 active:scale-90',\n focusRing,\n disabledText,\n 'disabled:pointer-events-none',\n )\n \"\n @click=\"emit('remove')\"\n >\n <X class=\"h-3.5 w-3.5\" />\n </button>\n </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,IAAa,eAAe,IAC1B;CACE;CACA;CAOA;AACF,GACA;CAIE,UAAU;EACR,SAAS;GAKP,SACE;GACF,SACE;GAiBF,SACE;GACF,SACE;GAIF,SACE;GACF,MAAM;GACN,aACE;GACF,QACE;EACJ;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EAAE,SAAS;EAAW,MAAM;CAAK;AACpD,CACF;;;;;;;;;;;;;;;;;;;;;;;EAkCA,MAAM,QAAQ;EA6Bd,MAAM,OAAO;EAOb,MAAM,aAAa,eAAe,MAAM,aAAa,KAAA,CAAS;EAM9D,MAAM,WAAW,eACf,GAAG,MAAM,SAAS,OAAO,WAAW,QAAQ,MAAM,aAAa,MAAM,CACvE;EAIA,MAAM,aACJ;EASF,MAAM,eAAe;EAOrB,MAAM,YACJ;EASF,MAAM,EAAE,OAAO,MAAM,mBAAmB,cAAc;;GAIpD,OAAA,UAAA,GAAA,mBAyFO,QAzFP,WACU,MAwFH,cAAA,GAxFiB;IACrB,iBAAe,QAAA,YAAY,KAAA;IAC3B,iBAAe,QAAA,YAAY,KAAA;IAC3B,OAAc,MAAA,EAAA,CAAE,CAAU,MAAA,YAAA,CAAY,CAAA;KAAA,SAAG,QAAA;KAAO,MAAE,QAAA;IAAI,CAAA,GAA60B,QAAA,YAAQ,0BAAsC,QAAA,aAAS,QAAoB,MAAA,KAAA,CAAK,CAAC,KAAA;GAsB78B,CAAA,GAAA,CAAA,WAAA,SADR,UAAA,GAAA,mBAkCS,UAAA;;IAhCP,MAAK;IACJ,gBAAc,QAAA;IACd,UAAU,QAAA;IACV,OAAO;IACP,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,0EAAgG,SAAA,OAAA,4CAA2P,WAAA,8BAAA,CAAA;IAY7W,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,mBAAA,CAAqB,QAAA,QAAQ;GAMzC,GAAA,CAAA,mBAKO,QALP,YAKO,CADL,YAAsC,MAAA,KAAA,GAAA,EAA/B,OAAM,uBAAsB,CAAA,CAAA,CAAA,GAErC,mBAGO,QAAA,EAHA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,YAAa,YAAY,CAAA,EAAA,GAAA,CAEvC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,IAAA,UAAA,MAGZ,UAAA,GAAA,mBAEO,QAAA;;IAFO,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,oCAAqC,SAAA,KAAQ,CAAA;GAClE,GAAA,CAAA,mBAA2D,QAAA,EAApD,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,YAAa,YAAY,CAAA,EAAA,GAAA,CAAG,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA,IAO9C,QAAA,aADR,UAAA,GAAA,mBAqBS,UAAA;;IAnBP,MAAK;IACJ,cAAY,QAAA;IACZ,UAAU,QAAA;IACV,OAAO;IACP,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,yEAAA,0CAAiV,WAAqB,cAAA,8BAAA,CAAA;IAYxX,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;GAEZ,GAAA,CAAA,YAAyB,MAAA,CAAA,GAAA,EAAtB,OAAM,cAAa,CAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/primitives/collapse/src/Collapse.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Collapse.js","names":[],"sources":["../../../../packages/primitives/collapse/src/Collapse.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Collapse — one disclosure: a trigger that shows and hides a single region\n * of content. The generic primitive under Accordion's row-group; the state\n * machinery is Reka's Collapsible, so controlled and uncontrolled use,\n * aria-expanded/aria-controls wiring and rapid open/close are all owned\n * there rather than reimplemented here.\n *\n * Expansion animates on the shared height pair (`--animate-expand` /\n * `--animate-collapse`) keyed to Reka's measured\n * `--reka-collapsible-content-height`; padding lives on an inner wrapper\n * because a padded outer box would pop at both ends of the animation while\n * its height interpolated.\n */\n</script>\n\n<script setup lang=\"ts\">\nimport { ChevronDown } from \"@lucide/vue\";\nimport { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from \"reka-ui\";\nimport { cn, optional } from \"@ecoma-io/loom-core\";\nimport { useId } from \"vue\";\n\nwithDefaults(\n defineProps<{\n /**\n * Controls visibility; pair with `v-model:open`. Omit it and the collapse\n * owns its own state, seeded by `defaultOpen`.\n */\n open?: boolean | undefined;\n /** The uncontrolled starting state. */\n defaultOpen?: boolean;\n /** Unavailable rather than hidden: the trigger stays put and inert. */\n disabled?: boolean;\n }>(),\n {\n // `undefined` is the uncontrolled state, and only an explicit default\n // keeps it reachable past Vue's Boolean casting.\n open: undefined,\n defaultOpen: false,\n disabled: false,\n },\n);\n\ndefineEmits<{ \"update:open\": [value: boolean] }>();\n\n// Reka leaves the trigger's aria-controls pointing at an id its Content only\n// registers non-reactively, so a closed-first render ships an empty IDREF.\n// Both halves get explicit ids here instead; fallthrough attributes merge\n// after Reka's own, which is the same mechanism AlertDialog uses to clear\n// its dangling describedby.\nconst triggerId = useId();\nconst contentId = useId();\n</script>\n\n<template>\n <CollapsibleRoot\n v-slot=\"{ open: state }\"\n v-bind=\"optional({ open })\"\n :default-open=\"defaultOpen\"\n :disabled=\"disabled\"\n :unmount-on-hide=\"false\"\n @update:open=\"$emit('update:open', $event)\"\n >\n <CollapsibleTrigger\n :id=\"triggerId\"\n :aria-controls=\"contentId\"\n :class=\"\n cn(\n 'group flex w-full items-center justify-between gap-3 rounded-md px-4 py-3 text-left text-sm font-medium',\n 'transition-colors duration-fast ease-out hover:bg-subtle',\n 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n 'disabled:pointer-events-none disabled:bg-transparent disabled:text-muted-foreground',\n )\n \"\n >\n \n <slot name=\"trigger\" :open=\"state\" />\n <ChevronDown\n class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-fast ease-out group-data-[state=open]:rotate-180\"\n aria-hidden=\"true\"\n />\n </CollapsibleTrigger>\n \n <CollapsibleContent\n data-loom-collapse=\"\"\n class=\"overflow-hidden data-[state=open]:animate-expand data-[state=closed]:animate-collapse\"\n >\n \n <div :id=\"contentId\" class=\"px-4 pb-4\">\n \n <slot />\n </div>\n </CollapsibleContent>\n </CollapsibleRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/collapse/src/Collapse.vue_vue_type_script_setup_true_lang.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Collapse.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../packages/primitives/collapse/src/Collapse.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Collapse — one disclosure: a trigger that shows and hides a single region\n * of content. The generic primitive under Accordion's row-group; the state\n * machinery is Reka's Collapsible, so controlled and uncontrolled use,\n * aria-expanded/aria-controls wiring and rapid open/close are all owned\n * there rather than reimplemented here.\n *\n * Expansion animates on the shared height pair (`--animate-expand` /\n * `--animate-collapse`) keyed to Reka's measured\n * `--reka-collapsible-content-height`; padding lives on an inner wrapper\n * because a padded outer box would pop at both ends of the animation while\n * its height interpolated.\n */\n</script>\n\n<script setup lang=\"ts\">\nimport { ChevronDown } from \"@lucide/vue\";\nimport { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from \"reka-ui\";\nimport { cn, optional } from \"@ecoma-io/loom-core\";\nimport { useId } from \"vue\";\n\nwithDefaults(\n defineProps<{\n /**\n * Controls visibility; pair with `v-model:open`. Omit it and the collapse\n * owns its own state, seeded by `defaultOpen`.\n */\n open?: boolean | undefined;\n /** The uncontrolled starting state. */\n defaultOpen?: boolean;\n /** Unavailable rather than hidden: the trigger stays put and inert. */\n disabled?: boolean;\n }>(),\n {\n // `undefined` is the uncontrolled state, and only an explicit default\n // keeps it reachable past Vue's Boolean casting.\n open: undefined,\n defaultOpen: false,\n disabled: false,\n },\n);\n\ndefineEmits<{ \"update:open\": [value: boolean] }>();\n\n// Reka leaves the trigger's aria-controls pointing at an id its Content only\n// registers non-reactively, so a closed-first render ships an empty IDREF.\n// Both halves get explicit ids here instead; fallthrough attributes merge\n// after Reka's own, which is the same mechanism AlertDialog uses to clear\n// its dangling describedby.\nconst triggerId = useId();\nconst contentId = useId();\n</script>\n\n<template>\n <CollapsibleRoot\n v-slot=\"{ open: state }\"\n v-bind=\"optional({ open })\"\n :default-open=\"defaultOpen\"\n :disabled=\"disabled\"\n :unmount-on-hide=\"false\"\n @update:open=\"$emit('update:open', $event)\"\n >\n <CollapsibleTrigger\n :id=\"triggerId\"\n :aria-controls=\"contentId\"\n :class=\"\n cn(\n 'group flex w-full items-center justify-between gap-3 rounded-md px-4 py-3 text-left text-sm font-medium',\n 'transition-colors duration-fast ease-out hover:bg-subtle',\n 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n 'disabled:pointer-events-none disabled:bg-transparent disabled:text-muted-foreground',\n )\n \"\n >\n \n <slot name=\"trigger\" :open=\"state\" />\n <ChevronDown\n class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-fast ease-out group-data-[state=open]:rotate-180\"\n aria-hidden=\"true\"\n />\n </CollapsibleTrigger>\n \n <CollapsibleContent\n data-loom-collapse=\"\"\n class=\"overflow-hidden data-[state=open]:animate-expand data-[state=closed]:animate-collapse\"\n >\n \n <div :id=\"contentId\" class=\"px-4 pb-4\">\n \n <slot />\n </div>\n </CollapsibleContent>\n </CollapsibleRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDA,MAAM,YAAY,MAAM;EACxB,MAAM,YAAY,MAAM;;GAItB,OAAA,UAAA,GAAA,YAiDkB,MAAA,eAAA,GAjDlB,WAEU,MA+CQ,QAAA,CA/CA,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAA;IACtB,gBAAc,QAAA;IACd,UAAU,QAAA;IACV,mBAAiB;IACjB,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,eAAgB,MAAM;;IAEzC,SAAA,SAoBqB,EAAA,MA3BL,YAAK,CAOrB,YAoBqB,MAAA,kBAAA,GAAA;KAnBlB,IAAI,MAAA,SAAA;KACJ,iBAAe,MAAA,SAAA;KACf,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,2GAAA,4DAAA,+GAAA,qFAAA,CAAA;;KAYnB,SAAA,cAAqC,CAArC,WAAqC,KAAA,QAAA,WAAA,EAAf,MAAM,MAAK,CAAA,GACjC,YAGE,MAAA,WAAA,GAAA;MAFA,OAAM;MACN,eAAY;;;;;;;IAQhB,CAAA,GAAA,YAcqB,MAAA,kBAAA,GAAA;KAbnB,sBAAmB;KACnB,OAAM;;KAON,SAAA,cAIM,CAJN,mBAIM,OAAA;MAJA,IAAI,MAAA,SAAA;MAAW,OAAM;KAGzB,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,UAAA,CAAA,CAAA"}