vectis-ui 0.1.0

package/dist/components/VDatePicker/VDatePicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,454 @@
+import { useLocale as e, useMessages as t } from "../../i18n/state.js";
+import n from "../VIcon/VIcon.js";
+import r from "../VButton/VButton.js";
+import i from "../VIconButton/VIconButton.js";
+import { chevron_left as a } from "../VIcon/icons/chevron_left.js";
+import { chevron_right as ee } from "../VIcon/icons/chevron_right.js";
+import { clamp as te } from "../../utils/number.js";
+import { resolveMatcher as ne } from "../../utils/matcher.js";
+import { toggleValue as re } from "../../utils/array.js";
+import { arrow_drop_down as ie } from "../VIcon/icons/arrow_drop_down.js";
+import { arrow_drop_up as ae } from "../VIcon/icons/arrow_drop_up.js";
+import { addDays as oe, addMonths as o, buildMonthGrid as se, clampISO as s, compareISO as c, daysInMonth as l, firstDayOfWeekFor as ce, formatISO as le, isSameISO as u, isValidISO as ue, isWithin as de, isoOf as d, monthName as fe, monthNamesCompact as pe, parseISO as f, weekdayNames as me } from "../../utils/date.js";
+import { dayStep as he, gridDelta as ge } from "./keyboard.js";
+import { Fragment as p, computed as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as y, defineComponent as b, mergeModels as x, nextTick as S, normalizeStyle as _e, onMounted as ve, openBlock as C, ref as w, renderList as T, renderSlot as E, toDisplayString as D, unref as O, useId as ye, useModel as be, vShow as xe, watch as Se, withCtx as Ce, withDirectives as we } from "vue";
+//#region src/components/VDatePicker/VDatePicker.vue?vue&type=script&setup=true&lang.ts
+var Te = ["data-view", "data-selection"], Ee = { class: "v-date-picker-header" }, De = { class: "v-date-picker-nav" }, Oe = { class: "v-date-picker-nav" }, ke = ["aria-label", "aria-multiselectable"], Ae = {
+	class: "v-date-picker-weekdays",
+	role: "row"
+}, je = ["aria-label"], Me = [
+	"aria-selected",
+	"data-in-range",
+	"data-range-start",
+	"data-range-end"
+], Ne = [
+	"id",
+	"tabindex",
+	"data-outside",
+	"data-selected",
+	"data-today",
+	"aria-disabled",
+	"aria-current",
+	"onClick",
+	"onPointerenter",
+	"onFocus"
+], Pe = { class: "v-date-picker-day-num" }, Fe = {
+	key: 0,
+	class: "v-date-picker-dots",
+	"aria-hidden": "true"
+}, Ie = ["data-disabled"], Le = { class: "v-date-picker-day-num" }, Re = ["aria-label"], ze = [
+	"id",
+	"tabindex",
+	"data-selected",
+	"aria-selected",
+	"disabled",
+	"onClick"
+], Be = ["aria-label"], Ve = [
+	"id",
+	"tabindex",
+	"data-selected",
+	"aria-selected",
+	"onClick"
+], He = {
+	key: 2,
+	class: "v-date-picker-footer"
+}, Ue = /*@__PURE__*/ b({
+	__name: "VDatePicker",
+	props: /*@__PURE__*/ x({
+		selection: { default: "single" },
+		locale: { default: void 0 },
+		firstDayOfWeek: { default: void 0 },
+		min: { default: void 0 },
+		max: { default: void 0 },
+		disabledDates: {
+			type: [Array, Function],
+			default: void 0
+		},
+		showAdjacentDays: {
+			type: Boolean,
+			default: !1
+		},
+		selectAdjacentDays: {
+			type: Boolean,
+			default: !1
+		},
+		events: { default: void 0 }
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ x(["select"], ["update:modelValue"]),
+	setup(b, { expose: x, emit: Ue }) {
+		let k = b, A = be(b, "modelValue"), We = Ue, j = ye(), M = t(), Ge = e(), N = m(() => k.locale ?? Ge.value), P = m(() => k.firstDayOfWeek ?? ce(N.value)), Ke = m(() => me(N.value, P.value, "short")), qe = m(() => me(N.value, P.value, "long")), F = m(() => pe(N.value)), I = m(() => k.selection === "single" && typeof A.value == "string" && ue(A.value) ? A.value : null), L = m(() => k.selection === "range" && A.value && typeof A.value == "object" && !Array.isArray(A.value) ? A.value : {
+			start: null,
+			end: null
+		}), R = m(() => k.selection === "multiple" && Array.isArray(A.value) ? A.value : []);
+		function Je() {
+			return I.value ? I.value : L.value.start ? L.value.start : R.value[0] ? R.value[0] : s(le(/* @__PURE__ */ new Date()), k.min, k.max);
+		}
+		let z = w(Je()), B = w("days"), V = m(() => f(z.value)?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()), H = m(() => f(z.value)?.getMonth() ?? 0), U = m(() => fe(N.value, H.value, "long")), Ye = m(() => `${U.value} ${V.value}`), Xe = w(null);
+		ve(() => {
+			Xe.value = le(/* @__PURE__ */ new Date());
+		});
+		let Ze = m(() => ne(k.disabledDates)), Qe = m(() => {
+			let e = /* @__PURE__ */ new Map();
+			for (let t of k.events ?? []) {
+				let n = e.get(t.date) ?? [];
+				n.push(t), e.set(t.date, n);
+			}
+			return e;
+		}), W = w(null);
+		function G(e, t) {
+			return c(e, t) <= 0 ? {
+				start: e,
+				end: t
+			} : {
+				start: t,
+				end: e
+			};
+		}
+		let K = m(() => {
+			if (k.selection !== "range") return {
+				start: null,
+				end: null
+			};
+			let e = L.value;
+			if (e.start && e.end) return G(e.start, e.end);
+			let t = W.value ?? z.value;
+			return e.start && t ? G(e.start, t) : {
+				start: e.start,
+				end: e.end
+			};
+		});
+		function $e(e) {
+			return k.selection === "single" ? u(e, I.value) : k.selection === "multiple" ? R.value.includes(e) : u(e, K.value.start) || u(e, K.value.end);
+		}
+		function et(e) {
+			let { start: t, end: n } = K.value;
+			return !!t && !!n && c(e, t) >= 0 && c(e, n) <= 0;
+		}
+		let q = m(() => se(V.value, H.value, P.value).map((e) => {
+			let t = e.adjacent === null, n = t || k.showAdjacentDays || k.selectAdjacentDays, r = t || k.selectAdjacentDays, i = !de(e.iso, k.min, k.max) || Ze.value(e.iso), a = n ? r ? "button" : "static" : "empty";
+			return {
+				iso: e.iso,
+				day: f(e.iso)?.getDate() ?? 0,
+				kind: a,
+				inMonth: t,
+				disabled: i,
+				selected: a === "button" && !i && $e(e.iso),
+				rangeStart: k.selection === "range" && u(e.iso, K.value.start),
+				rangeEnd: k.selection === "range" && u(e.iso, K.value.end),
+				inRange: k.selection === "range" && et(e.iso),
+				today: u(e.iso, Xe.value),
+				events: Qe.value.get(e.iso) ?? []
+			};
+		})), tt = m(() => {
+			let e = [];
+			for (let t = 0; t < q.value.length; t += 7) e.push(q.value.slice(t, t + 7));
+			return e;
+		});
+		function J(e, t) {
+			let n = d(e, t, 1), r = d(e, t, l(e, t));
+			return (!k.max || c(n, k.max) <= 0) && (!k.min || c(r, k.min) >= 0);
+		}
+		let nt = m(() => {
+			let e = f(o(z.value, -1));
+			return J(e.getFullYear(), e.getMonth());
+		}), rt = m(() => {
+			let e = f(o(z.value, 1));
+			return J(e.getFullYear(), e.getMonth());
+		}), it = m(() => !k.min || c(d(V.value - 1, 11, 31), k.min) >= 0), at = m(() => !k.max || c(d(V.value + 1, 0, 1), k.max) <= 0), ot = (e) => `${j}-d-${e}`;
+		function Y(e) {
+			S(() => document.getElementById(ot(e))?.focus());
+		}
+		function X(e, t = !1) {
+			z.value = s(e, k.min, k.max), t && B.value === "days" && Y(z.value);
+		}
+		function st(e) {
+			X(o(z.value, e));
+		}
+		function ct(e) {
+			X(o(z.value, e * 12));
+		}
+		function lt(e) {
+			let t = B.value === e ? "days" : e;
+			B.value = t, t === "months" ? (Z.value = H.value, S(() => Q(H.value)?.focus())) : t === "years" ? ($.value = V.value, S(() => {
+				let e = yt(V.value);
+				e?.scrollIntoView?.({ block: "center" }), e?.focus();
+			})) : B.value === "days" && Y(z.value);
+		}
+		function ut(e) {
+			if (!(e.kind !== "button" || e.disabled)) {
+				if (z.value = e.iso, k.selection === "single") A.value = e.iso;
+				else if (k.selection === "multiple") A.value = re(R.value, e.iso).sort(c);
+				else {
+					let t = L.value;
+					!t.start || t.start && t.end ? A.value = {
+						start: e.iso,
+						end: null
+					} : A.value = G(t.start, e.iso);
+				}
+				We("select", A.value);
+			}
+		}
+		function dt(e) {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				let t = q.value.find((e) => e.iso === z.value);
+				t && ut(t);
+				return;
+			}
+			let t = (f(z.value).getDay() - P.value + 7) % 7, n = he(e.key, e.shiftKey, t);
+			n && (e.preventDefault(), X("days" in n ? oe(z.value, n.days) : o(z.value, n.months), !0));
+		}
+		let Z = w(H.value), Q = (e) => document.getElementById(`${j}-m-${e}`);
+		function ft(e) {
+			return J(V.value, e);
+		}
+		function pt(e) {
+			if (!ft(e)) return;
+			let t = Math.min(f(z.value).getDate(), l(V.value, e));
+			X(d(V.value, e, t)), B.value = "days", Y(z.value);
+		}
+		function mt(e) {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault(), pt(Z.value);
+				return;
+			}
+			let t = ge(e.key);
+			t !== void 0 && (e.preventDefault(), Z.value = te(Z.value + t, 0, 11), Q(Z.value)?.focus());
+		}
+		let ht = (e) => Array.from({ length: Math.ceil(e.length / 3) }, (t, n) => e.slice(n * 3, n * 3 + 3)), gt = m(() => ht(F.value.map((e, t) => ({
+			name: e,
+			i: t
+		})))), _t = m(() => {
+			let e = f(k.min)?.getFullYear() ?? V.value - 100, t = f(k.max)?.getFullYear() ?? V.value + 100, n = [];
+			for (let r = e; r <= t; r++) n.push(r);
+			return n;
+		}), vt = m(() => ht(_t.value)), $ = w(V.value), yt = (e) => document.getElementById(`${j}-y-${e}`);
+		function bt(e) {
+			let t = H.value;
+			X(d(e, t, Math.min(f(z.value).getDate(), l(e, t)))), B.value = "days", Y(z.value);
+		}
+		function xt(e) {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault(), bt($.value);
+				return;
+			}
+			let t = ge(e.key);
+			if (t === void 0) return;
+			e.preventDefault();
+			let n = _t.value, r = te(n.indexOf($.value) + t, 0, n.length - 1);
+			$.value = n[r] ?? $.value, yt($.value)?.focus();
+		}
+		Se(() => [
+			I.value,
+			L.value.start,
+			R.value[0]
+		], () => {
+			let e = I.value ?? L.value.start ?? R.value[0];
+			if (e && ue(e)) {
+				let t = f(e);
+				(t.getFullYear() !== V.value || t.getMonth() !== H.value) && (z.value = e);
+			}
+		});
+		function St() {
+			B.value = "days", Y(z.value);
+		}
+		return x({ focus: St }), (e, t) => (C(), g("div", {
+			class: "v-date-picker",
+			"data-view": B.value,
+			"data-selection": b.selection,
+			onPointerleave: t[6] ||= (e) => W.value = null
+		}, [
+			_("div", Ee, [_("div", De, [
+				y(i, {
+					icon: O(a),
+					label: O(M).datePicker.previousMonth,
+					size: "sm",
+					disabled: !nt.value,
+					onClick: t[0] ||= (e) => st(-1)
+				}, null, 8, [
+					"icon",
+					"label",
+					"disabled"
+				]),
+				y(r, {
+					variant: "ghost",
+					tone: "neutral",
+					size: "sm",
+					class: "v-date-picker-view-toggle",
+					"aria-expanded": B.value === "months",
+					"aria-label": U.value,
+					onClick: t[1] ||= (e) => lt("months")
+				}, {
+					default: Ce(() => [v(D(F.value[H.value]) + " ", 1), y(n, {
+						name: B.value === "months" ? O(ae) : O(ie),
+						"aria-hidden": "true"
+					}, null, 8, ["name"])]),
+					_: 1
+				}, 8, ["aria-expanded", "aria-label"]),
+				y(i, {
+					icon: O(ee),
+					label: O(M).datePicker.nextMonth,
+					size: "sm",
+					disabled: !rt.value,
+					onClick: t[2] ||= (e) => st(1)
+				}, null, 8, [
+					"icon",
+					"label",
+					"disabled"
+				])
+			]), _("div", Oe, [
+				y(i, {
+					icon: O(a),
+					label: O(M).datePicker.previousYear,
+					size: "sm",
+					disabled: !it.value,
+					onClick: t[3] ||= (e) => ct(-1)
+				}, null, 8, [
+					"icon",
+					"label",
+					"disabled"
+				]),
+				y(r, {
+					variant: "ghost",
+					tone: "neutral",
+					size: "sm",
+					class: "v-date-picker-view-toggle",
+					"aria-expanded": B.value === "years",
+					onClick: t[4] ||= (e) => lt("years")
+				}, {
+					default: Ce(() => [v(D(V.value) + " ", 1), y(n, {
+						name: B.value === "years" ? O(ae) : O(ie),
+						"aria-hidden": "true"
+					}, null, 8, ["name"])]),
+					_: 1
+				}, 8, ["aria-expanded"]),
+				y(i, {
+					icon: O(ee),
+					label: O(M).datePicker.nextYear,
+					size: "sm",
+					disabled: !at.value,
+					onClick: t[5] ||= (e) => ct(1)
+				}, null, 8, [
+					"icon",
+					"label",
+					"disabled"
+				])
+			])]),
+			we(_("div", {
+				class: "v-date-picker-grid",
+				role: "grid",
+				"aria-label": Ye.value,
+				"aria-multiselectable": b.selection === "multiple" ? "true" : void 0,
+				onKeydown: dt
+			}, [_("div", Ae, [(C(!0), g(p, null, T(Ke.value, (e, t) => (C(), g("span", {
+				key: e,
+				class: "v-date-picker-weekday",
+				role: "columnheader",
+				"aria-label": qe.value[t]
+			}, D(e), 9, je))), 128))]), (C(!0), g(p, null, T(tt.value, (t, n) => (C(), g("div", {
+				key: n,
+				class: "v-date-picker-week",
+				role: "row"
+			}, [(C(!0), g(p, null, T(t, (t) => (C(), g("div", {
+				key: t.iso,
+				class: "v-date-picker-cell",
+				role: "gridcell",
+				"aria-selected": t.kind === "button" ? t.selected : void 0,
+				"data-in-range": t.inRange ? "" : void 0,
+				"data-range-start": t.rangeStart ? "" : void 0,
+				"data-range-end": t.rangeEnd ? "" : void 0
+			}, [t.kind === "button" ? (C(), g("button", {
+				key: 0,
+				id: ot(t.iso),
+				type: "button",
+				class: "v-date-picker-day",
+				tabindex: t.iso === z.value ? 0 : -1,
+				"data-outside": t.inMonth ? void 0 : "",
+				"data-selected": t.selected ? "" : void 0,
+				"data-today": t.today ? "" : void 0,
+				"aria-disabled": t.disabled ? "true" : void 0,
+				"aria-current": t.today ? "date" : void 0,
+				onClick: (e) => ut(t),
+				onPointerenter: (e) => W.value = t.iso,
+				onFocus: (e) => W.value = t.iso
+			}, [E(e.$slots, "day", {
+				iso: t.iso,
+				day: t.day,
+				inMonth: t.inMonth,
+				disabled: t.disabled,
+				selected: t.selected,
+				today: t.today,
+				inRange: t.inRange,
+				events: t.events
+			}, () => [_("span", Pe, D(t.day), 1)]), t.events.length ? (C(), g("span", Fe, [(C(!0), g(p, null, T(t.events.slice(0, 3), (e, t) => (C(), g("span", {
+				key: t,
+				class: "v-date-picker-dot",
+				style: _e(e.color ? { "--date-picker-dot-color": e.color } : void 0)
+			}, null, 4))), 128))])) : h("", !0)], 40, Ne)) : t.kind === "static" ? (C(), g("span", {
+				key: 1,
+				class: "v-date-picker-day v-date-picker-day--static",
+				"data-disabled": t.disabled ? "" : void 0
+			}, [E(e.$slots, "day", {
+				iso: t.iso,
+				day: t.day,
+				inMonth: t.inMonth,
+				disabled: t.disabled,
+				selected: t.selected,
+				today: t.today,
+				inRange: t.inRange,
+				events: t.events
+			}, () => [_("span", Le, D(t.day), 1)])], 8, Ie)) : h("", !0)], 8, Me))), 128))]))), 128))], 40, ke), [[xe, B.value === "days"]]),
+			B.value === "months" ? (C(), g("div", {
+				key: 0,
+				class: "v-date-picker-view",
+				role: "grid",
+				"aria-label": O(M).datePicker.monthPicker,
+				onKeydown: mt
+			}, [(C(!0), g(p, null, T(gt.value, (e, t) => (C(), g("div", {
+				key: t,
+				class: "v-date-picker-view-row",
+				role: "row"
+			}, [(C(!0), g(p, null, T(e, ({ name: e, i: t }) => (C(), g("button", {
+				id: `${O(j)}-m-${t}`,
+				key: e,
+				type: "button",
+				class: "v-date-picker-view-cell",
+				role: "gridcell",
+				tabindex: t === Z.value ? 0 : -1,
+				"data-selected": t === H.value ? "" : void 0,
+				"aria-selected": t === H.value ? "true" : void 0,
+				disabled: !ft(t),
+				onClick: (e) => pt(t)
+			}, D(e), 9, ze))), 128))]))), 128))], 40, Re)) : h("", !0),
+			B.value === "years" ? (C(), g("div", {
+				key: 1,
+				class: "v-date-picker-view v-date-picker-view--years",
+				role: "grid",
+				"aria-label": O(M).datePicker.yearPicker,
+				onKeydown: xt
+			}, [(C(!0), g(p, null, T(vt.value, (e, t) => (C(), g("div", {
+				key: t,
+				class: "v-date-picker-view-row",
+				role: "row"
+			}, [(C(!0), g(p, null, T(e, (e) => (C(), g("button", {
+				id: `${O(j)}-y-${e}`,
+				key: e,
+				type: "button",
+				class: "v-date-picker-view-cell",
+				role: "gridcell",
+				tabindex: e === $.value ? 0 : -1,
+				"data-selected": e === V.value ? "" : void 0,
+				"aria-selected": e === V.value ? "true" : void 0,
+				onClick: (t) => bt(e)
+			}, D(e), 9, Ve))), 128))]))), 128))], 40, Be)) : h("", !0),
+			e.$slots.footer ? (C(), g("div", He, [E(e.$slots, "footer")])) : h("", !0)
+		], 40, Te));
+	}
+});
+//#endregion
+export { Ue as default };
+
+//# sourceMappingURL=VDatePicker.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VDatePicker/VDatePicker.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VDatePicker.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VDatePicker/VDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, useId, watch } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { arrow_drop_down as arrowDropDownIcon } from '../VIcon/icons/arrow_drop_down'\nimport { arrow_drop_up as arrowDropUpIcon } from '../VIcon/icons/arrow_drop_up'\nimport { chevron_left as chevronLeftIcon } from '../VIcon/icons/chevron_left'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport {\n  addDays,\n  addMonths,\n  buildMonthGrid,\n  clampISO,\n  compareISO,\n  daysInMonth,\n  firstDayOfWeekFor,\n  formatISO,\n  isoOf,\n  isSameISO,\n  isValidISO,\n  isWithin,\n  monthName,\n  monthNamesCompact,\n  parseISO,\n  weekdayNames,\n} from '../../utils/date'\n\nimport { PICKER_COLUMNS, dayStep, gridDelta } from './keyboard'\n\nimport { toggleValue } from '../../utils/array'\nimport { resolveMatcher } from '../../utils/matcher'\nimport { clamp } from '../../utils/number'\nimport { useLocale, useMessages } from '../../i18n/state'\n\n// @a11y @keyboard @core\n/**\n * A calendar shown directly in the page, as a grid of days, with a month view and a\n * year view behind it. It holds ALL the date, view and keyboard logic of the design\n * system; VDateInput does no more than dress it in a text field and a popover.\n *\n * The platform offers no accessible date grid to build on — `<input type=\"date\">`\n * can be neither styled nor composed — so the JavaScript here implements the ARIA\n * \"grid\" pattern by hand: a single cell in the tab order at a time, arrow and\n * page keys to move between dates, and selection of one date, a range or a list.\n * None of that can be expressed in HTML and CSS alone.\n *\n * Every date is handled in local time as an ISO `YYYY-MM-DD` string (see\n * `utils/date`), which is what keeps the server and the browser in agreement.\n */\nexport type DatePickerSelection = 'single' | 'range' | 'multiple'\n\n/**\n * A period between two dates, the value of a `range` selection. Either bound may be\n * null: between the first and the second click, a range has a start and no end yet.\n */\nexport interface DateRange {\n  /** The first day of the period, as an ISO `YYYY-MM-DD` string. */\n  start: string | null\n  /** The last day of the period, as an ISO `YYYY-MM-DD` string. */\n  end: string | null\n}\n\n/** Something happening on a given day, shown as a coloured dot under its number. */\nexport interface DatePickerEvent {\n  /** The day it falls on, as an ISO `YYYY-MM-DD` string. */\n  date: string\n  /** The colour of the dot, as any CSS colour. It is the accent colour by default. */\n  color?: string\n  /** A description of the event for assistive technology. */\n  label?: string\n}\n\n/**\n * Which dates cannot be selected, given either as a list of ISO strings or as a\n * function answering that question for a date.\n */\nexport type DateMatcher = string[] | ((iso: string) => boolean)\n\n/** The shape of the v-model, which follows whichever `selection` is in use. */\nexport type DatePickerValue = string | null | DateRange | string[]\n\ninterface DatePickerProps {\n  /**\n   * What the reader is picking: a single date, a period between two dates, or any\n   * number of separate dates. It determines the shape of the v-model.\n   */\n  selection?: DatePickerSelection\n  /**\n   * A BCP 47 locale, which decides the month and day names and the first day of the\n   * week. It TAKES PRECEDENCE over the design system's global locale (`setLocale`)\n   * and falls back to it — which is why it has no literal default here: `undefined`\n   * has to stay recognizable for the global locale to have its chance.\n   */\n  locale?: string\n  /**\n   * Forces the day the weeks start on (0 for Sunday through 6 for Saturday). Left\n   * out, the locale decides.\n   */\n  firstDayOfWeek?: number\n  /**\n   * The earliest selectable date, as an ISO string. Neither navigation nor selection\n   * goes back beyond it.\n   */\n  min?: string\n  /**\n   * The latest selectable date, as an ISO string. Neither navigation nor selection\n   * goes past it.\n   */\n  max?: string\n  /**\n   * Dates that cannot be chosen, given as a list of ISO strings or as a function.\n   * They stay visible, struck through, and can still be reached with the keyboard.\n   */\n  disabledDates?: DateMatcher\n  /**\n   * Also fills the empty corners of the grid with the greyed days of the neighbouring\n   * months. It is off by default.\n   */\n  showAdjacentDays?: boolean\n  /**\n   * Lets those neighbouring days be clicked, which moves the calendar to their month.\n   * A clickable day has to be visible, so this implies showing them.\n   */\n  selectAdjacentDays?: boolean\n  /** The events to mark, as up to three coloured dots under the day they fall on. */\n  events?: DatePickerEvent[]\n}\n\nconst props = withDefaults(defineProps<DatePickerProps>(), {\n  selection: 'single',\n  locale: undefined,\n  firstDayOfWeek: undefined,\n  min: undefined,\n  max: undefined,\n  disabledDates: undefined,\n  showAdjacentDays: false,\n  selectAdjacentDays: false,\n  events: undefined,\n})\n\nconst model = defineModel<DatePickerValue>({ default: null })\n\nconst emit = defineEmits<{\n  /**\n   * Emitted every time a date is chosen, carrying the complete value as it now\n   * stands. VDateInput listens to it to close its panel on a single selection.\n   */\n  select: [value: DatePickerValue]\n}>()\n\ndefineSlots<{\n  /**\n   * Replaces the content of a day cell — to show a price or an availability under the\n   * number, for instance. It receives everything known about that day, including\n   * whether it belongs to the displayed month.\n   */\n  day?(props: {\n    iso: string\n    day: number\n    inMonth: boolean\n    disabled: boolean\n    selected: boolean\n    today: boolean\n    inRange: boolean\n    events: DatePickerEvent[]\n  }): unknown\n  /** The strip under the grid, for actions such as Close or Save, or for preset dates. */\n  footer?(): unknown\n}>()\n\nconst gridLabelId = useId()\n\n// The navigation labels have no prop of their own: the dictionary is the single\n// place to change them, globally or per language — see `src/i18n/`.\nconst m = useMessages()\nconst vectisLocale = useLocale()\n/*\n * The prop 'locale' wins, and the design system's global locale is what it falls back to.\n * Every read below goes through this one derivation, so the two sources can never be consulted\n * in a different order somewhere else.\n */\nconst resolvedLocale = computed(() => props.locale ?? vectisLocale.value)\n\nconst resolvedFirstDay = computed(\n  () => props.firstDayOfWeek ?? firstDayOfWeekFor(resolvedLocale.value),\n)\nconst weekdays = computed(() => weekdayNames(resolvedLocale.value, resolvedFirstDay.value, 'short'))\nconst weekdaysLong = computed(() =>\n  weekdayNames(resolvedLocale.value, resolvedFirstDay.value, 'long'),\n)\nconst monthLabels = computed(() => monthNamesCompact(resolvedLocale.value))\n\nconst singleValue = computed(() =>\n  props.selection === 'single' && typeof model.value === 'string' && isValidISO(model.value)\n    ? model.value\n    : null,\n)\nconst rangeValue = computed<DateRange>(() => {\n  if (\n    props.selection === 'range' &&\n    model.value &&\n    typeof model.value === 'object' &&\n    !Array.isArray(model.value)\n  ) {\n    return model.value as DateRange\n  }\n  return { start: null, end: null }\n})\nconst multipleValues = computed<string[]>(() =>\n  props.selection === 'multiple' && Array.isArray(model.value) ? model.value : [],\n)\n\n// `focusedISO` is the single source of truth for the view: the month on display is\n// derived from it, never stored separately, so the two cannot drift apart.\nfunction initialFocus(): string {\n  if (singleValue.value) return singleValue.value\n  if (rangeValue.value.start) return rangeValue.value.start\n  if (multipleValues.value[0]) return multipleValues.value[0]\n  // With nothing selected, the calendar opens on today, brought back inside the\n  // allowed bounds.\n  return clampISO(formatISO(new Date()), props.min, props.max)\n}\nconst focusedISO = ref(initialFocus())\nconst view = ref<'days' | 'months' | 'years'>('days')\n\nconst viewYear = computed(\n  () => parseISO(focusedISO.value)?.getFullYear() ?? new Date().getFullYear(),\n)\nconst viewMonth0 = computed(() => parseISO(focusedISO.value)?.getMonth() ?? 0)\nconst monthLabel = computed(() => monthName(resolvedLocale.value, viewMonth0.value, 'long'))\nconst gridLabel = computed(() => `${monthLabel.value} ${viewYear.value}`)\n\n// @ssr\n// Today's date is only read once the component is mounted, hence on the client: the\n// server has no way to know it, and rendering it during setup would make the two\n// markups differ and break hydration.\nconst today = ref<string | null>(null)\nonMounted(() => {\n  today.value = formatISO(new Date())\n})\n\nconst isDisabledDate = computed(() => resolveMatcher(props.disabledDates))\n\nconst eventsByDate = computed(() => {\n  const map = new Map<string, DatePickerEvent[]>()\n  for (const ev of props.events ?? []) {\n    const list = map.get(ev.date) ?? []\n    list.push(ev)\n    map.set(ev.date, list)\n  }\n  return map\n})\n\nconst hoverISO = ref<string | null>(null)\nfunction orderRange(a: string, b: string): DateRange {\n  return compareISO(a, b) <= 0 ? { start: a, end: b } : { start: b, end: a }\n}\nconst effectiveRange = computed<DateRange>(() => {\n  if (props.selection !== 'range') return { start: null, end: null }\n  const r = rangeValue.value\n  if (r.start && r.end) return orderRange(r.start, r.end)\n  // A start is set but the end is still pending: the range is previewed up to\n  // whichever day the pointer or the focus is currently on.\n  const preview = hoverISO.value ?? focusedISO.value\n  if (r.start && preview) return orderRange(r.start, preview)\n  return { start: r.start, end: r.end }\n})\n\nfunction isSelected(iso: string): boolean {\n  if (props.selection === 'single') return isSameISO(iso, singleValue.value)\n  if (props.selection === 'multiple') return multipleValues.value.includes(iso)\n  // In range selection, the two ends of the period count as selected — including the\n  // provisional end shown during the preview.\n  return isSameISO(iso, effectiveRange.value.start) || isSameISO(iso, effectiveRange.value.end)\n}\nfunction isInRange(iso: string): boolean {\n  const { start, end } = effectiveRange.value\n  return !!start && !!end && compareISO(iso, start) >= 0 && compareISO(iso, end) <= 0\n}\n\ntype DayCell = {\n  iso: string\n  day: number\n  kind: 'empty' | 'static' | 'button'\n  inMonth: boolean\n  disabled: boolean\n  selected: boolean\n  rangeStart: boolean\n  rangeEnd: boolean\n  inRange: boolean\n  today: boolean\n  events: DatePickerEvent[]\n}\n\nconst days = computed<DayCell[]>(() =>\n  buildMonthGrid(viewYear.value, viewMonth0.value, resolvedFirstDay.value).map((cell) => {\n    const inMonth = cell.adjacent === null\n    // Making the neighbouring days clickable implies showing them: a day nobody can\n    // see cannot be clicked.\n    const show = inMonth || props.showAdjacentDays || props.selectAdjacentDays\n    const selectable = inMonth || props.selectAdjacentDays\n    const disabled = !isWithin(cell.iso, props.min, props.max) || isDisabledDate.value(cell.iso)\n    const kind: DayCell['kind'] = !show ? 'empty' : selectable ? 'button' : 'static'\n    return {\n      iso: cell.iso,\n      day: parseISO(cell.iso)?.getDate() ?? 0,\n      kind,\n      inMonth,\n      disabled,\n      selected: kind === 'button' && !disabled && isSelected(cell.iso),\n      rangeStart: props.selection === 'range' && isSameISO(cell.iso, effectiveRange.value.start),\n      rangeEnd: props.selection === 'range' && isSameISO(cell.iso, effectiveRange.value.end),\n      inRange: props.selection === 'range' && isInRange(cell.iso),\n      today: isSameISO(cell.iso, today.value),\n      events: eventsByDate.value.get(cell.iso) ?? [],\n    }\n  }),\n)\nconst weeks = computed(() => {\n  const rows: DayCell[][] = []\n  for (let i = 0; i < days.value.length; i += 7) rows.push(days.value.slice(i, i + 7))\n  return rows\n})\n\nfunction monthHasSelectable(year: number, month0: number): boolean {\n  const first = isoOf(year, month0, 1)\n  const last = isoOf(year, month0, daysInMonth(year, month0))\n  return (\n    (!props.max || compareISO(first, props.max) <= 0) &&\n    (!props.min || compareISO(last, props.min) >= 0)\n  )\n}\nconst canPrevMonth = computed(() => {\n  const prev = addMonths(focusedISO.value, -1)\n  const d = parseISO(prev)!\n  return monthHasSelectable(d.getFullYear(), d.getMonth())\n})\nconst canNextMonth = computed(() => {\n  const next = addMonths(focusedISO.value, 1)\n  const d = parseISO(next)!\n  return monthHasSelectable(d.getFullYear(), d.getMonth())\n})\nconst canPrevYear = computed(\n  () => !props.min || compareISO(isoOf(viewYear.value - 1, 11, 31), props.min) >= 0,\n)\nconst canNextYear = computed(\n  () => !props.max || compareISO(isoOf(viewYear.value + 1, 0, 1), props.max) <= 0,\n)\n\n// @a11y\n// Moves the real DOM focus onto a day cell. The grid keeps exactly one cell in the\n// tab order, so navigating means focusing another one.\nconst dayId = (iso: string) => `${gridLabelId}-d-${iso}`\nfunction focusDay(iso: string) {\n  nextTick(() => document.getElementById(dayId(iso))?.focus())\n}\n\nfunction goTo(iso: string, moveFocus = false) {\n  focusedISO.value = clampISO(iso, props.min, props.max)\n  if (moveFocus && view.value === 'days') focusDay(focusedISO.value)\n}\nfunction stepMonth(delta: number) {\n  goTo(addMonths(focusedISO.value, delta))\n}\nfunction stepYear(delta: number) {\n  goTo(addMonths(focusedISO.value, delta * 12))\n}\n\n// @a11y @core — changing view has to carry the focus onto the cell the new view\n// opens on. Without that move the focus would stay on a button the view has just\n// removed from the document, and the keyboard would have nowhere to go.\nfunction toggleView(target: 'months' | 'years') {\n  const next = view.value === target ? 'days' : target\n  view.value = next\n  if (next === 'months') {\n    focusedMonth.value = viewMonth0.value\n    nextTick(() => monthCellEl(viewMonth0.value)?.focus())\n  } else if (next === 'years') {\n    focusedYear.value = viewYear.value\n    nextTick(() => {\n      const cell = yearCellEl(viewYear.value)\n      // Called optionally because jsdom does not implement scrollIntoView (the same\n      // guard as VTimeInput's list). Centring the year is a nicety; the focus call\n      // below is not, so it must not be taken down with it.\n      cell?.scrollIntoView?.({ block: 'center' })\n      cell?.focus()\n    })\n  } else if (view.value === 'days') {\n    focusDay(focusedISO.value)\n  }\n}\n\nfunction selectDay(cell: DayCell) {\n  if (cell.kind !== 'button' || cell.disabled) return\n  focusedISO.value = cell.iso\n  if (props.selection === 'single') {\n    model.value = cell.iso\n  } else if (props.selection === 'multiple') {\n    model.value = toggleValue(multipleValues.value, cell.iso).sort(compareISO)\n  } else {\n    // Range selection reads three clicks: the first sets the start, the second the\n    // end (reordered if it comes before the start), and the third starts a new\n    // period.\n    const r = rangeValue.value\n    if (!r.start || (r.start && r.end)) {\n      model.value = { start: cell.iso, end: null }\n    } else {\n      model.value = orderRange(r.start, cell.iso)\n    }\n  }\n  emit('select', model.value)\n}\n\n// @keyboard @a11y\n// The keyboard of the days view. The table turning a key into a step is pure and\n// lives in `./keyboard`; what stays here is the date that step is applied to, and\n// the focus move that follows.\nfunction onDaysKeydown(event: KeyboardEvent) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault()\n    const cell = days.value.find((c) => c.iso === focusedISO.value)\n    if (cell) selectDay(cell)\n    return\n  }\n  const d = parseISO(focusedISO.value)!\n  // How far the focused day sits from the start of its week, which is exactly what\n  // Home and End have to step back and forward by.\n  const offset = (d.getDay() - resolvedFirstDay.value + 7) % 7\n  const step = dayStep(event.key, event.shiftKey, offset)\n  if (!step) return\n  event.preventDefault()\n  goTo(\n    'days' in step\n      ? addDays(focusedISO.value, step.days)\n      : addMonths(focusedISO.value, step.months),\n    true,\n  )\n}\n\n// The months view, opened from the month button in the header.\nconst focusedMonth = ref(viewMonth0.value)\nconst monthCellEl = (i: number) =>\n  document.getElementById(`${gridLabelId}-m-${i}`) as HTMLElement | null\nfunction monthSelectable(i: number) {\n  return monthHasSelectable(viewYear.value, i)\n}\nfunction chooseMonth(i: number) {\n  if (!monthSelectable(i)) return\n  const day = Math.min(parseISO(focusedISO.value)!.getDate(), daysInMonth(viewYear.value, i))\n  goTo(isoOf(viewYear.value, i, day))\n  view.value = 'days'\n  focusDay(focusedISO.value)\n}\n// @keyboard @a11y\nfunction onMonthsKeydown(event: KeyboardEvent) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault()\n    chooseMonth(focusedMonth.value)\n    return\n  }\n  const delta = gridDelta(event.key)\n  if (delta === undefined) return\n  event.preventDefault()\n  focusedMonth.value = clamp(focusedMonth.value + delta, 0, 11)\n  monthCellEl(focusedMonth.value)?.focus()\n}\n\n// @a11y\n/*\n * Both pickers are a `role=\"grid\"`, and a grid owns ROWS, not cells: a gridcell\n * placed straight under the grid fails aria-required-children and\n * aria-required-parent at the same time. The cells are therefore cut into rows of\n * PICKER_COLUMNS, matching the `grid-template-columns` of the stylesheet — the row\n * element itself is `display: contents`, so the CSS grid never sees it.\n *\n * Keyboard navigation is unaffected by this extra level: it moves by index and\n * refocuses cells through their ids, never by walking the DOM.\n */\nconst chunk = <T,>(list: T[]) =>\n  Array.from({ length: Math.ceil(list.length / PICKER_COLUMNS) }, (_, r) =>\n    list.slice(r * PICKER_COLUMNS, r * PICKER_COLUMNS + PICKER_COLUMNS),\n  )\n\nconst monthRows = computed(() => chunk(monthLabels.value.map((name, i) => ({ name, i }))))\n\n// The years view, opened from the year button in the header.\nconst yearRange = computed(() => {\n  /*\n   * `min` and `max` come straight from the consumer, and this is the ONLY place\n   * where they are turned into a Date instead of being compared as ISO text —\n   * `compareISO`, `isWithin` and `clampISO` all tolerate a malformed bound. A value\n   * that is not a valid ISO date therefore has to fall back to the open range here:\n   * asserting the parse would throw and take the whole render down the moment the\n   * years view is opened.\n   */\n  const minY = parseISO(props.min)?.getFullYear() ?? viewYear.value - 100\n  const maxY = parseISO(props.max)?.getFullYear() ?? viewYear.value + 100\n  const list: number[] = []\n  for (let y = minY; y <= maxY; y++) list.push(y)\n  return list\n})\nconst yearRows = computed(() => chunk(yearRange.value))\nconst focusedYear = ref(viewYear.value)\nconst yearCellEl = (y: number) =>\n  document.getElementById(`${gridLabelId}-y-${y}`) as HTMLElement | null\nfunction chooseYear(y: number) {\n  const month = viewMonth0.value\n  const day = Math.min(parseISO(focusedISO.value)!.getDate(), daysInMonth(y, month))\n  goTo(isoOf(y, month, day))\n  view.value = 'days'\n  focusDay(focusedISO.value)\n}\n// @keyboard @a11y\nfunction onYearsKeydown(event: KeyboardEvent) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault()\n    chooseYear(focusedYear.value)\n    return\n  }\n  const delta = gridDelta(event.key)\n  if (delta === undefined) return\n  event.preventDefault()\n  const list = yearRange.value\n  const idx = list.indexOf(focusedYear.value)\n  const nextIdx = clamp(idx + delta, 0, list.length - 1)\n  focusedYear.value = list[nextIdx] ?? focusedYear.value\n  yearCellEl(focusedYear.value)?.focus()\n}\n\n// Follows a selection changed from the outside: when the leading value lands in\n// another month, the calendar moves to it rather than leaving the reader in front of\n// a grid where nothing is selected.\nwatch(\n  () => [singleValue.value, rangeValue.value.start, multipleValues.value[0]],\n  () => {\n    const primary = singleValue.value ?? rangeValue.value.start ?? multipleValues.value[0]\n    if (primary && isValidISO(primary)) {\n      const d = parseISO(primary)!\n      if (d.getFullYear() !== viewYear.value || d.getMonth() !== viewMonth0.value) {\n        focusedISO.value = primary\n      }\n    }\n  },\n)\n\n// @a11y\n/**\n * Brings the focus into the grid, on the day the calendar is currently showing. This\n * is what VDateInput calls when it opens its panel.\n */\nfunction focus() {\n  view.value = 'days'\n  focusDay(focusedISO.value)\n}\ndefineExpose({ focus })\n</script>\n\n<template>\n  <div\n    class=\"v-date-picker\"\n    :data-view=\"view\"\n    :data-selection=\"selection\"\n    @pointerleave=\"hoverISO = null\"\n  >\n    <!-- The header: the month and the year, each between two chevrons that step it,\n         and each opening its own picker view when clicked -->\n    <div class=\"v-date-picker-header\">\n      <div class=\"v-date-picker-nav\">\n        <VIconButton\n          :icon=\"chevronLeftIcon\"\n          :label=\"m.datePicker.previousMonth\"\n          size=\"sm\"\n          :disabled=\"!canPrevMonth\"\n          @click=\"stepMonth(-1)\"\n        />\n        <VButton\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          class=\"v-date-picker-view-toggle\"\n          :aria-expanded=\"view === 'months'\"\n          :aria-label=\"monthLabel\"\n          @click=\"toggleView('months')\"\n        >\n          {{ monthLabels[viewMonth0] }}\n          <VIcon\n            :name=\"view === 'months' ? arrowDropUpIcon : arrowDropDownIcon\"\n            aria-hidden=\"true\"\n          />\n        </VButton>\n        <VIconButton\n          :icon=\"chevronRightIcon\"\n          :label=\"m.datePicker.nextMonth\"\n          size=\"sm\"\n          :disabled=\"!canNextMonth\"\n          @click=\"stepMonth(1)\"\n        />\n      </div>\n\n      <div class=\"v-date-picker-nav\">\n        <VIconButton\n          :icon=\"chevronLeftIcon\"\n          :label=\"m.datePicker.previousYear\"\n          size=\"sm\"\n          :disabled=\"!canPrevYear\"\n          @click=\"stepYear(-1)\"\n        />\n        <VButton\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          class=\"v-date-picker-view-toggle\"\n          :aria-expanded=\"view === 'years'\"\n          @click=\"toggleView('years')\"\n        >\n          {{ viewYear }}\n          <VIcon\n            :name=\"view === 'years' ? arrowDropUpIcon : arrowDropDownIcon\"\n            aria-hidden=\"true\"\n          />\n        </VButton>\n        <VIconButton\n          :icon=\"chevronRightIcon\"\n          :label=\"m.datePicker.nextYear\"\n          size=\"sm\"\n          :disabled=\"!canNextYear\"\n          @click=\"stepYear(1)\"\n        />\n      </div>\n    </div>\n\n    <!-- Days view -->\n    <div\n      v-show=\"view === 'days'\"\n      class=\"v-date-picker-grid\"\n      role=\"grid\"\n      :aria-label=\"gridLabel\"\n      :aria-multiselectable=\"selection === 'multiple' ? 'true' : undefined\"\n      @keydown=\"onDaysKeydown\"\n    >\n      <div class=\"v-date-picker-weekdays\" role=\"row\">\n        <span\n          v-for=\"(w, i) in weekdays\"\n          :key=\"w\"\n          class=\"v-date-picker-weekday\"\n          role=\"columnheader\"\n          :aria-label=\"weekdaysLong[i]\"\n          >{{ w }}</span\n        >\n      </div>\n      <div v-for=\"(week, wi) in weeks\" :key=\"wi\" class=\"v-date-picker-week\" role=\"row\">\n        <div\n          v-for=\"cell in week\"\n          :key=\"cell.iso\"\n          class=\"v-date-picker-cell\"\n          role=\"gridcell\"\n          :aria-selected=\"cell.kind === 'button' ? cell.selected : undefined\"\n          :data-in-range=\"cell.inRange ? '' : undefined\"\n          :data-range-start=\"cell.rangeStart ? '' : undefined\"\n          :data-range-end=\"cell.rangeEnd ? '' : undefined\"\n        >\n          <button\n            v-if=\"cell.kind === 'button'\"\n            :id=\"dayId(cell.iso)\"\n            type=\"button\"\n            class=\"v-date-picker-day\"\n            :tabindex=\"cell.iso === focusedISO ? 0 : -1\"\n            :data-outside=\"!cell.inMonth ? '' : undefined\"\n            :data-selected=\"cell.selected ? '' : undefined\"\n            :data-today=\"cell.today ? '' : undefined\"\n            :aria-disabled=\"cell.disabled ? 'true' : undefined\"\n            :aria-current=\"cell.today ? 'date' : undefined\"\n            @click=\"selectDay(cell)\"\n            @pointerenter=\"hoverISO = cell.iso\"\n            @focus=\"hoverISO = cell.iso\"\n          >\n            <slot\n              name=\"day\"\n              :iso=\"cell.iso\"\n              :day=\"cell.day\"\n              :in-month=\"cell.inMonth\"\n              :disabled=\"cell.disabled\"\n              :selected=\"cell.selected\"\n              :today=\"cell.today\"\n              :in-range=\"cell.inRange\"\n              :events=\"cell.events\"\n            >\n              <span class=\"v-date-picker-day-num\">{{ cell.day }}</span>\n            </slot>\n            <span v-if=\"cell.events.length\" class=\"v-date-picker-dots\" aria-hidden=\"true\">\n              <span\n                v-for=\"(ev, ei) in cell.events.slice(0, 3)\"\n                :key=\"ei\"\n                class=\"v-date-picker-dot\"\n                :style=\"ev.color ? { '--date-picker-dot-color': ev.color } : undefined\"\n              />\n            </span>\n          </button>\n          <!-- A day of a neighbouring month that cannot be selected. It renders the\n               very same slot as the clickable days: were it left with the bare\n               number, custom content taking several lines would apply to this month's\n               days only, and the numbers would stop lining up from one cell to the\n               next. The slot receives `inMonth`, which is how it can still tell the\n               two apart. -->\n          <span\n            v-else-if=\"cell.kind === 'static'\"\n            class=\"v-date-picker-day v-date-picker-day--static\"\n            :data-disabled=\"cell.disabled ? '' : undefined\"\n          >\n            <slot\n              name=\"day\"\n              :iso=\"cell.iso\"\n              :day=\"cell.day\"\n              :in-month=\"cell.inMonth\"\n              :disabled=\"cell.disabled\"\n              :selected=\"cell.selected\"\n              :today=\"cell.today\"\n              :in-range=\"cell.inRange\"\n              :events=\"cell.events\"\n            >\n              <span class=\"v-date-picker-day-num\">{{ cell.day }}</span>\n            </slot>\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Months view -->\n    <div\n      v-if=\"view === 'months'\"\n      class=\"v-date-picker-view\"\n      role=\"grid\"\n      :aria-label=\"m.datePicker.monthPicker\"\n      @keydown=\"onMonthsKeydown\"\n    >\n      <div v-for=\"(row, r) in monthRows\" :key=\"r\" class=\"v-date-picker-view-row\" role=\"row\">\n        <button\n          v-for=\"{ name, i } in row\"\n          :id=\"`${gridLabelId}-m-${i}`\"\n          :key=\"name\"\n          type=\"button\"\n          class=\"v-date-picker-view-cell\"\n          role=\"gridcell\"\n          :tabindex=\"i === focusedMonth ? 0 : -1\"\n          :data-selected=\"i === viewMonth0 ? '' : undefined\"\n          :aria-selected=\"i === viewMonth0 ? 'true' : undefined\"\n          :disabled=\"!monthSelectable(i)\"\n          @click=\"chooseMonth(i)\"\n        >\n          {{ name }}\n        </button>\n      </div>\n    </div>\n\n    <!-- Years view -->\n    <div\n      v-if=\"view === 'years'\"\n      class=\"v-date-picker-view v-date-picker-view--years\"\n      role=\"grid\"\n      :aria-label=\"m.datePicker.yearPicker\"\n      @keydown=\"onYearsKeydown\"\n    >\n      <div v-for=\"(row, r) in yearRows\" :key=\"r\" class=\"v-date-picker-view-row\" role=\"row\">\n        <button\n          v-for=\"y in row\"\n          :id=\"`${gridLabelId}-y-${y}`\"\n          :key=\"y\"\n          type=\"button\"\n          class=\"v-date-picker-view-cell\"\n          role=\"gridcell\"\n          :tabindex=\"y === focusedYear ? 0 : -1\"\n          :data-selected=\"y === viewYear ? '' : undefined\"\n          :aria-selected=\"y === viewYear ? 'true' : undefined\"\n          @click=\"chooseYear(y)\"\n        >\n          {{ y }}\n        </button>\n      </div>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"v-date-picker-footer\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-date-picker {\n    /* The consumer sets the size of the day disc; the cell around it — the hover area\n       and the width of the column — grows to follow, and never falls below the size\n       the token sets. */\n    --date-picker-day-size: var(--vectis-date-picker-day-size, var(--vectis-control-height-md));\n    --date-picker-cell: max(\n      var(--vectis-control-size-date-picker-cell),\n      calc(var(--date-picker-day-size) + var(--vectis-space-1))\n    );\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--vectis-space-2);\n    padding: var(--vectis-space-3);\n    font-family: var(--vectis-text-family);\n    color: var(--vectis-color-text);\n  }\n\n  /* The calendar is a flex column, so every block stretches to its full width by\n     default. The days grid then fills that width through its 1fr columns, and never\n     goes below the seven cells its own floor guarantees. */\n  .v-date-picker-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-date-picker-nav {\n    display: flex;\n    align-items: center;\n  }\n\n  /* A minimum width holds this button steady, so the chevrons on either side do not\n     shift as the month or year label changes length. */\n  .v-date-picker-view-toggle {\n    min-inline-size: var(--vectis-control-size-date-picker-nav-min);\n    /* The semibold is state emphasis on the grid's main landmark, not a type role. */\n    font-weight: var(--vectis-font-weight-semibold);\n    text-transform: capitalize;\n  }\n\n  /* The days grid can never be narrower than seven cells. Above that floor it takes\n     whatever width the calendar has — set by the header — and the 1fr columns share\n     it out equally. */\n  .v-date-picker-grid {\n    min-inline-size: calc(7 * var(--date-picker-cell));\n  }\n\n  .v-date-picker-weekdays,\n  .v-date-picker-week {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n  }\n\n  .v-date-picker-weekday {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--vectis-control-height-sm);\n    /* A column micro-header, which takes the overline type role. The casing stays\n       `capitalize`, the calendar convention, rather than the full capitals the\n       VTypography overline variant would apply. */\n    font-size: var(--vectis-text-overline-size);\n    font-weight: var(--vectis-text-overline-weight);\n    letter-spacing: var(--vectis-text-overline-tracking);\n    color: var(--vectis-color-text-muted);\n    text-transform: capitalize;\n  }\n\n  .v-date-picker-cell {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--date-picker-cell);\n  }\n\n  /* The band joining the days of a selected range: a tinted background laid behind\n     the day, at the HEIGHT of the disc rather than of the whole cell. Its vertical\n     inset is half the gap between cell and disc, expressed in `%` so it follows the\n     real width of a 1fr column whatever the calendar measures.\n\n     At either end the band stops exactly at the edge of the disc — hence the inset on\n     the outer side — and that corner is rounded with the pill radius, which a box\n     this height caps at half its height, i.e. precisely the disc's own radius, so it\n     cannot overshoot. */\n  .v-date-picker-cell[data-in-range]::before {\n    content: '';\n    position: absolute;\n    inset-block: calc((100% - var(--date-picker-day-size)) / 2);\n    inset-inline: 0;\n    background: var(--vectis-color-accent-surface);\n    z-index: 0;\n  }\n  .v-date-picker-cell[data-range-start]::before {\n    inset-inline-start: calc((100% - var(--date-picker-day-size)) / 2);\n    border-start-start-radius: var(--vectis-radius-pill);\n    border-end-start-radius: var(--vectis-radius-pill);\n  }\n  .v-date-picker-cell[data-range-end]::before {\n    inset-inline-end: calc((100% - var(--date-picker-day-size)) / 2);\n    border-start-end-radius: var(--vectis-radius-pill);\n    border-end-end-radius: var(--vectis-radius-pill);\n  }\n  .v-date-picker-cell[data-range-start][data-range-end]::before {\n    content: none;\n  }\n\n  .v-date-picker-day {\n    position: relative;\n    z-index: 1;\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--date-picker-day-size);\n    block-size: var(--date-picker-day-size);\n    padding: 0;\n    border: none;\n    border-radius: var(--vectis-radius-pill);\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    font-size: var(--vectis-text-body-md-size);\n    cursor: pointer;\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* Hover belongs to the days one can actually click: not the disabled ones, not the\n     already selected ones, and not the neighbouring days rendered as plain spans. */\n  .v-date-picker-day:hover:not([aria-disabled='true']):not([data-selected]):not(\n      .v-date-picker-day--static\n    ) {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-date-picker-day[data-outside] {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* The semibold in the two rules below marks a state — today, and the selection —\n     and is not a typographic role, which is why it reads a font token directly. */\n  .v-date-picker-day[data-today]:not([data-selected]) {\n    box-shadow: inset 0 0 0 1px var(--vectis-color-accent-border);\n    color: var(--vectis-color-accent-text);\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n\n  .v-date-picker-day[data-selected] {\n    background: var(--vectis-color-accent);\n    color: var(--vectis-color-text-on-accent);\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n\n  .v-date-picker-day[aria-disabled='true'] {\n    color: var(--vectis-color-text-subtle);\n    text-decoration: line-through;\n    cursor: not-allowed;\n  }\n\n  .v-date-picker-day--static {\n    color: var(--vectis-color-text-subtle);\n    cursor: default;\n  }\n\n  /* A neighbouring day that falls outside the bounds, or is disabled, is struck\n     through like any other unavailable date. */\n  .v-date-picker-day--static[data-disabled] {\n    text-decoration: line-through;\n    cursor: not-allowed;\n  }\n\n  .v-date-picker-day:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-date-picker-day-num {\n    line-height: var(--vectis-text-control-leading);\n  }\n\n  .v-date-picker-dots {\n    position: absolute;\n    inset-block-end: calc(var(--vectis-space-1) * 0.5);\n    display: flex;\n    gap: 2px;\n  }\n  .v-date-picker-dot {\n    inline-size: var(--vectis-control-size-date-picker-dot);\n    block-size: var(--vectis-control-size-date-picker-dot);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--date-picker-dot-color, var(--vectis-color-accent));\n  }\n  .v-date-picker-day[data-selected] .v-date-picker-dot {\n    background: var(--vectis-color-text-on-accent);\n  }\n\n  /* The months and years views. They fill the calendar's width exactly like the days\n     grid does: stretched by the flex column, then shared out by 1fr columns. */\n  .v-date-picker-view {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: var(--vectis-space-1);\n    min-inline-size: calc(7 * var(--date-picker-cell));\n  }\n  /* The rows ARIA requires inside a grid, made invisible to the layout: with\n     `display: contents` the cells remain direct grid items of `.v-date-picker-view`,\n     so the columns line up as if the rows were not there. */\n  .v-date-picker-view-row {\n    display: contents;\n  }\n\n  .v-date-picker-view--years {\n    max-block-size: calc(6 * var(--date-picker-cell));\n    overflow-y: auto;\n  }\n\n  .v-date-picker-view-cell {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    block-size: var(--vectis-control-height-lg);\n    border: none;\n    border-radius: var(--vectis-radius-pill);\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    font-size: var(--vectis-text-body-md-size);\n    text-transform: capitalize;\n    cursor: pointer;\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n  .v-date-picker-view-cell:hover:not(:disabled):not([data-selected]) {\n    background: var(--vectis-color-surface-muted);\n  }\n  .v-date-picker-view-cell[data-selected] {\n    background: var(--vectis-color-accent);\n    color: var(--vectis-color-text-on-accent);\n    /* Again state emphasis, not a type role. */\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n  .v-date-picker-view-cell:disabled {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n  .v-date-picker-view-cell:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-date-picker-footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--vectis-space-2);\n    padding-block-start: var(--vectis-space-2);\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-date-picker-day,\n    .v-date-picker-view-cell {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VDatePicker/keyboard.d.ts

