vectis-ui 0.8.0 → 0.9.0

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

@@ -1,11 +1,11 @@
 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";
+import { lastDayOf as a, monthWeeks as o } from "./layout.js";
+import { Fragment as s, computed as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, defineComponent as p, normalizeClass as m, normalizeStyle as h, openBlock as g, ref as _, renderList as v, toDisplayString as y } from "vue";
 //#region src/components/VCalendar/VCalendarYear.vue?vue&type=script&setup=true&lang.ts
-var v = ["aria-label"], y = ["onClick"], b = {
+var b = ["aria-label"], x = ["disabled", "onClick"], S = {
 	key: 0,
 	class: "v-calendar-year-count"
-}, x = ["data-adjacent", "data-busy"], S = /*@__PURE__*/ f({
+}, C = ["data-adjacent", "data-busy"], w = /*@__PURE__*/ p({
 	__name: "VCalendarYear",
 	props: {
 		months: {},
@@ -13,28 +13,29 @@ var v = ["aria-label"], y = ["onClick"], b = {
 		locale: {},
 		weekdays: {},
 		today: {},
-		label: {}
+		label: {},
+		disabled: { type: Boolean }
 	},
 	emits: ["month-activate"],
-	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) {
+	setup(p, { expose: w, emit: T }) {
+		let E = p, D = T, O = c(() => {
+			let r = /* @__PURE__ */ new Set(), o = E.months[0], s = E.months.at(-1);
+			if (!o || !s) return r;
+			let c = e(t(s, 1), -1);
+			for (let t of E.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);
+				let s = n(t.start, o) > 0 ? t.start : o, l = a(t), u = n(l, c) < 0 ? l : c;
+				for (let t = s; n(t, u) <= 0; t = e(t, 1)) r.add(t);
 			}
 			return r;
-		}), E = s(() => C.months.map((e) => a(e, C.weekdays))), D = s(() => {
+		}), k = c(() => E.months.map((e) => o(e, E.weekdays))), A = c(() => {
 			let e = /* @__PURE__ */ new Map();
-			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" }));
+			for (let t of k.value) for (let n of t) for (let t of n) e.has(t.iso) || e.set(t.iso, r(t.iso, E.locale, { day: "numeric" }));
 			return e;
-		}), 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) => {
+		}), j = c(() => {
+			let e = O.value, t = A.value;
+			return E.months.map((n, i) => {
+				let a = 0, o = (k.value[i] ?? []).map((n) => n.map((n) => {
 					let r = n.adjacent === null && e.has(n.iso);
 					return r && a++, {
 						iso: n.iso,
@@ -45,36 +46,42 @@ var v = ["aria-label"], y = ["onClick"], b = {
 				}));
 				return {
 					month: n,
-					name: r(n, C.locale, { month: "long" }),
+					name: r(n, E.locale, { month: "long" }),
 					weeks: o,
 					busyCount: a
 				};
 			});
-		});
-		return (e, t) => (h(), l("div", {
+		}), M = _(null);
+		return w({
+			focus: (e) => M.value?.querySelector(".v-calendar-year-title")?.focus(e),
+			scrollToMinutes: () => {}
+		}), (e, t) => (g(), u("div", {
+			ref_key: "rootEl",
+			ref: M,
 			class: "v-calendar-year",
 			role: "group",
-			"aria-label": f.label
-		}, [(h(!0), l(o, null, g(O.value, (e) => (h(), l("section", {
+			"aria-label": p.label
+		}, [(g(!0), u(s, null, v(j.value, (e) => (g(), u("section", {
 			key: e.month,
 			class: "v-calendar-year-month"
-		}, [u("button", {
+		}, [d("button", {
 			type: "button",
 			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", {
+			disabled: p.disabled,
+			onClick: (t) => D("month-activate", e.month)
+		}, [f(y(e.name) + " ", 1), e.busyCount > 0 ? (g(), u("span", S, y(e.busyCount), 1)) : l("", !0)], 8, x), d("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", {
+			style: h({ "--calendar-columns": String(p.weekdays.length) })
+		}, [(g(!0), u(s, null, v(e.weeks, (e, t) => (g(), u(s, { key: t }, [(g(!0), u(s, null, v(e, (e) => (g(), u("span", {
 			key: e.iso,
-			class: p(["v-calendar-year-day", { "v-calendar-today": e.iso === f.today }]),
+			class: m(["v-calendar-year-day", { "v-calendar-today": e.iso === p.today }]),
 			"data-adjacent": e.adjacent ?? void 0,
 			"data-busy": e.busy ? "" : void 0
-		}, _(e.number), 11, x))), 128))], 64))), 128))], 4)]))), 128))], 8, v));
+		}, y(e.number), 11, C))), 128))], 64))), 128))], 4)]))), 128))], 8, b));
 	}
 });
 //#endregion
