@ecoma-io/loom 0.2.0 → 0.4.0

package/dist/packages/primitives/date-time-picker/src/DateTimePicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,360 @@
+import { cn } from "../../../core/src/cn.js";
+import { optional } from "../../../core/src/props.js";
+import { useSplitAttrs } from "../../../core/src/attrs.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import { getLocalTimeZone as $ad063034c8620db8$export$aa8b41735afcabd2, isToday as $ad063034c8620db8$export$629b0a497aa65267 } from "../../../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/queries.js";
+import { toCalendarDate as $d07e34cce18680fd$export$93522d1a439f3617, toCalendarDateTime as $d07e34cce18680fd$export$b21e0b124e224484 } from "../../../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/conversion.js";
+import { parseDateTime as $58246871e4652552$export$588937bcd60ade55 } from "../../../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/string.js";
+import { CALENDAR_PANEL_LABELS, DATE_SEGMENT_LABELS, TIME_SEGMENT_LABELS, emptySegmentValueText, isDateSegmentPart, isTimeSegmentPart } from "../../../labels/src/date-labels.js";
+import { useFieldControl } from "../../../labels/src/field-context.js";
+import { useAncestorDisabled } from "../../../labels/src/ancestor-disabled.js";
+import "../../../labels/src/index.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useId, useTemplateRef, withCtx } from "vue";
+import { CalendarClock, ChevronLeft, ChevronRight } from "@lucide/vue";
+import { DatePickerAnchor, DatePickerCalendar, DatePickerCell, DatePickerCellTrigger, DatePickerContent, DatePickerField, DatePickerGrid, DatePickerGridBody, DatePickerGridHead, DatePickerGridRow, DatePickerHeadCell, DatePickerHeader, DatePickerHeading, DatePickerInput, DatePickerNext, DatePickerPrev, DatePickerRoot, DatePickerTrigger } from "reka-ui";
+//#region packages/primitives/date-time-picker/src/DateTimePicker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "absolute bottom-1 h-1 w-1 rounded-full bg-primary group-data-[selected]:bg-primary-foreground"
+};
+var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "DateTimePicker",
+	props: {
+		modelValue: {},
+		min: {},
+		max: {},
+		granularity: { default: "minute" },
+		hourCycle: {},
+		locale: { default: "en" },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		name: {},
+		labels: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const dateText = useLabels("dateSegments", DATE_SEGMENT_LABELS, () => props.labels);
+		const timeText = useLabels("timeSegments", TIME_SEGMENT_LABELS, () => props.labels);
+		const panelText = useLabels("calendarPanel", CALENDAR_PANEL_LABELS, () => props.labels);
+		function segmentLabel(part) {
+			if (isDateSegmentPart(part)) return dateText.value[part];
+			return isTimeSegmentPart(part) ? timeText.value[part] : void 0;
+		}
+		function segmentValueText(part, value, monthValue) {
+			const empty = isTimeSegmentPart(part) ? timeText.value.empty : dateText.value.empty;
+			const emptyResult = emptySegmentValueText(part, value, empty);
+			if (emptyResult["aria-valuetext"]) return emptyResult;
+			if (part === "month" && monthValue !== void 0) return { "aria-valuetext": dateText.value.filledMonth({
+				value: monthValue,
+				locale: props.locale
+			}) };
+			if (part === "dayPeriod") return { "aria-valuetext": timeText.value.filledDayPeriod({ dayPeriod: value }) };
+			return {};
+		}
+		const { attrs, rest: fieldAttrs } = useSplitAttrs();
+		function fromIso(value) {
+			if (!value) return void 0;
+			try {
+				return $58246871e4652552$export$588937bcd60ade55(value);
+			} catch {
+				return;
+			}
+		}
+		function pad(value) {
+			return String(value).padStart(2, "0");
+		}
+		function toIso(date) {
+			const instant = $d07e34cce18680fd$export$b21e0b124e224484(date);
+			const stamp = `${$d07e34cce18680fd$export$93522d1a439f3617(instant).toString()}T${pad(instant.hour)}:${pad(instant.minute)}`;
+			return props.granularity === "second" ? `${stamp}:${pad(instant.second)}` : stamp;
+		}
+		function startOfDay(date) {
+			return date?.set({
+				hour: 0,
+				minute: 0,
+				second: 0,
+				millisecond: 0
+			});
+		}
+		function endOfDay(date) {
+			return date?.set({
+				hour: 23,
+				minute: 59,
+				second: 59,
+				millisecond: 999
+			});
+		}
+		const rootValue = computed(() => optional({
+			modelValue: fromIso(props.modelValue),
+			minValue: startOfDay(fromIso(props.min)),
+			maxValue: endOfDay(fromIso(props.max)),
+			hourCycle: props.hourCycle
+		}));
+		const outOfRange = computed(() => {
+			const value = fromIso(props.modelValue);
+			if (!value) return false;
+			const lower = fromIso(props.min);
+			const upper = fromIso(props.max);
+			return !!lower && value.compare(lower) < 0 || !!upper && value.compare(upper) > 0;
+		});
+		/**
+		* The segments are `<div role="spinbutton" tabindex="0">`, and
+		* `<fieldset disabled>` reaches only `<input>`, `<button>`, `<select>` and
+		* `<textarea>` — so the trigger button inside a disabled group went inert while
+		* the segments beside it still typed. Measured on this branch: an empty `mm`
+		* segment became `8` on an arrow key. Exactly the defect DatePicker carries,
+		* and fixed exactly the way DatePicker fixes it.
+		*
+		* Read off the DOM rather than taken from the Field context, which publishes no
+		* `disabled` on purpose — see `../../lib/ancestor-disabled.ts`.
+		*/
+		const anchor = useTemplateRef("anchor");
+		const groupDisabled = useAncestorDisabled(() => anchor.value?.$el);
+		const field = useFieldControl(() => ({
+			id: attrs.id,
+			describedBy: attrs["aria-describedby"],
+			ariaLabelledby: attrs["aria-labelledby"],
+			name: props.name,
+			disabled: groupDisabled.value ? true : props.disabled,
+			readonly: props.readonly,
+			invalid: props.invalid,
+			required: props.required
+		}));
+		const groupLabelledBy = computed(() => attrs["aria-label"] || attrs["aria-labelledby"] ? void 0 : field.labelledBy);
+		const errored = computed(() => field.invalid || outOfRange.value);
+		const open = ref(false);
+		function onDateChange(date) {
+			open.value = false;
+			emit("update:modelValue", date ? toIso(date) : void 0);
+		}
+		function isDateToday(date) {
+			return $ad063034c8620db8$export$629b0a497aa65267(date, $ad063034c8620db8$export$aa8b41735afcabd2());
+		}
+		const focusedPart = ref();
+		function segmentTabIndex(part, segments) {
+			if (field.disabled || part === "literal") return void 0;
+			const editable = segments.filter((segment) => segment.part !== "literal");
+			return part === (focusedPart.value !== void 0 && editable.some((segment) => segment.part === focusedPart.value) ? focusedPart.value : editable[0]?.part) ? 0 : -1;
+		}
+		const shape = computed(() => `${props.granularity}-${props.hourCycle}`);
+		/**
+		* The same "13 PM" defect TimePicker documents, in the same shared Reka segment
+		* code: the hour publishes `aria-valuenow` off the internal 24-hour value while
+		* declaring its range as 1–12. The announcement is rebuilt from what the segment
+		* is actually showing, and only under an explicit 12-hour cycle — left to the
+		* locale, Reka defers to the formatter and the pair already agrees.
+		*/
+		function hourAnnouncement(segments) {
+			if (props.hourCycle !== 12) return void 0;
+			const shown = Number(segments.find((segment) => segment.part === "hour")?.value);
+			if (!Number.isInteger(shown)) return void 0;
+			const period = segments.find((segment) => segment.part === "dayPeriod")?.value;
+			return {
+				"aria-valuenow": shown,
+				"aria-valuetext": period ? `${shown} ${period}` : `${shown}`
+			};
+		}
+		const headingId = useId();
+		const panel = ref(null);
+		function onOpenAutoFocus(event) {
+			const day = panel.value?.querySelector("[data-reka-calendar-cell-trigger][tabindex=\"0\"]");
+			if (!day) return;
+			event.preventDefault();
+			day.focus();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DatePickerRoot), mergeProps({
+				open: open.value,
+				"onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event)
+			}, rootValue.value, {
+				locale: __props.locale,
+				disabled: unref(field).disabled,
+				readonly: unref(field).readonly,
+				granularity: __props.granularity,
+				"prevent-deselect": "",
+				"onUpdate:modelValue": onDateChange
+			}), {
+				default: withCtx(() => [createVNode(unref(DatePickerAnchor), {
+					ref_key: "anchor",
+					ref: anchor,
+					"data-invalid": unref(field).invalid || void 0,
+					"data-out-of-range": outOfRange.value || void 0,
+					"data-readonly": unref(field).readonly || void 0,
+					class: normalizeClass(unref(cn)("block w-full", unref(attrs).class))
+				}, {
+					default: withCtx(() => [(openBlock(), createBlock(unref(DatePickerField), mergeProps({ key: shape.value }, {
+						...unref(fieldAttrs),
+						...unref(field).attrs
+					}, {
+						"aria-labelledby": groupLabelledBy.value,
+						"aria-invalid": errored.value || void 0,
+						class: unref(cn)("flex h-9 w-full items-center rounded-md border border-input bg-background px-3 text-sm text-foreground", "transition-[color,background-color,border-color,box-shadow] duration-fast ease-out", "focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring", !errored.value && "focus-within:shadow-halo", unref(field).readonly && "bg-subtle", unref(field).disabled && "cursor-not-allowed border-border bg-muted text-muted-foreground", errored.value && "border-destructive focus-within:outline-destructive")
+					}), {
+						default: withCtx(({ segments }) => [(openBlock(true), createElementBlock(Fragment, null, renderList(segments, (item, index) => {
+							return openBlock(), createBlock(unref(DatePickerInput), mergeProps({
+								key: index,
+								part: item.part,
+								tabindex: segmentTabIndex(item.part, segments),
+								"aria-label": segmentLabel(item.part)
+							}, { ref_for: true }, {
+								...segmentValueText(item.part, item.value, fromIso(props.modelValue)?.month),
+								...item.part === "hour" ? hourAnnouncement(segments) : void 0
+							}, {
+								class: unref(cn)("tabular rounded-sm px-0.5 outline-none", "transition-colors duration-instant ease-out", "focus:bg-primary-muted focus:text-primary-text", "data-[placeholder]:text-muted-foreground", item.part === "literal" && "text-muted-foreground"),
+								onFocusin: ($event) => focusedPart.value = item.part
+							}), {
+								default: withCtx(() => [createTextVNode(toDisplayString(item.value), 1)]),
+								_: 2
+							}, 1040, [
+								"part",
+								"tabindex",
+								"aria-label",
+								"class",
+								"onFocusin"
+							]);
+						}), 128)), !unref(field).readonly ? (openBlock(), createBlock(unref(DatePickerTrigger), {
+							key: 0,
+							"aria-label": unref(panelText).openCalendar,
+							class: "ml-auto 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 disabled:cursor-not-allowed"
+						}, {
+							default: withCtx(() => [createVNode(unref(CalendarClock), { class: "h-4 w-4" })]),
+							_: 1
+						}, 8, ["aria-label"])) : createCommentVNode("", true)]),
+						_: 1
+					}, 16, [
+						"aria-labelledby",
+						"aria-invalid",
+						"class"
+					]))]),
+					_: 1
+				}, 8, [
+					"data-invalid",
+					"data-out-of-range",
+					"data-readonly",
+					"class"
+				]), createVNode(unref(DatePickerContent), {
+					align: "start",
+					"side-offset": 6,
+					class: normalizeClass(unref(cn)("z-overlay rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-md outline-none", "data-[state=open]:animate-fade-rise data-[state=closed]:animate-fade-fall")),
+					onOpenAutoFocus
+				}, {
+					default: withCtx(() => [createElementVNode("div", {
+						ref_key: "panel",
+						ref: panel,
+						class: "flex flex-col gap-3"
+					}, [createVNode(unref(DatePickerCalendar), { "calendar-label": unref(panelText).calendar }, {
+						default: withCtx(({ grid, weekDays }) => [createVNode(unref(DatePickerHeader), { class: "flex items-center justify-between gap-2" }, {
+							default: withCtx(() => [
+								createVNode(unref(DatePickerPrev), {
+									"aria-label": unref(panelText).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" })]),
+									_: 1
+								}, 8, ["aria-label"]),
+								createVNode(unref(DatePickerHeading), {
+									id: unref(headingId),
+									"aria-live": "polite",
+									class: "text-sm font-medium text-foreground"
+								}, null, 8, ["id"]),
+								createVNode(unref(DatePickerNext), {
+									"aria-label": unref(panelText).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" })]),
+									_: 1
+								}, 8, ["aria-label"])
+							]),
+							_: 1
+						}), (openBlock(true), createElementBlock(Fragment, null, renderList(grid, (month) => {
+							return openBlock(), createBlock(unref(DatePickerGrid), {
+								key: month.value.toString(),
+								role: "grid",
+								"aria-labelledby": unref(headingId),
+								class: "border-collapse select-none"
+							}, {
+								default: withCtx(() => [createVNode(unref(DatePickerGridHead), null, {
+									default: withCtx(() => [createVNode(unref(DatePickerGridRow), null, {
+										default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(weekDays, (day, index) => {
+											return openBlock(), createBlock(unref(DatePickerHeadCell), {
+												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(DatePickerGridBody), null, {
+									default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(month.rows, (week, weekIndex) => {
+										return openBlock(), createBlock(unref(DatePickerGridRow), { key: weekIndex }, {
+											default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(week, (day) => {
+												return openBlock(), createBlock(unref(DatePickerCell), {
+													key: day.toString(),
+													date: day,
+													class: "p-0 text-center"
+												}, {
+													default: withCtx(() => [createVNode(unref(DatePickerCellTrigger), {
+														day,
+														month: month.value,
+														"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_1)) : createCommentVNode("", true)]),
+														_: 1
+													}, 8, [
+														"day",
+														"month",
+														"aria-current"
+													])]),
+													_: 2
+												}, 1032, ["date"]);
+											}), 128))]),
+											_: 2
+										}, 1024);
+									}), 128))]),
+									_: 2
+								}, 1024)]),
+								_: 2
+							}, 1032, ["aria-labelledby"]);
+						}), 128))]),
+						_: 1
+					}, 8, ["calendar-label"])], 512)]),
+					_: 1
+				}, 8, ["class"])]),
+				_: 1
+			}, 16, [
+				"open",
+				"locale",
+				"disabled",
+				"readonly",
+				"granularity"
+			]);
+		};
+	}
+});
+//#endregion
+export { DateTimePicker_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=DateTimePicker.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/date-time-picker/src/DateTimePicker.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/date-time-picker/src/DateTimePicker.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  CalendarPanelLabels,\n  DateSegmentLabels,\n  TimeSegmentLabels,\n} from \"@ecoma-io/loom-labels\";\n\n/**\n * Everything this control publishes to assistive technology, which is three\n * shared slices and nothing of its own: the date half of the field's segments,\n * the clock half, and the calendar popover's chrome. All three are declared in\n * `src/lib/date-labels.ts`, because the other four members of this family say\n * the same words for the same reason — they are one Reka implementation\n * underneath.\n *\n * An intersection rather than a fourth interface, so this name is the type a\n * consumer annotates their own bag with and each slice stays one definition.\n * Annotate with `LabelOverrides<DateTimePickerLabels>` and never with this,\n * which is total.\n */\nexport type DateTimePickerLabels = DateSegmentLabels & TimeSegmentLabels & CalendarPanelLabels;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useId, useTemplateRef } from \"vue\";\nimport {\n  DatePickerRoot,\n  DatePickerAnchor,\n  DatePickerField,\n  DatePickerInput,\n  DatePickerTrigger,\n  DatePickerContent,\n  DatePickerCalendar,\n  DatePickerHeader,\n  DatePickerPrev,\n  DatePickerHeading,\n  DatePickerNext,\n  DatePickerGrid,\n  DatePickerGridHead,\n  DatePickerGridRow,\n  DatePickerHeadCell,\n  DatePickerGridBody,\n  DatePickerCell,\n  DatePickerCellTrigger,\n} from \"reka-ui\";\nimport { CalendarClock, ChevronLeft, ChevronRight } from \"@lucide/vue\";\nimport {\n  getLocalTimeZone,\n  isToday,\n  parseDateTime,\n  toCalendarDate,\n  toCalendarDateTime,\n  type CalendarDateTime,\n  type DateValue,\n} from \"@internationalized/date\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useAncestorDisabled } from \"@ecoma-io/loom-labels\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport {\n  CALENDAR_PANEL_LABELS,\n  DATE_SEGMENT_LABELS,\n  TIME_SEGMENT_LABELS,\n  emptySegmentValueText,\n  isDateSegmentPart,\n  isTimeSegmentPart,\n} from \"@ecoma-io/loom-labels\";\n\n/**\n * DateTimePicker — one instant: a day and a time of day together, entered by\n * typing across a single segmented field or by picking the day out of a\n * calendar popover. Reach for it when both halves are the same decision — a\n * scheduled send, a deadline, an appointment.\n *\n * It is DatePicker with the clock left on. Everything that control decides,\n * this one inherits and does not restate: the segmented field rather than a\n * native input, the roving tabindex that makes the field one Tab stop, the\n * popover owning its own open state, the calendar laid out by a real table.\n * Read `DatePicker.vue` for the reasoning behind each; the comments below are\n * only for where this one has to differ.\n *\n * **The model value is a plain ISO *local* date-time string,\n * `\"YYYY-MM-DDTHH:mm\"`** — or `\"YYYY-MM-DDTHH:mm:ss\"` when `granularity` asks\n * for seconds, because a segment the reader can type is a segment the value has\n * to carry. There is no timezone, no offset and no `Date` anywhere on this\n * surface. `\"2026-03-14T09:30\"` is half past nine on the fourteenth *wherever it\n * is read*, and turning that into an absolute instant is the host's job, because\n * the host is the one that knows whose clock is meant. Guessing on its behalf is\n * exactly how a meeting ends up an hour out.\n *\n * Reach for DatePicker when the time of day is not part of the decision — a date\n * of birth has no half past nine — and for TimePicker when the day is not. Two\n * controls side by side are two values and two validations; this is one value\n * that happens to be written in two halves.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself through\n * `useFieldControl()` — the row's id, the id of its hint or error line, and\n * `required` / `invalid` / `disabled` / `readonly` / `name` — so `<Field\n * label=\"Send at\" error=\"…\"><DateTimePicker /></Field>` needs no attributes at\n * the call site. Every prop below still wins over the row when it is set, in\n * both directions, which is why the four booleans default to `undefined` rather\n * than `false`. `readonly` and `disabled` are different states, so the field\n * rests in three appearances rather than two: read-only is an instant on show —\n * still a Tab stop, still submitted, a lifted fill with the segments at full\n * strength — where disabled is unavailable and drained a step further, in fill,\n * text colour and border weight together.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The chosen instant as ISO `\"YYYY-MM-DDTHH:mm\"`, local, with no timezone or\n     * offset. A bare `\"YYYY-MM-DD\"` is accepted and read as midnight that day.\n     * Unset, empty or unparseable means nothing is chosen. The explicit\n     * `| undefined` is what lets `v-model` bind a ref that clears — the emitted\n     * value drops to `undefined` when the field is emptied, and a plain optional\n     * prop refuses to take it back.\n     */\n    modelValue?: string | undefined;\n    /** The earliest choosable instant, same format. The calendar disables every day that lies wholly before it; a time before it on the boundary day is announced invalid rather than refused. */\n    min?: string;\n    /** The latest choosable instant, same format. The calendar disables every day that lies wholly after it; a time after it on the boundary day is announced invalid rather than refused. */\n    max?: string;\n    /** How far down the field goes. `\"minute\"` reports `\"YYYY-MM-DDTHH:mm\"`; `\"second\"` adds a seconds segment and reports `\"YYYY-MM-DDTHH:mm:ss\"`. */\n    granularity?: \"minute\" | \"second\";\n    /** Whether the time reads as 12-hour with an AM/PM segment or as 24-hour. Display only: the value stays 24-hour. Unset follows `locale`. */\n    hourCycle?: 12 | 24;\n    /** BCP 47 tag driving the order of the segments, the month and weekday names, which day a week starts on, and the 12-or-24-hour default. */\n    locale?: string;\n    /** Unavailable: dims the control, refuses the calendar, and takes the field out of the tab order. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Shows the instant without allowing an edit: the field stays a Tab stop and stays submitted, and the calendar button is dropped because nothing in the calendar could be chosen. Unset defers to a wrapping Field. */\n    readonly?: boolean | undefined;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. An instant outside `min`/`max` does the same on its own, whatever this says. Unset defers to a wrapping Field's `error`. */\n    invalid?: boolean | undefined;\n    /** Marks the field mandatory to assistive tech (`aria-required` on the segment group). Unset defers to a wrapping Field. */\n    required?: boolean | undefined;\n    /** The field name for a native form post or `FormData`, carried on the hidden input Reka submits the instant through. Unset defers to a wrapping Field. */\n    name?: string;\n    /**\n     * Names for everything this control says out loud, as any subset of\n     * `DateTimePickerLabels` — 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: eleven of the fourteen names replace English literals Reka UI\n     * writes of its own accord, and a language is set once with\n     * `provideLoomLabels`.\n     */\n    labels?: LabelOverrides<DateTimePickerLabels>;\n  }>(),\n  {\n    granularity: \"minute\",\n    locale: \"en\",\n    // Not `false`, for any of the four — TextField.vue carries the full\n    // reasoning: `false` is a caller's decision that must beat the row, absent\n    // is a caller saying nothing, and only `undefined` survives to mean that\n    // past Vue's absent-Boolean-casts-to-false rule.\n    disabled: undefined,\n    readonly: undefined,\n    invalid: undefined,\n    required: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** The chosen instant as ISO `\"YYYY-MM-DDTHH:mm\"` (or `…:ss`), or `undefined` once the field has been cleared. */\n  \"update:modelValue\": [value: string | undefined];\n}>();\n\n// Three slots, one prop. There is no single `text` here because there is no\n// single slot: the two halves of the field and the popover's chrome are\n// separate vocabularies with separate registry entries, and naming them apart\n// is what keeps a reader of the template able to see which one a binding came\n// from. The one `labels` prop feeds all three — a getter returning the\n// intersection satisfies each slice, and the keys a slice does not know are\n// ignored by `useLabels`' own return type.\nconst dateText = useLabels(\"dateSegments\", DATE_SEGMENT_LABELS, () => props.labels);\nconst timeText = useLabels(\"timeSegments\", TIME_SEGMENT_LABELS, () => props.labels);\nconst panelText = useLabels(\"calendarPanel\", CALENDAR_PANEL_LABELS, () => props.labels);\n\n// Read through the refs on every call rather than resolved into a lookup table\n// once: a table built in `setup` freezes the first language and every later\n// switch silently does nothing. `undefined` for the `literal` separators, which\n// Reka renders `aria-hidden` and which must stay unnamed.\nfunction segmentLabel(part: string): string | undefined {\n  if (isDateSegmentPart(part)) return dateText.value[part];\n  return isTimeSegmentPart(part) ? timeText.value[part] : undefined;\n}\n\n// The companion to `segmentLabel`, and the reason it returns an object rather\n// than a string is in `emptySegmentValueText`: Reka's `aria-valuetext` is a\n// hard-coded \"Empty\" only while the segment holds nothing, so this replaces\n// that case and leaves the filled one — a number, and the locale's own month\n// name — exactly as Reka wrote it.\n// The half that owns the part owns its empty message too, so a host localising\n// only `timeSegments` still reaches the clock segments of this control.\n//\n// For filled segments, the month and dayPeriod carry English that a host needs\n// to be able to replace — see `filledMonth` on `DateSegmentLabels` and\n// `filledDayPeriod` on `TimeSegmentLabels`.\nfunction segmentValueText(\n  part: string,\n  value: string,\n  monthValue?: number,\n): { \"aria-valuetext\"?: string } {\n  const empty = isTimeSegmentPart(part) ? timeText.value.empty : dateText.value.empty;\n  const emptyResult = emptySegmentValueText(part, value, empty);\n  if (emptyResult[\"aria-valuetext\"]) return emptyResult;\n  if (part === \"month\" && monthValue !== undefined) {\n    return {\n      \"aria-valuetext\": dateText.value.filledMonth({ value: monthValue, locale: props.locale }),\n    };\n  }\n  if (part === \"dayPeriod\") {\n    return { \"aria-valuetext\": timeText.value.filledDayPeriod({ dayPeriod: value }) };\n  }\n  return {};\n}\n\n// Routed exactly as DatePicker routes it, and for the same reasons: `class`\n// sizes the whole control so it lands on the anchor, and everything else names\n// or describes the value so it lands on the `role=\"group\"` field.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: fieldAttrs } = useSplitAttrs();\n\nfunction fromIso(value: string | undefined): CalendarDateTime | undefined {\n  if (!value) return undefined;\n  try {\n    // `parseDateTime` reads a bare `\"YYYY-MM-DD\"` as midnight on that day, which\n    // is the same default a day picked out of the calendar before any time gets.\n    // It refuses an offset or a `Z`, and that refusal is wanted: an absolute\n    // instant is not this component's value, and silently dropping the offset\n    // would shift the time by hours without saying so.\n    return parseDateTime(value);\n  } catch {\n    return undefined;\n  }\n}\n\nfunction pad(value: number): string {\n  return String(value).padStart(2, \"0\");\n}\n\n// Written out rather than taken from `toString()`, which always prints seconds\n// and appends a fractional part when the value carries one — a\n// minute-granularity field would report `\"2026-03-14T09:30:00\"` for a value its\n// segments never showed a second of. `toCalendarDate` is what normalises the day\n// half to the Gregorian ISO form whatever calendar the locale reads by, exactly\n// as it does in DatePicker; `toCalendarDateTime` drops a time zone before it can\n// reach the string and fills midnight for a value carrying no time of its own.\nfunction toIso(date: DateValue): string {\n  const instant = toCalendarDateTime(date);\n  const stamp = `${toCalendarDate(instant).toString()}T${pad(instant.hour)}:${pad(instant.minute)}`;\n  return props.granularity === \"second\" ? `${stamp}:${pad(instant.second)}` : stamp;\n}\n\n// `min` and `max` bound an *instant*, and the calendar chooses a *day*, so the\n// boundary day is only partly available. Reka compares each grid cell against\n// these bounds at full precision, and a cell carries whatever time the field is\n// currently holding — so with the exact bounds forwarded, a \"not before now\"\n// deadline disables today outright at 09:00 because today's cell reads\n// midnight, and the one day the reader most wants is unreachable for a reason\n// nothing on screen explains.\n//\n// So the calendar is bounded by whole days: a day holding any choosable instant\n// can be chosen. What that gives up is caught below — `outOfRange` re-applies\n// the bound at instant precision where the instant is actually entered, so a\n// reachable day with an unreachable time reads as an error instead of as fine.\nfunction startOfDay(date: CalendarDateTime | undefined) {\n  return date?.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });\n}\n\nfunction endOfDay(date: CalendarDateTime | undefined) {\n  return date?.set({ hour: 23, minute: 59, second: 59, millisecond: 999 });\n}\n\n// `optional()` rather than plain bindings, for the reason written out in\n// DatePicker — and `hourCycle` joins them here, because `undefined` is how Reka\n// is told to follow the locale rather than a cycle nobody asked for.\nconst rootValue = computed(() =>\n  optional({\n    modelValue: fromIso(props.modelValue),\n    minValue: startOfDay(fromIso(props.min)),\n    maxValue: endOfDay(fromIso(props.max)),\n    hourCycle: props.hourCycle,\n  }),\n);\n\n// The half of the bound the calendar gave up. Reka's own `data-invalid` on the\n// field group now only fires for a whole day out of range, and a value like\n// \"today at 00:00\" under a `min` of \"today at 14:30\" would otherwise look\n// perfectly well-formed while being unschedulable. This is why the error state\n// is derived here rather than left entirely to the host, which is where\n// DatePicker leaves it: there, a day is the whole value and Reka's comparison is\n// already exact.\nconst outOfRange = computed(() => {\n  const value = fromIso(props.modelValue);\n  if (!value) return false;\n  const lower = fromIso(props.min);\n  const upper = fromIso(props.max);\n  return (!!lower && value.compare(lower) < 0) || (!!upper && value.compare(upper) > 0);\n});\n\n/**\n * The segments are `<div role=\"spinbutton\" tabindex=\"0\">`, and\n * `<fieldset disabled>` reaches only `<input>`, `<button>`, `<select>` and\n * `<textarea>` — so the trigger button inside a disabled group went inert while\n * the segments beside it still typed. Measured on this branch: an empty `mm`\n * segment became `8` on an arrow key. Exactly the defect DatePicker carries,\n * and fixed exactly the way DatePicker fixes it.\n *\n * Read off the DOM rather than taken from the Field context, which publishes no\n * `disabled` on purpose — see `../../lib/ancestor-disabled.ts`.\n */\nconst anchor = useTemplateRef<{ $el?: Element }>(\"anchor\");\nconst groupDisabled = useAncestorDisabled(() => anchor.value?.$el);\n\n// `id` and `aria-describedby` reach this control as fallthrough attrs rather\n// than props, so they are handed in as this caller's own values: a caller who\n// sets either still beats the row, and the row's description is merged into\n// theirs. `field.attrs` then spreads onto `DatePickerField` **after**\n// `fieldAttrs`, which is the node both were already landing on — DatePicker.vue\n// carries the full account of that position and of where Reka then puts each\n// key.\n//\n// `outOfRange` is deliberately **not** folded in here. `field.invalid` is the\n// claim about this control — the host's or, unset, the row's — and the two\n// markers on the anchor below depend on it staying that: one says the host\n// called this wrong, the other says the instant misses bounds the host itself\n// declared, and a single resolved boolean cannot say both. What they share is\n// the error *presentation*, which is `errored`.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  ariaLabelledby: attrs[\"aria-labelledby\"] as string | undefined,\n  name: props.name,\n  // The fieldset beats the prop in both directions, exactly as it does for the\n  // trigger button inside this very control.\n  disabled: groupDisabled.value ? true : props.disabled,\n  readonly: props.readonly,\n  invalid: props.invalid,\n  required: props.required,\n}));\n\n// `aria-labelledby` for the group, resolved against the row — DatePicker's\n// reasoning, and the same three-way guard.\nconst groupLabelledBy = computed(() =>\n  attrs[\"aria-label\"] || attrs[\"aria-labelledby\"] ? undefined : field.labelledBy,\n);\n\nconst errored = computed(() => field.invalid || outOfRange.value);\n\n// The panel's open state is owned here, not left to Reka's `closeOnSelect` —\n// see DatePicker for why a host that validates before accepting would otherwise\n// watch the calendar refuse to close.\nconst open = ref(false);\n\n// The date handed back already carries the time the field is holding: Reka\n// builds each grid cell as `placeholder.set({ day })`, and the placeholder\n// follows the model value. That is the whole round trip, and it is load-bearing\n// enough to be pinned in both directions in the tests — picking a day keeps the\n// time, typing a time keeps the day. With nothing chosen yet the placeholder is\n// today at midnight, so a day chosen before any time means midnight, and\n// `toCalendarDateTime` above says the same thing a second time for a value that\n// somehow arrives without a clock at all.\nfunction onDateChange(date: DateValue | undefined) {\n  open.value = false;\n  emit(\"update:modelValue\", date ? toIso(date) : undefined);\n}\n\nfunction isDateToday(date: DateValue): boolean {\n  return isToday(date, getLocalTimeZone());\n}\n\n// One Tab stop across all of it — five segments here, or seven with an AM/PM\n// and a seconds segment, which is the difference between one Tab press and\n// seven to cross one control. The mechanism and the reason Reka's own\n// ArrowLeft/ArrowRight survives it are in DatePicker.\nconst focusedPart = ref<string>();\n\nfunction segmentTabIndex(part: string, segments: readonly { part: string }[]): number | undefined {\n  // Read-only keeps every stop it had, unlike disabled: the instant is on show\n  // and a reader still arrows across the segments to read it.\n  if (field.disabled || part === \"literal\") return undefined;\n  const editable = segments.filter((segment) => segment.part !== \"literal\");\n  // The remembered segment is dropped when a granularity, locale or hour-cycle\n  // change takes it away — a field whose only tab stop is a seconds segment that\n  // no longer exists is a field nothing can reach.\n  const active =\n    focusedPart.value !== undefined &&\n    editable.some((segment) => segment.part === focusedPart.value)\n      ? focusedPart.value\n      : editable[0]?.part;\n  return part === active ? 0 : -1;\n}\n\n// Reka seeds the field's segment values from the granularity and builds its\n// formatter from the hour cycle once, at setup, and watches neither. TimePicker\n// carries the observed symptoms — a 13:30 field relabelling itself \"1:30 AM\",\n// and a widened granularity rendering a segment with no role. Both are\n// structural, so the field is keyed on them and rebuilt rather than patched.\n// `locale` is deliberately not in the key: Reka does watch that, and rebuilding\n// would throw away focus mid-edit for a change it already handles.\nconst shape = computed(() => `${props.granularity}-${props.hourCycle}`);\n\n/**\n * The same \"13 PM\" defect TimePicker documents, in the same shared Reka segment\n * code: the hour publishes `aria-valuenow` off the internal 24-hour value while\n * declaring its range as 1–12. The announcement is rebuilt from what the segment\n * is actually showing, and only under an explicit 12-hour cycle — left to the\n * locale, Reka defers to the formatter and the pair already agrees.\n */\nfunction hourAnnouncement(\n  segments: readonly { part: string; value: string }[],\n): Record<string, string | number> | undefined {\n  if (props.hourCycle !== 12) return undefined;\n  const shown = Number(segments.find((segment) => segment.part === \"hour\")?.value);\n  if (!Number.isInteger(shown)) return undefined;\n  const period = segments.find((segment) => segment.part === \"dayPeriod\")?.value;\n  return { \"aria-valuenow\": shown, \"aria-valuetext\": period ? `${shown} ${period}` : `${shown}` };\n}\n\nconst headingId = useId();\n\nconst panel = ref<HTMLElement | null>(null);\n\n// Focus lands on the day the calendar is already sitting on rather than on the\n// previous-month button; DatePicker carries the reasoning.\nfunction onOpenAutoFocus(event: Event) {\n  const day = panel.value?.querySelector<HTMLElement>(\n    '[data-reka-calendar-cell-trigger][tabindex=\"0\"]',\n  );\n  if (!day) return;\n  event.preventDefault();\n  day.focus();\n}\n</script>\n\n<template>\n  <DatePickerRoot\n    v-model:open=\"open\"\n    v-bind=\"rootValue\"\n    :locale=\"locale\"\n    :disabled=\"field.disabled\"\n    :readonly=\"field.readonly\"\n    :granularity=\"granularity\"\n    prevent-deselect\n    @update:model-value=\"onDateChange\"\n  >\n    <!-- Two markers rather than one spelled twice: `data-invalid` is the host\n         saying so, `data-out-of-range` is the instant falling outside `min` and\n         `max`. Reka already spells a third meaning `data-invalid` on the field\n         group below, which is why neither of these lives there. -->\n    <DatePickerAnchor\n      ref=\"anchor\"\n      :data-invalid=\"field.invalid || undefined\"\n      :data-out-of-range=\"outOfRange || undefined\"\n      :data-readonly=\"field.readonly || undefined\"\n      :class=\"cn('block w-full', attrs.class as string)\"\n    >\n      <!-- The one control in this family that keeps an `aria-invalid` binding\n           after the `v-bind`, and the exception is narrow: an individual\n           attribute wins over the spread, so the rule everywhere else is to\n           delete it rather than overwrite `field.attrs`' resolved value with a\n           raw prop. Here it is not a raw prop — `errored` is that same resolved\n           value *plus* an out-of-range instant, so this can only ever add the\n           attribute where the spread already omitted it, never take it away. -->\n      <DatePickerField\n        :key=\"shape\"\n        v-slot=\"{ segments }\"\n        v-bind=\"{ ...fieldAttrs, ...field.attrs }\"\n        :aria-labelledby=\"groupLabelledBy\"\n        :aria-invalid=\"errored || undefined\"\n        :class=\"\n          cn(\n            // The text input's own height scale, so an instant sitting in a form\n            // row beside a text field lines up rather than nearly lining up. No\n            // gap: every separator between two segments — the slashes, the\n            // comma, the colon — is itself a segment, so spacing them apart\n            // writes the value as `3 / 14 / 2026 , 09 : 30`.\n            'flex h-9 w-full items-center rounded-md border border-input bg-background px-3 text-sm text-foreground',\n            'transition-[color,background-color,border-color,box-shadow] duration-fast ease-out',\n            'focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring',\n            !errored && 'focus-within:shadow-halo',\n            // Three resting appearances, all three painted on this group rather\n            // than on the segments: a per-segment fill leaves the slashes, the\n            // comma and the colon on `background`, and the instant comes out\n            // striped.\n            //\n            // Read-only lifts to `subtle` and keeps its focus ring and its\n            // full-strength text — a read-only instant is a value on show, not\n            // an unavailable control — with the rim left at `input`, because the\n            // field is still a Tab stop and still submitted. Reka's own\n            // `data-readonly` on this group says the same thing to assistive\n            // tech, so nothing here rests on colour.\n            field.readonly && 'bg-subtle',\n            // Drained rather than faded, for the reason DatePicker writes out:\n            // `opacity-50` here took the five segments down with the box, from\n            // 14.09:1 to 2.99:1, and the segments are the whole value. The fill\n            // drains one step past read-only, the muted text over it is 4.68:1,\n            // and the rim slackens from `input` to `border` — three channels, so\n            // the two states do not part on hue alone. Set on the group because\n            // no segment declares a resting colour of its own, so each inherits\n            // this one.\n            field.disabled && 'cursor-not-allowed border-border bg-muted text-muted-foreground',\n            // Last of the rules that name a border colour: `cn()` resolves one\n            // by whichever class it saw last, so a field both in error and\n            // unavailable would otherwise lose its destructive rim.\n            errored && 'border-destructive focus-within:outline-destructive',\n          )\n        \"\n      >\n        <!-- Every `:aria-label` from here down replaces one Reka writes in\n             English inside its own render function. Each reaches the DOM node\n             as a fallthrough attribute, which Vue merges last, so it is a\n             replacement rather than a second name. Removing one does not fall\n             back to nothing; it falls back to Reka's English, which is the\n             failure the label seam exists to close. -->\n        <DatePickerInput\n          v-for=\"(item, index) in segments\"\n          :key=\"index\"\n          :part=\"item.part\"\n          :tabindex=\"segmentTabIndex(item.part, segments)\"\n          :aria-label=\"segmentLabel(item.part)\"\n          v-bind=\"{\n            ...segmentValueText(item.part, item.value, fromIso(props.modelValue)?.month),\n            ...(item.part === 'hour' ? hourAnnouncement(segments) : undefined),\n          }\"\n          :class=\"\n            cn(\n              'tabular rounded-sm px-0.5 outline-none',\n              'transition-colors duration-instant ease-out',\n              'focus:bg-primary-muted focus:text-primary-text',\n              'data-[placeholder]:text-muted-foreground',\n              item.part === 'literal' && 'text-muted-foreground',\n            )\n          \"\n          @focusin=\"focusedPart = item.part\"\n        >\n          {{ item.value }}\n        </DatePickerInput>\n\n        <!-- Named for what it opens, which is a calendar and not a clock: the\n             time is entered in the segments to its left and has no panel.\n             Dropped entirely while read-only, as in DatePicker: Reka's\n             `readonly` makes every cell's click a no-op, so the button would\n             open a panel in which nothing can be chosen. -->\n        <DatePickerTrigger\n          v-if=\"!field.readonly\"\n          :aria-label=\"panelText.openCalendar\"\n          class=\"ml-auto 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 disabled:cursor-not-allowed\"\n        >\n          <CalendarClock class=\"h-4 w-4\" />\n        </DatePickerTrigger>\n      </DatePickerField>\n    </DatePickerAnchor>\n\n    <DatePickerContent\n      align=\"start\"\n      :side-offset=\"6\"\n      :class=\"\n        cn(\n          'z-overlay rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-md outline-none',\n          // Each class scoped to its own state, never unconditional — an\n          // unconditional entrance never re-fires and Reka never unmounts the\n          // closed content. The closed one is the exit whose animationend\n          // Presence waits out before taking the panel away.\n          'data-[state=open]:animate-fade-rise data-[state=closed]:animate-fade-fall',\n        )\n      \"\n      @open-auto-focus=\"onOpenAutoFocus\"\n    >\n      <!-- The whole panel rises as one piece; the cells carry no stagger of\n           their own, for the reason DatePicker writes out. -->\n      <div ref=\"panel\" class=\"flex flex-col gap-3\">\n        <!-- `calendarLabel` is a real Reka prop rather than a literal to\n             override, and it defaults to `\"Event Date\"`. It is published twice:\n             as the calendar container's `aria-label`, and inside a\n             visually-hidden live region Reka renders itself, which a\n             fallthrough attribute could not have reached. -->\n        <DatePickerCalendar v-slot=\"{ grid, weekDays }\" :calendar-label=\"panelText.calendar\">\n          <DatePickerHeader class=\"flex items-center justify-between gap-2\">\n            <!-- The pagers keep their opacity where the field and the cells\n                 gave it up: a chevron is a glyph, and fading one costs a reader\n                 nothing. Their names live in `aria-label`, not in dimmed text. -->\n            <DatePickerPrev\n              :aria-label=\"panelText.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\" />\n            </DatePickerPrev>\n\n            <!-- Paging changes nothing a reader is looking at except this line,\n                 and nothing moves focus, so without the live region the month\n                 silently becomes a different month. -->\n            <DatePickerHeading\n              :id=\"headingId\"\n              aria-live=\"polite\"\n              class=\"text-sm font-medium text-foreground\"\n            />\n\n            <DatePickerNext\n              :aria-label=\"panelText.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\" />\n            </DatePickerNext>\n          </DatePickerHeader>\n\n          <DatePickerGrid\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            <!-- `role=\"grid\"` over Reka's `role=\"application\"`, and rows laid\n                 out by the table rather than by flex — `display: flex` on a `tr`\n                 drops its implicit `row` mapping and leaves `role=\"gridcell\"`\n                 inside a grid with no row between them. Both are DatePicker's\n                 findings, kept identical here on purpose. -->\n            <DatePickerGridHead>\n              <DatePickerGridRow>\n                <DatePickerHeadCell\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                </DatePickerHeadCell>\n              </DatePickerGridRow>\n            </DatePickerGridHead>\n\n            <DatePickerGridBody>\n              <DatePickerGridRow v-for=\"(week, weekIndex) in month.rows\" :key=\"weekIndex\">\n                <DatePickerCell\n                  v-for=\"day in week\"\n                  :key=\"day.toString()\"\n                  :date=\"day\"\n                  class=\"p-0 text-center\"\n                >\n                  <!-- Out of range is colour and a strike, not a fade: the\n                       number is the cell's whole content, and half alpha took\n                       it from 14.09:1 to 3.13:1. Muted is 5.76:1, the\n                       `:not([data-selected])` keeps it from ever ordering\n                       against the selected fill's own text colour, and the\n                       strike is what separates an unavailable day from an\n                       adjacent month's — muted too, and still selectable. -->\n                  <DatePickerCellTrigger\n                    v-slot=\"{ dayValue, today }\"\n                    :day=\"day\"\n                    :month=\"month.value\"\n                    :aria-current=\"isDateToday(day) ? 'date' : undefined\"\n                    class=\"group relative inline-flex h-9 w-9 items-center justify-center rounded-sm text-sm text-foreground transition-colors duration-fast ease-out hover:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo data-[outside-view]:text-muted-foreground data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[disabled]:pointer-events-none data-[disabled]:line-through [&[data-disabled]:not([data-selected])]:text-muted-foreground\"\n                  >\n                    {{ dayValue }}\n                    <!-- Today's second cue: a shape rather than a hue, so it\n                         survives a colour deficiency and forced-colors both.\n                         `aria-current` on the cell is what a screen reader\n                         reads. -->\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                  </DatePickerCellTrigger>\n                </DatePickerCell>\n              </DatePickerGridRow>\n            </DatePickerGridBody>\n          </DatePickerGrid>\n        </DatePickerCalendar>\n      </div>\n    </DatePickerContent>\n  </DatePickerRoot>\n</template>\n"],"mappings":"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"}