@@ -0,0 +1,56 @@
+/**
+ * The pure half of VDatePicker's keyboard: it answers the single question "how far
+ * does this key move?", and does nothing else. Actually moving the focus, calling
+ * `preventDefault` and keeping the result inside the `min`/`max` bounds all stay in
+ * the component, where the reactive state lives.
+ *
+ * It sits in VDatePicker's own folder rather than in `utils/` because it has exactly
+ * one consumer, which fails the admission rule for shared code, and because
+ * VDatePicker owns the contract (the same reasoning as `VHotkeys/platform.ts` and
+ * `VCombobox/infiniteScroll.ts`). Being pure is also what makes this logic testable
+ * without mounting anything: the handlers in the component only ever move DOM focus,
+ * and jsdom lays nothing out to observe.
+ *
+ * One number has to be shared rather than repeated: `PICKER_COLUMNS` both cuts the
+ * months and years grid into rows and defines what a vertical arrow steps over. Were
+ * those two written as separate literals, widening the picker to four columns would
+ * leave the arrows moving three cells, with no error anywhere to point at it.
+ */
+/**
+ * How many columns the months and years pickers are laid out in. It drives BOTH the
+ * cutting of those grids into rows and the distance a vertical arrow travels: these
+ * are the same number, and have to stay so.
+ */
+export declare const PICKER_COLUMNS = 3;
+/**
+ * How far a key moves in the days view. It comes in two units because a month is not
+ * a fixed number of days: `utils/date` provides one helper for each, and the caller
+ * picks by looking at which shape it was handed.
+ */
+export type DayStep = {
+    days: number;
+} | {
+    months: number;
+};
+/**
+ * The step a key produces in the days view, given the key itself, whether Shift is
+ * held, and how far the focused date sits from the start of its week — the last
+ * being what Home and End need in order to land on the right day. Returning
+ * `undefined` means the key is none of this table's business, and the event must be
+ * left alone.
+ *
+ * `weekdayOffset` is passed in rather than worked out here, because it depends on
+ * which day the week starts on in the current locale, and resolving that belongs to
+ * `utils/date`, not to a keyboard table.
+ */
+export declare function dayStep(key: string, shiftKey: boolean, weekdayOffset: number): DayStep | undefined;
+/**
+ * The step a key produces in the months and years views, expressed as a movement of
+ * a flat index over a grid `PICKER_COLUMNS` wide. `undefined` again means the key is
+ * not this table's business.
+ *
+ * Home and End are deliberately absent: both views are bounded — twelve months, a
+ * year range fixed by `min` and `max` — and the component clamps whatever comes out,
+ * so there is no wrapping behaviour left to define.
+ */
+export declare function gridDelta(key: string): number | undefined;

package/dist/components/VDatePicker/keyboard.js

@@ -0,0 +1,26 @@
+function e(e, t, n) {
+	switch (e) {
+		case "ArrowRight": return { days: 1 };
+		case "ArrowLeft": return { days: -1 };
+		case "ArrowDown": return { days: 7 };
+		case "ArrowUp": return { days: -7 };
+		case "Home": return { days: -n || 0 };
+		case "End": return { days: 6 - n };
+		case "PageUp": return { months: t ? -12 : -1 };
+		case "PageDown": return { months: t ? 12 : 1 };
+		default: return;
+	}
+}
+function t(e) {
+	switch (e) {
+		case "ArrowRight": return 1;
+		case "ArrowLeft": return -1;
+		case "ArrowDown": return 3;
+		case "ArrowUp": return -3;
+		default: return;
+	}
+}
+//#endregion
+export { e as dayStep, t as gridDelta };
+
+//# sourceMappingURL=keyboard.js.map