vectis-ui 0.1.0

package/dist/components/VTimeInput/VTimeInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,385 @@
+import { useLocale as e, useMessages as t } from "../../i18n/state.js";
+import n from "../VPopover/VPopover.js";
+import r from "../VButton/VButton.js";
+import { arrowNavigate as i } from "../../utils/arrowNav.js";
+import { clamp as ee } from "../../utils/number.js";
+import { expand_more as a } from "../VIcon/icons/expand_more.js";
+import { useRootAttrs as o } from "../../composables/useRootAttrs.js";
+import s from "../VToggle/VToggle.js";
+import c from "../VToggle/VToggleItem.js";
+import te from "../VInput/VInput.js";
+import { digitsOf as l } from "../../utils/text.js";
+import { useFieldPanel as ne } from "../../composables/useFieldPanel.js";
+import { useMaskedField as re } from "../../composables/useMaskedField.js";
+import { formatDisplay as ie, formatTime as u, formatTimeMask as d, hourCycleFor as ae, isValidTime as oe, minutesOf as se, parseTime as f, parseTimeMask as ce, snapMinute as le, timeCaret as p, timeList as ue, timeToMask as m, to12h as h, to24h as g } from "../../utils/time.js";
+import de from "../VTimePicker/VTimePicker.js";
+import { schedule as _ } from "../VIcon/icons/schedule.js";
+import { Fragment as fe, computed as v, createBlock as y, createCommentVNode as pe, createElementBlock as b, createElementVNode as me, createTextVNode as he, createVNode as x, defineComponent as ge, isRef as _e, mergeModels as S, mergeProps as ve, normalizeClass as ye, normalizeStyle as be, openBlock as C, ref as w, renderList as xe, toDisplayString as T, unref as E, useId as Se, useModel as Ce, withCtx as D } from "vue";
+//#region src/components/VTimeInput/VTimeInput.vue?vue&type=script&setup=true&lang.ts
+var we = ["data-open", "data-mode"], Te = { class: "v-time-input-row" }, Ee = [
+	"data-value",
+	"aria-selected",
+	"onClick"
+], O = /*@__PURE__*/ ge({
+	inheritAttrs: !1,
+	__name: "VTimeInput",
+	props: /*@__PURE__*/ S({
+		format: { default: void 0 },
+		mode: { default: void 0 },
+		showPicker: {
+			type: Boolean,
+			default: void 0
+		},
+		minuteStep: { default: 1 },
+		locale: { default: void 0 },
+		label: { default: void 0 },
+		hint: { default: void 0 },
+		placeholder: { default: void 0 },
+		size: { default: "md" },
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		clearable: {
+			type: Boolean,
+			default: !0
+		},
+		pickerIcon: { default: () => _ },
+		placement: { default: "bottom-start" }
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(_) {
+		let ge = [
+			"readonly",
+			"input",
+			"list"
+		], S = _, O = Ce(_, "modelValue"), { rootClass: De, rootStyle: Oe, forwardedAttrs: ke } = o(), k = w(null), A = w(null), j = w(null), M = w(null), N = Se(), P = v(() => j.value?.el ?? null), F = v(() => {
+			let e = S.mode ?? "input";
+			return ge.includes(e) ? e : "input";
+		}), I = v(() => F.value === "input"), L = v(() => F.value === "list"), R = v(() => F.value === "readonly" || I.value && S.showPicker === !0), z = v(() => R.value || L.value), Ae = e(), B = v(() => S.locale ?? Ae.value), V = v(() => S.format ?? ae(B.value)), H = w(null), U = v(() => f(O.value)), je = w("AM"), W = v({
+			get: () => {
+				let e = G.value && R.value ? f(H.value) : U.value;
+				return e ? h(e.hour).meridiem : je.value;
+			},
+			set: (e) => {
+				let t = e === "PM" ? "PM" : "AM";
+				je.value = t;
+				let n = U.value;
+				n && (O.value = u(g(h(n.hour).hour, t), n.minute));
+				let r = G.value && R.value ? f(H.value) : null;
+				r && (H.value = u(g(h(r.hour).hour, t), r.minute));
+			}
+		}), Me = v(() => !!U.value), Ne = v(() => O.value ? ie(O.value, B.value, V.value) : "");
+		function Pe() {
+			if (!L.value) {
+				M.value?.focus();
+				return;
+			}
+			let e = A.value?.el;
+			e && $e(e);
+		}
+		let { open: G, openPanel: Fe, closePanel: Ie, onControlClick: Le, onFocusout: Re, onKeydown: ze, onPanelMousedown: Be } = ne({
+			rootEl: k,
+			panelRef: A,
+			fieldEl: j,
+			disabled: () => S.disabled || !z.value,
+			focusInPanel: Pe,
+			focusOnOpen: () => !I.value,
+			onOpen: () => {
+				if (!R.value) return;
+				let e = U.value;
+				if (e) H.value = u(e.hour, e.minute);
+				else {
+					let e = /* @__PURE__ */ new Date();
+					H.value = u(e.getHours(), le(e.getMinutes(), S.minuteStep));
+				}
+				M.value?.reset();
+			},
+			onClose: () => {
+				M.value?.reset();
+			}
+		}), K = !1;
+		function q() {
+			K = !0, Ie(!0), K = !1;
+		}
+		function Ve() {
+			H.value && (O.value = H.value), q();
+		}
+		function He() {
+			q();
+		}
+		function Ue() {
+			O.value = null, I.value && X(""), K = !0, j.value?.focus(), K = !1;
+		}
+		let J = t(), We = () => W.value === "PM" ? "PM" : "AM", { draft: Ge, fieldModel: Y, writeField: X, commitLive: Ke, commitOrRevert: Z, onFieldInput: qe } = re({
+			fieldEl: P,
+			typing: () => I.value,
+			displayText: () => Ne.value,
+			readValue: () => O.value,
+			writeValue: (e) => {
+				O.value = e;
+			},
+			maxDigits: () => 4,
+			format: d,
+			caret: (e, t, n) => p(t, n),
+			parse: (e) => ce(e, V.value, We()),
+			toMask: (e) => m(e, V.value)
+		});
+		function Je(e) {
+			if (!I.value) return;
+			let t = P.value;
+			if (t) {
+				if (e.key === "Enter") {
+					e.preventDefault(), Z(), G.value && q();
+					return;
+				}
+				if (e.key === "ArrowDown" && G.value && R.value) {
+					e.preventDefault(), Pe();
+					return;
+				}
+				if (e.key === "Backspace") {
+					let n = t.selectionStart;
+					if (n !== null && n === t.selectionEnd && n > 0 && !/\d/.test(t.value[n - 1] ?? "")) {
+						e.preventDefault();
+						let r = l(t.value.slice(0, n)).length, i = l(t.value);
+						X(d(i.slice(0, r - 1) + i.slice(r)), p(r - 1)), Ke();
+					}
+					return;
+				}
+				if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && !/\d/.test(e.key)) {
+					e.preventDefault();
+					let n = l(t.value);
+					n.length === 1 && X(d(`0${n}`), 3);
+				}
+			}
+		}
+		function Ye(e) {
+			if (!I.value) return;
+			let t = P.value;
+			if (!t) return;
+			e.preventDefault();
+			let n = (e.clipboardData?.getData("text") ?? "").trim();
+			if (oe(n)) {
+				let e = m(n, V.value);
+				X(e, e.length), n !== O.value && (O.value = n);
+				return;
+			}
+			let r = l(t.value), i = t.selectionStart ?? t.value.length, ee = t.selectionEnd ?? i, a = l(t.value.slice(0, i)).length, o = l(t.value.slice(0, ee)).length, s = l(n), c = (r.slice(0, a) + s + r.slice(o)).slice(0, 4);
+			X(d(c), p(Math.min(a + s.length, c.length), !0)), Ke();
+		}
+		function Xe() {
+			!I.value || K || Fe(!1);
+		}
+		function Ze(e) {
+			if (I.value && e.key === "Escape" && G.value) {
+				e.preventDefault(), q();
+				return;
+			}
+			ze(e);
+		}
+		let Qe = v(() => L.value ? ue(S.minuteStep, B.value, V.value) : []), Q = (e) => [...e.querySelectorAll("[role=\"option\"]")];
+		function $e(e) {
+			let t = Q(e);
+			if (!t.length) return;
+			let n = se(O.value), r = t[n === null ? 0 : ee(Math.round(n / S.minuteStep), 0, t.length - 1)];
+			r?.scrollIntoView?.({ block: "center" }), r?.focus({ preventScroll: !0 });
+		}
+		function $(e) {
+			O.value = e, q();
+		}
+		function et(e) {
+			if (!L.value) return;
+			let t = A.value?.el;
+			if (t) {
+				if (e.key === "Enter" || e.key === " ") {
+					let t = document.activeElement?.closest("[role=\"option\"]")?.dataset.value;
+					if (!t) return;
+					e.preventDefault(), $(t);
+					return;
+				}
+				i(e, t, Q(t), { vertical: !0 });
+			}
+		}
+		let tt = v(() => S.clearable && !S.disabled && (Me.value || I.value && !!Ge.value)), nt = v(() => L.value ? a : R.value ? S.pickerIcon : void 0), rt = v(() => L.value ? J.value.timeInput.openList : J.value.timeInput.openPicker);
+		function it() {
+			G.value ? q() : Fe(!0);
+		}
+		return (e, t) => (C(), b("div", {
+			ref_key: "rootEl",
+			ref: k,
+			class: ye(["v-time-input", E(De)]),
+			style: be(E(Oe)),
+			"data-open": E(G) ? "" : void 0,
+			"data-mode": F.value,
+			onFocusout: t[5] ||= (...e) => E(Re) && E(Re)(...e),
+			onKeydown: Ze
+		}, [me("div", Te, [me("div", {
+			class: "v-time-input-control",
+			onClick: t[1] ||= (...e) => E(Le) && E(Le)(...e)
+		}, [x(te, ve({
+			ref_key: "inputRef",
+			ref: j,
+			modelValue: E(Y),
+			"onUpdate:modelValue": t[0] ||= (e) => _e(Y) ? Y.value = e : null,
+			inputmode: I.value ? "numeric" : void 0,
+			autocomplete: I.value ? "off" : void 0
+		}, E(ke), {
+			readonly: !I.value,
+			label: _.label,
+			hint: _.hint,
+			placeholder: _.placeholder ?? (I.value ? E(J).timeInput.maskPlaceholder : void 0),
+			size: _.size,
+			compact: _.compact,
+			disabled: _.disabled,
+			invalid: _.invalid,
+			clearable: _.clearable,
+			"clear-visible": tt.value,
+			"clear-label": E(J).timeInput.clear,
+			"icon-end": nt.value,
+			"icon-end-label": rt.value,
+			role: z.value ? "combobox" : void 0,
+			"aria-haspopup": z.value ? L.value ? "listbox" : "dialog" : void 0,
+			"aria-expanded": z.value ? E(G) : void 0,
+			"aria-controls": z.value ? E(N) : void 0,
+			"onClick:iconEnd": it,
+			onClear: Ue,
+			onFocus: Xe,
+			onInput: E(qe),
+			onChange: E(Z),
+			onBlur: E(Z),
+			onKeydown: Je,
+			onPaste: Ye
+		}), null, 16, [
+			"modelValue",
+			"inputmode",
+			"autocomplete",
+			"readonly",
+			"label",
+			"hint",
+			"placeholder",
+			"size",
+			"compact",
+			"disabled",
+			"invalid",
+			"clearable",
+			"clear-visible",
+			"clear-label",
+			"icon-end",
+			"icon-end-label",
+			"role",
+			"aria-haspopup",
+			"aria-expanded",
+			"aria-controls",
+			"onInput",
+			"onChange",
+			"onBlur"
+		])]), V.value === "12h" && F.value !== "readonly" ? (C(), y(s, {
+			key: 0,
+			modelValue: W.value,
+			"onUpdate:modelValue": t[2] ||= (e) => W.value = e,
+			class: "v-time-input-meridiem",
+			mandatory: "",
+			variant: "outline",
+			size: _.size,
+			compact: _.compact,
+			label: E(J).timePicker.meridiem
+		}, {
+			default: D(() => [x(c, {
+				value: "AM",
+				label: E(J).timePicker.am
+			}, null, 8, ["label"]), x(c, {
+				value: "PM",
+				label: E(J).timePicker.pm
+			}, null, 8, ["label"])]),
+			_: 1
+		}, 8, [
+			"modelValue",
+			"size",
+			"compact",
+			"label"
+		])) : pe("", !0)]), z.value ? (C(), y(n, {
+			key: 0,
+			id: E(N),
+			ref_key: "panelRef",
+			ref: A,
+			open: E(G),
+			"onUpdate:open": t[4] ||= (e) => _e(G) ? G.value = e : null,
+			mode: "manual",
+			anchor: "--time-input-anchor",
+			placement: _.placement,
+			surface: "",
+			role: L.value ? "listbox" : "dialog",
+			class: ye(L.value ? "v-time-input-list v-control" : "v-time-input-panel"),
+			"data-size": L.value ? _.size : void 0,
+			"data-compact": L.value && _.compact ? "" : void 0,
+			"aria-label": _.label ?? (L.value ? E(J).timeInput.listLabel : E(J).timeInput.pickerLabel),
+			onMousedown: E(Be),
+			onKeydown: et
+		}, {
+			default: D(() => [L.value ? (C(!0), b(fe, { key: 0 }, xe(Qe.value, (e) => (C(), b("button", {
+				key: e.value,
+				type: "button",
+				role: "option",
+				tabindex: "-1",
+				class: "v-time-input-option",
+				"data-value": e.value,
+				"aria-selected": e.value === O.value ? "true" : "false",
+				onClick: (t) => $(e.value)
+			}, T(e.label), 9, Ee))), 128)) : (C(), y(de, {
+				key: 1,
+				ref_key: "pickerRef",
+				ref: M,
+				modelValue: H.value,
+				"onUpdate:modelValue": t[3] ||= (e) => H.value = e,
+				format: V.value,
+				locale: B.value,
+				"minute-step": _.minuteStep,
+				onConfirm: Ve
+			}, {
+				footer: D(() => [x(r, {
+					variant: "ghost",
+					tone: "neutral",
+					onClick: He
+				}, {
+					default: D(() => [he(T(E(J).common.cancel), 1)]),
+					_: 1
+				}), x(r, { onClick: Ve }, {
+					default: D(() => [he(T(E(J).common.confirm), 1)]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, [
+				"modelValue",
+				"format",
+				"locale",
+				"minute-step"
+			]))]),
+			_: 1
+		}, 8, [
+			"id",
+			"open",
+			"placement",
+			"role",
+			"class",
+			"data-size",
+			"data-compact",
+			"aria-label",
+			"onMousedown"
+		])) : pe("", !0)], 46, we));
+	}
+});
+//#endregion
+export { O as default };
+
+//# sourceMappingURL=VTimeInput.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VTimeInput.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VTimeInput/VTimeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useId, watchEffect } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport { schedule as scheduleIcon } from '../VIcon/icons/schedule'\nimport type { IconSource } from '../VIcon/types'\nimport VInput from '../VInput/VInput.vue'\nimport VPopover from '../VPopover/VPopover.vue'\nimport VToggle from '../VToggle/VToggle.vue'\nimport type { ToggleModelValue } from '../VToggle/VToggle.vue'\nimport VToggleItem from '../VToggle/VToggleItem.vue'\nimport VTimePicker from '../VTimePicker/VTimePicker.vue'\nimport type { TimePickerFormat } from '../VTimePicker/VTimePicker.vue'\nimport {\n  formatDisplay,\n  formatTime,\n  formatTimeMask,\n  hourCycleFor,\n  isValidTime,\n  minutesOf,\n  parseTime,\n  parseTimeMask,\n  snapMinute,\n  timeCaret,\n  timeList,\n  timeToMask,\n  to12h,\n  to24h,\n} from '../../utils/time'\nimport type { Meridiem, TimeOption } from '../../utils/time'\nimport { arrowNavigate } from '../../utils/arrowNav'\nimport { clamp } from '../../utils/number'\nimport { isDev } from '../../utils/env'\nimport { digitsOf } from '../../utils/text'\n\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\nimport { useFieldPanel } from '../../composables/useFieldPanel'\nimport { useMaskedField } from '../../composables/useMaskedField'\nimport { useLocale, useMessages } from '../../i18n/state'\n\n// @a11y @core\n/**\n * A field for choosing a time, with an optional panel below it. The shell is the same one\n * VDateInput uses: the panel is opened from code, which is what lets the focus be moved\n * into it, and closed when the focus leaves the component or Escape is pressed.\n *\n * The field comes in three forms. It can be TYPED into, hours and minutes behind a mask,\n * optionally with a picker beside it. It can be read-only, the picker then being the only way\n * in. Or it can offer a LIST of times at a fixed interval, which suits booking a slot far\n * better than pointing at a clock face.\n *\n * The two panels commit differently, and deliberately so. The PICKER works on a draft that\n * only OK writes to the value — Cancel, Escape and the focus leaving all discard it —\n * because dragging a hand across a clock passes over dozens of times nobody meant. The\n * LIST writes immediately: choosing a row there is one deliberate gesture.\n *\n * Whatever is displayed, the value itself is always a 24-hour time.\n */\nexport type TimeInputMode = 'readonly' | 'input' | 'list'\n\nconst MODES: TimeInputMode[] = ['readonly', 'input', 'list']\n\ntype Placement = 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end'\n\ninterface TimeInputProps {\n  /**\n   * Whether times are shown on 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   * Which form the field takes: one that can be TYPED into, a read-only one where the\n   * picker is the only way in — so the picker is forced on there — or a LIST of times at a\n   * fixed interval, where a picker would make no sense.\n   */\n  mode?: TimeInputMode\n  /**\n   * Offers the picker beside a field one can type into: an icon at the end of the field,\n   * and a panel it opens.\n   *\n   * It is left undefined by default rather than set to off, which is what distinguishes\n   * \"not given\" from an explicit refusal — and therefore what allows warning only the\n   * consumer who really asked to remove the picker from a read-only field, where it is the\n   * only way in.\n   */\n  showPicker?: boolean\n  /**\n   * The interval between two times that can be chosen. It applies to the picker, to the\n   * arrow keys and to the rows of the list.\n   */\n  minuteStep?: number\n  /**\n   * A BCP 47 locale, which decides the clock and how a time is written out. It TAKES\n   * PRECEDENCE over the design system's global locale and falls back to it — which is why\n   * it has no literal default: `undefined` has to stay recognizable for the global locale\n   * to have its chance.\n   */\n  locale?: string\n  // From here on: the field.\n  /** The label above the field. */\n  label?: string\n  /** A line of help under the field. */\n  hint?: string\n  /** What the field says while empty. */\n  placeholder?: string\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: 'sm' | 'md' | 'lg'\n  /** Takes 4px off the height. */\n  compact?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Marks the field as invalid — for a rule of your own. */\n  invalid?: boolean\n  /** Offers a cross that empties the value, shown before the end icon. */\n  clearable?: boolean\n  /**\n   * The icon that opens the PICKER, at the end of the field. It has no effect on the list\n   * form, whose chevron follows the combobox convention. The clear cross appears to its\n   * left rather than in its place.\n   */\n  pickerIcon?: IconSource\n  /** Where the panel opens relative to the field. */\n  placement?: Placement\n}\n\nconst props = withDefaults(defineProps<TimeInputProps>(), {\n  format: undefined,\n  // Deliberately left undefined rather than defaulted to the typed mode: that is what\n  // distinguishes \"the prop was not given\" from \"the prop was given this value\", and\n  // therefore what allows warning ONLY the consumer who explicitly asked for something\n  // that cannot work.\n  mode: undefined,\n  showPicker: undefined,\n  minuteStep: 1,\n  locale: undefined,\n  label: undefined,\n  hint: undefined,\n  placeholder: undefined,\n  size: 'md',\n  compact: false,\n  disabled: false,\n  invalid: false,\n  clearable: true,\n  pickerIcon: () => scheduleIcon,\n  placement: 'bottom-start',\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 */\nconst model = defineModel<string | null>({ default: null })\n\n// `class` and `style` stay on the wrapper; everything else goes down to the text field,\n// which is what a consumer's label points at and what assistive technology deals with.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VPopover> | null>(null)\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\nconst pickerRef = ref<InstanceType<typeof VTimePicker> | null>(null)\nconst panelId = useId()\n\n/** The real input inside the field, which the mask and the caret work on. */\nconst fieldEl = computed<HTMLInputElement | null>(() => inputRef.value?.el ?? null)\n\nconst resolvedMode = computed<TimeInputMode>(() => {\n  // TRAP — the default is applied BEFORE the value is checked. A prop that was never\n  // given is not an unknown value, and treating it as one would warn on a bare\n  // `<VTimeInput />`.\n  const mode = props.mode ?? 'input'\n  return MODES.includes(mode) ? mode : 'input'\n})\nconst typing = computed(() => resolvedMode.value === 'input')\nconst isList = computed(() => resolvedMode.value === 'list')\n/**\n * Whether there is a picker. It is forced on a read-only field, where nothing else could\n * fill it; offered beside a field one types into; and meaningless in the list form, which\n * has a panel of its own.\n */\nconst hasPicker = computed(\n  () => resolvedMode.value === 'readonly' || (typing.value && props.showPicker === true),\n)\nconst hasPanel = computed(() => hasPicker.value || isList.value)\n\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)\n\nconst resolvedFormat = computed<TimePickerFormat>(\n  () => props.format ?? hourCycleFor(resolvedLocale.value),\n)\n\n// @devwarn\nif (isDev) {\n  watchEffect(() => {\n    if (props.minuteStep < 1 || 60 % props.minuteStep !== 0)\n      console.warn(`[VTimeInput] minuteStep ${props.minuteStep} — a divisor of 60 is expected.`)\n    if (props.mode !== undefined && !MODES.includes(props.mode))\n      console.warn(\n        `[VTimeInput] unknown mode \"${props.mode}\": use \"input\" (the default), \"readonly\" or \"list\".`,\n      )\n    if (resolvedMode.value === 'readonly' && props.showPicker === false)\n      console.warn(\n        '[VTimeInput] showPicker is forced to true in \"readonly\" mode: with no picker, a read-only field would be impossible to fill.',\n      )\n    if (isList.value && props.showPicker === true)\n      console.warn(\n        '[VTimeInput] showPicker is ignored in \"list\" mode: the list of times is the only panel.',\n      )\n    if (isList.value && props.minuteStep < 5)\n      console.warn(\n        `[VTimeInput] minuteStep ${props.minuteStep} in \"list\" mode would render ${Math.ceil(1440 / props.minuteStep)} rows: a step of 15 or 30 minutes is expected.`,\n      )\n  })\n}\n\n/**\n * The time being built on the clock, in the same canonical form as the value itself.\n * Nothing here reaches the value until OK is pressed — which is the whole reason the\n * picker is bound to THIS rather than to the model.\n */\nconst draft = ref<string | null>(null)\n\nconst modelParts = computed(() => parseTime(model.value))\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 AM/PM control beside the FIELD. It is what the mask needs — the half of the day has\n * to be known while the panel is shut, and in the list form there is no picker at all — so\n * it is rendered in every form but the read-only one, where the picker carries its own.\n */\nconst meridiemModel = computed<ToggleModelValue>({\n  get: () => {\n    // With the picker open it is the DRAFT that is on screen, and this control has to read\n    // the same thing: two controls showing opposite halves of the day until OK is pressed\n    // is the one state that must not happen.\n    const parts = open.value && hasPicker.value ? parseTime(draft.value) : modelParts.value\n    return parts ? to12h(parts.hour).meridiem : pendingMeridiem.value\n  },\n  set: (value) => {\n    const meridiem: Meridiem = value === 'PM' ? 'PM' : 'AM'\n    pendingMeridiem.value = meridiem\n    const parts = modelParts.value\n    // With no time set there is nothing to convert, so the choice is simply REMEMBERED\n    // and applies to the first time typed or chosen.\n    if (parts) model.value = formatTime(to24h(to12h(parts.hour).hour, meridiem), parts.minute)\n    // With the picker open the draft has to follow as well, or OK would write back the\n    // half of the day the reader has just changed.\n    const pending = open.value && hasPicker.value ? parseTime(draft.value) : null\n    if (pending) draft.value = formatTime(to24h(to12h(pending.hour).hour, meridiem), pending.minute)\n  },\n})\n\nconst hasValue = computed(() => !!modelParts.value)\nconst displayText = computed(() =>\n  model.value ? formatDisplay(model.value, resolvedLocale.value, resolvedFormat.value) : '',\n)\n\n// @a11y\n// Where the focus goes when the panel opens.\nfunction focusInPanel() {\n  if (!isList.value) {\n    // The picker publishes where its own focus goes, so nothing here has to know that the\n    // target is a slider — the same arrangement VDateInput has with VDatePicker.\n    pickerRef.value?.focus()\n    return\n  }\n  const panel = panelRef.value?.el\n  if (panel) focusListSelection(panel)\n}\n\n// The whole \"field plus panel\" shell, shared with VDateInput. What is specific to this\n// component is only what happens around it: preparing the draft as the panel opens, and\n// clearing the announcement as it closes.\nconst { open, openPanel, closePanel, onControlClick, onFocusout, onKeydown, onPanelMousedown } =\n  useFieldPanel({\n    rootEl,\n    panelRef,\n    fieldEl: inputRef,\n    // With no panel there is nothing to open. This is the composable's SINGLE cut-off\n    // point, and every way in passes through it — clicking the field, focusing it, the\n    // down arrow, Enter, the icon.\n    disabled: () => props.disabled || !hasPanel.value,\n    focusInPanel,\n    // Beside a field one types into, the panel opens WITHOUT taking the focus, so typing\n    // carries on.\n    focusOnOpen: () => !typing.value,\n    onOpen: () => {\n      // Only the picker works on a draft; the list writes its choice straight away.\n      if (!hasPicker.value) return\n      const parts = modelParts.value\n      if (parts) draft.value = formatTime(parts.hour, parts.minute)\n      else {\n        // Opening on the current time when none is set. Reading the clock is safe here:\n        // this runs from a handler, hence in a browser, never during a render — and it is\n        // why the picker itself never reads it, so that it stays identical on both sides\n        // of hydration. The instant is taken ONCE: two reads could straddle a minute.\n        const now = new Date()\n        draft.value = formatTime(now.getHours(), snapMinute(now.getMinutes(), props.minuteStep))\n      }\n      pickerRef.value?.reset()\n    },\n    onClose: () => {\n      pickerRef.value?.reset()\n    },\n  })\n\n// @a11y\n/**\n * TRAP — closing the panel hands the focus back to the field, and beside a field one\n * types into the panel opens ON FOCUS: the two would chase each other and the panel would\n * never close.\n *\n * This lock covers the focus call, which is synchronous. EVERY close that returns the\n * focus must go through here; closing directly brings the loop straight back.\n */\nlet refocusing = false\nfunction closeAndFocus() {\n  refocusing = true\n  closePanel(true)\n  refocusing = false\n}\n\n/** OK: the ONE route by which the picker's draft becomes the value. */\nfunction confirm() {\n  if (draft.value) model.value = draft.value\n  closeAndFocus()\n}\n\nfunction cancel() {\n  closeAndFocus()\n}\n\n// @a11y\n/*\n * Emptying the value, called by the field as it emits its clear event.\n *\n * TRAP — the focus is taken here, under the lock, on purpose: the field focuses itself\n * immediately afterwards, and focusing an element that ALREADY has the focus emits no\n * event at all. That is what stops the panel reopening. Taking the lock away from this\n * function brings the reopening straight back.\n */\nfunction clearValue() {\n  model.value = null\n  // The typed text is emptied EXPLICITLY: when the value was already empty, nothing\n  // changes, and the guard that keeps the field and the value from chasing each other\n  // would leave the text where it was.\n  if (typing.value) writeField('')\n  refocusing = true\n  inputRef.value?.focus()\n  refocusing = false\n}\n\n// Escape and the focus leaving both close WITHOUT committing, which is the picker's Cancel\n// behaviour: closing never writes the value, and only OK does.\n\nconst m = useMessages()\n\n/* From here on: everything the typed field needs. */\n\nconst currentMeridiem = (): Meridiem => (meridiemModel.value === 'PM' ? 'PM' : 'AM')\n\n/*\n * The mask machinery — the text being typed, the bridge to the value, the reformatting\n * that preserves the caret, the commit and the silent revert — is shared with VDateInput\n * and lives in `useMaskedField`.\n *\n * The time vocabulary is the simpler of the two: four digits, and a separator that is the\n * SAME in every language. That is why the caret can be computed outright here, where a\n * date has to look for a separator it cannot predict; and why nothing distinguishes a\n * final commit from a live one, there being no equivalent of expanding a two-digit year.\n */\nconst {\n  draft: maskDraft,\n  fieldModel,\n  writeField,\n  commitLive,\n  commitOrRevert,\n  onFieldInput,\n} = useMaskedField({\n  fieldEl,\n  typing: () => typing.value,\n  displayText: () => displayText.value,\n  readValue: () => model.value,\n  writeValue: (time) => {\n    model.value = time\n  },\n  maxDigits: () => 4,\n  format: formatTimeMask,\n  caret: (_text, digitsBefore, inserting) => timeCaret(digitsBefore, inserting),\n  parse: (text) => parseTimeMask(text, resolvedFormat.value, currentMeridiem()),\n  toMask: (time) => timeToMask(time, resolvedFormat.value),\n})\n\n// @keyboard @core — the keys the mask itself needs, plus the down arrow, which is the one\n// explicit way from the field into the picker.\nfunction onFieldKeydown(event: KeyboardEvent) {\n  if (!typing.value) return\n  const el = fieldEl.value\n  if (!el) return\n\n  if (event.key === 'Enter') {\n    // Cancelling the default does two things at once: it stops the surrounding form from\n    // being submitted, and it stops the panel this keystroke has just closed from being\n    // reopened as the event travels up to the root.\n    event.preventDefault()\n    commitOrRevert()\n    if (open.value) closeAndFocus()\n    return\n  }\n  if (event.key === 'ArrowDown' && open.value && hasPicker.value) {\n    // The one explicit route from the field into the picker.\n    event.preventDefault()\n    focusInPanel()\n    return\n  }\n  if (event.key === 'Backspace') {\n    const start = el.selectionStart\n    if (\n      start !== null &&\n      start === el.selectionEnd &&\n      start > 0 &&\n      !/\\d/.test(el.value[start - 1] ?? '')\n    ) {\n      // TRAP — the separator is PLACED by the mask and never typed, so erasing one has to\n      // erase the DIGIT before it. Left alone, the mask would write it straight back and\n      // the key would look dead.\n      event.preventDefault()\n      const n = digitsOf(el.value.slice(0, start)).length\n      const digits = digitsOf(el.value)\n      writeField(formatTimeMask(digits.slice(0, n - 1) + digits.slice(n)), timeCaret(n - 1))\n      commitLive()\n    }\n    return\n  }\n  // Typing anything that is not a digit — the separator included, so that \"9:30\" can be\n  // typed exactly as it reads — completes the hour with a leading zero and moves on to\n  // the minutes.\n  if (\n    event.key.length === 1 &&\n    !event.ctrlKey &&\n    !event.metaKey &&\n    !event.altKey &&\n    !/\\d/.test(event.key)\n  ) {\n    event.preventDefault()\n    const digits = digitsOf(el.value)\n    if (digits.length === 1) writeField(formatTimeMask(`0${digits}`), 3)\n  }\n}\n\n/**\n * Pasting. A time recognizable as a whole is adopted as it stands; anything else\n * contributes its digits alone.\n */\nfunction onFieldPaste(event: ClipboardEvent) {\n  if (!typing.value) return\n  const el = fieldEl.value\n  if (!el) return\n  event.preventDefault()\n  const pasted = (event.clipboardData?.getData('text') ?? '').trim()\n  // A pasted 24-hour time is read as one whatever clock is on display: \"19:05\" means\n  // seven in the evening even in a field showing a 12-hour clock.\n  if (isValidTime(pasted)) {\n    const text = timeToMask(pasted, resolvedFormat.value)\n    writeField(text, text.length)\n    if (pasted !== model.value) model.value = pasted\n    return\n  }\n  const digits = digitsOf(el.value)\n  const start = el.selectionStart ?? el.value.length\n  const end = el.selectionEnd ?? start\n  const from = digitsOf(el.value.slice(0, start)).length\n  const to = digitsOf(el.value.slice(0, end)).length\n  const inserted = digitsOf(pasted)\n  const next = (digits.slice(0, from) + inserted + digits.slice(to)).slice(0, 4)\n  writeField(formatTimeMask(next), timeCaret(Math.min(from + inserted.length, next.length), true))\n  commitLive()\n}\n\nfunction onFieldFocus() {\n  if (!typing.value || refocusing) return\n  openPanel(false)\n}\n\nfunction onRootKeydown(event: KeyboardEvent) {\n  if (typing.value && event.key === 'Escape' && open.value) {\n    event.preventDefault()\n    closeAndFocus()\n    return\n  }\n  onKeydown(event)\n}\n\n/* From here on: everything the list form needs. */\n\nconst options = computed<TimeOption[]>(() =>\n  isList.value ? timeList(props.minuteStep, resolvedLocale.value, resolvedFormat.value) : [],\n)\n\n// @keyboard\n/**\n * The rows the arrows may move to, gathered by hand rather than through the shared\n * helper.\n *\n * That helper asks the browser for the computed style of EVERY element it considers, to\n * skip the hidden ones. Across dozens of rows — a list at a five-minute step holds nearly\n * three hundred — that is a real cost, and none of these rows is ever hidden.\n */\nconst optionEls = (panel: HTMLElement) => [\n  ...panel.querySelectorAll<HTMLElement>('[role=\"option\"]'),\n]\n\n// @a11y\n/**\n * On opening, the list is both scrolled and focused onto the current time — or onto the\n * NEAREST row, since a value need not be one of them: \"09:07\" against a list stepping\n * every fifteen minutes matches nothing at all.\n */\nfunction focusListSelection(panel: HTMLElement) {\n  const items = optionEls(panel)\n  if (!items.length) return\n  const minutes = minutesOf(model.value)\n  const index =\n    minutes === null ? 0 : clamp(Math.round(minutes / props.minuteStep), 0, items.length - 1)\n  const el = items[index]\n  // Called optionally, the unit-test environment implementing no scrolling. No scrolling\n  // behaviour is requested either: leaving it out lets the stylesheet decide, which is\n  // what makes the movement respect a reader who has asked for less motion.\n  el?.scrollIntoView?.({ block: 'center' })\n  el?.focus({ preventScroll: true })\n}\n\n/**\n * Choosing a row writes the value straight away and closes — no draft and no footer, the\n * same way choosing a single date closes the calendar.\n */\nfunction selectTime(value: string) {\n  model.value = value\n  closeAndFocus()\n}\n\n// @keyboard @a11y\nfunction onPanelKeydown(event: KeyboardEvent) {\n  if (!isList.value) return\n  const panel = panelRef.value?.el\n  if (!panel) return\n  if (event.key === 'Enter' || event.key === ' ') {\n    // TRAP — cancelling the default here is MANDATORY, and the commit consequently has to\n    // be explicit. Left alone, Enter would fire the row's own click — which closes the\n    // panel — and then travel up to the root WITHOUT being marked as handled, so the\n    // guard that stops a consumed key reopening the panel would not apply, and it would\n    // reopen immediately.\n    const value = (document.activeElement as HTMLElement | null)?.closest<HTMLElement>(\n      '[role=\"option\"]',\n    )?.dataset.value\n    if (!value) return\n    event.preventDefault()\n    selectTime(value)\n    return\n  }\n  arrowNavigate(event, panel, optionEls(panel), { vertical: true })\n}\n\n/*\n * The clear cross and the icon at the end of the field.\n *\n * The cross is the field's own, which renders it BEFORE the end icon rather than in its\n * place — the convention every field in the design system follows. In the list form that\n * gives exactly the cross-and-chevron pairing of a combobox, which is the right thing:\n * the two behave the same way.\n *\n * Whether the cross is shown has to be answered explicitly here: outside the typed mode\n * the field is read-only and would hide it, while the value comes from the panel.\n */\nconst canClear = computed(\n  () =>\n    props.clearable && !props.disabled && (hasValue.value || (typing.value && !!maskDraft.value)),\n)\nconst endIcon = computed<IconSource | undefined>(() =>\n  isList.value ? expandMoreIcon : hasPicker.value ? props.pickerIcon : undefined,\n)\n// @a11y @devwarn\n/*\n * TRAP — the LABEL is defined at all times, even when no icon is rendered at all.\n *\n * The helper detecting a click handler on an icon warns AT SETUP if one is attached\n * without a label, and it has no way of knowing whether an icon exists. Since the\n * listener here is attached permanently and that detection is static, making the label\n * conditional would produce a false warning every time a typed field without a picker is\n * mounted.\n */\nconst endIconLabel = computed(() =>\n  isList.value ? m.value.timeInput.openList : m.value.timeInput.openPicker,\n)\n\nfunction onEndIcon() {\n  if (open.value) closeAndFocus()\n  else openPanel(true)\n}\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-time-input\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-open=\"open ? '' : undefined\"\n    :data-mode=\"resolvedMode\"\n    @focusout=\"onFocusout\"\n    @keydown=\"onRootKeydown\"\n  >\n    <div class=\"v-time-input-row\">\n      <div class=\"v-time-input-control\" @click=\"onControlClick\">\n        <!-- The field is declared a combobox rather than left as the plain text box it\n             implicitly is, because a text box may not carry the attribute saying whether\n             something is expanded — the same reasoning as in VDateInput. Here it also\n             agrees with the list form, where what the field opens really is a list. -->\n        <VInput\n          ref=\"inputRef\"\n          v-model=\"fieldModel\"\n          :inputmode=\"typing ? 'numeric' : undefined\"\n          :autocomplete=\"typing ? 'off' : undefined\"\n          v-bind=\"forwardedAttrs\"\n          :readonly=\"!typing\"\n          :label=\"label\"\n          :hint=\"hint\"\n          :placeholder=\"placeholder ?? (typing ? m.timeInput.maskPlaceholder : undefined)\"\n          :size=\"size\"\n          :compact=\"compact\"\n          :disabled=\"disabled\"\n          :invalid=\"invalid\"\n          :clearable=\"clearable\"\n          :clear-visible=\"canClear\"\n          :clear-label=\"m.timeInput.clear\"\n          :icon-end=\"endIcon\"\n          :icon-end-label=\"endIconLabel\"\n          :role=\"hasPanel ? 'combobox' : undefined\"\n          :aria-haspopup=\"hasPanel ? (isList ? 'listbox' : 'dialog') : undefined\"\n          :aria-expanded=\"hasPanel ? open : undefined\"\n          :aria-controls=\"hasPanel ? panelId : undefined\"\n          @click:icon-end=\"onEndIcon\"\n          @clear=\"clearValue\"\n          @focus=\"onFieldFocus\"\n          @input=\"onFieldInput\"\n          @change=\"commitOrRevert\"\n          @blur=\"commitOrRevert\"\n          @keydown=\"onFieldKeydown\"\n          @paste=\"onFieldPaste\"\n        />\n      </div>\n\n      <!-- The AM/PM control beside the field, which the two typed forms cannot do without:\n           the mask needs the half of the day while the panel is shut, and the list form\n           has no picker at all. It is dropped in the READ-ONLY form alone, where the\n           picker is the only way in and carries its own.\n\n           It stays INSIDE the component's root: clicking it must not count as the focus\n           leaving, which would close the panel under the reader's hand. -->\n      <VToggle\n        v-if=\"resolvedFormat === '12h' && resolvedMode !== 'readonly'\"\n        v-model=\"meridiemModel\"\n        class=\"v-time-input-meridiem\"\n        mandatory\n        variant=\"outline\"\n        :size=\"size\"\n        :compact=\"compact\"\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    <!-- With no panel rendered there is nothing to hold a reference to, and the open state\n         — which is fed by the panel's own events — can no longer become true. The absence\n         of a panel is therefore self-enforcing. -->\n    <VPopover\n      v-if=\"hasPanel\"\n      :id=\"panelId\"\n      ref=\"panelRef\"\n      v-model:open=\"open\"\n      mode=\"manual\"\n      anchor=\"--time-input-anchor\"\n      :placement=\"placement\"\n      surface\n      :role=\"isList ? 'listbox' : 'dialog'\"\n      :class=\"isList ? 'v-time-input-list v-control' : 'v-time-input-panel'\"\n      :data-size=\"isList ? size : undefined\"\n      :data-compact=\"isList && compact ? '' : undefined\"\n      :aria-label=\"label ?? (isList ? m.timeInput.listLabel : m.timeInput.pickerLabel)\"\n      @mousedown=\"onPanelMousedown\"\n      @keydown=\"onPanelKeydown\"\n    >\n      <!-- The list: rows the focus really moves between, as in a menu or a calendar —\n           unlike VCombobox, where the focus stays in the field — and a choice written\n           straight away on a click or on Enter. -->\n      <template v-if=\"isList\">\n        <button\n          v-for=\"option in options\"\n          :key=\"option.value\"\n          type=\"button\"\n          role=\"option\"\n          tabindex=\"-1\"\n          class=\"v-time-input-option\"\n          :data-value=\"option.value\"\n          :aria-selected=\"option.value === model ? 'true' : 'false'\"\n          @click=\"selectTime(option.value)\"\n        >\n          {{ option.label }}\n        </button>\n      </template>\n\n      <!-- The picker works on the DRAFT and not on the value, which is what makes OK the\n           only way in: Cancel, Escape and the focus leaving simply drop it. The two\n           actions are handed to its own footer slot, since they belong to this panel\n           rather than to a clock shown on its own. -->\n      <VTimePicker\n        v-else\n        ref=\"pickerRef\"\n        v-model=\"draft\"\n        :format=\"resolvedFormat\"\n        :locale=\"resolvedLocale\"\n        :minute-step=\"minuteStep\"\n        @confirm=\"confirm\"\n      >\n        <template #footer>\n          <VButton variant=\"ghost\" tone=\"neutral\" @click=\"cancel\">{{ m.common.cancel }}</VButton>\n          <VButton @click=\"confirm\">{{ m.common.confirm }}</VButton>\n        </template>\n      </VTimePicker>\n    </VPopover>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-time-input {\n    /* Confines the anchor name to this instance. It is declared on the root because that\n       is the common ancestor of the field and the panel. */\n    anchor-scope: --time-input-anchor;\n    display: block;\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /* The row holding the field: the field takes whatever room is left, and the AM/PM\n     control keeps its natural width. */\n  .v-time-input-row {\n    display: flex;\n    align-items: stretch;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-time-input-control {\n    anchor-name: --time-input-anchor;\n    flex: 1;\n    /* Without this the field would refuse to shrink below its own content and would\n       overflow the row. */\n    min-inline-size: 0;\n    cursor: pointer;\n  }\n\n  /* A field one types into shows the text cursor rather than the pointer a clickable\n     control shows. Its figures are also given equal widths: with proportional ones the\n     text shifts as digits are typed, and the caret appears to jitter. */\n  .v-time-input[data-mode='input'] .v-time-input-control {\n    cursor: text;\n  }\n\n  .v-time-input[data-mode='input'] .v-input-control {\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* The AM/PM control lines up with the FIELD and not with the whole block, which also\n     stacks a label above and a hint below it. Those two are compensated with margins\n     derived from their own type, so the control sits exactly beside the field whatever\n     the field is given. */\n  .v-time-input-meridiem {\n    flex: none;\n    align-self: center;\n  }\n\n  .v-time-input-row:has(.v-input-label) .v-time-input-meridiem {\n    margin-block-start: calc(\n      var(--vectis-text-label-size) * var(--vectis-text-label-leading) + var(--vectis-space-1)\n    );\n  }\n\n  .v-time-input-row:has(.v-input-hint) .v-time-input-meridiem {\n    margin-block-end: calc(\n      var(--vectis-text-caption-size) * var(--vectis-text-caption-leading) + var(--vectis-space-1)\n    );\n  }\n\n  /* The anchoring and the panel's surface both come from VPopover; what is left here is\n     the padding around the picker. The picker brings its own layout — including the gap\n     between its parts and the centring of the face — so nothing of that is declared here.\n\n     TRAP — declaring a display here overrides the browser's own rule hiding a closed\n     popover. What closes it back is the shared guard on the overlay class, which is more\n     specific than anything a component can write.\n\n     The selector compounds two classes VPopover puts on the same element, because the\n     padding is also declared by the shared panel class: at equal specificity the winner\n     would be whichever sheet the consumer's bundler put last. The size attribute cannot\n     serve that purpose here — the picker's panel carries none. */\n  .v-popover-panel.v-time-input-panel {\n    display: flex;\n    flex-direction: column;\n    width: max-content;\n    padding: var(--vectis-space-3);\n    color: var(--vectis-color-text);\n  }\n\n  /* The list's surface comes from the shared panel class, and its rows read their\n     dimensions from the size class set on the PANEL. What stays here are the panel's own\n     dimensions, which the shared class deliberately declares none of. */\n  .v-time-input-list {\n    min-inline-size: anchor-size(width);\n    max-block-size: var(--vectis-control-size-time-input-list-max-block);\n    overflow: auto;\n  }\n\n  .v-time-input-option {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    min-height: var(--control-height);\n    padding: var(--vectis-space-1) var(--control-padding-inline);\n    border: none;\n    border-radius: var(--vectis-radius-sm);\n    background: transparent;\n    color: var(--vectis-color-text);\n    font-family: inherit;\n    font-size: var(--control-font-size);\n    line-height: var(--vectis-text-body-md-leading);\n    font-variant-numeric: tabular-nums;\n    text-align: start;\n    cursor: pointer;\n  }\n\n  .v-time-input-option:hover {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  /* The focus ring is drawn INSIDE the row: the panel scrolls, and a ring sitting outside\n     it would be cropped on the first and last rows. */\n  .v-time-input-option:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-time-input-option[aria-selected='true'] {\n    background: var(--vectis-color-accent-surface);\n    color: var(--vectis-color-accent-text);\n  }\n\n  .v-time-input-footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--vectis-space-2);\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VTimePicker/VTimePicker.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-time-picker{gap:var(--vectis-space-4);width:max-content;font-family:var(--vectis-text-family);color:var(--vectis-color-text);flex-direction:column;display:flex}.v-time-picker-header{justify-content:center;align-items:center;gap:var(--vectis-space-3);display:flex}.v-time-picker-time{justify-content:center;align-items:center;gap:var(--vectis-space-2);direction:ltr;display:flex}.v-time-picker-cell[data-size]{width:var(--control-height);font-size:var(--vectis-text-heading-1-size);font-weight:var(--vectis-text-heading-2-weight);font-variant-numeric:tabular-nums}.v-time-picker-sep{font-size:var(--vectis-text-heading-2-size);color:var(--vectis-color-text);-webkit-user-select:none;user-select:none}.v-time-picker-meridiem{flex:none}.v-time-picker-face{inline-size:var(--vectis-control-size-time-picker-dial);block-size:var(--vectis-control-size-time-picker-dial);border-radius:var(--vectis-radius-pill);background:var(--vectis-color-surface-muted);touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;--dial-radius:calc(var(--vectis-control-size-time-picker-dial) / 2 - var(--vectis-control-size-time-picker-number) / 2);align-self:center;position:relative}.v-time-picker-face:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-time-picker-number{left:calc(50% + var(--dial-radius) * sin(var(--dial-turn) * 1turn));top:calc(50% - var(--dial-radius) * cos(var(--dial-turn) * 1turn));inline-size:var(--vectis-control-size-time-picker-number);block-size:var(--vectis-control-size-time-picker-number);border-radius:var(--vectis-radius-pill);font-size:var(--vectis-text-body-lg-size);color:var(--vectis-color-text);z-index:1;pointer-events:none;place-items:center;display:grid;position:absolute;translate:-50% -50%}.v-time-picker-number[data-ring=inner],.v-time-picker-hand[data-ring=inner]{--dial-radius:calc(var(--vectis-control-size-time-picker-dial) / 2 - var(--vectis-control-size-time-picker-number) * 1.5)}.v-time-picker-number[data-ring=inner]{font-size:var(--vectis-text-body-md-size);color:var(--vectis-color-text-muted)}.v-time-picker-number[data-selected]{color:var(--vectis-color-text-on-accent)}.v-time-picker-hand{left:calc(50% - var(--vectis-control-size-time-picker-hand) / 2);inline-size:var(--vectis-control-size-time-picker-hand);block-size:var(--dial-radius);background:var(--vectis-color-accent);transform-origin:50% 100%;rotate:calc(var(--dial-turn) * 1turn);position:absolute;bottom:50%}.v-time-picker-hand:before{content:"";inline-size:var(--vectis-control-size-time-picker-number);block-size:var(--vectis-control-size-time-picker-number);border-radius:var(--vectis-radius-pill);background:var(--vectis-color-accent);transition:inline-size var(--vectis-duration-fast) var(--vectis-ease-default), block-size var(--vectis-duration-fast) var(--vectis-ease-default);position:absolute;top:0;left:50%;translate:-50% -50%}.v-time-picker-hand[data-minor]:before{inline-size:var(--vectis-control-size-time-picker-hand-minor);block-size:var(--vectis-control-size-time-picker-hand-minor)}.v-time-picker-center{inline-size:var(--vectis-control-size-time-picker-center);block-size:var(--vectis-control-size-time-picker-center);border-radius:var(--vectis-radius-pill);background:var(--vectis-color-accent);position:absolute;top:50%;left:50%;translate:-50% -50%}.v-time-picker-footer{justify-content:flex-end;align-items:center;gap:var(--vectis-space-2);display:flex}@media (prefers-reduced-motion:reduce){.v-time-picker-hand:before{transition:none}}}

package/dist/components/VTimePicker/VTimePicker.d.ts

@@ -0,0 +1,89 @@
+import { HourFormat } from '../../utils/time.js';
+/**
+ * A clock shown directly in the page, for choosing a time. It is the hour-and-minute
+ * counterpart of VDatePicker: VTimeInput does no more than dress it in a text field and a
+ * popover, and it is perfectly usable on its own.
+ *
+ * It is read in three parts. Two large numerals at the top say what has been chosen so
+ * far, and switch between adjusting the hour and adjusting the minutes; on a 12-hour clock
+ * the choice between morning and afternoon sits beside them, since it is read as part of
+ * that same time. Below them is the face itself, where one points at a time rather than
+ * stepping through it.
+ *
+ * Nothing native covers choosing a value by pointing at an angle, so the JavaScript does
+ * two things: it turns a point on the face into a time — measuring the face once, then
+ * pure trigonometry that lives in `utils/time` — and it implements the keyboard of a
+ * slider, the arrows and the Home, End and Page keys.
+ *
+ * Everything one SEES is CSS: the numerals are placed around the circle, and the hand is
+ * turned, from a single unitless fraction of a turn written inline.
+ *
+ * There is exactly ONE focusable element on the face, and it is announced as a slider. The
+ * numerals are visual markers hidden from screen readers, reached by the pointer's angle
+ * rather than one cell at a time — which is why the whole spoken value has to be carried
+ * by that one element.
+ */
+export type TimePickerFormat = HourFormat;
+/** Which of the two halves of a time is being adjusted. */
+export type TimePickerStep = 'hour' | 'minute';
+interface TimePickerProps {
+    /**
+     * Whether the face shows a 12- or a 24-hour clock. Left out, the reader's language
+     * decides, which is almost always what one wants.
+     */
+    format?: TimePickerFormat;
+    /**
+     * A BCP 47 locale, which decides the clock. It TAKES PRECEDENCE over the design
+     * system's global locale and falls back to it — which is why it has no literal default:
+     * `undefined` has to stay recognizable for the global locale to have its chance.
+     */
+    locale?: string;
+    /** The interval the minutes snap to, both when dragging and with the arrow keys. */
+    minuteStep?: number;
+}
+type __VLS_Props = TimePickerProps;
+type __VLS_Slots = {
+    /** A strip at the foot of the clock — the place for actions such as Cancel and OK. */
+    footer?(): unknown;
+};
+type __VLS_ModelProps = {
+    /**
+     * The time, always as a 24-hour "HH:mm" string whatever clock is displayed. A consumer
+     * therefore never has to know which clock the reader's language uses.
+     *
+     * With no value at all the clock shows midnight. It is deliberately NOT the current time:
+     * reading the clock while rendering would make a page drawn on a server disagree with the
+     * same page in the browser. A component that wants to open on the current time sets it
+     * from a handler — which is exactly what VTimeInput does.
+     */
+    modelValue?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    /** Moves the focus onto the clock face, which is what the arrow keys drive. */
+    focus: (options?: FocusOptions) => void | undefined;
+    /**
+     * Puts the clock back on the hour and clears the announcement, WITHOUT announcing
+     * anything itself. A component holding this one in a panel calls it as the panel opens
+     * and closes, so that every visit starts on the hour.
+     */
+    reset: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    confirm: () => any;
+    "update:modelValue": (value: string | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onConfirm?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {
+    minuteStep: number;
+    format: TimePickerFormat;
+    locale: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VTimePicker/VTimePicker.js

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