package/dist/packages/primitives/date-time-picker/src/index.d.ts

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

package/dist/packages/primitives/date-time-picker/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/date-time-picker/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,YAAY,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/packages/primitives/date-time-picker/src/index.js

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

package/dist/packages/primitives/date-time-range-picker/src/DateTimeRangePicker.js

@@ -0,0 +1,7 @@
+import DateTimeRangePicker_vue_vue_type_script_setup_true_lang_default, { DATE_TIME_RANGE_LABELS } from "./DateTimeRangePicker.vue_vue_type_script_setup_true_lang.js";
+//#region packages/primitives/date-time-range-picker/src/DateTimeRangePicker.vue
+var DateTimeRangePicker_default = DateTimeRangePicker_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DATE_TIME_RANGE_LABELS, DateTimeRangePicker_default as default };
+
+//# sourceMappingURL=DateTimeRangePicker.js.map

package/dist/packages/primitives/date-time-range-picker/src/DateTimeRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeRangePicker.js","names":[],"sources":["../../../../../packages/primitives/date-time-range-picker/src/DateTimeRangePicker.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DateTimeRangeLabels } from \"@ecoma-io/loom-labels\";\nimport type {\n  CalendarPanelLabels,\n  DateSegmentLabels,\n  RangeCellLabels,\n  TimeSegmentLabels,\n} from \"@ecoma-io/loom-labels\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * A span between two instants as the outside world holds it: two plain ISO\n * local date-time strings, `\"YYYY-MM-DDTHH:mm\"`, both optional.\n *\n * The shape is `DateRange`'s and the reasoning behind it is `DateRange`'s — a\n * half-made range has to be representable, and `range.start` reads where\n * `range[0]` needs a comment. What is deliberately not shared is the **name**.\n * Two identically-shaped types whose strings are in different formats are\n * exactly what distinct names are for: a `DateRange` handed to this control\n * loses its times, and a `DateTimeRange` handed to DateRangePicker carries a\n * `T09:30` no calendar day can hold. One name for both would let either mistake\n * compile.\n */\nexport interface DateTimeRange {\n  /** The instant the span opens at, ISO `\"YYYY-MM-DDTHH:mm\"`. Absent while nothing has been chosen. */\n  start?: string | undefined;\n  /** The instant the span closes at, ISO `\"YYYY-MM-DDTHH:mm\"`. Absent while only the start has been chosen. */\n  end?: string | undefined;\n}\n\nconst MINUTES_PER_HOUR = 60;\nconst MINUTES_PER_DAY = 1440;\n\n/** A date and a time in the control's locale, at the precision the field is showing. */\nfunction formatInstant(\n  locale: string,\n  date: DateValue,\n  hour12: boolean | undefined,\n  seconds: boolean,\n): string {\n  return new Intl.DateTimeFormat(locale, {\n    dateStyle: \"long\",\n    timeStyle: seconds ? \"medium\" : \"short\",\n    // Absent means \"follow the locale\", which is what an unset `hourCycle`\n    // means everywhere else on this surface; a concrete `false` would force\n    // 24-hour onto a reader whose locale writes AM and PM.\n    ...optional({ hour12 }),\n  }).format(date.toDate(getLocalTimeZone()));\n}\n\n/**\n * English's plural rule, in English's own bag, which is the only place a plural\n * rule belongs. It is not extracted, not shared, and applies to nothing a host\n * supplies: `status` hands over the minutes and receives a finished sentence,\n * so a language with one form or with six selects its own.\n */\nfunction englishDuration(minutes: number): string {\n  if (minutes === 0) return \"no time at all\";\n  const days = Math.floor(minutes / MINUTES_PER_DAY);\n  const hours = Math.floor((minutes % MINUTES_PER_DAY) / MINUTES_PER_HOUR);\n  const rest = minutes % MINUTES_PER_HOUR;\n  return [\n    [days, \"day\"],\n    [hours, \"hour\"],\n    [rest, \"minute\"],\n  ]\n    .filter(([count]) => (count as number) > 0)\n    .map(([count, name]) => `${String(count)} ${String(name)}${count === 1 ? \"\" : \"s\"}`)\n    .join(\" \");\n}\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n */\nexport const DATE_TIME_RANGE_LABELS: DateTimeRangeLabels = {\n  startDate: \"Start date and time\",\n  endDate: \"End date and time\",\n  status: ({ locale, start, end, minutes, hour12, seconds }) => {\n    const anchor = start ?? end;\n    if (!anchor) return \"Nothing chosen. Choose the first day of the range.\";\n    if (!start || !end || minutes === undefined) {\n      return `${formatInstant(locale, anchor, hour12, seconds)} chosen. Choose the last day of the range.`;\n    }\n    const span = `${formatInstant(locale, start, hour12, seconds)} to ${formatInstant(locale, end, hour12, seconds)}`;\n    if (minutes < 0) return `${span}. The end falls before the start.`;\n    return `${span}, ${englishDuration(minutes)}.`;\n  },\n};\n\n/**\n * Everything this control can be asked to say: the four shared slices, plus its\n * own. Annotate a bag with `LabelOverrides<DateTimeRangePickerLabels>` and never\n * with this, which is total.\n */\nexport type DateTimeRangePickerLabels = DateSegmentLabels &\n  TimeSegmentLabels &\n  CalendarPanelLabels &\n  RangeCellLabels &\n  DateTimeRangeLabels;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useId, useTemplateRef, watch } from \"vue\";\nimport {\n  DateRangePickerRoot,\n  DateRangePickerAnchor,\n  DateRangePickerField,\n  DateRangePickerInput,\n  DateRangePickerTrigger,\n  DateRangePickerContent,\n  DateRangePickerCalendar,\n  DateRangePickerHeader,\n  DateRangePickerPrev,\n  DateRangePickerHeading,\n  DateRangePickerNext,\n  DateRangePickerGrid,\n  DateRangePickerGridHead,\n  DateRangePickerGridRow,\n  DateRangePickerHeadCell,\n  DateRangePickerGridBody,\n  DateRangePickerCell,\n  DateRangePickerCellTrigger,\n} from \"reka-ui\";\nimport { CalendarRange, ChevronLeft, ChevronRight } from \"@lucide/vue\";\nimport {\n  getLocalTimeZone,\n  isSameDay,\n  isToday,\n  parseDateTime,\n  toCalendarDate,\n  toCalendarDateTime,\n  type CalendarDateTime,\n  type DateValue,\n} from \"@internationalized/date\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useAncestorDisabled } from \"@ecoma-io/loom-labels\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport {\n  CALENDAR_PANEL_LABELS,\n  DATE_SEGMENT_LABELS,\n  RANGE_CELL_LABELS,\n  TIME_SEGMENT_LABELS,\n  emptySegmentValueText,\n  isDateSegmentPart,\n  isTimeSegmentPart,\n  type RangeCellPart,\n} from \"@ecoma-io/loom-labels\";\n\n/** The range as Reka models it, which is the same shape carrying calendar objects. */\ntype CalendarRangeValue = { start: DateValue | undefined; end: DateValue | undefined };\n\n/** Which end of the range a segment belongs to, as Reka's field parts name it. */\ntype SegmentType = \"start\" | \"end\";\n\n/** A time of day with no day attached, which is the half of an instant the calendar never touches. */\ntype TimeOfDay = { hour: number; minute: number; second: number };\n\n/**\n * DateTimeRangePicker — a span between two instants: a day and a time at each\n * end, entered either by typing across one segmented field or by picking the\n * two days out of a two-month calendar. Reach for it wherever the value is a\n * window with a clock on it — a meeting, a shift, a maintenance slot, a log\n * query.\n *\n * It is the intersection of two controls that already exist, and it re-decides\n * nothing either of them settled. From\n * [DateRangePicker](../DateRangePicker/DateRangePicker.vue): the\n * `{ start, end }` model with both halves optional so a half-made range is\n * representable, the two named half-groups, the two months that stack rather\n * than dropping one below `sm`, and the `role=\"status\"` line that gives a\n * keyboard reader what the hover preview only gives a pointer. From\n * [DateTimePicker](../DateTimePicker/DateTimePicker.vue): the local ISO\n * date-time value with no timezone in it, `min`/`max` widened to whole days on\n * the way into the calendar with instant precision re-applied here, the field\n * keyed on `${granularity}-${hourCycle}` because Reka reads both once, and the\n * rewritten hour announcement. Read those two files for the reasoning; the\n * comments below cover only what having two ends *and* a clock changes.\n *\n * **What it changes is that the round trip doubles and then grows a cross\n * term.** DateTimePicker has one time to protect through a day being picked.\n * This has the start's time, the end's time, and the case where both ends fall\n * on the same day at different times — a meeting from 09:00 to 10:00, which is\n * the single most ordinary thing anyone will bind to this control and which a\n * range calendar that refuses a repeated day, or collapses one to a single\n * instant, gets wrong. `heldTimes` below is what keeps all three.\n *\n * Ordering is inherited rather than re-decided, and the two halves of it are\n * inherited from different parents. The calendar orders **days**: clicking the\n * 20th and then the 14th gives the 14th to the 20th, because refusing the\n * second half of a backwards gesture explains nothing. It never orders\n * **times** — those are only ever the ones each half already had, so a range\n * that ends before it starts (which within one day only the times can decide)\n * is announced invalid, exactly as a typed one is, rather than silently\n * swapped. Normalising across days and quietly not within one would be the\n * trap.\n *\n * For a span of whole days reach for DateRangePicker; for one instant,\n * DateTimePicker; for a time of day with no date, TimePicker. Two\n * DateTimePickers side by side are two values and two validations, and nothing\n * between them knows that the second must not fall before the first.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself through\n * `useFieldControl()` — the row's id, the id of its hint or error line, and\n * `required` / `invalid` / `disabled` / `readonly` / `name` — so `<Field\n * label=\"Meeting\" error=\"…\"><DateTimeRangePicker /></Field>` needs no\n * attributes at the call site. Every prop below still wins over the row when it\n * is set, in both directions, which is why the four booleans default to\n * `undefined` rather than `false`. The row describes the span as a whole and\n * not either end: a description repeated onto both halves is read out twice for\n * one value.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The chosen span, as `{ start, end }` ISO `\"YYYY-MM-DDTHH:mm\"` strings —\n     * `\"…:ss\"` when `granularity` asks for seconds. Either half may be absent:\n     * `{}` is nothing chosen, `{ start }` is a range half made. A bare\n     * `\"YYYY-MM-DD\"` is accepted in either half and read as midnight that day.\n     * The explicit `| undefined` is what lets `v-model` bind a ref that clears.\n     */\n    modelValue?: DateTimeRange | undefined;\n    /** The earliest choosable instant, same format. The calendar disables every day that lies wholly before it; a time before it on the boundary day is announced invalid rather than refused. */\n    min?: string;\n    /** The latest choosable instant, same format. The calendar disables every day that lies wholly after it; a time after it on the boundary day is announced invalid rather than refused. */\n    max?: string;\n    /** How far down both halves of the field go. `\"minute\"` reports `\"YYYY-MM-DDTHH:mm\"`; `\"second\"` adds a seconds segment to each end and reports `\"YYYY-MM-DDTHH:mm:ss\"`. */\n    granularity?: \"minute\" | \"second\";\n    /** Whether both times read as 12-hour with an AM/PM segment or as 24-hour. Display only: the value stays 24-hour. Unset follows `locale`. */\n    hourCycle?: 12 | 24;\n    /** BCP 47 tag driving the order of the segments in both halves, the month and weekday names, which day a week starts on, and the 12-or-24-hour default. */\n    locale?: string;\n    /** How many months the calendar shows at once. Two is the default because a span is usually read across a month boundary; one is for a host that knows it is rendering into a narrow shell. */\n    months?: 1 | 2;\n    /** Unavailable: dims the control, refuses the calendar, and takes the field out of the tab order. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Shows the span without allowing an edit: the field stays a Tab stop and stays submitted, and the calendar button is dropped because nothing in the calendar could be chosen. Unset defers to a wrapping Field. */\n    readonly?: boolean | undefined;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. An instant outside `min`/`max`, or an end before its start, does the same on its own whatever this says. Unset defers to a wrapping Field's `error`. */\n    invalid?: boolean | undefined;\n    /** Marks the field mandatory to assistive tech (`aria-required` on the group holding both halves). Unset defers to a wrapping Field. */\n    required?: boolean | undefined;\n    /** The field name for a native form post or `FormData`. Reka submits the whole span through one hidden input, as `start - end`. Unset defers to a wrapping Field. */\n    name?: string;\n    /**\n     * Names for everything this control says out loud, as any subset of\n     * `DateTimeRangePickerLabels` — the rest stay as the host's\n     * `provideLoomLabels` 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: eleven of the eighteen names replace English literals Reka UI\n     * writes of its own accord, and a language is set once with\n     * `provideLoomLabels`.\n     */\n    labels?: LabelOverrides<DateTimeRangePickerLabels>;\n  }>(),\n  {\n    granularity: \"minute\",\n    locale: \"en\",\n    months: 2,\n    // Not `false`, for any of the four — TextField.vue carries the full\n    // reasoning: `false` is a caller's decision that must beat the row, absent\n    // is a caller saying nothing, and only `undefined` survives to mean that\n    // past Vue's absent-Boolean-casts-to-false rule.\n    disabled: undefined,\n    readonly: undefined,\n    invalid: undefined,\n    required: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** The chosen span as ISO `\"YYYY-MM-DDTHH:mm\"` strings. A half-made range arrives as `{ start }`; a cleared one as `{}`. */\n  \"update:modelValue\": [value: DateTimeRange];\n}>();\n\nconst SEGMENT_TYPES: readonly SegmentType[] = [\"start\", \"end\"];\n\n// Five slots, one prop. There is no single `text` for the whole control because\n// there is no single slot: four of the five are vocabularies this control\n// shares with its siblings and only the last is its own. Naming them apart is\n// what keeps a reader of the template able to see which one a binding came\n// from. The one `labels` prop feeds all five — a getter returning the\n// intersection satisfies each slice, and the keys a slice does not know are\n// ignored by `useLabels`' own return type.\nconst dateText = useLabels(\"dateSegments\", DATE_SEGMENT_LABELS, () => props.labels);\nconst timeText = useLabels(\"timeSegments\", TIME_SEGMENT_LABELS, () => props.labels);\nconst panelText = useLabels(\"calendarPanel\", CALENDAR_PANEL_LABELS, () => props.labels);\nconst cellText = useLabels(\"rangeCell\", RANGE_CELL_LABELS, () => props.labels);\nconst text = useLabels(\"dateTimeRange\", DATE_TIME_RANGE_LABELS, () => props.labels);\n\n// Read through the refs on every call rather than resolved into a lookup table\n// once: a table built in `setup` freezes the first language and every later\n// switch silently does nothing. `undefined` for the `literal` separators, which\n// Reka renders `aria-hidden` and which must stay unnamed.\nfunction segmentLabel(part: string): string | undefined {\n  if (isDateSegmentPart(part)) return dateText.value[part];\n  return isTimeSegmentPart(part) ? timeText.value[part] : undefined;\n}\n\n// The companion to `segmentLabel`, and the reason it returns an object rather\n// than a string is in `emptySegmentValueText`: Reka's `aria-valuetext` is a\n// hard-coded \"Empty\" only while the segment holds nothing, so this replaces\n// that case and leaves the filled one — a number, and the locale's own month\n// name — exactly as Reka wrote it.\n// The half that owns the part owns its empty message too, so a host localising\n// only `timeSegments` still reaches the clock segments of this control.\nfunction segmentValueText(\n  part: string,\n  value: string,\n  monthValue?: number,\n): { \"aria-valuetext\"?: string } {\n  const empty = isTimeSegmentPart(part) ? timeText.value.empty : dateText.value.empty;\n  const emptyResult = emptySegmentValueText(part, value, empty);\n  if (emptyResult[\"aria-valuetext\"]) return emptyResult;\n  if (part === \"month\" && monthValue !== undefined) {\n    return {\n      \"aria-valuetext\": dateText.value.filledMonth({ value: monthValue, locale: props.locale }),\n    };\n  }\n  if (part === \"dayPeriod\") {\n    return { \"aria-valuetext\": timeText.value.filledDayPeriod({ dayPeriod: value }) };\n  }\n  return {};\n}\n\n// Routed exactly as both parents route it, and for the same reasons: `class`\n// sizes the whole control so it lands on the anchor, and everything else names\n// or describes the value, so it lands on the `role=\"group\"` field.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: fieldAttrs } = useSplitAttrs();\n\nfunction fromIso(value: string | undefined): CalendarDateTime | undefined {\n  if (!value) return undefined;\n  try {\n    // `parseDateTime` reads a bare `\"YYYY-MM-DD\"` as midnight that day and\n    // refuses an offset or a `Z` outright — DateTimePicker carries why that\n    // refusal is wanted rather than tolerated.\n    return parseDateTime(value);\n  } catch {\n    return undefined;\n  }\n}\n\nfunction pad(value: number): string {\n  return String(value).padStart(2, \"0\");\n}\n\n// Written out rather than taken from `toString()`, for the reason DateTimePicker\n// gives: `toString()` always prints seconds, so a minute-granularity field would\n// report a second of its own invention.\nfunction toIso(date: DateValue): string {\n  const instant = toCalendarDateTime(date);\n  const stamp = `${toCalendarDate(instant).toString()}T${pad(instant.hour)}:${pad(instant.minute)}`;\n  return props.granularity === \"second\" ? `${stamp}:${pad(instant.second)}` : stamp;\n}\n\n// The calendar chooses a day and the bounds fence an instant, so the boundary\n// day is only partly available and is widened here to be reachable at all.\n// DateTimePicker carries the full account — and what it gives up, `outOfRange`\n// below takes back at the precision the time is actually entered.\nfunction startOfDay(date: CalendarDateTime | undefined) {\n  return date?.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });\n}\n\nfunction endOfDay(date: CalendarDateTime | undefined) {\n  return date?.set({ hour: 23, minute: 59, second: 59, millisecond: 999 });\n}\n\nconst rootValue = computed(() =>\n  optional({\n    // Half of a range is still a range, so the two ends are converted\n    // independently and an unparseable one only empties its own half. The whole\n    // key is dropped when nothing at all is bound, which is what keeps an\n    // unbound control uncontrolled — see `optional()`.\n    modelValue: props.modelValue\n      ? { start: fromIso(props.modelValue.start), end: fromIso(props.modelValue.end) }\n      : undefined,\n    minValue: startOfDay(fromIso(props.min)),\n    maxValue: endOfDay(fromIso(props.max)),\n    hourCycle: props.hourCycle,\n  }),\n);\n\n// The half of the bound the calendar gave up, applied to **both** ends: a span\n// whose start is an hour early is as unbookable as one whose end is an hour\n// late, and Reka's own comparison now only sees the widened whole-day bounds.\nconst outOfRange = computed(() => {\n  const lower = fromIso(props.min);\n  const upper = fromIso(props.max);\n  if (!lower && !upper) return false;\n  return SEGMENT_TYPES.some((type) => {\n    const value = fromIso(props.modelValue?.[type]);\n    if (!value) return false;\n    return (!!lower && value.compare(lower) < 0) || (!!upper && value.compare(upper) > 0);\n  });\n});\n\n// An end before its start. DateRangePicker never had to derive this: two days\n// out of a calendar are ordered by Reka on the way out, and a backwards range\n// could only ever be typed. Here it can also be *built* — collapsing a span onto\n// one day keeps each end's own time, and 17:00 to 09:00 is what that is — so the\n// state is real however it arrived, and it is invisible without something\n// saying so. The status line says it in words; this is what paints it.\nconst backwards = computed(() => {\n  const start = fromIso(props.modelValue?.start);\n  const end = fromIso(props.modelValue?.end);\n  return !!start && !!end && end.compare(start) < 0;\n});\n\n/**\n * The segments are `<div role=\"spinbutton\" tabindex=\"0\">`, and\n * `<fieldset disabled>` reaches only `<input>`, `<button>`, `<select>` and\n * `<textarea>` — so the trigger button inside a disabled group went inert while\n * the segments beside it still typed. Measured on this branch: an empty `mm`\n * segment became `8` on an arrow key. Exactly the defect DatePicker carries,\n * and fixed exactly the way DatePicker fixes it.\n *\n * Read off the DOM rather than taken from the Field context, which publishes no\n * `disabled` on purpose — see `../../lib/ancestor-disabled.ts`.\n */\nconst anchor = useTemplateRef<{ $el?: Element }>(\"anchor\");\nconst groupDisabled = useAncestorDisabled(() => anchor.value?.$el);\n\n// `id` and `aria-describedby` reach this control as fallthrough attrs rather\n// than props, so they are handed in as this caller's own values: a caller who\n// sets either still beats the row, and the row's description is merged into\n// theirs. `field.attrs` then spreads onto `DateRangePickerField` **after**\n// `fieldAttrs`, which is the node both were already landing on — DatePicker.vue\n// carries the full account of that position and of where Reka then puts each\n// key. It is the outer field group and not either half's own group: a\n// description repeated onto the start and the end is read out twice for one\n// span.\n//\n// Neither derived error is folded in here, for DateTimePicker's reason: three\n// separate claims — the host called this wrong, the instants miss the bounds\n// the host declared, the span runs backwards — cannot be carried by one\n// resolved boolean. What they share is the error *presentation*, `errored`.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  ariaLabelledby: attrs[\"aria-labelledby\"] as string | undefined,\n  name: props.name,\n  // The fieldset beats the prop in both directions, exactly as it does for the\n  // trigger button inside this very control.\n  disabled: groupDisabled.value ? true : props.disabled,\n  readonly: props.readonly,\n  invalid: props.invalid,\n  required: props.required,\n}));\n\n// `aria-labelledby` for the group, resolved against the row — DatePicker's\n// reasoning, and the same three-way guard.\nconst groupLabelledBy = computed(() =>\n  attrs[\"aria-label\"] || attrs[\"aria-labelledby\"] ? undefined : field.labelledBy,\n);\n\nconst errored = computed(() => field.invalid || outOfRange.value || backwards.value);\n\n// Owned here rather than left to Reka's `closeOnSelect`, for the reason\n// DatePicker gives, and closing on the *second* choice for the reason\n// DateRangePicker gives: the panel stays open over a half-made range because\n// the reader is not finished.\nconst open = ref(false);\n\n/**\n * The time each half last carried.\n *\n * Every calendar cell carries the placeholder's time, and the placeholder\n * follows the *start*. That is the whole round trip in DateTimePicker and it is\n * only half of one here: picking the end's day out of the calendar would give\n * the end the start's time. Worse, Reka's two-click protocol drops the end\n * outright on the click that begins a new range, so by the second click the\n * end's own time is nowhere in the model to be read back.\n *\n * So it is remembered here, and deliberately not as a computed: a computed over\n * `modelValue` is exactly the thing that has already gone. A half is forgotten\n * only when it is cleared while the panel is **closed** — that is a reader\n * emptying the field and meaning it, where a half missing mid-gesture is Reka's\n * protocol and its time still has an owner.\n */\nconst heldTimes: Record<SegmentType, TimeOfDay | undefined> = { start: undefined, end: undefined };\n\nwatch(\n  () => [props.modelValue?.start, props.modelValue?.end] as const,\n  ([start, end]) => {\n    for (const [type, iso] of [\n      [\"start\", start],\n      [\"end\", end],\n    ] as const) {\n      const value = fromIso(iso);\n      heldTimes[type] = value\n        ? { hour: value.hour, minute: value.minute, second: value.second }\n        : open.value\n          ? heldTimes[type]\n          : undefined;\n    }\n  },\n  { immediate: true },\n);\n\nfunction keepTime(type: SegmentType, picked: DateValue, fromCalendar: boolean): DateValue {\n  // The field is the only other thing that can move a value, and it moves the\n  // time itself — re-timing what it reports would overwrite the keystroke.\n  if (!fromCalendar) return picked;\n  const current = fromIso(props.modelValue?.[type]);\n  // A segment typed while the panel happens to be open lands on a day that has\n  // not moved, and that edit's time is the one that must win. Where the day did\n  // move, the held time and the current one agree anyway, so this costs\n  // nothing and closes the one case where they would not.\n  if (current && isSameDay(current, picked)) return picked;\n  const held = heldTimes[type];\n  return held ? toCalendarDateTime(picked).set(held) : picked;\n}\n\nfunction onRangeChange(range: CalendarRangeValue) {\n  // Read before `open` is written below. While the panel is open the calendar\n  // is what moved, and the calendar only ever chooses a day.\n  const fromCalendar = open.value;\n  if (range.start && range.end) open.value = false;\n  emit(\n    \"update:modelValue\",\n    optional({\n      start: range.start ? toIso(keepTime(\"start\", range.start, fromCalendar)) : undefined,\n      end: range.end ? toIso(keepTime(\"end\", range.end, fromCalendar)) : undefined,\n    }),\n  );\n}\n\nfunction isDateToday(date: DateValue): boolean {\n  return isToday(date, getLocalTimeZone());\n}\n\n// One Tab stop for the whole field, which is ten segments at the default\n// settings and fourteen with AM/PM and seconds at both ends. DateRangePicker's\n// roving stop, unchanged: Reka collects both halves' segments into one ordered\n// set and walks it with ArrowLeft/ArrowRight, so a stop per half would be an\n// arbitrary place to make a keyboard user press Tab. The remembered segment is\n// keyed by half *and* part — `hour` alone names two different segments here.\nconst focusedSegment = ref<string>();\n\nfunction segmentKey(type: SegmentType, part: string): string {\n  return `${type}:${part}`;\n}\n\nfunction segmentTabIndex(\n  type: SegmentType,\n  part: string,\n  segments: Record<SegmentType, readonly { part: string }[]>,\n): number | undefined {\n  // Read-only keeps every stop it had, unlike disabled: the span is on show and\n  // a reader still arrows across the segments to read it.\n  if (field.disabled || part === \"literal\") return undefined;\n  const editable = SEGMENT_TYPES.flatMap((each) =>\n    segments[each]\n      .filter((segment) => segment.part !== \"literal\")\n      .map((segment) => segmentKey(each, segment.part)),\n  );\n  // Dropped when a granularity, hour-cycle or locale change takes the\n  // remembered segment away — a field whose only tab stop is a seconds segment\n  // that no longer exists is a field nothing can reach.\n  const active =\n    focusedSegment.value !== undefined && editable.includes(focusedSegment.value)\n      ? focusedSegment.value\n      : editable[0];\n  return segmentKey(type, part) === active ? 0 : -1;\n}\n\n// Reka seeds the field's segment values from the granularity and builds its\n// formatter from the hour cycle once, at setup, and watches neither — the same\n// shared code, and so the same two observed symptoms TimePicker and\n// DateTimePicker record. Both are structural, so the field is rebuilt rather\n// than patched. `locale` is deliberately not in the key: Reka does watch that.\nconst shape = computed(() => `${props.granularity}-${String(props.hourCycle)}`);\n\n/**\n * The same \"13 PM\" defect DateTimePicker and TimePicker document, in the same\n * shared Reka segment code: the hour publishes `aria-valuenow` off the internal\n * 24-hour value while declaring its range as 1–12. Rebuilt from what the\n * segment is actually showing, and only under an explicit 12-hour cycle — left\n * to the locale, Reka defers to the formatter and the pair already agrees. It\n * takes one half's segments at a time, because the two hours are two segments\n * showing two different numbers.\n */\nfunction hourAnnouncement(\n  segments: readonly { part: string; value: string }[],\n): Record<string, string | number> | undefined {\n  if (props.hourCycle !== 12) return undefined;\n  const shown = Number(segments.find((segment) => segment.part === \"hour\")?.value);\n  if (!Number.isInteger(shown)) return undefined;\n  const period = segments.find((segment) => segment.part === \"dayPeriod\")?.value;\n  return { \"aria-valuenow\": shown, \"aria-valuetext\": period ? `${shown} ${period}` : `${shown}` };\n}\n\nconst headingId = useId();\n\n// Each grid's own name is formatted here rather than read off Reka because it\n// is needed in the parent scope of the cells, where Reka's slot props are not\n// in scope — and it is a date rather than a label, so `Intl` and `locale` are\n// the whole answer. A Thai reader gets a Buddhist year in it, as in the field.\nconst monthFormat = computed(\n  () => new Intl.DateTimeFormat(props.locale, { month: \"long\", year: \"numeric\" }),\n);\n\nfunction format(formatter: Intl.DateTimeFormat, date: DateValue): string {\n  return formatter.format(date.toDate(getLocalTimeZone()));\n}\n\nconst MS_PER_MINUTE = 60_000;\n\n/**\n * How long the span is, as a signed count of minutes — a number handed over,\n * never words. The `unit(count, name)` that used to append an `\"s\"` here was\n * English's plural rule sitting in a control that renders in every language;\n * it is deleted rather than extracted, and English's own copy of it lives in\n * `DATE_TIME_RANGE_LABELS` where nothing else inherits it.\n *\n * DateRangePicker counts **days with both ends included**, because a booking of\n * the 14th to the 20th is seven days. That rule is wrong here, and wrong in the\n * direction that matters most: it reads a meeting from 09:00 to 10:00 as \"1\n * day\". A span between two instants is the distance between them, so this\n * measures that instead — and signs it, so an end before its start arrives as a\n * negative rather than as a second boolean the label would have to be handed.\n *\n * Measured through UTC rather than the local zone: this value carries no\n * timezone at all, so the honest answer is wall-clock. Converting through the\n * reader's zone would add or drop an hour across a daylight-saving boundary for\n * two instants that never claimed to be in it.\n */\nfunction spanMinutes(start: DateValue, end: DateValue): number {\n  const from = toCalendarDateTime(start).toDate(\"UTC\").getTime();\n  const to = toCalendarDateTime(end).toDate(\"UTC\").getTime();\n  return Math.round((to - from) / MS_PER_MINUTE);\n}\n\n// **The accessibility decision this control inherits and has to say more in.**\n// The band drawn between the anchor and the pointer is what makes a range\n// calendar legible and it is worth nothing to a reader who is not looking at\n// it. Reka moves the preview on `focusin` as well as `mouseenter`, which covers\n// the reader who can see the grid; this line is the same information as text,\n// in a `role=\"status\"` above the grids.\n//\n// It says more than DateRangePicker's does because it has more to say: the two\n// ends are instants, not days, so the summary names them with their times and\n// reports how long the span actually is. The backwards case gets its own\n// sentence — that state is now reachable within a single day, where nothing in\n// the grid distinguishes it, and it must not be carried by the destructive\n// border alone.\nfunction rangeStatus(range: CalendarRangeValue): string {\n  // The whole line is one label taking raw values — two instants and a signed\n  // count of minutes — rather than four sentences this control joins. Which end\n  // is chosen, where a duration sits in the sentence and how \"2 days 3 hours\"\n  // is written are all properties of a language.\n  return text.value.status({\n    locale: props.locale,\n    start: range.start,\n    end: range.end,\n    minutes: range.start && range.end ? spanMinutes(range.start, range.end) : undefined,\n    hour12: props.hourCycle === undefined ? undefined : props.hourCycle === 12,\n    seconds: props.granularity === \"second\",\n  });\n}\n\n/**\n * A cell's part in the range, or nothing when it has none. DateRangePicker's,\n * unchanged in substance: the first day, the last and the ones between are\n * three states drawn as three shades of one colour, which survives neither a\n * colour deficiency nor forced-colors mode, so the part is named in the cell's\n * accessible name instead.\n *\n * The one-day case is the boundary that matters more here than there. A span\n * from 09:00 to 17:00 on one day is an ordinary meeting rather than a\n * degenerate range, and its single cell is genuinely both ends — announced once\n * as that, not twice as two different things.\n */\nfunction rangePart(day: DateValue, range: CalendarRangeValue): RangeCellPart | undefined {\n  const isStart = range.start !== undefined && isSameDay(day, range.start);\n  const isEnd = range.end !== undefined && isSameDay(day, range.end);\n  if (isStart && isEnd) return \"both\";\n  if (isStart) return \"start\";\n  if (isEnd) return \"end\";\n  if (range.start && range.end && day.compare(range.start) > 0 && day.compare(range.end) < 0) {\n    return \"within\";\n  }\n  return undefined;\n}\n\n// Reka labels every cell with its full date already; this replaces that label\n// rather than adding to it, because a cell's part in the range has to arrive\n// *with* the date and there is no second slot on an element for a name. The\n// times are deliberately not in it: the cell is a day, and choosing it changes\n// only the day.\nfunction dayLabel(day: DateValue, range: CalendarRangeValue): string {\n  return cellText.value.cell({ locale: props.locale, date: day, part: rangePart(day, range) });\n}\n\nconst panel = ref<HTMLElement | null>(null);\n\n// Focus lands on the day the calendar is already sitting on rather than on the\n// previous-month button; DatePicker carries the reasoning.\nfunction onOpenAutoFocus(event: Event) {\n  const day = panel.value?.querySelector<HTMLElement>(\n    '[data-reka-calendar-cell-trigger][tabindex=\"0\"]',\n  );\n  if (!day) return;\n  event.preventDefault();\n  day.focus();\n}\n</script>\n\n<template>\n  <DateRangePickerRoot\n    v-slot=\"{ modelValue: range }\"\n    v-model:open=\"open\"\n    v-bind=\"rootValue\"\n    :locale=\"locale\"\n    :disabled=\"field.disabled\"\n    :readonly=\"field.readonly\"\n    :number-of-months=\"months\"\n    :granularity=\"granularity\"\n    prevent-deselect\n    @update:model-value=\"onRangeChange\"\n  >\n    <!-- Three markers rather than one spelled three ways: `data-invalid` is the\n         host saying so, `data-out-of-range` is an end falling outside `min` and\n         `max`, `data-backwards` is the span running the wrong way. Reka already\n         spells a fourth meaning `data-invalid` on the field group below, which\n         is why none of these lives there. -->\n    <DateRangePickerAnchor\n      ref=\"anchor\"\n      :data-invalid=\"field.invalid || undefined\"\n      :data-out-of-range=\"outOfRange || undefined\"\n      :data-backwards=\"backwards || undefined\"\n      :data-readonly=\"field.readonly || undefined\"\n      :class=\"cn('block w-full', attrs.class as string)\"\n    >\n      <!-- The `aria-invalid` binding after the `v-bind` is the same narrow\n           exception DateTimePicker makes: everywhere else the rule is to delete\n           it rather than overwrite `field.attrs`' resolved value with a raw\n           prop, and here it is not a raw prop — `errored` is that resolved\n           value *plus* the two derived states, so it can only add the attribute\n           where the spread already omitted it. -->\n      <DateRangePickerField\n        :key=\"shape\"\n        v-slot=\"{ segments }\"\n        v-bind=\"{ ...fieldAttrs, ...field.attrs }\"\n        :aria-labelledby=\"groupLabelledBy\"\n        :aria-invalid=\"errored || undefined\"\n        :class=\"\n          cn(\n            // The text input's own height scale, so a span sitting in a form row\n            // beside a text field lines up rather than nearly lining up. No gap:\n            // every separator between two segments is itself a segment, so\n            // spacing them apart writes the value as `3 / 14 / 2026 , 09 : 30`.\n            'flex h-9 w-full items-center rounded-md border border-input bg-background px-3 text-sm text-foreground',\n            'transition-[color,background-color,border-color,box-shadow] duration-fast ease-out',\n            'focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring',\n            !errored && 'focus-within:shadow-halo',\n            // Three resting appearances, all three painted on this group rather\n            // than on the segments: ten segments and their separators, so a\n            // per-segment fill would leave every slash, comma, colon and the\n            // dash between the halves on `background` — a striped control.\n            //\n            // Read-only lifts to `subtle` and keeps its focus ring and its\n            // full-strength text — a read-only span is a value on show, not an\n            // unavailable control — with the rim left at `input`, because the\n            // field is still a Tab stop and still submitted. Reka's own\n            // `data-readonly` on this group says the same thing to assistive\n            // tech, so nothing here rests on colour.\n            field.readonly && 'bg-subtle',\n            // Drained rather than faded, for the reason DatePicker writes out:\n            // `opacity-50` took all ten segments and the dash between the halves\n            // down with the box, from 14.09:1 to 2.99:1 and the dash to 2.02:1.\n            // The fill drains one step past read-only, the muted text over it is\n            // 4.68:1, and the rim slackens from `input` to `border` — three\n            // channels, so the two states do not part on hue alone. The dash\n            // declares its own colour and the segments declare none, so this one\n            // line covers both by inheritance.\n            field.disabled && 'cursor-not-allowed border-border bg-muted text-muted-foreground',\n            // Last of the rules that name a border colour: `cn()` resolves one\n            // by whichever class it saw last, so a field both in error and\n            // unavailable would otherwise lose its destructive rim.\n            errored && 'border-destructive focus-within:outline-destructive',\n          )\n        \"\n      >\n        <!-- Each half is its own named group, as in DateRangePicker and for a\n             reason this control doubles: Reka labels a segment by its part\n             alone, which is ten segments and two identical sets of five names.\n             The group name is announced once on entering the half rather than\n             folded into every segment.\n\n             Every `:aria-label` from here down replaces one Reka writes in\n             English inside its own render function, reaching the DOM node as a\n             fallthrough attribute that Vue merges last. Removing one falls back\n             not to nothing but to Reka's English. -->\n        <template v-for=\"(type, typeIndex) in SEGMENT_TYPES\" :key=\"type\">\n          <span v-if=\"typeIndex > 0\" aria-hidden=\"true\" class=\"px-1.5 text-muted-foreground\"\n            >–</span\n          >\n\n          <div\n            role=\"group\"\n            :aria-label=\"type === 'start' ? text.startDate : text.endDate\"\n            class=\"flex items-center\"\n          >\n            <DateRangePickerInput\n              v-for=\"(item, index) in segments[type]\"\n              :key=\"index\"\n              :part=\"item.part\"\n              :type=\"type\"\n              :tabindex=\"segmentTabIndex(type, item.part, segments)\"\n              :aria-label=\"segmentLabel(item.part)\"\n              v-bind=\"{\n                ...segmentValueText(\n                  item.part,\n                  item.value,\n                  (type === 'start' ? range.start : range.end)?.month,\n                ),\n                ...(item.part === 'hour' ? hourAnnouncement(segments[type]) : undefined),\n              }\"\n              :class=\"\n                cn(\n                  'tabular rounded-sm px-0.5 outline-none',\n                  'transition-colors duration-instant ease-out',\n                  'focus:bg-primary-muted focus:text-primary-text',\n                  'data-[placeholder]:text-muted-foreground',\n                  item.part === 'literal' && 'text-muted-foreground',\n                )\n              \"\n              @focusin=\"focusedSegment = segmentKey(type, item.part)\"\n            >\n              {{ item.value }}\n            </DateRangePickerInput>\n          </div>\n        </template>\n\n        <!-- Named for what it opens, which is a calendar of days and not a\n             clock: the times are entered in the segments to its left and have no\n             panel. `CalendarRange` rather than DateTimePicker's `CalendarClock`\n             for the same reason — what is behind the button is two months with a\n             band drawn across them. Dropped entirely while read-only, as in both\n             parents: Reka's `readonly` reaches the calendar and makes every\n             cell's click a no-op, so the button would open a panel in which\n             nothing can be chosen. -->\n        <DateRangePickerTrigger\n          v-if=\"!field.readonly\"\n          :aria-label=\"panelText.openCalendar\"\n          class=\"ml-auto 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 disabled:cursor-not-allowed\"\n        >\n          <CalendarRange class=\"h-4 w-4\" />\n        </DateRangePickerTrigger>\n      </DateRangePickerField>\n    </DateRangePickerAnchor>\n\n    <DateRangePickerContent\n      align=\"start\"\n      :side-offset=\"6\"\n      :class=\"\n        cn(\n          'z-overlay rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-md outline-none',\n          // Each class scoped to its own state — DatePicker carries the full\n          // account of why; the closed one is the exit whose animationend\n          // Presence waits out before taking the panel away.\n          'data-[state=open]:animate-fade-rise data-[state=closed]:animate-fade-fall',\n        )\n      \"\n      @open-auto-focus=\"onOpenAutoFocus\"\n    >\n      <div ref=\"panel\" class=\"flex flex-col gap-3\">\n        <!-- `calendarLabel` is a real Reka prop rather than a literal to\n             override, and it defaults to `\"Event Date\"`. It is published twice:\n             as the calendar container's `aria-label`, and inside a\n             visually-hidden live region Reka renders itself, which a\n             fallthrough attribute could not have reached. -->\n        <DateRangePickerCalendar v-slot=\"{ grid, weekDays }\" :calendar-label=\"panelText.calendar\">\n          <DateRangePickerHeader class=\"flex items-center justify-between gap-2\">\n            <!-- The pagers keep their opacity where the field and the cells gave\n                 it up: a chevron is a glyph, and fading one costs a reader\n                 nothing. Their names live in `aria-label`, not in dimmed text. -->\n            <DateRangePickerPrev\n              :aria-label=\"panelText.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\" />\n            </DateRangePickerPrev>\n\n            <DateRangePickerHeading\n              :id=\"headingId\"\n              aria-live=\"polite\"\n              class=\"text-sm font-medium text-foreground\"\n            />\n\n            <DateRangePickerNext\n              :aria-label=\"panelText.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\" />\n            </DateRangePickerNext>\n          </DateRangePickerHeader>\n\n          <p role=\"status\" class=\"text-xs text-muted-foreground\">{{ rangeStatus(range) }}</p>\n\n          <!-- Two months stacked below `sm`, side by side above it — and both of\n               them in the document at every width. DateRangePicker carries the\n               account of why hiding one is a keyboard trap of the quiet kind. -->\n          <div class=\"flex flex-col gap-3 sm:flex-row sm:gap-5\">\n            <DateRangePickerGrid\n              v-for=\"month in grid\"\n              :key=\"month.value.toString()\"\n              role=\"grid\"\n              :aria-label=\"format(monthFormat, month.value)\"\n              class=\"border-collapse select-none\"\n            >\n              <!-- `role=\"grid\"` over Reka's `role=\"application\"`, and the rows\n                   laid out by the table rather than by flex: DatePicker carries\n                   the reasoning for both. The name is each grid's own month\n                   rather than the shared heading, because two grids sharing one\n                   name leaves a reader entering the second with no idea which\n                   month they are in. -->\n              <DateRangePickerGridHead>\n                <DateRangePickerGridRow>\n                  <DateRangePickerHeadCell\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                  </DateRangePickerHeadCell>\n                </DateRangePickerGridRow>\n              </DateRangePickerGridHead>\n\n              <DateRangePickerGridBody>\n                <DateRangePickerGridRow v-for=\"(week, weekIndex) in month.rows\" :key=\"weekIndex\">\n                  <DateRangePickerCell\n                    v-for=\"day in week\"\n                    :key=\"day.toString()\"\n                    :date=\"day\"\n                    class=\"p-0 text-center\"\n                  >\n                    <DateRangePickerCellTrigger\n                      v-slot=\"{ dayValue, today }\"\n                      :day=\"day\"\n                      :month=\"month.value\"\n                      :aria-label=\"dayLabel(day, range)\"\n                      :aria-current=\"isDateToday(day) ? 'date' : undefined\"\n                      :class=\"\n                        cn(\n                          'group relative inline-flex h-9 w-9 items-center justify-center rounded-sm text-sm text-foreground',\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                          'data-[outside-view]:text-muted-foreground',\n                          // Out of range is colour and a strike, not a fade —\n                          // DatePicker carries the measured account. The\n                          // `:not([data-selected])` is there for the same reason\n                          // the fills below are written that way, and the strike\n                          // is what separates an unavailable day from an\n                          // adjacent month's: muted too, and still pickable.\n                          'data-[disabled]:pointer-events-none data-[disabled]:line-through',\n                          '[&[data-disabled]:not([data-selected])]:text-muted-foreground',\n                          // The four competing fills, written as `:not()` of one\n                          // another so no cell ever has two backgrounds for the\n                          // stylesheet to order — DateRangePicker carries why\n                          // that is not something a class list can otherwise\n                          // state.\n                          'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground',\n                          'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground',\n                          '[&[data-selected]:not([data-selection-start]):not([data-selection-end])]:bg-primary-muted',\n                          '[&[data-selected]:not([data-selection-start]):not([data-selection-end])]:text-primary-text',\n                          '[&[data-highlighted]:not([data-selected])]:bg-subtle',\n                          '[&[data-selected]:not([data-selection-start]):not([data-selection-end])]:rounded-none',\n                          '[&[data-highlighted]:not([data-highlighted-start]):not([data-highlighted-end])]:rounded-none',\n                        )\n                      \"\n                    >\n                      {{ dayValue }}\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-[selection-start]:bg-primary-foreground group-data-[selection-end]:bg-primary-foreground\"\n                      />\n                    </DateRangePickerCellTrigger>\n                  </DateRangePickerCell>\n                </DateRangePickerGridRow>\n              </DateRangePickerGridBody>\n            </DateRangePickerGrid>\n          </div>\n        </DateRangePickerCalendar>\n      </div>\n    </DateRangePickerContent>\n  </DateRangePickerRoot>\n</template>\n"],"mappings":""}