vectis-ui 0.1.0 → 0.8.0

package/dist/components/VCalendar/VCalendarYear.vue_vue_type_script_setup_true_lang.js

@@ -1,18 +1,11 @@
-import { addDays as e, formatDisplay as t, parseISO as n } from "../../utils/date.js";
-import { coversDay as r, monthWeeks as i } from "./layout.js";
-import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, defineComponent as d, openBlock as f, renderList as p, toDisplayString as m } from "vue";
+import { addDays as e, addMonths as t, compareISO as n, formatDateDisplay as r, parseISO as i } from "../../utils/date.js";
+import { monthWeeks as a } from "./layout.js";
+import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, defineComponent as f, normalizeClass as p, normalizeStyle as m, openBlock as h, renderList as g, toDisplayString as _ } from "vue";
 //#region src/components/VCalendar/VCalendarYear.vue?vue&type=script&setup=true&lang.ts
-var h = ["aria-label"], g = ["onClick"], _ = {
+var v = ["aria-label"], y = ["onClick"], b = {
 	key: 0,
 	class: "v-calendar-year-count"
-}, v = {
-	class: "v-calendar-year-grid",
-	"aria-hidden": "true"
-}, y = [
-	"data-adjacent",
-	"data-today",
-	"data-busy"
-], b = /*@__PURE__*/ d({
+}, x = ["data-adjacent", "data-busy"], S = /*@__PURE__*/ f({
 	__name: "VCalendarYear",
 	props: {
 		months: {},
@@ -23,54 +16,65 @@ var h = ["aria-label"], g = ["onClick"], _ = {
 		label: {}
 	},
 	emits: ["month-activate"],
-	setup(d, { emit: b }) {
-		let x = d, S = b, C = (e) => t(e, x.locale, { month: "long" }), w = o(() => {
-			let t = /* @__PURE__ */ new Set();
-			for (let i of x.events) {
-				let a = n(i.start), o = n(i.end);
-				if (!a || !o) continue;
-				let s = i.start;
-				for (let n = 0; n < 366 && r(i, s); n++) t.add(s), s = e(s, 1);
+	setup(f, { emit: S }) {
+		let C = f, w = S, T = s(() => {
+			let r = /* @__PURE__ */ new Set(), a = C.months[0], o = C.months.at(-1);
+			if (!a || !o) return r;
+			let s = e(t(o, 1), -1);
+			for (let t of C.events) {
+				if (!i(t.start) || !i(t.end)) continue;
+				let o = n(t.start, a) > 0 ? t.start : a, c = n(t.end, s) < 0 ? t.end : s;
+				for (let t = o; n(t, c) <= 0; t = e(t, 1)) r.add(t);
 			}
-			return t;
-		}), T = o(() => {
+			return r;
+		}), E = s(() => C.months.map((e) => a(e, C.weekdays))), D = s(() => {
 			let e = /* @__PURE__ */ new Map();
-			for (let t of x.months) e.set(t, i(t, x.weekdays));
+			for (let t of E.value) for (let n of t) for (let t of n) e.has(t.iso) || e.set(t.iso, r(t.iso, C.locale, { day: "numeric" }));
 			return e;
-		}), E = (e) => T.value.get(e) ?? [], D = o(() => {
-			let e = /* @__PURE__ */ new Map();
-			for (let n of T.value.values()) for (let r of n) for (let n of r) e.has(n.iso) || e.set(n.iso, t(n.iso, x.locale, { day: "numeric" }));
-			return e;
-		}), O = (e) => D.value.get(e) ?? t(e, x.locale, { day: "numeric" }), k = o(() => {
-			let e = /* @__PURE__ */ new Map();
-			for (let [t, n] of T.value) {
-				let r = 0;
-				for (let e of n) for (let t of e) t.adjacent === null && w.value.has(t.iso) && r++;
-				e.set(t, r);
-			}
-			return e;
-		}), A = (e) => k.value.get(e) ?? 0, j = (e) => e.adjacent === null && w.value.has(e.iso);
-		return (e, t) => (f(), c("div", {
+		}), O = s(() => {
+			let e = T.value, t = D.value;
+			return C.months.map((n, i) => {
+				let a = 0, o = (E.value[i] ?? []).map((n) => n.map((n) => {
+					let r = n.adjacent === null && e.has(n.iso);
+					return r && a++, {
+						iso: n.iso,
+						adjacent: n.adjacent,
+						number: t.get(n.iso) ?? "",
+						busy: r
+					};
+				}));
+				return {
+					month: n,
+					name: r(n, C.locale, { month: "long" }),
+					weeks: o,
+					busyCount: a
+				};
+			});
+		});
+		return (e, t) => (h(), l("div", {
 			class: "v-calendar-year",
 			role: "group",
-			"aria-label": d.label
-		}, [(f(!0), c(a, null, p(d.months, (e) => (f(), c("section", {
-			key: e,
+			"aria-label": f.label
+		}, [(h(!0), l(o, null, g(O.value, (e) => (h(), l("section", {
+			key: e.month,
 			class: "v-calendar-year-month"
-		}, [l("button", {
+		}, [u("button", {
 			type: "button",
-			class: "v-calendar-year-title",
-			onClick: (t) => S("month-activate", e)
-		}, [u(m(C(e)) + " ", 1), A(e) > 0 ? (f(), c("span", _, m(A(e)), 1)) : s("", !0)], 8, g), l("div", v, [(f(!0), c(a, null, p(E(e), (e, t) => (f(), c(a, { key: t }, [(f(!0), c(a, null, p(e, (e) => (f(), c("span", {
+			class: "v-calendar-button v-calendar-year-title",
+			onClick: (t) => w("month-activate", e.month)
+		}, [d(_(e.name) + " ", 1), e.busyCount > 0 ? (h(), l("span", b, _(e.busyCount), 1)) : c("", !0)], 8, y), u("div", {
+			class: "v-calendar-year-grid",
+			"aria-hidden": "true",
+			style: m({ "--calendar-columns": String(f.weekdays.length) })
+		}, [(h(!0), l(o, null, g(e.weeks, (e, t) => (h(), l(o, { key: t }, [(h(!0), l(o, null, g(e, (e) => (h(), l("span", {
 			key: e.iso,
-			class: "v-calendar-year-day",
+			class: p(["v-calendar-year-day", { "v-calendar-today": e.iso === f.today }]),
 			"data-adjacent": e.adjacent ?? void 0,
-			"data-today": e.iso === d.today ? "" : void 0,
-			"data-busy": j(e) ? "" : void 0
-		}, m(O(e.iso)), 9, y))), 128))], 64))), 128))])]))), 128))], 8, h));
+			"data-busy": e.busy ? "" : void 0
+		}, _(e.number), 11, x))), 128))], 64))), 128))], 4)]))), 128))], 8, v));
 	}
 });
 //#endregion
-export { b as default };
+export { S as default };
 
 //# sourceMappingURL=VCalendarYear.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VCalendar/VCalendarYear.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"VCalendarYear.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VCalendar/VCalendarYear.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"E extends CalendarEvent\">\n// @a11y @core\n/**\n * The year view: twelve small months, each marking the days that have something on them.\n *\n * It is internal to VCalendar and has no story of its own — its documentation lives with\n * the component that renders it.\n *\n * WHY THE DAYS HERE ARE NOT BUTTONS, unlike every other view. A year is three hundred and\n * sixty-five days, and making each one focusable would put that many stops in the tab\n * order for a view whose whole purpose is to be glanced at. Twelve roving grids would fix\n * the count but leave the arrows unable to cross from one month to the next, which is\n * exactly the movement a year view invites.\n *\n * So this view is a SUMMARY and says so: the days are text, with the busy ones ringed, and\n * the thing you can reach and act on is the month, whose name carries how many of its days\n * carry something. Choosing a day is what the month and day views are for, and the heading\n * is the way through to them.\n */\nimport { computed } from 'vue'\n\nimport { addDays, formatDisplay as formatDate, parseISO } from '../../utils/date'\n\nimport { coversDay, monthWeeks, type MonthCell } from './layout'\nimport type { CalendarEvent } from './types'\n\nexport interface CalendarYearProps<T> {\n  /** The first day of each month of the year on show. */\n  months: string[]\n  events: T[]\n  locale: string\n  /** Which weekdays are on show, so a mini-month drops the same columns as the others. */\n  weekdays: number[]\n  today: string | null\n  label: string\n}\n\nconst props = defineProps<CalendarYearProps<E>>()\n\nconst emit = defineEmits<{\n  /** A month was chosen, and is where the calendar should go next. */\n  'month-activate': [iso: string]\n}>()\n\nconst monthName = (iso: string) => formatDate(iso, props.locale, { month: 'long' })\n\n/** The days of the year that have something on them, worked out once for all twelve. */\nconst busyDays = computed(() => {\n  const days = new Set<string>()\n  for (const event of props.events) {\n    const start = parseISO(event.start)\n    const end = parseISO(event.end)\n    if (!start || !end) continue\n    /*\n     * Walked day by day rather than tested against every square: a year holds far more\n     * squares than a schedule holds days, so filling a set from the events and asking it\n     * one question per square is the cheaper way round. The walk is bounded to a year so a\n     * malformed range cannot spin.\n     */\n    let iso = event.start\n    for (let guard = 0; guard < 366 && coversDay(event, iso); guard++) {\n      days.add(iso)\n      iso = addDays(iso, 1)\n    }\n  }\n  return days\n})\n\n/*\n * The twelve grids and their day numbers, built ONCE per render.\n *\n * `weeksOf` used to be a plain function, and the template reached it three times per month\n * — once in the `v-for`, and twice through `busyCount`, which appears in both the `v-if` and\n * the text beside it. Twelve months therefore rebuilt 36 grids, some 1500 `MonthCell`\n * objects, on every render; the 504 day numbers were formatted alongside them. None of that\n * depends on anything but the anchor, the weekdays and the locale.\n *\n * `busyCount` is a map for the same reason: reading it twice must not cost twice.\n */\nconst grids = computed(() => {\n  const map = new Map<string, MonthCell[][]>()\n  for (const month of props.months) map.set(month, monthWeeks(month, props.weekdays))\n  return map\n})\n\nconst weeksOf = (month: string) => grids.value.get(month) ?? []\n\nconst dayNumbers = computed(() => {\n  const map = new Map<string, string>()\n  for (const weeks of grids.value.values()) {\n    for (const week of weeks) {\n      for (const cell of week) {\n        if (!map.has(cell.iso))\n          map.set(cell.iso, formatDate(cell.iso, props.locale, { day: 'numeric' }))\n      }\n    }\n  }\n  return map\n})\n\nconst dayNumber = (iso: string) =>\n  dayNumbers.value.get(iso) ?? formatDate(iso, props.locale, { day: 'numeric' })\n\n/** How many of a month's own days carry something, which is what its name announces. */\nconst busyCounts = computed(() => {\n  const map = new Map<string, number>()\n  for (const [month, weeks] of grids.value) {\n    let count = 0\n    for (const week of weeks) {\n      for (const cell of week) if (cell.adjacent === null && busyDays.value.has(cell.iso)) count++\n    }\n    map.set(month, count)\n  }\n  return map\n})\n\nconst busyCount = (month: string) => busyCounts.value.get(month) ?? 0\n\nconst isBusy = (cell: MonthCell) => cell.adjacent === null && busyDays.value.has(cell.iso)\n</script>\n\n<template>\n  <div class=\"v-calendar-year\" role=\"group\" :aria-label=\"label\">\n    <section v-for=\"month in months\" :key=\"month\" class=\"v-calendar-year-month\">\n      <button type=\"button\" class=\"v-calendar-year-title\" @click=\"emit('month-activate', month)\">\n        {{ monthName(month) }}\n        <!-- The count is part of the button's own text, so a month that has something on it\n             says so in its accessible name — which is what makes the days below safe to hide\n             from the accessibility tree. -->\n        <span v-if=\"busyCount(month) > 0\" class=\"v-calendar-year-count\">\n          {{ busyCount(month) }}\n        </span>\n      </button>\n\n      <div class=\"v-calendar-year-grid\" aria-hidden=\"true\">\n        <template v-for=\"(week, row) in weeksOf(month)\" :key=\"row\">\n          <span\n            v-for=\"cell in week\"\n            :key=\"cell.iso\"\n            class=\"v-calendar-year-day\"\n            :data-adjacent=\"cell.adjacent ?? undefined\"\n            :data-today=\"cell.iso === today ? '' : undefined\"\n            :data-busy=\"isBusy(cell) ? '' : undefined\"\n          >\n            {{ dayNumber(cell.iso) }}\n          </span>\n        </template>\n      </div>\n    </section>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-calendar-year {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));\n    gap: var(--vectis-space-4);\n    overflow: auto;\n    block-size: 100%;\n    min-block-size: 0;\n    padding: var(--vectis-space-3);\n    font-family: var(--vectis-text-family);\n    color: var(--vectis-color-text);\n  }\n\n  .v-calendar-year-month {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-calendar-year-title {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--vectis-space-2);\n    padding: var(--vectis-space-1) var(--vectis-space-2);\n    border: none;\n    border-radius: var(--vectis-radius-interactive);\n    background: none;\n    color: var(--vectis-color-text);\n    font-family: inherit;\n    font-size: var(--vectis-text-heading-4-size);\n    font-weight: var(--vectis-text-heading-4-weight);\n    text-align: start;\n    text-transform: capitalize;\n    cursor: pointer;\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-calendar-year-title:hover {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-calendar-year-title: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-calendar-year-count {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    min-inline-size: var(--vectis-control-size-calendar-year-cell);\n    padding-inline: var(--vectis-space-1);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--vectis-color-accent-surface);\n    color: var(--vectis-color-accent-text);\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-font-weight-medium);\n  }\n\n  .v-calendar-year-grid {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    gap: 1px;\n  }\n\n  .v-calendar-year-day {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    aspect-ratio: 1;\n    min-inline-size: var(--vectis-control-size-calendar-year-cell);\n    border-radius: var(--vectis-radius-pill);\n    font-size: var(--vectis-text-caption-size);\n  }\n\n  .v-calendar-year-day[data-adjacent] {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* A busy day is RINGED rather than dotted: at this size a dot would be about one pixel,\n     and it would be drawn as a background, which Windows forced-colors flattens away —\n     where a border keeps a colour of its own. The tint is a second, redundant signal for\n     anyone the ring alone is too fine for. */\n  .v-calendar-year-day[data-busy] {\n    border: 1px solid var(--vectis-color-accent-border);\n    background: var(--vectis-color-accent-surface);\n    color: var(--vectis-color-accent-text);\n  }\n\n  .v-calendar-year-day[data-today] {\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  @media (prefers-reduced-motion: reduce) {\n    .v-calendar-year-title {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAqCA,IAAM,IAAQ,GAER,IAAO,GAKP,KAAa,MAAgB,EAAW,GAAK,EAAM,QAAQ,EAAE,OAAO,OAAO,CAAC,GAG5E,IAAW,QAAe;GAC9B,IAAM,oBAAO,IAAI,IAAY;GAC7B,KAAK,IAAM,KAAS,EAAM,QAAQ;IAChC,IAAM,IAAQ,EAAS,EAAM,KAAK,GAC5B,IAAM,EAAS,EAAM,GAAG;IAC9B,IAAI,CAAC,KAAS,CAAC,GAAK;IAOpB,IAAI,IAAM,EAAM;IAChB,KAAK,IAAI,IAAQ,GAAG,IAAQ,OAAO,EAAU,GAAO,CAAG,GAAG,KAExD,AADA,EAAK,IAAI,CAAG,GACZ,IAAM,EAAQ,GAAK,CAAC;GAExB;GACA,OAAO;EACT,CAAC,GAaK,IAAQ,QAAe;GAC3B,IAAM,oBAAM,IAAI,IAA2B;GAC3C,KAAK,IAAM,KAAS,EAAM,QAAQ,EAAI,IAAI,GAAO,EAAW,GAAO,EAAM,QAAQ,CAAC;GAClF,OAAO;EACT,CAAC,GAEK,KAAW,MAAkB,EAAM,MAAM,IAAI,CAAK,KAAK,CAAC,GAExD,IAAa,QAAe;GAChC,IAAM,oBAAM,IAAI,IAAoB;GACpC,KAAK,IAAM,KAAS,EAAM,MAAM,OAAO,GACrC,KAAK,IAAM,KAAQ,GACjB,KAAK,IAAM,KAAQ,GACjB,AAAK,EAAI,IAAI,EAAK,GAAG,KACnB,EAAI,IAAI,EAAK,KAAK,EAAW,EAAK,KAAK,EAAM,QAAQ,EAAE,KAAK,UAAU,CAAC,CAAC;GAIhF,OAAO;EACT,CAAC,GAEK,KAAa,MACjB,EAAW,MAAM,IAAI,CAAG,KAAK,EAAW,GAAK,EAAM,QAAQ,EAAE,KAAK,UAAU,CAAC,GAGzE,IAAa,QAAe;GAChC,IAAM,oBAAM,IAAI,IAAoB;GACpC,KAAK,IAAM,CAAC,GAAO,MAAU,EAAM,OAAO;IACxC,IAAI,IAAQ;IACZ,KAAK,IAAM,KAAQ,GACjB,KAAK,IAAM,KAAQ,GAAM,AAAI,EAAK,aAAa,QAAQ,EAAS,MAAM,IAAI,EAAK,GAAG,KAAG;IAEvF,EAAI,IAAI,GAAO,CAAK;GACtB;GACA,OAAO;EACT,CAAC,GAEK,KAAa,MAAkB,EAAW,MAAM,IAAI,CAAK,KAAK,GAE9D,KAAU,MAAoB,EAAK,aAAa,QAAQ,EAAS,MAAM,IAAI,EAAK,GAAG;yBAIvF,EA2BM,OAAA;GA3BD,OAAM;GAAkB,MAAK;GAAS,cAAY,EAAA;cACrD,EAyBU,GAAA,MAAA,EAzBe,EAAA,SAAT,YAAhB,EAyBU,WAAA;GAzBwB,KAAK;GAAO,OAAM;MAClD,EAQS,UAAA;GARD,MAAK;GAAS,OAAM;GAAyB,UAAK,MAAE,EAAI,kBAAmB,CAAK;UACnF,EAAU,CAAK,CAAA,IAAI,KAItB,CAAA,GAAY,EAAU,CAAK,IAAA,KAAA,EAAA,GAA3B,EAEO,QAFP,GAEO,EADF,EAAU,CAAK,CAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,GAAA,CAAA,GAItB,EAaM,OAbN,GAaM,EAAA,EAAA,EAAA,GAZJ,EAWW,GAAA,MAAA,EAXqB,EAAQ,CAAK,IAA3B,GAAM,wBAA8B,EAAG,GAAA,EAAA,EAAA,EAAA,GACvD,EASO,GAAA,MAAA,EARU,IAAR,YADT,EASO,QAAA;GAPJ,KAAK,EAAK;GACX,OAAM;GACL,iBAAe,EAAK,YAAY,KAAA;GAChC,cAAY,EAAK,QAAQ,EAAA,QAAK,KAAQ,KAAA;GACtC,aAAW,EAAO,CAAI,IAAA,KAAS,KAAA;OAE7B,EAAU,EAAK,GAAG,CAAA,GAAA,GAAA,CAAA"}
+{"version":3,"file":"VCalendarYear.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VCalendar/VCalendarYear.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"E extends CalendarEvent\">\n// @a11y @core\n/**\n * The year view: twelve small months, each marking the days that have something on them.\n * Internal to VCalendar, whose documentation covers it.\n *\n * WHY THE DAYS ARE NOT BUTTONS, unlike every other view. A year is 365 days, and making each\n * focusable would put that many stops in the tab order for a view meant to be glanced at.\n * Twelve roving grids would fix the count but leave the arrows unable to cross from one\n * month to the next, which is exactly the movement a year view invites.\n *\n * So it is a SUMMARY and says so: the days are text with the busy ones ringed, and what can\n * be reached and acted on is the MONTH, whose name carries how many of its days are busy.\n * Choosing a day is what the month and day views are for, and the heading is the way through.\n */\nimport { computed } from 'vue'\n\nimport { addDays, addMonths, compareISO, formatDateDisplay, parseISO } from '../../utils/date'\n\nimport { monthWeeks, type MonthCell } from './layout'\nimport type { CalendarEvent } from './types'\n\nexport interface CalendarYearProps<T> {\n  /** The first day of each month of the year on show. */\n  months: string[]\n  events: T[]\n  locale: string\n  /** Which weekdays are on show, so a mini-month drops the same columns as the others. */\n  weekdays: number[]\n  today: string | null\n  label: string\n}\n\nconst props = defineProps<CalendarYearProps<E>>()\n\nconst emit = defineEmits<{\n  /** A month was chosen, and is where the calendar should go next. */\n  'month-activate': [iso: string]\n}>()\n\n/**\n * The days of the year on show that have something on them, worked out once for all twelve.\n *\n * Walked day by day rather than tested against every square: a year holds far more squares\n * than a schedule holds days, so filling a set from the events and asking it one question per\n * square is the cheaper way round. Each walk is CLAMPED to the year on show, the only days a\n * mini-month marks — so an event from another year costs one comparison, and a range running\n * across several years walks only the part of it this year holds.\n */\nconst busyDays = computed(() => {\n  const days = new Set<string>()\n  const first = props.months[0]\n  const lastMonth = props.months.at(-1)\n  if (!first || !lastMonth) return days\n  const last = addDays(addMonths(lastMonth, 1), -1)\n\n  for (const event of props.events) {\n    if (!parseISO(event.start) || !parseISO(event.end)) continue\n    const from = compareISO(event.start, first) > 0 ? event.start : first\n    const to = compareISO(event.end, last) < 0 ? event.end : last\n    for (let iso = from; compareISO(iso, to) <= 0; iso = addDays(iso, 1)) days.add(iso)\n  }\n  return days\n})\n\n/*\n * The twelve grids, built ONCE per change of anchor or weekdays, and their day numbers once per\n * locale: the adjacent days repeat across neighbouring months, and none of it depends on the\n * events. The busy marks are laid over both in `yearMonths` below.\n */\nconst grids = computed(() => props.months.map((month) => monthWeeks(month, props.weekdays)))\n\nconst dayNumbers = computed(() => {\n  const map = new Map<string, string>()\n  for (const weeks of grids.value) {\n    for (const week of weeks) {\n      for (const cell of week) {\n        if (!map.has(cell.iso))\n          map.set(cell.iso, formatDateDisplay(cell.iso, props.locale, { day: 'numeric' }))\n      }\n    }\n  }\n  return map\n})\n\n/** One square of a mini-month, with everything the template writes on it already settled. */\ninterface YearDay {\n  iso: string\n  adjacent: MonthCell['adjacent']\n  number: string\n  /** Only a day of the month itself is marked: a neighbour's day belongs to its own month. */\n  busy: boolean\n}\n\n/**\n * What the template draws, each month with its name, its squares and how many of them are busy.\n *\n * The template reaches a month's count twice, in the `v-if` and in the text beside it, and each\n * square asks whether it is busy: reading them here means the busy set is walked once per\n * render rather than once per square, and the count is never computed twice.\n */\nconst yearMonths = computed(() => {\n  const busy = busyDays.value\n  const numbers = dayNumbers.value\n  return props.months.map((month, index) => {\n    let busyCount = 0\n    const weeks: YearDay[][] = (grids.value[index] ?? []).map((week) =>\n      week.map((cell) => {\n        const isBusy = cell.adjacent === null && busy.has(cell.iso)\n        if (isBusy) busyCount++\n        return {\n          iso: cell.iso,\n          adjacent: cell.adjacent,\n          number: numbers.get(cell.iso) ?? '',\n          busy: isBusy,\n        }\n      }),\n    )\n    return {\n      month,\n      name: formatDateDisplay(month, props.locale, { month: 'long' }),\n      weeks,\n      busyCount,\n    }\n  })\n})\n</script>\n\n<template>\n  <div class=\"v-calendar-year\" role=\"group\" :aria-label=\"label\">\n    <section v-for=\"entry in yearMonths\" :key=\"entry.month\" class=\"v-calendar-year-month\">\n      <button\n        type=\"button\"\n        class=\"v-calendar-button v-calendar-year-title\"\n        @click=\"emit('month-activate', entry.month)\"\n      >\n        {{ entry.name }}\n        <!-- The count is part of the button's own text, so a month that has something on it\n             says so in its accessible name — which is what makes the days below safe to hide\n             from the accessibility tree. -->\n        <span v-if=\"entry.busyCount > 0\" class=\"v-calendar-year-count\">\n          {{ entry.busyCount }}\n        </span>\n      </button>\n\n      <div\n        class=\"v-calendar-year-grid\"\n        aria-hidden=\"true\"\n        :style=\"{ '--calendar-columns': String(weekdays.length) }\"\n      >\n        <template v-for=\"(week, row) in entry.weeks\" :key=\"row\">\n          <span\n            v-for=\"day in week\"\n            :key=\"day.iso\"\n            class=\"v-calendar-year-day\"\n            :class=\"{ 'v-calendar-today': day.iso === today }\"\n            :data-adjacent=\"day.adjacent ?? undefined\"\n            :data-busy=\"day.busy ? '' : undefined\"\n          >\n            {{ day.number }}\n          </span>\n        </template>\n      </div>\n    </section>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-calendar-year {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));\n    gap: var(--vectis-space-4);\n    padding: var(--vectis-space-3);\n  }\n\n  .v-calendar-year-month {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-calendar-year-title {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--vectis-space-2);\n    padding: var(--vectis-space-1) var(--vectis-space-2);\n    border-radius: var(--vectis-radius-interactive);\n    color: var(--vectis-color-text);\n    font-size: var(--vectis-text-heading-4-size);\n    font-weight: var(--vectis-text-heading-4-weight);\n    text-align: start;\n    text-transform: capitalize;\n  }\n\n  .v-calendar-year-title:hover {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-calendar-year-count {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    min-inline-size: var(--vectis-control-size-calendar-year-cell);\n    padding-inline: var(--vectis-space-1);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--vectis-color-accent-surface);\n    color: var(--vectis-color-accent-text);\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-font-weight-medium);\n  }\n\n  /* As many columns as weekdays on show, set inline by the template exactly as the month\n     view does. Written as a literal 7, a calendar showing the working week alone wrapped\n     every five-day row of `monthWeeks` onto the next line. */\n  .v-calendar-year-grid {\n    display: grid;\n    grid-template-columns: repeat(var(--calendar-columns), 1fr);\n    gap: 1px;\n  }\n\n  .v-calendar-year-day {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    aspect-ratio: 1;\n    min-inline-size: var(--vectis-control-size-calendar-year-cell);\n    border-radius: var(--vectis-radius-pill);\n    font-size: var(--vectis-text-caption-size);\n  }\n\n  /*\n   * TRAP — both states are written DISJOINT from today rather than below it. Today is very\n   * often also busy, and its paint is `.v-calendar-today`, in VCalendar's sheet: at equal\n   * specificity the winner between two sheets is whichever the consumer's bundler emitted last,\n   * and losing that draw paints today as an ordinary busy day — the one square a reader looks\n   * for first, quietly indistinguishable.\n   */\n  .v-calendar-year-day[data-adjacent]:not(.v-calendar-today) {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* A busy day is RINGED rather than dotted: at this size a dot would be about one pixel,\n     and it would be drawn as a background, which Windows forced-colors flattens away —\n     where a border keeps a colour of its own. The tint is a second, redundant signal for\n     anyone the ring alone is too fine for — and the ring alone is what today keeps, being\n     painted over the tint. */\n  .v-calendar-year-day[data-busy] {\n    border: 1px solid var(--vectis-color-accent-border);\n  }\n\n  .v-calendar-year-day[data-busy]:not(.v-calendar-today) {\n    background: var(--vectis-color-accent-surface);\n    color: var(--vectis-color-accent-text);\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VCalendar/gesture.d.ts

@@ -0,0 +1,158 @@
+import { Ref } from 'vue';
+import { CalendarIntent } from './keyboard.js';
+import { GridGeometry } from './layout.js';
+import { CalendarEvent, CalendarEventId, CalendarEventTimes } from './types.js';
+/**
+ * The id the ghost of a dragged event carries. It has to DIFFER from the event's own, or the
+ * two would collide in every map the layout keys by id and only one would ever be drawn.
+ */
+export declare const ghostIdOf: (id: CalendarEventId) => string;
+/**
+ * The dragged event's own id, read back off its ghost's. It is what the card is handed as
+ * `ghostOf`: an event's colour is derived from its id, so a ghost coloured from its own
+ * would not match the card it belongs to. `hueOf` reads a number and its digits as the same
+ * event, so the string form returned here is enough.
+ */
+export declare const originalIdOf: (id: CalendarEventId) => string;
+export declare const isGhostId: (id: CalendarEventId) => boolean;
+/**
+ * The id a card belongs to, read back off the DOM.
+ *
+ * An id may be a NUMBER and an attribute is always text, so a numeric one has to be turned
+ * back into one — otherwise every card of a numerically-keyed calendar would look up as a
+ * miss and nothing would drag. Which of the two it is, is settled by asking the map that
+ * holds the originals rather than by guessing from the text.
+ */
+export declare function cardIdOf(card: HTMLElement, has: (id: CalendarEventId) => boolean): string | number;
+/**
+ * A grid's measured box as the pure geometry wants it: plain numbers, no element.
+ *
+ * `inlineStart` is the edge the first column starts at, which is the RIGHT one in a
+ * right-to-left page — which is also why containment never goes through this, see
+ * `pointWithin`.
+ */
+export declare function gridGeometryOf(rect: DOMRect, columns: number, rtl: boolean): GridGeometry;
+/** The state every gesture carries, whatever each grid adds to it. */
+export interface GestureBase {
+    id: CalendarEventId;
+    /**
+     * Where the event was when the gesture began. Every pointer frame is computed from THIS and
+     * never from the frame before it, so a long drag cannot accumulate rounding drift.
+     */
+    origin: CalendarEventTimes;
+    /** What the card shows right now. The model is not touched until the gesture ends. */
+    preview: CalendarEventTimes;
+    /** The pointer holding the gesture, or null for a keyboard grab. */
+    pointerId: number | null;
+    originX: number;
+    originY: number;
+    /**
+     * Where the pointer last was. Two things move the calendar UNDER a still pointer — paging at
+     * an edge, and auto-scrolling — and each has to work out afresh what the pointer is now over.
+     */
+    lastX: number;
+    lastY: number;
+    /** Whether it moved past the threshold, which is what separates a drag from a click. */
+    moved: boolean;
+    /**
+     * Whether the pointer is off the calendar altogether — over the toolbar, or over the page
+     * beside it. Letting go there abandons the gesture whole and writes nothing.
+     *
+     * A KEYBOARD grab can never set it, and structurally rather than by a guard: `onPointermove`
+     * is the only writer, and it returns on the id mismatch first — a grab's `pointerId` is null,
+     * which no real pointer's id ever equals.
+     */
+    outside: boolean;
+    /**
+     * The reading direction, read ONCE when the gesture begins. It cannot change under a live
+     * drag, and asking the document on every frame costs a style resolution each time.
+     */
+    rtl: boolean;
+}
+/** What a grid hands over to start a gesture; the rest is filled in here. */
+export type GestureInit<G extends GestureBase> = Omit<G, 'preview' | 'lastX' | 'lastY' | 'moved' | 'outside' | 'rtl'>;
+/**
+ * A gesture held by the KEYBOARD rather than by a pointer: grabbed with Space, and waiting
+ * for the arrows to move it. Both grids draw the card differently in that state, which is
+ * what makes it worth a name.
+ */
+export declare const isGrabbed: (state: GestureBase | null) => boolean;
+/** The two intents that move a grabbed event, which only a grid can turn into times. */
+export type GrabStep = Extract<CalendarIntent, {
+    kind: 'grabMove' | 'grabResize';
+}>;
+export interface CalendarGestureOptions<E extends CalendarEvent, G extends GestureBase> {
+    /** Every event as it is currently drawn, the ghost's original among them. */
+    events: () => readonly E[];
+    /** The event drawn under an id, for the handlers. */
+    eventOf: (id: CalendarEventId) => E | undefined;
+    /** The view's own box: what "outside the calendar" is measured against. */
+    rootEl: Ref<HTMLElement | null>;
+    /**
+     * The element the pointer is captured on once a press travels. It must contain every surface
+     * a gesture can start on, and carry the move, up, cancel and leave bindings: capture retargets
+     * every later pointer event to it, which is what makes one set of bindings serve every kind of
+     * gesture.
+     */
+    captureEl: Ref<HTMLElement | null>;
+    /** The box the cells occupy, which points and edges are read against. */
+    measureEl: Ref<HTMLElement | null>;
+    /** How many columns that box is divided into. */
+    columns: () => number;
+    /** Whether events may be moved at all. */
+    editable: () => boolean;
+    /** The node every card points at to say how it can be moved. */
+    hintId: () => string;
+    /** The step a grabbed event moves by, handed to the keyboard table. */
+    slotMinutes: () => number;
+    edgeStepDelay: () => number;
+    /** Whatever the grid's cells are made of, so paging under a still pointer re-places the card. */
+    layout: () => unknown;
+    /** Works out where the gesture's event belongs from the pointer's last position. */
+    applyPoint: (state: G, rect: DOMRect) => void;
+    /** Called on every pointer move past the threshold, after the edge watch, with both rects. */
+    onEdges?: (state: G, rootRect: DOMRect | undefined) => void;
+    /** Everything else a gesture leaves running, dropped on every path out of one. */
+    onRelease?: () => void;
+    /**
+     * A pointer gesture let go inside the calendar. Returns true when the grid has answered it
+     * itself — a slot drawn out — and nothing is left to drop.
+     */
+    onLetGo?: (state: G) => boolean;
+    /** A gesture that moved, committed: the grid reports the new times. */
+    onDrop: (state: G) => void;
+    /** What a keyboard grab of this event starts, or null when it cannot be grabbed. */
+    grab: (item: E) => GestureInit<G> | null;
+    /** Applies one arrow step to a grabbed event. Returns false when the step means nothing here. */
+    onGrabStep: (state: G, step: GrabStep, item: E) => boolean;
+    step: (direction: -1 | 1) => void;
+    announce: (message: string) => void;
+}
+export declare function useCalendarGesture<E extends CalendarEvent, G extends GestureBase>(options: CalendarGestureOptions<E, G>): {
+    gesture: Ref<G | null, G | null>;
+    grabbing: import('vue').ComputedRef<boolean>;
+    ghostEvent: import('vue').ComputedRef<E | null>;
+    withPreview: (events: readonly E[]) => E[];
+    edgeCue: import('vue').ComputedRef<"start" | "end" | undefined>;
+    isRtl: () => boolean;
+    start: (init: GestureInit<G>, rtl?: boolean) => void;
+    reapply: (state: G) => void;
+    release: () => void;
+    endLastGesture: () => void;
+    consumeDrag: () => boolean;
+    onPointermove: (event: PointerEvent) => void;
+    onPointerup: (event: PointerEvent) => void;
+    onPointercancel: () => void;
+    onPointerleave: (event: PointerEvent) => void;
+    onCardKeydown: (event: KeyboardEvent, card: HTMLElement) => void;
+    refocusCard: (id: CalendarEventId) => void;
+    focusCell: (id: string, deferred?: boolean) => void;
+    idOfCard: (card: HTMLElement) => string | number;
+    cardState: (id: CalendarEventId) => {
+        dragging: boolean;
+        rejected: boolean;
+        grabbed: boolean;
+        hintId: string | undefined;
+        ghostOf: string | undefined;
+    };
+};

package/dist/components/VCalendar/gesture.js

@@ -0,0 +1,170 @@
+import { useMessages as e } from "../../i18n/state.js";
+import { isRtl as t } from "../../utils/direction.js";
+import { useEdgeStep as n } from "./edgeStep.js";
+import { inlineEdgeAt as r, pointWithin as i } from "./layout.js";
+import { calendarIntent as a } from "./keyboard.js";
+import { computed as o, nextTick as s, ref as c, watch as l } from "vue";
+//#region src/components/VCalendar/gesture.ts
+var u = "__vectis-calendar-ghost__", d = (e) => `${u}${e}`, f = (e) => String(e).slice(25), p = (e) => String(e).startsWith(u);
+function m(e, t) {
+	let n = e.dataset.eventId ?? "";
+	return t(n) ? n : Number(n);
+}
+function h(e, t, n) {
+	return {
+		top: e.top,
+		height: e.height,
+		inlineStart: n ? e.right : e.left,
+		inlineSize: e.width,
+		columns: t
+	};
+}
+var g = (e) => e !== null && e.pointerId === null;
+function _(u) {
+	let _ = e(), v = c(null), y = o(() => g(v.value)), b = () => t(u.measureEl.value), x = o(() => {
+		let e = v.value;
+		if (!e?.moved) return null;
+		let t = u.events().find((t) => t.id === e.id);
+		return t ? {
+			...t,
+			...e.origin,
+			id: d(e.id)
+		} : null;
+	});
+	function S(e) {
+		let t = v.value;
+		if (!t) return [...e];
+		let n = e.map((e) => e.id === t.id ? {
+			...e,
+			...t.preview
+		} : e);
+		return x.value ? [...n, x.value] : n;
+	}
+	let C = !1;
+	function w() {
+		C = !1;
+	}
+	function T() {
+		let e = C;
+		return C = !1, e;
+	}
+	let E = n(u.step, u.edgeStepDelay), D = o(() => E.pending.value === -1 ? "start" : E.pending.value === 1 ? "end" : void 0);
+	function O() {
+		E.cancel(), u.onRelease?.();
+	}
+	function k(e, t = b()) {
+		v.value = {
+			...e,
+			preview: { ...e.origin },
+			lastX: e.originX,
+			lastY: e.originY,
+			moved: !1,
+			outside: !1,
+			rtl: t
+		};
+	}
+	function A(e) {
+		try {
+			u.captureEl.value?.setPointerCapture(e);
+		} catch {}
+	}
+	function j(e) {
+		let t = u.measureEl.value?.getBoundingClientRect();
+		t && u.applyPoint(e, t);
+	}
+	function M(e) {
+		let t = v.value;
+		if (!t || t.pointerId !== e.pointerId || (t.lastX = e.clientX, t.lastY = e.clientY, !t.moved && Math.abs(e.clientX - t.originX) < 3 && Math.abs(e.clientY - t.originY) < 3)) return;
+		t.moved || A(e.pointerId), t.moved = !0;
+		let n = u.rootEl.value?.getBoundingClientRect(), a = u.measureEl.value?.getBoundingClientRect();
+		t.outside = n ? !i({
+			x: t.lastX,
+			y: t.lastY
+		}, n) : !1, a && (u.applyPoint(t, a), E.watchEdge(r(t.lastX, h(a, u.columns(), t.rtl), 48, t.rtl)), u.onEdges?.(t, n));
+	}
+	function N(e) {
+		let t = v.value;
+		!t || t.pointerId !== e.pointerId || (v.value = null, C = t.moved, O(), !t.outside && (u.onLetGo?.(t) || t.moved && u.onDrop(t)));
+	}
+	function P() {
+		v.value = null, O();
+	}
+	function F(e) {
+		let t = v.value;
+		!t || t.pointerId !== e.pointerId || t.moved || P();
+	}
+	l(u.layout, () => {
+		let e = v.value;
+		e?.moved && j(e);
+	}, { flush: "post" });
+	function I(e) {
+		s(() => {
+			let t = u.measureEl.value?.querySelectorAll(".v-calendar-event");
+			Array.from(t ?? []).find((t) => t.dataset.eventId === String(e))?.focus();
+		});
+	}
+	function L(e, t = !1) {
+		let n = () => document.getElementById(e)?.focus();
+		t ? s(n) : n();
+	}
+	let R = (e) => m(e, (e) => u.eventOf(e) !== void 0);
+	function z(e, t) {
+		let n = u.eventOf(R(t));
+		if (!n) return;
+		let r = y.value && v.value?.id === n.id, i = r ? v.value : null, o = a(e.key, e.shiftKey, r ? "grabbed" : "event", u.slotMinutes(), i?.rtl ?? b());
+		if (o) {
+			if (!i) {
+				let t = o.kind === "grab" ? u.grab(n) : null;
+				if (!t) return;
+				e.preventDefault(), k(t), u.announce(_.value.calendar.grabbed);
+				return;
+			}
+			if (e.preventDefault(), o.kind === "grabMove" || o.kind === "grabResize") {
+				if (!u.onGrabStep(i, o, n)) return;
+				i.moved = !0, I(i.id);
+				return;
+			}
+			if (o.kind === "activate") {
+				v.value = null, i.moved && u.onDrop(i), u.announce(_.value.calendar.dropped), I(i.id);
+				return;
+			}
+			o.kind === "cancel" && (v.value = null, u.announce(_.value.calendar.reverted), I(i.id));
+		}
+	}
+	function B(e) {
+		let t = v.value, n = t !== null && t.id === e;
+		return {
+			dragging: n && t.pointerId !== null && t.moved,
+			rejected: n && t.outside,
+			grabbed: n && t.pointerId === null,
+			hintId: u.editable() && !p(e) ? u.hintId() : void 0,
+			ghostOf: p(e) ? f(e) : void 0
+		};
+	}
+	return {
+		gesture: v,
+		grabbing: y,
+		ghostEvent: x,
+		withPreview: S,
+		edgeCue: D,
+		isRtl: b,
+		start: k,
+		reapply: j,
+		release: O,
+		endLastGesture: w,
+		consumeDrag: T,
+		onPointermove: M,
+		onPointerup: N,
+		onPointercancel: P,
+		onPointerleave: F,
+		onCardKeydown: z,
+		refocusCard: I,
+		focusCell: L,
+		idOfCard: R,
+		cardState: B
+	};
+}
+//#endregion
+export { m as cardIdOf, d as ghostIdOf, h as gridGeometryOf, p as isGhostId, g as isGrabbed, f as originalIdOf, _ as useCalendarGesture };
+
+//# sourceMappingURL=gesture.js.map

package/dist/components/VCalendar/gesture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gesture.js","names":[],"sources":["../../../src/components/VCalendar/gesture.ts"],"sourcesContent":["// @keyboard @a11y @core\n/**\n * What the two grids' drag engines share, written once.\n *\n * VCalendarMonth and VCalendarTimeGrid both let an event be picked up, moved and dropped —\n * with a pointer and with the keyboard. Everything that does not depend on what a CELL is\n * lives here: the gesture state and its ghost, the pointer's move, release and cancel, the\n * capture, paging at an edge, the keyboard grab, drop and cancel, the focus handed back to a\n * card, and the flag that stops a drop from also reading as a click.\n *\n * What is NOT here is what genuinely differs, which is also why the two components exist\n * separately: turning a point into a cell (a day square on one side, a day and a minute on\n * the other), working out the new times from it, and the gesture kinds each grid adds. Those\n * stay with each grid, as hooks this composable calls, and the pure half of them is already\n * in `layout.ts`.\n *\n * It lives in the component's folder rather than in `composables/`, the `edgeStep.ts` and\n * `VCombobox/infiniteScroll.ts` arrangement: both consumers are inside this component, so it\n * fails the admission rule that folder keeps.\n */\nimport { computed, nextTick, ref, watch } from 'vue'\nimport type { Ref } from 'vue'\n\nimport { isRtl as isElementRtl } from '../../utils/direction'\n\nimport { useMessages } from '../../i18n/state'\n\nimport { EDGE_BAND, useEdgeStep } from './edgeStep'\nimport { calendarIntent, type CalendarIntent } from './keyboard'\nimport { DRAG_THRESHOLD, inlineEdgeAt, pointWithin, type GridGeometry } from './layout'\nimport type { CalendarEvent, CalendarEventId, CalendarEventTimes } from './types'\n\n/**\n * The prefix marking the copy an event leaves behind at its old place while it is being\n * dragged. It is written into the id rather than held beside it so that the ghost travels\n * through the same list, the same layout and the same `v-for` key as everything else.\n */\nconst GHOST_PREFIX = '__vectis-calendar-ghost__'\n\n/**\n * The id the ghost of a dragged event carries. It has to DIFFER from the event's own, or the\n * two would collide in every map the layout keys by id and only one would ever be drawn.\n */\nexport const ghostIdOf = (id: CalendarEventId) => `${GHOST_PREFIX}${id}`\n/**\n * The dragged event's own id, read back off its ghost's. It is what the card is handed as\n * `ghostOf`: an event's colour is derived from its id, so a ghost coloured from its own\n * would not match the card it belongs to. `hueOf` reads a number and its digits as the same\n * event, so the string form returned here is enough.\n */\nexport const originalIdOf = (id: CalendarEventId) => String(id).slice(GHOST_PREFIX.length)\nexport const isGhostId = (id: CalendarEventId) => String(id).startsWith(GHOST_PREFIX)\n\n/**\n * The id a card belongs to, read back off the DOM.\n *\n * An id may be a NUMBER and an attribute is always text, so a numeric one has to be turned\n * back into one — otherwise every card of a numerically-keyed calendar would look up as a\n * miss and nothing would drag. Which of the two it is, is settled by asking the map that\n * holds the originals rather than by guessing from the text.\n */\nexport function cardIdOf(card: HTMLElement, has: (id: CalendarEventId) => boolean) {\n  const raw = card.dataset.eventId ?? ''\n  return has(raw) ? raw : Number(raw)\n}\n\n/**\n * A grid's measured box as the pure geometry wants it: plain numbers, no element.\n *\n * `inlineStart` is the edge the first column starts at, which is the RIGHT one in a\n * right-to-left page — which is also why containment never goes through this, see\n * `pointWithin`.\n */\nexport function gridGeometryOf(rect: DOMRect, columns: number, rtl: boolean): GridGeometry {\n  return {\n    top: rect.top,\n    height: rect.height,\n    inlineStart: rtl ? rect.right : rect.left,\n    inlineSize: rect.width,\n    columns,\n  }\n}\n\n/** The state every gesture carries, whatever each grid adds to it. */\nexport interface GestureBase {\n  id: CalendarEventId\n  /**\n   * Where the event was when the gesture began. Every pointer frame is computed from THIS and\n   * never from the frame before it, so a long drag cannot accumulate rounding drift.\n   */\n  origin: CalendarEventTimes\n  /** What the card shows right now. The model is not touched until the gesture ends. */\n  preview: CalendarEventTimes\n  /** The pointer holding the gesture, or null for a keyboard grab. */\n  pointerId: number | null\n  originX: number\n  originY: number\n  /**\n   * Where the pointer last was. Two things move the calendar UNDER a still pointer — paging at\n   * an edge, and auto-scrolling — and each has to work out afresh what the pointer is now over.\n   */\n  lastX: number\n  lastY: number\n  /** Whether it moved past the threshold, which is what separates a drag from a click. */\n  moved: boolean\n  /**\n   * Whether the pointer is off the calendar altogether — over the toolbar, or over the page\n   * beside it. Letting go there abandons the gesture whole and writes nothing.\n   *\n   * A KEYBOARD grab can never set it, and structurally rather than by a guard: `onPointermove`\n   * is the only writer, and it returns on the id mismatch first — a grab's `pointerId` is null,\n   * which no real pointer's id ever equals.\n   */\n  outside: boolean\n  /**\n   * The reading direction, read ONCE when the gesture begins. It cannot change under a live\n   * drag, and asking the document on every frame costs a style resolution each time.\n   */\n  rtl: boolean\n}\n\n/** What a grid hands over to start a gesture; the rest is filled in here. */\nexport type GestureInit<G extends GestureBase> = Omit<\n  G,\n  'preview' | 'lastX' | 'lastY' | 'moved' | 'outside' | 'rtl'\n>\n\n/**\n * A gesture held by the KEYBOARD rather than by a pointer: grabbed with Space, and waiting\n * for the arrows to move it. Both grids draw the card differently in that state, which is\n * what makes it worth a name.\n */\nexport const isGrabbed = (state: GestureBase | null) => state !== null && state.pointerId === null\n\n/** The two intents that move a grabbed event, which only a grid can turn into times. */\nexport type GrabStep = Extract<CalendarIntent, { kind: 'grabMove' | 'grabResize' }>\n\nexport interface CalendarGestureOptions<E extends CalendarEvent, G extends GestureBase> {\n  /** Every event as it is currently drawn, the ghost's original among them. */\n  events: () => readonly E[]\n  /** The event drawn under an id, for the handlers. */\n  eventOf: (id: CalendarEventId) => E | undefined\n  /** The view's own box: what \"outside the calendar\" is measured against. */\n  rootEl: Ref<HTMLElement | null>\n  /**\n   * The element the pointer is captured on once a press travels. It must contain every surface\n   * a gesture can start on, and carry the move, up, cancel and leave bindings: capture retargets\n   * every later pointer event to it, which is what makes one set of bindings serve every kind of\n   * gesture.\n   */\n  captureEl: Ref<HTMLElement | null>\n  /** The box the cells occupy, which points and edges are read against. */\n  measureEl: Ref<HTMLElement | null>\n  /** How many columns that box is divided into. */\n  columns: () => number\n  /** Whether events may be moved at all. */\n  editable: () => boolean\n  /** The node every card points at to say how it can be moved. */\n  hintId: () => string\n  /** The step a grabbed event moves by, handed to the keyboard table. */\n  slotMinutes: () => number\n  edgeStepDelay: () => number\n  /** Whatever the grid's cells are made of, so paging under a still pointer re-places the card. */\n  layout: () => unknown\n  /** Works out where the gesture's event belongs from the pointer's last position. */\n  applyPoint: (state: G, rect: DOMRect) => void\n  /** Called on every pointer move past the threshold, after the edge watch, with both rects. */\n  onEdges?: (state: G, rootRect: DOMRect | undefined) => void\n  /** Everything else a gesture leaves running, dropped on every path out of one. */\n  onRelease?: () => void\n  /**\n   * A pointer gesture let go inside the calendar. Returns true when the grid has answered it\n   * itself — a slot drawn out — and nothing is left to drop.\n   */\n  onLetGo?: (state: G) => boolean\n  /** A gesture that moved, committed: the grid reports the new times. */\n  onDrop: (state: G) => void\n  /** What a keyboard grab of this event starts, or null when it cannot be grabbed. */\n  grab: (item: E) => GestureInit<G> | null\n  /** Applies one arrow step to a grabbed event. Returns false when the step means nothing here. */\n  onGrabStep: (state: G, step: GrabStep, item: E) => boolean\n  step: (direction: -1 | 1) => void\n  announce: (message: string) => void\n}\n\nexport function useCalendarGesture<E extends CalendarEvent, G extends GestureBase>(\n  options: CalendarGestureOptions<E, G>,\n) {\n  const m = useMessages()\n  const gesture = ref<G | null>(null) as Ref<G | null>\n\n  /** True while a card is being held by the keyboard rather than dragged by a pointer. */\n  const grabbing = computed(() => isGrabbed(gesture.value))\n\n  const isRtl = () => isElementRtl(options.measureEl.value)\n\n  /**\n   * The echo of where the gestured event began, so the reader can see what they are moving it\n   * FROM. A press that has not travelled yet produces none, or a click would flash a second\n   * card over the first.\n   */\n  const ghostEvent = computed<E | null>(() => {\n    const state = gesture.value\n    if (!state?.moved) return null\n    const original = options.events().find((event) => event.id === state.id)\n    return original ? ({ ...original, ...state.origin, id: ghostIdOf(state.id) } as E) : null\n  })\n\n  /**\n   * A list with the gestured event moved to wherever it is now, plus its echo.\n   *\n   * The echo is listed whether or not it has a box to draw on, because this is what the id maps\n   * are built from and the template reads a card's event back out of them. An echo whose day\n   * the view has paged past simply produces no placement, as any event off show does.\n   */\n  function withPreview(events: readonly E[]): E[] {\n    const state = gesture.value\n    if (!state) return [...events]\n    const moving = events.map((event) =>\n      event.id === state.id ? ({ ...event, ...state.preview } as E) : event,\n    )\n    return ghostEvent.value ? [...moving, ghostEvent.value] : moving\n  }\n\n  /**\n   * The flag that keeps a drop from also reading as a click.\n   *\n   * A pointer that moved past the threshold ends on a `click` the browser fires anyway, and\n   * without this the card would be dropped AND opened. It is a plain variable rather than a\n   * ref: nothing renders from it, and a reactive one would re-render the grid at the end of\n   * every gesture for no visible change.\n   *\n   * TRAP — three writes, and each is load-bearing.\n   *\n   * `pointerup` SETS it, outside the calendar included, because `pointerup` fires before\n   * `click`: an abandoned drag would otherwise end by opening the very event it refused to move.\n   *\n   * `pointercancel` does NOT, and must never share a helper with the release that does: no click\n   * follows a cancel, so a `true` left behind there would swallow the next genuine one.\n   *\n   * Every press CLEARS it before any guard runs. The click that lowers it only reaches a card\n   * when it lands on one, and drawing out a new event ends on a CELL, so the flag would stay up\n   * — and a press that starts no gesture, which `creatable` without `editable` reaches every\n   * time, would never overwrite it. The reader clicks an event, nothing happens, they click\n   * again. Clearing at the press is what makes the flag unable to outlive its own interaction,\n   * and the order is the argument: the click it exists to swallow follows its own `pointerup`\n   * with no press in between.\n   */\n  let dragged = false\n\n  /** Closes the books on the previous gesture. Every press handler calls it first. */\n  function endLastGesture() {\n    dragged = false\n  }\n\n  /** Whether the gesture that just ended actually moved; asking lowers the flag. */\n  function consumeDrag() {\n    const was = dragged\n    dragged = false\n    return was\n  }\n\n  const edge = useEdgeStep(options.step, options.edgeStepDelay)\n\n  /** Which edge is counting down, as the attribute the stylesheet reads. */\n  const edgeCue = computed(() =>\n    edge.pending.value === -1 ? 'start' : edge.pending.value === 1 ? 'end' : undefined,\n  )\n\n  function release() {\n    edge.cancel()\n    options.onRelease?.()\n  }\n\n  /**\n   * Starts a gesture. Every entry point funnels through here, so the rules that make a gesture\n   * safe — one at a time, the origin captured once — are written once. The pointer itself is\n   * only taken hold of once the press travels, in `onPointermove`.\n   */\n  function start(init: GestureInit<G>, rtl = isRtl()) {\n    gesture.value = {\n      ...init,\n      preview: { ...init.origin },\n      lastX: init.originX,\n      lastY: init.originY,\n      moved: false,\n      outside: false,\n      rtl,\n    } as G\n  }\n\n  /**\n   * Takes hold of the pointer on the capture element, so the drag keeps following it past the\n   * calendar's edges.\n   *\n   * TRAP — called when the press crosses the drag threshold, NEVER at the press. The browser\n   * sends the `click` that follows a captured `pointerup` to the CAPTURE element, so a press\n   * captured at once reaches the scroller instead of the card or the cell under it: clicking an\n   * event would open nothing and clicking an empty slot would report nothing, on every calendar\n   * whose events can be moved or drawn. Neither jsdom nor a synthetic pointer event reproduces\n   * the retargeting (a synthetic pointer cannot be captured), so the unit suite pins WHEN the\n   * capture is asked for rather than where the click lands.\n   */\n  function capture(pointerId: number) {\n    // @fallback\n    /*\n     * Wrapped because a pointer event fired by a TEST refers to no real pointer,\n     * and the call then throws. Failing to capture merely means the drag stops at the edge of\n     * the capture element, which no test is checking.\n     */\n    try {\n      options.captureEl.value?.setPointerCapture(pointerId)\n    } catch {\n      /* a synthetic pointer: nothing to capture */\n    }\n  }\n\n  /** Re-reads the measured box and works the gesture out again, for a caller outside a handler. */\n  function reapply(state: G) {\n    const rect = options.measureEl.value?.getBoundingClientRect()\n    if (rect) options.applyPoint(state, rect)\n  }\n\n  function onPointermove(event: PointerEvent) {\n    const state = gesture.value\n    if (!state || state.pointerId !== event.pointerId) return\n\n    state.lastX = event.clientX\n    state.lastY = event.clientY\n\n    // Below the threshold nothing has happened yet. That is what keeps a click a click: the\n    // hand's tremor during a press would otherwise register as a one-pixel drag.\n    if (\n      !state.moved &&\n      Math.abs(event.clientX - state.originX) < DRAG_THRESHOLD &&\n      Math.abs(event.clientY - state.originY) < DRAG_THRESHOLD\n    ) {\n      return\n    }\n\n    if (!state.moved) capture(event.pointerId)\n    state.moved = true\n    // Each box is measured ONCE per move and handed to everything that reads it.\n    const rootRect = options.rootEl.value?.getBoundingClientRect()\n    const rect = options.measureEl.value?.getBoundingClientRect()\n\n    /*\n     * Outside is measured against the view's own box — never the cells' box, whose rect\n     * excludes the day names, the all-day band and the hour gutter — and the rect goes in RAW:\n     * containment has no reading direction, where `inlineStart` is the right edge in RTL.\n     *\n     * TRAP — neither the placement nor the edge watch below is gated on it, and neither may\n     * become so. The card must keep following the pointer while it is out, which is what makes\n     * coming back in seamless, and paging must keep running, pushing past the edge being how one\n     * crosses into the next period. Being outside decides what happens on RELEASE, nothing else.\n     */\n    state.outside = rootRect ? !pointWithin({ x: state.lastX, y: state.lastY }, rootRect) : false\n\n    if (!rect) return\n    options.applyPoint(state, rect)\n    edge.watchEdge(\n      inlineEdgeAt(\n        state.lastX,\n        gridGeometryOf(rect, options.columns(), state.rtl),\n        EDGE_BAND,\n        state.rtl,\n      ),\n    )\n    options.onEdges?.(state, rootRect)\n  }\n\n  function onPointerup(event: PointerEvent) {\n    const state = gesture.value\n    if (!state || state.pointerId !== event.pointerId) return\n    gesture.value = null\n    dragged = state.moved\n    release()\n\n    /*\n     * Let go with the pointer off the calendar and the gesture is abandoned whole. Nothing is\n     * announced: the pointer says nothing on a SUCCESSFUL drop either — `grabbed`, `dropped` and\n     * `reverted` belong to the keyboard grab, which has no pointer to show where the event went.\n     */\n    if (state.outside) return\n    if (options.onLetGo?.(state)) return\n    // A press that never travelled is an ordinary click, which the button's own click event is\n    // about to report. Writing anything here would move an event nobody dragged.\n    if (state.moved) options.onDrop(state)\n  }\n\n  /*\n   * The gesture was taken away — a system gesture, a context menu, the page starting to scroll.\n   * Nothing is written and nothing is announced: the card goes back to where the model still\n   * says it is.\n   */\n  function onPointercancel() {\n    gesture.value = null\n    release()\n  }\n\n  /*\n   * A press that leaves the capture element before it has travelled far enough to be captured.\n   * Its `pointerup` then lands outside and never reaches the bindings, so without this the\n   * gesture would outlive the press: a mouse keeps the same pointer id, and bringing it back over\n   * the calendar with the button up would pick the event up and carry it. A captured pointer\n   * never leaves, so a real drag is untouched.\n   */\n  function onPointerleave(event: PointerEvent) {\n    const state = gesture.value\n    if (!state || state.pointerId !== event.pointerId || state.moved) return\n    onPointercancel()\n  }\n\n  /*\n   * Paging swaps the cells out from under a live drag, and the dragged event's day is then off\n   * screen — the card would vanish until the next pointer move, which never comes if the hand is\n   * holding still against the edge. Re-applying the last position once the new cells are\n   * rendered is what keeps the card under the pointer across the boundary.\n   */\n  watch(\n    options.layout,\n    () => {\n      const state = gesture.value\n      if (state?.moved) reapply(state)\n    },\n    { flush: 'post' },\n  )\n\n  /**\n   * Hands the focus back to a card once it has landed somewhere else, which the re-render has\n   * just taken it from.\n   *\n   * TRAP — the card is found by WALKING the cards rather than by building an attribute\n   * selector. An id belongs to the consumer, so it may hold a quote or a backslash a selector\n   * would need escaped, and `CSS.escape` cannot do that escaping here: jsdom defines no `CSS`\n   * object at all, so the call threw on every keyboard grab, from inside a `nextTick` where\n   * nothing could catch it — an unhandled rejection, which fails the run while every assertion\n   * still passes. Comparing the attribute's own text sidesteps the question, `data-event-id`\n   * being written as exactly `String(event.id)`.\n   */\n  function refocusCard(id: CalendarEventId) {\n    void nextTick(() => {\n      const cards = options.measureEl.value?.querySelectorAll<HTMLElement>('.v-calendar-event')\n      Array.from(cards ?? [])\n        .find((card) => card.dataset.eventId === String(id))\n        ?.focus()\n    })\n  }\n\n  /** Puts the focus on a cell by its id, once the render that made it tabbable has run. */\n  function focusCell(id: string, deferred = false) {\n    const move = () => document.getElementById(id)?.focus()\n    if (deferred) void nextTick(move)\n    else move()\n  }\n\n  /** The event a card stands for, read back off the attribute the card publishes. */\n  const idOfCard = (card: HTMLElement) => cardIdOf(card, (id) => options.eventOf(id) !== undefined)\n\n  /**\n   * A card answers a different table from the grid it sits in — that is what a grab mode IS.\n   * Without it the grid would offer a gesture the pointer alone could reach (WCAG 2.1.1).\n   */\n  function onCardKeydown(event: KeyboardEvent, card: HTMLElement) {\n    const item = options.eventOf(idOfCard(card))\n    if (!item) return\n\n    const held = grabbing.value && gesture.value?.id === item.id\n    const state = held ? gesture.value! : null\n    const intent = calendarIntent(\n      event.key,\n      event.shiftKey,\n      held ? 'grabbed' : 'event',\n      options.slotMinutes(),\n      state?.rtl ?? isRtl(),\n    )\n    if (!intent) return\n\n    if (!state) {\n      // An event that cannot be moved keeps a button's ordinary behaviour: Space presses it,\n      // which the card's click handler reports.\n      const init = intent.kind === 'grab' ? options.grab(item) : null\n      if (!init) return\n      /*\n       * Space is ALSO how a button is pressed, on its release. Cancelling the keydown is what\n       * stops that press, so the keystroke that takes hold of the event does not open it too:\n       * without it every attempt to move something would fire the consumer's editor over it.\n       */\n      event.preventDefault()\n      start(init)\n      options.announce(m.value.calendar.grabbed)\n      return\n    }\n\n    event.preventDefault()\n\n    if (intent.kind === 'grabMove' || intent.kind === 'grabResize') {\n      if (!options.onGrabStep(state, intent, item)) return\n      state.moved = true\n      refocusCard(state.id)\n      return\n    }\n\n    if (intent.kind === 'activate') {\n      gesture.value = null\n      if (state.moved) options.onDrop(state)\n      options.announce(m.value.calendar.dropped)\n      refocusCard(state.id)\n      return\n    }\n\n    if (intent.kind === 'cancel') {\n      gesture.value = null\n      options.announce(m.value.calendar.reverted)\n      refocusCard(state.id)\n    }\n  }\n\n  /**\n   * The five things every card is told about the gesture, bound with `v-bind` so the two grids\n   * cannot describe the same state in two different ways.\n   */\n  function cardState(id: CalendarEventId) {\n    const state = gesture.value\n    const mine = state !== null && state.id === id\n    return {\n      /*\n       * TRAP — only once the press has travelled. A dragged card takes no pointer events, so\n       * marked at the press it lets the release land on the cell beneath it: the click then goes\n       * to that cell, and clicking an event reports an empty slot instead of opening it.\n       */\n      dragging: mine && state.pointerId !== null && state.moved,\n      rejected: mine && state.outside,\n      grabbed: mine && state.pointerId === null,\n      hintId: options.editable() && !isGhostId(id) ? options.hintId() : undefined,\n      ghostOf: isGhostId(id) ? originalIdOf(id) : undefined,\n    }\n  }\n\n  return {\n    gesture,\n    grabbing,\n    ghostEvent,\n    withPreview,\n    edgeCue,\n    isRtl,\n    start,\n    reapply,\n    release,\n    endLastGesture,\n    consumeDrag,\n    onPointermove,\n    onPointerup,\n    onPointercancel,\n    onPointerleave,\n    onCardKeydown,\n    refocusCard,\n    focusCell,\n    idOfCard,\n    cardState,\n  }\n}\n"],"mappings":"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"}

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

@@ -39,11 +39,15 @@ export type CalendarIntent =
     kind: 'period';
     delta: -1 | 1;
 }
-/** Take up what is focused: create here, open a card, or commit a move under way. */
+/** Take up what is focused: report an empty cell, or commit a move under way. */
  | {
     kind: 'activate';
 }
-/** Back out: leave a card for its cell, or abandon a move and put the event back. */
+/** Take hold of a card, so the arrows move it. */
+ | {
+    kind: 'grab';
+}
+/** Abandon a move under way and put the event back. */
  | {
     kind: 'cancel';
 }
@@ -62,7 +66,9 @@ export type CalendarIntent =
  * Where the focus is when the key arrives, which is what decides the answer:
  *
  * - `cell` — an empty part of the grid. The arrows travel, Enter creates.
- * - `event` — a card, at rest. Enter takes hold of it, Escape goes back to the grid.
+ * - `event` — a card, at rest. Space takes hold of it; every other key is the browser's,
+ *   Enter included, which presses the card as a button and so opens the event. Enter is the
+ *   one a reader tries first on a button, and `event-activate` has no other keyboard route.
  * - `grabbed` — a card being moved. The arrows now move the EVENT, Enter commits, Escape
  *   puts it back where it was.
  */

package/dist/components/VCalendar/keyboard.js

@@ -1,3 +1,4 @@
+//#region src/components/VCalendar/keyboard.ts
 function e(e, t, n, r, i) {
 	let a = r > 0 ? r : 1, o = i ? -1 : 1;
 	if (n === "grabbed") switch (e) {
@@ -32,12 +33,7 @@ function e(e, t, n, r, i) {
 		case "Escape": return { kind: "cancel" };
 		default: return;
 	}
-	if (n === "event") switch (e) {
-		case "Enter":
-		case " ": return { kind: "activate" };
-		case "Escape": return { kind: "cancel" };
-		default: return;
-	}
+	if (n === "event") return e === " " ? { kind: "grab" } : void 0;
 	switch (e) {
 		case "ArrowLeft": return {
 			kind: "moveFocus",