-export { S as default };
+export { w 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 * 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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"}
+{"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, ref } from 'vue'\n\nimport { addDays, addMonths, compareISO, formatDateDisplay, parseISO } from '../../utils/date'\n\nimport { lastDayOf, 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  /** Turns the twelve month headings into disabled buttons, out of the tab order. */\n  disabled?: boolean\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 end = lastDayOf(event)\n    const to = compareISO(end, last) < 0 ? 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\nconst rootEl = ref<HTMLElement | null>(null)\n\ndefineExpose({\n  /** Brings the focus onto the first month, the view's first control. */\n  focus: (options?: FocusOptions) =>\n    rootEl.value?.querySelector<HTMLButtonElement>('.v-calendar-year-title')?.focus(options),\n  /** Nothing to scroll to in a year view. */\n  scrollToMinutes: () => {},\n})\n</script>\n\n<template>\n  <div ref=\"rootEl\" 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        :disabled=\"disabled\"\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(\n      auto-fill,\n      minmax(var(--vectis-control-size-calendar-year-month), 1fr)\n    );\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/color.d.ts

@@ -3,7 +3,7 @@ import { CalendarEventId } from './types.js';
  * A stable hue, 0 to 359, for an event that carries no colour of its own.
  *
  * The hash is the usual djb2 walk over the id written out as text, so a numeric id and the
- * string of the same digits agree — which matters because an id makes the round trip
+ * string of the same digits agree. This matters because an id makes the round trip
  * through a consumer's JSON and may well come back as the other one.
  */
 export declare function hueOf(id: CalendarEventId): number;

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

@@ -1 +1 @@
-{"version":3,"file":"color.js","names":[],"sources":["../../../src/components/VCalendar/color.ts"],"sourcesContent":["// @core\n/**\n * The colour an event is drawn in when it names none.\n *\n * The rule is that the same event is always the same colour, whatever order the list\n * arrives in and whatever a filter has just removed from it — so the colour is derived\n * from the event's id and from nothing else. Deriving it from the position in the array\n * would repaint the whole calendar every time one event was added at the top.\n *\n * Only the HUE is derived. The lightness and the chroma that go with it live in the token\n * layer, one pair per theme, which is what keeps the title's contrast against its card a\n * fixed quantity rather than something that varies around the colour wheel: in OKLCH the\n * L axis is perceptual, so two fixed lightnesses are the same perceived distance apart at\n * every hue. See the `color.event-*` tokens in `tokens/semantic.ts`.\n *\n * Pure, hence deterministic, hence the server and the browser derive the same hue and\n * hydration has nothing to disagree about.\n */\nimport type { CalendarEventId } from './types'\n\n/**\n * Knuth's multiplicative constant — the odd integer nearest to 2³² divided by the golden\n * ratio.\n *\n * TRAP — it is not decoration, and removing it makes the palette collapse without any\n * error to show for it. A plain string hash of `\"1\"`, `\"2\"`, `\"3\"` produces three\n * CONSECUTIVE numbers, so taking them modulo 360 directly would give three hues one degree\n * apart: a calendar whose events are numbered in order would come out entirely one colour.\n * Multiplying first scatters neighbouring hashes across the whole circle, which is exactly\n * what the constant is for.\n */\nconst GOLDEN = 2654435761\n\n/** How many degrees the colour wheel has. */\nconst HUES = 360\n\n/**\n * A stable hue, 0 to 359, for an event that carries no colour of its own.\n *\n * The hash is the usual djb2 walk over the id written out as text, so a numeric id and the\n * string of the same digits agree — which matters because an id makes the round trip\n * through a consumer's JSON and may well come back as the other one.\n */\nexport function hueOf(id: CalendarEventId): number {\n  const text = String(id)\n  let hash = 5381\n  for (let i = 0; i < text.length; i++) {\n    // `| 0` keeps the running value a 32-bit integer, so the result cannot depend on how\n    // far a double drifts once the multiplications exceed the exactly representable range.\n    hash = ((hash << 5) + hash + text.charCodeAt(i)) | 0\n  }\n  return Math.abs(Math.imul(hash, GOLDEN) >>> 0) % HUES\n}\n"],"mappings":"AA2CA,SAAgB,EAAM,GAA6B;CACjD,IAAM,IAAO,OAAO,CAAE,GAClB,IAAO;CACX,KAAK,IAAI,IAAI,GAAG,IAAI,EAAK,QAAQ,KAG/B,KAAS,KAAQ,KAAK,IAAO,EAAK,WAAW,CAAC,IAAK;CAErD,OAAO,KAAK,IAAI,KAAK,KAAK,GAAM,UAAM,MAAM,CAAC,IAAI;AACnD"}
+{"version":3,"file":"color.js","names":[],"sources":["../../../src/components/VCalendar/color.ts"],"sourcesContent":["// @core\n/**\n * The colour an event is drawn in when it names none.\n *\n * The rule is that the same event is always the same colour, whatever order the list\n * arrives in and whatever a filter has just removed from it — so the colour is derived\n * from the event's id and from nothing else. Deriving it from the position in the array\n * would repaint the whole calendar every time one event was added at the top.\n *\n * Only the HUE is derived. The lightness and the chroma that go with it live in the token\n * layer, one pair per theme, which is what keeps the title's contrast against its card a\n * fixed quantity rather than something that varies around the colour wheel: in OKLCH the\n * L axis is perceptual, so two fixed lightnesses are the same perceived distance apart at\n * every hue. See the `color.event-*` tokens in `tokens/semantic.ts`.\n *\n * Pure, hence deterministic, hence the server and the browser derive the same hue and\n * hydration has nothing to disagree about.\n */\nimport type { CalendarEventId } from './types'\n\n/**\n * Knuth's multiplicative constant — the odd integer nearest to 2³² divided by the golden\n * ratio.\n *\n * TRAP — it is not decoration, and removing it makes the palette collapse without any\n * error to show for it. A plain string hash of `\"1\"`, `\"2\"`, `\"3\"` produces three\n * CONSECUTIVE numbers, so taking them modulo 360 directly would give three hues one degree\n * apart: a calendar whose events are numbered in order would come out entirely one colour.\n * Multiplying first scatters neighbouring hashes across the whole circle, which is exactly\n * what the constant is for.\n */\nconst GOLDEN = 2654435761\n\n/** How many degrees the colour wheel has. */\nconst HUES = 360\n\n/**\n * A stable hue, 0 to 359, for an event that carries no colour of its own.\n *\n * The hash is the usual djb2 walk over the id written out as text, so a numeric id and the\n * string of the same digits agree. This matters because an id makes the round trip\n * through a consumer's JSON and may well come back as the other one.\n */\nexport function hueOf(id: CalendarEventId): number {\n  const text = String(id)\n  let hash = 5381\n  for (let i = 0; i < text.length; i++) {\n    // `| 0` keeps the running value a 32-bit integer, so the result cannot depend on how\n    // far a double drifts once the multiplications exceed the exactly representable range.\n    hash = ((hash << 5) + hash + text.charCodeAt(i)) | 0\n  }\n  return Math.abs(Math.imul(hash, GOLDEN) >>> 0) % HUES\n}\n"],"mappings":"AA2CA,SAAgB,EAAM,GAA6B;CACjD,IAAM,IAAO,OAAO,CAAE,GAClB,IAAO;CACX,KAAK,IAAI,IAAI,GAAG,IAAI,EAAK,QAAQ,KAG/B,KAAS,KAAQ,KAAK,IAAO,EAAK,WAAW,CAAC,IAAK;CAErD,OAAO,KAAK,IAAI,KAAK,KAAK,GAAM,UAAM,MAAM,CAAC,IAAI;AACnD"}

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

@@ -5,13 +5,13 @@ import { Ref } from 'vue';
  * Long enough that aiming at the edge column never pages by accident, short enough that
  * deliberately holding there does not feel broken. It is a matter of feel rather than of
  * correctness, so it is tuned by eye and exposed as `edgeStepDelay` for anyone who disagrees
- * — which is also why no test pins the number itself.
+ *, which is also why no test pins the number itself.
  */
 export declare const EDGE_STEP_DELAY = 800;
 /**
  * How wide the edge zone is, in pixels.
  *
- * TRAP — this number is the twin of `--vectis-control-size-calendar-edge`, the width of the
+ * TRAP: this number is the twin of `--vectis-control-size-calendar-edge`, the width of the
  * band the stylesheet lights up to show that paging is coming. They describe the same strip:
  * moving one without the other leaves the calendar paging from somewhere other than where it
  * said it would, with nothing anywhere to point at it. The same arrangement as
@@ -33,6 +33,6 @@ export interface EdgeStep {
 }
 /**
  * `delay` is a getter rather than a number so a consumer can turn paging off mid-drag by
- * binding it to zero — the reactive-prop-as-switch shape VCarousel's `autoplay` uses.
+ * binding it to zero: the reactive-prop-as-switch shape VCarousel's `autoplay` uses.
  */
 export declare function useEdgeStep(onStep: (direction: EdgeDirection) => void, delay: () => number): EdgeStep;

package/dist/components/VCalendar/edgeStep.js

@@ -12,6 +12,11 @@ function r(r, i) {
 		if (t <= 0) return;
 		o.value = e;
 		let n = () => {
+			let t = i();
+			if (t <= 0) {
+				o.value = null;
+				return;
+			}
 			r(e), a.start(n, t);
 		};
 		a.start(n, t);

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

@@ -1 +1 @@
-{"version":3,"file":"edgeStep.js","names":[],"sources":["../../../src/components/VCalendar/edgeStep.ts"],"sourcesContent":["// @core\n/**\n * Holding a dragged event against the side of the calendar to turn the page.\n *\n * Without it, moving a meeting to next week means dropping it, navigating, and picking it up\n * again — the drag can only ever reach what is already on screen. With it, resting against an\n * edge shows the previous or next period and the event carries on travelling.\n *\n * WHY IT WAITS. Paging the instant the pointer touched the edge would make the last day of the\n * week unaimable: you would have to approach it from above and stop dead, and the smallest\n * overshoot would throw you into the following week. The delay is what separates \"I am aiming\n * at the edge column\" from \"I want to go further\", and it is the only thing that does.\n *\n * It sits in VCalendar's own folder rather than in `composables/` because VCalendar owns the\n * contract and both of its consumers are inside this component — the same reasoning as\n * `VCombobox/infiniteScroll.ts`, which is likewise a Vue-using module living beside the thing\n * it belongs to.\n */\nimport { readonly, ref, type Ref } from 'vue'\n\nimport { useTimer } from '../../composables/useTimer'\n\n/**\n * How long a dragged event rests against an edge before the calendar pages, in milliseconds.\n *\n * Long enough that aiming at the edge column never pages by accident, short enough that\n * deliberately holding there does not feel broken. It is a matter of feel rather than of\n * correctness, so it is tuned by eye and exposed as `edgeStepDelay` for anyone who disagrees\n * — which is also why no test pins the number itself.\n */\nexport const EDGE_STEP_DELAY = 800\n\n/**\n * How wide the edge zone is, in pixels.\n *\n * TRAP — this number is the twin of `--vectis-control-size-calendar-edge`, the width of the\n * band the stylesheet lights up to show that paging is coming. They describe the same strip:\n * moving one without the other leaves the calendar paging from somewhere other than where it\n * said it would, with nothing anywhere to point at it. The same arrangement as\n * `DIAL_INNER_THRESHOLD` in `utils/time.ts`, and it carries the same warning at both ends.\n */\nexport const EDGE_BAND = 48\n\n/** Which way the calendar is being asked to go: back a period, or on to the next. */\nexport type EdgeDirection = -1 | 1\n\nexport interface EdgeStep {\n  /**\n   * Told on every pointer move which edge the drag is now against, or nothing when it is\n   * back in the middle.\n   */\n  watchEdge(edge: EdgeDirection | null): void\n  /** Drops whatever is armed, without stepping. */\n  cancel(): void\n  /** The edge currently counting down, for the stylesheet to show. */\n  pending: Readonly<Ref<EdgeDirection | null>>\n}\n\n/**\n * `delay` is a getter rather than a number so a consumer can turn paging off mid-drag by\n * binding it to zero — the reactive-prop-as-switch shape VCarousel's `autoplay` uses.\n */\nexport function useEdgeStep(\n  onStep: (direction: EdgeDirection) => void,\n  delay: () => number,\n): EdgeStep {\n  const timer = useTimer()\n  const pending = ref<EdgeDirection | null>(null)\n\n  function cancel() {\n    timer.cancel()\n    pending.value = null\n  }\n\n  function watchEdge(edge: EdgeDirection | null) {\n    // Staying on the SAME edge must leave the armed timer alone. Re-arming on every move\n    // would mean a pointer trembling by a pixel never reached the delay at all, and the\n    // calendar would simply never page for anyone with an unsteady hand.\n    if (edge === pending.value) return\n\n    cancel()\n    if (edge === null) return\n\n    /*\n     * TRAP — the guard is what stops this recursing, not a convenience. `useTimer` runs a\n     * delay of zero or less SYNCHRONOUSLY by design, and the callback below re-arms itself,\n     * so arming at zero would call it again and again until the stack gave out. Refusing to\n     * arm is also how a consumer switches paging off, so the two are one line.\n     */\n    const wait = delay()\n    if (wait <= 0) return\n\n    pending.value = edge\n\n    const fire = () => {\n      onStep(edge)\n      // Re-armed, so holding against the edge keeps paging rather than stopping after one.\n      timer.start(fire, wait)\n    }\n    timer.start(fire, wait)\n  }\n\n  return { watchEdge, cancel, pending: readonly(pending) }\n}\n"],"mappings":";;;AA8DA,SAAgB,EACd,GACA,GACU;CACV,IAAM,IAAQ,EAAS,GACjB,IAAU,EAA0B,IAAI;CAE9C,SAAS,IAAS;EAEhB,AADA,EAAM,OAAO,GACb,EAAQ,QAAQ;CAClB;CAEA,SAAS,EAAU,GAA4B;EAO7C,IAHI,MAAS,EAAQ,UAErB,EAAO,GACH,MAAS,OAAM;EAQnB,IAAM,IAAO,EAAM;EACnB,IAAI,KAAQ,GAAG;EAEf,EAAQ,QAAQ;EAEhB,IAAM,UAAa;GAGjB,AAFA,EAAO,CAAI,GAEX,EAAM,MAAM,GAAM,CAAI;EACxB;EACA,EAAM,MAAM,GAAM,CAAI;CACxB;CAEA,OAAO;EAAE;EAAW;EAAQ,SAAS,EAAS,CAAO;CAAE;AACzD"}
+{"version":3,"file":"edgeStep.js","names":[],"sources":["../../../src/components/VCalendar/edgeStep.ts"],"sourcesContent":["// @core\n/**\n * Holding a dragged event against the side of the calendar to turn the page.\n *\n * Without it, moving a meeting to next week means dropping it, navigating, and picking it up\n * again — the drag can only ever reach what is already on screen. With it, resting against an\n * edge shows the previous or next period and the event carries on travelling.\n *\n * WHY IT WAITS. Paging the instant the pointer touched the edge would make the last day of the\n * week unaimable: you would have to approach it from above and stop dead, and the smallest\n * overshoot would throw you into the following week. The delay is what separates \"I am aiming\n * at the edge column\" from \"I want to go further\", and it is the only thing that does.\n *\n * It sits in VCalendar's own folder rather than in `composables/` because VCalendar owns the\n * contract and both of its consumers are inside this component — the same reasoning as\n * `VCombobox/infiniteScroll.ts`, which is likewise a Vue-using module living beside the thing\n * it belongs to.\n */\nimport { readonly, ref, type Ref } from 'vue'\n\nimport { useTimer } from '../../composables/useTimer'\n\n/**\n * How long a dragged event rests against an edge before the calendar pages, in milliseconds.\n *\n * Long enough that aiming at the edge column never pages by accident, short enough that\n * deliberately holding there does not feel broken. It is a matter of feel rather than of\n * correctness, so it is tuned by eye and exposed as `edgeStepDelay` for anyone who disagrees\n *, which is also why no test pins the number itself.\n */\nexport const EDGE_STEP_DELAY = 800\n\n/**\n * How wide the edge zone is, in pixels.\n *\n * TRAP: this number is the twin of `--vectis-control-size-calendar-edge`, the width of the\n * band the stylesheet lights up to show that paging is coming. They describe the same strip:\n * moving one without the other leaves the calendar paging from somewhere other than where it\n * said it would, with nothing anywhere to point at it. The same arrangement as\n * `DIAL_INNER_THRESHOLD` in `utils/time.ts`, and it carries the same warning at both ends.\n */\nexport const EDGE_BAND = 48\n\n/** Which way the calendar is being asked to go: back a period, or on to the next. */\nexport type EdgeDirection = -1 | 1\n\nexport interface EdgeStep {\n  /**\n   * Told on every pointer move which edge the drag is now against, or nothing when it is\n   * back in the middle.\n   */\n  watchEdge(edge: EdgeDirection | null): void\n  /** Drops whatever is armed, without stepping. */\n  cancel(): void\n  /** The edge currently counting down, for the stylesheet to show. */\n  pending: Readonly<Ref<EdgeDirection | null>>\n}\n\n/**\n * `delay` is a getter rather than a number so a consumer can turn paging off mid-drag by\n * binding it to zero: the reactive-prop-as-switch shape VCarousel's `autoplay` uses.\n */\nexport function useEdgeStep(\n  onStep: (direction: EdgeDirection) => void,\n  delay: () => number,\n): EdgeStep {\n  const timer = useTimer()\n  const pending = ref<EdgeDirection | null>(null)\n\n  function cancel() {\n    timer.cancel()\n    pending.value = null\n  }\n\n  function watchEdge(edge: EdgeDirection | null) {\n    // Staying on the SAME edge must leave the armed timer alone. Re-arming on every move\n    // would mean a pointer trembling by a pixel never reached the delay at all, and the\n    // calendar would simply never page for anyone with an unsteady hand.\n    if (edge === pending.value) return\n\n    cancel()\n    if (edge === null) return\n\n    /*\n     * TRAP — the guard is what stops this recursing, not a convenience. `useTimer` runs a\n     * delay of zero or less SYNCHRONOUSLY by design, and the callback below re-arms itself,\n     * so arming at zero would call it again and again until the stack gave out. Refusing to\n     * arm is also how a consumer switches paging off, so the two are one line.\n     */\n    const wait = delay()\n    if (wait <= 0) return\n\n    pending.value = edge\n\n    const fire = () => {\n      // The delay is asked again on every step: bound to zero while the drag is held against\n      // the edge, paging stops before the next page rather than after it.\n      const next = delay()\n      if (next <= 0) {\n        pending.value = null\n        return\n      }\n      onStep(edge)\n      // Re-armed, so holding against the edge keeps paging rather than stopping after one.\n      timer.start(fire, next)\n    }\n    timer.start(fire, wait)\n  }\n\n  return { watchEdge, cancel, pending: readonly(pending) }\n}\n"],"mappings":";;;AA8DA,SAAgB,EACd,GACA,GACU;CACV,IAAM,IAAQ,EAAS,GACjB,IAAU,EAA0B,IAAI;CAE9C,SAAS,IAAS;EAEhB,AADA,EAAM,OAAO,GACb,EAAQ,QAAQ;CAClB;CAEA,SAAS,EAAU,GAA4B;EAO7C,IAHI,MAAS,EAAQ,UAErB,EAAO,GACH,MAAS,OAAM;EAQnB,IAAM,IAAO,EAAM;EACnB,IAAI,KAAQ,GAAG;EAEf,EAAQ,QAAQ;EAEhB,IAAM,UAAa;GAGjB,IAAM,IAAO,EAAM;GACnB,IAAI,KAAQ,GAAG;IACb,EAAQ,QAAQ;IAChB;GACF;GAGA,AAFA,EAAO,CAAI,GAEX,EAAM,MAAM,GAAM,CAAI;EACxB;EACA,EAAM,MAAM,GAAM,CAAI;CACxB;CAEA,OAAO;EAAE;EAAW;EAAQ,SAAS,EAAS,CAAO;CAAE;AACzD"}

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

@@ -19,7 +19,7 @@ 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
+ * 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.
  */
@@ -28,7 +28,7 @@ export declare function cardIdOf(card: HTMLElement, has: (id: CalendarEventId) =
  * 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
+ * right-to-left page. This is also why containment never goes through this, see
  * `pointWithin`.
  */
 export declare function gridGeometryOf(rect: DOMRect, columns: number, rtl: boolean): GridGeometry;
@@ -47,19 +47,19 @@ export interface GestureBase {
     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.
+     * Where the pointer last was. Two things move the calendar UNDER a still pointer: paging at
+     * an edge, and auto-scrolling. 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
+     * 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,
+     * 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;
@@ -116,7 +116,7 @@ export interface CalendarGestureOptions<E extends CalendarEvent, G extends Gestu
     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.
+     * itself, such as 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. */
@@ -142,11 +142,12 @@ export declare function useCalendarGesture<E extends CalendarEvent, G extends Ge
     consumeDrag: () => boolean;
     onPointermove: (event: PointerEvent) => void;
     onPointerup: (event: PointerEvent) => void;
-    onPointercancel: () => void;
+    onPointercancel: (event: PointerEvent) => void;
     onPointerleave: (event: PointerEvent) => void;
+    onFocusout: (event: FocusEvent) => void;
     onCardKeydown: (event: KeyboardEvent, card: HTMLElement) => void;
     refocusCard: (id: CalendarEventId) => void;
-    focusCell: (id: string, deferred?: boolean) => void;
+    focusCell: (id: string, deferred?: boolean, focusOptions?: FocusOptions) => void;
     idOfCard: (card: HTMLElement) => string | number;
     cardState: (id: CalendarEventId) => {
         dragging: boolean;

package/dist/components/VCalendar/gesture.js

@@ -42,17 +42,27 @@ function _(u) {
 	}
 	let C = !1;
 	function w() {
-		C = !1;
+		C = !1, y.value && T();
 	}
 	function T() {
+		let e = v.value;
+		if (e) return v.value = null, u.announce(_.value.calendar.reverted), e;
+	}
+	function E(e) {
+		let t = v.value, n = e.relatedTarget;
+		if (!y.value || !t || !n) return;
+		let r = n.closest(".v-calendar-event");
+		r && r.dataset.eventId === String(t.id) || T();
+	}
+	function D() {
 		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?.();
+	let O = n(u.step, u.edgeStepDelay), k = o(() => O.pending.value === -1 ? "start" : O.pending.value === 1 ? "end" : void 0);
+	function A() {
+		O.cancel(), u.onRelease?.();
 	}
-	function k(e, t = b()) {
+	function j(e, t = b()) {
 		v.value = {
 			...e,
 			preview: { ...e.origin },
@@ -63,75 +73,79 @@ function _(u) {
 			rtl: t
 		};
 	}
-	function A(e) {
+	function M(e) {
 		try {
 			u.captureEl.value?.setPointerCapture(e);
 		} catch {}
 	}
-	function j(e) {
+	function N(e) {
 		let t = u.measureEl.value?.getBoundingClientRect();
 		t && u.applyPoint(e, t);
 	}
-	function M(e) {
+	function P(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;
+		t.moved || M(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));
+		}, n) : !1, a && (u.applyPoint(t, a), O.watchEdge(r(t.lastX, h(a, u.columns(), t.rtl), 48, t.rtl)), u.onEdges?.(t, n));
 	}
-	function N(e) {
+	function F(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)));
+		!t || t.pointerId !== e.pointerId || (v.value = null, C = t.moved, A(), !t.outside && (u.onLetGo?.(t) || t.moved && u.onDrop(t)));
 	}
-	function P() {
-		v.value = null, O();
+	function I(e) {
+		v.value?.pointerId === e.pointerId && L();
 	}
-	function F(e) {
+	function L() {
+		v.value = null, A();
+	}
+	function R(e) {
 		let t = v.value;
-		!t || t.pointerId !== e.pointerId || t.moved || P();
+		!t || t.pointerId !== e.pointerId || t.moved || L();
 	}
 	l(u.layout, () => {
 		let e = v.value;
-		e?.moved && j(e);
+		e?.moved && N(e);
 	}, { flush: "post" });
-	function I(e) {
+	function z(e) {
 		s(() => {
-			let t = u.measureEl.value?.querySelectorAll(".v-calendar-event");
+			let t = u.rootEl.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();
+	function B(e, t = !1, n) {
+		let r = () => document.getElementById(e)?.focus(n);
+		t ? s(r) : r();
 	}
-	let R = (e) => m(e, (e) => u.eventOf(e) !== void 0);
-	function z(e, t) {
-		let n = u.eventOf(R(t));
+	let V = (e) => m(e, (e) => u.eventOf(e) !== void 0);
+	function H(e, t) {
+		C = !1;
+		let n = u.eventOf(V(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());
+		let r = y.value && v.value?.id === n.id, i = r ? v.value : null, o = a(e, 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);
+				e.preventDefault(), j(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);
+				i.moved = !0, z(i.id);
 				return;
 			}
 			if (o.kind === "activate") {
-				v.value = null, i.moved && u.onDrop(i), u.announce(_.value.calendar.dropped), I(i.id);
+				v.value = null, i.moved && u.onDrop(i), u.announce(_.value.calendar.dropped), z(i.id);
 				return;
 			}
-			o.kind === "cancel" && (v.value = null, u.announce(_.value.calendar.reverted), I(i.id));
+			o.kind === "cancel" && (T(), z(i.id));
 		}
 	}
-	function B(e) {
+	function U(e) {
 		let t = v.value, n = t !== null && t.id === e;
 		return {
 			dragging: n && t.pointerId !== null && t.moved,
@@ -146,22 +160,23 @@ function _(u) {
 		grabbing: y,
 		ghostEvent: x,
 		withPreview: S,
-		edgeCue: D,
+		edgeCue: k,
 		isRtl: b,
-		start: k,
-		reapply: j,
-		release: O,
+		start: j,
+		reapply: N,
+		release: A,
 		endLastGesture: w,
-		consumeDrag: T,
-		onPointermove: M,
-		onPointerup: N,
-		onPointercancel: P,
-		onPointerleave: F,
-		onCardKeydown: z,
-		refocusCard: I,
-		focusCell: L,
-		idOfCard: R,
-		cardState: B
+		consumeDrag: D,
+		onPointermove: P,
+		onPointerup: F,
+		onPointercancel: I,
+		onPointerleave: R,
+		onFocusout: E,
+		onCardKeydown: H,
+		refocusCard: z,
+		focusCell: B,
+		idOfCard: V,
+		cardState: U
 	};
 }
 //#endregion