vectis-ui 0.10.0 → 0.10.2

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

@@ -1 +1 @@
-{"version":3,"file":"VDatePicker.js","names":[],"sources":["../../../src/components/VDatePicker/VDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @keyboard @core\n/**\n * A calendar shown directly in the page, as a grid of days, with a month view and a\n * year view behind it. It holds ALL the date, view and keyboard logic of the design\n * system; VDateInput does no more than dress it in a text field and a popover.\n *\n * The platform offers no accessible date grid to build on — `<input type=\"date\">`\n * can be neither styled nor composed — so the JavaScript here implements the ARIA\n * \"grid\" pattern by hand: a single cell in the tab order at a time, arrow and\n * page keys to move between dates, and selection of one date, a range or a list.\n * None of that can be expressed in HTML and CSS alone.\n *\n * Every date is handled in local time as an ISO `YYYY-MM-DD` string (see\n * `utils/date`), which is what keeps the server and the browser in agreement.\n */\n\nimport { computed, inject, nextTick, onMounted, ref, useId, watch, watchEffect } from 'vue'\nimport type { Ref } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { arrow_drop_down as arrowDropDownIcon } from '../VIcon/icons/arrow_drop_down'\nimport { arrow_drop_up as arrowDropUpIcon } from '../VIcon/icons/arrow_drop_up'\nimport { chevron_left as chevronLeftIcon } from '../VIcon/icons/chevron_left'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport {\n  addDays,\n  addMonths,\n  buildMonthGrid,\n  clampISO,\n  compareISO,\n  daysInMonth,\n  firstDayOfWeekFor,\n  formatISO,\n  isDateAllowed,\n  isoOf,\n  isSameISO,\n  isValidISO,\n  parseISO,\n  weekdayNames,\n} from '../../utils/date'\nimport { monthName, monthNames, monthNamesCompact, monthYearName } from './names'\n\nimport { PICKER_COLUMNS, dayStep, gridDelta } from './keyboard'\n\nimport { toggleValue } from '../../utils/array'\nimport { isDev } from '../../utils/env'\nimport { hostWarnsKey } from '../../utils/hostWarns'\nimport { resolveMatcher } from '../../utils/matcher'\nimport { clamp } from '../../utils/number'\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages, useResolvedLocale } from '../../i18n/state'\n\n/** What a click selects: one date, a period between two, or a list of dates. */\nexport type DatePickerSelection = 'single' | 'range' | 'multiple'\n\n/**\n * A period between two dates, the value of a `range` selection. Either bound may be\n * null: between the first and the second click, a range has a start and no end yet.\n */\nexport interface DatePickerRange {\n  /** The first day of the period, as an ISO `YYYY-MM-DD` string. */\n  start: string | null\n  /** The last day of the period, as an ISO `YYYY-MM-DD` string. */\n  end: string | null\n}\n\n/** Something happening on a given day, shown as a coloured dot under its number. */\nexport interface DatePickerEvent {\n  /** The day it falls on, as an ISO `YYYY-MM-DD` string. */\n  date: string\n  /** The colour of the dot, as any CSS colour. It is the accent colour by default. */\n  color?: string\n  /** A description of the event, spoken as part of the day's accessible name. */\n  label?: string\n}\n\n/**\n * Which dates cannot be selected, given either as a list of ISO strings or as a\n * function answering that question for a date.\n */\nexport type DatePickerMatcher = string[] | ((iso: string) => boolean)\n\n/** The shape of the v-model, which follows whichever `selection` is in use. */\nexport type DatePickerValue = string | null | DatePickerRange | string[]\n\n/** Everything the `#day` slot is told about the day it draws. */\nexport interface DatePickerDaySlotProps {\n  /** The day, as an ISO `YYYY-MM-DD` string. */\n  iso: string\n  /** The day of the month. */\n  day: number\n  /** Whether it belongs to the month on display rather than to a neighbouring one. */\n  inMonth: boolean\n  /** Whether it cannot be chosen: outside the bounds, or excluded by `disabledDates`. */\n  disabled: boolean\n  /** Whether it is selected. */\n  selected: boolean\n  /** Whether it is today. */\n  today: boolean\n  /** Whether it falls inside the selected period, both ends included. */\n  inRange: boolean\n  /** The events that fall on it. */\n  events: DatePickerEvent[]\n}\n\ninterface DatePickerProps {\n  /**\n   * What the reader is picking: a single date, a period between two dates, or any\n   * number of separate dates. It determines the shape of the v-model.\n   */\n  selection?: DatePickerSelection\n  /**\n   * A BCP 47 locale, which decides the month and day names and the first day of the\n   * week. It TAKES PRECEDENCE over the design system's global locale (`setLocale`)\n   * and falls back to it, which is why it has no literal default here: `undefined`\n   * has to stay recognizable for the global locale to have its chance.\n   */\n  locale?: string\n  /**\n   * Forces the day the weeks start on (0 for Sunday through 6 for Saturday). Left\n   * out, the locale decides.\n   */\n  firstDayOfWeek?: number\n  /**\n   * The earliest selectable date, as an ISO string. Neither navigation nor selection\n   * goes back beyond it.\n   */\n  min?: string\n  /**\n   * The latest selectable date, as an ISO string. Neither navigation nor selection\n   * goes past it.\n   */\n  max?: string\n  /**\n   * Dates that cannot be chosen, given as a list of ISO strings or as a function.\n   * They stay visible, struck through, and can still be reached with the keyboard.\n   */\n  disabledDates?: DatePickerMatcher\n  /**\n   * Also fills the empty corners of the grid with the greyed days of the neighbouring\n   * months. It is off by default.\n   */\n  showAdjacentDays?: boolean\n  /**\n   * Lets those neighbouring days be clicked, which moves the calendar to their month.\n   * A clickable day has to be visible, so this implies showing them.\n   */\n  selectAdjacentDays?: boolean\n  /** The events to mark, as up to three coloured dots under the day they fall on. */\n  events?: DatePickerEvent[]\n  /**\n   * Makes the whole calendar unusable: no date can be chosen, no month reached, and\n   * everything greys out through the colour tokens.\n   */\n  disabled?: boolean\n  /**\n   * Shows what is selected without letting it be changed. The calendar can still be\n   * read and walked through (another month, another year), which is what separates it\n   * from `disabled`.\n   */\n  readonly?: boolean\n  /**\n   * The accessible name of the whole picker, its header and its grid together. A range\n   * shown as two calendars side by side needs one each, or a screen reader announces the\n   * same group twice. It falls back to the dictionary, and a consumer `aria-label` wins.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<DatePickerProps>(), {\n  selection: 'single',\n  locale: undefined,\n  firstDayOfWeek: undefined,\n  min: undefined,\n  max: undefined,\n  disabledDates: undefined,\n  showAdjacentDays: false,\n  selectAdjacentDays: false,\n  events: undefined,\n  disabled: false,\n  readonly: false,\n  label: undefined,\n})\n\n/**\n * What is selected, and its SHAPE follows `selection`: an ISO `YYYY-MM-DD` string for\n * `single`, a `{ start, end }` pair for `range`, an array of strings for `multiple`. Nothing\n * is selected to begin with.\n *\n * Every date is a plain local-time string, never a `Date`, so the value a consumer receives\n * cannot shift a day across time zones.\n */\nconst model = defineModel<DatePickerValue>({ default: null })\n\nconst emit = defineEmits<{\n  /**\n   * Emitted every time a date is chosen, carrying the complete value as it now\n   * stands. VDateInput listens to it to close its panel on a single selection.\n   */\n  select: [value: DatePickerValue]\n}>()\n\ndefineSlots<{\n  /**\n   * Replaces the content of a day cell, to show a price or an availability under the\n   * number for instance. It receives everything known about that day, including\n   * whether it belongs to the displayed month.\n   */\n  day?(props: DatePickerDaySlotProps): unknown\n  /** The strip under the grid, for actions such as Close or Save, or for preset dates. */\n  footer?(): unknown\n}>()\n\nconst gridLabelId = useId()\n\n// The navigation labels have no prop of their own: the dictionary is the single\n// place to change them, globally or per language — see `src/i18n/`.\nconst m = useMessages()\n// @a11y\n// A roleless box cannot carry an accessible name (axe: aria-prohibited-attr),\n// so the root is a named group: the VCarousel viewport arrangement.\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.datePicker.label)\nconst resolvedLocale = useResolvedLocale(() => props.locale)\n\n// @devwarn\n// Silent inside a host that forwards these props and reports on them itself (utils/hostWarns).\nif (isDev && !inject(hostWarnsKey, false)) {\n  watchEffect(() => {\n    if (props.min && props.max && compareISO(props.min, props.max) > 0)\n      console.warn(\n        `[VDatePicker] min \"${props.min}\" falls after max \"${props.max}\", so no date can be chosen.`,\n      )\n  })\n}\n\nconst resolvedFirstDay = computed(\n  () => props.firstDayOfWeek ?? firstDayOfWeekFor(resolvedLocale.value),\n)\nconst weekdays = computed(() => weekdayNames(resolvedLocale.value, resolvedFirstDay.value, 'short'))\nconst weekdaysLong = computed(() =>\n  weekdayNames(resolvedLocale.value, resolvedFirstDay.value, 'long'),\n)\nconst monthLabels = computed(() => monthNamesCompact(resolvedLocale.value))\n/** The full names the compact cells are spoken with: \"Jan.\" is not a word to hear. */\nconst monthNamesLong = computed(() => monthNames(resolvedLocale.value))\n\nconst singleValue = computed(() =>\n  props.selection === 'single' && typeof model.value === 'string' && isValidISO(model.value)\n    ? model.value\n    : null,\n)\nconst rangeValue = computed<DatePickerRange>(() => {\n  if (\n    props.selection === 'range' &&\n    model.value &&\n    typeof model.value === 'object' &&\n    !Array.isArray(model.value)\n  ) {\n    return model.value as DatePickerRange\n  }\n  return { start: null, end: null }\n})\nconst multipleValues = computed<string[]>(() =>\n  props.selection === 'multiple' && Array.isArray(model.value) ? model.value : [],\n)\n\n// `focusedISO` is the single source of truth for the view: the month on display is\n// derived from it, never stored separately, so the two cannot drift apart.\n//\n// TRAP — a range start or a list entry is validated HERE, the way the single value is\n// validated upstream. Those two reach this component exactly as the consumer wrote them,\n// and a malformed one (`{ start: 'foo' }`) made the focused date unparseable: the month\n// arrows assert that parse, so the first render threw.\nfunction initialFocus(): string {\n  if (singleValue.value) return singleValue.value\n  const start = rangeValue.value.start\n  if (start && isValidISO(start)) return start\n  const listed = multipleValues.value.find(isValidISO)\n  if (listed) return listed\n  // With nothing selected, the calendar opens on today, brought back inside the\n  // allowed bounds.\n  readTheClock = true\n  return clampISO(formatISO(new Date()), props.min, props.max)\n}\n/** Whether the month on display was read from the clock at setup: see `renderEpoch`. */\nlet readTheClock = false\nconst focusedISO = ref(initialFocus())\nconst view = ref<'days' | 'months' | 'years'>('days')\n\nconst viewYear = computed(\n  () => parseISO(focusedISO.value)?.getFullYear() ?? new Date().getFullYear(),\n)\nconst viewMonth0 = computed(() => parseISO(focusedISO.value)?.getMonth() ?? 0)\nconst monthLabel = computed(() => monthName(resolvedLocale.value, viewMonth0.value))\nconst gridLabel = computed(() =>\n  monthYearName(resolvedLocale.value, viewYear.value, viewMonth0.value),\n)\n\n// @ssr\n// Today's date is only read once the component is mounted, hence on the client: the\n// server has no way to know it, and rendering it during setup would make the two\n// markups differ and break hydration.\nconst today = ref<string | null>(null)\n\n// @ssr\n/*\n * TRAP — with nothing selected, the month on display is read from the clock at setup, on\n * the server and again in the browser, and the two can disagree: a page prerendered in\n * September and opened in October, or a server a timezone behind its visitor on the last\n * evening of a month. Hydration then patches the TEXT and keeps the server's ATTRIBUTES, so\n * the month button said \"Oct.\" on screen and \"September\" to a screen reader, and the day ids\n * `focusDay` looks up named days that were not there.\n *\n * The header and the grid are therefore keyed on `renderEpoch`, which is bumped once, on\n * mount, whenever the month came from the clock: both are then built again from the\n * browser's own state. Nothing on the page can say whether the server agreed (the grid's\n * own title IS patched, the month button's is not), and rebuilding an empty picker once\n * costs less than asking. A picker opened on a value is never rebuilt.\n */\nconst renderEpoch = ref(0)\nonMounted(() => {\n  today.value = formatISO(new Date())\n  if (readTheClock) renderEpoch.value++\n})\n\nconst isDisabledDate = computed(() => resolveMatcher(props.disabledDates))\n\nconst eventsByDate = computed(() => {\n  const map = new Map<string, DatePickerEvent[]>()\n  for (const ev of props.events ?? []) {\n    const list = map.get(ev.date) ?? []\n    list.push(ev)\n    map.set(ev.date, list)\n  }\n  return map\n})\n\nconst hoverISO = ref<string | null>(null)\nfunction orderRange(a: string, b: string): DatePickerRange {\n  return compareISO(a, b) <= 0 ? { start: a, end: b } : { start: b, end: a }\n}\nconst effectiveRange = computed<DatePickerRange>(() => {\n  if (props.selection !== 'range') return { start: null, end: null }\n  const r = rangeValue.value\n  if (r.start && r.end) return orderRange(r.start, r.end)\n  // A start is set but the end is still pending: the range is previewed up to\n  // whichever day the pointer or the focus is currently on.\n  const preview = hoverISO.value ?? focusedISO.value\n  if (r.start && preview) return orderRange(r.start, preview)\n  return { start: r.start, end: r.end }\n})\n\n/**\n * Whether a day is part of the COMMITTED value, which is what `aria-selected` says: the\n * end a range preview is drawing is not selected yet, and announcing every day the focus\n * walks over as \"selected\" would say so.\n */\nfunction isCommitted(iso: string): boolean {\n  if (props.selection !== 'range') return isSelected(iso)\n  return isSameISO(iso, rangeValue.value.start) || isSameISO(iso, rangeValue.value.end)\n}\n\nfunction isSelected(iso: string): boolean {\n  if (props.selection === 'single') return isSameISO(iso, singleValue.value)\n  if (props.selection === 'multiple') return multipleValues.value.includes(iso)\n  // In range selection, the two ends of the period count as selected — including the\n  // provisional end shown during the preview.\n  return isSameISO(iso, effectiveRange.value.start) || isSameISO(iso, effectiveRange.value.end)\n}\n/**\n * Whether a day falls inside the selected period, BOTH ends included.\n *\n * The inclusiveness is a contract with the stylesheet, not a detail: `[data-in-range]` is\n * what draws the band's pseudo-element, and the two end rules only round a corner of one\n * that already exists. Narrowing this to the days strictly between would leave each end\n * with nothing to cap and silently square off every range.\n */\nfunction isInRange(iso: string): boolean {\n  const { start, end } = effectiveRange.value\n  return !!start && !!end && compareISO(iso, start) >= 0 && compareISO(iso, end) <= 0\n}\n\ntype DayCell = {\n  iso: string\n  day: number\n  kind: 'empty' | 'static' | 'button'\n  inMonth: boolean\n  disabled: boolean\n  selected: boolean\n  /** Selected in the value itself, the preview left out: what `aria-selected` reports. */\n  committed: boolean\n  rangeStart: boolean\n  rangeEnd: boolean\n  inRange: boolean\n  today: boolean\n  events: DatePickerEvent[]\n  /** The events drawn as dots under the number, three at most. */\n  dots: DatePickerEvent[]\n  /** The labels of its events, joined, for the day's accessible name. */\n  eventText: string\n}\n\n/**\n * The 42 squares of the month on display, rebuilt only when the MONTH changes. The two\n * computeds are split on purpose: a range being previewed changes `hoverISO` on every\n * `pointerenter`, and that has to repaint the decoration below without building 42 dates\n * again. `viewYear` and `viewMonth0` are numbers, so moving the focus inside the month\n * leaves them — and this — untouched.\n */\nconst grid = computed(() =>\n  buildMonthGrid(viewYear.value, viewMonth0.value, resolvedFirstDay.value),\n)\n\nconst NO_EVENTS: DatePickerEvent[] = []\n\nconst days = computed<DayCell[]>(() =>\n  grid.value.map((cell) => {\n    const inMonth = cell.adjacent === null\n    // Making the neighbouring days clickable implies showing them: a day nobody can\n    // see cannot be clicked.\n    const show = inMonth || props.showAdjacentDays || props.selectAdjacentDays\n    const selectable = inMonth || props.selectAdjacentDays\n    const disabled = !isDateAllowed(cell.iso, props.min, props.max, isDisabledDate.value)\n    const kind: DayCell['kind'] = !show ? 'empty' : selectable ? 'button' : 'static'\n    const events = eventsByDate.value.get(cell.iso) ?? NO_EVENTS\n    return {\n      iso: cell.iso,\n      day: cell.day,\n      kind,\n      inMonth,\n      disabled,\n      selected: kind === 'button' && !disabled && isSelected(cell.iso),\n      committed: kind === 'button' && !disabled && isCommitted(cell.iso),\n      rangeStart: props.selection === 'range' && isSameISO(cell.iso, effectiveRange.value.start),\n      rangeEnd: props.selection === 'range' && isSameISO(cell.iso, effectiveRange.value.end),\n      inRange: props.selection === 'range' && isInRange(cell.iso),\n      today: isSameISO(cell.iso, today.value),\n      events,\n      dots: events.length > 3 ? events.slice(0, 3) : events,\n      eventText: events\n        .map((ev) => ev.label)\n        .filter(Boolean)\n        .join(', '),\n    }\n  }),\n)\n\n/** What the `#day` slot receives for a square: the same object for both kinds of cell. */\nfunction daySlotProps(cell: DayCell): DatePickerDaySlotProps {\n  return {\n    iso: cell.iso,\n    day: cell.day,\n    inMonth: cell.inMonth,\n    disabled: cell.disabled,\n    selected: cell.selected,\n    today: cell.today,\n    inRange: cell.inRange,\n    events: cell.events,\n  }\n}\nconst weeks = computed(() => {\n  const rows: DayCell[][] = []\n  for (let i = 0; i < days.value.length; i += 7) rows.push(days.value.slice(i, i + 7))\n  return rows\n})\n\nfunction monthHasSelectable(year: number, month0: number): boolean {\n  const first = isoOf(year, month0, 1)\n  const last = isoOf(year, month0, daysInMonth(year, month0))\n  return (\n    (!props.max || compareISO(first, props.max) <= 0) &&\n    (!props.min || compareISO(last, props.min) >= 0)\n  )\n}\n// Derived from the month on display, not from the focused day, so an arrow key moving the\n// focus inside the month does not recompute them.\nconst canPrevMonth = computed(() =>\n  viewMonth0.value === 0\n    ? monthHasSelectable(viewYear.value - 1, 11)\n    : monthHasSelectable(viewYear.value, viewMonth0.value - 1),\n)\nconst canNextMonth = computed(() =>\n  viewMonth0.value === 11\n    ? monthHasSelectable(viewYear.value + 1, 0)\n    : monthHasSelectable(viewYear.value, viewMonth0.value + 1),\n)\nconst canPrevYear = computed(\n  () => !props.min || compareISO(isoOf(viewYear.value - 1, 11, 31), props.min) >= 0,\n)\nconst canNextYear = computed(\n  () => !props.max || compareISO(isoOf(viewYear.value + 1, 0, 1), props.max) <= 0,\n)\n\n// @a11y\n// Moves the real DOM focus onto a day cell. The grid keeps exactly one cell in the\n// tab order, so navigating means focusing another one.\nconst dayId = (iso: string) => `${gridLabelId}-d-${iso}`\nfunction focusDay(iso: string, options?: FocusOptions) {\n  nextTick(() => document.getElementById(dayId(iso))?.focus(options))\n}\n\nfunction goTo(iso: string, moveFocus = false) {\n  // Every move through the calendar comes here, so one guard covers the arrows, the\n  // month and year cells and the keyboard's own steps. Only `disabled` stops it:\n  // `readonly` leaves the reader free to look around.\n  if (props.disabled) return\n  focusedISO.value = clampISO(iso, props.min, props.max)\n  if (moveFocus && view.value === 'days') focusDay(focusedISO.value)\n}\nfunction stepMonth(delta: number) {\n  goTo(addMonths(focusedISO.value, delta))\n}\nfunction stepYear(delta: number) {\n  goTo(addMonths(focusedISO.value, delta * 12))\n}\n\n// @a11y @core\n// Changing view has to carry the focus onto the cell the new view\n// opens on. Without that move the focus would stay on a button the view has just\n// removed from the document, and the keyboard would have nowhere to go.\nfunction toggleView(target: 'months' | 'years') {\n  const next = view.value === target ? 'days' : target\n  view.value = next\n  if (next === 'months') {\n    focusedMonth.value = viewMonth0.value\n    nextTick(() => monthCellEl(viewMonth0.value)?.focus())\n  } else if (next === 'years') {\n    focusedYear.value = viewYear.value\n    nextTick(() => {\n      const cell = yearCellEl(viewYear.value)\n      // Called optionally because jsdom does not implement scrollIntoView (the same\n      // guard as VTimeInput's list). Centring the year is a nicety; the focus call\n      // below is not, so it must not be taken down with it.\n      cell?.scrollIntoView?.({ block: 'center' })\n      cell?.focus()\n    })\n  } else if (view.value === 'days') {\n    focusDay(focusedISO.value)\n  }\n}\n\nfunction selectDay(cell: DayCell) {\n  // The single choke point of the selection, so the two states are refused here rather\n  // than in each of the routes that lead to it — a click, Enter and Space all pass\n  // through. Navigation is deliberately NOT guarded by `readonly`: a calendar one may\n  // read is a calendar one may leaf through.\n  if (props.disabled || props.readonly) return\n  if (cell.kind !== 'button' || cell.disabled) return\n  focusedISO.value = cell.iso\n  let next: DatePickerValue\n  if (props.selection === 'single') {\n    next = cell.iso\n  } else if (props.selection === 'multiple') {\n    next = toggleValue(multipleValues.value, cell.iso).sort(compareISO)\n  } else {\n    // Range selection reads three clicks: the first sets the start, the second the\n    // end (reordered if it comes before the start), and the third starts a new\n    // period.\n    const r = rangeValue.value\n    next = !r.start || r.end ? { start: cell.iso, end: null } : orderRange(r.start, cell.iso)\n  }\n  lastWritten = JSON.stringify(next)\n  model.value = next\n  // TRAP: emit what was just computed, never `model.value` read back. Under a parent\n  // `v-model`, `defineModel` does not update its local copy on write — it waits for the\n  // parent to re-render — so the read would hand `select` the PREVIOUS value.\n  emit('select', next)\n}\n\n// @keyboard @a11y\n// The keyboard of the days view. The table turning a key into a step is pure and\n// lives in `./keyboard`; what stays here is the date that step is applied to, and\n// the focus move that follows.\nfunction onDaysKeydown(event: KeyboardEvent) {\n  // A key held with a modifier is the browser's or the system's: Alt+Left is Back.\n  if (event.altKey || event.ctrlKey || event.metaKey) return\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault()\n    const cell = days.value.find((c) => c.iso === focusedISO.value)\n    if (cell) selectDay(cell)\n    return\n  }\n  const d = parseISO(focusedISO.value)!\n  // How far the focused day sits from the start of its week, which is exactly what\n  // Home and End have to step back and forward by.\n  const offset = (d.getDay() - resolvedFirstDay.value + 7) % 7\n  const step = dayStep(event.key, event.shiftKey, offset)\n  if (!step) return\n  event.preventDefault()\n  goTo(\n    'days' in step\n      ? addDays(focusedISO.value, step.days)\n      : addMonths(focusedISO.value, step.months),\n    true,\n  )\n}\n\n/**\n * Leaving the months or the years view for the days of the month chosen, keeping the day of\n * the month where the new month has one — the 31st becoming the 30th, say.\n */\nfunction chooseYearMonth(year: number, month0: number) {\n  const day = Math.min(parseISO(focusedISO.value)!.getDate(), daysInMonth(year, month0))\n  goTo(isoOf(year, month0, day))\n  view.value = 'days'\n  focusDay(focusedISO.value)\n}\n\n// @keyboard @a11y\n/**\n * The keyboard of the months and the years views, which differ only in what their cells\n * hold: Enter or Space chooses the focused cell, and the arrows walk the list of cells a row\n * or a column at a time, stopping at either end.\n */\nfunction onViewKeydown(\n  event: KeyboardEvent,\n  cells: readonly number[],\n  focused: Ref<number>,\n  cellEl: (value: number) => HTMLElement | null,\n  choose: (value: number) => void,\n  selectable: (value: number) => boolean = () => true,\n) {\n  if (event.altKey || event.ctrlKey || event.metaKey) return\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault()\n    choose(focused.value)\n    return\n  }\n  const delta = gridDelta(event.key)\n  if (delta === undefined) return\n  event.preventDefault()\n  // A cell the bounds rule out is a DISABLED button, which cannot take the focus: landing\n  // on it would move the tab stop where the focus cannot follow. The walk goes on the same\n  // way round to the next cell that can be chosen, and holds still when there is none.\n  let next = clamp(cells.indexOf(focused.value) + delta, 0, cells.length - 1)\n  while (!selectable(cells[next]!) && next + delta >= 0 && next + delta < cells.length)\n    next += delta\n  if (!selectable(cells[next]!)) return\n  focused.value = cells[next]!\n  cellEl(focused.value)?.focus()\n}\n\n// The months view, opened from the month button in the header.\nconst MONTHS = Array.from({ length: 12 }, (_, i) => i)\nconst focusedMonth = ref(viewMonth0.value)\nconst monthCellEl = (i: number) =>\n  document.getElementById(`${gridLabelId}-m-${i}`) as HTMLElement | null\nfunction monthSelectable(i: number) {\n  return monthHasSelectable(viewYear.value, i)\n}\nfunction chooseMonth(i: number) {\n  if (monthSelectable(i)) chooseYearMonth(viewYear.value, i)\n}\nconst onMonthsKeydown = (event: KeyboardEvent) =>\n  onViewKeydown(event, MONTHS, focusedMonth, monthCellEl, chooseMonth, monthSelectable)\n\n// @a11y\n/*\n * Both pickers are a `role=\"grid\"`, and a grid owns ROWS, not cells: a gridcell\n * placed straight under the grid fails aria-required-children and\n * aria-required-parent at the same time. The cells are therefore cut into rows of\n * PICKER_COLUMNS, matching the `grid-template-columns` of the stylesheet — the row\n * element itself is `display: contents`, so the CSS grid never sees it.\n *\n * Keyboard navigation is unaffected by this extra level: it moves by index and\n * refocuses cells through their ids, never by walking the DOM.\n */\nconst chunk = <T,>(list: T[]) =>\n  Array.from({ length: Math.ceil(list.length / PICKER_COLUMNS) }, (_, r) =>\n    list.slice(r * PICKER_COLUMNS, r * PICKER_COLUMNS + PICKER_COLUMNS),\n  )\n\nconst monthRows = computed(() => chunk(monthLabels.value.map((name, i) => ({ name, i }))))\n\n// The years view, opened from the year button in the header.\nconst yearRange = computed(() => {\n  /*\n   * `min` and `max` come straight from the consumer, and this is the ONLY place\n   * where they are turned into a Date instead of being compared as ISO text —\n   * `compareISO`, `isWithin` and `clampISO` all tolerate a malformed bound. A value\n   * that is not a valid ISO date therefore has to fall back to the open range here:\n   * asserting the parse would throw and take the whole render down the moment the\n   * years view is opened.\n   */\n  const minY = parseISO(props.min)?.getFullYear() ?? viewYear.value - 100\n  const maxY = parseISO(props.max)?.getFullYear() ?? viewYear.value + 100\n  const list: number[] = []\n  for (let y = minY; y <= maxY; y++) list.push(y)\n  return list\n})\nconst yearRows = computed(() => chunk(yearRange.value))\nconst focusedYear = ref(viewYear.value)\nconst yearCellEl = (y: number) =>\n  document.getElementById(`${gridLabelId}-y-${y}`) as HTMLElement | null\nconst chooseYear = (y: number) => chooseYearMonth(y, viewMonth0.value)\nconst onYearsKeydown = (event: KeyboardEvent) =>\n  onViewKeydown(event, yearRange.value, focusedYear, yearCellEl, chooseYear)\n\n// Follows a selection changed from the outside: when the leading value lands in\n// another month, the calendar moves to it rather than leaving the reader in front of\n// a grid where nothing is selected.\n//\n// TRAP — only from the OUTSIDE. The picker's own writes change the leading value too:\n// unticking the earliest date of a list makes the next one lead, and following it would\n// throw the reader into another month and drop the focus on `<body>`, the day they were\n// on having left the document. `lastWritten` is the value `selectDay` just wrote, and a\n// model that still reads the same was not changed by anyone else. It is compared as TEXT:\n// a parent v-model hands back a reactive proxy of the array, never the array written.\nlet lastWritten: string | undefined\nwatch(\n  () => [singleValue.value, rangeValue.value.start, multipleValues.value[0]],\n  () => {\n    if (lastWritten !== undefined && JSON.stringify(model.value) === lastWritten) return\n    const primary = singleValue.value ?? rangeValue.value.start ?? multipleValues.value[0]\n    if (primary && isValidISO(primary)) {\n      const d = parseISO(primary)!\n      if (d.getFullYear() !== viewYear.value || d.getMonth() !== viewMonth0.value) {\n        focusedISO.value = primary\n      }\n    }\n  },\n)\n\n// @a11y\n/**\n * Brings the focus into the grid, on the day the calendar is currently showing. This\n * is what VDateInput calls when it opens its panel.\n */\nfunction focus(options?: FocusOptions) {\n  view.value = 'days'\n  focusDay(focusedISO.value, options)\n}\n\n// @core\n/*\n * Puts the calendar back the way it opens: the days view, on the selected date (today\n * failing that), with no range preview pending. It moves no focus and announces nothing,\n * a panel reopening not being something the reader did.\n *\n * TRAP — a panel's content stays MOUNTED while the panel is closed, so without this the\n * months or years view a reader left open is what the next opening shows — and a field\n * that opens its panel on focus never calls `focus()`, the one place that reset the view.\n */\nfunction reset() {\n  view.value = 'days'\n  hoverISO.value = null\n  focusedISO.value = initialFocus()\n}\n\ndefineExpose({\n  /** Brings the focus into the grid, onto the day the calendar is showing. */\n  focus,\n  /**\n   * Returns to the days view, on the selected date or today, without moving the focus.\n   * VDateInput calls it each time its panel opens and closes.\n   */\n  reset,\n})\n</script>\n\n<template>\n  <div\n    class=\"v-date-picker\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :data-view=\"view\"\n    :data-selection=\"selection\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    @pointerleave=\"hoverISO = null\"\n  >\n    <!-- The header: the month and the year, each between two chevrons that step it,\n         and each opening its own picker view when clicked -->\n    <div :key=\"`header-${renderEpoch}`\" class=\"v-date-picker-header\">\n      <div class=\"v-date-picker-nav\">\n        <VIconButton\n          :label=\"m.datePicker.previousMonth\"\n          size=\"sm\"\n          :disabled=\"disabled || !canPrevMonth\"\n          @click=\"stepMonth(-1)\"\n        >\n          <VIcon :name=\"chevronLeftIcon\" mirrored />\n        </VIconButton>\n        <VButton\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          class=\"v-date-picker-view-toggle\"\n          :disabled=\"disabled\"\n          :aria-expanded=\"view === 'months'\"\n          :aria-label=\"monthLabel\"\n          @click=\"toggleView('months')\"\n        >\n          {{ monthLabels[viewMonth0] }}\n          <VIcon\n            :name=\"view === 'months' ? arrowDropUpIcon : arrowDropDownIcon\"\n            aria-hidden=\"true\"\n          />\n        </VButton>\n        <VIconButton\n          :label=\"m.datePicker.nextMonth\"\n          size=\"sm\"\n          :disabled=\"disabled || !canNextMonth\"\n          @click=\"stepMonth(1)\"\n        >\n          <VIcon :name=\"chevronRightIcon\" mirrored />\n        </VIconButton>\n      </div>\n\n      <div class=\"v-date-picker-nav\">\n        <VIconButton\n          :label=\"m.datePicker.previousYear\"\n          size=\"sm\"\n          :disabled=\"disabled || !canPrevYear\"\n          @click=\"stepYear(-1)\"\n        >\n          <VIcon :name=\"chevronLeftIcon\" mirrored />\n        </VIconButton>\n        <VButton\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          class=\"v-date-picker-view-toggle\"\n          :disabled=\"disabled\"\n          :aria-expanded=\"view === 'years'\"\n          @click=\"toggleView('years')\"\n        >\n          {{ viewYear }}\n          <VIcon\n            :name=\"view === 'years' ? arrowDropUpIcon : arrowDropDownIcon\"\n            aria-hidden=\"true\"\n          />\n        </VButton>\n        <VIconButton\n          :label=\"m.datePicker.nextYear\"\n          size=\"sm\"\n          :disabled=\"disabled || !canNextYear\"\n          @click=\"stepYear(1)\"\n        >\n          <VIcon :name=\"chevronRightIcon\" mirrored />\n        </VIconButton>\n      </div>\n    </div>\n\n    <!-- Days view -->\n    <div\n      v-show=\"view === 'days'\"\n      :key=\"`days-${renderEpoch}`\"\n      class=\"v-date-picker-grid\"\n      role=\"grid\"\n      :aria-label=\"gridLabel\"\n      :aria-multiselectable=\"selection === 'multiple' ? 'true' : undefined\"\n      @keydown=\"onDaysKeydown\"\n    >\n      <div class=\"v-date-picker-weekdays\" role=\"row\">\n        <span\n          v-for=\"(w, i) in weekdays\"\n          :key=\"w\"\n          class=\"v-date-picker-weekday\"\n          role=\"columnheader\"\n          :aria-label=\"weekdaysLong[i]\"\n          >{{ w }}</span\n        >\n      </div>\n      <div v-for=\"(week, wi) in weeks\" :key=\"wi\" class=\"v-date-picker-week\" role=\"row\">\n        <div\n          v-for=\"cell in week\"\n          :key=\"cell.iso\"\n          class=\"v-date-picker-cell\"\n          role=\"gridcell\"\n          :aria-selected=\"cell.kind === 'button' ? cell.committed : undefined\"\n          :data-in-range=\"cell.inRange ? '' : undefined\"\n          :data-range-start=\"cell.rangeStart ? '' : undefined\"\n          :data-range-end=\"cell.rangeEnd ? '' : undefined\"\n        >\n          <button\n            v-if=\"cell.kind === 'button'\"\n            :id=\"dayId(cell.iso)\"\n            type=\"button\"\n            class=\"v-date-picker-day\"\n            :tabindex=\"cell.iso === focusedISO ? 0 : -1\"\n            :data-outside=\"!cell.inMonth ? '' : undefined\"\n            :data-selected=\"cell.selected ? '' : undefined\"\n            :data-today=\"cell.today ? '' : undefined\"\n            :data-unavailable=\"cell.disabled ? '' : undefined\"\n            :disabled=\"disabled\"\n            :aria-disabled=\"cell.disabled || readonly ? 'true' : undefined\"\n            :aria-current=\"cell.today ? 'date' : undefined\"\n            @click=\"selectDay(cell)\"\n            @pointerenter=\"hoverISO = cell.iso\"\n            @focus=\"hoverISO = cell.iso\"\n          >\n            <slot name=\"day\" v-bind=\"daySlotProps(cell)\">\n              <span class=\"v-date-picker-day-num\">{{ cell.day }}</span>\n            </slot>\n            <!-- The dots are hidden from assistive technology, so what they stand for is\n                 spoken here, as part of the day's name. -->\n            <span v-if=\"cell.eventText\" class=\"v-visually-hidden\">, {{ cell.eventText }}</span>\n            <span v-if=\"cell.dots.length\" class=\"v-date-picker-dots\" aria-hidden=\"true\">\n              <span\n                v-for=\"(ev, ei) in cell.dots\"\n                :key=\"ei\"\n                class=\"v-date-picker-dot\"\n                :style=\"ev.color ? { '--date-picker-dot-color': ev.color } : undefined\"\n              />\n            </span>\n          </button>\n          <!-- A day of a neighbouring month that cannot be selected. It renders the\n               very same slot as the clickable days: were it left with the bare\n               number, custom content taking several lines would apply to this month's\n               days only, and the numbers would stop lining up from one cell to the\n               next. The slot receives `inMonth`, which is how it can still tell the\n               two apart. -->\n          <span\n            v-else-if=\"cell.kind === 'static'\"\n            class=\"v-date-picker-day v-date-picker-day--static\"\n            :data-disabled=\"cell.disabled ? '' : undefined\"\n          >\n            <slot name=\"day\" v-bind=\"daySlotProps(cell)\">\n              <span class=\"v-date-picker-day-num\">{{ cell.day }}</span>\n            </slot>\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Months view -->\n    <div\n      v-if=\"view === 'months'\"\n      class=\"v-date-picker-view\"\n      role=\"grid\"\n      :aria-label=\"m.datePicker.monthPicker\"\n      @keydown=\"onMonthsKeydown\"\n    >\n      <div v-for=\"(row, r) in monthRows\" :key=\"r\" class=\"v-date-picker-view-row\" role=\"row\">\n        <button\n          v-for=\"{ name, i } in row\"\n          :id=\"`${gridLabelId}-m-${i}`\"\n          :key=\"i\"\n          type=\"button\"\n          class=\"v-date-picker-view-cell\"\n          role=\"gridcell\"\n          :tabindex=\"i === focusedMonth ? 0 : -1\"\n          :data-selected=\"i === viewMonth0 ? '' : undefined\"\n          :aria-selected=\"i === viewMonth0 ? 'true' : undefined\"\n          :aria-label=\"monthNamesLong[i]\"\n          :disabled=\"disabled || !monthSelectable(i)\"\n          @click=\"chooseMonth(i)\"\n        >\n          {{ name }}\n        </button>\n      </div>\n    </div>\n\n    <!-- Years view -->\n    <div\n      v-if=\"view === 'years'\"\n      class=\"v-date-picker-view v-date-picker-view--years\"\n      role=\"grid\"\n      :aria-label=\"m.datePicker.yearPicker\"\n      @keydown=\"onYearsKeydown\"\n    >\n      <div v-for=\"(row, r) in yearRows\" :key=\"r\" class=\"v-date-picker-view-row\" role=\"row\">\n        <button\n          v-for=\"y in row\"\n          :id=\"`${gridLabelId}-y-${y}`\"\n          :key=\"y\"\n          type=\"button\"\n          class=\"v-date-picker-view-cell\"\n          role=\"gridcell\"\n          :tabindex=\"y === focusedYear ? 0 : -1\"\n          :data-selected=\"y === viewYear ? '' : undefined\"\n          :aria-selected=\"y === viewYear ? 'true' : undefined\"\n          :disabled=\"disabled\"\n          @click=\"chooseYear(y)\"\n        >\n          {{ y }}\n        </button>\n      </div>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"v-date-picker-footer\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-date-picker {\n    /* The consumer sets the size of the day disc through its token; the cell around it —\n       the hover area and the width of the column — grows to follow, and never falls below\n       the size the cell token sets. */\n    --date-picker-cell: max(\n      var(--vectis-control-size-date-picker-cell),\n      calc(var(--vectis-control-size-date-picker-day) + var(--vectis-space-1))\n    );\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--vectis-space-2);\n    padding: var(--vectis-space-3);\n    font-family: var(--vectis-text-family);\n    color: var(--vectis-color-text);\n  }\n\n  /* The calendar is a flex column, so every block stretches to its full width by\n     default. The days grid then fills that width through its 1fr columns, and never\n     goes below the seven cells its own floor guarantees. */\n  .v-date-picker-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-date-picker-nav {\n    display: flex;\n    align-items: center;\n  }\n\n  /* A minimum width holds this button steady, so the chevrons on either side do not\n     shift as the month or year label changes length. */\n  /* Qualified by an attribute the button always renders: `.v-button` sets its own\n     `font-weight` at (0,1,0), and a tie between the two sheets would leave the weight to\n     whichever the consumer's bundler put last. */\n  .v-date-picker-view-toggle[data-size] {\n    min-inline-size: var(--vectis-control-size-date-picker-nav-min);\n    /* The semibold is state emphasis on the grid's main landmark, not a type role. */\n    font-weight: var(--vectis-font-weight-semibold);\n    text-transform: capitalize;\n  }\n\n  /* The days grid can never be narrower than seven cells. Above that floor it takes\n     whatever width the calendar has — set by the header — and the 1fr columns share\n     it out equally. */\n  .v-date-picker-grid {\n    min-inline-size: calc(7 * var(--date-picker-cell));\n  }\n\n  .v-date-picker-weekdays,\n  .v-date-picker-week {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n  }\n\n  .v-date-picker-weekday {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--vectis-control-height-sm);\n    /* A column micro-header, which takes the overline type role. The casing stays\n       `capitalize`, the calendar convention, rather than the full capitals the\n       VTypography overline variant would apply. */\n    font-size: var(--vectis-text-overline-size);\n    font-weight: var(--vectis-text-overline-weight);\n    letter-spacing: var(--vectis-text-overline-tracking);\n    color: var(--vectis-color-text-muted);\n    text-transform: capitalize;\n  }\n\n  .v-date-picker-cell {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--date-picker-cell);\n  }\n\n  /* The band joining the days of a selected range: a tinted background laid behind\n     the day, at the HEIGHT of the disc rather than of the whole cell. Its vertical\n     inset is half the gap between cell and disc, expressed in `%` so it follows the\n     real width of a 1fr column whatever the calendar measures.\n\n     At either end the band stops exactly at the edge of the disc — hence the inset on\n     the outer side — and that corner is rounded with the pill radius, which a box\n     this height caps at half its height, i.e. precisely the disc's own radius, so it\n     cannot overshoot.\n\n     TRAP — the two cap rules below only shape a pseudo-element that `[data-in-range]`\n     has already created, so they depend on `isInRange` counting BOTH ends of the period\n     as inside it. Make it exclusive and there is no `::before` to cap: both rounded ends\n     of every range vanish, leaving a band that stops square one cell short at each side,\n     with nothing in the console. The last rule is the single-day case, where the two caps\n     would meet and draw a disc behind the disc. */\n  .v-date-picker-cell[data-in-range]::before {\n    content: '';\n    position: absolute;\n    inset-block: calc((100% - var(--vectis-control-size-date-picker-day)) / 2);\n    inset-inline: 0;\n    background: var(--vectis-color-accent-surface);\n    z-index: 0;\n  }\n  .v-date-picker-cell[data-range-start]::before {\n    inset-inline-start: calc((100% - var(--vectis-control-size-date-picker-day)) / 2);\n    border-start-start-radius: var(--vectis-radius-pill);\n    border-end-start-radius: var(--vectis-radius-pill);\n  }\n  .v-date-picker-cell[data-range-end]::before {\n    inset-inline-end: calc((100% - var(--vectis-control-size-date-picker-day)) / 2);\n    border-start-end-radius: var(--vectis-radius-pill);\n    border-end-end-radius: var(--vectis-radius-pill);\n  }\n  .v-date-picker-cell[data-range-start][data-range-end]::before {\n    content: none;\n  }\n\n  .v-date-picker-day {\n    position: relative;\n    z-index: 1;\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--vectis-control-size-date-picker-day);\n    block-size: var(--vectis-control-size-date-picker-day);\n    padding: 0;\n    border: none;\n    border-radius: var(--vectis-radius-pill);\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    font-size: var(--vectis-text-body-md-size);\n    cursor: pointer;\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* Hover belongs to the days one can actually click: not the disabled ones, not the\n     already selected ones, and not the neighbouring days rendered as plain spans. */\n  .v-date-picker-day:hover:not(:disabled):not([aria-disabled='true']):not([data-selected]):not(\n      .v-date-picker-day--static\n    ) {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-date-picker-day[data-outside] {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* The semibold in the two rules below marks a state — today, and the selection —\n     and is not a typographic role, which is why it reads a font token directly. */\n  .v-date-picker-day[data-today]:not([data-selected]) {\n    box-shadow: inset 0 0 0 1px var(--vectis-color-accent-border);\n    color: var(--vectis-color-accent-text);\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n\n  .v-date-picker-day[data-selected] {\n    background: var(--vectis-color-accent);\n    color: var(--vectis-color-text-on-accent);\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n\n  /* The strike-through says the DATE is unavailable — outside the bounds, or listed in\n     `disabledDates`. It hangs on its own attribute rather than on `aria-disabled`, which\n     a read-only calendar also carries on every day: nothing can be chosen there, but the\n     dates themselves are perfectly available and striking them all out would say the\n     opposite. The hover rule below still reads `aria-disabled`, so neither highlights. */\n  .v-date-picker-day[data-unavailable] {\n    color: var(--vectis-color-text-subtle);\n    text-decoration: line-through;\n    cursor: not-allowed;\n  }\n\n  .v-date-picker[data-readonly] .v-date-picker-day:not([data-unavailable]) {\n    cursor: default;\n  }\n\n  /* A disabled calendar greys out through the colour tokens and never through opacity,\n     the selection included: left in the accent colour it would go on looking live. */\n  .v-date-picker-day:disabled {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-date-picker[data-disabled] .v-date-picker-day[data-selected] {\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-date-picker-day--static {\n    color: var(--vectis-color-text-subtle);\n    cursor: default;\n  }\n\n  /* A neighbouring day that falls outside the bounds, or is disabled, is struck\n     through like any other unavailable date. */\n  .v-date-picker-day--static[data-disabled] {\n    text-decoration: line-through;\n    cursor: not-allowed;\n  }\n\n  .v-date-picker-day:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-date-picker-day-num {\n    line-height: var(--vectis-text-control-leading);\n  }\n\n  .v-date-picker-dots {\n    position: absolute;\n    /* Half a dot, below them and between them: the spacing scale has no step that small. */\n    inset-block-end: calc(var(--vectis-control-size-date-picker-dot) / 2);\n    display: flex;\n    gap: calc(var(--vectis-control-size-date-picker-dot) / 2);\n  }\n  .v-date-picker-dot {\n    inline-size: var(--vectis-control-size-date-picker-dot);\n    block-size: var(--vectis-control-size-date-picker-dot);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--date-picker-dot-color, var(--vectis-color-accent));\n  }\n  .v-date-picker-day[data-selected] .v-date-picker-dot {\n    background: var(--vectis-color-text-on-accent);\n  }\n\n  /* The months and years views. They fill the calendar's width exactly like the days\n     grid does: stretched by the flex column, then shared out by 1fr columns. */\n  .v-date-picker-view {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: var(--vectis-space-1);\n    min-inline-size: calc(7 * var(--date-picker-cell));\n  }\n  /* The rows ARIA requires inside a grid, made invisible to the layout: with\n     `display: contents` the cells remain direct grid items of `.v-date-picker-view`,\n     so the columns line up as if the rows were not there. */\n  .v-date-picker-view-row {\n    display: contents;\n  }\n\n  .v-date-picker-view--years {\n    max-block-size: calc(6 * var(--date-picker-cell));\n    overflow-y: auto;\n  }\n\n  .v-date-picker-view-cell {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    block-size: var(--vectis-control-height-lg);\n    border: none;\n    border-radius: var(--vectis-radius-pill);\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    font-size: var(--vectis-text-body-md-size);\n    text-transform: capitalize;\n    cursor: pointer;\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n  .v-date-picker-view-cell:hover:not(:disabled):not([data-selected]) {\n    background: var(--vectis-color-surface-muted);\n  }\n  .v-date-picker-view-cell[data-selected] {\n    background: var(--vectis-color-accent);\n    color: var(--vectis-color-text-on-accent);\n    /* Again state emphasis, not a type role. */\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n  .v-date-picker-view-cell:disabled {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n  .v-date-picker-view-cell:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-date-picker-footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--vectis-space-2);\n    padding-block-start: var(--vectis-space-2);\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-date-picker-day,\n    .v-date-picker-view-cell {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VDatePicker.js","names":[],"sources":["../../../src/components/VDatePicker/VDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @keyboard @core\n/**\n * Implement roving grid focus and date selection because the platform has no composable,\n * stylable date grid. VDateInput reuses this calendar logic.\n */\n\nimport { computed, inject, nextTick, onMounted, ref, useId, watch, watchEffect } from 'vue'\nimport type { Ref } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { arrow_drop_down as arrowDropDownIcon } from '../VIcon/icons/arrow_drop_down'\nimport { arrow_drop_up as arrowDropUpIcon } from '../VIcon/icons/arrow_drop_up'\nimport { chevron_left as chevronLeftIcon } from '../VIcon/icons/chevron_left'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport {\n  addDays,\n  addMonths,\n  buildMonthGrid,\n  clampISO,\n  compareISO,\n  daysInMonth,\n  firstDayOfWeekFor,\n  formatISO,\n  isDateAllowed,\n  isoOf,\n  isSameISO,\n  isValidISO,\n  parseISO,\n  weekdayNames,\n} from '../../utils/date'\nimport { monthName, monthNames, monthNamesCompact, monthYearName } from './names'\n\nimport { PICKER_COLUMNS, dayStep, gridDelta } from './keyboard'\n\nimport { toggleValue } from '../../utils/array'\nimport { isDev } from '../../utils/env'\nimport { hostWarnsKey } from '../../utils/hostWarns'\nimport { resolveMatcher } from '../../utils/matcher'\nimport { clamp } from '../../utils/number'\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages, useResolvedLocale } from '../../i18n/state'\n\n/** What a click selects: one date, a period between two, or a list of dates. */\nexport type DatePickerSelection = 'single' | 'range' | 'multiple'\n\n/**\n * A period between two dates, the value of a `range` selection. Either bound may be\n * null: between the first and the second click, a range has a start and no end yet.\n */\nexport interface DatePickerRange {\n  /** The first day of the period, as an ISO `YYYY-MM-DD` string. */\n  start: string | null\n  /** The last day of the period, as an ISO `YYYY-MM-DD` string. */\n  end: string | null\n}\n\n/** Something happening on a given day, shown as a coloured dot under its number. */\nexport interface DatePickerEvent {\n  /** The day it falls on, as an ISO `YYYY-MM-DD` string. */\n  date: string\n  /** The colour of the dot, as any CSS colour. It is the accent colour by default. */\n  color?: string\n  /** A description of the event, spoken as part of the day's accessible name. */\n  label?: string\n}\n\n/**\n * Which dates cannot be selected, given either as a list of ISO strings or as a\n * function answering that question for a date.\n */\nexport type DatePickerMatcher = string[] | ((iso: string) => boolean)\n\n/** The shape of the v-model, which follows whichever `selection` is in use. */\nexport type DatePickerValue = string | null | DatePickerRange | string[]\n\n/** Everything the `#day` slot is told about the day it draws. */\nexport interface DatePickerDaySlotProps {\n  /** The day, as an ISO `YYYY-MM-DD` string. */\n  iso: string\n  /** The day of the month. */\n  day: number\n  /** Whether it belongs to the month on display rather than to a neighbouring one. */\n  inMonth: boolean\n  /** Whether it cannot be chosen: outside the bounds, or excluded by `disabledDates`. */\n  disabled: boolean\n  /** Whether it is selected. */\n  selected: boolean\n  /** Whether it is today. */\n  today: boolean\n  /** Whether it falls inside the selected period, both ends included. */\n  inRange: boolean\n  /** The events that fall on it. */\n  events: DatePickerEvent[]\n}\n\ninterface DatePickerProps {\n  /**\n   * What the reader is picking: a single date, a period between two dates, or any\n   * number of separate dates. It determines the shape of the v-model.\n   */\n  selection?: DatePickerSelection\n  /**\n   * A BCP 47 locale, which decides the month and day names and the first day of the\n   * week. It TAKES PRECEDENCE over the design system's global locale (`setLocale`)\n   * and falls back to it, which is why it has no literal default here: `undefined`\n   * has to stay recognizable for the global locale to have its chance.\n   */\n  locale?: string\n  /**\n   * Forces the day the weeks start on (0 for Sunday through 6 for Saturday). Left\n   * out, the locale decides.\n   */\n  firstDayOfWeek?: number\n  /**\n   * The earliest selectable date, as an ISO string. Neither navigation nor selection\n   * goes back beyond it.\n   */\n  min?: string\n  /**\n   * The latest selectable date, as an ISO string. Neither navigation nor selection\n   * goes past it.\n   */\n  max?: string\n  /**\n   * Dates that cannot be chosen, given as a list of ISO strings or as a function.\n   * They stay visible, struck through, and can still be reached with the keyboard.\n   */\n  disabledDates?: DatePickerMatcher\n  /**\n   * Also fills the empty corners of the grid with the greyed days of the neighbouring\n   * months. It is off by default.\n   */\n  showAdjacentDays?: boolean\n  /**\n   * Lets those neighbouring days be clicked, which moves the calendar to their month.\n   * A clickable day has to be visible, so this implies showing them.\n   */\n  selectAdjacentDays?: boolean\n  /** The events to mark, as up to three coloured dots under the day they fall on. */\n  events?: DatePickerEvent[]\n  /**\n   * Makes the whole calendar unusable: no date can be chosen, no month reached, and\n   * everything greys out through the colour tokens.\n   */\n  disabled?: boolean\n  /**\n   * Shows what is selected without letting it be changed. The calendar can still be read and\n   * walked through (another month, another year), which separates it from `disabled`.\n   */\n  readonly?: boolean\n  /**\n   * The accessible name of the whole picker, its header and its grid together. It falls back to\n   * the dictionary, and a consumer `aria-label` wins.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<DatePickerProps>(), {\n  selection: 'single',\n  locale: undefined,\n  firstDayOfWeek: undefined,\n  min: undefined,\n  max: undefined,\n  disabledDates: undefined,\n  showAdjacentDays: false,\n  selectAdjacentDays: false,\n  events: undefined,\n  disabled: false,\n  readonly: false,\n  label: undefined,\n})\n\n/**\n * What is selected, and its shape follows `selection`: an ISO `YYYY-MM-DD` string for `single`,\n * a `{ start, end }` pair for `range`, an array of strings for `multiple`.\n */\nconst model = defineModel<DatePickerValue>({ default: null })\n\nconst emit = defineEmits<{\n  /**\n   * Emitted every time a date is chosen, carrying the complete value as it now\n   * stands. VDateInput listens to it to close its panel on a single selection.\n   */\n  select: [value: DatePickerValue]\n}>()\n\ndefineSlots<{\n  /**\n   * Replaces the content of a day cell, to show a price or an availability under the\n   * number for instance. It receives everything known about that day, including\n   * whether it belongs to the displayed month.\n   */\n  day?(props: DatePickerDaySlotProps): unknown\n  /** The strip under the grid, for actions such as Close or Save, or for preset dates. */\n  footer?(): unknown\n}>()\n\nconst gridLabelId = useId()\n\n// The navigation labels have no prop of their own: the dictionary is the single place to change\n// them, globally or per language; see `src/i18n/`.\nconst m = useMessages()\n// @a11y\n// A roleless box cannot carry an accessible name (axe: aria-prohibited-attr),\n// so the root is a named group: the VCarousel viewport arrangement.\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.datePicker.label)\nconst resolvedLocale = useResolvedLocale(() => props.locale)\n\n// @devwarn\nif (isDev && !inject(hostWarnsKey, false)) {\n  watchEffect(() => {\n    if (props.min && props.max && compareISO(props.min, props.max) > 0)\n      console.warn(\n        `[VDatePicker] min \"${props.min}\" falls after max \"${props.max}\", so no date can be chosen.`,\n      )\n  })\n}\n\nconst resolvedFirstDay = computed(\n  () => props.firstDayOfWeek ?? firstDayOfWeekFor(resolvedLocale.value),\n)\nconst weekdays = computed(() => weekdayNames(resolvedLocale.value, resolvedFirstDay.value, 'short'))\nconst weekdaysLong = computed(() =>\n  weekdayNames(resolvedLocale.value, resolvedFirstDay.value, 'long'),\n)\nconst monthLabels = computed(() => monthNamesCompact(resolvedLocale.value))\n/** The full names the compact cells are spoken with: \"Jan.\" is not a word to hear. */\nconst monthNamesLong = computed(() => monthNames(resolvedLocale.value))\n\nconst singleValue = computed(() =>\n  props.selection === 'single' && typeof model.value === 'string' && isValidISO(model.value)\n    ? model.value\n    : null,\n)\nconst rangeValue = computed<DatePickerRange>(() => {\n  if (\n    props.selection === 'range' &&\n    model.value &&\n    typeof model.value === 'object' &&\n    !Array.isArray(model.value)\n  ) {\n    return model.value as DatePickerRange\n  }\n  return { start: null, end: null }\n})\nconst multipleValues = computed<string[]>(() =>\n  props.selection === 'multiple' && Array.isArray(model.value) ? model.value : [],\n)\n\n// A range start or a list entry is validated here, the way the single value is validated\n// upstream. Those two reach this component exactly as the consumer wrote them, and a malformed\n// one (`{ start: 'foo' }`) made the focused date unparseable: the month arrows assert that\n// parse, so the first render threw.\nfunction initialFocus(): string {\n  if (singleValue.value) return singleValue.value\n  const start = rangeValue.value.start\n  if (start && isValidISO(start)) return start\n  const listed = multipleValues.value.find(isValidISO)\n  if (listed) return listed\n  readTheClock = true\n  return clampISO(formatISO(new Date()), props.min, props.max)\n}\n/** Whether the month on display was read from the clock at setup: see `renderEpoch`. */\nlet readTheClock = false\nconst focusedISO = ref(initialFocus())\nconst view = ref<'days' | 'months' | 'years'>('days')\n\nconst viewYear = computed(\n  () => parseISO(focusedISO.value)?.getFullYear() ?? new Date().getFullYear(),\n)\nconst viewMonth0 = computed(() => parseISO(focusedISO.value)?.getMonth() ?? 0)\nconst monthLabel = computed(() => monthName(resolvedLocale.value, viewMonth0.value))\nconst gridLabel = computed(() =>\n  monthYearName(resolvedLocale.value, viewYear.value, viewMonth0.value),\n)\n\n// @ssr\n// Today's date is only read once the component is mounted, hence on the client: the\n// server has no way to know it, and rendering it during setup would make the two\n// markups differ and break hydration.\nconst today = ref<string | null>(null)\n\n// @ssr\n/*\n * With nothing selected, the month on display is read from the clock at setup, on the server\n * and again in the browser, and the two can disagree: a page prerendered in September and\n * opened in October, or a server a timezone behind its visitor on the last evening of a month.\n * Hydration then patches the TEXT and keeps the server's ATTRIBUTES, so the month button said\n * \"Oct.\" on screen and \"September\" to a screen reader, and the day ids `focusDay` looks up\n * named days that were not there.\n */\nconst renderEpoch = ref(0)\nonMounted(() => {\n  today.value = formatISO(new Date())\n  if (readTheClock) renderEpoch.value++\n})\n\nconst isDisabledDate = computed(() => resolveMatcher(props.disabledDates))\n\nconst eventsByDate = computed(() => {\n  const map = new Map<string, DatePickerEvent[]>()\n  for (const ev of props.events ?? []) {\n    const list = map.get(ev.date) ?? []\n    list.push(ev)\n    map.set(ev.date, list)\n  }\n  return map\n})\n\nconst hoverISO = ref<string | null>(null)\nfunction orderRange(a: string, b: string): DatePickerRange {\n  return compareISO(a, b) <= 0 ? { start: a, end: b } : { start: b, end: a }\n}\nconst effectiveRange = computed<DatePickerRange>(() => {\n  if (props.selection !== 'range') return { start: null, end: null }\n  const r = rangeValue.value\n  if (r.start && r.end) return orderRange(r.start, r.end)\n  // A start is set but the end is still pending: the range is previewed up to\n  // whichever day the pointer or the focus is currently on.\n  const preview = hoverISO.value ?? focusedISO.value\n  if (r.start && preview) return orderRange(r.start, preview)\n  return { start: r.start, end: r.end }\n})\n\n/**\n * Whether a day is part of the COMMITTED value, which `aria-selected` says: the end a range\n * preview is drawing is not selected yet, and announcing every day the focus walks over as\n * \"selected\" would say so.\n */\nfunction isCommitted(iso: string): boolean {\n  if (props.selection !== 'range') return isSelected(iso)\n  return isSameISO(iso, rangeValue.value.start) || isSameISO(iso, rangeValue.value.end)\n}\n\nfunction isSelected(iso: string): boolean {\n  if (props.selection === 'single') return isSameISO(iso, singleValue.value)\n  if (props.selection === 'multiple') return multipleValues.value.includes(iso)\n  // In range selection, the two ends of the period count as selected; including the provisional\n  // end shown during the preview.\n  return isSameISO(iso, effectiveRange.value.start) || isSameISO(iso, effectiveRange.value.end)\n}\n/** Whether a day falls inside the selected period, both ends included. */\nfunction isInRange(iso: string): boolean {\n  const { start, end } = effectiveRange.value\n  return !!start && !!end && compareISO(iso, start) >= 0 && compareISO(iso, end) <= 0\n}\n\ntype DayCell = {\n  iso: string\n  day: number\n  kind: 'empty' | 'static' | 'button'\n  inMonth: boolean\n  disabled: boolean\n  selected: boolean\n  /** Selected in the value itself, the preview left out: what `aria-selected` reports. */\n  committed: boolean\n  rangeStart: boolean\n  rangeEnd: boolean\n  inRange: boolean\n  today: boolean\n  events: DatePickerEvent[]\n  /** The events drawn as dots under the number, three at most. */\n  dots: DatePickerEvent[]\n  /** The labels of its events, joined, for the day's accessible name. */\n  eventText: string\n}\n\n/** The 42 squares of the month on display, rebuilt only when the MONTH changes. */\nconst grid = computed(() =>\n  buildMonthGrid(viewYear.value, viewMonth0.value, resolvedFirstDay.value),\n)\n\nconst NO_EVENTS: DatePickerEvent[] = []\n\nconst days = computed<DayCell[]>(() =>\n  grid.value.map((cell) => {\n    const inMonth = cell.adjacent === null\n    // Making the neighbouring days clickable implies showing them: a day nobody can\n    // see cannot be clicked.\n    const show = inMonth || props.showAdjacentDays || props.selectAdjacentDays\n    const selectable = inMonth || props.selectAdjacentDays\n    const disabled = !isDateAllowed(cell.iso, props.min, props.max, isDisabledDate.value)\n    const kind: DayCell['kind'] = !show ? 'empty' : selectable ? 'button' : 'static'\n    const events = eventsByDate.value.get(cell.iso) ?? NO_EVENTS\n    return {\n      iso: cell.iso,\n      day: cell.day,\n      kind,\n      inMonth,\n      disabled,\n      selected: kind === 'button' && !disabled && isSelected(cell.iso),\n      committed: kind === 'button' && !disabled && isCommitted(cell.iso),\n      rangeStart: props.selection === 'range' && isSameISO(cell.iso, effectiveRange.value.start),\n      rangeEnd: props.selection === 'range' && isSameISO(cell.iso, effectiveRange.value.end),\n      inRange: props.selection === 'range' && isInRange(cell.iso),\n      today: isSameISO(cell.iso, today.value),\n      events,\n      dots: events.length > 3 ? events.slice(0, 3) : events,\n      eventText: events\n        .map((ev) => ev.label)\n        .filter(Boolean)\n        .join(', '),\n    }\n  }),\n)\n\n/** What the `#day` slot receives for a square: the same object for both kinds of cell. */\nfunction daySlotProps(cell: DayCell): DatePickerDaySlotProps {\n  return {\n    iso: cell.iso,\n    day: cell.day,\n    inMonth: cell.inMonth,\n    disabled: cell.disabled,\n    selected: cell.selected,\n    today: cell.today,\n    inRange: cell.inRange,\n    events: cell.events,\n  }\n}\nconst weeks = computed(() => {\n  const rows: DayCell[][] = []\n  for (let i = 0; i < days.value.length; i += 7) rows.push(days.value.slice(i, i + 7))\n  return rows\n})\n\nfunction monthHasSelectable(year: number, month0: number): boolean {\n  const first = isoOf(year, month0, 1)\n  const last = isoOf(year, month0, daysInMonth(year, month0))\n  return (\n    (!props.max || compareISO(first, props.max) <= 0) &&\n    (!props.min || compareISO(last, props.min) >= 0)\n  )\n}\n// Derived from the month on display, not from the focused day, so an arrow key moving the\n// focus inside the month does not recompute them.\nconst canPrevMonth = computed(() =>\n  viewMonth0.value === 0\n    ? monthHasSelectable(viewYear.value - 1, 11)\n    : monthHasSelectable(viewYear.value, viewMonth0.value - 1),\n)\nconst canNextMonth = computed(() =>\n  viewMonth0.value === 11\n    ? monthHasSelectable(viewYear.value + 1, 0)\n    : monthHasSelectable(viewYear.value, viewMonth0.value + 1),\n)\nconst canPrevYear = computed(\n  () => !props.min || compareISO(isoOf(viewYear.value - 1, 11, 31), props.min) >= 0,\n)\nconst canNextYear = computed(\n  () => !props.max || compareISO(isoOf(viewYear.value + 1, 0, 1), props.max) <= 0,\n)\n\n// @a11y\n// Moves the real DOM focus onto a day cell. The grid keeps exactly one cell in the\n// tab order, so navigating means focusing another one.\nconst dayId = (iso: string) => `${gridLabelId}-d-${iso}`\nfunction focusDay(iso: string, options?: FocusOptions) {\n  nextTick(() => document.getElementById(dayId(iso))?.focus(options))\n}\n\nfunction goTo(iso: string, moveFocus = false) {\n  // Every move through the calendar comes here, so one guard covers the arrows, the\n  // month and year cells and the keyboard's own steps. Only `disabled` stops it:\n  // `readonly` leaves the reader free to look around.\n  if (props.disabled) return\n  focusedISO.value = clampISO(iso, props.min, props.max)\n  if (moveFocus && view.value === 'days') focusDay(focusedISO.value)\n}\nfunction stepMonth(delta: number) {\n  goTo(addMonths(focusedISO.value, delta))\n}\nfunction stepYear(delta: number) {\n  goTo(addMonths(focusedISO.value, delta * 12))\n}\n\n// @a11y @core\n// Changing view has to carry the focus onto the cell the new view\n// opens on. Without that move the focus would stay on a button the view has just\n// removed from the document, and the keyboard would have nowhere to go.\nfunction toggleView(target: 'months' | 'years') {\n  const next = view.value === target ? 'days' : target\n  view.value = next\n  if (next === 'months') {\n    focusedMonth.value = viewMonth0.value\n    nextTick(() => monthCellEl(viewMonth0.value)?.focus())\n  } else if (next === 'years') {\n    focusedYear.value = viewYear.value\n    nextTick(() => {\n      const cell = yearCellEl(viewYear.value)\n      // Called optionally because jsdom does not implement scrollIntoView (the same\n      // guard as VTimeInput's list). Centring the year is a nicety; the focus call\n      // below is not, so it must not be taken down with it.\n      cell?.scrollIntoView?.({ block: 'center' })\n      cell?.focus()\n    })\n  } else if (view.value === 'days') {\n    focusDay(focusedISO.value)\n  }\n}\n\nfunction selectDay(cell: DayCell) {\n  // Navigation is deliberately not guarded by `readonly`: a calendar one may read is a calendar\n  // one may leaf through.\n  if (props.disabled || props.readonly) return\n  if (cell.kind !== 'button' || cell.disabled) return\n  focusedISO.value = cell.iso\n  let next: DatePickerValue\n  if (props.selection === 'single') {\n    next = cell.iso\n  } else if (props.selection === 'multiple') {\n    next = toggleValue(multipleValues.value, cell.iso).sort(compareISO)\n  } else {\n    // Range selection reads three clicks: the first sets the start, the second the\n    // end (reordered if it comes before the start), and the third starts a new\n    // period.\n    const r = rangeValue.value\n    next = !r.start || r.end ? { start: cell.iso, end: null } : orderRange(r.start, cell.iso)\n  }\n  lastWritten = JSON.stringify(next)\n  model.value = next\n  // Emit what was just computed, never `model.value` read back. Under a parent `v-model`,\n  // `defineModel` does not update its local copy on write; it waits for the parent to\n  // re-render; so the read would hand `select` the PREVIOUS value.\n  emit('select', next)\n}\n\n// @keyboard @a11y\n// The keyboard of the days view. The table turning a key into a step is pure and\n// lives in `./keyboard`; what stays here is the date that step is applied to, and\n// the focus move that follows.\nfunction onDaysKeydown(event: KeyboardEvent) {\n  if (event.altKey || event.ctrlKey || event.metaKey) return\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault()\n    const cell = days.value.find((c) => c.iso === focusedISO.value)\n    if (cell) selectDay(cell)\n    return\n  }\n  const d = parseISO(focusedISO.value)!\n  // How far the focused day sits from the start of its week, which is exactly what\n  // Home and End have to step back and forward by.\n  const offset = (d.getDay() - resolvedFirstDay.value + 7) % 7\n  const step = dayStep(event.key, event.shiftKey, offset)\n  if (!step) return\n  event.preventDefault()\n  goTo(\n    'days' in step\n      ? addDays(focusedISO.value, step.days)\n      : addMonths(focusedISO.value, step.months),\n    true,\n  )\n}\n\n/**\n * Leaving the months or the years view for the days of the month chosen, keeping the day of the\n * month where the new month has one; the 31st becoming the 30th, say.\n */\nfunction chooseYearMonth(year: number, month0: number) {\n  const day = Math.min(parseISO(focusedISO.value)!.getDate(), daysInMonth(year, month0))\n  goTo(isoOf(year, month0, day))\n  view.value = 'days'\n  focusDay(focusedISO.value)\n}\n\n// @keyboard @a11y\n/**\n * The keyboard of the months and the years views, which differ only in what their cells\n * hold: Enter or Space chooses the focused cell, and the arrows walk the list of cells a row\n * or a column at a time, stopping at either end.\n */\nfunction onViewKeydown(\n  event: KeyboardEvent,\n  cells: readonly number[],\n  focused: Ref<number>,\n  cellEl: (value: number) => HTMLElement | null,\n  choose: (value: number) => void,\n  selectable: (value: number) => boolean = () => true,\n) {\n  if (event.altKey || event.ctrlKey || event.metaKey) return\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault()\n    choose(focused.value)\n    return\n  }\n  const delta = gridDelta(event.key)\n  if (delta === undefined) return\n  event.preventDefault()\n  // A cell the bounds rule out is a disabled button, which cannot take the focus: landing on it\n  // would move the tab stop where the focus cannot follow. The walk goes on the same way round\n  // to the next cell that can be chosen, and holds still when there is none.\n  let next = clamp(cells.indexOf(focused.value) + delta, 0, cells.length - 1)\n  while (!selectable(cells[next]!) && next + delta >= 0 && next + delta < cells.length)\n    next += delta\n  if (!selectable(cells[next]!)) return\n  focused.value = cells[next]!\n  cellEl(focused.value)?.focus()\n}\n\nconst MONTHS = Array.from({ length: 12 }, (_, i) => i)\nconst focusedMonth = ref(viewMonth0.value)\nconst monthCellEl = (i: number) =>\n  document.getElementById(`${gridLabelId}-m-${i}`) as HTMLElement | null\nfunction monthSelectable(i: number) {\n  return monthHasSelectable(viewYear.value, i)\n}\nfunction chooseMonth(i: number) {\n  if (monthSelectable(i)) chooseYearMonth(viewYear.value, i)\n}\nconst onMonthsKeydown = (event: KeyboardEvent) =>\n  onViewKeydown(event, MONTHS, focusedMonth, monthCellEl, chooseMonth, monthSelectable)\n\n// @a11y\n/*\n * Both pickers are a `role=\"grid\"`, and a grid owns ROWS, not cells: a gridcell placed straight\n * under the grid fails aria-required-children and aria-required-parent at the same time. The\n * cells are therefore cut into rows of PICKER_COLUMNS, matching the `grid-template-columns` of\n * the stylesheet; the row element itself is `display: contents`, so the CSS grid never sees it.\n */\nconst chunk = <T,>(list: T[]) =>\n  Array.from({ length: Math.ceil(list.length / PICKER_COLUMNS) }, (_, r) =>\n    list.slice(r * PICKER_COLUMNS, r * PICKER_COLUMNS + PICKER_COLUMNS),\n  )\n\nconst monthRows = computed(() => chunk(monthLabels.value.map((name, i) => ({ name, i }))))\n\nconst yearRange = computed(() => {\n  /*\n   * `min` and `max` come straight from the consumer, and this is the only place where they are\n   * turned into a Date instead of being compared as ISO text; `compareISO`, `isWithin` and\n   * `clampISO` all tolerate a malformed bound. A value that is not a valid ISO date therefore\n   * has to fall back to the open range here: asserting the parse would throw and take the whole\n   * render down the moment the years view is opened.\n   */\n  const minY = parseISO(props.min)?.getFullYear() ?? viewYear.value - 100\n  const maxY = parseISO(props.max)?.getFullYear() ?? viewYear.value + 100\n  const list: number[] = []\n  for (let y = minY; y <= maxY; y++) list.push(y)\n  return list\n})\nconst yearRows = computed(() => chunk(yearRange.value))\nconst focusedYear = ref(viewYear.value)\nconst yearCellEl = (y: number) =>\n  document.getElementById(`${gridLabelId}-y-${y}`) as HTMLElement | null\nconst chooseYear = (y: number) => chooseYearMonth(y, viewMonth0.value)\nconst onYearsKeydown = (event: KeyboardEvent) =>\n  onViewKeydown(event, yearRange.value, focusedYear, yearCellEl, chooseYear)\n\n// Only from the OUTSIDE. The picker's own writes change the leading value too: unticking the\n// earliest date of a list makes the next one lead, and following it would throw the reader into\n// another month and drop the focus on `<body>`, the day they were on having left the document.\nlet lastWritten: string | undefined\nwatch(\n  () => [singleValue.value, rangeValue.value.start, multipleValues.value[0]],\n  () => {\n    if (lastWritten !== undefined && JSON.stringify(model.value) === lastWritten) return\n    const primary = singleValue.value ?? rangeValue.value.start ?? multipleValues.value[0]\n    if (primary && isValidISO(primary)) {\n      const d = parseISO(primary)!\n      if (d.getFullYear() !== viewYear.value || d.getMonth() !== viewMonth0.value) {\n        focusedISO.value = primary\n      }\n    }\n  },\n)\n\n// @a11y\n/**\n * Brings the focus into the grid, on the day the calendar is currently showing. This\n * is what VDateInput calls when it opens its panel.\n */\nfunction focus(options?: FocusOptions) {\n  view.value = 'days'\n  focusDay(focusedISO.value, options)\n}\n\n// @core\n/*\n * A panel's content stays MOUNTED while the panel is closed, so without this the months or\n * years view a reader left open is what the next opening shows; and a field that opens its\n * panel on focus never calls `focus()`, the one place that reset the view.\n */\nfunction reset() {\n  view.value = 'days'\n  hoverISO.value = null\n  focusedISO.value = initialFocus()\n}\n\ndefineExpose({\n  /** Brings the focus into the grid, onto the day the calendar is showing. */\n  focus,\n  /**\n   * Returns to the days view, on the selected date or today, without moving the focus.\n   * VDateInput calls it each time its panel opens and closes.\n   */\n  reset,\n})\n</script>\n\n<template>\n  <div\n    class=\"v-date-picker\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :data-view=\"view\"\n    :data-selection=\"selection\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    @pointerleave=\"hoverISO = null\"\n  >\n    <!-- The header: the month and the year, each between two chevrons that step it,\n         and each opening its own picker view when clicked -->\n    <div :key=\"`header-${renderEpoch}`\" class=\"v-date-picker-header\">\n      <div class=\"v-date-picker-nav\">\n        <VIconButton\n          :label=\"m.datePicker.previousMonth\"\n          size=\"sm\"\n          :disabled=\"disabled || !canPrevMonth\"\n          @click=\"stepMonth(-1)\"\n        >\n          <VIcon :name=\"chevronLeftIcon\" mirrored />\n        </VIconButton>\n        <VButton\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          class=\"v-date-picker-view-toggle\"\n          :disabled=\"disabled\"\n          :aria-expanded=\"view === 'months'\"\n          :aria-label=\"monthLabel\"\n          @click=\"toggleView('months')\"\n        >\n          {{ monthLabels[viewMonth0] }}\n          <VIcon\n            :name=\"view === 'months' ? arrowDropUpIcon : arrowDropDownIcon\"\n            aria-hidden=\"true\"\n          />\n        </VButton>\n        <VIconButton\n          :label=\"m.datePicker.nextMonth\"\n          size=\"sm\"\n          :disabled=\"disabled || !canNextMonth\"\n          @click=\"stepMonth(1)\"\n        >\n          <VIcon :name=\"chevronRightIcon\" mirrored />\n        </VIconButton>\n      </div>\n\n      <div class=\"v-date-picker-nav\">\n        <VIconButton\n          :label=\"m.datePicker.previousYear\"\n          size=\"sm\"\n          :disabled=\"disabled || !canPrevYear\"\n          @click=\"stepYear(-1)\"\n        >\n          <VIcon :name=\"chevronLeftIcon\" mirrored />\n        </VIconButton>\n        <VButton\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          class=\"v-date-picker-view-toggle\"\n          :disabled=\"disabled\"\n          :aria-expanded=\"view === 'years'\"\n          @click=\"toggleView('years')\"\n        >\n          {{ viewYear }}\n          <VIcon\n            :name=\"view === 'years' ? arrowDropUpIcon : arrowDropDownIcon\"\n            aria-hidden=\"true\"\n          />\n        </VButton>\n        <VIconButton\n          :label=\"m.datePicker.nextYear\"\n          size=\"sm\"\n          :disabled=\"disabled || !canNextYear\"\n          @click=\"stepYear(1)\"\n        >\n          <VIcon :name=\"chevronRightIcon\" mirrored />\n        </VIconButton>\n      </div>\n    </div>\n\n    <div\n      v-show=\"view === 'days'\"\n      :key=\"`days-${renderEpoch}`\"\n      class=\"v-date-picker-grid\"\n      role=\"grid\"\n      :aria-label=\"gridLabel\"\n      :aria-multiselectable=\"selection === 'multiple' ? 'true' : undefined\"\n      @keydown=\"onDaysKeydown\"\n    >\n      <div class=\"v-date-picker-weekdays\" role=\"row\">\n        <span\n          v-for=\"(w, i) in weekdays\"\n          :key=\"w\"\n          class=\"v-date-picker-weekday\"\n          role=\"columnheader\"\n          :aria-label=\"weekdaysLong[i]\"\n          >{{ w }}</span\n        >\n      </div>\n      <div v-for=\"(week, wi) in weeks\" :key=\"wi\" class=\"v-date-picker-week\" role=\"row\">\n        <div\n          v-for=\"cell in week\"\n          :key=\"cell.iso\"\n          class=\"v-date-picker-cell\"\n          role=\"gridcell\"\n          :aria-selected=\"cell.kind === 'button' ? cell.committed : undefined\"\n          :data-in-range=\"cell.inRange ? '' : undefined\"\n          :data-range-start=\"cell.rangeStart ? '' : undefined\"\n          :data-range-end=\"cell.rangeEnd ? '' : undefined\"\n        >\n          <button\n            v-if=\"cell.kind === 'button'\"\n            :id=\"dayId(cell.iso)\"\n            type=\"button\"\n            class=\"v-date-picker-day\"\n            :tabindex=\"cell.iso === focusedISO ? 0 : -1\"\n            :data-outside=\"!cell.inMonth ? '' : undefined\"\n            :data-selected=\"cell.selected ? '' : undefined\"\n            :data-today=\"cell.today ? '' : undefined\"\n            :data-unavailable=\"cell.disabled ? '' : undefined\"\n            :disabled=\"disabled\"\n            :aria-disabled=\"cell.disabled || readonly ? 'true' : undefined\"\n            :aria-current=\"cell.today ? 'date' : undefined\"\n            @click=\"selectDay(cell)\"\n            @pointerenter=\"hoverISO = cell.iso\"\n            @focus=\"hoverISO = cell.iso\"\n          >\n            <slot name=\"day\" v-bind=\"daySlotProps(cell)\">\n              <span class=\"v-date-picker-day-num\">{{ cell.day }}</span>\n            </slot>\n            <!-- The dots are hidden from assistive technology, so what they stand for is\n                 spoken here, as part of the day's name. -->\n            <span v-if=\"cell.eventText\" class=\"v-visually-hidden\">, {{ cell.eventText }}</span>\n            <span v-if=\"cell.dots.length\" class=\"v-date-picker-dots\" aria-hidden=\"true\">\n              <span\n                v-for=\"(ev, ei) in cell.dots\"\n                :key=\"ei\"\n                class=\"v-date-picker-dot\"\n                :style=\"ev.color ? { '--date-picker-dot-color': ev.color } : undefined\"\n              />\n            </span>\n          </button>\n          <!--\n            A day of a neighbouring month that cannot be selected. It renders the very same slot\n            as the clickable days: were it left with the bare number, custom content taking\n            several lines would apply to this month's days only, and the numbers would stop\n            lining up from one cell to the next.\n          -->\n          <span\n            v-else-if=\"cell.kind === 'static'\"\n            class=\"v-date-picker-day v-date-picker-day--static\"\n            :data-disabled=\"cell.disabled ? '' : undefined\"\n          >\n            <slot name=\"day\" v-bind=\"daySlotProps(cell)\">\n              <span class=\"v-date-picker-day-num\">{{ cell.day }}</span>\n            </slot>\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div\n      v-if=\"view === 'months'\"\n      class=\"v-date-picker-view\"\n      role=\"grid\"\n      :aria-label=\"m.datePicker.monthPicker\"\n      @keydown=\"onMonthsKeydown\"\n    >\n      <div v-for=\"(row, r) in monthRows\" :key=\"r\" class=\"v-date-picker-view-row\" role=\"row\">\n        <button\n          v-for=\"{ name, i } in row\"\n          :id=\"`${gridLabelId}-m-${i}`\"\n          :key=\"i\"\n          type=\"button\"\n          class=\"v-date-picker-view-cell\"\n          role=\"gridcell\"\n          :tabindex=\"i === focusedMonth ? 0 : -1\"\n          :data-selected=\"i === viewMonth0 ? '' : undefined\"\n          :aria-selected=\"i === viewMonth0 ? 'true' : undefined\"\n          :aria-label=\"monthNamesLong[i]\"\n          :disabled=\"disabled || !monthSelectable(i)\"\n          @click=\"chooseMonth(i)\"\n        >\n          {{ name }}\n        </button>\n      </div>\n    </div>\n\n    <div\n      v-if=\"view === 'years'\"\n      class=\"v-date-picker-view v-date-picker-view--years\"\n      role=\"grid\"\n      :aria-label=\"m.datePicker.yearPicker\"\n      @keydown=\"onYearsKeydown\"\n    >\n      <div v-for=\"(row, r) in yearRows\" :key=\"r\" class=\"v-date-picker-view-row\" role=\"row\">\n        <button\n          v-for=\"y in row\"\n          :id=\"`${gridLabelId}-y-${y}`\"\n          :key=\"y\"\n          type=\"button\"\n          class=\"v-date-picker-view-cell\"\n          role=\"gridcell\"\n          :tabindex=\"y === focusedYear ? 0 : -1\"\n          :data-selected=\"y === viewYear ? '' : undefined\"\n          :aria-selected=\"y === viewYear ? 'true' : undefined\"\n          :disabled=\"disabled\"\n          @click=\"chooseYear(y)\"\n        >\n          {{ y }}\n        </button>\n      </div>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"v-date-picker-footer\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-date-picker {\n    /*\n     * The consumer sets the size of the day disc through its token; the cell around it; the\n     * hover area and the width of the column; grows to follow, and never falls below the size\n     * the cell token sets.\n     */\n    --date-picker-cell: max(\n      var(--vectis-control-size-date-picker-cell),\n      calc(var(--vectis-control-size-date-picker-day) + var(--vectis-space-1))\n    );\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--vectis-space-2);\n    padding: var(--vectis-space-3);\n    font-family: var(--vectis-text-family);\n    color: var(--vectis-color-text);\n  }\n\n  /*\n   * The days grid then fills that width through its 1fr columns, and never goes below the seven\n   * cells its own floor guarantees.\n   */\n  .v-date-picker-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-date-picker-nav {\n    display: flex;\n    align-items: center;\n  }\n\n  /* A minimum width holds this button steady, so the chevrons on either side do not\n     shift as the month or year label changes length. */\n  /* Qualified by an attribute the button always renders: `.v-button` sets its own\n     `font-weight` at (0,1,0), and a tie between the two sheets would leave the weight to\n     whichever the consumer's bundler put last. */\n  .v-date-picker-view-toggle[data-size] {\n    min-inline-size: var(--vectis-control-size-date-picker-nav-min);\n    font-weight: var(--vectis-font-weight-semibold);\n    text-transform: capitalize;\n  }\n\n  /*\n   * The days grid can never be narrower than seven cells. Above that floor it takes whatever\n   * width the calendar has; set by the header; and the 1fr columns share it out equally.\n   */\n  .v-date-picker-grid {\n    min-inline-size: calc(7 * var(--date-picker-cell));\n  }\n\n  .v-date-picker-weekdays,\n  .v-date-picker-week {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n  }\n\n  .v-date-picker-weekday {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--vectis-control-height-sm);\n    /* A column micro-header, which takes the overline type role. The casing stays\n       `capitalize`, the calendar convention, rather than the full capitals the\n       VTypography overline variant would apply. */\n    font-size: var(--vectis-text-overline-size);\n    font-weight: var(--vectis-text-overline-weight);\n    letter-spacing: var(--vectis-text-overline-tracking);\n    color: var(--vectis-color-text-muted);\n    text-transform: capitalize;\n  }\n\n  .v-date-picker-cell {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--date-picker-cell);\n  }\n\n  /*\n   * The two cap rules below only shape a pseudo-element that `[data-in-range]` has already\n   * created, so they depend on `isInRange` counting both ends of the period as inside it. Make\n   * it exclusive and there is no `::before` to cap: both rounded ends of every range vanish,\n   * leaving a band that stops square one cell short at each side, with nothing in the console.\n   */\n  .v-date-picker-cell[data-in-range]::before {\n    content: '';\n    position: absolute;\n    inset-block: calc((100% - var(--vectis-control-size-date-picker-day)) / 2);\n    inset-inline: 0;\n    background: var(--vectis-color-accent-surface);\n    z-index: 0;\n  }\n  .v-date-picker-cell[data-range-start]::before {\n    inset-inline-start: calc((100% - var(--vectis-control-size-date-picker-day)) / 2);\n    border-start-start-radius: var(--vectis-radius-pill);\n    border-end-start-radius: var(--vectis-radius-pill);\n  }\n  .v-date-picker-cell[data-range-end]::before {\n    inset-inline-end: calc((100% - var(--vectis-control-size-date-picker-day)) / 2);\n    border-start-end-radius: var(--vectis-radius-pill);\n    border-end-end-radius: var(--vectis-radius-pill);\n  }\n  .v-date-picker-cell[data-range-start][data-range-end]::before {\n    content: none;\n  }\n\n  .v-date-picker-day {\n    position: relative;\n    z-index: 1;\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--vectis-control-size-date-picker-day);\n    block-size: var(--vectis-control-size-date-picker-day);\n    padding: 0;\n    border: none;\n    border-radius: var(--vectis-radius-pill);\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    font-size: var(--vectis-text-body-md-size);\n    cursor: pointer;\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* Hover belongs to the days one can actually click: not the disabled ones, not the\n     already selected ones, and not the neighbouring days rendered as plain spans. */\n  .v-date-picker-day:hover:not(:disabled):not([aria-disabled='true']):not([data-selected]):not(\n      .v-date-picker-day--static\n    ) {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-date-picker-day[data-outside] {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * The semibold in the two rules below marks a state; today, and the selection; and is not a\n   * typographic role, which is why it reads a font token directly.\n   */\n  .v-date-picker-day[data-today]:not([data-selected]) {\n    box-shadow: inset 0 0 0 1px var(--vectis-color-accent-border);\n    color: var(--vectis-color-accent-text);\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n\n  .v-date-picker-day[data-selected] {\n    background: var(--vectis-color-accent);\n    color: var(--vectis-color-text-on-accent);\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n\n  /*\n   * It hangs on its own attribute rather than on `aria-disabled`, which a read-only calendar\n   * also carries on every day: nothing can be chosen there, but the dates themselves are\n   * perfectly available and striking them all out would say the opposite. The hover rule below\n   * still reads `aria-disabled`, so neither highlights.\n   */\n  .v-date-picker-day[data-unavailable] {\n    color: var(--vectis-color-text-subtle);\n    text-decoration: line-through;\n    cursor: not-allowed;\n  }\n\n  .v-date-picker[data-readonly] .v-date-picker-day:not([data-unavailable]) {\n    cursor: default;\n  }\n\n  /* A disabled calendar greys out through the colour tokens and never through opacity,\n     the selection included: left in the accent colour it would go on looking live. */\n  .v-date-picker-day:disabled {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-date-picker[data-disabled] .v-date-picker-day[data-selected] {\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-date-picker-day--static {\n    color: var(--vectis-color-text-subtle);\n    cursor: default;\n  }\n\n  /* A neighbouring day that falls outside the bounds, or is disabled, is struck\n     through like any other unavailable date. */\n  .v-date-picker-day--static[data-disabled] {\n    text-decoration: line-through;\n    cursor: not-allowed;\n  }\n\n  .v-date-picker-day:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-date-picker-day-num {\n    line-height: var(--vectis-text-control-leading);\n  }\n\n  .v-date-picker-dots {\n    position: absolute;\n    /* Half a dot, below them and between them: the spacing scale has no step that small. */\n    inset-block-end: calc(var(--vectis-control-size-date-picker-dot) / 2);\n    display: flex;\n    gap: calc(var(--vectis-control-size-date-picker-dot) / 2);\n  }\n  .v-date-picker-dot {\n    inline-size: var(--vectis-control-size-date-picker-dot);\n    block-size: var(--vectis-control-size-date-picker-dot);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--date-picker-dot-color, var(--vectis-color-accent));\n  }\n  .v-date-picker-day[data-selected] .v-date-picker-dot {\n    background: var(--vectis-color-text-on-accent);\n  }\n\n  /* The months and years views. They fill the calendar's width exactly like the days\n     grid does: stretched by the flex column, then shared out by 1fr columns. */\n  .v-date-picker-view {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: var(--vectis-space-1);\n    min-inline-size: calc(7 * var(--date-picker-cell));\n  }\n  /* The rows ARIA requires inside a grid, made invisible to the layout: with\n     `display: contents` the cells remain direct grid items of `.v-date-picker-view`,\n     so the columns line up as if the rows were not there. */\n  .v-date-picker-view-row {\n    display: contents;\n  }\n\n  .v-date-picker-view--years {\n    max-block-size: calc(6 * var(--date-picker-cell));\n    overflow-y: auto;\n  }\n\n  .v-date-picker-view-cell {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    block-size: var(--vectis-control-height-lg);\n    border: none;\n    border-radius: var(--vectis-radius-pill);\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    font-size: var(--vectis-text-body-md-size);\n    text-transform: capitalize;\n    cursor: pointer;\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n  .v-date-picker-view-cell:hover:not(:disabled):not([data-selected]) {\n    background: var(--vectis-color-surface-muted);\n  }\n  .v-date-picker-view-cell[data-selected] {\n    background: var(--vectis-color-accent);\n    color: var(--vectis-color-text-on-accent);\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n  .v-date-picker-view-cell:disabled {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n  .v-date-picker-view-cell:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-date-picker-footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--vectis-space-2);\n    padding-block-start: var(--vectis-space-2);\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-date-picker-day,\n    .v-date-picker-view-cell {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VDatePicker.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VDatePicker/VDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @keyboard @core\n/**\n * A calendar shown directly in the page, as a grid of days, with a month view and a\n * year view behind it. It holds ALL the date, view and keyboard logic of the design\n * system; VDateInput does no more than dress it in a text field and a popover.\n *\n * The platform offers no accessible date grid to build on — `<input type=\"date\">`\n * can be neither styled nor composed — so the JavaScript here implements the ARIA\n * \"grid\" pattern by hand: a single cell in the tab order at a time, arrow and\n * page keys to move between dates, and selection of one date, a range or a list.\n * None of that can be expressed in HTML and CSS alone.\n *\n * Every date is handled in local time as an ISO `YYYY-MM-DD` string (see\n * `utils/date`), which is what keeps the server and the browser in agreement.\n */\n\nimport { computed, inject, nextTick, onMounted, ref, useId, watch, watchEffect } from 'vue'\nimport type { Ref } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { arrow_drop_down as arrowDropDownIcon } from '../VIcon/icons/arrow_drop_down'\nimport { arrow_drop_up as arrowDropUpIcon } from '../VIcon/icons/arrow_drop_up'\nimport { chevron_left as chevronLeftIcon } from '../VIcon/icons/chevron_left'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport {\n  addDays,\n  addMonths,\n  buildMonthGrid,\n  clampISO,\n  compareISO,\n  daysInMonth,\n  firstDayOfWeekFor,\n  formatISO,\n  isDateAllowed,\n  isoOf,\n  isSameISO,\n  isValidISO,\n  parseISO,\n  weekdayNames,\n} from '../../utils/date'\nimport { monthName, monthNames, monthNamesCompact, monthYearName } from './names'\n\nimport { PICKER_COLUMNS, dayStep, gridDelta } from './keyboard'\n\nimport { toggleValue } from '../../utils/array'\nimport { isDev } from '../../utils/env'\nimport { hostWarnsKey } from '../../utils/hostWarns'\nimport { resolveMatcher } from '../../utils/matcher'\nimport { clamp } from '../../utils/number'\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages, useResolvedLocale } from '../../i18n/state'\n\n/** What a click selects: one date, a period between two, or a list of dates. */\nexport type DatePickerSelection = 'single' | 'range' | 'multiple'\n\n/**\n * A period between two dates, the value of a `range` selection. Either bound may be\n * null: between the first and the second click, a range has a start and no end yet.\n */\nexport interface DatePickerRange {\n  /** The first day of the period, as an ISO `YYYY-MM-DD` string. */\n  start: string | null\n  /** The last day of the period, as an ISO `YYYY-MM-DD` string. */\n  end: string | null\n}\n\n/** Something happening on a given day, shown as a coloured dot under its number. */\nexport interface DatePickerEvent {\n  /** The day it falls on, as an ISO `YYYY-MM-DD` string. */\n  date: string\n  /** The colour of the dot, as any CSS colour. It is the accent colour by default. */\n  color?: string\n  /** A description of the event, spoken as part of the day's accessible name. */\n  label?: string\n}\n\n/**\n * Which dates cannot be selected, given either as a list of ISO strings or as a\n * function answering that question for a date.\n */\nexport type DatePickerMatcher = string[] | ((iso: string) => boolean)\n\n/** The shape of the v-model, which follows whichever `selection` is in use. */\nexport type DatePickerValue = string | null | DatePickerRange | string[]\n\n/** Everything the `#day` slot is told about the day it draws. */\nexport interface DatePickerDaySlotProps {\n  /** The day, as an ISO `YYYY-MM-DD` string. */\n  iso: string\n  /** The day of the month. */\n  day: number\n  /** Whether it belongs to the month on display rather than to a neighbouring one. */\n  inMonth: boolean\n  /** Whether it cannot be chosen: outside the bounds, or excluded by `disabledDates`. */\n  disabled: boolean\n  /** Whether it is selected. */\n  selected: boolean\n  /** Whether it is today. */\n  today: boolean\n  /** Whether it falls inside the selected period, both ends included. */\n  inRange: boolean\n  /** The events that fall on it. */\n  events: DatePickerEvent[]\n}\n\ninterface DatePickerProps {\n  /**\n   * What the reader is picking: a single date, a period between two dates, or any\n   * number of separate dates. It determines the shape of the v-model.\n   */\n  selection?: DatePickerSelection\n  /**\n   * A BCP 47 locale, which decides the month and day names and the first day of the\n   * week. It TAKES PRECEDENCE over the design system's global locale (`setLocale`)\n   * and falls back to it, which is why it has no literal default here: `undefined`\n   * has to stay recognizable for the global locale to have its chance.\n   */\n  locale?: string\n  /**\n   * Forces the day the weeks start on (0 for Sunday through 6 for Saturday). Left\n   * out, the locale decides.\n   */\n  firstDayOfWeek?: number\n  /**\n   * The earliest selectable date, as an ISO string. Neither navigation nor selection\n   * goes back beyond it.\n   */\n  min?: string\n  /**\n   * The latest selectable date, as an ISO string. Neither navigation nor selection\n   * goes past it.\n   */\n  max?: string\n  /**\n   * Dates that cannot be chosen, given as a list of ISO strings or as a function.\n   * They stay visible, struck through, and can still be reached with the keyboard.\n   */\n  disabledDates?: DatePickerMatcher\n  /**\n   * Also fills the empty corners of the grid with the greyed days of the neighbouring\n   * months. It is off by default.\n   */\n  showAdjacentDays?: boolean\n  /**\n   * Lets those neighbouring days be clicked, which moves the calendar to their month.\n   * A clickable day has to be visible, so this implies showing them.\n   */\n  selectAdjacentDays?: boolean\n  /** The events to mark, as up to three coloured dots under the day they fall on. */\n  events?: DatePickerEvent[]\n  /**\n   * Makes the whole calendar unusable: no date can be chosen, no month reached, and\n   * everything greys out through the colour tokens.\n   */\n  disabled?: boolean\n  /**\n   * Shows what is selected without letting it be changed. The calendar can still be\n   * read and walked through (another month, another year), which is what separates it\n   * from `disabled`.\n   */\n  readonly?: boolean\n  /**\n   * The accessible name of the whole picker, its header and its grid together. A range\n   * shown as two calendars side by side needs one each, or a screen reader announces the\n   * same group twice. It falls back to the dictionary, and a consumer `aria-label` wins.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<DatePickerProps>(), {\n  selection: 'single',\n  locale: undefined,\n  firstDayOfWeek: undefined,\n  min: undefined,\n  max: undefined,\n  disabledDates: undefined,\n  showAdjacentDays: false,\n  selectAdjacentDays: false,\n  events: undefined,\n  disabled: false,\n  readonly: false,\n  label: undefined,\n})\n\n/**\n * What is selected, and its SHAPE follows `selection`: an ISO `YYYY-MM-DD` string for\n * `single`, a `{ start, end }` pair for `range`, an array of strings for `multiple`. Nothing\n * is selected to begin with.\n *\n * Every date is a plain local-time string, never a `Date`, so the value a consumer receives\n * cannot shift a day across time zones.\n */\nconst model = defineModel<DatePickerValue>({ default: null })\n\nconst emit = defineEmits<{\n  /**\n   * Emitted every time a date is chosen, carrying the complete value as it now\n   * stands. VDateInput listens to it to close its panel on a single selection.\n   */\n  select: [value: DatePickerValue]\n}>()\n\ndefineSlots<{\n  /**\n   * Replaces the content of a day cell, to show a price or an availability under the\n   * number for instance. It receives everything known about that day, including\n   * whether it belongs to the displayed month.\n   */\n  day?(props: DatePickerDaySlotProps): unknown\n  /** The strip under the grid, for actions such as Close or Save, or for preset dates. */\n  footer?(): unknown\n}>()\n\nconst gridLabelId = useId()\n\n// The navigation labels have no prop of their own: the dictionary is the single\n// place to change them, globally or per language — see `src/i18n/`.\nconst m = useMessages()\n// @a11y\n// A roleless box cannot carry an accessible name (axe: aria-prohibited-attr),\n// so the root is a named group: the VCarousel viewport arrangement.\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.datePicker.label)\nconst resolvedLocale = useResolvedLocale(() => props.locale)\n\n// @devwarn\n// Silent inside a host that forwards these props and reports on them itself (utils/hostWarns).\nif (isDev && !inject(hostWarnsKey, false)) {\n  watchEffect(() => {\n    if (props.min && props.max && compareISO(props.min, props.max) > 0)\n      console.warn(\n        `[VDatePicker] min \"${props.min}\" falls after max \"${props.max}\", so no date can be chosen.`,\n      )\n  })\n}\n\nconst resolvedFirstDay = computed(\n  () => props.firstDayOfWeek ?? firstDayOfWeekFor(resolvedLocale.value),\n)\nconst weekdays = computed(() => weekdayNames(resolvedLocale.value, resolvedFirstDay.value, 'short'))\nconst weekdaysLong = computed(() =>\n  weekdayNames(resolvedLocale.value, resolvedFirstDay.value, 'long'),\n)\nconst monthLabels = computed(() => monthNamesCompact(resolvedLocale.value))\n/** The full names the compact cells are spoken with: \"Jan.\" is not a word to hear. */\nconst monthNamesLong = computed(() => monthNames(resolvedLocale.value))\n\nconst singleValue = computed(() =>\n  props.selection === 'single' && typeof model.value === 'string' && isValidISO(model.value)\n    ? model.value\n    : null,\n)\nconst rangeValue = computed<DatePickerRange>(() => {\n  if (\n    props.selection === 'range' &&\n    model.value &&\n    typeof model.value === 'object' &&\n    !Array.isArray(model.value)\n  ) {\n    return model.value as DatePickerRange\n  }\n  return { start: null, end: null }\n})\nconst multipleValues = computed<string[]>(() =>\n  props.selection === 'multiple' && Array.isArray(model.value) ? model.value : [],\n)\n\n// `focusedISO` is the single source of truth for the view: the month on display is\n// derived from it, never stored separately, so the two cannot drift apart.\n//\n// TRAP — a range start or a list entry is validated HERE, the way the single value is\n// validated upstream. Those two reach this component exactly as the consumer wrote them,\n// and a malformed one (`{ start: 'foo' }`) made the focused date unparseable: the month\n// arrows assert that parse, so the first render threw.\nfunction initialFocus(): string {\n  if (singleValue.value) return singleValue.value\n  const start = rangeValue.value.start\n  if (start && isValidISO(start)) return start\n  const listed = multipleValues.value.find(isValidISO)\n  if (listed) return listed\n  // With nothing selected, the calendar opens on today, brought back inside the\n  // allowed bounds.\n  readTheClock = true\n  return clampISO(formatISO(new Date()), props.min, props.max)\n}\n/** Whether the month on display was read from the clock at setup: see `renderEpoch`. */\nlet readTheClock = false\nconst focusedISO = ref(initialFocus())\nconst view = ref<'days' | 'months' | 'years'>('days')\n\nconst viewYear = computed(\n  () => parseISO(focusedISO.value)?.getFullYear() ?? new Date().getFullYear(),\n)\nconst viewMonth0 = computed(() => parseISO(focusedISO.value)?.getMonth() ?? 0)\nconst monthLabel = computed(() => monthName(resolvedLocale.value, viewMonth0.value))\nconst gridLabel = computed(() =>\n  monthYearName(resolvedLocale.value, viewYear.value, viewMonth0.value),\n)\n\n// @ssr\n// Today's date is only read once the component is mounted, hence on the client: the\n// server has no way to know it, and rendering it during setup would make the two\n// markups differ and break hydration.\nconst today = ref<string | null>(null)\n\n// @ssr\n/*\n * TRAP — with nothing selected, the month on display is read from the clock at setup, on\n * the server and again in the browser, and the two can disagree: a page prerendered in\n * September and opened in October, or a server a timezone behind its visitor on the last\n * evening of a month. Hydration then patches the TEXT and keeps the server's ATTRIBUTES, so\n * the month button said \"Oct.\" on screen and \"September\" to a screen reader, and the day ids\n * `focusDay` looks up named days that were not there.\n *\n * The header and the grid are therefore keyed on `renderEpoch`, which is bumped once, on\n * mount, whenever the month came from the clock: both are then built again from the\n * browser's own state. Nothing on the page can say whether the server agreed (the grid's\n * own title IS patched, the month button's is not), and rebuilding an empty picker once\n * costs less than asking. A picker opened on a value is never rebuilt.\n */\nconst renderEpoch = ref(0)\nonMounted(() => {\n  today.value = formatISO(new Date())\n  if (readTheClock) renderEpoch.value++\n})\n\nconst isDisabledDate = computed(() => resolveMatcher(props.disabledDates))\n\nconst eventsByDate = computed(() => {\n  const map = new Map<string, DatePickerEvent[]>()\n  for (const ev of props.events ?? []) {\n    const list = map.get(ev.date) ?? []\n    list.push(ev)\n    map.set(ev.date, list)\n  }\n  return map\n})\n\nconst hoverISO = ref<string | null>(null)\nfunction orderRange(a: string, b: string): DatePickerRange {\n  return compareISO(a, b) <= 0 ? { start: a, end: b } : { start: b, end: a }\n}\nconst effectiveRange = computed<DatePickerRange>(() => {\n  if (props.selection !== 'range') return { start: null, end: null }\n  const r = rangeValue.value\n  if (r.start && r.end) return orderRange(r.start, r.end)\n  // A start is set but the end is still pending: the range is previewed up to\n  // whichever day the pointer or the focus is currently on.\n  const preview = hoverISO.value ?? focusedISO.value\n  if (r.start && preview) return orderRange(r.start, preview)\n  return { start: r.start, end: r.end }\n})\n\n/**\n * Whether a day is part of the COMMITTED value, which is what `aria-selected` says: the\n * end a range preview is drawing is not selected yet, and announcing every day the focus\n * walks over as \"selected\" would say so.\n */\nfunction isCommitted(iso: string): boolean {\n  if (props.selection !== 'range') return isSelected(iso)\n  return isSameISO(iso, rangeValue.value.start) || isSameISO(iso, rangeValue.value.end)\n}\n\nfunction isSelected(iso: string): boolean {\n  if (props.selection === 'single') return isSameISO(iso, singleValue.value)\n  if (props.selection === 'multiple') return multipleValues.value.includes(iso)\n  // In range selection, the two ends of the period count as selected — including the\n  // provisional end shown during the preview.\n  return isSameISO(iso, effectiveRange.value.start) || isSameISO(iso, effectiveRange.value.end)\n}\n/**\n * Whether a day falls inside the selected period, BOTH ends included.\n *\n * The inclusiveness is a contract with the stylesheet, not a detail: `[data-in-range]` is\n * what draws the band's pseudo-element, and the two end rules only round a corner of one\n * that already exists. Narrowing this to the days strictly between would leave each end\n * with nothing to cap and silently square off every range.\n */\nfunction isInRange(iso: string): boolean {\n  const { start, end } = effectiveRange.value\n  return !!start && !!end && compareISO(iso, start) >= 0 && compareISO(iso, end) <= 0\n}\n\ntype DayCell = {\n  iso: string\n  day: number\n  kind: 'empty' | 'static' | 'button'\n  inMonth: boolean\n  disabled: boolean\n  selected: boolean\n  /** Selected in the value itself, the preview left out: what `aria-selected` reports. */\n  committed: boolean\n  rangeStart: boolean\n  rangeEnd: boolean\n  inRange: boolean\n  today: boolean\n  events: DatePickerEvent[]\n  /** The events drawn as dots under the number, three at most. */\n  dots: DatePickerEvent[]\n  /** The labels of its events, joined, for the day's accessible name. */\n  eventText: string\n}\n\n/**\n * The 42 squares of the month on display, rebuilt only when the MONTH changes. The two\n * computeds are split on purpose: a range being previewed changes `hoverISO` on every\n * `pointerenter`, and that has to repaint the decoration below without building 42 dates\n * again. `viewYear` and `viewMonth0` are numbers, so moving the focus inside the month\n * leaves them — and this — untouched.\n */\nconst grid = computed(() =>\n  buildMonthGrid(viewYear.value, viewMonth0.value, resolvedFirstDay.value),\n)\n\nconst NO_EVENTS: DatePickerEvent[] = []\n\nconst days = computed<DayCell[]>(() =>\n  grid.value.map((cell) => {\n    const inMonth = cell.adjacent === null\n    // Making the neighbouring days clickable implies showing them: a day nobody can\n    // see cannot be clicked.\n    const show = inMonth || props.showAdjacentDays || props.selectAdjacentDays\n    const selectable = inMonth || props.selectAdjacentDays\n    const disabled = !isDateAllowed(cell.iso, props.min, props.max, isDisabledDate.value)\n    const kind: DayCell['kind'] = !show ? 'empty' : selectable ? 'button' : 'static'\n    const events = eventsByDate.value.get(cell.iso) ?? NO_EVENTS\n    return {\n      iso: cell.iso,\n      day: cell.day,\n      kind,\n      inMonth,\n      disabled,\n      selected: kind === 'button' && !disabled && isSelected(cell.iso),\n      committed: kind === 'button' && !disabled && isCommitted(cell.iso),\n      rangeStart: props.selection === 'range' && isSameISO(cell.iso, effectiveRange.value.start),\n      rangeEnd: props.selection === 'range' && isSameISO(cell.iso, effectiveRange.value.end),\n      inRange: props.selection === 'range' && isInRange(cell.iso),\n      today: isSameISO(cell.iso, today.value),\n      events,\n      dots: events.length > 3 ? events.slice(0, 3) : events,\n      eventText: events\n        .map((ev) => ev.label)\n        .filter(Boolean)\n        .join(', '),\n    }\n  }),\n)\n\n/** What the `#day` slot receives for a square: the same object for both kinds of cell. */\nfunction daySlotProps(cell: DayCell): DatePickerDaySlotProps {\n  return {\n    iso: cell.iso,\n    day: cell.day,\n    inMonth: cell.inMonth,\n    disabled: cell.disabled,\n    selected: cell.selected,\n    today: cell.today,\n    inRange: cell.inRange,\n    events: cell.events,\n  }\n}\nconst weeks = computed(() => {\n  const rows: DayCell[][] = []\n  for (let i = 0; i < days.value.length; i += 7) rows.push(days.value.slice(i, i + 7))\n  return rows\n})\n\nfunction monthHasSelectable(year: number, month0: number): boolean {\n  const first = isoOf(year, month0, 1)\n  const last = isoOf(year, month0, daysInMonth(year, month0))\n  return (\n    (!props.max || compareISO(first, props.max) <= 0) &&\n    (!props.min || compareISO(last, props.min) >= 0)\n  )\n}\n// Derived from the month on display, not from the focused day, so an arrow key moving the\n// focus inside the month does not recompute them.\nconst canPrevMonth = computed(() =>\n  viewMonth0.value === 0\n    ? monthHasSelectable(viewYear.value - 1, 11)\n    : monthHasSelectable(viewYear.value, viewMonth0.value - 1),\n)\nconst canNextMonth = computed(() =>\n  viewMonth0.value === 11\n    ? monthHasSelectable(viewYear.value + 1, 0)\n    : monthHasSelectable(viewYear.value, viewMonth0.value + 1),\n)\nconst canPrevYear = computed(\n  () => !props.min || compareISO(isoOf(viewYear.value - 1, 11, 31), props.min) >= 0,\n)\nconst canNextYear = computed(\n  () => !props.max || compareISO(isoOf(viewYear.value + 1, 0, 1), props.max) <= 0,\n)\n\n// @a11y\n// Moves the real DOM focus onto a day cell. The grid keeps exactly one cell in the\n// tab order, so navigating means focusing another one.\nconst dayId = (iso: string) => `${gridLabelId}-d-${iso}`\nfunction focusDay(iso: string, options?: FocusOptions) {\n  nextTick(() => document.getElementById(dayId(iso))?.focus(options))\n}\n\nfunction goTo(iso: string, moveFocus = false) {\n  // Every move through the calendar comes here, so one guard covers the arrows, the\n  // month and year cells and the keyboard's own steps. Only `disabled` stops it:\n  // `readonly` leaves the reader free to look around.\n  if (props.disabled) return\n  focusedISO.value = clampISO(iso, props.min, props.max)\n  if (moveFocus && view.value === 'days') focusDay(focusedISO.value)\n}\nfunction stepMonth(delta: number) {\n  goTo(addMonths(focusedISO.value, delta))\n}\nfunction stepYear(delta: number) {\n  goTo(addMonths(focusedISO.value, delta * 12))\n}\n\n// @a11y @core\n// Changing view has to carry the focus onto the cell the new view\n// opens on. Without that move the focus would stay on a button the view has just\n// removed from the document, and the keyboard would have nowhere to go.\nfunction toggleView(target: 'months' | 'years') {\n  const next = view.value === target ? 'days' : target\n  view.value = next\n  if (next === 'months') {\n    focusedMonth.value = viewMonth0.value\n    nextTick(() => monthCellEl(viewMonth0.value)?.focus())\n  } else if (next === 'years') {\n    focusedYear.value = viewYear.value\n    nextTick(() => {\n      const cell = yearCellEl(viewYear.value)\n      // Called optionally because jsdom does not implement scrollIntoView (the same\n      // guard as VTimeInput's list). Centring the year is a nicety; the focus call\n      // below is not, so it must not be taken down with it.\n      cell?.scrollIntoView?.({ block: 'center' })\n      cell?.focus()\n    })\n  } else if (view.value === 'days') {\n    focusDay(focusedISO.value)\n  }\n}\n\nfunction selectDay(cell: DayCell) {\n  // The single choke point of the selection, so the two states are refused here rather\n  // than in each of the routes that lead to it — a click, Enter and Space all pass\n  // through. Navigation is deliberately NOT guarded by `readonly`: a calendar one may\n  // read is a calendar one may leaf through.\n  if (props.disabled || props.readonly) return\n  if (cell.kind !== 'button' || cell.disabled) return\n  focusedISO.value = cell.iso\n  let next: DatePickerValue\n  if (props.selection === 'single') {\n    next = cell.iso\n  } else if (props.selection === 'multiple') {\n    next = toggleValue(multipleValues.value, cell.iso).sort(compareISO)\n  } else {\n    // Range selection reads three clicks: the first sets the start, the second the\n    // end (reordered if it comes before the start), and the third starts a new\n    // period.\n    const r = rangeValue.value\n    next = !r.start || r.end ? { start: cell.iso, end: null } : orderRange(r.start, cell.iso)\n  }\n  lastWritten = JSON.stringify(next)\n  model.value = next\n  // TRAP: emit what was just computed, never `model.value` read back. Under a parent\n  // `v-model`, `defineModel` does not update its local copy on write — it waits for the\n  // parent to re-render — so the read would hand `select` the PREVIOUS value.\n  emit('select', next)\n}\n\n// @keyboard @a11y\n// The keyboard of the days view. The table turning a key into a step is pure and\n// lives in `./keyboard`; what stays here is the date that step is applied to, and\n// the focus move that follows.\nfunction onDaysKeydown(event: KeyboardEvent) {\n  // A key held with a modifier is the browser's or the system's: Alt+Left is Back.\n  if (event.altKey || event.ctrlKey || event.metaKey) return\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault()\n    const cell = days.value.find((c) => c.iso === focusedISO.value)\n    if (cell) selectDay(cell)\n    return\n  }\n  const d = parseISO(focusedISO.value)!\n  // How far the focused day sits from the start of its week, which is exactly what\n  // Home and End have to step back and forward by.\n  const offset = (d.getDay() - resolvedFirstDay.value + 7) % 7\n  const step = dayStep(event.key, event.shiftKey, offset)\n  if (!step) return\n  event.preventDefault()\n  goTo(\n    'days' in step\n      ? addDays(focusedISO.value, step.days)\n      : addMonths(focusedISO.value, step.months),\n    true,\n  )\n}\n\n/**\n * Leaving the months or the years view for the days of the month chosen, keeping the day of\n * the month where the new month has one — the 31st becoming the 30th, say.\n */\nfunction chooseYearMonth(year: number, month0: number) {\n  const day = Math.min(parseISO(focusedISO.value)!.getDate(), daysInMonth(year, month0))\n  goTo(isoOf(year, month0, day))\n  view.value = 'days'\n  focusDay(focusedISO.value)\n}\n\n// @keyboard @a11y\n/**\n * The keyboard of the months and the years views, which differ only in what their cells\n * hold: Enter or Space chooses the focused cell, and the arrows walk the list of cells a row\n * or a column at a time, stopping at either end.\n */\nfunction onViewKeydown(\n  event: KeyboardEvent,\n  cells: readonly number[],\n  focused: Ref<number>,\n  cellEl: (value: number) => HTMLElement | null,\n  choose: (value: number) => void,\n  selectable: (value: number) => boolean = () => true,\n) {\n  if (event.altKey || event.ctrlKey || event.metaKey) return\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault()\n    choose(focused.value)\n    return\n  }\n  const delta = gridDelta(event.key)\n  if (delta === undefined) return\n  event.preventDefault()\n  // A cell the bounds rule out is a DISABLED button, which cannot take the focus: landing\n  // on it would move the tab stop where the focus cannot follow. The walk goes on the same\n  // way round to the next cell that can be chosen, and holds still when there is none.\n  let next = clamp(cells.indexOf(focused.value) + delta, 0, cells.length - 1)\n  while (!selectable(cells[next]!) && next + delta >= 0 && next + delta < cells.length)\n    next += delta\n  if (!selectable(cells[next]!)) return\n  focused.value = cells[next]!\n  cellEl(focused.value)?.focus()\n}\n\n// The months view, opened from the month button in the header.\nconst MONTHS = Array.from({ length: 12 }, (_, i) => i)\nconst focusedMonth = ref(viewMonth0.value)\nconst monthCellEl = (i: number) =>\n  document.getElementById(`${gridLabelId}-m-${i}`) as HTMLElement | null\nfunction monthSelectable(i: number) {\n  return monthHasSelectable(viewYear.value, i)\n}\nfunction chooseMonth(i: number) {\n  if (monthSelectable(i)) chooseYearMonth(viewYear.value, i)\n}\nconst onMonthsKeydown = (event: KeyboardEvent) =>\n  onViewKeydown(event, MONTHS, focusedMonth, monthCellEl, chooseMonth, monthSelectable)\n\n// @a11y\n/*\n * Both pickers are a `role=\"grid\"`, and a grid owns ROWS, not cells: a gridcell\n * placed straight under the grid fails aria-required-children and\n * aria-required-parent at the same time. The cells are therefore cut into rows of\n * PICKER_COLUMNS, matching the `grid-template-columns` of the stylesheet — the row\n * element itself is `display: contents`, so the CSS grid never sees it.\n *\n * Keyboard navigation is unaffected by this extra level: it moves by index and\n * refocuses cells through their ids, never by walking the DOM.\n */\nconst chunk = <T,>(list: T[]) =>\n  Array.from({ length: Math.ceil(list.length / PICKER_COLUMNS) }, (_, r) =>\n    list.slice(r * PICKER_COLUMNS, r * PICKER_COLUMNS + PICKER_COLUMNS),\n  )\n\nconst monthRows = computed(() => chunk(monthLabels.value.map((name, i) => ({ name, i }))))\n\n// The years view, opened from the year button in the header.\nconst yearRange = computed(() => {\n  /*\n   * `min` and `max` come straight from the consumer, and this is the ONLY place\n   * where they are turned into a Date instead of being compared as ISO text —\n   * `compareISO`, `isWithin` and `clampISO` all tolerate a malformed bound. A value\n   * that is not a valid ISO date therefore has to fall back to the open range here:\n   * asserting the parse would throw and take the whole render down the moment the\n   * years view is opened.\n   */\n  const minY = parseISO(props.min)?.getFullYear() ?? viewYear.value - 100\n  const maxY = parseISO(props.max)?.getFullYear() ?? viewYear.value + 100\n  const list: number[] = []\n  for (let y = minY; y <= maxY; y++) list.push(y)\n  return list\n})\nconst yearRows = computed(() => chunk(yearRange.value))\nconst focusedYear = ref(viewYear.value)\nconst yearCellEl = (y: number) =>\n  document.getElementById(`${gridLabelId}-y-${y}`) as HTMLElement | null\nconst chooseYear = (y: number) => chooseYearMonth(y, viewMonth0.value)\nconst onYearsKeydown = (event: KeyboardEvent) =>\n  onViewKeydown(event, yearRange.value, focusedYear, yearCellEl, chooseYear)\n\n// Follows a selection changed from the outside: when the leading value lands in\n// another month, the calendar moves to it rather than leaving the reader in front of\n// a grid where nothing is selected.\n//\n// TRAP — only from the OUTSIDE. The picker's own writes change the leading value too:\n// unticking the earliest date of a list makes the next one lead, and following it would\n// throw the reader into another month and drop the focus on `<body>`, the day they were\n// on having left the document. `lastWritten` is the value `selectDay` just wrote, and a\n// model that still reads the same was not changed by anyone else. It is compared as TEXT:\n// a parent v-model hands back a reactive proxy of the array, never the array written.\nlet lastWritten: string | undefined\nwatch(\n  () => [singleValue.value, rangeValue.value.start, multipleValues.value[0]],\n  () => {\n    if (lastWritten !== undefined && JSON.stringify(model.value) === lastWritten) return\n    const primary = singleValue.value ?? rangeValue.value.start ?? multipleValues.value[0]\n    if (primary && isValidISO(primary)) {\n      const d = parseISO(primary)!\n      if (d.getFullYear() !== viewYear.value || d.getMonth() !== viewMonth0.value) {\n        focusedISO.value = primary\n      }\n    }\n  },\n)\n\n// @a11y\n/**\n * Brings the focus into the grid, on the day the calendar is currently showing. This\n * is what VDateInput calls when it opens its panel.\n */\nfunction focus(options?: FocusOptions) {\n  view.value = 'days'\n  focusDay(focusedISO.value, options)\n}\n\n// @core\n/*\n * Puts the calendar back the way it opens: the days view, on the selected date (today\n * failing that), with no range preview pending. It moves no focus and announces nothing,\n * a panel reopening not being something the reader did.\n *\n * TRAP — a panel's content stays MOUNTED while the panel is closed, so without this the\n * months or years view a reader left open is what the next opening shows — and a field\n * that opens its panel on focus never calls `focus()`, the one place that reset the view.\n */\nfunction reset() {\n  view.value = 'days'\n  hoverISO.value = null\n  focusedISO.value = initialFocus()\n}\n\ndefineExpose({\n  /** Brings the focus into the grid, onto the day the calendar is showing. */\n  focus,\n  /**\n   * Returns to the days view, on the selected date or today, without moving the focus.\n   * VDateInput calls it each time its panel opens and closes.\n   */\n  reset,\n})\n</script>\n\n<template>\n  <div\n    class=\"v-date-picker\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :data-view=\"view\"\n    :data-selection=\"selection\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    @pointerleave=\"hoverISO = null\"\n  >\n    <!-- The header: the month and the year, each between two chevrons that step it,\n         and each opening its own picker view when clicked -->\n    <div :key=\"`header-${renderEpoch}`\" class=\"v-date-picker-header\">\n      <div class=\"v-date-picker-nav\">\n        <VIconButton\n          :label=\"m.datePicker.previousMonth\"\n          size=\"sm\"\n          :disabled=\"disabled || !canPrevMonth\"\n          @click=\"stepMonth(-1)\"\n        >\n          <VIcon :name=\"chevronLeftIcon\" mirrored />\n        </VIconButton>\n        <VButton\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          class=\"v-date-picker-view-toggle\"\n          :disabled=\"disabled\"\n          :aria-expanded=\"view === 'months'\"\n          :aria-label=\"monthLabel\"\n          @click=\"toggleView('months')\"\n        >\n          {{ monthLabels[viewMonth0] }}\n          <VIcon\n            :name=\"view === 'months' ? arrowDropUpIcon : arrowDropDownIcon\"\n            aria-hidden=\"true\"\n          />\n        </VButton>\n        <VIconButton\n          :label=\"m.datePicker.nextMonth\"\n          size=\"sm\"\n          :disabled=\"disabled || !canNextMonth\"\n          @click=\"stepMonth(1)\"\n        >\n          <VIcon :name=\"chevronRightIcon\" mirrored />\n        </VIconButton>\n      </div>\n\n      <div class=\"v-date-picker-nav\">\n        <VIconButton\n          :label=\"m.datePicker.previousYear\"\n          size=\"sm\"\n          :disabled=\"disabled || !canPrevYear\"\n          @click=\"stepYear(-1)\"\n        >\n          <VIcon :name=\"chevronLeftIcon\" mirrored />\n        </VIconButton>\n        <VButton\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          class=\"v-date-picker-view-toggle\"\n          :disabled=\"disabled\"\n          :aria-expanded=\"view === 'years'\"\n          @click=\"toggleView('years')\"\n        >\n          {{ viewYear }}\n          <VIcon\n            :name=\"view === 'years' ? arrowDropUpIcon : arrowDropDownIcon\"\n            aria-hidden=\"true\"\n          />\n        </VButton>\n        <VIconButton\n          :label=\"m.datePicker.nextYear\"\n          size=\"sm\"\n          :disabled=\"disabled || !canNextYear\"\n          @click=\"stepYear(1)\"\n        >\n          <VIcon :name=\"chevronRightIcon\" mirrored />\n        </VIconButton>\n      </div>\n    </div>\n\n    <!-- Days view -->\n    <div\n      v-show=\"view === 'days'\"\n      :key=\"`days-${renderEpoch}`\"\n      class=\"v-date-picker-grid\"\n      role=\"grid\"\n      :aria-label=\"gridLabel\"\n      :aria-multiselectable=\"selection === 'multiple' ? 'true' : undefined\"\n      @keydown=\"onDaysKeydown\"\n    >\n      <div class=\"v-date-picker-weekdays\" role=\"row\">\n        <span\n          v-for=\"(w, i) in weekdays\"\n          :key=\"w\"\n          class=\"v-date-picker-weekday\"\n          role=\"columnheader\"\n          :aria-label=\"weekdaysLong[i]\"\n          >{{ w }}</span\n        >\n      </div>\n      <div v-for=\"(week, wi) in weeks\" :key=\"wi\" class=\"v-date-picker-week\" role=\"row\">\n        <div\n          v-for=\"cell in week\"\n          :key=\"cell.iso\"\n          class=\"v-date-picker-cell\"\n          role=\"gridcell\"\n          :aria-selected=\"cell.kind === 'button' ? cell.committed : undefined\"\n          :data-in-range=\"cell.inRange ? '' : undefined\"\n          :data-range-start=\"cell.rangeStart ? '' : undefined\"\n          :data-range-end=\"cell.rangeEnd ? '' : undefined\"\n        >\n          <button\n            v-if=\"cell.kind === 'button'\"\n            :id=\"dayId(cell.iso)\"\n            type=\"button\"\n            class=\"v-date-picker-day\"\n            :tabindex=\"cell.iso === focusedISO ? 0 : -1\"\n            :data-outside=\"!cell.inMonth ? '' : undefined\"\n            :data-selected=\"cell.selected ? '' : undefined\"\n            :data-today=\"cell.today ? '' : undefined\"\n            :data-unavailable=\"cell.disabled ? '' : undefined\"\n            :disabled=\"disabled\"\n            :aria-disabled=\"cell.disabled || readonly ? 'true' : undefined\"\n            :aria-current=\"cell.today ? 'date' : undefined\"\n            @click=\"selectDay(cell)\"\n            @pointerenter=\"hoverISO = cell.iso\"\n            @focus=\"hoverISO = cell.iso\"\n          >\n            <slot name=\"day\" v-bind=\"daySlotProps(cell)\">\n              <span class=\"v-date-picker-day-num\">{{ cell.day }}</span>\n            </slot>\n            <!-- The dots are hidden from assistive technology, so what they stand for is\n                 spoken here, as part of the day's name. -->\n            <span v-if=\"cell.eventText\" class=\"v-visually-hidden\">, {{ cell.eventText }}</span>\n            <span v-if=\"cell.dots.length\" class=\"v-date-picker-dots\" aria-hidden=\"true\">\n              <span\n                v-for=\"(ev, ei) in cell.dots\"\n                :key=\"ei\"\n                class=\"v-date-picker-dot\"\n                :style=\"ev.color ? { '--date-picker-dot-color': ev.color } : undefined\"\n              />\n            </span>\n          </button>\n          <!-- A day of a neighbouring month that cannot be selected. It renders the\n               very same slot as the clickable days: were it left with the bare\n               number, custom content taking several lines would apply to this month's\n               days only, and the numbers would stop lining up from one cell to the\n               next. The slot receives `inMonth`, which is how it can still tell the\n               two apart. -->\n          <span\n            v-else-if=\"cell.kind === 'static'\"\n            class=\"v-date-picker-day v-date-picker-day--static\"\n            :data-disabled=\"cell.disabled ? '' : undefined\"\n          >\n            <slot name=\"day\" v-bind=\"daySlotProps(cell)\">\n              <span class=\"v-date-picker-day-num\">{{ cell.day }}</span>\n            </slot>\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Months view -->\n    <div\n      v-if=\"view === 'months'\"\n      class=\"v-date-picker-view\"\n      role=\"grid\"\n      :aria-label=\"m.datePicker.monthPicker\"\n      @keydown=\"onMonthsKeydown\"\n    >\n      <div v-for=\"(row, r) in monthRows\" :key=\"r\" class=\"v-date-picker-view-row\" role=\"row\">\n        <button\n          v-for=\"{ name, i } in row\"\n          :id=\"`${gridLabelId}-m-${i}`\"\n          :key=\"i\"\n          type=\"button\"\n          class=\"v-date-picker-view-cell\"\n          role=\"gridcell\"\n          :tabindex=\"i === focusedMonth ? 0 : -1\"\n          :data-selected=\"i === viewMonth0 ? '' : undefined\"\n          :aria-selected=\"i === viewMonth0 ? 'true' : undefined\"\n          :aria-label=\"monthNamesLong[i]\"\n          :disabled=\"disabled || !monthSelectable(i)\"\n          @click=\"chooseMonth(i)\"\n        >\n          {{ name }}\n        </button>\n      </div>\n    </div>\n\n    <!-- Years view -->\n    <div\n      v-if=\"view === 'years'\"\n      class=\"v-date-picker-view v-date-picker-view--years\"\n      role=\"grid\"\n      :aria-label=\"m.datePicker.yearPicker\"\n      @keydown=\"onYearsKeydown\"\n    >\n      <div v-for=\"(row, r) in yearRows\" :key=\"r\" class=\"v-date-picker-view-row\" role=\"row\">\n        <button\n          v-for=\"y in row\"\n          :id=\"`${gridLabelId}-y-${y}`\"\n          :key=\"y\"\n          type=\"button\"\n          class=\"v-date-picker-view-cell\"\n          role=\"gridcell\"\n          :tabindex=\"y === focusedYear ? 0 : -1\"\n          :data-selected=\"y === viewYear ? '' : undefined\"\n          :aria-selected=\"y === viewYear ? 'true' : undefined\"\n          :disabled=\"disabled\"\n          @click=\"chooseYear(y)\"\n        >\n          {{ y }}\n        </button>\n      </div>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"v-date-picker-footer\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-date-picker {\n    /* The consumer sets the size of the day disc through its token; the cell around it —\n       the hover area and the width of the column — grows to follow, and never falls below\n       the size the cell token sets. */\n    --date-picker-cell: max(\n      var(--vectis-control-size-date-picker-cell),\n      calc(var(--vectis-control-size-date-picker-day) + var(--vectis-space-1))\n    );\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--vectis-space-2);\n    padding: var(--vectis-space-3);\n    font-family: var(--vectis-text-family);\n    color: var(--vectis-color-text);\n  }\n\n  /* The calendar is a flex column, so every block stretches to its full width by\n     default. The days grid then fills that width through its 1fr columns, and never\n     goes below the seven cells its own floor guarantees. */\n  .v-date-picker-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-date-picker-nav {\n    display: flex;\n    align-items: center;\n  }\n\n  /* A minimum width holds this button steady, so the chevrons on either side do not\n     shift as the month or year label changes length. */\n  /* Qualified by an attribute the button always renders: `.v-button` sets its own\n     `font-weight` at (0,1,0), and a tie between the two sheets would leave the weight to\n     whichever the consumer's bundler put last. */\n  .v-date-picker-view-toggle[data-size] {\n    min-inline-size: var(--vectis-control-size-date-picker-nav-min);\n    /* The semibold is state emphasis on the grid's main landmark, not a type role. */\n    font-weight: var(--vectis-font-weight-semibold);\n    text-transform: capitalize;\n  }\n\n  /* The days grid can never be narrower than seven cells. Above that floor it takes\n     whatever width the calendar has — set by the header — and the 1fr columns share\n     it out equally. */\n  .v-date-picker-grid {\n    min-inline-size: calc(7 * var(--date-picker-cell));\n  }\n\n  .v-date-picker-weekdays,\n  .v-date-picker-week {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n  }\n\n  .v-date-picker-weekday {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--vectis-control-height-sm);\n    /* A column micro-header, which takes the overline type role. The casing stays\n       `capitalize`, the calendar convention, rather than the full capitals the\n       VTypography overline variant would apply. */\n    font-size: var(--vectis-text-overline-size);\n    font-weight: var(--vectis-text-overline-weight);\n    letter-spacing: var(--vectis-text-overline-tracking);\n    color: var(--vectis-color-text-muted);\n    text-transform: capitalize;\n  }\n\n  .v-date-picker-cell {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--date-picker-cell);\n  }\n\n  /* The band joining the days of a selected range: a tinted background laid behind\n     the day, at the HEIGHT of the disc rather than of the whole cell. Its vertical\n     inset is half the gap between cell and disc, expressed in `%` so it follows the\n     real width of a 1fr column whatever the calendar measures.\n\n     At either end the band stops exactly at the edge of the disc — hence the inset on\n     the outer side — and that corner is rounded with the pill radius, which a box\n     this height caps at half its height, i.e. precisely the disc's own radius, so it\n     cannot overshoot.\n\n     TRAP — the two cap rules below only shape a pseudo-element that `[data-in-range]`\n     has already created, so they depend on `isInRange` counting BOTH ends of the period\n     as inside it. Make it exclusive and there is no `::before` to cap: both rounded ends\n     of every range vanish, leaving a band that stops square one cell short at each side,\n     with nothing in the console. The last rule is the single-day case, where the two caps\n     would meet and draw a disc behind the disc. */\n  .v-date-picker-cell[data-in-range]::before {\n    content: '';\n    position: absolute;\n    inset-block: calc((100% - var(--vectis-control-size-date-picker-day)) / 2);\n    inset-inline: 0;\n    background: var(--vectis-color-accent-surface);\n    z-index: 0;\n  }\n  .v-date-picker-cell[data-range-start]::before {\n    inset-inline-start: calc((100% - var(--vectis-control-size-date-picker-day)) / 2);\n    border-start-start-radius: var(--vectis-radius-pill);\n    border-end-start-radius: var(--vectis-radius-pill);\n  }\n  .v-date-picker-cell[data-range-end]::before {\n    inset-inline-end: calc((100% - var(--vectis-control-size-date-picker-day)) / 2);\n    border-start-end-radius: var(--vectis-radius-pill);\n    border-end-end-radius: var(--vectis-radius-pill);\n  }\n  .v-date-picker-cell[data-range-start][data-range-end]::before {\n    content: none;\n  }\n\n  .v-date-picker-day {\n    position: relative;\n    z-index: 1;\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--vectis-control-size-date-picker-day);\n    block-size: var(--vectis-control-size-date-picker-day);\n    padding: 0;\n    border: none;\n    border-radius: var(--vectis-radius-pill);\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    font-size: var(--vectis-text-body-md-size);\n    cursor: pointer;\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* Hover belongs to the days one can actually click: not the disabled ones, not the\n     already selected ones, and not the neighbouring days rendered as plain spans. */\n  .v-date-picker-day:hover:not(:disabled):not([aria-disabled='true']):not([data-selected]):not(\n      .v-date-picker-day--static\n    ) {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-date-picker-day[data-outside] {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* The semibold in the two rules below marks a state — today, and the selection —\n     and is not a typographic role, which is why it reads a font token directly. */\n  .v-date-picker-day[data-today]:not([data-selected]) {\n    box-shadow: inset 0 0 0 1px var(--vectis-color-accent-border);\n    color: var(--vectis-color-accent-text);\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n\n  .v-date-picker-day[data-selected] {\n    background: var(--vectis-color-accent);\n    color: var(--vectis-color-text-on-accent);\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n\n  /* The strike-through says the DATE is unavailable — outside the bounds, or listed in\n     `disabledDates`. It hangs on its own attribute rather than on `aria-disabled`, which\n     a read-only calendar also carries on every day: nothing can be chosen there, but the\n     dates themselves are perfectly available and striking them all out would say the\n     opposite. The hover rule below still reads `aria-disabled`, so neither highlights. */\n  .v-date-picker-day[data-unavailable] {\n    color: var(--vectis-color-text-subtle);\n    text-decoration: line-through;\n    cursor: not-allowed;\n  }\n\n  .v-date-picker[data-readonly] .v-date-picker-day:not([data-unavailable]) {\n    cursor: default;\n  }\n\n  /* A disabled calendar greys out through the colour tokens and never through opacity,\n     the selection included: left in the accent colour it would go on looking live. */\n  .v-date-picker-day:disabled {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-date-picker[data-disabled] .v-date-picker-day[data-selected] {\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-date-picker-day--static {\n    color: var(--vectis-color-text-subtle);\n    cursor: default;\n  }\n\n  /* A neighbouring day that falls outside the bounds, or is disabled, is struck\n     through like any other unavailable date. */\n  .v-date-picker-day--static[data-disabled] {\n    text-decoration: line-through;\n    cursor: not-allowed;\n  }\n\n  .v-date-picker-day:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-date-picker-day-num {\n    line-height: var(--vectis-text-control-leading);\n  }\n\n  .v-date-picker-dots {\n    position: absolute;\n    /* Half a dot, below them and between them: the spacing scale has no step that small. */\n    inset-block-end: calc(var(--vectis-control-size-date-picker-dot) / 2);\n    display: flex;\n    gap: calc(var(--vectis-control-size-date-picker-dot) / 2);\n  }\n  .v-date-picker-dot {\n    inline-size: var(--vectis-control-size-date-picker-dot);\n    block-size: var(--vectis-control-size-date-picker-dot);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--date-picker-dot-color, var(--vectis-color-accent));\n  }\n  .v-date-picker-day[data-selected] .v-date-picker-dot {\n    background: var(--vectis-color-text-on-accent);\n  }\n\n  /* The months and years views. They fill the calendar's width exactly like the days\n     grid does: stretched by the flex column, then shared out by 1fr columns. */\n  .v-date-picker-view {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: var(--vectis-space-1);\n    min-inline-size: calc(7 * var(--date-picker-cell));\n  }\n  /* The rows ARIA requires inside a grid, made invisible to the layout: with\n     `display: contents` the cells remain direct grid items of `.v-date-picker-view`,\n     so the columns line up as if the rows were not there. */\n  .v-date-picker-view-row {\n    display: contents;\n  }\n\n  .v-date-picker-view--years {\n    max-block-size: calc(6 * var(--date-picker-cell));\n    overflow-y: auto;\n  }\n\n  .v-date-picker-view-cell {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    block-size: var(--vectis-control-height-lg);\n    border: none;\n    border-radius: var(--vectis-radius-pill);\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    font-size: var(--vectis-text-body-md-size);\n    text-transform: capitalize;\n    cursor: pointer;\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n  .v-date-picker-view-cell:hover:not(:disabled):not([data-selected]) {\n    background: var(--vectis-color-surface-muted);\n  }\n  .v-date-picker-view-cell[data-selected] {\n    background: var(--vectis-color-accent);\n    color: var(--vectis-color-text-on-accent);\n    /* Again state emphasis, not a type role. */\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n  .v-date-picker-view-cell:disabled {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n  .v-date-picker-view-cell:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-date-picker-footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--vectis-space-2);\n    padding-block-start: var(--vectis-space-2);\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-date-picker-day,\n    .v-date-picker-view-cell {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"VDatePicker.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VDatePicker/VDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @keyboard @core\n/**\n * Implement roving grid focus and date selection because the platform has no composable,\n * stylable date grid. VDateInput reuses this calendar logic.\n */\n\nimport { computed, inject, nextTick, onMounted, ref, useId, watch, watchEffect } from 'vue'\nimport type { Ref } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { arrow_drop_down as arrowDropDownIcon } from '../VIcon/icons/arrow_drop_down'\nimport { arrow_drop_up as arrowDropUpIcon } from '../VIcon/icons/arrow_drop_up'\nimport { chevron_left as chevronLeftIcon } from '../VIcon/icons/chevron_left'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport {\n  addDays,\n  addMonths,\n  buildMonthGrid,\n  clampISO,\n  compareISO,\n  daysInMonth,\n  firstDayOfWeekFor,\n  formatISO,\n  isDateAllowed,\n  isoOf,\n  isSameISO,\n  isValidISO,\n  parseISO,\n  weekdayNames,\n} from '../../utils/date'\nimport { monthName, monthNames, monthNamesCompact, monthYearName } from './names'\n\nimport { PICKER_COLUMNS, dayStep, gridDelta } from './keyboard'\n\nimport { toggleValue } from '../../utils/array'\nimport { isDev } from '../../utils/env'\nimport { hostWarnsKey } from '../../utils/hostWarns'\nimport { resolveMatcher } from '../../utils/matcher'\nimport { clamp } from '../../utils/number'\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages, useResolvedLocale } from '../../i18n/state'\n\n/** What a click selects: one date, a period between two, or a list of dates. */\nexport type DatePickerSelection = 'single' | 'range' | 'multiple'\n\n/**\n * A period between two dates, the value of a `range` selection. Either bound may be\n * null: between the first and the second click, a range has a start and no end yet.\n */\nexport interface DatePickerRange {\n  /** The first day of the period, as an ISO `YYYY-MM-DD` string. */\n  start: string | null\n  /** The last day of the period, as an ISO `YYYY-MM-DD` string. */\n  end: string | null\n}\n\n/** Something happening on a given day, shown as a coloured dot under its number. */\nexport interface DatePickerEvent {\n  /** The day it falls on, as an ISO `YYYY-MM-DD` string. */\n  date: string\n  /** The colour of the dot, as any CSS colour. It is the accent colour by default. */\n  color?: string\n  /** A description of the event, spoken as part of the day's accessible name. */\n  label?: string\n}\n\n/**\n * Which dates cannot be selected, given either as a list of ISO strings or as a\n * function answering that question for a date.\n */\nexport type DatePickerMatcher = string[] | ((iso: string) => boolean)\n\n/** The shape of the v-model, which follows whichever `selection` is in use. */\nexport type DatePickerValue = string | null | DatePickerRange | string[]\n\n/** Everything the `#day` slot is told about the day it draws. */\nexport interface DatePickerDaySlotProps {\n  /** The day, as an ISO `YYYY-MM-DD` string. */\n  iso: string\n  /** The day of the month. */\n  day: number\n  /** Whether it belongs to the month on display rather than to a neighbouring one. */\n  inMonth: boolean\n  /** Whether it cannot be chosen: outside the bounds, or excluded by `disabledDates`. */\n  disabled: boolean\n  /** Whether it is selected. */\n  selected: boolean\n  /** Whether it is today. */\n  today: boolean\n  /** Whether it falls inside the selected period, both ends included. */\n  inRange: boolean\n  /** The events that fall on it. */\n  events: DatePickerEvent[]\n}\n\ninterface DatePickerProps {\n  /**\n   * What the reader is picking: a single date, a period between two dates, or any\n   * number of separate dates. It determines the shape of the v-model.\n   */\n  selection?: DatePickerSelection\n  /**\n   * A BCP 47 locale, which decides the month and day names and the first day of the\n   * week. It TAKES PRECEDENCE over the design system's global locale (`setLocale`)\n   * and falls back to it, which is why it has no literal default here: `undefined`\n   * has to stay recognizable for the global locale to have its chance.\n   */\n  locale?: string\n  /**\n   * Forces the day the weeks start on (0 for Sunday through 6 for Saturday). Left\n   * out, the locale decides.\n   */\n  firstDayOfWeek?: number\n  /**\n   * The earliest selectable date, as an ISO string. Neither navigation nor selection\n   * goes back beyond it.\n   */\n  min?: string\n  /**\n   * The latest selectable date, as an ISO string. Neither navigation nor selection\n   * goes past it.\n   */\n  max?: string\n  /**\n   * Dates that cannot be chosen, given as a list of ISO strings or as a function.\n   * They stay visible, struck through, and can still be reached with the keyboard.\n   */\n  disabledDates?: DatePickerMatcher\n  /**\n   * Also fills the empty corners of the grid with the greyed days of the neighbouring\n   * months. It is off by default.\n   */\n  showAdjacentDays?: boolean\n  /**\n   * Lets those neighbouring days be clicked, which moves the calendar to their month.\n   * A clickable day has to be visible, so this implies showing them.\n   */\n  selectAdjacentDays?: boolean\n  /** The events to mark, as up to three coloured dots under the day they fall on. */\n  events?: DatePickerEvent[]\n  /**\n   * Makes the whole calendar unusable: no date can be chosen, no month reached, and\n   * everything greys out through the colour tokens.\n   */\n  disabled?: boolean\n  /**\n   * Shows what is selected without letting it be changed. The calendar can still be read and\n   * walked through (another month, another year), which separates it from `disabled`.\n   */\n  readonly?: boolean\n  /**\n   * The accessible name of the whole picker, its header and its grid together. It falls back to\n   * the dictionary, and a consumer `aria-label` wins.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<DatePickerProps>(), {\n  selection: 'single',\n  locale: undefined,\n  firstDayOfWeek: undefined,\n  min: undefined,\n  max: undefined,\n  disabledDates: undefined,\n  showAdjacentDays: false,\n  selectAdjacentDays: false,\n  events: undefined,\n  disabled: false,\n  readonly: false,\n  label: undefined,\n})\n\n/**\n * What is selected, and its shape follows `selection`: an ISO `YYYY-MM-DD` string for `single`,\n * a `{ start, end }` pair for `range`, an array of strings for `multiple`.\n */\nconst model = defineModel<DatePickerValue>({ default: null })\n\nconst emit = defineEmits<{\n  /**\n   * Emitted every time a date is chosen, carrying the complete value as it now\n   * stands. VDateInput listens to it to close its panel on a single selection.\n   */\n  select: [value: DatePickerValue]\n}>()\n\ndefineSlots<{\n  /**\n   * Replaces the content of a day cell, to show a price or an availability under the\n   * number for instance. It receives everything known about that day, including\n   * whether it belongs to the displayed month.\n   */\n  day?(props: DatePickerDaySlotProps): unknown\n  /** The strip under the grid, for actions such as Close or Save, or for preset dates. */\n  footer?(): unknown\n}>()\n\nconst gridLabelId = useId()\n\n// The navigation labels have no prop of their own: the dictionary is the single place to change\n// them, globally or per language; see `src/i18n/`.\nconst m = useMessages()\n// @a11y\n// A roleless box cannot carry an accessible name (axe: aria-prohibited-attr),\n// so the root is a named group: the VCarousel viewport arrangement.\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.datePicker.label)\nconst resolvedLocale = useResolvedLocale(() => props.locale)\n\n// @devwarn\nif (isDev && !inject(hostWarnsKey, false)) {\n  watchEffect(() => {\n    if (props.min && props.max && compareISO(props.min, props.max) > 0)\n      console.warn(\n        `[VDatePicker] min \"${props.min}\" falls after max \"${props.max}\", so no date can be chosen.`,\n      )\n  })\n}\n\nconst resolvedFirstDay = computed(\n  () => props.firstDayOfWeek ?? firstDayOfWeekFor(resolvedLocale.value),\n)\nconst weekdays = computed(() => weekdayNames(resolvedLocale.value, resolvedFirstDay.value, 'short'))\nconst weekdaysLong = computed(() =>\n  weekdayNames(resolvedLocale.value, resolvedFirstDay.value, 'long'),\n)\nconst monthLabels = computed(() => monthNamesCompact(resolvedLocale.value))\n/** The full names the compact cells are spoken with: \"Jan.\" is not a word to hear. */\nconst monthNamesLong = computed(() => monthNames(resolvedLocale.value))\n\nconst singleValue = computed(() =>\n  props.selection === 'single' && typeof model.value === 'string' && isValidISO(model.value)\n    ? model.value\n    : null,\n)\nconst rangeValue = computed<DatePickerRange>(() => {\n  if (\n    props.selection === 'range' &&\n    model.value &&\n    typeof model.value === 'object' &&\n    !Array.isArray(model.value)\n  ) {\n    return model.value as DatePickerRange\n  }\n  return { start: null, end: null }\n})\nconst multipleValues = computed<string[]>(() =>\n  props.selection === 'multiple' && Array.isArray(model.value) ? model.value : [],\n)\n\n// A range start or a list entry is validated here, the way the single value is validated\n// upstream. Those two reach this component exactly as the consumer wrote them, and a malformed\n// one (`{ start: 'foo' }`) made the focused date unparseable: the month arrows assert that\n// parse, so the first render threw.\nfunction initialFocus(): string {\n  if (singleValue.value) return singleValue.value\n  const start = rangeValue.value.start\n  if (start && isValidISO(start)) return start\n  const listed = multipleValues.value.find(isValidISO)\n  if (listed) return listed\n  readTheClock = true\n  return clampISO(formatISO(new Date()), props.min, props.max)\n}\n/** Whether the month on display was read from the clock at setup: see `renderEpoch`. */\nlet readTheClock = false\nconst focusedISO = ref(initialFocus())\nconst view = ref<'days' | 'months' | 'years'>('days')\n\nconst viewYear = computed(\n  () => parseISO(focusedISO.value)?.getFullYear() ?? new Date().getFullYear(),\n)\nconst viewMonth0 = computed(() => parseISO(focusedISO.value)?.getMonth() ?? 0)\nconst monthLabel = computed(() => monthName(resolvedLocale.value, viewMonth0.value))\nconst gridLabel = computed(() =>\n  monthYearName(resolvedLocale.value, viewYear.value, viewMonth0.value),\n)\n\n// @ssr\n// Today's date is only read once the component is mounted, hence on the client: the\n// server has no way to know it, and rendering it during setup would make the two\n// markups differ and break hydration.\nconst today = ref<string | null>(null)\n\n// @ssr\n/*\n * With nothing selected, the month on display is read from the clock at setup, on the server\n * and again in the browser, and the two can disagree: a page prerendered in September and\n * opened in October, or a server a timezone behind its visitor on the last evening of a month.\n * Hydration then patches the TEXT and keeps the server's ATTRIBUTES, so the month button said\n * \"Oct.\" on screen and \"September\" to a screen reader, and the day ids `focusDay` looks up\n * named days that were not there.\n */\nconst renderEpoch = ref(0)\nonMounted(() => {\n  today.value = formatISO(new Date())\n  if (readTheClock) renderEpoch.value++\n})\n\nconst isDisabledDate = computed(() => resolveMatcher(props.disabledDates))\n\nconst eventsByDate = computed(() => {\n  const map = new Map<string, DatePickerEvent[]>()\n  for (const ev of props.events ?? []) {\n    const list = map.get(ev.date) ?? []\n    list.push(ev)\n    map.set(ev.date, list)\n  }\n  return map\n})\n\nconst hoverISO = ref<string | null>(null)\nfunction orderRange(a: string, b: string): DatePickerRange {\n  return compareISO(a, b) <= 0 ? { start: a, end: b } : { start: b, end: a }\n}\nconst effectiveRange = computed<DatePickerRange>(() => {\n  if (props.selection !== 'range') return { start: null, end: null }\n  const r = rangeValue.value\n  if (r.start && r.end) return orderRange(r.start, r.end)\n  // A start is set but the end is still pending: the range is previewed up to\n  // whichever day the pointer or the focus is currently on.\n  const preview = hoverISO.value ?? focusedISO.value\n  if (r.start && preview) return orderRange(r.start, preview)\n  return { start: r.start, end: r.end }\n})\n\n/**\n * Whether a day is part of the COMMITTED value, which `aria-selected` says: the end a range\n * preview is drawing is not selected yet, and announcing every day the focus walks over as\n * \"selected\" would say so.\n */\nfunction isCommitted(iso: string): boolean {\n  if (props.selection !== 'range') return isSelected(iso)\n  return isSameISO(iso, rangeValue.value.start) || isSameISO(iso, rangeValue.value.end)\n}\n\nfunction isSelected(iso: string): boolean {\n  if (props.selection === 'single') return isSameISO(iso, singleValue.value)\n  if (props.selection === 'multiple') return multipleValues.value.includes(iso)\n  // In range selection, the two ends of the period count as selected; including the provisional\n  // end shown during the preview.\n  return isSameISO(iso, effectiveRange.value.start) || isSameISO(iso, effectiveRange.value.end)\n}\n/** Whether a day falls inside the selected period, both ends included. */\nfunction isInRange(iso: string): boolean {\n  const { start, end } = effectiveRange.value\n  return !!start && !!end && compareISO(iso, start) >= 0 && compareISO(iso, end) <= 0\n}\n\ntype DayCell = {\n  iso: string\n  day: number\n  kind: 'empty' | 'static' | 'button'\n  inMonth: boolean\n  disabled: boolean\n  selected: boolean\n  /** Selected in the value itself, the preview left out: what `aria-selected` reports. */\n  committed: boolean\n  rangeStart: boolean\n  rangeEnd: boolean\n  inRange: boolean\n  today: boolean\n  events: DatePickerEvent[]\n  /** The events drawn as dots under the number, three at most. */\n  dots: DatePickerEvent[]\n  /** The labels of its events, joined, for the day's accessible name. */\n  eventText: string\n}\n\n/** The 42 squares of the month on display, rebuilt only when the MONTH changes. */\nconst grid = computed(() =>\n  buildMonthGrid(viewYear.value, viewMonth0.value, resolvedFirstDay.value),\n)\n\nconst NO_EVENTS: DatePickerEvent[] = []\n\nconst days = computed<DayCell[]>(() =>\n  grid.value.map((cell) => {\n    const inMonth = cell.adjacent === null\n    // Making the neighbouring days clickable implies showing them: a day nobody can\n    // see cannot be clicked.\n    const show = inMonth || props.showAdjacentDays || props.selectAdjacentDays\n    const selectable = inMonth || props.selectAdjacentDays\n    const disabled = !isDateAllowed(cell.iso, props.min, props.max, isDisabledDate.value)\n    const kind: DayCell['kind'] = !show ? 'empty' : selectable ? 'button' : 'static'\n    const events = eventsByDate.value.get(cell.iso) ?? NO_EVENTS\n    return {\n      iso: cell.iso,\n      day: cell.day,\n      kind,\n      inMonth,\n      disabled,\n      selected: kind === 'button' && !disabled && isSelected(cell.iso),\n      committed: kind === 'button' && !disabled && isCommitted(cell.iso),\n      rangeStart: props.selection === 'range' && isSameISO(cell.iso, effectiveRange.value.start),\n      rangeEnd: props.selection === 'range' && isSameISO(cell.iso, effectiveRange.value.end),\n      inRange: props.selection === 'range' && isInRange(cell.iso),\n      today: isSameISO(cell.iso, today.value),\n      events,\n      dots: events.length > 3 ? events.slice(0, 3) : events,\n      eventText: events\n        .map((ev) => ev.label)\n        .filter(Boolean)\n        .join(', '),\n    }\n  }),\n)\n\n/** What the `#day` slot receives for a square: the same object for both kinds of cell. */\nfunction daySlotProps(cell: DayCell): DatePickerDaySlotProps {\n  return {\n    iso: cell.iso,\n    day: cell.day,\n    inMonth: cell.inMonth,\n    disabled: cell.disabled,\n    selected: cell.selected,\n    today: cell.today,\n    inRange: cell.inRange,\n    events: cell.events,\n  }\n}\nconst weeks = computed(() => {\n  const rows: DayCell[][] = []\n  for (let i = 0; i < days.value.length; i += 7) rows.push(days.value.slice(i, i + 7))\n  return rows\n})\n\nfunction monthHasSelectable(year: number, month0: number): boolean {\n  const first = isoOf(year, month0, 1)\n  const last = isoOf(year, month0, daysInMonth(year, month0))\n  return (\n    (!props.max || compareISO(first, props.max) <= 0) &&\n    (!props.min || compareISO(last, props.min) >= 0)\n  )\n}\n// Derived from the month on display, not from the focused day, so an arrow key moving the\n// focus inside the month does not recompute them.\nconst canPrevMonth = computed(() =>\n  viewMonth0.value === 0\n    ? monthHasSelectable(viewYear.value - 1, 11)\n    : monthHasSelectable(viewYear.value, viewMonth0.value - 1),\n)\nconst canNextMonth = computed(() =>\n  viewMonth0.value === 11\n    ? monthHasSelectable(viewYear.value + 1, 0)\n    : monthHasSelectable(viewYear.value, viewMonth0.value + 1),\n)\nconst canPrevYear = computed(\n  () => !props.min || compareISO(isoOf(viewYear.value - 1, 11, 31), props.min) >= 0,\n)\nconst canNextYear = computed(\n  () => !props.max || compareISO(isoOf(viewYear.value + 1, 0, 1), props.max) <= 0,\n)\n\n// @a11y\n// Moves the real DOM focus onto a day cell. The grid keeps exactly one cell in the\n// tab order, so navigating means focusing another one.\nconst dayId = (iso: string) => `${gridLabelId}-d-${iso}`\nfunction focusDay(iso: string, options?: FocusOptions) {\n  nextTick(() => document.getElementById(dayId(iso))?.focus(options))\n}\n\nfunction goTo(iso: string, moveFocus = false) {\n  // Every move through the calendar comes here, so one guard covers the arrows, the\n  // month and year cells and the keyboard's own steps. Only `disabled` stops it:\n  // `readonly` leaves the reader free to look around.\n  if (props.disabled) return\n  focusedISO.value = clampISO(iso, props.min, props.max)\n  if (moveFocus && view.value === 'days') focusDay(focusedISO.value)\n}\nfunction stepMonth(delta: number) {\n  goTo(addMonths(focusedISO.value, delta))\n}\nfunction stepYear(delta: number) {\n  goTo(addMonths(focusedISO.value, delta * 12))\n}\n\n// @a11y @core\n// Changing view has to carry the focus onto the cell the new view\n// opens on. Without that move the focus would stay on a button the view has just\n// removed from the document, and the keyboard would have nowhere to go.\nfunction toggleView(target: 'months' | 'years') {\n  const next = view.value === target ? 'days' : target\n  view.value = next\n  if (next === 'months') {\n    focusedMonth.value = viewMonth0.value\n    nextTick(() => monthCellEl(viewMonth0.value)?.focus())\n  } else if (next === 'years') {\n    focusedYear.value = viewYear.value\n    nextTick(() => {\n      const cell = yearCellEl(viewYear.value)\n      // Called optionally because jsdom does not implement scrollIntoView (the same\n      // guard as VTimeInput's list). Centring the year is a nicety; the focus call\n      // below is not, so it must not be taken down with it.\n      cell?.scrollIntoView?.({ block: 'center' })\n      cell?.focus()\n    })\n  } else if (view.value === 'days') {\n    focusDay(focusedISO.value)\n  }\n}\n\nfunction selectDay(cell: DayCell) {\n  // Navigation is deliberately not guarded by `readonly`: a calendar one may read is a calendar\n  // one may leaf through.\n  if (props.disabled || props.readonly) return\n  if (cell.kind !== 'button' || cell.disabled) return\n  focusedISO.value = cell.iso\n  let next: DatePickerValue\n  if (props.selection === 'single') {\n    next = cell.iso\n  } else if (props.selection === 'multiple') {\n    next = toggleValue(multipleValues.value, cell.iso).sort(compareISO)\n  } else {\n    // Range selection reads three clicks: the first sets the start, the second the\n    // end (reordered if it comes before the start), and the third starts a new\n    // period.\n    const r = rangeValue.value\n    next = !r.start || r.end ? { start: cell.iso, end: null } : orderRange(r.start, cell.iso)\n  }\n  lastWritten = JSON.stringify(next)\n  model.value = next\n  // Emit what was just computed, never `model.value` read back. Under a parent `v-model`,\n  // `defineModel` does not update its local copy on write; it waits for the parent to\n  // re-render; so the read would hand `select` the PREVIOUS value.\n  emit('select', next)\n}\n\n// @keyboard @a11y\n// The keyboard of the days view. The table turning a key into a step is pure and\n// lives in `./keyboard`; what stays here is the date that step is applied to, and\n// the focus move that follows.\nfunction onDaysKeydown(event: KeyboardEvent) {\n  if (event.altKey || event.ctrlKey || event.metaKey) return\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault()\n    const cell = days.value.find((c) => c.iso === focusedISO.value)\n    if (cell) selectDay(cell)\n    return\n  }\n  const d = parseISO(focusedISO.value)!\n  // How far the focused day sits from the start of its week, which is exactly what\n  // Home and End have to step back and forward by.\n  const offset = (d.getDay() - resolvedFirstDay.value + 7) % 7\n  const step = dayStep(event.key, event.shiftKey, offset)\n  if (!step) return\n  event.preventDefault()\n  goTo(\n    'days' in step\n      ? addDays(focusedISO.value, step.days)\n      : addMonths(focusedISO.value, step.months),\n    true,\n  )\n}\n\n/**\n * Leaving the months or the years view for the days of the month chosen, keeping the day of the\n * month where the new month has one; the 31st becoming the 30th, say.\n */\nfunction chooseYearMonth(year: number, month0: number) {\n  const day = Math.min(parseISO(focusedISO.value)!.getDate(), daysInMonth(year, month0))\n  goTo(isoOf(year, month0, day))\n  view.value = 'days'\n  focusDay(focusedISO.value)\n}\n\n// @keyboard @a11y\n/**\n * The keyboard of the months and the years views, which differ only in what their cells\n * hold: Enter or Space chooses the focused cell, and the arrows walk the list of cells a row\n * or a column at a time, stopping at either end.\n */\nfunction onViewKeydown(\n  event: KeyboardEvent,\n  cells: readonly number[],\n  focused: Ref<number>,\n  cellEl: (value: number) => HTMLElement | null,\n  choose: (value: number) => void,\n  selectable: (value: number) => boolean = () => true,\n) {\n  if (event.altKey || event.ctrlKey || event.metaKey) return\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault()\n    choose(focused.value)\n    return\n  }\n  const delta = gridDelta(event.key)\n  if (delta === undefined) return\n  event.preventDefault()\n  // A cell the bounds rule out is a disabled button, which cannot take the focus: landing on it\n  // would move the tab stop where the focus cannot follow. The walk goes on the same way round\n  // to the next cell that can be chosen, and holds still when there is none.\n  let next = clamp(cells.indexOf(focused.value) + delta, 0, cells.length - 1)\n  while (!selectable(cells[next]!) && next + delta >= 0 && next + delta < cells.length)\n    next += delta\n  if (!selectable(cells[next]!)) return\n  focused.value = cells[next]!\n  cellEl(focused.value)?.focus()\n}\n\nconst MONTHS = Array.from({ length: 12 }, (_, i) => i)\nconst focusedMonth = ref(viewMonth0.value)\nconst monthCellEl = (i: number) =>\n  document.getElementById(`${gridLabelId}-m-${i}`) as HTMLElement | null\nfunction monthSelectable(i: number) {\n  return monthHasSelectable(viewYear.value, i)\n}\nfunction chooseMonth(i: number) {\n  if (monthSelectable(i)) chooseYearMonth(viewYear.value, i)\n}\nconst onMonthsKeydown = (event: KeyboardEvent) =>\n  onViewKeydown(event, MONTHS, focusedMonth, monthCellEl, chooseMonth, monthSelectable)\n\n// @a11y\n/*\n * Both pickers are a `role=\"grid\"`, and a grid owns ROWS, not cells: a gridcell placed straight\n * under the grid fails aria-required-children and aria-required-parent at the same time. The\n * cells are therefore cut into rows of PICKER_COLUMNS, matching the `grid-template-columns` of\n * the stylesheet; the row element itself is `display: contents`, so the CSS grid never sees it.\n */\nconst chunk = <T,>(list: T[]) =>\n  Array.from({ length: Math.ceil(list.length / PICKER_COLUMNS) }, (_, r) =>\n    list.slice(r * PICKER_COLUMNS, r * PICKER_COLUMNS + PICKER_COLUMNS),\n  )\n\nconst monthRows = computed(() => chunk(monthLabels.value.map((name, i) => ({ name, i }))))\n\nconst yearRange = computed(() => {\n  /*\n   * `min` and `max` come straight from the consumer, and this is the only place where they are\n   * turned into a Date instead of being compared as ISO text; `compareISO`, `isWithin` and\n   * `clampISO` all tolerate a malformed bound. A value that is not a valid ISO date therefore\n   * has to fall back to the open range here: asserting the parse would throw and take the whole\n   * render down the moment the years view is opened.\n   */\n  const minY = parseISO(props.min)?.getFullYear() ?? viewYear.value - 100\n  const maxY = parseISO(props.max)?.getFullYear() ?? viewYear.value + 100\n  const list: number[] = []\n  for (let y = minY; y <= maxY; y++) list.push(y)\n  return list\n})\nconst yearRows = computed(() => chunk(yearRange.value))\nconst focusedYear = ref(viewYear.value)\nconst yearCellEl = (y: number) =>\n  document.getElementById(`${gridLabelId}-y-${y}`) as HTMLElement | null\nconst chooseYear = (y: number) => chooseYearMonth(y, viewMonth0.value)\nconst onYearsKeydown = (event: KeyboardEvent) =>\n  onViewKeydown(event, yearRange.value, focusedYear, yearCellEl, chooseYear)\n\n// Only from the OUTSIDE. The picker's own writes change the leading value too: unticking the\n// earliest date of a list makes the next one lead, and following it would throw the reader into\n// another month and drop the focus on `<body>`, the day they were on having left the document.\nlet lastWritten: string | undefined\nwatch(\n  () => [singleValue.value, rangeValue.value.start, multipleValues.value[0]],\n  () => {\n    if (lastWritten !== undefined && JSON.stringify(model.value) === lastWritten) return\n    const primary = singleValue.value ?? rangeValue.value.start ?? multipleValues.value[0]\n    if (primary && isValidISO(primary)) {\n      const d = parseISO(primary)!\n      if (d.getFullYear() !== viewYear.value || d.getMonth() !== viewMonth0.value) {\n        focusedISO.value = primary\n      }\n    }\n  },\n)\n\n// @a11y\n/**\n * Brings the focus into the grid, on the day the calendar is currently showing. This\n * is what VDateInput calls when it opens its panel.\n */\nfunction focus(options?: FocusOptions) {\n  view.value = 'days'\n  focusDay(focusedISO.value, options)\n}\n\n// @core\n/*\n * A panel's content stays MOUNTED while the panel is closed, so without this the months or\n * years view a reader left open is what the next opening shows; and a field that opens its\n * panel on focus never calls `focus()`, the one place that reset the view.\n */\nfunction reset() {\n  view.value = 'days'\n  hoverISO.value = null\n  focusedISO.value = initialFocus()\n}\n\ndefineExpose({\n  /** Brings the focus into the grid, onto the day the calendar is showing. */\n  focus,\n  /**\n   * Returns to the days view, on the selected date or today, without moving the focus.\n   * VDateInput calls it each time its panel opens and closes.\n   */\n  reset,\n})\n</script>\n\n<template>\n  <div\n    class=\"v-date-picker\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :data-view=\"view\"\n    :data-selection=\"selection\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    @pointerleave=\"hoverISO = null\"\n  >\n    <!-- The header: the month and the year, each between two chevrons that step it,\n         and each opening its own picker view when clicked -->\n    <div :key=\"`header-${renderEpoch}`\" class=\"v-date-picker-header\">\n      <div class=\"v-date-picker-nav\">\n        <VIconButton\n          :label=\"m.datePicker.previousMonth\"\n          size=\"sm\"\n          :disabled=\"disabled || !canPrevMonth\"\n          @click=\"stepMonth(-1)\"\n        >\n          <VIcon :name=\"chevronLeftIcon\" mirrored />\n        </VIconButton>\n        <VButton\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          class=\"v-date-picker-view-toggle\"\n          :disabled=\"disabled\"\n          :aria-expanded=\"view === 'months'\"\n          :aria-label=\"monthLabel\"\n          @click=\"toggleView('months')\"\n        >\n          {{ monthLabels[viewMonth0] }}\n          <VIcon\n            :name=\"view === 'months' ? arrowDropUpIcon : arrowDropDownIcon\"\n            aria-hidden=\"true\"\n          />\n        </VButton>\n        <VIconButton\n          :label=\"m.datePicker.nextMonth\"\n          size=\"sm\"\n          :disabled=\"disabled || !canNextMonth\"\n          @click=\"stepMonth(1)\"\n        >\n          <VIcon :name=\"chevronRightIcon\" mirrored />\n        </VIconButton>\n      </div>\n\n      <div class=\"v-date-picker-nav\">\n        <VIconButton\n          :label=\"m.datePicker.previousYear\"\n          size=\"sm\"\n          :disabled=\"disabled || !canPrevYear\"\n          @click=\"stepYear(-1)\"\n        >\n          <VIcon :name=\"chevronLeftIcon\" mirrored />\n        </VIconButton>\n        <VButton\n          variant=\"ghost\"\n          tone=\"neutral\"\n          size=\"sm\"\n          class=\"v-date-picker-view-toggle\"\n          :disabled=\"disabled\"\n          :aria-expanded=\"view === 'years'\"\n          @click=\"toggleView('years')\"\n        >\n          {{ viewYear }}\n          <VIcon\n            :name=\"view === 'years' ? arrowDropUpIcon : arrowDropDownIcon\"\n            aria-hidden=\"true\"\n          />\n        </VButton>\n        <VIconButton\n          :label=\"m.datePicker.nextYear\"\n          size=\"sm\"\n          :disabled=\"disabled || !canNextYear\"\n          @click=\"stepYear(1)\"\n        >\n          <VIcon :name=\"chevronRightIcon\" mirrored />\n        </VIconButton>\n      </div>\n    </div>\n\n    <div\n      v-show=\"view === 'days'\"\n      :key=\"`days-${renderEpoch}`\"\n      class=\"v-date-picker-grid\"\n      role=\"grid\"\n      :aria-label=\"gridLabel\"\n      :aria-multiselectable=\"selection === 'multiple' ? 'true' : undefined\"\n      @keydown=\"onDaysKeydown\"\n    >\n      <div class=\"v-date-picker-weekdays\" role=\"row\">\n        <span\n          v-for=\"(w, i) in weekdays\"\n          :key=\"w\"\n          class=\"v-date-picker-weekday\"\n          role=\"columnheader\"\n          :aria-label=\"weekdaysLong[i]\"\n          >{{ w }}</span\n        >\n      </div>\n      <div v-for=\"(week, wi) in weeks\" :key=\"wi\" class=\"v-date-picker-week\" role=\"row\">\n        <div\n          v-for=\"cell in week\"\n          :key=\"cell.iso\"\n          class=\"v-date-picker-cell\"\n          role=\"gridcell\"\n          :aria-selected=\"cell.kind === 'button' ? cell.committed : undefined\"\n          :data-in-range=\"cell.inRange ? '' : undefined\"\n          :data-range-start=\"cell.rangeStart ? '' : undefined\"\n          :data-range-end=\"cell.rangeEnd ? '' : undefined\"\n        >\n          <button\n            v-if=\"cell.kind === 'button'\"\n            :id=\"dayId(cell.iso)\"\n            type=\"button\"\n            class=\"v-date-picker-day\"\n            :tabindex=\"cell.iso === focusedISO ? 0 : -1\"\n            :data-outside=\"!cell.inMonth ? '' : undefined\"\n            :data-selected=\"cell.selected ? '' : undefined\"\n            :data-today=\"cell.today ? '' : undefined\"\n            :data-unavailable=\"cell.disabled ? '' : undefined\"\n            :disabled=\"disabled\"\n            :aria-disabled=\"cell.disabled || readonly ? 'true' : undefined\"\n            :aria-current=\"cell.today ? 'date' : undefined\"\n            @click=\"selectDay(cell)\"\n            @pointerenter=\"hoverISO = cell.iso\"\n            @focus=\"hoverISO = cell.iso\"\n          >\n            <slot name=\"day\" v-bind=\"daySlotProps(cell)\">\n              <span class=\"v-date-picker-day-num\">{{ cell.day }}</span>\n            </slot>\n            <!-- The dots are hidden from assistive technology, so what they stand for is\n                 spoken here, as part of the day's name. -->\n            <span v-if=\"cell.eventText\" class=\"v-visually-hidden\">, {{ cell.eventText }}</span>\n            <span v-if=\"cell.dots.length\" class=\"v-date-picker-dots\" aria-hidden=\"true\">\n              <span\n                v-for=\"(ev, ei) in cell.dots\"\n                :key=\"ei\"\n                class=\"v-date-picker-dot\"\n                :style=\"ev.color ? { '--date-picker-dot-color': ev.color } : undefined\"\n              />\n            </span>\n          </button>\n          <!--\n            A day of a neighbouring month that cannot be selected. It renders the very same slot\n            as the clickable days: were it left with the bare number, custom content taking\n            several lines would apply to this month's days only, and the numbers would stop\n            lining up from one cell to the next.\n          -->\n          <span\n            v-else-if=\"cell.kind === 'static'\"\n            class=\"v-date-picker-day v-date-picker-day--static\"\n            :data-disabled=\"cell.disabled ? '' : undefined\"\n          >\n            <slot name=\"day\" v-bind=\"daySlotProps(cell)\">\n              <span class=\"v-date-picker-day-num\">{{ cell.day }}</span>\n            </slot>\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div\n      v-if=\"view === 'months'\"\n      class=\"v-date-picker-view\"\n      role=\"grid\"\n      :aria-label=\"m.datePicker.monthPicker\"\n      @keydown=\"onMonthsKeydown\"\n    >\n      <div v-for=\"(row, r) in monthRows\" :key=\"r\" class=\"v-date-picker-view-row\" role=\"row\">\n        <button\n          v-for=\"{ name, i } in row\"\n          :id=\"`${gridLabelId}-m-${i}`\"\n          :key=\"i\"\n          type=\"button\"\n          class=\"v-date-picker-view-cell\"\n          role=\"gridcell\"\n          :tabindex=\"i === focusedMonth ? 0 : -1\"\n          :data-selected=\"i === viewMonth0 ? '' : undefined\"\n          :aria-selected=\"i === viewMonth0 ? 'true' : undefined\"\n          :aria-label=\"monthNamesLong[i]\"\n          :disabled=\"disabled || !monthSelectable(i)\"\n          @click=\"chooseMonth(i)\"\n        >\n          {{ name }}\n        </button>\n      </div>\n    </div>\n\n    <div\n      v-if=\"view === 'years'\"\n      class=\"v-date-picker-view v-date-picker-view--years\"\n      role=\"grid\"\n      :aria-label=\"m.datePicker.yearPicker\"\n      @keydown=\"onYearsKeydown\"\n    >\n      <div v-for=\"(row, r) in yearRows\" :key=\"r\" class=\"v-date-picker-view-row\" role=\"row\">\n        <button\n          v-for=\"y in row\"\n          :id=\"`${gridLabelId}-y-${y}`\"\n          :key=\"y\"\n          type=\"button\"\n          class=\"v-date-picker-view-cell\"\n          role=\"gridcell\"\n          :tabindex=\"y === focusedYear ? 0 : -1\"\n          :data-selected=\"y === viewYear ? '' : undefined\"\n          :aria-selected=\"y === viewYear ? 'true' : undefined\"\n          :disabled=\"disabled\"\n          @click=\"chooseYear(y)\"\n        >\n          {{ y }}\n        </button>\n      </div>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"v-date-picker-footer\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-date-picker {\n    /*\n     * The consumer sets the size of the day disc through its token; the cell around it; the\n     * hover area and the width of the column; grows to follow, and never falls below the size\n     * the cell token sets.\n     */\n    --date-picker-cell: max(\n      var(--vectis-control-size-date-picker-cell),\n      calc(var(--vectis-control-size-date-picker-day) + var(--vectis-space-1))\n    );\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--vectis-space-2);\n    padding: var(--vectis-space-3);\n    font-family: var(--vectis-text-family);\n    color: var(--vectis-color-text);\n  }\n\n  /*\n   * The days grid then fills that width through its 1fr columns, and never goes below the seven\n   * cells its own floor guarantees.\n   */\n  .v-date-picker-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-date-picker-nav {\n    display: flex;\n    align-items: center;\n  }\n\n  /* A minimum width holds this button steady, so the chevrons on either side do not\n     shift as the month or year label changes length. */\n  /* Qualified by an attribute the button always renders: `.v-button` sets its own\n     `font-weight` at (0,1,0), and a tie between the two sheets would leave the weight to\n     whichever the consumer's bundler put last. */\n  .v-date-picker-view-toggle[data-size] {\n    min-inline-size: var(--vectis-control-size-date-picker-nav-min);\n    font-weight: var(--vectis-font-weight-semibold);\n    text-transform: capitalize;\n  }\n\n  /*\n   * The days grid can never be narrower than seven cells. Above that floor it takes whatever\n   * width the calendar has; set by the header; and the 1fr columns share it out equally.\n   */\n  .v-date-picker-grid {\n    min-inline-size: calc(7 * var(--date-picker-cell));\n  }\n\n  .v-date-picker-weekdays,\n  .v-date-picker-week {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n  }\n\n  .v-date-picker-weekday {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--vectis-control-height-sm);\n    /* A column micro-header, which takes the overline type role. The casing stays\n       `capitalize`, the calendar convention, rather than the full capitals the\n       VTypography overline variant would apply. */\n    font-size: var(--vectis-text-overline-size);\n    font-weight: var(--vectis-text-overline-weight);\n    letter-spacing: var(--vectis-text-overline-tracking);\n    color: var(--vectis-color-text-muted);\n    text-transform: capitalize;\n  }\n\n  .v-date-picker-cell {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--date-picker-cell);\n  }\n\n  /*\n   * The two cap rules below only shape a pseudo-element that `[data-in-range]` has already\n   * created, so they depend on `isInRange` counting both ends of the period as inside it. Make\n   * it exclusive and there is no `::before` to cap: both rounded ends of every range vanish,\n   * leaving a band that stops square one cell short at each side, with nothing in the console.\n   */\n  .v-date-picker-cell[data-in-range]::before {\n    content: '';\n    position: absolute;\n    inset-block: calc((100% - var(--vectis-control-size-date-picker-day)) / 2);\n    inset-inline: 0;\n    background: var(--vectis-color-accent-surface);\n    z-index: 0;\n  }\n  .v-date-picker-cell[data-range-start]::before {\n    inset-inline-start: calc((100% - var(--vectis-control-size-date-picker-day)) / 2);\n    border-start-start-radius: var(--vectis-radius-pill);\n    border-end-start-radius: var(--vectis-radius-pill);\n  }\n  .v-date-picker-cell[data-range-end]::before {\n    inset-inline-end: calc((100% - var(--vectis-control-size-date-picker-day)) / 2);\n    border-start-end-radius: var(--vectis-radius-pill);\n    border-end-end-radius: var(--vectis-radius-pill);\n  }\n  .v-date-picker-cell[data-range-start][data-range-end]::before {\n    content: none;\n  }\n\n  .v-date-picker-day {\n    position: relative;\n    z-index: 1;\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--vectis-control-size-date-picker-day);\n    block-size: var(--vectis-control-size-date-picker-day);\n    padding: 0;\n    border: none;\n    border-radius: var(--vectis-radius-pill);\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    font-size: var(--vectis-text-body-md-size);\n    cursor: pointer;\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* Hover belongs to the days one can actually click: not the disabled ones, not the\n     already selected ones, and not the neighbouring days rendered as plain spans. */\n  .v-date-picker-day:hover:not(:disabled):not([aria-disabled='true']):not([data-selected]):not(\n      .v-date-picker-day--static\n    ) {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-date-picker-day[data-outside] {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * The semibold in the two rules below marks a state; today, and the selection; and is not a\n   * typographic role, which is why it reads a font token directly.\n   */\n  .v-date-picker-day[data-today]:not([data-selected]) {\n    box-shadow: inset 0 0 0 1px var(--vectis-color-accent-border);\n    color: var(--vectis-color-accent-text);\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n\n  .v-date-picker-day[data-selected] {\n    background: var(--vectis-color-accent);\n    color: var(--vectis-color-text-on-accent);\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n\n  /*\n   * It hangs on its own attribute rather than on `aria-disabled`, which a read-only calendar\n   * also carries on every day: nothing can be chosen there, but the dates themselves are\n   * perfectly available and striking them all out would say the opposite. The hover rule below\n   * still reads `aria-disabled`, so neither highlights.\n   */\n  .v-date-picker-day[data-unavailable] {\n    color: var(--vectis-color-text-subtle);\n    text-decoration: line-through;\n    cursor: not-allowed;\n  }\n\n  .v-date-picker[data-readonly] .v-date-picker-day:not([data-unavailable]) {\n    cursor: default;\n  }\n\n  /* A disabled calendar greys out through the colour tokens and never through opacity,\n     the selection included: left in the accent colour it would go on looking live. */\n  .v-date-picker-day:disabled {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-date-picker[data-disabled] .v-date-picker-day[data-selected] {\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-date-picker-day--static {\n    color: var(--vectis-color-text-subtle);\n    cursor: default;\n  }\n\n  /* A neighbouring day that falls outside the bounds, or is disabled, is struck\n     through like any other unavailable date. */\n  .v-date-picker-day--static[data-disabled] {\n    text-decoration: line-through;\n    cursor: not-allowed;\n  }\n\n  .v-date-picker-day:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-date-picker-day-num {\n    line-height: var(--vectis-text-control-leading);\n  }\n\n  .v-date-picker-dots {\n    position: absolute;\n    /* Half a dot, below them and between them: the spacing scale has no step that small. */\n    inset-block-end: calc(var(--vectis-control-size-date-picker-dot) / 2);\n    display: flex;\n    gap: calc(var(--vectis-control-size-date-picker-dot) / 2);\n  }\n  .v-date-picker-dot {\n    inline-size: var(--vectis-control-size-date-picker-dot);\n    block-size: var(--vectis-control-size-date-picker-dot);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--date-picker-dot-color, var(--vectis-color-accent));\n  }\n  .v-date-picker-day[data-selected] .v-date-picker-dot {\n    background: var(--vectis-color-text-on-accent);\n  }\n\n  /* The months and years views. They fill the calendar's width exactly like the days\n     grid does: stretched by the flex column, then shared out by 1fr columns. */\n  .v-date-picker-view {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: var(--vectis-space-1);\n    min-inline-size: calc(7 * var(--date-picker-cell));\n  }\n  /* The rows ARIA requires inside a grid, made invisible to the layout: with\n     `display: contents` the cells remain direct grid items of `.v-date-picker-view`,\n     so the columns line up as if the rows were not there. */\n  .v-date-picker-view-row {\n    display: contents;\n  }\n\n  .v-date-picker-view--years {\n    max-block-size: calc(6 * var(--date-picker-cell));\n    overflow-y: auto;\n  }\n\n  .v-date-picker-view-cell {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    block-size: var(--vectis-control-height-lg);\n    border: none;\n    border-radius: var(--vectis-radius-pill);\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    font-size: var(--vectis-text-body-md-size);\n    text-transform: capitalize;\n    cursor: pointer;\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n  .v-date-picker-view-cell:hover:not(:disabled):not([data-selected]) {\n    background: var(--vectis-color-surface-muted);\n  }\n  .v-date-picker-view-cell[data-selected] {\n    background: var(--vectis-color-accent);\n    color: var(--vectis-color-text-on-accent);\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n  .v-date-picker-view-cell:disabled {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n  .v-date-picker-view-cell:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-date-picker-footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--vectis-space-2);\n    padding-block-start: var(--vectis-space-2);\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-date-picker-day,\n    .v-date-picker-view-cell {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}