vectis-ui 0.8.0 → 0.9.0

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

@@ -1 +1 @@
-{"version":3,"file":"VCalendar.js","names":[],"sources":["../../../src/components/VCalendar/VCalendar.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"E extends CalendarEvent\">\n// @a11y @ssr @core\n/**\n * An agenda: the days side by side, the hours running down them, the events drawn where they\n * fall.\n *\n * A place to READ and REARRANGE a schedule, never to write one. Opening an event for editing\n * stays with the consumer — this reports what was asked for and leaves the form to them.\n *\n * Everything is local ISO `YYYY-MM-DD` and 24-hour `HH:mm`, which is what keeps the server\n * and the browser in agreement. An event may name a `timezone`, and that name is SHOWN\n * beside its times but never applied: converting would move the card depending on where the\n * page was rendered, the one thing a calendar must not do.\n *\n * The JS is what the platform leaves no way round — there is no accessible time grid to\n * build on and no way to say \"these three meetings overlap, share the width\" in CSS, so the\n * ARIA grid pattern and the overlap layout are written by hand. Every geometric and\n * calendrical decision lives in `layout.ts`, pure, because jsdom lays nothing out and that is\n * the only place any of it can be tested.\n */\nimport { computed, onMounted, ref, useId } 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 { 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 VMenu from '../VMenu/VMenu.vue'\nimport VMenuItem from '../VMenu/VMenuItem.vue'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTimer } from '../../composables/useTimer'\nimport { firstDayOfWeekFor, formatDateDisplay, formatDisplayRange } from '../../utils/date'\nimport { hourCycleFor, minutesOf } from '../../utils/time'\n\nimport { useMessages, useResolvedLocale } from '../../i18n/state'\n\nimport VCalendarMonth from './VCalendarMonth.vue'\nimport VCalendarTimeGrid, { type FocusedCell } from './VCalendarTimeGrid.vue'\nimport VCalendarYear from './VCalendarYear.vue'\nimport { EDGE_STEP_DELAY } from './edgeStep'\nimport {\n  monthWeeks,\n  monthsOfYear,\n  normalizeWeekdays,\n  stepAnchor,\n  timeOf,\n  timesOf,\n  todayISO,\n  visibleDays,\n  visibleRange,\n  windowOf,\n} from './layout'\nimport type {\n  ActivatedCell,\n  CalendarCell,\n  CalendarEvent,\n  CalendarEventId,\n  CalendarEventSlotProps,\n  CalendarEventTimes,\n  CalendarFormat,\n  CalendarView,\n} from './types'\n\nexport interface CalendarProps {\n  /**\n   * Which views the menu offers, in the order it lists them. Narrowing it is how a\n   * calendar that only ever shows weeks stops offering anything else.\n   */\n  views?: CalendarView[]\n  /** How many days the custom view shows, and how far Previous and Next step in it. */\n  customDays?: number\n  /**\n   * Which weekdays are on show, as numbers from 0 for Sunday. `[1,2,3,4,5]` hides the\n   * weekend everywhere. The ORDER matters as well: the first entry is the day a week\n   * starts on, and it wins over `firstDayOfWeek`. Left out, the seven days starting on\n   * `firstDayOfWeek`.\n   */\n  weekdays?: number[]\n  /**\n   * The day a week starts on, from 0 for Sunday, when `weekdays` is not given. Left out,\n   * the locale decides.\n   */\n  firstDayOfWeek?: number\n  /** The language the days, months and times are written in. Falls back to the global one. */\n  locale?: string\n  /**\n   * Whether times are shown on a twelve or twenty-four hour clock. Left out, the reader's\n   * language decides. It is the same prop, under the same name, as VTimePicker's.\n   */\n  format?: CalendarFormat\n  /** The hour the grid starts at, from 0. */\n  dayStart?: number\n  /** The hour it ends at, up to 24. */\n  dayEnd?: number\n  /**\n   * The step everything snaps to, in minutes: how far a nudge moves an event, and the unit a\n   * slot is drawn out in.\n   */\n  slotDuration?: number\n  /** Where the grid is scrolled to when it first appears, so the working day is in view. */\n  scrollTime?: string\n  /**\n   * Leaves out the line drawn across today's column at the time it is now, and the dot on\n   * its leading edge. Left in, it ticks once a minute while the calendar is on screen.\n   */\n  hideCurrentTime?: boolean\n  /** How many events a day of the month view shows before it starts counting the rest. */\n  monthEventLimit?: number\n  /**\n   * Stops events being moved and stretched — by dragging them, and with the keyboard. They\n   * stay readable and clickable, and nothing else.\n   */\n  readonly?: boolean\n  /**\n   * Freezes the whole calendar: nothing can be moved, created or opened, no other period\n   * can be reached, and everything greys out through the colour tokens. The cards leave the\n   * tab order, the grid keeps its own so the agenda can still be read — which is what\n   * separates this from `readonly`, where only the editing stops.\n   */\n  disabled?: boolean\n  /**\n   * Lets an empty stretch of a time grid be drawn out with the pointer, up or down from the\n   * slot pressed. On release its times are reported through `event-create`, and nothing is\n   * added to `events`: putting the event on the calendar is yours to do. A click, or Enter on a\n   * focused cell, reports `cell-activate` with or without this.\n   */\n  creatable?: boolean\n  /**\n   * How long a dragged event has to rest against the side of the calendar before the view\n   * turns to the previous or next period, in milliseconds. `0` turns that off.\n   *\n   * The wait is the point of it: paging the instant the pointer touched the edge would make\n   * the last day of a week impossible to aim at.\n   */\n  edgeStepDelay?: number\n  /** Stops dragging near the top or bottom of a time grid from scrolling it. */\n  noEdgeScroll?: boolean\n  /** What the calendar is called, for anyone who cannot see it. */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<CalendarProps>(), {\n  views: () => ['day', '4days', 'week'],\n  customDays: 4,\n  weekdays: undefined,\n  firstDayOfWeek: undefined,\n  locale: undefined,\n  format: undefined,\n  dayStart: 0,\n  dayEnd: 24,\n  slotDuration: 15,\n  scrollTime: '08:00',\n  hideCurrentTime: false,\n  monthEventLimit: 3,\n  readonly: false,\n  disabled: false,\n  creatable: false,\n  edgeStepDelay: EDGE_STEP_DELAY,\n  noEdgeScroll: false,\n  label: undefined,\n})\n\n/*\n * The wrapper-root pattern: the consumer's class and style stay on the outer box, and\n * everything else — their `id`, their `aria-*` — goes on the region, which is the part\n * that carries the role and is therefore the part they mean.\n */\ndefineOptions({ inheritAttrs: false })\n\n/** Which span the calendar is showing. It opens on the week. */\nconst view = defineModel<CalendarView>('view', { default: 'week' })\n\n/*\n * @ssr — the anchor is read from the clock at setup, so the server and the client can in\n * principle disagree across a midnight boundary. That is the trade VDatePicker already\n * makes for the month it opens on, and it is a safer one here: what the anchor decides is\n * a whole WEEK or month, which is the same on both sides for all but a few seconds a day.\n * Today's date, which marks a single column, is a different matter and is read below in\n * `onMounted` where the server cannot see it at all.\n */\nconst date = defineModel<string>('date', { default: () => todayISO() })\n/**\n * What is on the calendar, empty to begin with. It is a MODEL rather than a plain prop\n * because dragging and resizing write back to it: the calendar rearranges what it is given\n * and hands the new list back, never mutating the one it received.\n *\n * Opening an event for editing stays with the consumer — this component reads and\n * rearranges, and never creates or deletes: a slot drawn out is reported, not added.\n */\nconst events = defineModel<E[]>('events', { default: () => [] })\n\nconst emit = defineEmits<{\n  /** A card was clicked or activated — the cue to open an editor of your own. */\n  'event-activate': [event: E]\n  /**\n   * An empty part of the grid was activated, at this day and this time. A day of the month\n   * view has no hour of its own, and reports the one the time grids start at.\n   */\n  'cell-activate': [cell: CalendarCell]\n  /**\n   * An event was dragged or nudged somewhere else. It carries the event as it now stands and\n   * where it came from, so undoing it needs no copy of your own.\n   */\n  'event-move': [event: E, previous: CalendarEventTimes]\n  /** An event's end was dragged or nudged, in the same two parts. */\n  'event-resize': [event: E, previous: CalendarEventTimes]\n  /**\n   * An empty stretch of a day was drawn out, and these are its times. Nothing has been added\n   * to `events`: this is the cue to make the event, in your own model or through your own form.\n   */\n  'event-create': [times: CalendarEventTimes]\n}>()\n\ndefineSlots<{\n  /** Extra controls in the toolbar, between the range and the view menu. */\n  actions?(): unknown\n  /** The content of one event's card, replacing the title and times. */\n  event?(props: CalendarEventSlotProps<E>): unknown\n  /** The head of one day column, replacing the weekday and the number. */\n  'day-header'?(props: { iso: string; weekday: string; dayText: string; today: boolean }): unknown\n  /** The label beside the band of all-day events. */\n  'all-day-label'?(): unknown\n}>()\n\nconst m = useMessages()\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst resolvedLocale = useResolvedLocale(() => props.locale)\nconst resolvedFormat = computed(() => props.format ?? hourCycleFor(resolvedLocale.value))\nconst resolvedWeekdays = computed(() =>\n  normalizeWeekdays(\n    props.weekdays,\n    props.firstDayOfWeek ?? firstDayOfWeekFor(resolvedLocale.value),\n  ),\n)\n\nconst timeWindow = computed(() => windowOf(props.dayStart, props.dayEnd))\n\nconst days = computed(() =>\n  visibleDays(date.value, view.value, resolvedWeekdays.value, props.customDays),\n)\n\n/** Which view is a time grid, and which is a summary. Several things below turn on this. */\nconst isTimeGrid = computed(() => view.value !== 'month' && view.value !== 'year')\n\nconst weeks = computed(() =>\n  view.value === 'month' ? monthWeeks(date.value, resolvedWeekdays.value) : [],\n)\n\nconst months = computed(() => (view.value === 'year' ? monthsOfYear(date.value) : []))\n\n// @ssr — today and the time it is now can only be known on the client: the server has no\n// way to tell either where the reader is, and rendering a guess would make the two markups\n// differ. Both stay null until then, and every rule that draws them is written to expect it.\nconst today = ref<string | null>(null)\nconst now = ref<number | null>(null)\n\nconst clock = useTimer()\n\n/**\n * Re-reads the clock, then arms itself for the top of the next minute — so the line moves\n * when the minute does rather than drifting by however long the interval was.\n *\n * TRAP — the floor on the delay is not a nicety. `useTimer` runs a delay of zero or less\n * SYNCHRONOUSLY, by design, so a tick that ever computed one would call itself straight back\n * and go on doing so until the stack gave out. A second is well below the resolution\n * anything here needs and comfortably above the point where that could happen.\n */\nfunction tick() {\n  const at = new Date()\n  now.value = at.getHours() * 60 + at.getMinutes()\n  clock.start(tick, Math.max(1000, (60 - at.getSeconds()) * 1000))\n}\n\nonMounted(() => {\n  today.value = todayISO()\n  if (!props.hideCurrentTime) tick()\n  const at = minutesOf(props.scrollTime)\n  if (at !== null) gridRef.value?.scrollToMinutes(at)\n})\n\n/**\n * The grid, named by what it exposes rather than by `InstanceType<typeof …>`.\n *\n * TRAP — the usual form does not work here and the error it gives says nothing useful about\n * why. A generic `<script setup>` compiles to a FUNCTION, not to a class, so it has no\n * construct signature for `InstanceType` to read: the message complains that the component\n * \"provides no match for the signature `new (...args: any)`\", pointing at the template.\n * Writing the contract out is also the more honest of the two, since these two methods are\n * the whole of what this component asks of that one.\n */\nconst gridRef = ref<{ focus(): void; scrollToMinutes(minutes: number): void } | null>(null)\n\n/*\n * Which cell holds the tab stop, kept as two refs because the two kinds of view mean\n * different things by it: a time grid needs a day AND an hour, a month only a day. One ref\n * carrying an hour the month ignores would leave that hour to go stale, and the grid would\n * then reopen on whatever the month happened to leave behind.\n */\nconst focused = ref<FocusedCell>({ iso: date.value, minutes: timeWindow.value.start })\nconst focusedDay = ref(date.value)\n\nconst range = computed(() =>\n  visibleRange(date.value, view.value, resolvedWeekdays.value, props.customDays),\n)\n\n/**\n * What the toolbar says the calendar is showing. Each view names itself at the coarsest\n * granularity that still identifies it: a single day says its weekday, a year says nothing\n * but the number.\n */\nconst rangeText = computed(() => {\n  const locale = resolvedLocale.value\n  if (view.value === 'year')\n    return formatDateDisplay(range.value.start, locale, { year: 'numeric' })\n  if (view.value === 'month') {\n    return formatDateDisplay(range.value.start, locale, { month: 'long', year: 'numeric' })\n  }\n  if (view.value === 'day') {\n    return formatDateDisplay(range.value.start, locale, {\n      weekday: 'long',\n      day: 'numeric',\n      month: 'long',\n      year: 'numeric',\n    })\n  }\n  return formatDisplayRange(range.value.start, range.value.end, locale, {\n    day: 'numeric',\n    month: 'long',\n    year: 'numeric',\n  })\n})\n\nconst viewLabel = (value: CalendarView) => {\n  const words = m.value.calendar\n  if (value === 'day') return words.viewDay\n  if (value === '4days') return words.view4Days\n  if (value === 'week') return words.viewWeek\n  if (value === 'month') return words.viewMonth\n  if (value === 'year') return words.viewYear\n  return words.viewCustom(props.customDays)\n}\n\n/**\n * What the two navigation buttons are called. They name the step rather than saying\n * \"previous\" alone, because the step is what changes from one view to the next and a bare\n * \"previous\" leaves a reader to guess whether it is a day or a year they are about to lose.\n */\nconst stepLabels = computed(() => {\n  const words = m.value.calendar\n  if (view.value === 'day') return { previous: words.previousDay, next: words.nextDay }\n  if (view.value === 'week') return { previous: words.previousWeek, next: words.nextWeek }\n  if (view.value === 'month') return { previous: words.previousMonth, next: words.nextMonth }\n  if (view.value === 'year') return { previous: words.previousYear, next: words.nextYear }\n  return { previous: words.previousPeriod, next: words.nextPeriod }\n})\n\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.calendar.label)\n\n/*\n * The four ways of reaching another period all pass through here, and `disabled` is refused\n * in every one of them rather than on the controls alone: the edge step pages the view from a\n * drag, and the year grid opens a month from a cell, neither of which is a button this\n * component disabled. It is the VDatePicker arrangement, where the guard sits on `goTo`.\n * `onCellActivate` below takes the same guard, for the same reason.\n */\nfunction step(delta: -1 | 1) {\n  if (props.disabled) return\n  date.value = stepAnchor(date.value, view.value, delta, resolvedWeekdays.value, props.customDays)\n}\n\nfunction goToToday() {\n  if (props.disabled) return\n  date.value = todayISO()\n}\n\nfunction setView(value: CalendarView) {\n  if (props.disabled) return\n  view.value = value\n}\n\n/**\n * An empty cell taken up, from either grid. The one place the time a month day stands for is\n * decided: the hour the time grids start at.\n *\n * TRAP — `disabled` is refused HERE, and not by the stylesheet's `pointer-events: none`\n * alone. That rule stops a click, but the grid keeps its tab stop so the agenda stays\n * readable, and Enter on a focused cell reaches this with nothing in its way — a frozen\n * calendar would go on reporting cells to a consumer's form.\n */\nfunction onCellActivate(cell: ActivatedCell) {\n  if (props.disabled) return\n  emit('cell-activate', {\n    date: cell.date,\n    time: timeOf(cell.minutes ?? timeWindow.value.start),\n  })\n}\n\n/**\n * Going from a summary to the thing it summarises: opening a day from the month view, or a\n * month from the year view.\n *\n * The view only changes if the calendar was offering that one in the first place. A consumer\n * who narrowed `views` to a week and a year has said what their calendar is for, and jumping\n * it into a day view they deliberately left out would be the component overruling them —\n * so the date moves and the view stays, which is still a step towards what was asked for.\n */\nfunction openIn(iso: string, target: CalendarView) {\n  if (props.disabled) return\n  date.value = iso\n  if (props.views.includes(target)) view.value = target\n}\n\n/**\n * What a reader who cannot see the grid is told: the range after every step of a move, and\n * whether the move was taken or given up.\n *\n * The node is rendered from the FIRST paint and left empty, never inserted along with its\n * first message — a live region that appears at the same moment as its text is not announced\n * at all, which is the trap VDataTable's selection count already documents.\n */\nconst announcement = ref('')\nconst uid = useId()\nconst hintId = `${uid}-hint`\n\nfunction announce(message: string) {\n  announcement.value = message\n}\n\n/**\n * Writes one event's new times into the model and says what happened.\n *\n * The array is replaced rather than edited in place: a new reference is what wakes a\n * consumer's own watchers, and it is the design system's rule for every v-model holding a\n * list. This runs ONCE, when a gesture ends — never per frame of a drag, which would fill an\n * undo stack with sixty entries a second and send each one back as a render fighting the\n * finger.\n */\nfunction onEventDrop(id: CalendarEventId, times: CalendarEventTimes, kind: 'move' | 'resize') {\n  const current = events.value.find((item) => item.id === id)\n  if (!current) return\n\n  const previous = timesOf(current)\n  const next = { ...current, ...times }\n  events.value = events.value.map((item) => (item.id === id ? next : item))\n  // Written out rather than picking the name with a conditional: the emit signatures are an\n  // overload set, and TypeScript resolves one only against a literal.\n  if (kind === 'resize') emit('event-resize', next, previous)\n  else emit('event-move', next, previous)\n}\n\n/*\n * A drawn slot is REPORTED and never added. What an event is called, what else it carries and\n * whether it exists at all are the consumer's decisions, so the calendar hands over the times\n * and draws nothing once the pointer is let go. The grid only asks when it was told it could\n * create, so `creatable` is not checked a second time here.\n */\nfunction onSlotCreate(times: CalendarEventTimes) {\n  emit('event-create', times)\n}\n\ndefineExpose({\n  /** Brings the focus into the grid, onto the cell it is currently showing. */\n  focus: () => gridRef.value?.focus(),\n  /** Goes back to the current day, exactly as the Today button does. */\n  today: goToToday,\n  /** Moves back one view — a week, a month, a year — exactly as the toolbar's arrow does. */\n  previous: () => step(-1),\n  /** Moves forward one view. */\n  next: () => step(1),\n  /** Scrolls the grid so a given `HH:mm` sits at the top of the visible area. */\n  scrollTo: (time: string) => {\n    const at = minutesOf(time)\n    if (at !== null) gridRef.value?.scrollToMinutes(at)\n  },\n})\n</script>\n\n<template>\n  <div\n    class=\"v-calendar\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <section\n      v-bind=\"forwardedAttrs\"\n      class=\"v-calendar-region\"\n      :aria-label=\"ariaLabel\"\n      :aria-roledescription=\"m.calendar.roleDescription\"\n    >\n      <div class=\"v-calendar-toolbar\">\n        <div class=\"v-calendar-nav\">\n          <VIconButton\n            :label=\"stepLabels.previous\"\n            size=\"sm\"\n            :disabled=\"disabled\"\n            @click=\"step(-1)\"\n          >\n            <VIcon :name=\"chevronLeftIcon\" mirrored />\n          </VIconButton>\n          <VIconButton :label=\"stepLabels.next\" size=\"sm\" :disabled=\"disabled\" @click=\"step(1)\">\n            <VIcon :name=\"chevronRightIcon\" mirrored />\n          </VIconButton>\n        </div>\n\n        <VButton variant=\"outline\" tone=\"neutral\" size=\"sm\" :disabled=\"disabled\" @click=\"goToToday\">\n          {{ m.calendar.today }}\n        </VButton>\n\n        <VTypography variant=\"heading-4\" as=\"h2\" class=\"v-calendar-title\">\n          {{ rangeText }}\n        </VTypography>\n\n        <div class=\"v-calendar-actions\">\n          <slot name=\"actions\" />\n\n          <VMenu v-if=\"views.length > 1\" size=\"sm\" placement=\"bottom-end\" match-trigger>\n            <template #trigger=\"{ triggerProps }\">\n              <VButton\n                variant=\"outline\"\n                tone=\"neutral\"\n                size=\"sm\"\n                :disabled=\"disabled\"\n                v-bind=\"triggerProps\"\n                :aria-label=\"`${m.calendar.view}: ${viewLabel(view)}`\"\n              >\n                {{ viewLabel(view) }}\n                <VIcon :name=\"arrowDropDownIcon\" />\n              </VButton>\n            </template>\n            <VMenuItem\n              v-for=\"value in views\"\n              :key=\"value\"\n              :label=\"viewLabel(value)\"\n              :selected=\"value === view\"\n              @select=\"setView(value)\"\n            />\n          </VMenu>\n        </div>\n      </div>\n\n      <!--\n        The public props say what is REFUSED — `readonly`, `hideCurrentTime`,\n        `noEdgeScroll` — so that none of them has to be turned off with a binding. The two\n        internal grids keep the positive sense they read a dozen times each, and the whole\n        of the inversion lives here, at the boundary: flip a sign on one of these lines and\n        the grid quietly does the opposite of what was asked, since nothing downstream\n        knows which way round the prop was written.\n      -->\n      <VCalendarTimeGrid\n        v-if=\"isTimeGrid\"\n        ref=\"gridRef\"\n        v-model:focused=\"focused\"\n        class=\"v-calendar-view\"\n        :days=\"days\"\n        :events=\"events\"\n        :time-window=\"timeWindow\"\n        :slot-duration=\"slotDuration\"\n        :locale=\"resolvedLocale\"\n        :format=\"resolvedFormat\"\n        :today=\"today\"\n        :now=\"hideCurrentTime ? null : now\"\n        :editable=\"!readonly && !disabled\"\n        :disabled=\"disabled\"\n        :creatable=\"creatable && !disabled\"\n        :hint-id=\"hintId\"\n        :edge-step-delay=\"edgeStepDelay\"\n        :auto-scroll=\"!noEdgeScroll\"\n        :label=\"rangeText\"\n        @cell-activate=\"onCellActivate\"\n        @event-activate=\"emit('event-activate', $event)\"\n        @event-drop=\"onEventDrop\"\n        @slot-create=\"onSlotCreate\"\n        @announce=\"announce\"\n        @step=\"step\"\n      >\n        <template v-if=\"$slots.event\" #event=\"slotProps\">\n          <slot name=\"event\" v-bind=\"slotProps\" />\n        </template>\n        <template v-if=\"$slots['day-header']\" #day-header=\"slotProps\">\n          <slot name=\"day-header\" v-bind=\"slotProps\" />\n        </template>\n        <template v-if=\"$slots['all-day-label']\" #all-day-label>\n          <slot name=\"all-day-label\" />\n        </template>\n      </VCalendarTimeGrid>\n\n      <VCalendarMonth\n        v-else-if=\"view === 'month'\"\n        ref=\"gridRef\"\n        v-model:focused=\"focusedDay\"\n        class=\"v-calendar-view\"\n        :weeks=\"weeks\"\n        :events=\"events\"\n        :locale=\"resolvedLocale\"\n        :format=\"resolvedFormat\"\n        :today=\"today\"\n        :month-event-limit=\"monthEventLimit\"\n        :editable=\"!readonly && !disabled\"\n        :disabled=\"disabled\"\n        :hint-id=\"hintId\"\n        :edge-step-delay=\"edgeStepDelay\"\n        :label=\"rangeText\"\n        @day-activate=\"openIn($event, 'day')\"\n        @cell-activate=\"onCellActivate\"\n        @event-activate=\"emit('event-activate', $event)\"\n        @event-drop=\"onEventDrop\"\n        @announce=\"announce\"\n        @step=\"step\"\n      >\n        <template v-if=\"$slots.event\" #event=\"slotProps\">\n          <slot name=\"event\" v-bind=\"slotProps\" />\n        </template>\n      </VCalendarMonth>\n\n      <VCalendarYear\n        v-else\n        class=\"v-calendar-view\"\n        :months=\"months\"\n        :events=\"events\"\n        :locale=\"resolvedLocale\"\n        :weekdays=\"resolvedWeekdays\"\n        :today=\"today\"\n        :label=\"rangeText\"\n        @month-activate=\"openIn($event, 'month')\"\n      />\n\n      <!--\n        Both of these are rendered from the first paint and never conditionally.\n\n        The live region has to EXIST before it has anything to say: one inserted along with\n        its first message is not announced at all. And the hint is what every card points at\n        with `aria-describedby`, so one node serves the whole calendar rather than repeating\n        the same sentence on each of a hundred events.\n      -->\n      <div class=\"v-visually-hidden\" role=\"status\" aria-live=\"polite\">{{ announcement }}</div>\n      <span :id=\"hintId\" class=\"v-visually-hidden\">{{ m.calendar.eventHint }}</span>\n    </section>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-calendar {\n    display: flex;\n    block-size: 100%;\n    min-block-size: 0;\n    font-family: var(--vectis-text-family);\n    color: var(--vectis-color-text);\n  }\n\n  /* A frozen calendar greys out through the colour tokens and never through opacity, the\n     design system rule: what a reader keeps here is the agenda itself, which has to stay\n     readable. The cards are real disabled buttons, so they grey themselves. */\n  .v-calendar[data-disabled] {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-calendar[data-disabled] .v-calendar-view {\n    pointer-events: none;\n  }\n\n  /*\n   * The height is settled in CSS rather than measured, the VDataTable idiom: the region is\n   * a flex column at full height, the toolbar refuses to grow and the grid takes what is\n   * left. `min-block-size: 0` on the grid is what lets it shrink below its content and\n   * therefore scroll — without it the automatic minimum of a flex item would hold it at its\n   * full 24-hour height and the whole page would scroll instead.\n   *\n   * All of it is a no-op when the parent's height is auto, where the percentage falls back\n   * to auto and the calendar is simply as tall as its content. That is what makes an opt-in\n   * prop unnecessary.\n   */\n  .v-calendar-region {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-inline-size: 0;\n    min-block-size: 0;\n  }\n\n  .v-calendar-toolbar {\n    display: flex;\n    flex: none;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    padding-block-end: var(--vectis-space-3);\n  }\n\n  .v-calendar-nav {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n  }\n\n  .v-calendar-title {\n    /* It may be long — a full weekday and month in the day view — so it is the part that\n       gives way first, and the controls keep their size. */\n    min-inline-size: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-calendar-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    /* The two siblings are pushed apart from here rather than by a `justify-content` on the\n       toolbar, which would space every control equally instead of grouping them. */\n    margin-inline-start: auto;\n  }\n\n  /*\n   * The view on show, whichever it is: the one box that scrolls. The views inherit the family\n   * and the colour from `.v-calendar` and declare neither again.\n   */\n  .v-calendar-view {\n    flex: 1;\n    overflow: auto;\n    block-size: 100%;\n    min-block-size: 0;\n    border: 1px solid var(--vectis-color-border);\n    border-radius: var(--vectis-radius-surface);\n  }\n\n  /*\n   * What the three views share lives HERE rather than in each of their sheets. They are only\n   * ever rendered by this component, so this sheet ships wherever they do — the\n   * VCarousel/VCarouselItem arrangement. Every rule a view writes against one of these classes\n   * is either disjoint from it or more specific, never tied: a tie between two sheets would be\n   * settled by the consumer's bundler.\n   */\n\n  /*\n   * A drag currently held off the calendar. `not-allowed` is the word the library already uses\n   * for \"you cannot do this\", on every disabled control.\n   *\n   * BEST-EFFORT, and never the signal: while a pointer is captured the cursor is resolved\n   * against the capture target rather than against whatever sits under the pointer, and engines\n   * differ on it. What carries the message is the card's own paint.\n   */\n  .v-calendar-view[data-outside] {\n    cursor: not-allowed;\n  }\n\n  .v-calendar-weekday {\n    color: var(--vectis-color-text-muted);\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    text-transform: uppercase;\n  }\n\n  /*\n   * Today's date, marked on the number the way a calendar marks a date rather than a column.\n   * Semibold here marks a state, not a type role. Written at (0,2,0) so it wins over each view's\n   * own (0,1,0) rule for the element it lands on.\n   */\n  .v-calendar-view .v-calendar-today {\n    background: var(--vectis-color-accent);\n    color: var(--vectis-color-text-on-accent);\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n\n  /*\n   * A cell of either grid: ruled on two sides, the other two drawn by its neighbours. It keeps\n   * the default cursor: the pointer hand belongs to what can be opened, the events, and a grid\n   * of hands would say every square of the week is a link.\n   */\n  .v-calendar-cell {\n    border-block-start: 1px solid var(--vectis-color-border);\n    border-inline-start: 1px solid var(--vectis-color-border);\n  }\n\n  .v-calendar-cell:first-child {\n    border-inline-start: none;\n  }\n\n  .v-calendar-cell:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    /* Drawn inwards: the view is a scrolling box, and an outward ring on a cell at the edge\n       would be cropped by it. */\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  /* The plain buttons the month and year views draw: a day number, the \"+2 more\", a month. */\n  .v-calendar-button {\n    /* A button carries a border and a background from the browser, which around a round day\n       number read as a stray ring. Neither is optional. */\n    border: none;\n    background: none;\n    font-family: inherit;\n    cursor: pointer;\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-calendar-button: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  /*\n   * The strip that lights up while a drag rests against an edge, counting down to turn the\n   * page. It is what stops the paging being a surprise.\n   *\n   * Drawn INSIDE the box the cells occupy rather than on the scroller, because a scroller's\n   * absolutely positioned child is placed against its content and scrolls away with it. That\n   * box has to be positioned, which each view's own sheet sees to. An absolutely positioned\n   * pseudo-element is not a grid item, so it disturbs no column.\n   *\n   * Its width is `--vectis-control-size-calendar-edge`, whose twin is `EDGE_BAND` in\n   * `edgeStep.ts` — the JavaScript that decides where the countdown actually starts. Neither\n   * may move without the other. The layer, 2, is the time grid's stacking table.\n   */\n  .v-calendar-edge-cue[data-edge]::after {\n    content: '';\n    position: absolute;\n    inset-block: 0;\n    inline-size: var(--vectis-control-size-calendar-edge);\n    background: var(--vectis-color-accent-surface);\n    z-index: 2;\n    pointer-events: none;\n  }\n\n  .v-calendar-edge-cue[data-edge='start']::after {\n    inset-inline-start: 0;\n  }\n\n  .v-calendar-edge-cue[data-edge='end']::after {\n    inset-inline-end: 0;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-calendar-button {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VCalendar.js","names":[],"sources":["../../../src/components/VCalendar/VCalendar.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"E extends CalendarEvent\">\n// @a11y @ssr @core\n/**\n * An agenda: the days side by side, the hours running down them, the events drawn where they\n * fall.\n *\n * A place to READ and REARRANGE a schedule, never to write one. Opening an event for editing\n * stays with the consumer — this reports what was asked for and leaves the form to them.\n *\n * Everything is local ISO `YYYY-MM-DD` and 24-hour `HH:mm`, which is what keeps the server\n * and the browser in agreement. An event may name a `timezone`, and that name is SHOWN\n * beside its times but never applied: converting would move the card depending on where the\n * page was rendered, the one thing a calendar must not do.\n *\n * The JS is what the platform leaves no way round — there is no accessible time grid to\n * build on and no way to say \"these three meetings overlap, share the width\" in CSS, so the\n * ARIA grid pattern and the overlap layout are written by hand. Every geometric and\n * calendrical decision lives in `layout.ts`, pure, because jsdom lays nothing out and that is\n * the only place any of it can be tested.\n */\nimport { computed, onMounted, ref, useId, watch } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { arrow_drop_down as arrowDropDownIcon } from '../VIcon/icons/arrow_drop_down'\nimport { 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 VMenu from '../VMenu/VMenu.vue'\nimport VMenuItem from '../VMenu/VMenuItem.vue'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useLiveAnnouncer } from '../../composables/useLiveAnnouncer'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTimer } from '../../composables/useTimer'\nimport { firstDayOfWeekFor, formatDateDisplay, formatDisplayRange } from '../../utils/date'\nimport { hourCycleFor, minutesOf } from '../../utils/time'\n\nimport { useMessages, useResolvedLocale } from '../../i18n/state'\n\nimport VCalendarMonth from './VCalendarMonth.vue'\nimport VCalendarTimeGrid, { type FocusedCell } from './VCalendarTimeGrid.vue'\nimport VCalendarYear from './VCalendarYear.vue'\nimport { EDGE_STEP_DELAY } from './edgeStep'\nimport {\n  monthWeeks,\n  monthsOfYear,\n  normalizeWeekdays,\n  stepAnchor,\n  sameTimes,\n  timeOf,\n  timesOf,\n  todayISO,\n  visibleDays,\n  visibleRange,\n  windowOf,\n} from './layout'\nimport type {\n  ActivatedCell,\n  CalendarCell,\n  CalendarEvent,\n  CalendarEventId,\n  CalendarEventSlotProps,\n  CalendarEventTimes,\n  CalendarFormat,\n  CalendarView,\n} from './types'\n\nexport interface CalendarProps {\n  /**\n   * Which views the menu offers, in the order it lists them. Narrowing it is how a\n   * calendar that only ever shows weeks stops offering anything else.\n   */\n  views?: CalendarView[]\n  /** How many days the custom view shows, and how far Previous and Next step in it. */\n  customDays?: number\n  /**\n   * Which weekdays are on show, as numbers from 0 for Sunday. `[1,2,3,4,5]` hides the\n   * weekend everywhere. The ORDER matters as well: the first entry is the day a week\n   * starts on, and it wins over `firstDayOfWeek`. Left out, the seven days starting on\n   * `firstDayOfWeek`.\n   */\n  weekdays?: number[]\n  /**\n   * The day a week starts on, from 0 for Sunday, when `weekdays` is not given. Left out,\n   * the locale decides.\n   */\n  firstDayOfWeek?: number\n  /** The language the days, months and times are written in. Falls back to the global one. */\n  locale?: string\n  /**\n   * Whether times are shown on a twelve or twenty-four hour clock. Left out, the reader's\n   * language decides. It is the same prop, under the same name, as VTimePicker's.\n   */\n  format?: CalendarFormat\n  /** The hour the grid starts at, from 0. */\n  dayStart?: number\n  /** The hour it ends at, up to 24. */\n  dayEnd?: number\n  /**\n   * The step everything snaps to, in minutes: how far a nudge moves an event, and the unit a\n   * slot is drawn out in.\n   */\n  slotDuration?: number\n  /** Where the grid is scrolled to when it first appears, so the working day is in view. */\n  scrollTime?: string\n  /**\n   * Leaves out the line drawn across today's column at the time it is now, and the dot on\n   * its leading edge. Left in, it ticks once a minute while the calendar is on screen.\n   */\n  hideCurrentTime?: boolean\n  /** How many events a day of the month view shows before it starts counting the rest. */\n  monthEventLimit?: number\n  /**\n   * Stops events being moved and stretched, by dragging or with the keyboard. They\n   * stay readable and clickable, and nothing else.\n   */\n  readonly?: boolean\n  /**\n   * Freezes the whole calendar: nothing can be moved, created or opened, no other period\n   * can be reached, and everything greys out through the colour tokens. The cards leave the\n   * tab order, the grid keeps its own so the agenda can still be read. That is what\n   * separates this from `readonly`, where only the editing stops.\n   */\n  disabled?: boolean\n  /**\n   * Lets an empty stretch of a time grid be drawn out with the pointer, up or down from the\n   * slot pressed. On release its times are reported through `event-create`, and nothing is\n   * added to `events`: putting the event on the calendar is yours to do. A click, or Enter on a\n   * focused cell, reports `cell-activate` with or without this.\n   */\n  creatable?: boolean\n  /**\n   * How long a dragged event has to rest against the side of the calendar before the view\n   * turns to the previous or next period, in milliseconds. `0` turns that off.\n   *\n   * The wait is the point of it: paging the instant the pointer touched the edge would make\n   * the last day of a week impossible to aim at.\n   */\n  edgeStepDelay?: number\n  /** Stops dragging near the top or bottom of a time grid from scrolling it. */\n  noEdgeScroll?: boolean\n  /** What the calendar is called, for anyone who cannot see it. */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<CalendarProps>(), {\n  views: () => ['day', '4days', 'week'],\n  customDays: 4,\n  weekdays: undefined,\n  firstDayOfWeek: undefined,\n  locale: undefined,\n  format: undefined,\n  dayStart: 0,\n  dayEnd: 24,\n  slotDuration: 15,\n  scrollTime: '08:00',\n  hideCurrentTime: false,\n  monthEventLimit: 3,\n  readonly: false,\n  disabled: false,\n  creatable: false,\n  edgeStepDelay: EDGE_STEP_DELAY,\n  noEdgeScroll: false,\n  label: undefined,\n})\n\n/*\n * The wrapper-root pattern: the consumer's class and style stay on the outer box, and\n * everything else — their `id`, their `aria-*` — goes on the region, which is the part\n * that carries the role and is therefore the part they mean.\n */\ndefineOptions({ inheritAttrs: false })\n\n/** Which span the calendar is showing. It opens on the week. */\nconst view = defineModel<CalendarView>('view', { default: 'week' })\n\n// @ssr\n/*\n * The anchor is read from the clock at setup, so the server and the client can in\n * principle disagree across a midnight boundary. That is the trade VDatePicker already\n * makes for the month it opens on, and it is a safer one here: what the anchor decides is\n * a whole WEEK or month, which is the same on both sides for all but a few seconds a day.\n * Today's date, which marks a single column, is a different matter and is read below in\n * `onMounted` where the server cannot see it at all.\n */\n/**\n * The day the calendar is anchored on, as `YYYY-MM-DD`: the view shows the week, month or\n * year holding it. It opens on today.\n */\nconst date = defineModel<string>('date', { default: () => todayISO() })\n/**\n * What is on the calendar, empty to begin with. It is a MODEL rather than a plain prop\n * because dragging and resizing write back to it: the calendar rearranges what it is given\n * and hands the new list back, never mutating the one it received.\n *\n * Opening an event for editing stays with the consumer: this component reads and\n * rearranges, and never creates or deletes: a slot drawn out is reported, not added.\n */\nconst events = defineModel<E[]>('events', { default: () => [] })\n\nconst emit = defineEmits<{\n  /** A card was clicked or activated: the cue to open an editor of your own. */\n  'event-activate': [event: E]\n  /**\n   * An empty part of the grid was activated, at this day and this time. A day of the month\n   * view has no hour of its own, and reports the one the time grids start at.\n   */\n  'cell-activate': [cell: CalendarCell]\n  /**\n   * An event was dragged or nudged somewhere else. It carries the event as it now stands and\n   * where it came from, so undoing it needs no copy of your own. A gesture that ends where it\n   * began reports nothing.\n   */\n  'event-move': [event: E, previous: CalendarEventTimes]\n  /** An event's end was dragged or nudged, in the same two parts. */\n  'event-resize': [event: E, previous: CalendarEventTimes]\n  /**\n   * An empty stretch of a day was drawn out, and these are its times. Nothing has been added\n   * to `events`: this is the cue to make the event, in your own model or through your own form.\n   */\n  'event-create': [times: CalendarEventTimes]\n}>()\n\ndefineSlots<{\n  /** Extra controls in the toolbar, between the range and the view menu. */\n  actions?(): unknown\n  /** The content of one event's card, replacing the title and times. */\n  event?(props: CalendarEventSlotProps<E>): unknown\n  /** The head of one day column, replacing the weekday and the number. */\n  'day-header'?(props: { iso: string; weekday: string; dayText: string; today: boolean }): unknown\n  /** The label beside the band of all-day events. */\n  'all-day-label'?(): unknown\n}>()\n\nconst m = useMessages()\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst resolvedLocale = useResolvedLocale(() => props.locale)\nconst resolvedFormat = computed(() => props.format ?? hourCycleFor(resolvedLocale.value))\nconst resolvedWeekdays = computed(() =>\n  normalizeWeekdays(\n    props.weekdays,\n    props.firstDayOfWeek ?? firstDayOfWeekFor(resolvedLocale.value),\n  ),\n)\n\nconst timeWindow = computed(() => windowOf(props.dayStart, props.dayEnd))\n\nconst days = computed(() =>\n  visibleDays(date.value, view.value, resolvedWeekdays.value, props.customDays),\n)\n\n/** Which view is a time grid, and which is a summary. Several things below turn on this. */\nconst isTimeGrid = computed(() => view.value !== 'month' && view.value !== 'year')\n\nconst weeks = computed(() =>\n  view.value === 'month' ? monthWeeks(date.value, resolvedWeekdays.value) : [],\n)\n\nconst months = computed(() => (view.value === 'year' ? monthsOfYear(date.value) : []))\n\n// @ssr — today and the time it is now can only be known on the client: the server has no\n// way to tell either where the reader is, and rendering a guess would make the two markups\n// differ. Both stay null until then, and every rule that draws them is written to expect it.\nconst today = ref<string | null>(null)\nconst now = ref<number | null>(null)\n\nconst clock = useTimer()\n\n/**\n * Re-reads the clock, then arms itself for the top of the next minute — so the line moves\n * when the minute does rather than drifting by however long the interval was.\n *\n * TRAP — the floor on the delay is not a nicety. `useTimer` runs a delay of zero or less\n * SYNCHRONOUSLY, by design, so a tick that ever computed one would call itself straight back\n * and go on doing so until the stack gave out. A second is well below the resolution\n * anything here needs and comfortably above the point where that could happen.\n */\nfunction tick() {\n  const at = new Date()\n  now.value = at.getHours() * 60 + at.getMinutes()\n  clock.start(tick, Math.max(1000, (60 - at.getSeconds()) * 1000))\n}\n\n/** Scrolls the time grid on show to `scrollTime`. */\nfunction scrollToStart() {\n  const at = minutesOf(props.scrollTime)\n  if (at !== null) gridRef.value?.scrollToMinutes(at)\n}\n\nonMounted(() => {\n  today.value = todayISO()\n  if (!props.hideCurrentTime) tick()\n  scrollToStart()\n})\n\n// @core\n// The prop is a switch a consumer may flip after mount: the clock read at mount alone never\n// started when it was turned on later, and went on ticking when it was turned off.\nwatch(\n  () => props.hideCurrentTime,\n  (hidden) => {\n    if (!hidden) return tick()\n    clock.cancel()\n    now.value = null\n  },\n)\n\n/**\n * The grid, named by what it exposes rather than by `InstanceType<typeof …>`.\n *\n * TRAP — the usual form does not work here and the error it gives says nothing useful about\n * why. A generic `<script setup>` compiles to a FUNCTION, not to a class, so it has no\n * construct signature for `InstanceType` to read: the message complains that the component\n * \"provides no match for the signature `new (...args: any)`\", pointing at the template.\n * Writing the contract out is also the more honest of the two, since these two methods are\n * the whole of what this component asks of that one.\n */\nconst gridRef = ref<{\n  focus(options?: FocusOptions): void\n  scrollToMinutes(minutes: number): void\n} | null>(null)\n\n// @core\n// A time grid that appears after mount, a month switched to a week, opens at `scrollTime`\n// too. Post-flush, so the new grid is rendered and measurable when it is asked to scroll.\nwatch(gridRef, scrollToStart, { flush: 'post' })\n\n/** The region, the element a consumer's attributes land on. */\nconst regionEl = ref<HTMLElement | null>(null)\n\n/*\n * Which cell holds the tab stop, kept as two refs because the two kinds of view mean\n * different things by it: a time grid needs a day AND an hour, a month only a day. One ref\n * carrying an hour the month ignores would leave that hour to go stale, and the grid would\n * then reopen on whatever the month happened to leave behind.\n */\nconst focused = ref<FocusedCell>({ iso: date.value, minutes: timeWindow.value.start })\nconst focusedDay = ref(date.value)\n\nconst range = computed(() =>\n  visibleRange(date.value, view.value, resolvedWeekdays.value, props.customDays),\n)\n\n/**\n * What the toolbar says the calendar is showing. Each view names itself at the coarsest\n * granularity that still identifies it: a single day says its weekday, a year says nothing\n * but the number.\n */\nconst rangeText = computed(() => {\n  const locale = resolvedLocale.value\n  if (view.value === 'year')\n    return formatDateDisplay(range.value.start, locale, { year: 'numeric' })\n  if (view.value === 'month') {\n    return formatDateDisplay(range.value.start, locale, { month: 'long', year: 'numeric' })\n  }\n  if (view.value === 'day') {\n    return formatDateDisplay(range.value.start, locale, {\n      weekday: 'long',\n      day: 'numeric',\n      month: 'long',\n      year: 'numeric',\n    })\n  }\n  return formatDisplayRange(range.value.start, range.value.end, locale, {\n    day: 'numeric',\n    month: 'long',\n    year: 'numeric',\n  })\n})\n\nconst viewLabel = (value: CalendarView) => {\n  const words = m.value.calendar\n  if (value === 'day') return words.viewDay\n  if (value === '4days') return words.view4Days\n  if (value === 'week') return words.viewWeek\n  if (value === 'month') return words.viewMonth\n  if (value === 'year') return words.viewYear\n  return words.viewCustom(props.customDays)\n}\n\n/**\n * What the two navigation buttons are called. They name the step rather than saying\n * \"previous\" alone, because the step is what changes from one view to the next and a bare\n * \"previous\" leaves a reader to guess whether it is a day or a year they are about to lose.\n */\nconst stepLabels = computed(() => {\n  const words = m.value.calendar\n  if (view.value === 'day') return { previous: words.previousDay, next: words.nextDay }\n  if (view.value === 'week') return { previous: words.previousWeek, next: words.nextWeek }\n  if (view.value === 'month') return { previous: words.previousMonth, next: words.nextMonth }\n  if (view.value === 'year') return { previous: words.previousYear, next: words.nextYear }\n  return { previous: words.previousPeriod, next: words.nextPeriod }\n})\n\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.calendar.label)\n\n/*\n * The four ways of reaching another period all pass through here, and `disabled` is refused\n * in every one of them rather than on the controls alone: the edge step pages the view from a\n * drag, and the year grid opens a month from a cell, neither of which is a button this\n * component disabled. It is the VDatePicker arrangement, where the guard sits on `goTo`.\n * `onCellActivate` below takes the same guard, for the same reason.\n */\nfunction step(delta: -1 | 1) {\n  if (props.disabled) return\n  date.value = stepAnchor(date.value, view.value, delta, resolvedWeekdays.value, props.customDays)\n}\n\nfunction goToToday() {\n  if (props.disabled) return\n  date.value = todayISO()\n}\n\nfunction setView(value: CalendarView) {\n  if (props.disabled) return\n  view.value = value\n}\n\n/**\n * An empty cell taken up, from either grid. The one place the time a month day stands for is\n * decided: the hour the time grids start at.\n *\n * TRAP — `disabled` is refused HERE, and not by the stylesheet's `pointer-events: none`\n * alone. That rule stops a click, but the grid keeps its tab stop so the agenda stays\n * readable, and Enter on a focused cell reaches this with nothing in its way — a frozen\n * calendar would go on reporting cells to a consumer's form.\n */\nfunction onCellActivate(cell: ActivatedCell) {\n  if (props.disabled) return\n  emit('cell-activate', {\n    date: cell.date,\n    time: timeOf(cell.minutes ?? timeWindow.value.start),\n  })\n}\n\n/**\n * Going from a summary to the thing it summarises: opening a day from the month view, or a\n * month from the year view.\n *\n * The view only changes if the calendar was offering that one in the first place. A consumer\n * who narrowed `views` to a week and a year has said what their calendar is for, and jumping\n * it into a day view they deliberately left out would be the component overruling them —\n * so the date moves and the view stays, which is still a step towards what was asked for.\n */\nfunction openIn(iso: string, target: CalendarView) {\n  if (props.disabled) return\n  date.value = iso\n  if (props.views.includes(target)) view.value = target\n}\n\n/**\n * What a reader who cannot see the grid is told: the range after every step of a move, and\n * whether the move was taken or given up.\n *\n * The node is rendered from the FIRST paint and left empty, never inserted along with its\n * first message — a live region that appears at the same moment as its text is not announced\n * at all, which is the trap VDataTable's selection count already documents.\n */\nconst { polite: announcement, announce: say } = useLiveAnnouncer()\nconst uid = useId()\nconst hintId = `${uid}-hint`\n\n/*\n * Through the shared announcer, which empties the region and writes on the next tick: the\n * same words twice in a row are no change to a live region, and would not be read again.\n */\nfunction announce(message: string) {\n  say(message, false)\n}\n\n/**\n * Writes one event's new times into the model and says what happened.\n *\n * The array is replaced rather than edited in place: a new reference is what wakes a\n * consumer's own watchers, and it is the design system's rule for every v-model holding a\n * list. This runs ONCE, when a gesture ends — never per frame of a drag, which would fill an\n * undo stack with sixty entries a second and send each one back as a render fighting the\n * finger.\n */\nfunction onEventDrop(id: CalendarEventId, times: CalendarEventTimes, kind: 'move' | 'resize') {\n  const current = events.value.find((item) => item.id === id)\n  if (!current) return\n\n  const previous = timesOf(current)\n  // A gesture that ends where it began moved nothing, and a consumer's undo stack must not\n  // gain an entry for it, nor its watchers a new array.\n  if (sameTimes(previous, times)) return\n  const next = { ...current, ...times }\n  events.value = events.value.map((item) => (item.id === id ? next : item))\n  // Written out rather than picking the name with a conditional: the emit signatures are an\n  // overload set, and TypeScript resolves one only against a literal.\n  if (kind === 'resize') emit('event-resize', next, previous)\n  else emit('event-move', next, previous)\n}\n\n/*\n * A drawn slot is REPORTED and never added. What an event is called, what else it carries and\n * whether it exists at all are the consumer's decisions, so the calendar hands over the times\n * and draws nothing once the pointer is let go. The grid only asks when it was told it could\n * create, so `creatable` is not checked a second time here.\n */\nfunction onSlotCreate(times: CalendarEventTimes) {\n  emit('event-create', times)\n}\n\ndefineExpose({\n  /**\n   * Brings the focus into the view: the cell the grid is showing, or the first month heading\n   * in the year view.\n   */\n  focus: (options?: FocusOptions) => gridRef.value?.focus(options),\n  /** The region, which is where your `id` and `aria-*` attributes land. */\n  el: regionEl,\n  /** Goes back to the current day, exactly as the Today button does. */\n  today: goToToday,\n  /** Moves back one view (a week, a month or a year), exactly as the toolbar's arrow does. */\n  previous: () => step(-1),\n  /** Moves forward one view. */\n  next: () => step(1),\n  /** Scrolls the grid so a given `HH:mm` sits at the top of the visible area. */\n  scrollTo: (time: string) => {\n    const at = minutesOf(time)\n    if (at !== null) gridRef.value?.scrollToMinutes(at)\n  },\n})\n</script>\n\n<template>\n  <div\n    class=\"v-calendar\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <section\n      ref=\"regionEl\"\n      :aria-roledescription=\"m.calendar.roleDescription\"\n      v-bind=\"forwardedAttrs\"\n      class=\"v-calendar-region\"\n      :aria-label=\"ariaLabel\"\n    >\n      <div class=\"v-calendar-toolbar\">\n        <div class=\"v-calendar-nav\">\n          <VIconButton\n            :label=\"stepLabels.previous\"\n            size=\"sm\"\n            :disabled=\"disabled\"\n            @click=\"step(-1)\"\n          >\n            <VIcon :name=\"chevronLeftIcon\" mirrored />\n          </VIconButton>\n          <VIconButton :label=\"stepLabels.next\" size=\"sm\" :disabled=\"disabled\" @click=\"step(1)\">\n            <VIcon :name=\"chevronRightIcon\" mirrored />\n          </VIconButton>\n        </div>\n\n        <VButton variant=\"outline\" tone=\"neutral\" size=\"sm\" :disabled=\"disabled\" @click=\"goToToday\">\n          {{ m.calendar.today }}\n        </VButton>\n\n        <VTypography variant=\"heading-4\" as=\"h2\" class=\"v-calendar-title\">\n          {{ rangeText }}\n        </VTypography>\n\n        <div class=\"v-calendar-actions\">\n          <slot name=\"actions\" />\n\n          <VMenu v-if=\"views.length > 1\" size=\"sm\" placement=\"bottom-end\" match-trigger>\n            <template #trigger=\"{ triggerProps }\">\n              <VButton\n                variant=\"outline\"\n                tone=\"neutral\"\n                size=\"sm\"\n                :disabled=\"disabled\"\n                v-bind=\"triggerProps\"\n                :aria-label=\"`${m.calendar.view}: ${viewLabel(view)}`\"\n              >\n                {{ viewLabel(view) }}\n                <VIcon :name=\"arrowDropDownIcon\" />\n              </VButton>\n            </template>\n            <VMenuItem\n              v-for=\"value in views\"\n              :key=\"value\"\n              :label=\"viewLabel(value)\"\n              :selected=\"value === view\"\n              @select=\"setView(value)\"\n            />\n          </VMenu>\n        </div>\n      </div>\n\n      <!--\n        The public props say what is REFUSED — `readonly`, `hideCurrentTime`,\n        `noEdgeScroll` — so that none of them has to be turned off with a binding. The two\n        internal grids keep the positive sense they read a dozen times each, and the whole\n        of the inversion lives here, at the boundary: flip a sign on one of these lines and\n        the grid quietly does the opposite of what was asked, since nothing downstream\n        knows which way round the prop was written.\n      -->\n      <VCalendarTimeGrid\n        v-if=\"isTimeGrid\"\n        ref=\"gridRef\"\n        v-model:focused=\"focused\"\n        class=\"v-calendar-view\"\n        :days=\"days\"\n        :events=\"events\"\n        :time-window=\"timeWindow\"\n        :slot-duration=\"slotDuration\"\n        :locale=\"resolvedLocale\"\n        :format=\"resolvedFormat\"\n        :today=\"today\"\n        :now=\"hideCurrentTime ? null : now\"\n        :editable=\"!readonly && !disabled\"\n        :disabled=\"disabled\"\n        :creatable=\"creatable && !disabled\"\n        :hint-id=\"hintId\"\n        :edge-step-delay=\"edgeStepDelay\"\n        :auto-scroll=\"!noEdgeScroll\"\n        :label=\"rangeText\"\n        @cell-activate=\"onCellActivate\"\n        @event-activate=\"emit('event-activate', $event)\"\n        @event-drop=\"onEventDrop\"\n        @slot-create=\"onSlotCreate\"\n        @announce=\"announce\"\n        @step=\"step\"\n      >\n        <template v-if=\"$slots.event\" #event=\"slotProps\">\n          <slot name=\"event\" v-bind=\"slotProps\" />\n        </template>\n        <template v-if=\"$slots['day-header']\" #day-header=\"slotProps\">\n          <slot name=\"day-header\" v-bind=\"slotProps\" />\n        </template>\n        <template v-if=\"$slots['all-day-label']\" #all-day-label>\n          <slot name=\"all-day-label\" />\n        </template>\n      </VCalendarTimeGrid>\n\n      <VCalendarMonth\n        v-else-if=\"view === 'month'\"\n        ref=\"gridRef\"\n        v-model:focused=\"focusedDay\"\n        class=\"v-calendar-view\"\n        :weeks=\"weeks\"\n        :events=\"events\"\n        :locale=\"resolvedLocale\"\n        :format=\"resolvedFormat\"\n        :today=\"today\"\n        :month-event-limit=\"monthEventLimit\"\n        :editable=\"!readonly && !disabled\"\n        :disabled=\"disabled\"\n        :hint-id=\"hintId\"\n        :edge-step-delay=\"edgeStepDelay\"\n        :label=\"rangeText\"\n        @day-activate=\"openIn($event, 'day')\"\n        @cell-activate=\"onCellActivate\"\n        @event-activate=\"emit('event-activate', $event)\"\n        @event-drop=\"onEventDrop\"\n        @announce=\"announce\"\n        @step=\"step\"\n      >\n        <template v-if=\"$slots.event\" #event=\"slotProps\">\n          <slot name=\"event\" v-bind=\"slotProps\" />\n        </template>\n      </VCalendarMonth>\n\n      <VCalendarYear\n        v-else\n        ref=\"gridRef\"\n        class=\"v-calendar-view\"\n        :disabled=\"disabled\"\n        :months=\"months\"\n        :events=\"events\"\n        :locale=\"resolvedLocale\"\n        :weekdays=\"resolvedWeekdays\"\n        :today=\"today\"\n        :label=\"rangeText\"\n        @month-activate=\"openIn($event, 'month')\"\n      />\n\n      <!--\n        Both of these are rendered from the first paint and never conditionally.\n\n        The live region has to EXIST before it has anything to say: one inserted along with\n        its first message is not announced at all. And the hint is what every card points at\n        with `aria-describedby`, so one node serves the whole calendar rather than repeating\n        the same sentence on each of a hundred events.\n      -->\n      <div class=\"v-visually-hidden\" role=\"status\" aria-live=\"polite\">{{ announcement }}</div>\n      <span :id=\"hintId\" class=\"v-visually-hidden\">{{ m.calendar.eventHint }}</span>\n    </section>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-calendar {\n    display: flex;\n    block-size: 100%;\n    min-block-size: 0;\n    font-family: var(--vectis-text-family);\n    color: var(--vectis-color-text);\n  }\n\n  /* A frozen calendar greys out through the colour tokens and never through opacity, the\n     design system rule: what a reader keeps here is the agenda itself, which has to stay\n     readable. The cards are real disabled buttons, so they grey themselves. */\n  .v-calendar[data-disabled] {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-calendar[data-disabled] .v-calendar-view {\n    pointer-events: none;\n  }\n\n  /*\n   * The height is settled in CSS rather than measured, the VDataTable idiom: the region is\n   * a flex column at full height, the toolbar refuses to grow and the grid takes what is\n   * left. `min-block-size: 0` on the grid is what lets it shrink below its content and\n   * therefore scroll — without it the automatic minimum of a flex item would hold it at its\n   * full 24-hour height and the whole page would scroll instead.\n   *\n   * All of it is a no-op when the parent's height is auto, where the percentage falls back\n   * to auto and the calendar is simply as tall as its content. That is what makes an opt-in\n   * prop unnecessary.\n   */\n  .v-calendar-region {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-inline-size: 0;\n    min-block-size: 0;\n  }\n\n  .v-calendar-toolbar {\n    display: flex;\n    flex: none;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    padding-block-end: var(--vectis-space-3);\n  }\n\n  .v-calendar-nav {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n  }\n\n  .v-calendar-title {\n    /* It may be long — a full weekday and month in the day view — so it is the part that\n       gives way first, and the controls keep their size. */\n    min-inline-size: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-calendar-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    /* The two siblings are pushed apart from here rather than by a `justify-content` on the\n       toolbar, which would space every control equally instead of grouping them. */\n    margin-inline-start: auto;\n  }\n\n  /*\n   * The view on show, whichever it is: the one box that scrolls. The views inherit the family\n   * and the colour from `.v-calendar` and declare neither again.\n   */\n  .v-calendar-view {\n    flex: 1;\n    overflow: auto;\n    block-size: 100%;\n    min-block-size: 0;\n    border: 1px solid var(--vectis-color-border);\n    border-radius: var(--vectis-radius-surface);\n  }\n\n  /*\n   * What the three views share lives HERE rather than in each of their sheets. They are only\n   * ever rendered by this component, so this sheet ships wherever they do — the\n   * VCarousel/VCarouselItem arrangement. Every rule a view writes against one of these classes\n   * is either disjoint from it or more specific, never tied: a tie between two sheets would be\n   * settled by the consumer's bundler.\n   */\n\n  /*\n   * A drag currently held off the calendar. `not-allowed` is the word the library already uses\n   * for \"you cannot do this\", on every disabled control.\n   *\n   * BEST-EFFORT, and never the signal: while a pointer is captured the cursor is resolved\n   * against the capture target rather than against whatever sits under the pointer, and engines\n   * differ on it. What carries the message is the card's own paint.\n   */\n  .v-calendar-view[data-outside] {\n    cursor: not-allowed;\n  }\n\n  .v-calendar-weekday {\n    color: var(--vectis-color-text-muted);\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    text-transform: uppercase;\n  }\n\n  /*\n   * Today's date, marked on the number the way a calendar marks a date rather than a column.\n   * Semibold here marks a state, not a type role. Written at (0,2,0) so it wins over each view's\n   * own (0,1,0) rule for the element it lands on.\n   */\n  .v-calendar-view .v-calendar-today {\n    background: var(--vectis-color-accent);\n    color: var(--vectis-color-text-on-accent);\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n\n  /*\n   * A cell of either grid: ruled on two sides, the other two drawn by its neighbours. It keeps\n   * the default cursor: the pointer hand belongs to what can be opened, the events, and a grid\n   * of hands would say every square of the week is a link.\n   */\n  .v-calendar-cell {\n    border-block-start: 1px solid var(--vectis-color-border);\n    border-inline-start: 1px solid var(--vectis-color-border);\n  }\n\n  .v-calendar-cell:first-child {\n    border-inline-start: none;\n  }\n\n  .v-calendar-cell:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    /* Drawn inwards: the view is a scrolling box, and an outward ring on a cell at the edge\n       would be cropped by it. */\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  /* The plain buttons the month and year views draw: a day number, the \"+2 more\", a month. */\n  .v-calendar-button {\n    /* A button carries a border and a background from the browser, which around a round day\n       number read as a stray ring. Neither is optional. */\n    border: none;\n    background: none;\n    font-family: inherit;\n    cursor: pointer;\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-calendar-button: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  /*\n   * The strip that lights up while a drag rests against an edge, counting down to turn the\n   * page. It is what stops the paging being a surprise.\n   *\n   * Drawn INSIDE the box the cells occupy rather than on the scroller, because a scroller's\n   * absolutely positioned child is placed against its content and scrolls away with it. That\n   * box has to be positioned, which each view's own sheet sees to. An absolutely positioned\n   * pseudo-element is not a grid item, so it disturbs no column.\n   *\n   * Its width is `--vectis-control-size-calendar-edge`, whose twin is `EDGE_BAND` in\n   * `edgeStep.ts` — the JavaScript that decides where the countdown actually starts. Neither\n   * may move without the other. The layer, 2, is the time grid's stacking table.\n   */\n  .v-calendar-edge-cue[data-edge]::after {\n    content: '';\n    position: absolute;\n    inset-block: 0;\n    inline-size: var(--vectis-control-size-calendar-edge);\n    background: var(--vectis-color-accent-surface);\n    z-index: 2;\n    pointer-events: none;\n  }\n\n  .v-calendar-edge-cue[data-edge='start']::after {\n    inset-inline-start: 0;\n  }\n\n  .v-calendar-edge-cue[data-edge='end']::after {\n    inset-inline-end: 0;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-calendar-button {\n      transition: none;\n    }\n  }\n\n  /*\n   * Windows forced colors flattens every background to Canvas, and today and the paging strip\n   * are drawn with nothing else. Today takes the system selection pair, the one every other\n   * \"current\" mark in the library takes, and the strip takes Highlight.\n   */\n  @media (forced-colors: active) {\n    .v-calendar-view .v-calendar-today {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n\n    .v-calendar-edge-cue[data-edge]::after {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -10,20 +10,21 @@ import { useRootAttrs as re } from "../../composables/useRootAttrs.js";
 import { useTimer as ie } from "../../composables/useTimer.js";
 import ae from "../VMenu/VMenu.js";
 import oe from "../VMenu/VMenuItem.js";
-import { arrow_drop_down as se } from "../VIcon/icons/arrow_drop_down.js";
-import { firstDayOfWeekFor as ce, formatDateDisplay as o, formatDisplayRange as le } from "../../utils/date.js";
-import { hourCycleFor as ue, minutesOf as s } from "../../utils/time.js";
-import { monthWeeks as de, monthsOfYear as fe, normalizeWeekdays as pe, stepAnchor as me, timeOf as he, timesOf as ge, todayISO as c, visibleDays as _e, visibleRange as ve, windowOf as ye } from "./layout.js";
-import be from "./VCalendarMonth.js";
-import xe from "./VCalendarTimeGrid.js";
-import Se from "./VCalendarYear.js";
-import { Fragment as Ce, computed as l, createBlock as u, createCommentVNode as we, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as m, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeModels as v, mergeProps as y, normalizeClass as Te, normalizeProps as b, normalizeStyle as Ee, onMounted as De, openBlock as x, ref as S, renderList as Oe, renderSlot as C, toDisplayString as w, unref as T, useId as ke, useModel as E, withCtx as D } from "vue";
+import { useLiveAnnouncer as se } from "../../composables/useLiveAnnouncer.js";
+import { arrow_drop_down as ce } from "../VIcon/icons/arrow_drop_down.js";
+import { firstDayOfWeekFor as le, formatDateDisplay as o, formatDisplayRange as ue } from "../../utils/date.js";
+import { hourCycleFor as de, minutesOf as s } from "../../utils/time.js";
+import { monthWeeks as fe, monthsOfYear as pe, normalizeWeekdays as me, sameTimes as he, stepAnchor as ge, timeOf as _e, timesOf as ve, todayISO as c, visibleDays as ye, visibleRange as be, windowOf as xe } from "./layout.js";
+import Se from "./VCalendarMonth.js";
+import Ce from "./VCalendarTimeGrid.js";
+import we from "./VCalendarYear.js";
+import { Fragment as Te, computed as l, createBlock as u, createCommentVNode as Ee, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as m, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeModels as v, mergeProps as y, normalizeClass as De, normalizeProps as b, normalizeStyle as Oe, onMounted as ke, openBlock as x, ref as S, renderList as Ae, renderSlot as C, toDisplayString as w, unref as T, useId as je, useModel as E, watch as D, withCtx as O } from "vue";
 //#region src/components/VCalendar/VCalendar.vue?vue&type=script&setup=true&lang.ts
-var Ae = ["data-disabled"], je = ["aria-label", "aria-roledescription"], Me = { class: "v-calendar-toolbar" }, Ne = { class: "v-calendar-nav" }, Pe = { class: "v-calendar-actions" }, Fe = {
+var Me = ["data-disabled"], Ne = ["aria-roledescription", "aria-label"], Pe = { class: "v-calendar-toolbar" }, Fe = { class: "v-calendar-nav" }, Ie = { class: "v-calendar-actions" }, Le = {
 	class: "v-visually-hidden",
 	role: "status",
 	"aria-live": "polite"
-}, O = /*@__PURE__*/ g({
+}, k = /*@__PURE__*/ g({
 	inheritAttrs: !1,
 	__name: "VCalendar",
 	props: /*@__PURE__*/ v({
@@ -83,128 +84,141 @@ var Ae = ["data-disabled"], je = ["aria-label", "aria-roledescription"], Me = {
 		"update:date",
 		"update:events"
 	]),
-	setup(g, { expose: v, emit: O }) {
-		let k = g, A = E(g, "view"), j = E(g, "date"), M = E(g, "events"), N = O, P = e(), { rootClass: Ie, rootStyle: Le, forwardedAttrs: Re } = re(), F = t(() => k.locale), I = l(() => k.format ?? ue(F.value)), L = l(() => pe(k.weekdays, k.firstDayOfWeek ?? ce(F.value))), R = l(() => ye(k.dayStart, k.dayEnd)), ze = l(() => _e(j.value, A.value, L.value, k.customDays)), Be = l(() => A.value !== "month" && A.value !== "year"), Ve = l(() => A.value === "month" ? de(j.value, L.value) : []), He = l(() => A.value === "year" ? fe(j.value) : []), z = S(null), B = S(null), Ue = ie();
-		function V() {
+	setup(g, { expose: v, emit: k }) {
+		let A = g, j = E(g, "view"), M = E(g, "date"), N = E(g, "events"), P = k, F = e(), { rootClass: Re, rootStyle: ze, forwardedAttrs: Be } = re(), I = t(() => A.locale), Ve = l(() => A.format ?? de(I.value)), L = l(() => me(A.weekdays, A.firstDayOfWeek ?? le(I.value))), R = l(() => xe(A.dayStart, A.dayEnd)), He = l(() => ye(M.value, j.value, L.value, A.customDays)), Ue = l(() => j.value !== "month" && j.value !== "year"), We = l(() => j.value === "month" ? fe(M.value, L.value) : []), Ge = l(() => j.value === "year" ? pe(M.value) : []), z = S(null), B = S(null), V = ie();
+		function H() {
 			let e = /* @__PURE__ */ new Date();
-			B.value = e.getHours() * 60 + e.getMinutes(), Ue.start(V, Math.max(1e3, (60 - e.getSeconds()) * 1e3));
+			B.value = e.getHours() * 60 + e.getMinutes(), V.start(H, Math.max(1e3, (60 - e.getSeconds()) * 1e3));
 		}
-		De(() => {
-			z.value = c(), k.hideCurrentTime || V();
-			let e = s(k.scrollTime);
-			e !== null && H.value?.scrollToMinutes(e);
+		function U() {
+			let e = s(A.scrollTime);
+			e !== null && W.value?.scrollToMinutes(e);
+		}
+		ke(() => {
+			z.value = c(), A.hideCurrentTime || H(), U();
+		}), D(() => A.hideCurrentTime, (e) => {
+			if (!e) return H();
+			V.cancel(), B.value = null;
 		});
-		let H = S(null), U = S({
-			iso: j.value,
+		let W = S(null);
+		D(W, U, { flush: "post" });
+		let G = S(null), K = S({
+			iso: M.value,
 			minutes: R.value.start
-		}), W = S(j.value), G = l(() => ve(j.value, A.value, L.value, k.customDays)), K = l(() => {
-			let e = F.value;
-			return A.value === "year" ? o(G.value.start, e, { year: "numeric" }) : A.value === "month" ? o(G.value.start, e, {
+		}), q = S(M.value), J = l(() => be(M.value, j.value, L.value, A.customDays)), Y = l(() => {
+			let e = I.value;
+			return j.value === "year" ? o(J.value.start, e, { year: "numeric" }) : j.value === "month" ? o(J.value.start, e, {
 				month: "long",
 				year: "numeric"
-			}) : A.value === "day" ? o(G.value.start, e, {
+			}) : j.value === "day" ? o(J.value.start, e, {
 				weekday: "long",
 				day: "numeric",
 				month: "long",
 				year: "numeric"
-			}) : le(G.value.start, G.value.end, e, {
+			}) : ue(J.value.start, J.value.end, e, {
 				day: "numeric",
 				month: "long",
 				year: "numeric"
 			});
-		}), q = (e) => {
-			let t = P.value.calendar;
-			return e === "day" ? t.viewDay : e === "4days" ? t.view4Days : e === "week" ? t.viewWeek : e === "month" ? t.viewMonth : e === "year" ? t.viewYear : t.viewCustom(k.customDays);
-		}, J = l(() => {
-			let e = P.value.calendar;
-			return A.value === "day" ? {
+		}), X = (e) => {
+			let t = F.value.calendar;
+			return e === "day" ? t.viewDay : e === "4days" ? t.view4Days : e === "week" ? t.viewWeek : e === "month" ? t.viewMonth : e === "year" ? t.viewYear : t.viewCustom(A.customDays);
+		}, Ke = l(() => {
+			let e = F.value.calendar;
+			return j.value === "day" ? {
 				previous: e.previousDay,
 				next: e.nextDay
-			} : A.value === "week" ? {
+			} : j.value === "week" ? {
 				previous: e.previousWeek,
 				next: e.nextWeek
-			} : A.value === "month" ? {
+			} : j.value === "month" ? {
 				previous: e.previousMonth,
 				next: e.nextMonth
-			} : A.value === "year" ? {
+			} : j.value === "year" ? {
 				previous: e.previousYear,
 				next: e.nextYear
 			} : {
 				previous: e.previousPeriod,
 				next: e.nextPeriod
 			};
-		}), We = ee(() => k.label ?? P.value.calendar.label);
-		function Y(e) {
-			k.disabled || (j.value = me(j.value, A.value, e, L.value, k.customDays));
+		}), qe = ee(() => A.label ?? F.value.calendar.label);
+		function Z(e) {
+			A.disabled || (M.value = ge(M.value, j.value, e, L.value, A.customDays));
 		}
-		function X() {
-			k.disabled || (j.value = c());
+		function Je() {
+			A.disabled || (M.value = c());
 		}
-		function Ge(e) {
-			k.disabled || (A.value = e);
+		function Ye(e) {
+			A.disabled || (j.value = e);
 		}
-		function Z(e) {
-			k.disabled || N("cell-activate", {
+		function Xe(e) {
+			A.disabled || P("cell-activate", {
 				date: e.date,
-				time: he(e.minutes ?? R.value.start)
+				time: _e(e.minutes ?? R.value.start)
 			});
 		}
-		function Ke(e, t) {
-			k.disabled || (j.value = e, k.views.includes(t) && (A.value = t));
+		function Ze(e, t) {
+			A.disabled || (M.value = e, A.views.includes(t) && (j.value = t));
 		}
-		let qe = S(""), Q = `${ke()}-hint`;
-		function Je(e) {
-			qe.value = e;
+		let { polite: Qe, announce: $e } = se(), Q = `${je()}-hint`;
+		function et(e) {
+			$e(e, !1);
 		}
 		function $(e, t, n) {
-			let r = M.value.find((t) => t.id === e);
+			let r = N.value.find((t) => t.id === e);
 			if (!r) return;
-			let i = ge(r), a = {
+			let i = ve(r);
+			if (he(i, t)) return;
+			let a = {
 				...r,
 				...t
 			};
-			M.value = M.value.map((t) => t.id === e ? a : t), N(n === "resize" ? "event-resize" : "event-move", a, i);
+			N.value = N.value.map((t) => t.id === e ? a : t), P(n === "resize" ? "event-resize" : "event-move", a, i);
 		}
-		function Ye(e) {
-			N("event-create", e);
+		function tt(e) {
+			P("event-create", e);
 		}
 		return v({
-			focus: () => H.value?.focus(),
-			today: X,
-			previous: () => Y(-1),
-			next: () => Y(1),
+			focus: (e) => W.value?.focus(e),
+			el: G,
+			today: Je,
+			previous: () => Z(-1),
+			next: () => Z(1),
 			scrollTo: (e) => {
 				let t = s(e);
-				t !== null && H.value?.scrollToMinutes(t);
+				t !== null && W.value?.scrollToMinutes(t);
 			}
 		}), (e, t) => (x(), d("div", {
-			class: Te(["v-calendar", T(Ie)]),
-			style: Ee(T(Le)),
+			class: De(["v-calendar", T(Re)]),
+			style: Oe(T(ze)),
 			"data-disabled": g.disabled ? "" : void 0
-		}, [f("section", y(T(Re), {
+		}, [f("section", y({
+			ref_key: "regionEl",
+			ref: G,
+			"aria-roledescription": T(F).calendar.roleDescription
+		}, T(Be), {
 			class: "v-calendar-region",
-			"aria-label": T(We),
-			"aria-roledescription": T(P).calendar.roleDescription
+			"aria-label": T(qe)
 		}), [
-			f("div", Me, [
-				f("div", Ne, [h(a, {
-					label: J.value.previous,
+			f("div", Pe, [
+				f("div", Fe, [h(a, {
+					label: Ke.value.previous,
 					size: "sm",
 					disabled: g.disabled,
-					onClick: t[0] ||= (e) => Y(-1)
+					onClick: t[0] ||= (e) => Z(-1)
 				}, {
-					default: D(() => [h(n, {
+					default: O(() => [h(n, {
 						name: T(te),
 						mirrored: ""
 					}, null, 8, ["name"])]),
 					_: 1
 				}, 8, ["label", "disabled"]), h(a, {
-					label: J.value.next,
+					label: Ke.value.next,
 					size: "sm",
 					disabled: g.disabled,
-					onClick: t[1] ||= (e) => Y(1)
+					onClick: t[1] ||= (e) => Z(1)
 				}, {
-					default: D(() => [h(n, {
+					default: O(() => [h(n, {
 						name: T(ne),
 						mirrored: ""
 					}, null, 8, ["name"])]),
@@ -215,9 +229,9 @@ var Ae = ["data-disabled"], je = ["aria-label", "aria-roledescription"], Me = {
 					tone: "neutral",
 					size: "sm",
 					disabled: g.disabled,
-					onClick: X
+					onClick: Je
 				}, {
-					default: D(() => [m(w(T(P).calendar.today), 1)]),
+					default: O(() => [m(w(T(F).calendar.today), 1)]),
 					_: 1
 				}, 8, ["disabled"]),
 				h(r, {
@@ -225,50 +239,50 @@ var Ae = ["data-disabled"], je = ["aria-label", "aria-roledescription"], Me = {
 					as: "h2",
 					class: "v-calendar-title"
 				}, {
-					default: D(() => [m(w(K.value), 1)]),
+					default: O(() => [m(w(Y.value), 1)]),
 					_: 1
 				}),
-				f("div", Pe, [C(e.$slots, "actions"), g.views.length > 1 ? (x(), u(ae, {
+				f("div", Ie, [C(e.$slots, "actions"), g.views.length > 1 ? (x(), u(ae, {
 					key: 0,
 					size: "sm",
 					placement: "bottom-end",
 					"match-trigger": ""
 				}, {
-					trigger: D(({ triggerProps: e }) => [h(i, y({
+					trigger: O(({ triggerProps: e }) => [h(i, y({
 						variant: "outline",
 						tone: "neutral",
 						size: "sm",
 						disabled: g.disabled
-					}, e, { "aria-label": `${T(P).calendar.view}: ${q(A.value)}` }), {
-						default: D(() => [m(w(q(A.value)) + " ", 1), h(n, { name: T(se) }, null, 8, ["name"])]),
+					}, e, { "aria-label": `${T(F).calendar.view}: ${X(j.value)}` }), {
+						default: O(() => [m(w(X(j.value)) + " ", 1), h(n, { name: T(ce) }, null, 8, ["name"])]),
 						_: 1
 					}, 16, ["disabled", "aria-label"])]),
-					default: D(() => [(x(!0), d(Ce, null, Oe(g.views, (e) => (x(), u(oe, {
+					default: O(() => [(x(!0), d(Te, null, Ae(g.views, (e) => (x(), u(oe, {
 						key: e,
-						label: q(e),
-						selected: e === A.value,
-						onSelect: (t) => Ge(e)
+						label: X(e),
+						selected: e === j.value,
+						onSelect: (t) => Ye(e)
 					}, null, 8, [
 						"label",
 						"selected",
 						"onSelect"
 					]))), 128))]),
 					_: 1
-				})) : we("", !0)])
+				})) : Ee("", !0)])
 			]),
-			Be.value ? (x(), u(xe, {
+			Ue.value ? (x(), u(Ce, {
 				key: 0,
 				ref_key: "gridRef",
-				ref: H,
-				focused: U.value,
-				"onUpdate:focused": t[2] ||= (e) => U.value = e,
+				ref: W,
+				focused: K.value,
+				"onUpdate:focused": t[2] ||= (e) => K.value = e,
 				class: "v-calendar-view",
-				days: ze.value,
-				events: M.value,
+				days: He.value,
+				events: N.value,
 				"time-window": R.value,
 				"slot-duration": g.slotDuration,
-				locale: T(F),
-				format: I.value,
+				locale: T(I),
+				format: Ve.value,
 				today: z.value,
 				now: g.hideCurrentTime ? null : B.value,
 				editable: !g.readonly && !g.disabled,
@@ -277,27 +291,27 @@ var Ae = ["data-disabled"], je = ["aria-label", "aria-roledescription"], Me = {
 				"hint-id": Q,
 				"edge-step-delay": g.edgeStepDelay,
 				"auto-scroll": !g.noEdgeScroll,
-				label: K.value,
-				onCellActivate: Z,
-				onEventActivate: t[3] ||= (e) => N("event-activate", e),
+				label: Y.value,
+				onCellActivate: Xe,
+				onEventActivate: t[3] ||= (e) => P("event-activate", e),
 				onEventDrop: $,
-				onSlotCreate: Ye,
-				onAnnounce: Je,
-				onStep: Y
+				onSlotCreate: tt,
+				onAnnounce: et,
+				onStep: Z
 			}, p({ _: 2 }, [
 				e.$slots.event ? {
 					name: "event",
-					fn: D((t) => [C(e.$slots, "event", b(_(t)))]),
+					fn: O((t) => [C(e.$slots, "event", b(_(t)))]),
 					key: "0"
 				} : void 0,
 				e.$slots["day-header"] ? {
 					name: "day-header",
-					fn: D((t) => [C(e.$slots, "day-header", b(_(t)))]),
+					fn: O((t) => [C(e.$slots, "day-header", b(_(t)))]),
 					key: "1"
 				} : void 0,
 				e.$slots["all-day-label"] ? {
 					name: "all-day-label",
-					fn: D(() => [C(e.$slots, "all-day-label")]),
+					fn: O(() => [C(e.$slots, "all-day-label")]),
 					key: "2"
 				} : void 0
 			]), 1032, [
@@ -316,33 +330,33 @@ var Ae = ["data-disabled"], je = ["aria-label", "aria-roledescription"], Me = {
 				"edge-step-delay",
 				"auto-scroll",
 				"label"
-			])) : A.value === "month" ? (x(), u(be, {
+			])) : j.value === "month" ? (x(), u(Se, {
 				key: 1,
 				ref_key: "gridRef",
-				ref: H,
-				focused: W.value,
-				"onUpdate:focused": t[4] ||= (e) => W.value = e,
+				ref: W,
+				focused: q.value,
+				"onUpdate:focused": t[4] ||= (e) => q.value = e,
 				class: "v-calendar-view",
-				weeks: Ve.value,
-				events: M.value,
-				locale: T(F),
-				format: I.value,
+				weeks: We.value,
+				events: N.value,
+				locale: T(I),
+				format: Ve.value,
 				today: z.value,
 				"month-event-limit": g.monthEventLimit,
 				editable: !g.readonly && !g.disabled,
 				disabled: g.disabled,
 				"hint-id": Q,
 				"edge-step-delay": g.edgeStepDelay,
-				label: K.value,
-				onDayActivate: t[5] ||= (e) => Ke(e, "day"),
-				onCellActivate: Z,
-				onEventActivate: t[6] ||= (e) => N("event-activate", e),
+				label: Y.value,
+				onDayActivate: t[5] ||= (e) => Ze(e, "day"),
+				onCellActivate: Xe,
+				onEventActivate: t[6] ||= (e) => P("event-activate", e),
 				onEventDrop: $,
-				onAnnounce: Je,
-				onStep: Y
+				onAnnounce: et,
+				onStep: Z
 			}, p({ _: 2 }, [e.$slots.event ? {
 				name: "event",
-				fn: D((t) => [C(e.$slots, "event", b(_(t)))]),
+				fn: O((t) => [C(e.$slots, "event", b(_(t)))]),
 				key: "0"
 			} : void 0]), 1032, [
 				"focused",
@@ -356,17 +370,21 @@ var Ae = ["data-disabled"], je = ["aria-label", "aria-roledescription"], Me = {
 				"disabled",
 				"edge-step-delay",
 				"label"
-			])) : (x(), u(Se, {
+			])) : (x(), u(we, {
 				key: 2,
+				ref_key: "gridRef",
+				ref: W,
 				class: "v-calendar-view",
-				months: He.value,
-				events: M.value,
-				locale: T(F),
+				disabled: g.disabled,
+				months: Ge.value,
+				events: N.value,
+				locale: T(I),
 				weekdays: L.value,
 				today: z.value,
-				label: K.value,
-				onMonthActivate: t[7] ||= (e) => Ke(e, "month")
+				label: Y.value,
+				onMonthActivate: t[7] ||= (e) => Ze(e, "month")
 			}, null, 8, [
+				"disabled",
 				"months",
 				"events",
 				"locale",
@@ -374,15 +392,15 @@ var Ae = ["data-disabled"], je = ["aria-label", "aria-roledescription"], Me = {
 				"today",
 				"label"
 			])),
-			f("div", Fe, w(qe.value), 1),
+			f("div", Le, w(T(Qe)), 1),
 			f("span", {
 				id: Q,
 				class: "v-visually-hidden"
-			}, w(T(P).calendar.eventHint), 1)
-		], 16, je)], 14, Ae));
+			}, w(T(F).calendar.eventHint), 1)
+		], 16, Ne)], 14, Me));
 	}
 });
 //#endregion
-export { O as default };
+export { k as default };
 
 //# sourceMappingURL=VCalendar.vue_vue_type_script_setup_true_lang.js.map