vectis-ui 0.11.0 → 0.13.0

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

@@ -1 +1 @@
-{"version":3,"file":"VTimePicker.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VTimePicker/VTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @keyboard @core\n/**\n * CSS places clock numerals and the hand. JavaScript maps pointer angles and keyboard steps to\n * a time because HTML has no interactive clock-face primitive.\n */\n\nimport { computed, inject, ref, watchEffect } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VToggle from '../VToggle/VToggle.vue'\nimport type { ToggleModelValue } from '../VToggle/VToggle.vue'\nimport VToggleItem from '../VToggle/VToggleItem.vue'\nimport { formatTime, hourCycleFor, parseTime } from '../../utils/time'\nimport {\n  DIAL_DEAD_ZONE,\n  DIAL_INNER_THRESHOLD,\n  angleToIndex,\n  dialIndexToHour24,\n  distanceFraction,\n  hour24ToDial,\n  hourWithMeridiem,\n  snapMinute,\n  to12h,\n  to24h,\n} from '../../utils/clock'\nimport type { HourFormat, Meridiem } from '../../utils/time'\nimport {\n  allowedMinutesFor,\n  firstAllowed,\n  isHourAllowed,\n  isTimeAllowed,\n  limitsProblem,\n  minuteGrid,\n  minuteInterval,\n  nearestAllowedMinute,\n  resolveLimits,\n} from './limits'\nimport type { TimePickerAllowed } from './limits'\nimport { pad2 } from '../../utils/text'\nimport { isDev } from '../../utils/env'\nimport { hostWarnsKey } from '../../utils/hostWarns'\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages, useResolvedLocale } from '../../i18n/state'\n\n/** Whether the face shows a 12- or a 24-hour clock. */\nexport type TimePickerFormat = HourFormat\n\n/** Which of the two halves of a time is being adjusted. */\ntype TimePickerStep = 'hour' | 'minute'\n\ninterface TimePickerProps {\n  /**\n   * Whether the face shows a 12- or a 24-hour clock. Left out, the reader's language\n   * decides, which is almost always what one wants.\n   */\n  format?: TimePickerFormat\n  /**\n   * A BCP 47 locale, which decides the clock. It TAKES PRECEDENCE over the design\n   * system's global locale and falls back to it, which is why it has no literal default:\n   * `undefined` has to stay recognizable for the global locale to have its chance.\n   */\n  locale?: string\n  /**\n   * The interval the minutes snap to, both when dragging and with the arrow keys. The face\n   * prints only the minutes it can reach, so a step of a quarter of an hour marks four.\n   */\n  minuteStep?: number\n  /** The earliest time that can be chosen, inclusive, as a canonical 24-hour `'HH:mm'`. */\n  min?: string\n  /** The latest time that can be chosen, inclusive, written like `min`. */\n  max?: string\n  /** Which hours can be chosen: the list of them, or a rule answering for one. */\n  allowedHours?: TimePickerAllowed\n  /**\n   * Which minutes can be chosen: the list of them, or a rule answering for one. The\n   * minutes it leaves out are not printed.\n   */\n  allowedMinutes?: TimePickerAllowed\n  /**\n   * Makes the whole clock unusable: the hand cannot be moved, the half-day cannot be\n   * changed, and everything greys out through the colour tokens.\n   */\n  disabled?: boolean\n  /** Shows the time without letting it be changed. */\n  readonly?: boolean\n  /**\n   * The accessible name of the whole clock, its two numerals and its face together. It falls\n   * back to the dictionary, and a consumer `aria-label` wins over it.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<TimePickerProps>(), {\n  format: undefined,\n  locale: undefined,\n  minuteStep: 1,\n  min: undefined,\n  max: undefined,\n  allowedHours: undefined,\n  allowedMinutes: undefined,\n  disabled: false,\n  readonly: false,\n  label: undefined,\n})\n\n/** The time, always as a 24-hour \"HH:mm\" string whatever clock is displayed. */\nconst model = defineModel<string | null>({ default: null })\n\nconst emit = defineEmits<{\n  /**\n   * The reader has FINISHED, carrying the time as it stands: the minutes were settled from the\n   * keyboard.\n   */\n  confirm: [value: string | null]\n}>()\n\ndefineSlots<{\n  /** A strip at the foot of the clock, the place for actions such as Cancel and OK. */\n  footer?(): unknown\n}>()\n\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.timePicker.label)\nconst resolvedLocale = useResolvedLocale(() => props.locale)\nconst resolvedFormat = computed<TimePickerFormat>(\n  () => props.format ?? hourCycleFor(resolvedLocale.value),\n)\n\n/** The restrictions, resolved once for the whole render. */\nconst limits = computed(() => resolveLimits(props))\n\n/** The hours the restrictions still leave something in, worked out once per set of restrictions. */\nconst availableHours = computed(() => {\n  const hours = new Set<number>()\n  for (let candidate = 0; candidate < 24; candidate += 1)\n    if (isHourAllowed(candidate, limits.value)) hours.add(candidate)\n  return hours\n})\n\n/** Whether an hour is one the restrictions still leave something in. */\nconst isAvailableHour = (candidate: number) => availableHours.value.has(candidate)\n\n// @devwarn\nif (isDev && !inject(hostWarnsKey, false)) {\n  watchEffect(() => {\n    if (!Number.isInteger(props.minuteStep) || props.minuteStep < 1 || 60 % props.minuteStep !== 0)\n      console.warn(`[VTimePicker] minuteStep ${props.minuteStep} — a divisor of 60 is expected.`)\n    const problem = limitsProblem(limits.value)\n    if (problem) console.warn(`[VTimePicker] ${problem}`)\n  })\n}\n\n/** Which of the two is being adjusted. It starts on the hour and moves on by itself. */\nconst step = ref<TimePickerStep>('hour')\n\n// With no value the clock shows the first hour of the half of the day chosen so far, which\n// is midnight until PM is picked. It is also the hour a time started from the MINUTES is\n// written with, so that choice is not lost when the reader begins there.\nconst parts = computed(\n  () =>\n    parseTime(model.value) ?? {\n      hour: resolvedFormat.value === '12h' ? to24h(12, pendingMeridiem.value) : 0,\n      minute: 0,\n    },\n)\nconst hour = computed(() => parts.value.hour)\nconst minute = computed(() => parts.value.minute)\n\n/*\n * The two writers are the SINGLE cut-off point for the restrictions: the pointer, the six\n * keys and the AM/PM control all write through them and through nothing else, so not one\n * handler carries a guard of its own.\n */\n\n/**\n * Writing the hour. An hour with nothing left in it has no minute to fall back on, which\n * refuses it; one that is only PARTLY available pulls the minutes to what it does allow, since\n * `min: '09:30'` must not be left holding 09:00.\n */\nfunction setHour(value: number | null) {\n  // Changing which face is shown stays allowed under `readonly`: reading the minutes is not\n  // changing them.\n  if (props.disabled || props.readonly) return\n  if (value === null) return\n  const minutes = isTimeAllowed(value, minute.value, limits.value)\n    ? minute.value\n    : nearestAllowedMinute(value, minute.value, limits.value)\n  if (minutes === null) return\n  model.value = formatTime(value, minutes)\n}\n\n/** Writing the minutes. Null is \"there was nowhere to go\", which every key can produce. */\nfunction setMinute(value: number | null) {\n  if (props.disabled || props.readonly) return\n  if (value === null || !isTimeAllowed(hour.value, value, limits.value)) return\n  model.value = formatTime(hour.value, value)\n}\n\n// @a11y\n/*\n * Which step the clock is on is otherwise carried by the face's own name alone, and a change of\n * name is not reliably announced. A politely announced region says it a second time.\n */\nconst liveMessage = ref('')\n\nfunction setStep(next: TimePickerStep) {\n  step.value = next\n  liveMessage.value =\n    next === 'minute' ? m.value.timePicker.choosingMinutes : m.value.timePicker.choosingHour\n}\n\n/** One numeral on the face. */\ninterface DialCell {\n  key: string\n  /** What is printed. */\n  label: string\n  /** Where it sits, as a fraction of a full turn from twelve o'clock. */\n  turn: number\n  /** Which of the two circles it belongs to, a 24-hour face having an inner one. */\n  ring: 'outer' | 'inner'\n  /** Whether it is the value currently being pointed at. */\n  selected: boolean\n}\n\n/** The hour a position on the face stands for. */\nfunction hourAt(index: number, ring: 'outer' | 'inner'): number {\n  return resolvedFormat.value === '24h'\n    ? dialIndexToHour24(index, ring)\n    : to24h(index === 0 ? 12 : index, currentMeridiem.value)\n}\n\n/** The minutes the face prints. */\nconst minuteMarks = computed(() => {\n  const interval = minuteInterval(props.minuteStep)\n  const spacing = 60 / interval <= 12 ? interval : 5\n  const marks: number[] = []\n  for (let minutes = 0; minutes < 60; minutes += spacing)\n    if (minutes % interval === 0 && isTimeAllowed(hour.value, minutes, limits.value))\n      marks.push(minutes)\n  return marks\n})\n\n/*\n * A numeral that is only there to be refused says nothing the missing numeral does not say\n * better, and it says it in grey text a screen reader has no way to reach: the markers are\n * `aria-hidden`, so what the restrictions leave is spoken by the face's own value and by\n * nothing else.\n */\nconst cells = computed<DialCell[]>(() => {\n  if (step.value === 'minute') {\n    return minuteMarks.value.map((minutes) => ({\n      key: `m-${minutes}`,\n      label: pad2(minutes),\n      turn: minutes / 60,\n      ring: 'outer' as const,\n      selected: minute.value === minutes,\n    }))\n  }\n  // Each position's hour is worked out once, since on a 12-hour face that takes the half of the\n  // day in force. The selection there still compares numerals and not hours: an empty clock\n  // holding a PM choice sits on midnight, and its hand points at the 12 all the same.\n  const twelve = resolvedFormat.value === '12h'\n  const shown12 = to12h(hour.value).hour\n  const rings: DialCell['ring'][] = twelve ? ['outer'] : ['outer', 'inner']\n  const out: DialCell[] = []\n  for (const ring of rings)\n    for (let i = 0; i < 12; i += 1) {\n      const target = hourAt(i, ring)\n      if (!isAvailableHour(target)) continue\n      const numeral = i === 0 ? 12 : i\n      out.push({\n        key: `${ring === 'outer' ? 'o' : 'i'}-${i}`,\n        label: ring === 'inner' ? pad2(target) : String(numeral),\n        turn: i / 12,\n        ring,\n        selected: twelve ? shown12 === numeral : hour.value === target,\n      })\n    }\n  return out\n})\n\nconst handTurn = computed(() => {\n  if (step.value === 'minute') return minute.value / 60\n  const index =\n    resolvedFormat.value === '24h' ? hour24ToDial(hour.value).index : to12h(hour.value).hour % 12\n  return index / 12\n})\n\nconst handRing = computed(() =>\n  step.value === 'hour' && resolvedFormat.value === '24h' ? hour24ToDial(hour.value).ring : 'outer',\n)\n\n/**\n * Whether the hand points at a minute that has no marker of its own. The tip is then\n * drawn small: at full size it would cover the two neighbouring markers and read as\n * pointing at neither.\n */\nconst handMinor = computed(\n  () => step.value === 'minute' && !minuteMarks.value.includes(minute.value),\n)\n\n/** The hour as the two large numerals show it, on whichever clock is displayed. */\nconst displayHourText = computed(() =>\n  pad2(resolvedFormat.value === '12h' ? to12h(hour.value).hour : hour.value),\n)\n\n/** Which half of the day is chosen while no time is set at all. */\nconst pendingMeridiem = ref<Meridiem>('AM')\n\n/**\n * The half of the day in force: the value's own once there is one, the remembered choice until\n * then.\n */\nconst currentMeridiem = computed<Meridiem>(() =>\n  model.value ? to12h(hour.value).meridiem : pendingMeridiem.value,\n)\n\nconst meridiemModel = computed<ToggleModelValue>({\n  get: () => currentMeridiem.value,\n  set: (value) => {\n    const meridiem: Meridiem = value === 'PM' ? 'PM' : 'AM'\n    pendingMeridiem.value = meridiem\n    // With no time set there is nothing to convert, so the choice is simply REMEMBERED\n    // and applies to the first time chosen.\n    if (!model.value) return\n    // What is being chosen here is the HALF OF THE DAY, so the hour gives way to it: kept\n    // when the new half allows it, and otherwise the first hour of that half that does.\n    // Refusing the write instead would leave the control snapping straight back, since it\n    // reads the half of the day off the value.\n    const wanted = hourWithMeridiem(hour.value, meridiem)\n    setHour(\n      isAvailableHour(wanted)\n        ? wanted\n        : firstAllowed(12, (i) => to24h(i, meridiem), isAvailableHour),\n    )\n  },\n})\n\n/**\n * Whether each half of the day still holds an hour one could choose. An empty one takes its\n * button with it: a control that can only ever be refused is worse than no control.\n */\nconst meridiemAvailable = computed<Record<Meridiem, boolean>>(() => ({\n  AM: firstAllowed(12, (i) => to24h(i, 'AM'), isAvailableHour) !== null,\n  PM: firstAllowed(12, (i) => to24h(i, 'PM'), isAvailableHour) !== null,\n}))\n\n// @a11y\n// The entire spoken value of the face. The numerals are hidden from screen readers, so these\n// four attributes are the only thing assistive technology has: what the value is, what its\n// bounds are, and how to say it.\nconst ariaValueNow = computed(() => {\n  if (step.value === 'minute') return minute.value\n  return resolvedFormat.value === '12h' ? to12h(hour.value).hour : hour.value\n})\nconst ariaValueMin = computed(() =>\n  step.value === 'minute' ? 0 : resolvedFormat.value === '12h' ? 1 : 0,\n)\nconst ariaValueMax = computed(() =>\n  step.value === 'minute' ? 59 : resolvedFormat.value === '12h' ? 12 : 23,\n)\n// On a 12-hour face the half of the day is spoken with the hour: the AM/PM control is not\n// on the slider's way, and \"9 o'clock\" alone is two different times.\nconst ariaValueText = computed(() => {\n  const m_ = m.value.timePicker\n  if (step.value === 'minute') return m_.minutesValue(minute.value)\n  const spoken = m_.hourValue(ariaValueNow.value)\n  if (resolvedFormat.value === '24h') return spoken\n  return `${spoken} ${currentMeridiem.value === 'PM' ? m_.pm : m_.am}`\n})\n\n/**\n * A step has been settled: after the hour come the minutes, and after the minutes the whole\n * thing is confirmed; but by KEYBOARD only, for the reason given on the emit.\n */\nfunction settleStep(via: 'pointer' | 'keyboard') {\n  if (step.value === 'hour') setStep('minute')\n  else if (via === 'keyboard') emit('confirm', model.value)\n}\n\nconst faceEl = ref<HTMLElement | null>(null)\nconst dragging = ref(false)\n/** Whether anything in the gesture under way landed on a numeral. */\nlet landed = false\n\n/**\n * Where a point on the face lands, and whether there was anything there at all. The write\n * itself still goes through `setHour`/ `setMinute` and their own guards, which is why\n * `readonly` is refused THERE and not here: a frozen clock is still one whose numerals are\n * real, and a tap on one moves the step on as it always did.\n */\nfunction applyPoint(event: PointerEvent): boolean {\n  const face = faceEl.value\n  // A disabled clock aims at nothing, so no step is moved on either: its header buttons\n  // are disabled for the same reason.\n  if (!face || props.disabled) return false\n  // Measuring the face is safe here: this runs from a handler, hence in a browser, never\n  // during a render.\n  const rect = face.getBoundingClientRect()\n  const dx = event.clientX - (rect.left + rect.width / 2)\n  const dy = event.clientY - (rect.top + rect.height / 2)\n  if (Math.hypot(dx, dy) <= DIAL_DEAD_ZONE * (rect.width / 2)) return false\n  if (step.value === 'minute') {\n    // The step's own snapping stands: a point between two markers has always been pulled\n    // to the one it is nearest. What it is pulled to still has to BE on the face.\n    const minutes = snapMinute(angleToIndex(dx, dy, 60), props.minuteStep)\n    if (!isTimeAllowed(hour.value, minutes, limits.value)) return false\n    setMinute(minutes)\n    return true\n  }\n  const index = angleToIndex(dx, dy, 12)\n  const ring =\n    resolvedFormat.value === '24h' &&\n    distanceFraction(dx, dy, rect.width / 2) < DIAL_INNER_THRESHOLD\n      ? 'inner'\n      : 'outer'\n  const target = hourAt(index, ring)\n  if (!isAvailableHour(target)) return false\n  setHour(target)\n  return true\n}\n\nfunction onPointerdown(event: PointerEvent) {\n  // @fallback\n  // Capture keeps dragging active outside the clock face; synthetic events may not reference a\n  // capturable pointer.\n  try {\n    faceEl.value?.setPointerCapture(event.pointerId)\n  } catch {\n    /* Synthetic pointers cannot be captured. */\n  }\n  dragging.value = true\n  landed = applyPoint(event)\n}\n\nfunction onPointermove(event: PointerEvent) {\n  if (dragging.value && applyPoint(event)) landed = true\n}\n\nfunction onPointerup() {\n  if (!dragging.value) return\n  dragging.value = false\n  // A gesture that never landed on a numeral has chosen nothing, so there is nothing to\n  // move on FROM: the reader is left on the face they aimed at, looking at what they missed.\n  if (landed) settleStep('pointer')\n}\n\nfunction onPointercancel() {\n  dragging.value = false\n}\n\n// @keyboard @a11y\n// The keyboard a slider is expected to have.\n/*\n * Every key below walks until it finds something it MAY land on, rather than stopping at the\n * first thing it may not: with scattered hours a key that stopped would die at the first hole\n * and never reach what lies past it. Against a bound there is nothing past the hole, so the\n * same walk comes back empty and the key holds still, which a bound means.\n */\nfunction moveHour(delta: number) {\n  if (resolvedFormat.value === '24h') {\n    setHour(firstAllowed(23, (i) => (hour.value + delta * i + 24) % 24, isAvailableHour))\n    return\n  }\n  // On a 12-hour face the hours cycle from 1 to 12 WITHIN the current half of the day:\n  // passing midday is done on the AM/PM control, not by walking the hand past twelve.\n  const hour12 = to12h(hour.value).hour\n  setHour(\n    firstAllowed(\n      11,\n      (i) => to24h(((hour12 - 1 + delta * i + 12) % 12) + 1, currentMeridiem.value),\n      isAvailableHour,\n    ),\n  )\n}\n\n/** The first or the last hour the face allows, on whichever clock it is showing. */\nfunction edgeHour(edge: 'first' | 'last'): number | null {\n  if (resolvedFormat.value === '24h')\n    return firstAllowed(24, (i) => (edge === 'first' ? i - 1 : 24 - i), isAvailableHour)\n  return firstAllowed(\n    12,\n    (i) => to24h(edge === 'first' ? i : 13 - i, currentMeridiem.value),\n    isAvailableHour,\n  )\n}\n\n/**\n * The minute a key lands on: the first step of the grid at least `distance` minutes away, that\n * way round, and then the next one the hour allows.\n */\nfunction minuteToward(direction: 1 | -1, distance: number): number | null {\n  const grid = minuteGrid(props.minuteStep)\n  const target = (((minute.value + direction * distance) % 60) + 60) % 60\n  const n = grid.length\n  let start = direction > 0 ? 0 : n - 1\n  for (let k = 0; k < n; k += 1) {\n    const i = direction > 0 ? k : n - 1 - k\n    if (direction > 0 ? grid[i]! >= target : grid[i]! <= target) {\n      start = i\n      break\n    }\n  }\n  return firstAllowed(\n    n,\n    (i) => grid[(((start + direction * (i - 1)) % n) + n) % n]!,\n    (candidate) => isTimeAllowed(hour.value, candidate, limits.value),\n  )\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  // The face of a disabled clock is out of the tab order, but `focus()` can still put the\n  // focus there: nothing it is sent may move the step on or confirm.\n  if (props.disabled) return\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault()\n    settleStep('keyboard')\n    return\n  }\n  // The arrows are not flipped in a right-to-left page: a clock face is never mirrored;\n  // clockwise means the same thing everywhere; so forward stays forward.\n  const delta =\n    event.key === 'ArrowUp' || event.key === 'ArrowRight'\n      ? 1\n      : event.key === 'ArrowDown' || event.key === 'ArrowLeft'\n        ? -1\n        : 0\n  if (step.value === 'hour') {\n    if (delta) moveHour(delta)\n    else if (event.key === 'Home') setHour(edgeHour('first'))\n    else if (event.key === 'End') setHour(edgeHour('last'))\n    else return\n    event.preventDefault()\n    return\n  }\n  if (delta) setMinute(minuteToward(delta, 1))\n  else if (event.key === 'PageUp') setMinute(minuteToward(1, 5))\n  else if (event.key === 'PageDown') setMinute(minuteToward(-1, 5))\n  // The list is built in these two branches alone: the arrows walk to a neighbour and never\n  // need the whole of it.\n  else if (event.key === 'Home') setMinute(allowedMinutesFor(hour.value, limits.value)[0] ?? null)\n  else if (event.key === 'End')\n    setMinute(allowedMinutesFor(hour.value, limits.value).at(-1) ?? null)\n  else return\n  event.preventDefault()\n}\n\ndefineExpose({\n  /** Moves the focus onto the clock face, which the arrow keys drive. */\n  focus: (options?: FocusOptions) => faceEl.value?.focus(options),\n  /**\n   * Puts the clock back on the hour and clears the announcement, WITHOUT announcing anything\n   * itself.\n   */\n  reset: () => {\n    step.value = 'hour'\n    liveMessage.value = ''\n  },\n})\n</script>\n\n<template>\n  <div\n    class=\"v-time-picker\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :data-step=\"step\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <!--\n      The two large numerals switch between adjusting the hour and the minutes. The one being\n      adjusted takes the accent tone, which on a quiet button shows as the colour of the numeral\n      rather than as a filled background.\n    -->\n    <div class=\"v-time-picker-header\">\n      <div class=\"v-time-picker-time\">\n        <VButton\n          class=\"v-time-picker-cell\"\n          variant=\"ghost\"\n          size=\"lg\"\n          :tone=\"step === 'hour' ? 'accent' : 'neutral'\"\n          :aria-pressed=\"step === 'hour' ? 'true' : 'false'\"\n          :aria-label=\"`${displayHourText}, ${m.timePicker.selectHour}`\"\n          :disabled=\"disabled\"\n          @click=\"setStep('hour')\"\n        >\n          {{ displayHourText }}\n        </VButton>\n        <span class=\"v-time-picker-sep\" aria-hidden=\"true\">:</span>\n        <VButton\n          class=\"v-time-picker-cell\"\n          variant=\"ghost\"\n          size=\"lg\"\n          :tone=\"step === 'minute' ? 'accent' : 'neutral'\"\n          :aria-pressed=\"step === 'minute' ? 'true' : 'false'\"\n          :aria-label=\"`${pad2(minute)}, ${m.timePicker.selectMinutes}`\"\n          :disabled=\"disabled\"\n          @click=\"setStep('minute')\"\n        >\n          {{ pad2(minute) }}\n        </VButton>\n      </div>\n\n      <VToggle\n        v-if=\"resolvedFormat === '12h'\"\n        v-model=\"meridiemModel\"\n        class=\"v-time-picker-meridiem\"\n        mandatory\n        variant=\"outline\"\n        selected-variant=\"soft\"\n        orientation=\"vertical\"\n        size=\"sm\"\n        :label=\"m.timePicker.meridiem\"\n        :disabled=\"disabled || readonly\"\n      >\n        <VToggleItem value=\"AM\" :label=\"m.timePicker.am\" :disabled=\"!meridiemAvailable.AM\" />\n        <VToggleItem value=\"PM\" :label=\"m.timePicker.pm\" :disabled=\"!meridiemAvailable.PM\" />\n      </VToggle>\n    </div>\n\n    <div\n      ref=\"faceEl\"\n      role=\"slider\"\n      :tabindex=\"disabled ? -1 : 0\"\n      class=\"v-time-picker-face\"\n      :aria-label=\"step === 'hour' ? m.timePicker.hour : m.timePicker.minutes\"\n      :aria-valuemin=\"ariaValueMin\"\n      :aria-valuemax=\"ariaValueMax\"\n      :aria-valuenow=\"ariaValueNow\"\n      :aria-valuetext=\"ariaValueText\"\n      :data-dragging=\"dragging ? '' : undefined\"\n      :aria-disabled=\"disabled ? 'true' : undefined\"\n      :aria-readonly=\"readonly ? 'true' : undefined\"\n      @pointerdown=\"onPointerdown\"\n      @pointermove=\"onPointermove\"\n      @pointerup=\"onPointerup\"\n      @pointercancel=\"onPointercancel\"\n      @keydown=\"onKeydown\"\n    >\n      <div\n        class=\"v-time-picker-hand\"\n        aria-hidden=\"true\"\n        :data-ring=\"handRing\"\n        :data-minor=\"handMinor ? '' : undefined\"\n        :style=\"{ '--dial-turn': String(handTurn) }\"\n      />\n      <span class=\"v-time-picker-center\" aria-hidden=\"true\" />\n      <span\n        v-for=\"cell in cells\"\n        :key=\"cell.key\"\n        class=\"v-time-picker-number\"\n        aria-hidden=\"true\"\n        :data-ring=\"cell.ring\"\n        :data-selected=\"cell.selected ? '' : undefined\"\n        :style=\"{ '--dial-turn': String(cell.turn) }\"\n        >{{ cell.label }}</span\n      >\n    </div>\n\n    <div class=\"v-visually-hidden\" aria-live=\"polite\">{{ liveMessage }}</div>\n\n    <div v-if=\"$slots.footer\" class=\"v-time-picker-footer\"><slot name=\"footer\" /></div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The same root as VDatePicker's: an inline column that sizes to its content and pads\n     itself, so the clock reads the same on a page as in VTimeInput's panel, which adds no\n     padding of its own. The gap is the clock's, its parts being larger. */\n  .v-time-picker {\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--vectis-space-4);\n    padding: var(--vectis-space-3);\n    font-family: var(--vectis-text-family);\n    color: var(--vectis-color-text);\n  }\n\n  /*\n   * The numerals and the choice of half-day on one row, the second beside the first. The gap is\n   * logical, so the control follows the reading direction; the numerals inside it stay in a\n   * group of their own, which keeps the direction they force off it.\n   */\n  .v-time-picker-header {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--vectis-space-3);\n  }\n\n  /* A time written in figures always reads hours then minutes, in every language. Forcing\n     the direction here is what stops bidirectional reordering from swapping the two in a\n     right-to-left page. */\n  .v-time-picker-time {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--vectis-space-2);\n    direction: ltr;\n  }\n\n  /*\n   * What is overridden here is the \"large numeral\" look alone; the width and the type; the\n   * height, the states, the focus ring and the transitions all come from the button itself. The\n   * type is the `heading-1` recipe taken whole, and the colon the `heading-2` one: read in\n   * halves, a consumer repointing `--vectis-text-heading-1-weight` would move every heading but\n   * these two numerals.\n   */\n  .v-time-picker-cell[data-size] {\n    width: var(--control-height);\n    font-size: var(--vectis-text-heading-1-size);\n    font-weight: var(--vectis-text-heading-1-weight);\n    line-height: var(--vectis-text-heading-1-leading);\n    letter-spacing: var(--vectis-text-heading-1-tracking);\n    /* Figures of equal width, so that going from \"11\" to \"00\" does not shift the cell. */\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-time-picker-sep {\n    font-size: var(--vectis-text-heading-2-size);\n    font-weight: var(--vectis-text-heading-2-weight);\n    line-height: var(--vectis-text-heading-2-leading);\n    color: var(--vectis-color-text);\n    user-select: none;\n  }\n\n  .v-time-picker-meridiem {\n    flex: none;\n  }\n\n  .v-time-picker-face {\n    position: relative;\n    /*\n     * The row above is wider than the face as soon as the half-day control is rendered, and the\n     * column is only as wide as its widest child: without this the clock would hang at the\n     * start edge of that row instead of under the middle of it. The face itself stays physical;\n     * a clock is never mirrored.\n     */\n    align-self: center;\n    inline-size: var(--vectis-control-size-time-picker-dial);\n    block-size: var(--vectis-control-size-time-picker-dial);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--vectis-color-surface-muted);\n    /* Dragging across the face IS how one chooses, so it must do nothing else: no\n       scrolling under a finger, and no selecting the numerals as text. */\n    touch-action: none;\n    user-select: none;\n    cursor: pointer;\n    /*\n     * This is coupled to the threshold that decides which of the two circles a point belongs\n     * to, in `utils/clock`. Changing one without the other makes the face answer with the wrong\n     * ring, and no test can catch it: the unit tests measure nothing.\n     */\n    --dial-radius: calc(\n      var(--vectis-control-size-time-picker-dial) / 2 -\n        var(--vectis-control-size-time-picker-number) / 2\n    );\n  }\n\n  .v-time-picker-face: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 properties used are PHYSICAL on purpose, where the rest of the design system prefers\n   * logical ones: a clock face is never mirrored, clockwise meaning the same thing in every\n   * language.\n   */\n  .v-time-picker-number {\n    position: absolute;\n    left: calc(50% + var(--dial-radius) * sin(var(--dial-turn) * 1turn));\n    top: calc(50% - var(--dial-radius) * cos(var(--dial-turn) * 1turn));\n    translate: -50% -50%;\n    inline-size: var(--vectis-control-size-time-picker-number);\n    block-size: var(--vectis-control-size-time-picker-number);\n    display: grid;\n    place-items: center;\n    border-radius: var(--vectis-radius-pill);\n    /* The outer circle is set at the large body size: these numerals are read at arm's\n       length on a phone, not scanned like a label. */\n    font-size: var(--vectis-text-body-lg-size);\n    color: var(--vectis-color-text);\n    /*\n     * Above the hand, so that the numeral being pointed at reads on its dot rather than being\n     * covered by it.\n     */\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  .v-time-picker-number[data-ring='inner'],\n  .v-time-picker-hand[data-ring='inner'] {\n    --dial-radius: calc(\n      var(--vectis-control-size-time-picker-dial) / 2 -\n        var(--vectis-control-size-time-picker-number) * 1.5\n    );\n  }\n\n  .v-time-picker-number[data-ring='inner'] {\n    font-size: var(--vectis-text-body-md-size);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-time-picker-number[data-selected] {\n    color: var(--vectis-color-text-on-accent);\n  }\n\n  /*\n   * The rotation is deliberately not animated. Going from 55 minutes to 0 takes the angle from\n   * nearly a full turn back to none, and an interpolation would sweep the hand all the way\n   * round anticlockwise.\n   */\n  .v-time-picker-hand {\n    position: absolute;\n    left: calc(50% - var(--vectis-control-size-time-picker-hand) / 2);\n    bottom: 50%;\n    inline-size: var(--vectis-control-size-time-picker-hand);\n    block-size: var(--dial-radius);\n    background: var(--vectis-color-accent);\n    transform-origin: 50% 100%;\n    rotate: calc(var(--dial-turn) * 1turn);\n  }\n\n  /*\n   * The dot at the tip of the hand. It is exactly the size of a numeral's cell, so it covers\n   * the one being pointed at; whose text turns to the colour that reads on it.\n   */\n  .v-time-picker-hand::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 50%;\n    translate: -50% -50%;\n    inline-size: var(--vectis-control-size-time-picker-number);\n    block-size: var(--vectis-control-size-time-picker-number);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--vectis-color-accent);\n    /* The ONE thing animated on the hand: the dot changing size between its two forms. It\n       interpolates between two bounded values and can therefore never take a wrong path,\n       unlike the rotation above. */\n    transition:\n      inline-size var(--vectis-duration-fast) var(--vectis-ease-default),\n      block-size var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /*\n   * Only the DOT's own size changes. Redefining the numeral size variable here would also move\n   * the radius derived from it, and with it the hand's length and the position of both circles.\n   */\n  .v-time-picker-hand[data-minor]::before {\n    inline-size: var(--vectis-control-size-time-picker-hand-minor);\n    block-size: var(--vectis-control-size-time-picker-hand-minor);\n  }\n\n  .v-time-picker-center {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    translate: -50% -50%;\n    inline-size: var(--vectis-control-size-time-picker-center);\n    block-size: var(--vectis-control-size-time-picker-center);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--vectis-color-accent);\n  }\n\n  /* Neither state is a pointer target. A read-only clock is still read, so it keeps the\n     ordinary cursor; a disabled one refuses. */\n  .v-time-picker[data-readonly] .v-time-picker-face {\n    cursor: default;\n  }\n\n  .v-time-picker[data-disabled] .v-time-picker-face {\n    cursor: not-allowed;\n  }\n\n  /*\n   * The whole block sits after the rules it overrides, every one of them at the same\n   * specificity: this is one sheet, so its own order is what settles them.\n   */\n  .v-time-picker[data-disabled] .v-time-picker-hand,\n  .v-time-picker[data-disabled] .v-time-picker-hand::before,\n  .v-time-picker[data-disabled] .v-time-picker-center {\n    background: var(--vectis-color-border-strong);\n  }\n\n  .v-time-picker[data-disabled] .v-time-picker-sep,\n  .v-time-picker[data-disabled] .v-time-picker-number,\n  .v-time-picker[data-disabled] .v-time-picker-number[data-selected] {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-time-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-time-picker-hand::before {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"VTimePicker.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VTimePicker/VTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * CSS places clock numerals and the hand. JavaScript maps pointer angles and keyboard steps to\n * a time because HTML has no interactive clock-face primitive.\n */\n\nimport { computed, inject, ref, watchEffect } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VToggle from '../VToggle/VToggle.vue'\nimport type { ToggleModelValue } from '../VToggle/VToggle.vue'\nimport VToggleItem from '../VToggle/VToggleItem.vue'\nimport { formatTime, hourCycleFor, parseTime } from '../../utils/time'\nimport {\n  DIAL_DEAD_ZONE,\n  DIAL_INNER_THRESHOLD,\n  angleToIndex,\n  dialIndexToHour24,\n  distanceFraction,\n  hour24ToDial,\n  hourWithMeridiem,\n  snapMinute,\n  to12h,\n  to24h,\n} from '../../utils/clock'\nimport type { HourFormat, Meridiem } from '../../utils/time'\nimport {\n  allowedMinutesFor,\n  firstAllowed,\n  isHourAllowed,\n  isTimeAllowed,\n  limitsProblem,\n  minuteGrid,\n  minuteInterval,\n  nearestAllowedMinute,\n  resolveLimits,\n} from './limits'\nimport type { TimePickerAllowed } from './limits'\nimport { pad2 } from '../../utils/text'\nimport { isDev } from '../../utils/env'\nimport { hostWarnsKey } from '../../utils/hostWarns'\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages, useResolvedLocale } from '../../i18n/state'\n\n/** Whether the face shows a 12- or a 24-hour clock. */\nexport type TimePickerFormat = HourFormat\n\n/** Which of the two halves of a time is being adjusted. */\ntype TimePickerStep = 'hour' | 'minute'\n\ninterface TimePickerProps {\n  /**\n   * Whether the face shows a 12- or a 24-hour clock. Left out, the reader's language\n   * decides, which is almost always what one wants.\n   */\n  format?: TimePickerFormat\n  /**\n   * A BCP 47 locale, which decides the clock. It TAKES PRECEDENCE over the design\n   * system's global locale and falls back to it, which is why it has no literal default:\n   * `undefined` has to stay recognizable for the global locale to have its chance.\n   */\n  locale?: string\n  /**\n   * The interval the minutes snap to, both when dragging and with the arrow keys. The face\n   * prints only the minutes it can reach, so a step of a quarter of an hour marks four.\n   */\n  minuteStep?: number\n  /** The earliest time that can be chosen, inclusive, as a canonical 24-hour `'HH:mm'`. */\n  min?: string\n  /** The latest time that can be chosen, inclusive, written like `min`. */\n  max?: string\n  /** Which hours can be chosen: the list of them, or a rule answering for one. */\n  allowedHours?: TimePickerAllowed\n  /**\n   * Which minutes can be chosen: the list of them, or a rule answering for one. The\n   * minutes it leaves out are not printed.\n   */\n  allowedMinutes?: TimePickerAllowed\n  /**\n   * Makes the whole clock unusable: the hand cannot be moved, the half-day cannot be\n   * changed, and everything greys out through the colour tokens.\n   */\n  disabled?: boolean\n  /** Shows the time without letting it be changed. */\n  readonly?: boolean\n  /**\n   * The accessible name of the whole clock, its two numerals and its face together. It falls\n   * back to the dictionary, and a consumer `aria-label` wins over it.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<TimePickerProps>(), {\n  format: undefined,\n  locale: undefined,\n  minuteStep: 1,\n  min: undefined,\n  max: undefined,\n  allowedHours: undefined,\n  allowedMinutes: undefined,\n  disabled: false,\n  readonly: false,\n  label: undefined,\n})\n\n/** The time, always as a 24-hour \"HH:mm\" string whatever clock is displayed. */\nconst model = defineModel<string | null>({ default: null })\n\nconst emit = defineEmits<{\n  /**\n   * The reader has FINISHED, carrying the time as it stands: the minutes were settled from the\n   * keyboard.\n   */\n  confirm: [value: string | null]\n}>()\n\ndefineSlots<{\n  /** A strip at the foot of the clock, the place for actions such as Cancel and OK. */\n  footer?(): unknown\n}>()\n\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.timePicker.label)\nconst resolvedLocale = useResolvedLocale(() => props.locale)\nconst resolvedFormat = computed<TimePickerFormat>(\n  () => props.format ?? hourCycleFor(resolvedLocale.value),\n)\n\n/** The restrictions, resolved once for the whole render. */\nconst limits = computed(() => resolveLimits(props))\n\n/** The hours the restrictions still leave something in, worked out once per set of restrictions. */\nconst availableHours = computed(() => {\n  const hours = new Set<number>()\n  for (let candidate = 0; candidate < 24; candidate += 1)\n    if (isHourAllowed(candidate, limits.value)) hours.add(candidate)\n  return hours\n})\n\n/** Whether an hour is one the restrictions still leave something in. */\nconst isAvailableHour = (candidate: number) => availableHours.value.has(candidate)\n\n// @devwarn\nif (isDev && !inject(hostWarnsKey, false)) {\n  watchEffect(() => {\n    if (!Number.isInteger(props.minuteStep) || props.minuteStep < 1 || 60 % props.minuteStep !== 0)\n      console.warn(`[VTimePicker] minuteStep ${props.minuteStep} — a divisor of 60 is expected.`)\n    const problem = limitsProblem(limits.value)\n    if (problem) console.warn(`[VTimePicker] ${problem}`)\n  })\n}\n\n/** Which of the two is being adjusted. It starts on the hour and moves on by itself. */\nconst step = ref<TimePickerStep>('hour')\n\n// With no value the clock shows the first hour of the half of the day chosen so far, which\n// is midnight until PM is picked. It is also the hour a time started from the MINUTES is\n// written with, so that choice is not lost when the reader begins there.\nconst parts = computed(\n  () =>\n    parseTime(model.value) ?? {\n      hour: resolvedFormat.value === '12h' ? to24h(12, pendingMeridiem.value) : 0,\n      minute: 0,\n    },\n)\nconst hour = computed(() => parts.value.hour)\nconst minute = computed(() => parts.value.minute)\n\n/*\n * The two writers are the SINGLE cut-off point for the restrictions: the pointer, the six\n * keys and the AM/PM control all write through them and through nothing else, so not one\n * handler carries a guard of its own.\n */\n\n/**\n * Writing the hour. An hour with nothing left in it has no minute to fall back on, which\n * refuses it; one that is only PARTLY available pulls the minutes to what it does allow, since\n * `min: '09:30'` must not be left holding 09:00.\n */\nfunction setHour(value: number | null) {\n  // Changing which face is shown stays allowed under `readonly`: reading the minutes is not\n  // changing them.\n  if (props.disabled || props.readonly) return\n  if (value === null) return\n  const minutes = isTimeAllowed(value, minute.value, limits.value)\n    ? minute.value\n    : nearestAllowedMinute(value, minute.value, limits.value)\n  if (minutes === null) return\n  model.value = formatTime(value, minutes)\n}\n\n/** Writing the minutes. Null is \"there was nowhere to go\", which every key can produce. */\nfunction setMinute(value: number | null) {\n  if (props.disabled || props.readonly) return\n  if (value === null || !isTimeAllowed(hour.value, value, limits.value)) return\n  model.value = formatTime(hour.value, value)\n}\n\n// @a11y\n/*\n * Which step the clock is on is otherwise carried by the face's own name alone, and a change of\n * name is not reliably announced. A politely announced region says it a second time.\n */\nconst liveMessage = ref('')\n\nfunction setStep(next: TimePickerStep) {\n  step.value = next\n  liveMessage.value =\n    next === 'minute' ? m.value.timePicker.choosingMinutes : m.value.timePicker.choosingHour\n}\n\n/** One numeral on the face. */\ninterface DialCell {\n  key: string\n  /** What is printed. */\n  label: string\n  /** Where it sits, as a fraction of a full turn from twelve o'clock. */\n  turn: number\n  /** Which of the two circles it belongs to, a 24-hour face having an inner one. */\n  ring: 'outer' | 'inner'\n  /** Whether it is the value currently being pointed at. */\n  selected: boolean\n}\n\n/** The hour a position on the face stands for. */\nfunction hourAt(index: number, ring: 'outer' | 'inner'): number {\n  return resolvedFormat.value === '24h'\n    ? dialIndexToHour24(index, ring)\n    : to24h(index === 0 ? 12 : index, currentMeridiem.value)\n}\n\n/** The minutes the face prints. */\nconst minuteMarks = computed(() => {\n  const interval = minuteInterval(props.minuteStep)\n  const spacing = 60 / interval <= 12 ? interval : 5\n  const marks: number[] = []\n  for (let minutes = 0; minutes < 60; minutes += spacing)\n    if (minutes % interval === 0 && isTimeAllowed(hour.value, minutes, limits.value))\n      marks.push(minutes)\n  return marks\n})\n\n/*\n * A numeral that is only there to be refused says nothing the missing numeral does not say\n * better, and it says it in grey text a screen reader has no way to reach: the markers are\n * `aria-hidden`, so what the restrictions leave is spoken by the face's own value and by\n * nothing else.\n */\nconst cells = computed<DialCell[]>(() => {\n  if (step.value === 'minute') {\n    return minuteMarks.value.map((minutes) => ({\n      key: `m-${minutes}`,\n      label: pad2(minutes),\n      turn: minutes / 60,\n      ring: 'outer' as const,\n      selected: minute.value === minutes,\n    }))\n  }\n  // Each position's hour is worked out once, since on a 12-hour face that takes the half of the\n  // day in force. The selection there still compares numerals and not hours: an empty clock\n  // holding a PM choice sits on midnight, and its hand points at the 12 all the same.\n  const twelve = resolvedFormat.value === '12h'\n  const shown12 = to12h(hour.value).hour\n  const rings: DialCell['ring'][] = twelve ? ['outer'] : ['outer', 'inner']\n  const out: DialCell[] = []\n  for (const ring of rings)\n    for (let i = 0; i < 12; i += 1) {\n      const target = hourAt(i, ring)\n      if (!isAvailableHour(target)) continue\n      const numeral = i === 0 ? 12 : i\n      out.push({\n        key: `${ring === 'outer' ? 'o' : 'i'}-${i}`,\n        label: ring === 'inner' ? pad2(target) : String(numeral),\n        turn: i / 12,\n        ring,\n        selected: twelve ? shown12 === numeral : hour.value === target,\n      })\n    }\n  return out\n})\n\nconst handTurn = computed(() => {\n  if (step.value === 'minute') return minute.value / 60\n  const index =\n    resolvedFormat.value === '24h' ? hour24ToDial(hour.value).index : to12h(hour.value).hour % 12\n  return index / 12\n})\n\nconst handRing = computed(() =>\n  step.value === 'hour' && resolvedFormat.value === '24h' ? hour24ToDial(hour.value).ring : 'outer',\n)\n\n/**\n * Whether the hand points at a minute that has no marker of its own. The tip is then\n * drawn small: at full size it would cover the two neighbouring markers and read as\n * pointing at neither.\n */\nconst handMinor = computed(\n  () => step.value === 'minute' && !minuteMarks.value.includes(minute.value),\n)\n\n/** The hour as the two large numerals show it, on whichever clock is displayed. */\nconst displayHourText = computed(() =>\n  pad2(resolvedFormat.value === '12h' ? to12h(hour.value).hour : hour.value),\n)\n\n/** Which half of the day is chosen while no time is set at all. */\nconst pendingMeridiem = ref<Meridiem>('AM')\n\n/**\n * The half of the day in force: the value's own once there is one, the remembered choice until\n * then.\n */\nconst currentMeridiem = computed<Meridiem>(() =>\n  model.value ? to12h(hour.value).meridiem : pendingMeridiem.value,\n)\n\nconst meridiemModel = computed<ToggleModelValue>({\n  get: () => currentMeridiem.value,\n  set: (value) => {\n    const meridiem: Meridiem = value === 'PM' ? 'PM' : 'AM'\n    pendingMeridiem.value = meridiem\n    // With no time set there is nothing to convert, so the choice is simply REMEMBERED\n    // and applies to the first time chosen.\n    if (!model.value) return\n    // What is being chosen here is the HALF OF THE DAY, so the hour gives way to it: kept\n    // when the new half allows it, and otherwise the first hour of that half that does.\n    // Refusing the write instead would leave the control snapping straight back, since it\n    // reads the half of the day off the value.\n    const wanted = hourWithMeridiem(hour.value, meridiem)\n    setHour(\n      isAvailableHour(wanted)\n        ? wanted\n        : firstAllowed(12, (i) => to24h(i, meridiem), isAvailableHour),\n    )\n  },\n})\n\n/**\n * Whether each half of the day still holds an hour one could choose. An empty one takes its\n * button with it: a control that can only ever be refused is worse than no control.\n */\nconst meridiemAvailable = computed<Record<Meridiem, boolean>>(() => ({\n  AM: firstAllowed(12, (i) => to24h(i, 'AM'), isAvailableHour) !== null,\n  PM: firstAllowed(12, (i) => to24h(i, 'PM'), isAvailableHour) !== null,\n}))\n\n// @a11y\n// The entire spoken value of the face. The numerals are hidden from screen readers, so these\n// four attributes are the only thing assistive technology has: what the value is, what its\n// bounds are, and how to say it.\nconst ariaValueNow = computed(() => {\n  if (step.value === 'minute') return minute.value\n  return resolvedFormat.value === '12h' ? to12h(hour.value).hour : hour.value\n})\nconst ariaValueMin = computed(() =>\n  step.value === 'minute' ? 0 : resolvedFormat.value === '12h' ? 1 : 0,\n)\nconst ariaValueMax = computed(() =>\n  step.value === 'minute' ? 59 : resolvedFormat.value === '12h' ? 12 : 23,\n)\n// On a 12-hour face the half of the day is spoken with the hour: the AM/PM control is not\n// on the slider's way, and \"9 o'clock\" alone is two different times.\nconst ariaValueText = computed(() => {\n  const m_ = m.value.timePicker\n  if (step.value === 'minute') return m_.minutesValue(minute.value)\n  const spoken = m_.hourValue(ariaValueNow.value)\n  if (resolvedFormat.value === '24h') return spoken\n  return `${spoken} ${currentMeridiem.value === 'PM' ? m_.pm : m_.am}`\n})\n\n/**\n * A step has been settled: after the hour come the minutes, and after the minutes the whole\n * thing is confirmed; but by KEYBOARD only, for the reason given on the emit.\n */\nfunction settleStep(via: 'pointer' | 'keyboard') {\n  if (step.value === 'hour') setStep('minute')\n  else if (via === 'keyboard') emit('confirm', model.value)\n}\n\nconst faceEl = ref<HTMLElement | null>(null)\nconst dragging = ref(false)\n/** Whether anything in the gesture under way landed on a numeral. */\nlet landed = false\n\n/**\n * Where a point on the face lands, and whether there was anything there at all. The write\n * itself still goes through `setHour`/ `setMinute` and their own guards, which is why\n * `readonly` is refused THERE and not here: a frozen clock is still one whose numerals are\n * real, and a tap on one moves the step on as it always did.\n */\nfunction applyPoint(event: PointerEvent): boolean {\n  const face = faceEl.value\n  // A disabled clock aims at nothing, so no step is moved on either: its header buttons\n  // are disabled for the same reason.\n  if (!face || props.disabled) return false\n  // Measuring the face is safe here: this runs from a handler, hence in a browser, never\n  // during a render.\n  const rect = face.getBoundingClientRect()\n  const dx = event.clientX - (rect.left + rect.width / 2)\n  const dy = event.clientY - (rect.top + rect.height / 2)\n  if (Math.hypot(dx, dy) <= DIAL_DEAD_ZONE * (rect.width / 2)) return false\n  if (step.value === 'minute') {\n    // The step's own snapping stands: a point between two markers has always been pulled\n    // to the one it is nearest. What it is pulled to still has to BE on the face.\n    const minutes = snapMinute(angleToIndex(dx, dy, 60), props.minuteStep)\n    if (!isTimeAllowed(hour.value, minutes, limits.value)) return false\n    setMinute(minutes)\n    return true\n  }\n  const index = angleToIndex(dx, dy, 12)\n  const ring =\n    resolvedFormat.value === '24h' &&\n    distanceFraction(dx, dy, rect.width / 2) < DIAL_INNER_THRESHOLD\n      ? 'inner'\n      : 'outer'\n  const target = hourAt(index, ring)\n  if (!isAvailableHour(target)) return false\n  setHour(target)\n  return true\n}\n\nfunction onPointerdown(event: PointerEvent) {\n  // @fallback\n  // Capture keeps dragging active outside the clock face; synthetic events may not reference a\n  // capturable pointer.\n  try {\n    faceEl.value?.setPointerCapture(event.pointerId)\n  } catch {\n    /* Synthetic pointers cannot be captured. */\n  }\n  dragging.value = true\n  landed = applyPoint(event)\n}\n\nfunction onPointermove(event: PointerEvent) {\n  if (dragging.value && applyPoint(event)) landed = true\n}\n\nfunction onPointerup() {\n  if (!dragging.value) return\n  dragging.value = false\n  // A gesture that never landed on a numeral has chosen nothing, so there is nothing to\n  // move on FROM: the reader is left on the face they aimed at, looking at what they missed.\n  if (landed) settleStep('pointer')\n}\n\nfunction onPointercancel() {\n  dragging.value = false\n}\n\n// @keyboard @a11y\n// The keyboard a slider is expected to have.\n/*\n * Every key below walks until it finds something it MAY land on, rather than stopping at the\n * first thing it may not: with scattered hours a key that stopped would die at the first hole\n * and never reach what lies past it. Against a bound there is nothing past the hole, so the\n * same walk comes back empty and the key holds still, which a bound means.\n */\nfunction moveHour(delta: number) {\n  if (resolvedFormat.value === '24h') {\n    setHour(firstAllowed(23, (i) => (hour.value + delta * i + 24) % 24, isAvailableHour))\n    return\n  }\n  // On a 12-hour face the hours cycle from 1 to 12 WITHIN the current half of the day:\n  // passing midday is done on the AM/PM control, not by walking the hand past twelve.\n  const hour12 = to12h(hour.value).hour\n  setHour(\n    firstAllowed(\n      11,\n      (i) => to24h(((hour12 - 1 + delta * i + 12) % 12) + 1, currentMeridiem.value),\n      isAvailableHour,\n    ),\n  )\n}\n\n/** The first or the last hour the face allows, on whichever clock it is showing. */\nfunction edgeHour(edge: 'first' | 'last'): number | null {\n  if (resolvedFormat.value === '24h')\n    return firstAllowed(24, (i) => (edge === 'first' ? i - 1 : 24 - i), isAvailableHour)\n  return firstAllowed(\n    12,\n    (i) => to24h(edge === 'first' ? i : 13 - i, currentMeridiem.value),\n    isAvailableHour,\n  )\n}\n\n/**\n * The minute a key lands on: the first step of the grid at least `distance` minutes away, that\n * way round, and then the next one the hour allows.\n */\nfunction minuteToward(direction: 1 | -1, distance: number): number | null {\n  const grid = minuteGrid(props.minuteStep)\n  const target = (((minute.value + direction * distance) % 60) + 60) % 60\n  const n = grid.length\n  let start = direction > 0 ? 0 : n - 1\n  for (let k = 0; k < n; k += 1) {\n    const i = direction > 0 ? k : n - 1 - k\n    if (direction > 0 ? grid[i]! >= target : grid[i]! <= target) {\n      start = i\n      break\n    }\n  }\n  return firstAllowed(\n    n,\n    (i) => grid[(((start + direction * (i - 1)) % n) + n) % n]!,\n    (candidate) => isTimeAllowed(hour.value, candidate, limits.value),\n  )\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  // The face of a disabled clock is out of the tab order, but `focus()` can still put the\n  // focus there: nothing it is sent may move the step on or confirm.\n  if (props.disabled) return\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault()\n    settleStep('keyboard')\n    return\n  }\n  // The arrows are not flipped in a right-to-left page: a clock face is never mirrored;\n  // clockwise means the same thing everywhere; so forward stays forward.\n  const delta =\n    event.key === 'ArrowUp' || event.key === 'ArrowRight'\n      ? 1\n      : event.key === 'ArrowDown' || event.key === 'ArrowLeft'\n        ? -1\n        : 0\n  if (step.value === 'hour') {\n    if (delta) moveHour(delta)\n    else if (event.key === 'Home') setHour(edgeHour('first'))\n    else if (event.key === 'End') setHour(edgeHour('last'))\n    else return\n    event.preventDefault()\n    return\n  }\n  if (delta) setMinute(minuteToward(delta, 1))\n  else if (event.key === 'PageUp') setMinute(minuteToward(1, 5))\n  else if (event.key === 'PageDown') setMinute(minuteToward(-1, 5))\n  // The list is built in these two branches alone: the arrows walk to a neighbour and never\n  // need the whole of it.\n  else if (event.key === 'Home') setMinute(allowedMinutesFor(hour.value, limits.value)[0] ?? null)\n  else if (event.key === 'End')\n    setMinute(allowedMinutesFor(hour.value, limits.value).at(-1) ?? null)\n  else return\n  event.preventDefault()\n}\n\ndefineExpose({\n  /** Moves the focus onto the clock face, which the arrow keys drive. */\n  focus: (options?: FocusOptions) => faceEl.value?.focus(options),\n  /**\n   * Puts the clock back on the hour and clears the announcement, WITHOUT announcing anything\n   * itself.\n   */\n  reset: () => {\n    step.value = 'hour'\n    liveMessage.value = ''\n  },\n})\n</script>\n\n<template>\n  <div\n    class=\"v-time-picker\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :data-step=\"step\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <!--\n      The two large numerals switch between adjusting the hour and the minutes. The one being\n      adjusted takes the accent tone, which on a quiet button shows as the colour of the numeral\n      rather than as a filled background.\n    -->\n    <div class=\"v-time-picker-header\">\n      <div class=\"v-time-picker-time\">\n        <VButton\n          class=\"v-time-picker-cell\"\n          variant=\"ghost\"\n          size=\"lg\"\n          :tone=\"step === 'hour' ? 'accent' : 'neutral'\"\n          :aria-pressed=\"step === 'hour' ? 'true' : 'false'\"\n          :aria-label=\"`${displayHourText}, ${m.timePicker.selectHour}`\"\n          :disabled=\"disabled\"\n          @click=\"setStep('hour')\"\n        >\n          {{ displayHourText }}\n        </VButton>\n        <span class=\"v-time-picker-sep\" aria-hidden=\"true\">:</span>\n        <VButton\n          class=\"v-time-picker-cell\"\n          variant=\"ghost\"\n          size=\"lg\"\n          :tone=\"step === 'minute' ? 'accent' : 'neutral'\"\n          :aria-pressed=\"step === 'minute' ? 'true' : 'false'\"\n          :aria-label=\"`${pad2(minute)}, ${m.timePicker.selectMinutes}`\"\n          :disabled=\"disabled\"\n          @click=\"setStep('minute')\"\n        >\n          {{ pad2(minute) }}\n        </VButton>\n      </div>\n\n      <VToggle\n        v-if=\"resolvedFormat === '12h'\"\n        v-model=\"meridiemModel\"\n        class=\"v-time-picker-meridiem\"\n        mandatory\n        variant=\"outline\"\n        selected-variant=\"soft\"\n        orientation=\"vertical\"\n        size=\"sm\"\n        :label=\"m.timePicker.meridiem\"\n        :disabled=\"disabled || readonly\"\n      >\n        <VToggleItem value=\"AM\" :label=\"m.timePicker.am\" :disabled=\"!meridiemAvailable.AM\" />\n        <VToggleItem value=\"PM\" :label=\"m.timePicker.pm\" :disabled=\"!meridiemAvailable.PM\" />\n      </VToggle>\n    </div>\n\n    <div\n      ref=\"faceEl\"\n      role=\"slider\"\n      :tabindex=\"disabled ? -1 : 0\"\n      class=\"v-time-picker-face\"\n      :aria-label=\"step === 'hour' ? m.timePicker.hour : m.timePicker.minutes\"\n      :aria-valuemin=\"ariaValueMin\"\n      :aria-valuemax=\"ariaValueMax\"\n      :aria-valuenow=\"ariaValueNow\"\n      :aria-valuetext=\"ariaValueText\"\n      :data-dragging=\"dragging ? '' : undefined\"\n      :aria-disabled=\"disabled ? 'true' : undefined\"\n      :aria-readonly=\"readonly ? 'true' : undefined\"\n      @pointerdown=\"onPointerdown\"\n      @pointermove=\"onPointermove\"\n      @pointerup=\"onPointerup\"\n      @pointercancel=\"onPointercancel\"\n      @keydown=\"onKeydown\"\n    >\n      <div\n        class=\"v-time-picker-hand\"\n        aria-hidden=\"true\"\n        :data-ring=\"handRing\"\n        :data-minor=\"handMinor ? '' : undefined\"\n        :style=\"{ '--dial-turn': String(handTurn) }\"\n      />\n      <span class=\"v-time-picker-center\" aria-hidden=\"true\" />\n      <span\n        v-for=\"cell in cells\"\n        :key=\"cell.key\"\n        class=\"v-time-picker-number\"\n        aria-hidden=\"true\"\n        :data-ring=\"cell.ring\"\n        :data-selected=\"cell.selected ? '' : undefined\"\n        :style=\"{ '--dial-turn': String(cell.turn) }\"\n        >{{ cell.label }}</span\n      >\n    </div>\n\n    <div class=\"v-visually-hidden\" aria-live=\"polite\">{{ liveMessage }}</div>\n\n    <div v-if=\"$slots.footer\" class=\"v-time-picker-footer\"><slot name=\"footer\" /></div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The same root as VDatePicker's: an inline column that sizes to its content and pads\n     itself, so the clock reads the same on a page as in VTimeInput's panel, which adds no\n     padding of its own. The gap is the clock's, its parts being larger. */\n  .v-time-picker {\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--vectis-space-4);\n    padding: var(--vectis-space-3);\n    font-family: var(--vectis-text-family);\n    color: var(--vectis-color-text);\n  }\n\n  /*\n   * The numerals and the choice of half-day on one row, the second beside the first. The gap is\n   * logical, so the control follows the reading direction; the numerals inside it stay in a\n   * group of their own, which keeps the direction they force off it.\n   */\n  .v-time-picker-header {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--vectis-space-3);\n  }\n\n  /* A time written in figures always reads hours then minutes, in every language. Forcing\n     the direction here is what stops bidirectional reordering from swapping the two in a\n     right-to-left page. */\n  .v-time-picker-time {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--vectis-space-2);\n    direction: ltr;\n  }\n\n  /*\n   * What is overridden here is the \"large numeral\" look alone; the width and the type; the\n   * height, the states, the focus ring and the transitions all come from the button itself. The\n   * type is the `heading-1` recipe taken whole, and the colon the `heading-2` one: read in\n   * halves, a consumer repointing `--vectis-text-heading-1-weight` would move every heading but\n   * these two numerals.\n   */\n  .v-time-picker-cell[data-size] {\n    width: var(--control-height);\n    font-size: var(--vectis-text-heading-1-size);\n    font-weight: var(--vectis-text-heading-1-weight);\n    line-height: var(--vectis-text-heading-1-leading);\n    letter-spacing: var(--vectis-text-heading-1-tracking);\n    /* Figures of equal width, so that going from \"11\" to \"00\" does not shift the cell. */\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-time-picker-sep {\n    font-size: var(--vectis-text-heading-2-size);\n    font-weight: var(--vectis-text-heading-2-weight);\n    line-height: var(--vectis-text-heading-2-leading);\n    color: var(--vectis-color-text);\n    user-select: none;\n  }\n\n  .v-time-picker-meridiem {\n    flex: none;\n  }\n\n  .v-time-picker-face {\n    position: relative;\n    /*\n     * The row above is wider than the face as soon as the half-day control is rendered, and the\n     * column is only as wide as its widest child: without this the clock would hang at the\n     * start edge of that row instead of under the middle of it. The face itself stays physical;\n     * a clock is never mirrored.\n     */\n    align-self: center;\n    inline-size: var(--vectis-control-size-time-picker-dial);\n    block-size: var(--vectis-control-size-time-picker-dial);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--vectis-color-surface-muted);\n    /* Dragging across the face IS how one chooses, so it must do nothing else: no\n       scrolling under a finger, and no selecting the numerals as text. */\n    touch-action: none;\n    user-select: none;\n    cursor: pointer;\n    /*\n     * This is coupled to the threshold that decides which of the two circles a point belongs\n     * to, in `utils/clock`. Changing one without the other makes the face answer with the wrong\n     * ring, and no test can catch it: the unit tests measure nothing.\n     */\n    --dial-radius: calc(\n      var(--vectis-control-size-time-picker-dial) / 2 -\n        var(--vectis-control-size-time-picker-number) / 2\n    );\n  }\n\n  .v-time-picker-face: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 properties used are PHYSICAL on purpose, where the rest of the design system prefers\n   * logical ones: a clock face is never mirrored, clockwise meaning the same thing in every\n   * language.\n   */\n  .v-time-picker-number {\n    position: absolute;\n    left: calc(50% + var(--dial-radius) * sin(var(--dial-turn) * 1turn));\n    top: calc(50% - var(--dial-radius) * cos(var(--dial-turn) * 1turn));\n    translate: -50% -50%;\n    inline-size: var(--vectis-control-size-time-picker-number);\n    block-size: var(--vectis-control-size-time-picker-number);\n    display: grid;\n    place-items: center;\n    border-radius: var(--vectis-radius-pill);\n    /* The outer circle is set at the large body size: these numerals are read at arm's\n       length on a phone, not scanned like a label. */\n    font-size: var(--vectis-text-body-lg-size);\n    color: var(--vectis-color-text);\n    /*\n     * Above the hand, so that the numeral being pointed at reads on its dot rather than being\n     * covered by it.\n     */\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  .v-time-picker-number[data-ring='inner'],\n  .v-time-picker-hand[data-ring='inner'] {\n    --dial-radius: calc(\n      var(--vectis-control-size-time-picker-dial) / 2 -\n        var(--vectis-control-size-time-picker-number) * 1.5\n    );\n  }\n\n  .v-time-picker-number[data-ring='inner'] {\n    font-size: var(--vectis-text-body-md-size);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-time-picker-number[data-selected] {\n    color: var(--vectis-color-text-on-accent);\n  }\n\n  /*\n   * The rotation is deliberately not animated. Going from 55 minutes to 0 takes the angle from\n   * nearly a full turn back to none, and an interpolation would sweep the hand all the way\n   * round anticlockwise.\n   */\n  .v-time-picker-hand {\n    position: absolute;\n    left: calc(50% - var(--vectis-control-size-time-picker-hand) / 2);\n    bottom: 50%;\n    inline-size: var(--vectis-control-size-time-picker-hand);\n    block-size: var(--dial-radius);\n    background: var(--vectis-color-accent);\n    transform-origin: 50% 100%;\n    rotate: calc(var(--dial-turn) * 1turn);\n  }\n\n  /*\n   * The dot at the tip of the hand. It is exactly the size of a numeral's cell, so it covers\n   * the one being pointed at; whose text turns to the colour that reads on it.\n   */\n  .v-time-picker-hand::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 50%;\n    translate: -50% -50%;\n    inline-size: var(--vectis-control-size-time-picker-number);\n    block-size: var(--vectis-control-size-time-picker-number);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--vectis-color-accent);\n    /* The ONE thing animated on the hand: the dot changing size between its two forms. It\n       interpolates between two bounded values and can therefore never take a wrong path,\n       unlike the rotation above. */\n    transition:\n      inline-size var(--vectis-duration-fast) var(--vectis-ease-default),\n      block-size var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /*\n   * Only the DOT's own size changes. Redefining the numeral size variable here would also move\n   * the radius derived from it, and with it the hand's length and the position of both circles.\n   */\n  .v-time-picker-hand[data-minor]::before {\n    inline-size: var(--vectis-control-size-time-picker-hand-minor);\n    block-size: var(--vectis-control-size-time-picker-hand-minor);\n  }\n\n  .v-time-picker-center {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    translate: -50% -50%;\n    inline-size: var(--vectis-control-size-time-picker-center);\n    block-size: var(--vectis-control-size-time-picker-center);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--vectis-color-accent);\n  }\n\n  /* Neither state is a pointer target. A read-only clock is still read, so it keeps the\n     ordinary cursor; a disabled one refuses. */\n  .v-time-picker[data-readonly] .v-time-picker-face {\n    cursor: default;\n  }\n\n  .v-time-picker[data-disabled] .v-time-picker-face {\n    cursor: not-allowed;\n  }\n\n  /*\n   * The whole block sits after the rules it overrides, every one of them at the same\n   * specificity: this is one sheet, so its own order is what settles them.\n   */\n  .v-time-picker[data-disabled] .v-time-picker-hand,\n  .v-time-picker[data-disabled] .v-time-picker-hand::before,\n  .v-time-picker[data-disabled] .v-time-picker-center {\n    background: var(--vectis-color-border-strong);\n  }\n\n  .v-time-picker[data-disabled] .v-time-picker-sep,\n  .v-time-picker[data-disabled] .v-time-picker-number,\n  .v-time-picker[data-disabled] .v-time-picker-number[data-selected] {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-time-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-time-picker-hand::before {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VTimeline/VTimeline.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-timeline{--timeline-dot:var(--vectis-control-size-timeline-dot-md);--timeline-icon:var(--vectis-control-size-timeline-icon-md);--timeline-gutter:var(--vectis-space-3);--timeline-gap:var(--vectis-space-6);font-family:var(--vectis-text-family);color:var(--vectis-color-text)}.v-timeline[data-size=sm]{--timeline-dot:var(--vectis-control-size-timeline-dot-sm);--timeline-icon:var(--vectis-control-size-timeline-icon-sm);--timeline-gutter:var(--vectis-space-2);--timeline-gap:var(--vectis-space-4)}.v-timeline[data-layout=split],.v-timeline[data-layout=alternate]{container:v-timeline/inline-size}.v-timeline-list{margin:0;padding:0;list-style:none;display:grid}.v-timeline[data-orientation=vertical]>.v-timeline-list{column-gap:var(--timeline-gutter);grid-template-columns:[marker-start]auto[marker-end main-start]minmax(0,1fr)[main-end]}.v-timeline[data-orientation=horizontal]>.v-timeline-list{grid-auto-flow:column;grid-auto-columns:minmax(var(--vectis-control-size-timeline-item-min), 1fr);border-radius:var(--vectis-radius-interactive);grid-template-rows:repeat(4,auto);overflow-x:auto}.v-timeline-list:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}@container v-timeline (width>30rem){.v-timeline[data-layout=split]>.v-timeline-list{grid-template-columns:[time-start]fit-content(33%)[time-end marker-start]auto[marker-end main-start]minmax(0,1fr)[main-end]}}@container v-timeline (width>36rem){.v-timeline[data-layout=alternate]>.v-timeline-list{grid-template-columns:[time-start]minmax(0,1fr)[time-end marker-start]auto[marker-end main-start]minmax(0,1fr)[main-end]}}}

