vectis-ui 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"VTimePicker.js","names":[],"sources":["../../../src/components/VTimePicker/VTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } 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 {\n  DIAL_INNER_THRESHOLD,\n  angleToIndex,\n  dialIndexToHour24,\n  distanceFraction,\n  formatTime,\n  hour24ToDial,\n  hourCycleFor,\n  parseTime,\n  snapMinute,\n  to12h,\n  to24h,\n} from '../../utils/time'\nimport type { HourFormat, Meridiem } from '../../utils/time'\nimport { pad2 } from '../../utils/text'\nimport { useLocale, useMessages } from '../../i18n/state'\n\n// @a11y @keyboard @core\n/**\n * A clock shown directly in the page, for choosing a time. It is the hour-and-minute\n * counterpart of VDatePicker: VTimeInput does no more than dress it in a text field and a\n * popover, and it is perfectly usable on its own.\n *\n * It is read in three parts. Two large numerals at the top say what has been chosen so\n * far, and switch between adjusting the hour and adjusting the minutes; on a 12-hour clock\n * the choice between morning and afternoon sits beside them, since it is read as part of\n * that same time. Below them is the face itself, where one points at a time rather than\n * stepping through it.\n *\n * Nothing native covers choosing a value by pointing at an angle, so the JavaScript does\n * two things: it turns a point on the face into a time — measuring the face once, then\n * pure trigonometry that lives in `utils/time` — and it implements the keyboard of a\n * slider, the arrows and the Home, End and Page keys.\n *\n * Everything one SEES is CSS: the numerals are placed around the circle, and the hand is\n * turned, from a single unitless fraction of a turn written inline.\n *\n * There is exactly ONE focusable element on the face, and it is announced as a slider. The\n * numerals are visual markers hidden from screen readers, reached by the pointer's angle\n * rather than one cell at a time — which is why the whole spoken value has to be carried\n * by that one element.\n */\nexport type TimePickerFormat = HourFormat\n\n/** Which of the two halves of a time is being adjusted. */\nexport type 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  /** The interval the minutes snap to, both when dragging and with the arrow keys. */\n  minuteStep?: number\n}\n\nconst props = withDefaults(defineProps<TimePickerProps>(), {\n  format: undefined,\n  locale: undefined,\n  minuteStep: 1,\n})\n\n/**\n * The time, always as a 24-hour \"HH:mm\" string whatever clock is displayed. A consumer\n * therefore never has to know which clock the reader's language uses.\n *\n * With no value at all the clock shows midnight. It is deliberately NOT the current time:\n * reading the clock while rendering would make a page drawn on a server disagree with the\n * same page in the browser. A component that wants to open on the current time sets it\n * from a handler — which is exactly what VTimeInput does.\n */\nconst model = defineModel<string | null>({ default: null })\n\nconst emit = defineEmits<{\n  /**\n   * The reader has finished: the minutes were settled from the KEYBOARD. Releasing the\n   * pointer does not count — on a clock face, letting go of the hand is how one stops\n   * adjusting it, not how one confirms.\n   */\n  confirm: []\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()\nconst vectisLocale = useLocale()\n/* The prop wins, and the design system's global locale is what it falls back to. */\nconst resolvedLocale = computed(() => props.locale ?? vectisLocale.value)\nconst resolvedFormat = computed<TimePickerFormat>(\n  () => props.format ?? hourCycleFor(resolvedLocale.value),\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\nconst parts = computed(() => parseTime(model.value) ?? { hour: 0, minute: 0 })\nconst hour = computed(() => parts.value.hour)\nconst minute = computed(() => parts.value.minute)\n\nfunction setHour(value: number) {\n  model.value = formatTime(value, minute.value)\n}\n\nfunction setMinute(value: number) {\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\n * change of name is not reliably announced. A politely announced region says it a second\n * time. The wording has no prop: the dictionary is where it is changed.\n *\n * It is written HERE, by the function the reader's own gestures go through, rather than by\n * a watcher on the step: putting the clock back on the hour between two openings — what\n * `reset` does — must stay silent, and a watcher could not tell the two apart.\n */\nconst liveMessage = ref('')\n\nfunction setStep(next: TimePickerStep) {\n  step.value = next\n  liveMessage.value =\n    next === 'minute' ? m.value.timePicker.minuteStep : m.value.timePicker.hourStep\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\nconst cells = computed<DialCell[]>(() => {\n  if (step.value === 'minute') {\n    // Only twelve markers are printed, one every five minutes — sixty numerals would be\n    // unreadable — while dragging remains accurate to the minute.\n    return Array.from({ length: 12 }, (_, i) => ({\n      key: `m-${i}`,\n      label: pad2(i * 5),\n      turn: i / 12,\n      ring: 'outer' as const,\n      selected: minute.value === i * 5,\n    }))\n  }\n  const outer: DialCell[] = Array.from({ length: 12 }, (_, i) => {\n    const hour24 = dialIndexToHour24(i, 'outer')\n    return {\n      key: `o-${i}`,\n      label: String(i === 0 ? 12 : i),\n      turn: i / 12,\n      ring: 'outer' as const,\n      selected:\n        resolvedFormat.value === '24h'\n          ? hour.value === hour24\n          : to12h(hour.value).hour === (i === 0 ? 12 : i),\n    }\n  })\n  if (resolvedFormat.value === '12h') return outer\n  const inner: DialCell[] = Array.from({ length: 12 }, (_, i) => {\n    const hour24 = dialIndexToHour24(i, 'inner')\n    return {\n      key: `i-${i}`,\n      label: pad2(hour24),\n      turn: i / 12,\n      ring: 'inner' as const,\n      selected: hour.value === hour24,\n    }\n  })\n  return [...outer, ...inner]\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(() => step.value === 'minute' && minute.value % 5 !== 0)\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/**\n * Which half of the day is chosen while NO time is set at all. The AM/PM control always\n * needs a value — it refuses to have none — and \"nothing\" is not one.\n *\n * It starts at AM rather than at whatever the current time happens to be, which keeps the\n * component's first render identical on a server and in a browser, and its tests free of\n * a clock.\n */\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\n * until then. Every hour written on a 12-hour face goes through it — without which a\n * reader who picks PM on an empty clock and then an hour would get the morning back, the\n * value having no half-day of its own to read.\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) setHour(to24h(to12h(hour.value).hour, meridiem))\n  },\n})\n\n// @a11y — the entire spoken value of the face. The numerals are hidden from screen\n// readers, so these four attributes are the ONLY thing assistive technology has: what the\n// value is, what its 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)\nconst ariaValueText = computed(() =>\n  step.value === 'minute'\n    ? m.value.timePicker.minutesValue(minute.value)\n    : m.value.timePicker.hoursValue(ariaValueNow.value),\n)\n\n/**\n * A step has been settled: after the hour come the minutes, and after the minutes the\n * whole 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')\n}\n\n// Pointing at the face, by click or by drag.\nconst faceEl = ref<HTMLElement | null>(null)\nconst dragging = ref(false)\n\nfunction applyPoint(event: PointerEvent) {\n  const face = faceEl.value\n  if (!face) return\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 (step.value === 'minute') {\n    setMinute(snapMinute(angleToIndex(dx, dy, 60), props.minuteStep))\n    return\n  }\n  const index = angleToIndex(dx, dy, 12)\n  if (resolvedFormat.value === '24h') {\n    const ring = distanceFraction(dx, dy, rect.width / 2) < DIAL_INNER_THRESHOLD ? 'inner' : 'outer'\n    setHour(dialIndexToHour24(index, ring))\n  } else {\n    setHour(to24h(index === 0 ? 12 : index, currentMeridiem.value))\n  }\n}\n\nfunction onPointerdown(event: PointerEvent) {\n  // Capturing the pointer is what keeps the drag alive when it wanders off the face.\n  //\n  // @fallback — it is wrapped because a pointer event fired by a TEST refers to no real\n  // pointer, and the call then throws. Failing to capture merely means the drag stops at\n  // the edge, which no test is checking.\n  try {\n    faceEl.value?.setPointerCapture(event.pointerId)\n  } catch {\n    /* a synthetic pointer: nothing to capture */\n  }\n  dragging.value = true\n  applyPoint(event)\n}\n\nfunction onPointermove(event: PointerEvent) {\n  if (dragging.value) applyPoint(event)\n}\n\nfunction onPointerup() {\n  if (!dragging.value) return\n  dragging.value = false\n  settleStep('pointer')\n}\n\nfunction onPointercancel() {\n  dragging.value = false\n}\n\n// @keyboard @a11y — the keyboard a slider is expected to have.\nfunction moveHour(delta: number) {\n  if (resolvedFormat.value === '24h') {\n    setHour((hour.value + delta + 24) % 24)\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(to24h(((hour12 - 1 + delta + 12) % 12) + 1, currentMeridiem.value))\n}\n\nfunction onKeydown(event: KeyboardEvent) {\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')\n      setHour(resolvedFormat.value === '12h' ? to24h(1, currentMeridiem.value) : 0)\n    else if (event.key === 'End')\n      setHour(resolvedFormat.value === '12h' ? to24h(12, currentMeridiem.value) : 23)\n    else return\n    event.preventDefault()\n    return\n  }\n  if (delta) setMinute(snapMinute(minute.value + delta * props.minuteStep, props.minuteStep))\n  else if (event.key === 'PageUp') setMinute(snapMinute(minute.value + 5, props.minuteStep))\n  else if (event.key === 'PageDown') setMinute(snapMinute(minute.value - 5, props.minuteStep))\n  else if (event.key === 'Home') setMinute(0)\n  else if (event.key === 'End') setMinute(snapMinute(60 - props.minuteStep, props.minuteStep))\n  else return\n  event.preventDefault()\n}\n\ndefineExpose({\n  /** Moves the focus onto the clock face, which is what 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\n   * anything itself. A component holding this one in a panel calls it as the panel opens\n   * and closes, so that every visit starts on the hour.\n   */\n  reset: () => {\n    step.value = 'hour'\n    liveMessage.value = ''\n  },\n})\n</script>\n\n<template>\n  <div class=\"v-time-picker\" :data-step=\"step\">\n    <!-- The two large numerals switch between adjusting the hour and the minutes. The one\n         being adjusted takes the accent tone, which on a quiet button shows as the colour\n         of the numeral rather than as a filled background.\n\n         The choice of half-day sits beside them, on the same row: it is read as part of\n         the time itself rather than as a property of the face. On a 24-hour clock there\n         is no such choice, and the row then holds the numerals alone. -->\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=\"m.timePicker.selectHour\"\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=\"m.timePicker.selectMinute\"\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        orientation=\"vertical\"\n        size=\"sm\"\n        :label=\"m.timePicker.meridiem\"\n      >\n        <VToggleItem value=\"AM\" :label=\"m.timePicker.am\" />\n        <VToggleItem value=\"PM\" :label=\"m.timePicker.pm\" />\n      </VToggle>\n    </div>\n\n    <div\n      ref=\"faceEl\"\n      role=\"slider\"\n      tabindex=\"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      @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  .v-time-picker {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-4);\n    width: max-content;\n    font-family: var(--vectis-text-family);\n    color: var(--vectis-color-text);\n  }\n\n  /* The numerals and the choice of half-day on one row, the second beside the first. The\n     gap is logical, so the control follows the reading direction; the numerals inside it\n     stay in a group of their own, which is what keeps the direction they force off it.\n\n     The centring is what places the row whether or not that control is rendered — a\n     24-hour clock has none, and the numerals then come out centred on their own. */\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  /* The two large numerals are ordinary quiet buttons. What is overridden here is the\n     \"large numeral\" look alone — the width and the type; the height, the states, the\n     focus ring and the transitions all come from the button itself.\n\n     The selector is qualified by an attribute that button always renders, which is what\n     makes it win whatever order the two sheets end up in. */\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-2-weight);\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    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    /* The row above is wider than the face as soon as the half-day control is rendered,\n       and the column is only as wide as its widest child: without this the clock would\n       hang at the start edge of that row instead of under the middle of it. The face\n       itself stays physical — a clock is never mirrored. */\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    /* How far from the centre the numerals sit — the outer circle. The numerals and the\n       hand both read it, and the inner circle redefines it for itself.\n\n       TRAP — this is coupled to the threshold that decides which of the two circles a\n       point belongs to, in `utils/time`. Changing one without the other makes the face\n       answer with the wrong ring, and no test can catch it: the unit tests measure\n       nothing. */\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 numerals are placed around the circle by CSS trigonometry, from the fraction of a\n   * turn each one was given — no coordinates are computed in code.\n   *\n   * The properties used are PHYSICAL on purpose, where the rest of the design system\n   * prefers logical ones: a clock face is never mirrored, clockwise meaning the same thing\n   * in every 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    /* Above the hand, so that the numeral being pointed at reads ON its dot rather than\n       being covered by it. */\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 hand: a stroke anchored at the centre and turned by the same fraction of a turn.\n   *\n   * TRAP — the rotation is deliberately NOT animated. Going from 55 minutes to 0 takes the\n   * angle from nearly a full turn back to none, and an interpolation would sweep the hand\n   * all the way round anticlockwise. That is an accepted departure from the Material\n   * design it follows otherwise.\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  /* The dot at the tip of the hand. It is exactly the size of a numeral's cell, so it\n     covers the one being pointed at — whose text turns to the colour that reads on it. */\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   * On a minute with no marker of its own, the dot covers no numeral and at full size\n   * would spill onto both neighbours, reading as pointing at neither. Shrunk, it becomes\n   * the precise marker itself — which is also why the pale centre Material draws inside it\n   * is dropped here: at this size it would turn the dot into a ring.\n   *\n   * TRAP — only the DOT's own size changes. Redefining the numeral size variable here\n   * would also move the radius derived from it, and with it the hand's length and the\n   * 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  .v-time-picker-footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--vectis-space-2);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-time-picker-hand::before {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -0,0 +1,257 @@
+import { useLocale as e, useMessages as t } from "../../i18n/state.js";
+import n from "../VButton/VButton.js";
+import r from "../VToggle/VToggle.js";
+import i from "../VToggle/VToggleItem.js";
+import { pad2 as a } from "../../utils/text.js";
+import { angleToIndex as o, dialIndexToHour24 as s, distanceFraction as ee, formatTime as c, hour24ToDial as l, hourCycleFor as u, parseTime as d, snapMinute as f, to12h as p, to24h as m } from "../../utils/time.js";
+import { Fragment as te, computed as h, createBlock as ne, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createTextVNode as y, createVNode as b, defineComponent as x, mergeModels as S, normalizeStyle as C, openBlock as w, ref as T, renderList as re, renderSlot as ie, toDisplayString as E, unref as D, useModel as ae, withCtx as O } from "vue";
+//#region src/components/VTimePicker/VTimePicker.vue?vue&type=script&setup=true&lang.ts
+var k = ["data-step"], A = { class: "v-time-picker-header" }, oe = { class: "v-time-picker-time" }, se = [
+	"aria-label",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext",
+	"data-dragging"
+], ce = ["data-ring", "data-minor"], le = ["data-ring", "data-selected"], ue = {
+	class: "v-visually-hidden",
+	"aria-live": "polite"
+}, de = {
+	key: 0,
+	class: "v-time-picker-footer"
+}, j = /*@__PURE__*/ x({
+	__name: "VTimePicker",
+	props: /*@__PURE__*/ S({
+		format: { default: void 0 },
+		locale: { default: void 0 },
+		minuteStep: { default: 1 }
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ S(["confirm"], ["update:modelValue"]),
+	setup(x, { expose: S, emit: j }) {
+		let M = x, N = ae(x, "modelValue"), P = j, F = t(), fe = e(), I = h(() => M.locale ?? fe.value), L = h(() => M.format ?? u(I.value)), R = T("hour"), z = h(() => d(N.value) ?? {
+			hour: 0,
+			minute: 0
+		}), B = h(() => z.value.hour), V = h(() => z.value.minute);
+		function H(e) {
+			N.value = c(e, V.value);
+		}
+		function U(e) {
+			N.value = c(B.value, e);
+		}
+		let W = T("");
+		function G(e) {
+			R.value = e, W.value = e === "minute" ? F.value.timePicker.minuteStep : F.value.timePicker.hourStep;
+		}
+		let pe = h(() => {
+			if (R.value === "minute") return Array.from({ length: 12 }, (e, t) => ({
+				key: `m-${t}`,
+				label: a(t * 5),
+				turn: t / 12,
+				ring: "outer",
+				selected: V.value === t * 5
+			}));
+			let e = Array.from({ length: 12 }, (e, t) => {
+				let n = s(t, "outer");
+				return {
+					key: `o-${t}`,
+					label: String(t === 0 ? 12 : t),
+					turn: t / 12,
+					ring: "outer",
+					selected: L.value === "24h" ? B.value === n : p(B.value).hour === (t === 0 ? 12 : t)
+				};
+			});
+			if (L.value === "12h") return e;
+			let t = Array.from({ length: 12 }, (e, t) => {
+				let n = s(t, "inner");
+				return {
+					key: `i-${t}`,
+					label: a(n),
+					turn: t / 12,
+					ring: "inner",
+					selected: B.value === n
+				};
+			});
+			return [...e, ...t];
+		}), me = h(() => R.value === "minute" ? V.value / 60 : (L.value === "24h" ? l(B.value).index : p(B.value).hour % 12) / 12), he = h(() => R.value === "hour" && L.value === "24h" ? l(B.value).ring : "outer"), ge = h(() => R.value === "minute" && V.value % 5 != 0), _e = h(() => a(L.value === "12h" ? p(B.value).hour : B.value)), K = T("AM"), q = h(() => N.value ? p(B.value).meridiem : K.value), J = h({
+			get: () => q.value,
+			set: (e) => {
+				let t = e === "PM" ? "PM" : "AM";
+				K.value = t, N.value && H(m(p(B.value).hour, t));
+			}
+		}), Y = h(() => R.value === "minute" ? V.value : L.value === "12h" ? p(B.value).hour : B.value), ve = h(() => R.value === "minute" ? 0 : +(L.value === "12h")), ye = h(() => R.value === "minute" ? 59 : L.value === "12h" ? 12 : 23), be = h(() => R.value === "minute" ? F.value.timePicker.minutesValue(V.value) : F.value.timePicker.hoursValue(Y.value));
+		function X(e) {
+			R.value === "hour" ? G("minute") : e === "keyboard" && P("confirm");
+		}
+		let Z = T(null), Q = T(!1);
+		function $(e) {
+			let t = Z.value;
+			if (!t) return;
+			let n = t.getBoundingClientRect(), r = e.clientX - (n.left + n.width / 2), i = e.clientY - (n.top + n.height / 2);
+			if (R.value === "minute") {
+				U(f(o(r, i, 60), M.minuteStep));
+				return;
+			}
+			let a = o(r, i, 12);
+			L.value === "24h" ? H(s(a, ee(r, i, n.width / 2) < .625 ? "inner" : "outer")) : H(m(a === 0 ? 12 : a, q.value));
+		}
+		function xe(e) {
+			try {
+				Z.value?.setPointerCapture(e.pointerId);
+			} catch {}
+			Q.value = !0, $(e);
+		}
+		function Se(e) {
+			Q.value && $(e);
+		}
+		function Ce() {
+			Q.value && (Q.value = !1, X("pointer"));
+		}
+		function we() {
+			Q.value = !1;
+		}
+		function Te(e) {
+			if (L.value === "24h") {
+				H((B.value + e + 24) % 24);
+				return;
+			}
+			let t = p(B.value).hour;
+			H(m((t - 1 + e + 12) % 12 + 1, q.value));
+		}
+		function Ee(e) {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault(), X("keyboard");
+				return;
+			}
+			let t = e.key === "ArrowUp" || e.key === "ArrowRight" ? 1 : e.key === "ArrowDown" || e.key === "ArrowLeft" ? -1 : 0;
+			if (R.value === "hour") {
+				if (t) Te(t);
+				else if (e.key === "Home") H(L.value === "12h" ? m(1, q.value) : 0);
+				else if (e.key === "End") H(L.value === "12h" ? m(12, q.value) : 23);
+				else return;
+				e.preventDefault();
+				return;
+			}
+			if (t) U(f(V.value + t * M.minuteStep, M.minuteStep));
+			else if (e.key === "PageUp") U(f(V.value + 5, M.minuteStep));
+			else if (e.key === "PageDown") U(f(V.value - 5, M.minuteStep));
+			else if (e.key === "Home") U(0);
+			else if (e.key === "End") U(f(60 - M.minuteStep, M.minuteStep));
+			else return;
+			e.preventDefault();
+		}
+		return S({
+			focus: (e) => Z.value?.focus(e),
+			reset: () => {
+				R.value = "hour", W.value = "";
+			}
+		}), (e, t) => (w(), _("div", {
+			class: "v-time-picker",
+			"data-step": R.value
+		}, [
+			v("div", A, [v("div", oe, [
+				b(n, {
+					class: "v-time-picker-cell",
+					variant: "ghost",
+					size: "lg",
+					tone: R.value === "hour" ? "accent" : "neutral",
+					"aria-pressed": R.value === "hour" ? "true" : "false",
+					"aria-label": D(F).timePicker.selectHour,
+					onClick: t[0] ||= (e) => G("hour")
+				}, {
+					default: O(() => [y(E(_e.value), 1)]),
+					_: 1
+				}, 8, [
+					"tone",
+					"aria-pressed",
+					"aria-label"
+				]),
+				t[3] ||= v("span", {
+					class: "v-time-picker-sep",
+					"aria-hidden": "true"
+				}, ":", -1),
+				b(n, {
+					class: "v-time-picker-cell",
+					variant: "ghost",
+					size: "lg",
+					tone: R.value === "minute" ? "accent" : "neutral",
+					"aria-pressed": R.value === "minute" ? "true" : "false",
+					"aria-label": D(F).timePicker.selectMinute,
+					onClick: t[1] ||= (e) => G("minute")
+				}, {
+					default: O(() => [y(E(D(a)(V.value)), 1)]),
+					_: 1
+				}, 8, [
+					"tone",
+					"aria-pressed",
+					"aria-label"
+				])
+			]), L.value === "12h" ? (w(), ne(r, {
+				key: 0,
+				modelValue: J.value,
+				"onUpdate:modelValue": t[2] ||= (e) => J.value = e,
+				class: "v-time-picker-meridiem",
+				mandatory: "",
+				variant: "outline",
+				orientation: "vertical",
+				size: "sm",
+				label: D(F).timePicker.meridiem
+			}, {
+				default: O(() => [b(i, {
+					value: "AM",
+					label: D(F).timePicker.am
+				}, null, 8, ["label"]), b(i, {
+					value: "PM",
+					label: D(F).timePicker.pm
+				}, null, 8, ["label"])]),
+				_: 1
+			}, 8, ["modelValue", "label"])) : g("", !0)]),
+			v("div", {
+				ref_key: "faceEl",
+				ref: Z,
+				role: "slider",
+				tabindex: "0",
+				class: "v-time-picker-face",
+				"aria-label": R.value === "hour" ? D(F).timePicker.hour : D(F).timePicker.minutes,
+				"aria-valuemin": ve.value,
+				"aria-valuemax": ye.value,
+				"aria-valuenow": Y.value,
+				"aria-valuetext": be.value,
+				"data-dragging": Q.value ? "" : void 0,
+				onPointerdown: xe,
+				onPointermove: Se,
+				onPointerup: Ce,
+				onPointercancel: we,
+				onKeydown: Ee
+			}, [
+				v("div", {
+					class: "v-time-picker-hand",
+					"aria-hidden": "true",
+					"data-ring": he.value,
+					"data-minor": ge.value ? "" : void 0,
+					style: C({ "--dial-turn": String(me.value) })
+				}, null, 12, ce),
+				t[4] ||= v("span", {
+					class: "v-time-picker-center",
+					"aria-hidden": "true"
+				}, null, -1),
+				(w(!0), _(te, null, re(pe.value, (e) => (w(), _("span", {
+					key: e.key,
+					class: "v-time-picker-number",
+					"aria-hidden": "true",
+					"data-ring": e.ring,
+					"data-selected": e.selected ? "" : void 0,
+					style: C({ "--dial-turn": String(e.turn) })
+				}, E(e.label), 13, le))), 128))
+			], 40, se),
+			v("div", ue, E(W.value), 1),
+			e.$slots.footer ? (w(), _("div", de, [ie(e.$slots, "footer")])) : g("", !0)
+		], 8, k));
+	}
+});
+//#endregion
+export { j as default };
+
+//# sourceMappingURL=VTimePicker.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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\">\nimport { computed, ref } 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 {\n  DIAL_INNER_THRESHOLD,\n  angleToIndex,\n  dialIndexToHour24,\n  distanceFraction,\n  formatTime,\n  hour24ToDial,\n  hourCycleFor,\n  parseTime,\n  snapMinute,\n  to12h,\n  to24h,\n} from '../../utils/time'\nimport type { HourFormat, Meridiem } from '../../utils/time'\nimport { pad2 } from '../../utils/text'\nimport { useLocale, useMessages } from '../../i18n/state'\n\n// @a11y @keyboard @core\n/**\n * A clock shown directly in the page, for choosing a time. It is the hour-and-minute\n * counterpart of VDatePicker: VTimeInput does no more than dress it in a text field and a\n * popover, and it is perfectly usable on its own.\n *\n * It is read in three parts. Two large numerals at the top say what has been chosen so\n * far, and switch between adjusting the hour and adjusting the minutes; on a 12-hour clock\n * the choice between morning and afternoon sits beside them, since it is read as part of\n * that same time. Below them is the face itself, where one points at a time rather than\n * stepping through it.\n *\n * Nothing native covers choosing a value by pointing at an angle, so the JavaScript does\n * two things: it turns a point on the face into a time — measuring the face once, then\n * pure trigonometry that lives in `utils/time` — and it implements the keyboard of a\n * slider, the arrows and the Home, End and Page keys.\n *\n * Everything one SEES is CSS: the numerals are placed around the circle, and the hand is\n * turned, from a single unitless fraction of a turn written inline.\n *\n * There is exactly ONE focusable element on the face, and it is announced as a slider. The\n * numerals are visual markers hidden from screen readers, reached by the pointer's angle\n * rather than one cell at a time — which is why the whole spoken value has to be carried\n * by that one element.\n */\nexport type TimePickerFormat = HourFormat\n\n/** Which of the two halves of a time is being adjusted. */\nexport type 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  /** The interval the minutes snap to, both when dragging and with the arrow keys. */\n  minuteStep?: number\n}\n\nconst props = withDefaults(defineProps<TimePickerProps>(), {\n  format: undefined,\n  locale: undefined,\n  minuteStep: 1,\n})\n\n/**\n * The time, always as a 24-hour \"HH:mm\" string whatever clock is displayed. A consumer\n * therefore never has to know which clock the reader's language uses.\n *\n * With no value at all the clock shows midnight. It is deliberately NOT the current time:\n * reading the clock while rendering would make a page drawn on a server disagree with the\n * same page in the browser. A component that wants to open on the current time sets it\n * from a handler — which is exactly what VTimeInput does.\n */\nconst model = defineModel<string | null>({ default: null })\n\nconst emit = defineEmits<{\n  /**\n   * The reader has finished: the minutes were settled from the KEYBOARD. Releasing the\n   * pointer does not count — on a clock face, letting go of the hand is how one stops\n   * adjusting it, not how one confirms.\n   */\n  confirm: []\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()\nconst vectisLocale = useLocale()\n/* The prop wins, and the design system's global locale is what it falls back to. */\nconst resolvedLocale = computed(() => props.locale ?? vectisLocale.value)\nconst resolvedFormat = computed<TimePickerFormat>(\n  () => props.format ?? hourCycleFor(resolvedLocale.value),\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\nconst parts = computed(() => parseTime(model.value) ?? { hour: 0, minute: 0 })\nconst hour = computed(() => parts.value.hour)\nconst minute = computed(() => parts.value.minute)\n\nfunction setHour(value: number) {\n  model.value = formatTime(value, minute.value)\n}\n\nfunction setMinute(value: number) {\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\n * change of name is not reliably announced. A politely announced region says it a second\n * time. The wording has no prop: the dictionary is where it is changed.\n *\n * It is written HERE, by the function the reader's own gestures go through, rather than by\n * a watcher on the step: putting the clock back on the hour between two openings — what\n * `reset` does — must stay silent, and a watcher could not tell the two apart.\n */\nconst liveMessage = ref('')\n\nfunction setStep(next: TimePickerStep) {\n  step.value = next\n  liveMessage.value =\n    next === 'minute' ? m.value.timePicker.minuteStep : m.value.timePicker.hourStep\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\nconst cells = computed<DialCell[]>(() => {\n  if (step.value === 'minute') {\n    // Only twelve markers are printed, one every five minutes — sixty numerals would be\n    // unreadable — while dragging remains accurate to the minute.\n    return Array.from({ length: 12 }, (_, i) => ({\n      key: `m-${i}`,\n      label: pad2(i * 5),\n      turn: i / 12,\n      ring: 'outer' as const,\n      selected: minute.value === i * 5,\n    }))\n  }\n  const outer: DialCell[] = Array.from({ length: 12 }, (_, i) => {\n    const hour24 = dialIndexToHour24(i, 'outer')\n    return {\n      key: `o-${i}`,\n      label: String(i === 0 ? 12 : i),\n      turn: i / 12,\n      ring: 'outer' as const,\n      selected:\n        resolvedFormat.value === '24h'\n          ? hour.value === hour24\n          : to12h(hour.value).hour === (i === 0 ? 12 : i),\n    }\n  })\n  if (resolvedFormat.value === '12h') return outer\n  const inner: DialCell[] = Array.from({ length: 12 }, (_, i) => {\n    const hour24 = dialIndexToHour24(i, 'inner')\n    return {\n      key: `i-${i}`,\n      label: pad2(hour24),\n      turn: i / 12,\n      ring: 'inner' as const,\n      selected: hour.value === hour24,\n    }\n  })\n  return [...outer, ...inner]\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(() => step.value === 'minute' && minute.value % 5 !== 0)\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/**\n * Which half of the day is chosen while NO time is set at all. The AM/PM control always\n * needs a value — it refuses to have none — and \"nothing\" is not one.\n *\n * It starts at AM rather than at whatever the current time happens to be, which keeps the\n * component's first render identical on a server and in a browser, and its tests free of\n * a clock.\n */\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\n * until then. Every hour written on a 12-hour face goes through it — without which a\n * reader who picks PM on an empty clock and then an hour would get the morning back, the\n * value having no half-day of its own to read.\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) setHour(to24h(to12h(hour.value).hour, meridiem))\n  },\n})\n\n// @a11y — the entire spoken value of the face. The numerals are hidden from screen\n// readers, so these four attributes are the ONLY thing assistive technology has: what the\n// value is, what its 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)\nconst ariaValueText = computed(() =>\n  step.value === 'minute'\n    ? m.value.timePicker.minutesValue(minute.value)\n    : m.value.timePicker.hoursValue(ariaValueNow.value),\n)\n\n/**\n * A step has been settled: after the hour come the minutes, and after the minutes the\n * whole 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')\n}\n\n// Pointing at the face, by click or by drag.\nconst faceEl = ref<HTMLElement | null>(null)\nconst dragging = ref(false)\n\nfunction applyPoint(event: PointerEvent) {\n  const face = faceEl.value\n  if (!face) return\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 (step.value === 'minute') {\n    setMinute(snapMinute(angleToIndex(dx, dy, 60), props.minuteStep))\n    return\n  }\n  const index = angleToIndex(dx, dy, 12)\n  if (resolvedFormat.value === '24h') {\n    const ring = distanceFraction(dx, dy, rect.width / 2) < DIAL_INNER_THRESHOLD ? 'inner' : 'outer'\n    setHour(dialIndexToHour24(index, ring))\n  } else {\n    setHour(to24h(index === 0 ? 12 : index, currentMeridiem.value))\n  }\n}\n\nfunction onPointerdown(event: PointerEvent) {\n  // Capturing the pointer is what keeps the drag alive when it wanders off the face.\n  //\n  // @fallback — it is wrapped because a pointer event fired by a TEST refers to no real\n  // pointer, and the call then throws. Failing to capture merely means the drag stops at\n  // the edge, which no test is checking.\n  try {\n    faceEl.value?.setPointerCapture(event.pointerId)\n  } catch {\n    /* a synthetic pointer: nothing to capture */\n  }\n  dragging.value = true\n  applyPoint(event)\n}\n\nfunction onPointermove(event: PointerEvent) {\n  if (dragging.value) applyPoint(event)\n}\n\nfunction onPointerup() {\n  if (!dragging.value) return\n  dragging.value = false\n  settleStep('pointer')\n}\n\nfunction onPointercancel() {\n  dragging.value = false\n}\n\n// @keyboard @a11y — the keyboard a slider is expected to have.\nfunction moveHour(delta: number) {\n  if (resolvedFormat.value === '24h') {\n    setHour((hour.value + delta + 24) % 24)\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(to24h(((hour12 - 1 + delta + 12) % 12) + 1, currentMeridiem.value))\n}\n\nfunction onKeydown(event: KeyboardEvent) {\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')\n      setHour(resolvedFormat.value === '12h' ? to24h(1, currentMeridiem.value) : 0)\n    else if (event.key === 'End')\n      setHour(resolvedFormat.value === '12h' ? to24h(12, currentMeridiem.value) : 23)\n    else return\n    event.preventDefault()\n    return\n  }\n  if (delta) setMinute(snapMinute(minute.value + delta * props.minuteStep, props.minuteStep))\n  else if (event.key === 'PageUp') setMinute(snapMinute(minute.value + 5, props.minuteStep))\n  else if (event.key === 'PageDown') setMinute(snapMinute(minute.value - 5, props.minuteStep))\n  else if (event.key === 'Home') setMinute(0)\n  else if (event.key === 'End') setMinute(snapMinute(60 - props.minuteStep, props.minuteStep))\n  else return\n  event.preventDefault()\n}\n\ndefineExpose({\n  /** Moves the focus onto the clock face, which is what 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\n   * anything itself. A component holding this one in a panel calls it as the panel opens\n   * and closes, so that every visit starts on the hour.\n   */\n  reset: () => {\n    step.value = 'hour'\n    liveMessage.value = ''\n  },\n})\n</script>\n\n<template>\n  <div class=\"v-time-picker\" :data-step=\"step\">\n    <!-- The two large numerals switch between adjusting the hour and the minutes. The one\n         being adjusted takes the accent tone, which on a quiet button shows as the colour\n         of the numeral rather than as a filled background.\n\n         The choice of half-day sits beside them, on the same row: it is read as part of\n         the time itself rather than as a property of the face. On a 24-hour clock there\n         is no such choice, and the row then holds the numerals alone. -->\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=\"m.timePicker.selectHour\"\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=\"m.timePicker.selectMinute\"\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        orientation=\"vertical\"\n        size=\"sm\"\n        :label=\"m.timePicker.meridiem\"\n      >\n        <VToggleItem value=\"AM\" :label=\"m.timePicker.am\" />\n        <VToggleItem value=\"PM\" :label=\"m.timePicker.pm\" />\n      </VToggle>\n    </div>\n\n    <div\n      ref=\"faceEl\"\n      role=\"slider\"\n      tabindex=\"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      @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  .v-time-picker {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-4);\n    width: max-content;\n    font-family: var(--vectis-text-family);\n    color: var(--vectis-color-text);\n  }\n\n  /* The numerals and the choice of half-day on one row, the second beside the first. The\n     gap is logical, so the control follows the reading direction; the numerals inside it\n     stay in a group of their own, which is what keeps the direction they force off it.\n\n     The centring is what places the row whether or not that control is rendered — a\n     24-hour clock has none, and the numerals then come out centred on their own. */\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  /* The two large numerals are ordinary quiet buttons. What is overridden here is the\n     \"large numeral\" look alone — the width and the type; the height, the states, the\n     focus ring and the transitions all come from the button itself.\n\n     The selector is qualified by an attribute that button always renders, which is what\n     makes it win whatever order the two sheets end up in. */\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-2-weight);\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    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    /* The row above is wider than the face as soon as the half-day control is rendered,\n       and the column is only as wide as its widest child: without this the clock would\n       hang at the start edge of that row instead of under the middle of it. The face\n       itself stays physical — a clock is never mirrored. */\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    /* How far from the centre the numerals sit — the outer circle. The numerals and the\n       hand both read it, and the inner circle redefines it for itself.\n\n       TRAP — this is coupled to the threshold that decides which of the two circles a\n       point belongs to, in `utils/time`. Changing one without the other makes the face\n       answer with the wrong ring, and no test can catch it: the unit tests measure\n       nothing. */\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 numerals are placed around the circle by CSS trigonometry, from the fraction of a\n   * turn each one was given — no coordinates are computed in code.\n   *\n   * The properties used are PHYSICAL on purpose, where the rest of the design system\n   * prefers logical ones: a clock face is never mirrored, clockwise meaning the same thing\n   * in every 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    /* Above the hand, so that the numeral being pointed at reads ON its dot rather than\n       being covered by it. */\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 hand: a stroke anchored at the centre and turned by the same fraction of a turn.\n   *\n   * TRAP — the rotation is deliberately NOT animated. Going from 55 minutes to 0 takes the\n   * angle from nearly a full turn back to none, and an interpolation would sweep the hand\n   * all the way round anticlockwise. That is an accepted departure from the Material\n   * design it follows otherwise.\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  /* The dot at the tip of the hand. It is exactly the size of a numeral's cell, so it\n     covers the one being pointed at — whose text turns to the colour that reads on it. */\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   * On a minute with no marker of its own, the dot covers no numeral and at full size\n   * would spill onto both neighbours, reading as pointing at neither. Shrunk, it becomes\n   * the precise marker itself — which is also why the pale centre Material draws inside it\n   * is dropped here: at this size it would turn the dot into a ring.\n   *\n   * TRAP — only the DOT's own size changes. Redefining the numeral size variable here\n   * would also move the radius derived from it, and with it the hand's length and the\n   * 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  .v-time-picker-footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--vectis-space-2);\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/VToast/VToast.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-toast{padding:var(--vectis-space-3) var(--vectis-space-4);width:var(--toast-width,var(--vectis-control-size-toast-width));max-width:calc(100vw - 2 * var(--vectis-space-4));--toast-accent:var(--tone-text-tinted);align-items:flex-start}.v-toast[data-tone=neutral]{--tone-bg-soft:var(--vectis-color-surface-overlay);--tone-border-soft:var(--vectis-color-border);--toast-accent:var(--vectis-color-text)}.v-toast[data-variant=soft]{background:var(--tone-bg-soft);border:1px solid var(--tone-border-soft);color:var(--vectis-color-text)}.v-toast[data-variant=soft] .v-toast-icon,.v-toast[data-variant=soft] .v-toast-title{color:var(--toast-accent)}.v-toast[data-variant=soft] .v-toast-message{color:var(--vectis-color-text-muted)}.v-toast[data-variant=solid]{background:var(--tone-bg-solid);color:var(--tone-text-solid)}.v-toast[data-variant=soft] .v-toast-close[data-tone]{--tone-text-tinted:var(--toast-accent);--tone-bg-soft:color-mix(in oklab, var(--toast-accent), transparent 88%)}.v-toast[data-variant=solid] .v-toast-close[data-tone]{--tone-text-tinted:currentcolor;--tone-bg-soft:color-mix(in oklab, currentcolor, transparent 85%)}.v-toast-icon{--vectis-icon-size:var(--vectis-icon-size-md);margin-block:calc((var(--banner-line) - var(--vectis-icon-size-md)) / 2)}.v-toast-body{overflow-wrap:anywhere;flex:1;min-width:0}.v-toast-title{font-weight:var(--vectis-font-weight-semibold);margin-block-end:var(--vectis-space-1)}.v-toast-close{--toast-close-height:var(--vectis-control-height-sm);margin-block:calc((var(--banner-line) - var(--toast-close-height)) / 2);margin-inline-end:calc(-1 * var(--vectis-space-2))}}

package/dist/components/VToast/VToast.d.ts

@@ -0,0 +1,24 @@
+import { ToastItem } from './state.js';
+/**
+ * The card one notification is drawn on. It holds no state and decides nothing: the
+ * VToaster renders it, and it is internal to the component — never exported.
+ *
+ * How insistently it is announced follows its tone. A failure or a warning interrupts
+ * whatever a screen reader is saying; anything else waits for a pause. There is a
+ * known trade-off in the polite case: some screen readers miss the FIRST notification
+ * of a stack, because the region that announces it comes into existence already
+ * holding its text. The interruptive ones are always announced.
+ */
+type __VLS_Props = {
+    /** The notification to draw, with all its options already resolved. */
+    item: ToastItem;
+    /** What the close cross does, in words. */
+    closeLabel: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: (id: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((id: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VToast/VToast.js

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

package/dist/components/VToast/VToast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VToast.js","names":[],"sources":["../../../src/components/VToast/VToast.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { check_circle as checkCircleIcon } from '../VIcon/icons/check_circle'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport { error as errorIcon } from '../VIcon/icons/error'\nimport { info as infoIcon } from '../VIcon/icons/info'\nimport { notifications as notificationsIcon } from '../VIcon/icons/notifications'\nimport { warning as warningIcon } from '../VIcon/icons/warning'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport type { ToastItem, ToastTone } from './state'\n\n// @a11y\n/**\n * The card one notification is drawn on. It holds no state and decides nothing: the\n * VToaster renders it, and it is internal to the component — never exported.\n *\n * How insistently it is announced follows its tone. A failure or a warning interrupts\n * whatever a screen reader is saying; anything else waits for a pause. There is a\n * known trade-off in the polite case: some screen readers miss the FIRST notification\n * of a stack, because the region that announces it comes into existence already\n * holding its text. The interruptive ones are always announced.\n */\nconst props = defineProps<{\n  /** The notification to draw, with all its options already resolved. */\n  item: ToastItem\n  /** What the close cross does, in words. */\n  closeLabel: string\n}>()\n\nconst emit = defineEmits<{\n  /**\n   * The reader asked for this notification to go. The card removes nothing itself —\n   * the queue belongs to the VToaster.\n   */\n  close: [id: number]\n}>()\n\nconst role = computed(() =>\n  props.item.tone === 'danger' || props.item.tone === 'warning' ? 'alert' : 'status',\n)\n\nconst DEFAULT_ICONS: Record<ToastTone, IconSource> = {\n  neutral: notificationsIcon,\n  accent: infoIcon,\n  success: checkCircleIcon,\n  danger: errorIcon,\n  warning: warningIcon,\n}\n\n/**\n * The icon to draw: the one the notification asked for, or failing that the one its\n * tone brings. Asking for `false` means no icon at all.\n */\nconst icon = computed(() =>\n  props.item.icon === false\n    ? undefined\n    : iconProps(props.item.icon ?? DEFAULT_ICONS[props.item.tone]),\n)\n</script>\n\n<template>\n  <div\n    class=\"v-banner v-toast v-tone\"\n    :data-tone=\"item.tone\"\n    :data-variant=\"item.variant\"\n    :role=\"role\"\n    :style=\"item.width ? { '--toast-width': item.width } : undefined\"\n  >\n    <VIcon v-if=\"icon\" class=\"v-toast-icon\" v-bind=\"icon\" />\n    <div class=\"v-toast-body\">\n      <p v-if=\"item.title\" class=\"v-toast-title\">{{ item.title }}</p>\n      <p class=\"v-toast-message\">{{ item.message }}</p>\n    </div>\n    <VIconButton\n      v-if=\"item.closable\"\n      class=\"v-toast-close\"\n      :label=\"closeLabel\"\n      size=\"sm\"\n      @click=\"emit('close', item.id)\"\n    >\n      <VIcon :name=\"closeIcon\" />\n    </VIconButton>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The box, the decoration, the typography and the entry motion come from the shared\n     `.v-banner` class set on this same element — the chassis this card has in common\n     with the snackbar, in `styles/banner.css`. What stays here is what the two\n     genuinely differ on: the alignment, the padding, the width, and the whole of the tone\n     painting.\n     `--banner-line`, the one-line alignment unit both use, is defined there. */\n  .v-toast {\n    /* A notification hooks its icon and its cross to the FIRST line of the message: it\n       may carry a title and several lines, and the eye reads the icon against the text it\n       introduces, not against the middle of a paragraph. The `--banner-line` margins are\n       what make that identical to centring on a single line. (VSnackbar centres instead —\n       one short sentence, and a control that would sit in a corner otherwise.) */\n    align-items: flex-start;\n    padding: var(--vectis-space-3) var(--vectis-space-4);\n    width: var(--toast-width, var(--vectis-control-size-toast-width));\n    /* On a narrow screen the card is never wider than the viewport, the stack's own\n       margins deducted. */\n    max-width: calc(100vw - 2 * var(--vectis-space-4));\n  }\n\n  /* The tone table itself lives in styles/tones.css, in a layer below the components,\n     and is shared with VButton and VChip. The rules below read that shared contract\n     directly rather than restating any of its colours.\n\n     One local name survives, and for a precise reason: the close cross rebinds the\n     tone's text colour inside its own subtree further down, so pointing this variable\n     at that one would turn into a self-reference. It is resolved here, on the card, so\n     that the cross inherits a value already computed rather than recomputing it in a\n     context where it no longer means the same thing. */\n  .v-toast {\n    --toast-accent: var(--tone-text-tinted);\n  }\n\n  /* The neutral tone is overridden here, and for the soft variant only. A notification\n     floats above the page rather than sitting in it, so it takes the overlay\n     background and the plain border that goes with it, where the shared table assumes\n     a surface within the page.\n\n     The solid pair is deliberately left alone: its text and surface inversion is\n     canonical across the design system. This block sits one layer above the table, so\n     it wins whatever order the two sheets end up in. */\n  .v-toast[data-tone='neutral'] {\n    --tone-bg-soft: var(--vectis-color-surface-overlay);\n    --tone-border-soft: var(--vectis-color-border);\n    --toast-accent: var(--vectis-color-text);\n  }\n\n  .v-toast[data-variant='soft'] {\n    background: var(--tone-bg-soft);\n    border: 1px solid var(--tone-border-soft);\n    color: var(--vectis-color-text);\n  }\n\n  .v-toast[data-variant='soft'] .v-toast-icon,\n  .v-toast[data-variant='soft'] .v-toast-title {\n    color: var(--toast-accent);\n  }\n\n  .v-toast[data-variant='soft'] .v-toast-message {\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-toast[data-variant='solid'] {\n    background: var(--tone-bg-solid);\n    color: var(--tone-text-solid);\n  }\n\n  /*\n   * The close cross is an ordinary neutral button, recoloured by rebinding the very\n   * variables its own tone table reads. These rules win over that table TWICE — they\n   * are more specific AND they sit in a layer above it — so no sheet order can change\n   * the outcome.\n   *\n   * On a tinted card the cross takes the tone's own accent; on a fully coloured one it\n   * takes the surrounding text colour, which is the only thing guaranteed to be\n   * readable against that background.\n   */\n  .v-toast[data-variant='soft'] .v-toast-close[data-tone] {\n    --tone-text-tinted: var(--toast-accent);\n    --tone-bg-soft: color-mix(in oklab, var(--toast-accent), transparent 88%);\n  }\n\n  .v-toast[data-variant='solid'] .v-toast-close[data-tone] {\n    --tone-text-tinted: currentcolor;\n    --tone-bg-soft: color-mix(in oklab, currentcolor, transparent 85%);\n  }\n\n  .v-toast-icon {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    margin-block: calc((var(--banner-line) - var(--vectis-icon-size-md)) / 2);\n  }\n\n  .v-toast-body {\n    flex: 1;\n    min-width: 0;\n    /* A message may hold something with nowhere to break — a URL, an identifier — and\n       it has to wrap anyway rather than widen the card. */\n    overflow-wrap: anywhere;\n  }\n\n  .v-toast-title {\n    margin-block-end: var(--vectis-space-1);\n    /* The heavier weight marks the title against its own message, which is emphasis\n       rather than a typographic role — hence a font token read directly. */\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n\n  .v-toast-close {\n    /* TRAP — this restates the size the template gives that button, small. The height the\n       button computes for itself lives inside its own subtree, out of reach from here, so\n       the two are written in two places and must be changed together — dropping `compact`\n       from the template without dropping the subtraction here is the exact bug this\n       comment exists for. */\n    --toast-close-height: var(--vectis-control-height-sm);\n    /* The cross is taller than a line of text, so this margin comes out negative —\n       which is also what stops it from pushing the card's padding open. The unit it is\n       measured against is the one-line height `.v-banner` defines. */\n    margin-block: calc((var(--banner-line) - var(--toast-close-height)) / 2);\n    /* The same inline pull-back as VSnackbar's action: both are a `sm` ghost control sitting\n       at the end of a `--vectis-space-4` gutter, and a reader seeing a toast and a snackbar\n       on one page would read two different gutters as a misalignment rather than as two\n       components. Keep the two in step. */\n    margin-inline-end: calc(-1 * var(--vectis-space-2));\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VToast/VToast.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,62 @@
+import e from "../VIcon/VIcon.js";
+import { iconProps as t } from "../VIcon/iconProps.js";
+import n from "../VIconButton/VIconButton.js";
+import { close as r } from "../VIcon/icons/close.js";
+import { check_circle as i } from "../VIcon/icons/check_circle.js";
+import { error as a } from "../VIcon/icons/error.js";
+import { info as o } from "../VIcon/icons/info.js";
+import { notifications as s } from "../VIcon/icons/notifications.js";
+import { warning as c } from "../VIcon/icons/warning.js";
+import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, mergeProps as g, normalizeStyle as _, openBlock as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
+//#region src/components/VToast/VToast.vue?vue&type=script&setup=true&lang.ts
+var S = [
+	"data-tone",
+	"data-variant",
+	"role"
+], C = { class: "v-toast-body" }, w = {
+	key: 0,
+	class: "v-toast-title"
+}, T = { class: "v-toast-message" }, E = /*@__PURE__*/ h({
+	__name: "VToast",
+	props: {
+		item: {},
+		closeLabel: {}
+	},
+	emits: ["close"],
+	setup(h, { emit: E }) {
+		let D = h, O = E, k = l(() => D.item.tone === "danger" || D.item.tone === "warning" ? "alert" : "status"), A = {
+			neutral: s,
+			accent: o,
+			success: i,
+			danger: a,
+			warning: c
+		}, j = l(() => D.item.icon === !1 ? void 0 : t(D.item.icon ?? A[D.item.tone]));
+		return (t, i) => (v(), f("div", {
+			class: "v-banner v-toast v-tone",
+			"data-tone": h.item.tone,
+			"data-variant": h.item.variant,
+			role: k.value,
+			style: _(h.item.width ? { "--toast-width": h.item.width } : void 0)
+		}, [
+			j.value ? (v(), u(e, g({
+				key: 0,
+				class: "v-toast-icon"
+			}, j.value), null, 16)) : d("", !0),
+			p("div", C, [h.item.title ? (v(), f("p", w, y(h.item.title), 1)) : d("", !0), p("p", T, y(h.item.message), 1)]),
+			h.item.closable ? (v(), u(n, {
+				key: 1,
+				class: "v-toast-close",
+				label: h.closeLabel,
+				size: "sm",
+				onClick: i[0] ||= (e) => O("close", h.item.id)
+			}, {
+				default: x(() => [m(e, { name: b(r) }, null, 8, ["name"])]),
+				_: 1
+			}, 8, ["label"])) : d("", !0)
+		], 12, S));
+	}
+});
+//#endregion
+export { E as default };
+
+//# sourceMappingURL=VToast.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VToast.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VToast/VToast.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { check_circle as checkCircleIcon } from '../VIcon/icons/check_circle'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport { error as errorIcon } from '../VIcon/icons/error'\nimport { info as infoIcon } from '../VIcon/icons/info'\nimport { notifications as notificationsIcon } from '../VIcon/icons/notifications'\nimport { warning as warningIcon } from '../VIcon/icons/warning'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport type { ToastItem, ToastTone } from './state'\n\n// @a11y\n/**\n * The card one notification is drawn on. It holds no state and decides nothing: the\n * VToaster renders it, and it is internal to the component — never exported.\n *\n * How insistently it is announced follows its tone. A failure or a warning interrupts\n * whatever a screen reader is saying; anything else waits for a pause. There is a\n * known trade-off in the polite case: some screen readers miss the FIRST notification\n * of a stack, because the region that announces it comes into existence already\n * holding its text. The interruptive ones are always announced.\n */\nconst props = defineProps<{\n  /** The notification to draw, with all its options already resolved. */\n  item: ToastItem\n  /** What the close cross does, in words. */\n  closeLabel: string\n}>()\n\nconst emit = defineEmits<{\n  /**\n   * The reader asked for this notification to go. The card removes nothing itself —\n   * the queue belongs to the VToaster.\n   */\n  close: [id: number]\n}>()\n\nconst role = computed(() =>\n  props.item.tone === 'danger' || props.item.tone === 'warning' ? 'alert' : 'status',\n)\n\nconst DEFAULT_ICONS: Record<ToastTone, IconSource> = {\n  neutral: notificationsIcon,\n  accent: infoIcon,\n  success: checkCircleIcon,\n  danger: errorIcon,\n  warning: warningIcon,\n}\n\n/**\n * The icon to draw: the one the notification asked for, or failing that the one its\n * tone brings. Asking for `false` means no icon at all.\n */\nconst icon = computed(() =>\n  props.item.icon === false\n    ? undefined\n    : iconProps(props.item.icon ?? DEFAULT_ICONS[props.item.tone]),\n)\n</script>\n\n<template>\n  <div\n    class=\"v-banner v-toast v-tone\"\n    :data-tone=\"item.tone\"\n    :data-variant=\"item.variant\"\n    :role=\"role\"\n    :style=\"item.width ? { '--toast-width': item.width } : undefined\"\n  >\n    <VIcon v-if=\"icon\" class=\"v-toast-icon\" v-bind=\"icon\" />\n    <div class=\"v-toast-body\">\n      <p v-if=\"item.title\" class=\"v-toast-title\">{{ item.title }}</p>\n      <p class=\"v-toast-message\">{{ item.message }}</p>\n    </div>\n    <VIconButton\n      v-if=\"item.closable\"\n      class=\"v-toast-close\"\n      :label=\"closeLabel\"\n      size=\"sm\"\n      @click=\"emit('close', item.id)\"\n    >\n      <VIcon :name=\"closeIcon\" />\n    </VIconButton>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The box, the decoration, the typography and the entry motion come from the shared\n     `.v-banner` class set on this same element — the chassis this card has in common\n     with the snackbar, in `styles/banner.css`. What stays here is what the two\n     genuinely differ on: the alignment, the padding, the width, and the whole of the tone\n     painting.\n     `--banner-line`, the one-line alignment unit both use, is defined there. */\n  .v-toast {\n    /* A notification hooks its icon and its cross to the FIRST line of the message: it\n       may carry a title and several lines, and the eye reads the icon against the text it\n       introduces, not against the middle of a paragraph. The `--banner-line` margins are\n       what make that identical to centring on a single line. (VSnackbar centres instead —\n       one short sentence, and a control that would sit in a corner otherwise.) */\n    align-items: flex-start;\n    padding: var(--vectis-space-3) var(--vectis-space-4);\n    width: var(--toast-width, var(--vectis-control-size-toast-width));\n    /* On a narrow screen the card is never wider than the viewport, the stack's own\n       margins deducted. */\n    max-width: calc(100vw - 2 * var(--vectis-space-4));\n  }\n\n  /* The tone table itself lives in styles/tones.css, in a layer below the components,\n     and is shared with VButton and VChip. The rules below read that shared contract\n     directly rather than restating any of its colours.\n\n     One local name survives, and for a precise reason: the close cross rebinds the\n     tone's text colour inside its own subtree further down, so pointing this variable\n     at that one would turn into a self-reference. It is resolved here, on the card, so\n     that the cross inherits a value already computed rather than recomputing it in a\n     context where it no longer means the same thing. */\n  .v-toast {\n    --toast-accent: var(--tone-text-tinted);\n  }\n\n  /* The neutral tone is overridden here, and for the soft variant only. A notification\n     floats above the page rather than sitting in it, so it takes the overlay\n     background and the plain border that goes with it, where the shared table assumes\n     a surface within the page.\n\n     The solid pair is deliberately left alone: its text and surface inversion is\n     canonical across the design system. This block sits one layer above the table, so\n     it wins whatever order the two sheets end up in. */\n  .v-toast[data-tone='neutral'] {\n    --tone-bg-soft: var(--vectis-color-surface-overlay);\n    --tone-border-soft: var(--vectis-color-border);\n    --toast-accent: var(--vectis-color-text);\n  }\n\n  .v-toast[data-variant='soft'] {\n    background: var(--tone-bg-soft);\n    border: 1px solid var(--tone-border-soft);\n    color: var(--vectis-color-text);\n  }\n\n  .v-toast[data-variant='soft'] .v-toast-icon,\n  .v-toast[data-variant='soft'] .v-toast-title {\n    color: var(--toast-accent);\n  }\n\n  .v-toast[data-variant='soft'] .v-toast-message {\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-toast[data-variant='solid'] {\n    background: var(--tone-bg-solid);\n    color: var(--tone-text-solid);\n  }\n\n  /*\n   * The close cross is an ordinary neutral button, recoloured by rebinding the very\n   * variables its own tone table reads. These rules win over that table TWICE — they\n   * are more specific AND they sit in a layer above it — so no sheet order can change\n   * the outcome.\n   *\n   * On a tinted card the cross takes the tone's own accent; on a fully coloured one it\n   * takes the surrounding text colour, which is the only thing guaranteed to be\n   * readable against that background.\n   */\n  .v-toast[data-variant='soft'] .v-toast-close[data-tone] {\n    --tone-text-tinted: var(--toast-accent);\n    --tone-bg-soft: color-mix(in oklab, var(--toast-accent), transparent 88%);\n  }\n\n  .v-toast[data-variant='solid'] .v-toast-close[data-tone] {\n    --tone-text-tinted: currentcolor;\n    --tone-bg-soft: color-mix(in oklab, currentcolor, transparent 85%);\n  }\n\n  .v-toast-icon {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    margin-block: calc((var(--banner-line) - var(--vectis-icon-size-md)) / 2);\n  }\n\n  .v-toast-body {\n    flex: 1;\n    min-width: 0;\n    /* A message may hold something with nowhere to break — a URL, an identifier — and\n       it has to wrap anyway rather than widen the card. */\n    overflow-wrap: anywhere;\n  }\n\n  .v-toast-title {\n    margin-block-end: var(--vectis-space-1);\n    /* The heavier weight marks the title against its own message, which is emphasis\n       rather than a typographic role — hence a font token read directly. */\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n\n  .v-toast-close {\n    /* TRAP — this restates the size the template gives that button, small. The height the\n       button computes for itself lives inside its own subtree, out of reach from here, so\n       the two are written in two places and must be changed together — dropping `compact`\n       from the template without dropping the subtraction here is the exact bug this\n       comment exists for. */\n    --toast-close-height: var(--vectis-control-height-sm);\n    /* The cross is taller than a line of text, so this margin comes out negative —\n       which is also what stops it from pushing the card's padding open. The unit it is\n       measured against is the one-line height `.v-banner` defines. */\n    margin-block: calc((var(--banner-line) - var(--toast-close-height)) / 2);\n    /* The same inline pull-back as VSnackbar's action: both are a `sm` ghost control sitting\n       at the end of a `--vectis-space-4` gutter, and a reader seeing a toast and a snackbar\n       on one page would read two different gutters as a misalignment rather than as two\n       components. Keep the two in step. */\n    margin-inline-end: calc(-1 * var(--vectis-space-2));\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EA0BA,IAAM,IAAQ,GAOR,IAAO,GAQP,IAAO,QACX,EAAM,KAAK,SAAS,YAAY,EAAM,KAAK,SAAS,YAAY,UAAU,QAC5E,GAEM,IAA+C;GACnD,SAAS;GACT,QAAQ;GACR,SAAS;GACT,QAAQ;GACC;EACX,GAMM,IAAO,QACX,EAAM,KAAK,SAAS,KAChB,KAAA,IACA,EAAU,EAAM,KAAK,QAAQ,EAAc,EAAM,KAAK,KAAK,CACjE;yBAIE,EAqBM,OAAA;GApBJ,OAAM;GACL,aAAW,EAAA,KAAK;GAChB,gBAAc,EAAA,KAAK;GACnB,MAAM,EAAA;GACN,OAAK,EAAE,EAAA,KAAK,QAAK,EAAA,iBAAsB,EAAA,KAAK,MAAK,IAAK,KAAA,CAAS;;GAEnD,EAAA,SAAA,EAAA,GAAb,EAAwD,GAAxD,EAAwD;;IAArC,OAAM;MAAuB,EAAA,KAAI,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA;GACpD,EAGM,OAHN,GAGM,CAFK,EAAA,KAAK,SAAA,EAAA,GAAd,EAA+D,KAA/D,GAA+D,EAAjB,EAAA,KAAK,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GACxD,EAAiD,KAAjD,GAAiD,EAAnB,EAAA,KAAK,OAAO,GAAA,CAAA,CAAA,CAAA;GAGpC,EAAA,KAAK,YAAA,EAAA,GADb,EAQc,GAAA;;IANZ,OAAM;IACL,OAAO,EAAA;IACR,MAAK;IACJ,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,SAAU,EAAA,KAAK,EAAE;;qBAEF,CAA3B,EAA2B,GAAA,EAAnB,MAAM,EAAA,CAAA,EAAS,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA"}

package/dist/components/VToast/VToaster.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-toast-stack{gap:var(--vectis-space-3);background:0 0;border:none;flex-direction:column;width:fit-content;margin:0;padding:0;display:flex;overflow:visible}.v-toast-stack[data-placement^=top-]{top:var(--vectis-space-4);--banner-enter-y:calc(-1 * var(--vectis-space-4));flex-direction:column-reverse}.v-toast-stack[data-placement^=bottom-]{bottom:var(--vectis-space-4);--banner-enter-y:var(--vectis-space-4)}.v-toast-stack[data-placement$=-left]{left:var(--vectis-space-4)}.v-toast-stack[data-placement$=-right]{right:var(--vectis-space-4)}.v-toast-stack[data-placement$=-center]{margin-inline:auto;left:0;right:0}.v-toast-stack{opacity:1;transition:opacity var(--vectis-duration-base) var(--vectis-ease-default), overlay var(--vectis-duration-base) allow-discrete, display var(--vectis-duration-base) allow-discrete}.v-toast-stack:not(:popover-open){opacity:0}@starting-style{.v-toast-stack:popover-open{opacity:0}}@media (prefers-reduced-motion:reduce){.v-toast-stack{transition:none}}}

package/dist/components/VToast/VToaster.d.ts

@@ -0,0 +1,42 @@
+import { ToastPlacement } from './state.js';
+/**
+ * Where notifications appear. It is mounted ONCE, at the root of the application, and
+ * from then on any call to `toast()` shows up here.
+ *
+ * It renders one container per corner of the screen rather than one floating box per
+ * notification, and each container simply stacks its notifications with CSS. The
+ * reason is that these boxes are drawn above the whole page, at fixed coordinates and
+ * anchored to nothing: individually they would all land on the same spot, and keeping
+ * them apart would mean measuring and offsetting each one in code. The six containers
+ * exist at all times — empty, they cost nothing and the browser does not display them.
+ *
+ * The JavaScript covers three things the platform does not: putting the queue and the
+ * containers in step, since drawing above the page can only be asked for by calling a
+ * method; the timers that dismiss a notification when its time is up; and pausing
+ * those timers while the pointer rests on a stack, so that something disappearing on a
+ * clock can be held in place long enough to read (WCAG 2.2.1).
+ */
+interface ToasterProps {
+    /** Which corner notifications appear in, unless one of them asks for another. */
+    placement?: ToastPlacement;
+    /**
+     * How long a notification stays, in milliseconds, unless it asks for something else.
+     * A notification given 0 stays until it is dismissed.
+     */
+    duration?: number;
+    /** What the close cross does, in words. It falls back to the design system dictionary. */
+    closeLabel?: string;
+    /**
+     * What screen readers announce for the notification areas themselves, which are
+     * landmarks of the page. It falls back to the design system dictionary.
+     */
+    label?: string;
+}
+declare const __VLS_export: import('vue').DefineComponent<ToasterProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ToasterProps> & Readonly<{}>, {
+    label: string;
+    placement: ToastPlacement;
+    duration: number;
+    closeLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VToast/VToaster.js

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