package/dist/components/VTimeline/VTimeline.d.ts

@@ -0,0 +1,59 @@
+import { TimelineHeadingLevel } from './context.js';
+/** Whether the events run down the page or across it. */
+export type TimelineOrientation = 'vertical' | 'horizontal';
+/**
+ * Where a vertical timeline puts the date: above the title (`stacked`), in a column of its own
+ * across the line (`split`), or across the line from content that alternates sides
+ * (`alternate`).
+ */
+export type TimelineLayout = 'stacked' | 'split' | 'alternate';
+/** The density of the timeline. */
+export type TimelineSize = 'sm' | 'md';
+interface TimelineProps {
+    /**
+     * Whether the events run down the page (`vertical`) or across it (`horizontal`). A horizontal
+     * timeline scrolls when its events no longer fit.
+     */
+    orientation?: TimelineOrientation;
+    /**
+     * Where a vertical timeline puts the date: above the title (`stacked`), in a column across the
+     * line (`split`), or across the line from content that alternates sides (`alternate`). The
+     * last two fall back to `stacked` in a narrow space.
+     */
+    layout?: TimelineLayout;
+    /** The density: `sm` tightens the spacing, the markers and the content text. */
+    size?: TimelineSize;
+    /**
+     * Renders the titles of the events as headings of this level, without changing how they look.
+     * Left out, they are paragraphs.
+     */
+    headingLevel?: TimelineHeadingLevel;
+    /** The locale the dates are written in. Left out, the design system locale applies. */
+    locale?: string;
+    /**
+     * How a day or a moment is written, as `Intl.DateTimeFormat` options. Years and months keep
+     * their own format. Set `timeZone` when the page is rendered on a server and a date carries an
+     * offset, or the server's time zone would be the one shown.
+     */
+    formatOptions?: Intl.DateTimeFormatOptions;
+}
+type __VLS_Slots = {
+    /** The `<VTimelineItem>`s, oldest or newest first as the story reads best. */
+    default?(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<TimelineProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TimelineProps> & Readonly<{}>, {
+    size: TimelineSize;
+    layout: TimelineLayout;
+    orientation: TimelineOrientation;
+    formatOptions: Intl.DateTimeFormatOptions;
+    locale: string;
+    headingLevel: TimelineHeadingLevel;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VTimeline/VTimeline.js

@@ -0,0 +1,9 @@
+import './VTimeline.css';
+import e from "./VTimeline.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                          */
+//#region src/components/VTimeline/VTimeline.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VTimeline.js.map

package/dist/components/VTimeline/VTimeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VTimeline.js","names":[],"sources":["../../../src/components/VTimeline/VTimeline.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * An ordered list of dated events, each a VTimelineItem: a marker on a line, a date, a title and\n * content of its own. The root is a wrapper, the size container of the side-by-side layouts;\n * attributes other than `class` and `style` go to the list.\n */\nimport { provide } from 'vue'\n\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { timelineKey, type TimelineHeadingLevel } from './context'\n\ndefineOptions({ inheritAttrs: false })\n\n/** Whether the events run down the page or across it. */\nexport type TimelineOrientation = 'vertical' | 'horizontal'\n\n/**\n * Where a vertical timeline puts the date: above the title (`stacked`), in a column of its own\n * across the line (`split`), or across the line from content that alternates sides\n * (`alternate`).\n */\nexport type TimelineLayout = 'stacked' | 'split' | 'alternate'\n\n/** The density of the timeline. */\nexport type TimelineSize = 'sm' | 'md'\n\ninterface TimelineProps {\n  /**\n   * Whether the events run down the page (`vertical`) or across it (`horizontal`). A horizontal\n   * timeline scrolls when its events no longer fit.\n   */\n  orientation?: TimelineOrientation\n  /**\n   * Where a vertical timeline puts the date: above the title (`stacked`), in a column across the\n   * line (`split`), or across the line from content that alternates sides (`alternate`). The\n   * last two fall back to `stacked` in a narrow space.\n   */\n  layout?: TimelineLayout\n  /** The density: `sm` tightens the spacing, the markers and the content text. */\n  size?: TimelineSize\n  /**\n   * Renders the titles of the events as headings of this level, without changing how they look.\n   * Left out, they are paragraphs.\n   */\n  headingLevel?: TimelineHeadingLevel\n  /** The locale the dates are written in. Left out, the design system locale applies. */\n  locale?: string\n  /**\n   * How a day or a moment is written, as `Intl.DateTimeFormat` options. Years and months keep\n   * their own format. Set `timeZone` when the page is rendered on a server and a date carries an\n   * offset, or the server's time zone would be the one shown.\n   */\n  formatOptions?: Intl.DateTimeFormatOptions\n}\n\nconst props = withDefaults(defineProps<TimelineProps>(), {\n  orientation: 'vertical',\n  layout: 'stacked',\n  size: 'md',\n  headingLevel: undefined,\n  locale: undefined,\n  formatOptions: undefined,\n})\n\ndefineSlots<{\n  /** The `<VTimelineItem>`s, oldest or newest first as the story reads best. */\n  default?(): unknown\n}>()\n\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nprovide(timelineKey, {\n  get orientation() {\n    return props.orientation\n  },\n  get layout() {\n    return props.layout\n  },\n  get headingLevel() {\n    return props.headingLevel\n  },\n  get locale() {\n    return props.locale\n  },\n  get formatOptions() {\n    return props.formatOptions\n  },\n})\n</script>\n\n<template>\n  <div\n    :class=\"['v-timeline', rootClass]\"\n    :style=\"rootStyle\"\n    :data-orientation=\"orientation\"\n    :data-layout=\"orientation === 'vertical' ? layout : undefined\"\n    :data-size=\"size\"\n  >\n    <!--\n      A horizontal list scrolls, and its events may hold nothing focusable: the list itself is\n      the tab stop that lets a keyboard scroll it.\n    -->\n    <ol\n      class=\"v-timeline-list\"\n      :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n      v-bind=\"forwardedAttrs\"\n    >\n      <slot />\n    </ol>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-timeline {\n    --timeline-dot: var(--vectis-control-size-timeline-dot-md);\n    --timeline-icon: var(--vectis-control-size-timeline-icon-md);\n    --timeline-gutter: var(--vectis-space-3);\n    --timeline-gap: var(--vectis-space-6);\n\n    font-family: var(--vectis-text-family);\n    color: var(--vectis-color-text);\n  }\n\n  .v-timeline[data-size='sm'] {\n    --timeline-dot: var(--vectis-control-size-timeline-dot-sm);\n    --timeline-icon: var(--vectis-control-size-timeline-icon-sm);\n    --timeline-gutter: var(--vectis-space-2);\n    --timeline-gap: var(--vectis-space-4);\n  }\n\n  /*\n   * The side-by-side layouts make the wrapper a size container, which is what lets them fall back\n   * to `stacked` below a width. It therefore takes its width from its parent, never from its\n   * events: in a row, give it a `flex` basis of its own.\n   */\n  .v-timeline[data-layout='split'],\n  .v-timeline[data-layout='alternate'] {\n    container: v-timeline / inline-size;\n  }\n\n  .v-timeline-list {\n    display: grid;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  /*\n   * The events are subgrids of the list: the marker column is as wide as the widest marker, so\n   * the line runs straight through dots and badges alike.\n   */\n  .v-timeline[data-orientation='vertical'] > .v-timeline-list {\n    grid-template-columns: [marker-start] auto [marker-end main-start] minmax(0, 1fr) [main-end];\n    column-gap: var(--timeline-gutter);\n  }\n\n  /*\n   * Across the page, the rows are shared instead: markers, dates, titles and contents line up\n   * from one event to the next.\n   */\n  .v-timeline[data-orientation='horizontal'] > .v-timeline-list {\n    grid-auto-flow: column;\n    grid-auto-columns: minmax(var(--vectis-control-size-timeline-item-min), 1fr);\n    grid-template-rows: repeat(4, auto);\n    overflow-x: auto;\n    border-radius: var(--vectis-radius-interactive);\n  }\n\n  .v-timeline-list: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 thresholds are literals, a container query accepting no variables. The date column of\n   * `split` takes what its longest date needs, up to a third of the width.\n   */\n  @container v-timeline (width > 30rem) {\n    .v-timeline[data-layout='split'] > .v-timeline-list {\n      grid-template-columns:\n        [time-start] fit-content(33%) [time-end marker-start] auto [marker-end main-start]\n        minmax(0, 1fr) [main-end];\n    }\n  }\n\n  /* VTimelineItem repeats both thresholds: keep them in step. */\n  @container v-timeline (width > 36rem) {\n    .v-timeline[data-layout='alternate'] > .v-timeline-list {\n      grid-template-columns:\n        [time-start] minmax(0, 1fr) [time-end marker-start] auto [marker-end main-start]\n        minmax(0, 1fr) [main-end];\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VTimeline/VTimeline.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,53 @@
+import { useRootAttrs as e } from "../../composables/useRootAttrs.js";
+import { timelineKey as t } from "./context.js";
+import { createElementBlock as n, createElementVNode as r, defineComponent as i, mergeProps as a, normalizeClass as o, normalizeStyle as s, openBlock as c, provide as l, renderSlot as u, unref as d } from "vue";
+//#region src/components/VTimeline/VTimeline.vue?vue&type=script&setup=true&lang.ts
+var f = [
+	"data-orientation",
+	"data-layout",
+	"data-size"
+], p = ["tabindex"], m = /*@__PURE__*/ i({
+	inheritAttrs: !1,
+	__name: "VTimeline",
+	props: {
+		orientation: { default: "vertical" },
+		layout: { default: "stacked" },
+		size: { default: "md" },
+		headingLevel: { default: void 0 },
+		locale: { default: void 0 },
+		formatOptions: { default: void 0 }
+	},
+	setup(i) {
+		let m = i, { rootClass: h, rootStyle: g, forwardedAttrs: _ } = e();
+		return l(t, {
+			get orientation() {
+				return m.orientation;
+			},
+			get layout() {
+				return m.layout;
+			},
+			get headingLevel() {
+				return m.headingLevel;
+			},
+			get locale() {
+				return m.locale;
+			},
+			get formatOptions() {
+				return m.formatOptions;
+			}
+		}), (e, t) => (c(), n("div", {
+			class: o(["v-timeline", d(h)]),
+			style: s(d(g)),
+			"data-orientation": i.orientation,
+			"data-layout": i.orientation === "vertical" ? i.layout : void 0,
+			"data-size": i.size
+		}, [r("ol", a({
+			class: "v-timeline-list",
+			tabindex: i.orientation === "horizontal" ? 0 : void 0
+		}, d(_)), [u(e.$slots, "default")], 16, p)], 14, f));
+	}
+});
+//#endregion
+export { m as default };
+
+//# sourceMappingURL=VTimeline.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VTimeline.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VTimeline/VTimeline.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * An ordered list of dated events, each a VTimelineItem: a marker on a line, a date, a title and\n * content of its own. The root is a wrapper, the size container of the side-by-side layouts;\n * attributes other than `class` and `style` go to the list.\n */\nimport { provide } from 'vue'\n\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { timelineKey, type TimelineHeadingLevel } from './context'\n\ndefineOptions({ inheritAttrs: false })\n\n/** Whether the events run down the page or across it. */\nexport type TimelineOrientation = 'vertical' | 'horizontal'\n\n/**\n * Where a vertical timeline puts the date: above the title (`stacked`), in a column of its own\n * across the line (`split`), or across the line from content that alternates sides\n * (`alternate`).\n */\nexport type TimelineLayout = 'stacked' | 'split' | 'alternate'\n\n/** The density of the timeline. */\nexport type TimelineSize = 'sm' | 'md'\n\ninterface TimelineProps {\n  /**\n   * Whether the events run down the page (`vertical`) or across it (`horizontal`). A horizontal\n   * timeline scrolls when its events no longer fit.\n   */\n  orientation?: TimelineOrientation\n  /**\n   * Where a vertical timeline puts the date: above the title (`stacked`), in a column across the\n   * line (`split`), or across the line from content that alternates sides (`alternate`). The\n   * last two fall back to `stacked` in a narrow space.\n   */\n  layout?: TimelineLayout\n  /** The density: `sm` tightens the spacing, the markers and the content text. */\n  size?: TimelineSize\n  /**\n   * Renders the titles of the events as headings of this level, without changing how they look.\n   * Left out, they are paragraphs.\n   */\n  headingLevel?: TimelineHeadingLevel\n  /** The locale the dates are written in. Left out, the design system locale applies. */\n  locale?: string\n  /**\n   * How a day or a moment is written, as `Intl.DateTimeFormat` options. Years and months keep\n   * their own format. Set `timeZone` when the page is rendered on a server and a date carries an\n   * offset, or the server's time zone would be the one shown.\n   */\n  formatOptions?: Intl.DateTimeFormatOptions\n}\n\nconst props = withDefaults(defineProps<TimelineProps>(), {\n  orientation: 'vertical',\n  layout: 'stacked',\n  size: 'md',\n  headingLevel: undefined,\n  locale: undefined,\n  formatOptions: undefined,\n})\n\ndefineSlots<{\n  /** The `<VTimelineItem>`s, oldest or newest first as the story reads best. */\n  default?(): unknown\n}>()\n\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nprovide(timelineKey, {\n  get orientation() {\n    return props.orientation\n  },\n  get layout() {\n    return props.layout\n  },\n  get headingLevel() {\n    return props.headingLevel\n  },\n  get locale() {\n    return props.locale\n  },\n  get formatOptions() {\n    return props.formatOptions\n  },\n})\n</script>\n\n<template>\n  <div\n    :class=\"['v-timeline', rootClass]\"\n    :style=\"rootStyle\"\n    :data-orientation=\"orientation\"\n    :data-layout=\"orientation === 'vertical' ? layout : undefined\"\n    :data-size=\"size\"\n  >\n    <!--\n      A horizontal list scrolls, and its events may hold nothing focusable: the list itself is\n      the tab stop that lets a keyboard scroll it.\n    -->\n    <ol\n      class=\"v-timeline-list\"\n      :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n      v-bind=\"forwardedAttrs\"\n    >\n      <slot />\n    </ol>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-timeline {\n    --timeline-dot: var(--vectis-control-size-timeline-dot-md);\n    --timeline-icon: var(--vectis-control-size-timeline-icon-md);\n    --timeline-gutter: var(--vectis-space-3);\n    --timeline-gap: var(--vectis-space-6);\n\n    font-family: var(--vectis-text-family);\n    color: var(--vectis-color-text);\n  }\n\n  .v-timeline[data-size='sm'] {\n    --timeline-dot: var(--vectis-control-size-timeline-dot-sm);\n    --timeline-icon: var(--vectis-control-size-timeline-icon-sm);\n    --timeline-gutter: var(--vectis-space-2);\n    --timeline-gap: var(--vectis-space-4);\n  }\n\n  /*\n   * The side-by-side layouts make the wrapper a size container, which is what lets them fall back\n   * to `stacked` below a width. It therefore takes its width from its parent, never from its\n   * events: in a row, give it a `flex` basis of its own.\n   */\n  .v-timeline[data-layout='split'],\n  .v-timeline[data-layout='alternate'] {\n    container: v-timeline / inline-size;\n  }\n\n  .v-timeline-list {\n    display: grid;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  /*\n   * The events are subgrids of the list: the marker column is as wide as the widest marker, so\n   * the line runs straight through dots and badges alike.\n   */\n  .v-timeline[data-orientation='vertical'] > .v-timeline-list {\n    grid-template-columns: [marker-start] auto [marker-end main-start] minmax(0, 1fr) [main-end];\n    column-gap: var(--timeline-gutter);\n  }\n\n  /*\n   * Across the page, the rows are shared instead: markers, dates, titles and contents line up\n   * from one event to the next.\n   */\n  .v-timeline[data-orientation='horizontal'] > .v-timeline-list {\n    grid-auto-flow: column;\n    grid-auto-columns: minmax(var(--vectis-control-size-timeline-item-min), 1fr);\n    grid-template-rows: repeat(4, auto);\n    overflow-x: auto;\n    border-radius: var(--vectis-radius-interactive);\n  }\n\n  .v-timeline-list: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 thresholds are literals, a container query accepting no variables. The date column of\n   * `split` takes what its longest date needs, up to a third of the width.\n   */\n  @container v-timeline (width > 30rem) {\n    .v-timeline[data-layout='split'] > .v-timeline-list {\n      grid-template-columns:\n        [time-start] fit-content(33%) [time-end marker-start] auto [marker-end main-start]\n        minmax(0, 1fr) [main-end];\n    }\n  }\n\n  /* VTimelineItem repeats both thresholds: keep them in step. */\n  @container v-timeline (width > 36rem) {\n    .v-timeline[data-layout='alternate'] > .v-timeline-list {\n      grid-template-columns:\n        [time-start] minmax(0, 1fr) [time-end marker-start] auto [marker-end main-start]\n        minmax(0, 1fr) [main-end];\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAwDA,IAAM,IAAQ,GAcR,EAAE,cAAW,cAAW,sBAAmB,EAAa;SAE9D,EAAQ,GAAa;GACnB,IAAI,cAAc;IAChB,OAAO,EAAM;GACf;GACA,IAAI,SAAS;IACX,OAAO,EAAM;GACf;GACA,IAAI,eAAe;IACjB,OAAO,EAAM;GACf;GACA,IAAI,SAAS;IACX,OAAO,EAAM;GACf;GACA,IAAI,gBAAgB;IAClB,OAAO,EAAM;GACf;EACF,CAAC,mBAIC,EAkBM,OAAA;GAjBH,OAAK,EAAA,CAAA,cAAiB,EAAA,CAAA,CAAS,CAAA;GAC/B,OAAK,EAAE,EAAA,CAAA,CAAS;GAChB,oBAAkB,EAAA;GAClB,eAAa,EAAA,gBAAW,aAAkB,EAAA,SAAS,KAAA;GACnD,aAAW,EAAA;MAMZ,EAMK,MANL,EAMK;GALH,OAAM;GACL,UAAU,EAAA,gBAAW,eAAA,IAAwB,KAAA;KACtC,EAAA,CAAA,CAAc,GAAA,CAEtB,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,IAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}

package/dist/components/VTimeline/VTimelineItem.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-timeline-item{--timeline-marker:var(--timeline-dot);--timeline-line:calc(var(--vectis-text-label-size) * var(--vectis-text-label-leading));--timeline-overflow:max(0px, (var(--timeline-marker) - var(--timeline-line)) / 2);--timeline-dot-color:var(--tone-bg-solid);min-inline-size:0;display:grid}.v-timeline-item:last-child{--timeline-gap:0px}.v-timeline-item[data-orientation=vertical]:first-child{margin-block-start:var(--timeline-overflow)}.v-timeline-item[data-orientation=vertical]:last-child{--timeline-gap:var(--timeline-overflow)}.v-timeline-item[data-marker=icon],.v-timeline-item[data-marker=custom]{--timeline-marker:var(--timeline-icon)}.v-timeline-item[data-tone=neutral]{--timeline-dot-color:var(--vectis-color-text-muted)}.v-timeline-item[data-orientation=vertical]{grid-column:1/-1;grid-template-columns:subgrid;grid-template-rows:auto auto auto var(--timeline-gap)}.v-timeline-marker{min-inline-size:var(--timeline-marker);justify-content:center;align-items:unsafe center;display:flex}.v-timeline-item[data-orientation=vertical]>.v-timeline-marker{block-size:var(--timeline-line);grid-area:1/marker}.v-timeline-dot{box-sizing:border-box;inline-size:var(--timeline-dot);block-size:var(--timeline-dot);border:calc(var(--timeline-dot) / 2) solid var(--timeline-dot-color);border-radius:var(--vectis-radius-full)}.v-timeline-icon{--vectis-icon-size:calc(var(--timeline-icon) / 2);box-sizing:border-box;inline-size:var(--timeline-icon);block-size:var(--timeline-icon);border:1px solid var(--tone-border-soft);border-radius:var(--vectis-radius-full);background:var(--tone-bg-soft);color:var(--tone-text-tinted);place-items:center;display:grid}.v-timeline-connector{border-color:var(--vectis-color-border);border-style:solid;border-width:0}.v-timeline-item:last-child>.v-timeline-connector{display:none}.v-timeline-item[data-orientation=vertical]>.v-timeline-connector{margin-block:calc(var(--vectis-space-1) + var(--timeline-overflow)) var(--vectis-space-1);border-inline-start-width:1px;grid-area:2/marker/-1;justify-self:center}.v-timeline-item[data-orientation=vertical]:has(+:is([data-marker=icon],[data-marker=custom]))>.v-timeline-connector{margin-block-end:calc(var(--vectis-space-1) + max(0px, var(--timeline-icon) / 2 - var(--timeline-line) / 2))}.v-timeline-item[data-orientation=vertical]>:is(.v-timeline-time,.v-timeline-title,.v-timeline-content){grid-column:main}.v-timeline-item[data-orientation=vertical]>.v-timeline-connector+*{min-block-size:var(--timeline-line);align-content:center}.v-timeline-time{color:var(--vectis-color-text-muted);font-size:var(--vectis-text-caption-size);font-weight:var(--vectis-text-caption-weight);line-height:var(--vectis-text-caption-leading);font-variant-numeric:tabular-nums;display:block}.v-timeline-title{color:var(--vectis-color-text);font-size:var(--vectis-text-label-size);font-weight:var(--vectis-text-label-weight);line-height:var(--vectis-text-label-leading);margin:0}.v-timeline-content{color:var(--vectis-color-text-muted);font-size:var(--vectis-text-body-md-size);font-weight:var(--vectis-text-body-md-weight);line-height:var(--vectis-text-body-md-leading)}.v-timeline-item>.v-timeline-title+.v-timeline-content{margin-block-start:var(--vectis-space-1)}.v-timeline[data-size=sm]>.v-timeline-list>.v-timeline-item>.v-timeline-content{font-size:var(--vectis-text-body-sm-size);font-weight:var(--vectis-text-body-sm-weight);line-height:var(--vectis-text-body-sm-leading)}.v-timeline-item[data-orientation=horizontal]{grid-row:1/-1;grid-template-rows:subgrid;grid-template-columns:auto minmax(0,1fr)}.v-timeline-item[data-orientation=horizontal]>.v-timeline-marker{block-size:var(--timeline-marker);grid-area:1/1;align-self:center}.v-timeline-item[data-orientation=horizontal]>.v-timeline-connector{margin-inline:var(--vectis-space-1);border-block-start-width:1px;grid-area:1/2;align-self:center}.v-timeline-item[data-orientation=horizontal]>.v-timeline-time{grid-row:2}.v-timeline-item[data-orientation=horizontal]>.v-timeline-title{grid-row:3}.v-timeline-item[data-orientation=horizontal]>.v-timeline-content{grid-row:4}.v-timeline-item[data-orientation=horizontal]>:is(.v-timeline-time,.v-timeline-title,.v-timeline-content){grid-column:1/-1;padding-inline-end:var(--timeline-gap)}.v-timeline-item[data-orientation=horizontal]>.v-timeline-connector+*{margin-block-start:var(--timeline-gutter)}@container v-timeline (width>30rem){.v-timeline-item[data-layout=split]>.v-timeline-time{text-align:end;grid-area:1/time}.v-timeline-item[data-layout=split]>.v-timeline-time+*{min-block-size:var(--timeline-line);align-content:center}}@container v-timeline (width>36rem){.v-timeline-item[data-layout=alternate]>.v-timeline-time{text-align:end;grid-area:1/time}.v-timeline-item[data-layout=alternate]>.v-timeline-time+*{min-block-size:var(--timeline-line);align-content:center}.v-timeline-item[data-layout=alternate]:nth-child(2n)>.v-timeline-time{text-align:start;grid-column:main}.v-timeline-item[data-layout=alternate]:nth-child(2n)>:is(.v-timeline-title,.v-timeline-content){text-align:end;grid-column:time}}}

package/dist/components/VTimeline/VTimelineItem.d.ts

@@ -0,0 +1,48 @@
+import { IconSource } from '../VIcon/types.js';
+/** The colour of the marker. */
+export type TimelineItemTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning';
+interface TimelineItemProps {
+    /**
+     * When the event happened, as an ISO string: a year (`2019`), a month (`2026-10`), a day
+     * (`2026-10-06`) or a moment (`2026-10-06T14:30`). It is written out in the locale, at that
+     * precision, inside a `<time datetime>`.
+     */
+    datetime?: string;
+    /**
+     * Visible text replacing the written-out date, such as "2 hours ago". The `<time>` keeps
+     * `datetime` for machines.
+     */
+    timeText?: string;
+    /** What happened, in a few words. The `#title` slot replaces it. */
+    title?: string;
+    /** The colour of the marker. */
+    tone?: TimelineItemTone;
+    /**
+     * An icon in a round badge on the line, in place of the dot: an icon name, or an explicit
+     * render (the VIcon contract). The `#marker` slot replaces it.
+     */
+    icon?: IconSource;
+}
+type __VLS_Slots = {
+    /** The details of the event: text, links, buttons. */
+    default?(): unknown;
+    /** Replaces the `title` prop with content of your own. */
+    title?(): unknown;
+    /** Replaces the dot or the icon badge on the line, an avatar for instance. It is decoration. */
+    marker?(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<TimelineItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TimelineItemProps> & Readonly<{}>, {
+    title: string;
+    tone: TimelineItemTone;
+    icon: IconSource;
+    datetime: string;
+    timeText: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VTimeline/VTimelineItem.js

@@ -0,0 +1,9 @@
+import './VTimelineItem.css';
+import e from "./VTimelineItem.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                              */
+//#region src/components/VTimeline/VTimelineItem.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VTimelineItem.js.map

package/dist/components/VTimeline/VTimelineItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VTimelineItem.js","names":[],"sources":["../../../src/components/VTimeline/VTimelineItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * One event of a VTimeline: a marker on the line, a date, a title and content. The marker is\n * decoration, hidden from assistive technology: what the tone means must also be said in words.\n */\nimport { computed, inject } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport { useResolvedLocale } from '../../i18n/state'\nimport { timelineKey } from './context'\nimport { formatTimelineDate } from './datetime'\n\n/** The colour of the marker. */\nexport type TimelineItemTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n\ninterface TimelineItemProps {\n  /**\n   * When the event happened, as an ISO string: a year (`2019`), a month (`2026-10`), a day\n   * (`2026-10-06`) or a moment (`2026-10-06T14:30`). It is written out in the locale, at that\n   * precision, inside a `<time datetime>`.\n   */\n  datetime?: string\n  /**\n   * Visible text replacing the written-out date, such as \"2 hours ago\". The `<time>` keeps\n   * `datetime` for machines.\n   */\n  timeText?: string\n  /** What happened, in a few words. The `#title` slot replaces it. */\n  title?: string\n  /** The colour of the marker. */\n  tone?: TimelineItemTone\n  /**\n   * An icon in a round badge on the line, in place of the dot: an icon name, or an explicit\n   * render (the VIcon contract). The `#marker` slot replaces it.\n   */\n  icon?: IconSource\n}\n\nconst props = withDefaults(defineProps<TimelineItemProps>(), {\n  datetime: undefined,\n  timeText: undefined,\n  title: undefined,\n  tone: 'accent',\n  icon: undefined,\n})\n\ndefineSlots<{\n  /** The details of the event: text, links, buttons. */\n  default?(): unknown\n  /** Replaces the `title` prop with content of your own. */\n  title?(): unknown\n  /** Replaces the dot or the icon badge on the line, an avatar for instance. It is decoration. */\n  marker?(): unknown\n}>()\n\nconst timeline = inject(timelineKey, undefined)\nconst locale = useResolvedLocale(() => timeline?.locale)\n\nconst titleTag = computed(() => (timeline?.headingLevel ? `h${timeline.headingLevel}` : 'p'))\n\nconst displayTime = computed(() => {\n  if (props.timeText) return props.timeText\n  if (!props.datetime) return ''\n  return formatTimelineDate(props.datetime, locale.value, timeline?.formatOptions)\n})\n</script>\n\n<template>\n  <li\n    class=\"v-timeline-item v-tone\"\n    :data-tone=\"tone\"\n    :data-marker=\"$slots.marker ? 'custom' : icon ? 'icon' : 'dot'\"\n    :data-orientation=\"timeline?.orientation ?? 'vertical'\"\n    :data-layout=\"timeline?.layout ?? 'stacked'\"\n  >\n    <span class=\"v-timeline-marker\" aria-hidden=\"true\">\n      <slot name=\"marker\">\n        <span v-if=\"icon\" class=\"v-timeline-icon\"><VIcon v-bind=\"iconProps(icon)\" /></span>\n        <span v-else class=\"v-timeline-dot\" />\n      </slot>\n    </span>\n    <span class=\"v-timeline-connector\" aria-hidden=\"true\" />\n    <component\n      :is=\"datetime ? 'time' : 'span'\"\n      v-if=\"displayTime\"\n      class=\"v-timeline-time\"\n      :datetime=\"datetime\"\n    >\n      {{ displayTime }}\n    </component>\n    <component :is=\"titleTag\" v-if=\"$slots.title || title\" class=\"v-timeline-title\">\n      <slot name=\"title\">{{ title }}</slot>\n    </component>\n    <div v-if=\"$slots.default\" class=\"v-timeline-content\">\n      <slot />\n    </div>\n  </li>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The parts are placed on the grid of the list: the marker in the first row, the line under it\n   * down to the end of the event, the texts beside it one row after another, and a last row for\n   * the space before the next event, which the line runs through.\n   */\n  .v-timeline-item {\n    --timeline-marker: var(--timeline-dot);\n    /*\n     * The first row is as tall as a title line, and the marker is centred on it. A badge taller\n     * than the line reaches above and below it by `--timeline-overflow`, which the line and the\n     * outer events make room for, so that the texts keep the same spacing beside a dot or a badge.\n     */\n    --timeline-line: calc(var(--vectis-text-label-size) * var(--vectis-text-label-leading));\n    --timeline-overflow: max(0px, (var(--timeline-marker) - var(--timeline-line)) / 2);\n    --timeline-dot-color: var(--tone-bg-solid);\n\n    display: grid;\n    min-inline-size: 0;\n  }\n\n  .v-timeline-item:last-child {\n    --timeline-gap: 0px;\n  }\n\n  .v-timeline-item[data-orientation='vertical']:first-child {\n    margin-block-start: var(--timeline-overflow);\n  }\n\n  .v-timeline-item[data-orientation='vertical']:last-child {\n    --timeline-gap: var(--timeline-overflow);\n  }\n\n  .v-timeline-item[data-marker='icon'],\n  .v-timeline-item[data-marker='custom'] {\n    --timeline-marker: var(--timeline-icon);\n  }\n\n  .v-timeline-item[data-tone='neutral'] {\n    --timeline-dot-color: var(--vectis-color-text-muted);\n  }\n\n  .v-timeline-item[data-orientation='vertical'] {\n    grid-column: 1 / -1;\n    grid-template-columns: subgrid;\n    grid-template-rows: auto auto auto var(--timeline-gap);\n  }\n\n  /*\n   * A flex line keeps the height of the marker, where a grid track would grow to fit a taller\n   * badge; `unsafe` then centres the badge on that height rather than hanging it from its top.\n   */\n  .v-timeline-marker {\n    display: flex;\n    align-items: unsafe center;\n    justify-content: center;\n    min-inline-size: var(--timeline-marker);\n  }\n\n  .v-timeline-item[data-orientation='vertical'] > .v-timeline-marker {\n    grid-column: marker;\n    grid-row: 1;\n    block-size: var(--timeline-line);\n  }\n\n  /* A border rather than a fill draws the dot and the line, which forced colours keep. */\n  .v-timeline-dot {\n    box-sizing: border-box;\n    inline-size: var(--timeline-dot);\n    block-size: var(--timeline-dot);\n    border: calc(var(--timeline-dot) / 2) solid var(--timeline-dot-color);\n    border-radius: var(--vectis-radius-full);\n  }\n\n  .v-timeline-icon {\n    --vectis-icon-size: calc(var(--timeline-icon) / 2);\n\n    display: grid;\n    place-items: center;\n    box-sizing: border-box;\n    inline-size: var(--timeline-icon);\n    block-size: var(--timeline-icon);\n    border: 1px solid var(--tone-border-soft);\n    border-radius: var(--vectis-radius-full);\n    background: var(--tone-bg-soft);\n    color: var(--tone-text-tinted);\n  }\n\n  .v-timeline-connector {\n    border-color: var(--vectis-color-border);\n    border-style: solid;\n    border-width: 0;\n  }\n\n  .v-timeline-item:last-child > .v-timeline-connector {\n    display: none;\n  }\n\n  /* From under the marker down to the next one, stopping a little short of both. */\n  .v-timeline-item[data-orientation='vertical'] > .v-timeline-connector {\n    grid-column: marker;\n    grid-row: 2 / -1;\n    justify-self: center;\n    margin-block: calc(var(--vectis-space-1) + var(--timeline-overflow)) var(--vectis-space-1);\n    border-inline-start-width: 1px;\n  }\n\n  .v-timeline-item[data-orientation='vertical']:has(\n      + :is([data-marker='icon'], [data-marker='custom'])\n    )\n    > .v-timeline-connector {\n    /* Halved term by term: cssnano's calc parser rejects a bracketed group inside max(). */\n    margin-block-end: calc(\n      var(--vectis-space-1) + max(0px, var(--timeline-icon) / 2 - var(--timeline-line) / 2)\n    );\n  }\n\n  .v-timeline-item[data-orientation='vertical']\n    > :is(.v-timeline-time, .v-timeline-title, .v-timeline-content) {\n    grid-column: main;\n  }\n\n  /* The first text beside the marker is at least a title line high, its first line centred. */\n  .v-timeline-item[data-orientation='vertical'] > .v-timeline-connector + * {\n    min-block-size: var(--timeline-line);\n    align-content: center;\n  }\n\n  .v-timeline-time {\n    display: block;\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-text-caption-weight);\n    line-height: var(--vectis-text-caption-leading);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-timeline-title {\n    margin: 0;\n    color: var(--vectis-color-text);\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-timeline-content {\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-body-md-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n  }\n\n  .v-timeline-item > .v-timeline-title + .v-timeline-content {\n    margin-block-start: var(--vectis-space-1);\n  }\n\n  .v-timeline[data-size='sm'] > .v-timeline-list > .v-timeline-item > .v-timeline-content {\n    font-size: var(--vectis-text-body-sm-size);\n    font-weight: var(--vectis-text-body-sm-weight);\n    line-height: var(--vectis-text-body-sm-leading);\n  }\n\n  /* Across the page: the marker and the line in the first row, the texts under them. */\n  .v-timeline-item[data-orientation='horizontal'] {\n    grid-row: 1 / -1;\n    grid-template-rows: subgrid;\n    grid-template-columns: auto minmax(0, 1fr);\n  }\n\n  .v-timeline-item[data-orientation='horizontal'] > .v-timeline-marker {\n    grid-column: 1;\n    grid-row: 1;\n    align-self: center;\n    block-size: var(--timeline-marker);\n  }\n\n  .v-timeline-item[data-orientation='horizontal'] > .v-timeline-connector {\n    grid-column: 2;\n    grid-row: 1;\n    align-self: center;\n    margin-inline: var(--vectis-space-1);\n    border-block-start-width: 1px;\n  }\n\n  .v-timeline-item[data-orientation='horizontal'] > .v-timeline-time {\n    grid-row: 2;\n  }\n\n  .v-timeline-item[data-orientation='horizontal'] > .v-timeline-title {\n    grid-row: 3;\n  }\n\n  .v-timeline-item[data-orientation='horizontal'] > .v-timeline-content {\n    grid-row: 4;\n  }\n\n  .v-timeline-item[data-orientation='horizontal']\n    > :is(.v-timeline-time, .v-timeline-title, .v-timeline-content) {\n    grid-column: 1 / -1;\n    padding-inline-end: var(--timeline-gap);\n  }\n\n  .v-timeline-item[data-orientation='horizontal'] > .v-timeline-connector + * {\n    margin-block-start: var(--timeline-gutter);\n  }\n\n  /*\n   * Across the line, the date sits in its own column and the title beside the marker takes the\n   * row height too. The thresholds repeat those of VTimeline.\n   */\n  @container v-timeline (width > 30rem) {\n    .v-timeline-item[data-layout='split'] > .v-timeline-time {\n      grid-column: time;\n      grid-row: 1;\n      text-align: end;\n    }\n\n    .v-timeline-item[data-layout='split'] > .v-timeline-time + * {\n      min-block-size: var(--timeline-line);\n      align-content: center;\n    }\n  }\n\n  /* Every other event swaps sides: its date goes after the line, its texts before it. */\n  @container v-timeline (width > 36rem) {\n    .v-timeline-item[data-layout='alternate'] > .v-timeline-time {\n      grid-column: time;\n      grid-row: 1;\n      text-align: end;\n    }\n\n    .v-timeline-item[data-layout='alternate'] > .v-timeline-time + * {\n      min-block-size: var(--timeline-line);\n      align-content: center;\n    }\n\n    .v-timeline-item[data-layout='alternate']:nth-child(even) > .v-timeline-time {\n      grid-column: main;\n      text-align: start;\n    }\n\n    .v-timeline-item[data-layout='alternate']:nth-child(even)\n      > :is(.v-timeline-title, .v-timeline-content) {\n      grid-column: time;\n      text-align: end;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VTimeline/VTimelineItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,70 @@
+import { useResolvedLocale as e } from "../../i18n/state.js";
+import { iconProps as t } from "../VIcon/iconProps.js";
+import n from "../VIcon/VIcon.js";
+import { timelineKey as r } from "./context.js";
+import { formatTimelineDate as i } from "./datetime.js";
+import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, guardReactiveProps as p, inject as m, normalizeProps as h, openBlock as g, renderSlot as _, resolveDynamicComponent as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
+//#region src/components/VTimeline/VTimelineItem.vue?vue&type=script&setup=true&lang.ts
+var S = [
+	"data-tone",
+	"data-marker",
+	"data-orientation",
+	"data-layout"
+], C = {
+	class: "v-timeline-marker",
+	"aria-hidden": "true"
+}, w = {
+	key: 0,
+	class: "v-timeline-icon"
+}, T = {
+	key: 1,
+	class: "v-timeline-dot"
+}, E = {
+	key: 2,
+	class: "v-timeline-content"
+}, D = /*@__PURE__*/ f({
+	__name: "VTimelineItem",
+	props: {
+		datetime: { default: void 0 },
+		timeText: { default: void 0 },
+		title: { default: void 0 },
+		tone: { default: "accent" },
+		icon: { default: void 0 }
+	},
+	setup(f) {
+		let D = f, O = m(r, void 0), k = e(() => O?.locale), A = a(() => O?.headingLevel ? `h${O.headingLevel}` : "p"), j = a(() => D.timeText ? D.timeText : D.datetime ? i(D.datetime, k.value, O?.formatOptions) : "");
+		return (e, r) => (g(), c("li", {
+			class: "v-timeline-item v-tone",
+			"data-tone": f.tone,
+			"data-marker": e.$slots.marker ? "custom" : f.icon ? "icon" : "dot",
+			"data-orientation": b(O)?.orientation ?? "vertical",
+			"data-layout": b(O)?.layout ?? "stacked"
+		}, [
+			l("span", C, [_(e.$slots, "marker", {}, () => [f.icon ? (g(), c("span", w, [d(n, h(p(b(t)(f.icon))), null, 16)])) : (g(), c("span", T))])]),
+			r[0] ||= l("span", {
+				class: "v-timeline-connector",
+				"aria-hidden": "true"
+			}, null, -1),
+			j.value ? (g(), o(v(f.datetime ? "time" : "span"), {
+				key: 0,
+				class: "v-timeline-time",
+				datetime: f.datetime
+			}, {
+				default: x(() => [u(y(j.value), 1)]),
+				_: 1
+			}, 8, ["datetime"])) : s("", !0),
+			e.$slots.title || f.title ? (g(), o(v(A.value), {
+				key: 1,
+				class: "v-timeline-title"
+			}, {
+				default: x(() => [_(e.$slots, "title", {}, () => [u(y(f.title), 1)])]),
+				_: 3
+			})) : s("", !0),
+			e.$slots.default ? (g(), c("div", E, [_(e.$slots, "default")])) : s("", !0)
+		], 8, S));
+	}
+});
+//#endregion
+export { D as default };
+
+//# sourceMappingURL=VTimelineItem.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VTimeline/VTimelineItem.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VTimelineItem.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VTimeline/VTimelineItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * One event of a VTimeline: a marker on the line, a date, a title and content. The marker is\n * decoration, hidden from assistive technology: what the tone means must also be said in words.\n */\nimport { computed, inject } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport { useResolvedLocale } from '../../i18n/state'\nimport { timelineKey } from './context'\nimport { formatTimelineDate } from './datetime'\n\n/** The colour of the marker. */\nexport type TimelineItemTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n\ninterface TimelineItemProps {\n  /**\n   * When the event happened, as an ISO string: a year (`2019`), a month (`2026-10`), a day\n   * (`2026-10-06`) or a moment (`2026-10-06T14:30`). It is written out in the locale, at that\n   * precision, inside a `<time datetime>`.\n   */\n  datetime?: string\n  /**\n   * Visible text replacing the written-out date, such as \"2 hours ago\". The `<time>` keeps\n   * `datetime` for machines.\n   */\n  timeText?: string\n  /** What happened, in a few words. The `#title` slot replaces it. */\n  title?: string\n  /** The colour of the marker. */\n  tone?: TimelineItemTone\n  /**\n   * An icon in a round badge on the line, in place of the dot: an icon name, or an explicit\n   * render (the VIcon contract). The `#marker` slot replaces it.\n   */\n  icon?: IconSource\n}\n\nconst props = withDefaults(defineProps<TimelineItemProps>(), {\n  datetime: undefined,\n  timeText: undefined,\n  title: undefined,\n  tone: 'accent',\n  icon: undefined,\n})\n\ndefineSlots<{\n  /** The details of the event: text, links, buttons. */\n  default?(): unknown\n  /** Replaces the `title` prop with content of your own. */\n  title?(): unknown\n  /** Replaces the dot or the icon badge on the line, an avatar for instance. It is decoration. */\n  marker?(): unknown\n}>()\n\nconst timeline = inject(timelineKey, undefined)\nconst locale = useResolvedLocale(() => timeline?.locale)\n\nconst titleTag = computed(() => (timeline?.headingLevel ? `h${timeline.headingLevel}` : 'p'))\n\nconst displayTime = computed(() => {\n  if (props.timeText) return props.timeText\n  if (!props.datetime) return ''\n  return formatTimelineDate(props.datetime, locale.value, timeline?.formatOptions)\n})\n</script>\n\n<template>\n  <li\n    class=\"v-timeline-item v-tone\"\n    :data-tone=\"tone\"\n    :data-marker=\"$slots.marker ? 'custom' : icon ? 'icon' : 'dot'\"\n    :data-orientation=\"timeline?.orientation ?? 'vertical'\"\n    :data-layout=\"timeline?.layout ?? 'stacked'\"\n  >\n    <span class=\"v-timeline-marker\" aria-hidden=\"true\">\n      <slot name=\"marker\">\n        <span v-if=\"icon\" class=\"v-timeline-icon\"><VIcon v-bind=\"iconProps(icon)\" /></span>\n        <span v-else class=\"v-timeline-dot\" />\n      </slot>\n    </span>\n    <span class=\"v-timeline-connector\" aria-hidden=\"true\" />\n    <component\n      :is=\"datetime ? 'time' : 'span'\"\n      v-if=\"displayTime\"\n      class=\"v-timeline-time\"\n      :datetime=\"datetime\"\n    >\n      {{ displayTime }}\n    </component>\n    <component :is=\"titleTag\" v-if=\"$slots.title || title\" class=\"v-timeline-title\">\n      <slot name=\"title\">{{ title }}</slot>\n    </component>\n    <div v-if=\"$slots.default\" class=\"v-timeline-content\">\n      <slot />\n    </div>\n  </li>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The parts are placed on the grid of the list: the marker in the first row, the line under it\n   * down to the end of the event, the texts beside it one row after another, and a last row for\n   * the space before the next event, which the line runs through.\n   */\n  .v-timeline-item {\n    --timeline-marker: var(--timeline-dot);\n    /*\n     * The first row is as tall as a title line, and the marker is centred on it. A badge taller\n     * than the line reaches above and below it by `--timeline-overflow`, which the line and the\n     * outer events make room for, so that the texts keep the same spacing beside a dot or a badge.\n     */\n    --timeline-line: calc(var(--vectis-text-label-size) * var(--vectis-text-label-leading));\n    --timeline-overflow: max(0px, (var(--timeline-marker) - var(--timeline-line)) / 2);\n    --timeline-dot-color: var(--tone-bg-solid);\n\n    display: grid;\n    min-inline-size: 0;\n  }\n\n  .v-timeline-item:last-child {\n    --timeline-gap: 0px;\n  }\n\n  .v-timeline-item[data-orientation='vertical']:first-child {\n    margin-block-start: var(--timeline-overflow);\n  }\n\n  .v-timeline-item[data-orientation='vertical']:last-child {\n    --timeline-gap: var(--timeline-overflow);\n  }\n\n  .v-timeline-item[data-marker='icon'],\n  .v-timeline-item[data-marker='custom'] {\n    --timeline-marker: var(--timeline-icon);\n  }\n\n  .v-timeline-item[data-tone='neutral'] {\n    --timeline-dot-color: var(--vectis-color-text-muted);\n  }\n\n  .v-timeline-item[data-orientation='vertical'] {\n    grid-column: 1 / -1;\n    grid-template-columns: subgrid;\n    grid-template-rows: auto auto auto var(--timeline-gap);\n  }\n\n  /*\n   * A flex line keeps the height of the marker, where a grid track would grow to fit a taller\n   * badge; `unsafe` then centres the badge on that height rather than hanging it from its top.\n   */\n  .v-timeline-marker {\n    display: flex;\n    align-items: unsafe center;\n    justify-content: center;\n    min-inline-size: var(--timeline-marker);\n  }\n\n  .v-timeline-item[data-orientation='vertical'] > .v-timeline-marker {\n    grid-column: marker;\n    grid-row: 1;\n    block-size: var(--timeline-line);\n  }\n\n  /* A border rather than a fill draws the dot and the line, which forced colours keep. */\n  .v-timeline-dot {\n    box-sizing: border-box;\n    inline-size: var(--timeline-dot);\n    block-size: var(--timeline-dot);\n    border: calc(var(--timeline-dot) / 2) solid var(--timeline-dot-color);\n    border-radius: var(--vectis-radius-full);\n  }\n\n  .v-timeline-icon {\n    --vectis-icon-size: calc(var(--timeline-icon) / 2);\n\n    display: grid;\n    place-items: center;\n    box-sizing: border-box;\n    inline-size: var(--timeline-icon);\n    block-size: var(--timeline-icon);\n    border: 1px solid var(--tone-border-soft);\n    border-radius: var(--vectis-radius-full);\n    background: var(--tone-bg-soft);\n    color: var(--tone-text-tinted);\n  }\n\n  .v-timeline-connector {\n    border-color: var(--vectis-color-border);\n    border-style: solid;\n    border-width: 0;\n  }\n\n  .v-timeline-item:last-child > .v-timeline-connector {\n    display: none;\n  }\n\n  /* From under the marker down to the next one, stopping a little short of both. */\n  .v-timeline-item[data-orientation='vertical'] > .v-timeline-connector {\n    grid-column: marker;\n    grid-row: 2 / -1;\n    justify-self: center;\n    margin-block: calc(var(--vectis-space-1) + var(--timeline-overflow)) var(--vectis-space-1);\n    border-inline-start-width: 1px;\n  }\n\n  .v-timeline-item[data-orientation='vertical']:has(\n      + :is([data-marker='icon'], [data-marker='custom'])\n    )\n    > .v-timeline-connector {\n    /* Halved term by term: cssnano's calc parser rejects a bracketed group inside max(). */\n    margin-block-end: calc(\n      var(--vectis-space-1) + max(0px, var(--timeline-icon) / 2 - var(--timeline-line) / 2)\n    );\n  }\n\n  .v-timeline-item[data-orientation='vertical']\n    > :is(.v-timeline-time, .v-timeline-title, .v-timeline-content) {\n    grid-column: main;\n  }\n\n  /* The first text beside the marker is at least a title line high, its first line centred. */\n  .v-timeline-item[data-orientation='vertical'] > .v-timeline-connector + * {\n    min-block-size: var(--timeline-line);\n    align-content: center;\n  }\n\n  .v-timeline-time {\n    display: block;\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-text-caption-weight);\n    line-height: var(--vectis-text-caption-leading);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-timeline-title {\n    margin: 0;\n    color: var(--vectis-color-text);\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-timeline-content {\n    color: var(--vectis-color-text-muted);\n    font-size: var(--vectis-text-body-md-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n  }\n\n  .v-timeline-item > .v-timeline-title + .v-timeline-content {\n    margin-block-start: var(--vectis-space-1);\n  }\n\n  .v-timeline[data-size='sm'] > .v-timeline-list > .v-timeline-item > .v-timeline-content {\n    font-size: var(--vectis-text-body-sm-size);\n    font-weight: var(--vectis-text-body-sm-weight);\n    line-height: var(--vectis-text-body-sm-leading);\n  }\n\n  /* Across the page: the marker and the line in the first row, the texts under them. */\n  .v-timeline-item[data-orientation='horizontal'] {\n    grid-row: 1 / -1;\n    grid-template-rows: subgrid;\n    grid-template-columns: auto minmax(0, 1fr);\n  }\n\n  .v-timeline-item[data-orientation='horizontal'] > .v-timeline-marker {\n    grid-column: 1;\n    grid-row: 1;\n    align-self: center;\n    block-size: var(--timeline-marker);\n  }\n\n  .v-timeline-item[data-orientation='horizontal'] > .v-timeline-connector {\n    grid-column: 2;\n    grid-row: 1;\n    align-self: center;\n    margin-inline: var(--vectis-space-1);\n    border-block-start-width: 1px;\n  }\n\n  .v-timeline-item[data-orientation='horizontal'] > .v-timeline-time {\n    grid-row: 2;\n  }\n\n  .v-timeline-item[data-orientation='horizontal'] > .v-timeline-title {\n    grid-row: 3;\n  }\n\n  .v-timeline-item[data-orientation='horizontal'] > .v-timeline-content {\n    grid-row: 4;\n  }\n\n  .v-timeline-item[data-orientation='horizontal']\n    > :is(.v-timeline-time, .v-timeline-title, .v-timeline-content) {\n    grid-column: 1 / -1;\n    padding-inline-end: var(--timeline-gap);\n  }\n\n  .v-timeline-item[data-orientation='horizontal'] > .v-timeline-connector + * {\n    margin-block-start: var(--timeline-gutter);\n  }\n\n  /*\n   * Across the line, the date sits in its own column and the title beside the marker takes the\n   * row height too. The thresholds repeat those of VTimeline.\n   */\n  @container v-timeline (width > 30rem) {\n    .v-timeline-item[data-layout='split'] > .v-timeline-time {\n      grid-column: time;\n      grid-row: 1;\n      text-align: end;\n    }\n\n    .v-timeline-item[data-layout='split'] > .v-timeline-time + * {\n      min-block-size: var(--timeline-line);\n      align-content: center;\n    }\n  }\n\n  /* Every other event swaps sides: its date goes after the line, its texts before it. */\n  @container v-timeline (width > 36rem) {\n    .v-timeline-item[data-layout='alternate'] > .v-timeline-time {\n      grid-column: time;\n      grid-row: 1;\n      text-align: end;\n    }\n\n    .v-timeline-item[data-layout='alternate'] > .v-timeline-time + * {\n      min-block-size: var(--timeline-line);\n      align-content: center;\n    }\n\n    .v-timeline-item[data-layout='alternate']:nth-child(even) > .v-timeline-time {\n      grid-column: main;\n      text-align: start;\n    }\n\n    .v-timeline-item[data-layout='alternate']:nth-child(even)\n      > :is(.v-timeline-title, .v-timeline-content) {\n      grid-column: time;\n      text-align: end;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCA,IAAM,IAAQ,GAiBR,IAAW,EAAO,GAAa,KAAA,CAAS,GACxC,IAAS,QAAwB,GAAU,MAAM,GAEjD,IAAW,QAAgB,GAAU,eAAe,IAAI,EAAS,iBAAiB,GAAI,GAEtF,IAAc,QACd,EAAM,WAAiB,EAAM,WAC5B,EAAM,WACJ,EAAmB,EAAM,UAAU,EAAO,OAAO,GAAU,aAAa,IADnD,EAE7B;yBAIC,EA4BK,MAAA;GA3BH,OAAM;GACL,aAAW,EAAA;GACX,eAAaA,EAAAA,OAAO,SAAM,WAAc,EAAA,OAAI,SAAA;GAC5C,oBAAkB,EAAA,CAAA,CAAQ,EAAE,eAAW;GACvC,eAAa,EAAA,CAAA,CAAQ,EAAE,UAAM;;GAE9B,EAKO,QALP,GAKO,CAJL,EAGO,EAAA,QAAA,UAAA,CAAA,SAAA,CAFO,EAAA,QAAA,EAAA,GAAZ,EAAmF,QAAnF,GAAmF,CAAzC,EAAkC,GAAA,EAAA,EAAnB,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,CAAA,CAAA,GAAA,MAAA,EAAA,CAAA,CAAA,MAAA,EAAA,GACvE,EAAsC,QAAtC,CAAsC,EAAA,CAAA,CAAA,CAAA;YAG1C,EAAwD,QAAA;IAAlD,OAAM;IAAuB,eAAY;;GAGvC,EAAA,SAAA,EAAA,GAFR,EAOY,EANL,EAAA,WAAQ,SAAA,MAAA,GAAA;;IAEb,OAAM;IACL,UAAU,EAAA;;qBAEM,CAAA,EAAA,EAAd,EAAA,KAAW,GAAA,CAAA,CAAA,CAAA;;;GAEgBA,EAAAA,OAAO,SAAS,EAAA,SAAA,EAAA,GAAhD,EAEY,EAFI,EAAA,KAAQ,GAAA;;IAA+B,OAAM;;qBACtB,CAArC,EAAqC,EAAA,QAAA,SAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;GAElBA,EAAAA,OAAO,WAAA,EAAA,GAAlB,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}

package/dist/components/VTimeline/context.d.ts

@@ -0,0 +1,11 @@
+import { InjectionKey } from 'vue';
+/** The heading level the titles of the events are rendered at. */
+export type TimelineHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export interface TimelineContext {
+    orientation: 'vertical' | 'horizontal';
+    layout: 'stacked' | 'split' | 'alternate';
+    headingLevel: TimelineHeadingLevel | undefined;
+    locale: string | undefined;
+    formatOptions: Intl.DateTimeFormatOptions | undefined;
+}
+export declare const timelineKey: InjectionKey<TimelineContext>;