vectis-ui 0.1.0 → 0.8.0

package/dist/utils/time.d.ts

@@ -25,59 +25,63 @@ export declare function to12h(hour24: number): {
  * gives the hour on the 24-hour clock — 12 in the morning is 0, 12 in the afternoon is 12.
  */
 export declare function to24h(hour12: number, meridiem: Meridiem): number;
+/**
+ * The same hour moved into the other half of the day, or left where it is: 9 with PM gives
+ * 21, and 21 with PM stays 21. It is what an AM/PM control does to the hour it qualifies.
+ */
+export declare function hourWithMeridiem(hour24: number, meridiem: Meridiem): number;
+/**
+ * A canonical time moved into a half of the day, its minutes untouched, or `null` when it is
+ * not a time at all: `'09:30'` with PM gives `'21:30'`.
+ */
+export declare function withMeridiem(time: string | null | undefined, meridiem: Meridiem): string | null;
+/**
+ * Whether a language counts the hours to twelve, with a morning and an afternoon, or
+ * straight to twenty-four. It is the browser that knows, and it is asked.
+ *
+ * A language tag it cannot make sense of falls back to the 24-hour clock rather than
+ * failing.
+ */
 export declare function hourCycleFor(locale: string): HourFormat;
 /**
- * A time written out for a reader — "19:05", or "7:05 PM".
+ * A time written out for a reader: "19:05", or "7:05 PM".
  *
- * The choice of clock is imposed on the browser rather than left to it, so that the text
- * follows what the component settled on. A consumer may ask for a 24-hour clock in a
- * language that would have chosen otherwise, and their choice must be the one that shows.
+ * `hourCycle` is imposed rather than left to `Intl`, so the text follows what the component
+ * settled on: a consumer asking for a 24-hour clock in a locale that would choose otherwise
+ * must get theirs.
  */
-export declare function formatDisplay(time: string, locale: string, format: HourFormat): string;
+export declare function formatTimeDisplay(time: string, locale: string, format: HourFormat): string;
 /**
- * Snaps a minute to the nearest one the component allows — every five minutes, say — and
- * brings it back inside the hour.
+ * Snaps a minute to the nearest allowed step and wraps it back inside the hour.
  *
- * Both ends need that last part: 58 minutes snapped to five-minute steps lands on 60,
- * which is 0, and stepping back from 0 with the keyboard goes through minus one, which is
- * 59.
+ * Both ends need the wrap: 58 snapped to five-minute steps lands on 60, which is 0, and
+ * stepping back from 0 with the keyboard passes through -1, which is 59.
  */
 export declare function snapMinute(minute: number, step: number): number;
 /**
- * Where a finger landed on the clock face, given as an offset from the centre, becomes
- * which mark it was pointing at.
- *
- * The marks are numbered from the twelve o'clock position and go round clockwise, and the
- * nearest one wins. The offsets are the ones the screen uses, where going DOWN is
- * positive, which is why the vertical one is negated to measure the angle from the top.
+ * Which mark a pointer offset from the dial's centre is aiming at. Marks are numbered
+ * clockwise from twelve o'clock and the nearest wins. `dy` is negated because screen
+ * coordinates grow DOWNWARD and the angle is measured from the top.
  */
 export declare function angleToIndex(dx: number, dy: number, segments: number): number;
 /** How far from the centre a finger landed, as a fraction: nothing at the centre, one at the edge. */
 export declare function distanceFraction(dx: number, dy: number, radius: number): number;
 /**
- * How close to the centre a finger has to land for it to be aiming at the INNER ring of
- * numbers, the one holding the small hours of a 24-hour clock. It is the halfway mark
- * between the two rings of numerals.
+ * How close to the centre a pointer must land to be aiming at the INNER ring, the one
+ * holding the small hours of a 24-hour dial: the halfway mark between the two rings.
  *
- * TRAP — the number is DERIVED from the dial's size and the size of a numeral, both of
- * which are decided in the stylesheet: a dial of 256px across and numerals of 48px put
- * the two rings' centres at 104px and 56px from the middle, whose halfway point is
- * 0.625 of the radius. Changing either size in the CSS without changing this leaves the
- * threshold between two rings it no longer separates, and a tap near the boundary quietly
- * sets the wrong hour.
+ * TRAP — the number is DERIVED from the dial tokens. A 256px dial with 48px numerals puts
+ * the rings' centres at 104px and 56px from the middle, whose midpoint is 0.625 of the
+ * radius. Change either token without changing this and the threshold no longer separates
+ * the two rings: a tap near the boundary quietly sets the wrong hour.
  */
 export declare const DIAL_INNER_THRESHOLD = 0.625;
 /**
- * Which hour a mark stands for, on a dial laid out as two rings: the outer one carries 12
- * then 1 to 11, the inner one carries midnight then 13 to 23. The first mark of each is
- * the one at the twelve o'clock position.
+ * Which hour a mark stands for on the two-ring dial: outer carries 12 then 1-11, inner
+ * carries 00 then 13-23. Index 0 of each is the mark at twelve o'clock.
  */
 export declare function dialIndexToHour24(index: number, ring: 'outer' | 'inner'): number;
-/**
- * The way back, which is what tells the hand where to point: midnight is the top of the
- * inner ring, noon the top of the outer one, and three in the afternoon the third mark of
- * the inner ring.
- */
+/** The way back, which is what tells the hand where to point. */
 export declare function hour24ToDial(hour: number): {
     index: number;
     ring: 'outer' | 'inner';
@@ -88,21 +92,14 @@ export interface TimeOption {
     /** The same time written out for the reader: "07:30", or "7:30 AM". */
     label: string;
 }
-/**
- * A time as a count of minutes since midnight, or nothing if it is not a time. It is what
- * gives a time its position in a list.
- */
+/** A time as minutes since midnight, `null` if it is not one — its position in a list. */
 export declare function minutesOf(time: string | null | undefined): number | null;
 /**
- * Every time of the day at a given interval, from midnight up to the last one before the
- * next.
+ * Every time of the day at a given interval, midnight to the last one before the next.
  *
- * There is deliberately no earliest or latest here, because the time picker itself has
- * none: do not invent one.
- *
- * An interval that makes no sense — nothing, a fraction, more than an hour — falls back
- * to one an hour. The list has to stay FINITE even when the warning the component prints
- * about it was ignored, since an interval of zero would build times for ever.
+ * There is deliberately no earliest or latest, VTimePicker having none: do not invent one.
+ * A nonsensical step — zero, a fraction, more than an hour — falls back to hourly, so the
+ * list stays FINITE even when the component's warning about it was ignored.
  */
 export declare function timeList(step: number, locale: string, format: HourFormat): TimeOption[];
 /**
@@ -111,28 +108,23 @@ export declare function timeList(step: number, locale: string, format: HourForma
  */
 export declare function formatTimeMask(digits: string): string;
 /**
- * Where the caret belongs so as to sit just after a given number of digits.
- *
- * It is a plain formula rather than a scan of the text, because a time's separator is
- * always in the same place — which is exactly what the date's equivalent cannot assume,
- * since the order and the width of its parts change from one language to the next.
+ * Where the caret belongs to sit just after `n` digits. A closed formula rather than
+ * `date.ts`'s scan, the colon always being in the same place.
  *
- * The flag says something was INSERTED, and the caret then steps over the colon into the
- * minutes. On a deletion it stays in FRONT of it, or the next press of the key would step
- * over the colon instead of erasing a digit, and the key would appear to do nothing.
+ * `skipSeparator` means something was INSERTED, and the caret then steps over the colon
+ * into the minutes. On a DELETION it stays in front of it, or the next Backspace steps
+ * over the colon instead of erasing a digit and the key appears to do nothing.
  */
 export declare function timeCaret(n: number, skipSeparator?: boolean): number;
 /**
- * Writes a canonical time into the field, in whichever form is being SHOWN. On a 12-hour
- * clock the hour is brought back into the range 1 to 12: which half of the day it is
- * belongs to the pair of buttons beside the field, and never to the text itself.
+ * A canonical time written into the field in whichever form is SHOWN. On a 12-hour clock the
+ * hour comes back into 1-12: the meridiem belongs to the toggle beside the field, never to
+ * the text.
  */
 export declare function timeToMask(time: string | null | undefined, format: HourFormat): string;
 /**
- * Reads what has been typed back into a canonical time, or nothing at all when it is
- * incomplete, too long, or not a time anyone could point to.
- *
- * On a 12-hour clock the half of the day comes from the pair of buttons beside the field.
- * This is the ONE place where what was typed and that choice meet.
+ * What was typed read back into a canonical time, or `null` when it is incomplete, too long
+ * or not a real time. On a 12-hour clock this is the ONE place the typed digits and the
+ * meridiem toggle meet.
  */
 export declare function parseTimeMask(text: string, format: HourFormat, meridiem?: Meridiem): string | null;

package/dist/utils/time.js

@@ -1,39 +1,44 @@
 import { digitsOf as e, pad2 as t } from "./text.js";
+import { memo as n } from "./memo.js";
 //#region src/utils/time.ts
-var n = /^([01]\d|2[0-3]):([0-5]\d)$/;
-function r(e) {
-	return typeof e == "string" && n.test(e);
-}
+var r = /^([01]\d|2[0-3]):([0-5]\d)$/;
 function i(e) {
-	if (!r(e)) return null;
+	return typeof e == "string" && r.test(e);
+}
+function a(e) {
+	if (!i(e)) return null;
 	let [t, n] = e.split(":");
 	return {
 		hour: Number(t),
 		minute: Number(n)
 	};
 }
-function a(e, n) {
+function o(e, n) {
 	return `${t(e)}:${t(n)}`;
 }
-function o(e) {
+function s(e) {
 	let t = e >= 12 ? "PM" : "AM";
 	return {
 		hour: e % 12 == 0 ? 12 : e % 12,
 		meridiem: t
 	};
 }
-function s(e, t) {
+function c(e, t) {
 	let n = e % 12;
 	return t === "PM" ? n + 12 : n;
 }
-var c = /* @__PURE__ */ new Map();
-function l(e) {
-	let t = c.get(e);
-	if (t) return t;
-	let n = u(e);
-	return c.set(e, n), n;
+function l(e, t) {
+	return c(s(e).hour, t);
+}
+function u(e, t) {
+	let n = a(e);
+	return n ? o(l(n.hour, t), n.minute) : null;
+}
+var d = /* @__PURE__ */ new Map();
+function f(e) {
+	return n(d, e, () => p(e));
 }
-function u(e) {
+function p(e) {
 	try {
 		let { hourCycle: t } = new Intl.DateTimeFormat(e, { hour: "numeric" }).resolvedOptions();
 		return t === "h11" || t === "h12" ? "12h" : "24h";
@@ -41,35 +46,34 @@ function u(e) {
 		return "24h";
 	}
 }
-var d = /* @__PURE__ */ new Map();
-function f(e, t) {
-	let n = `${e}|${t}`, r = d.get(n);
-	return r || (r = new Intl.DateTimeFormat(e, {
+var m = /* @__PURE__ */ new Map();
+function h(e, t) {
+	return n(m, `${e}|${t}`, () => new Intl.DateTimeFormat(e, {
 		hour: "numeric",
 		minute: "2-digit",
 		hourCycle: t === "12h" ? "h12" : "h23",
 		timeZone: "UTC"
-	}), d.set(n, r)), r;
+	}));
 }
-function p(e, t, n) {
-	let r = i(e);
-	return r ? f(t, n).format(Date.UTC(2021, 0, 1, r.hour, r.minute)) : "";
+function g(e, t, n) {
+	let r = a(e);
+	return r ? h(t, n).format(Date.UTC(2021, 0, 1, r.hour, r.minute)) : "";
 }
-function m(e, t) {
+function _(e, t) {
 	return ((t <= 1 ? Math.round(e) : Math.round(e / t) * t) % 60 + 60) % 60;
 }
-function h(e, t, n) {
+function v(e, t, n) {
 	let r = (Math.atan2(e, -t) / (2 * Math.PI) + 1) % 1;
 	return Math.round(r * n) % n;
 }
-function g(e, t, n) {
+function y(e, t, n) {
 	return n > 0 ? Math.hypot(e, t) / n : 0;
 }
-var _ = .625;
-function v(e, t) {
+var b = .625;
+function x(e, t) {
 	return t === "outer" ? e === 0 ? 12 : e : e === 0 ? 0 : e + 12;
 }
-function y(e) {
+function S(e) {
 	return e === 0 ? {
 		index: 0,
 		ring: "inner"
@@ -84,40 +88,40 @@ function y(e) {
 		ring: "outer"
 	};
 }
-function b(e) {
-	let t = i(e);
+function C(e) {
+	let t = a(e);
 	return t ? t.hour * 60 + t.minute : null;
 }
-function x(e, t, n) {
+function w(e, t, n) {
 	let r = Number.isInteger(e) && e >= 1 && e <= 60 ? e : 60, i = [];
 	for (let e = 0; e < 1440; e += r) {
-		let r = a(Math.floor(e / 60), e % 60);
+		let r = o(Math.floor(e / 60), e % 60);
 		i.push({
 			value: r,
-			label: p(r, t, n)
+			label: g(r, t, n)
 		});
 	}
 	return i;
 }
-var S = ":";
-function C(t) {
+var T = ":";
+function E(t) {
 	let n = e(t).slice(0, 4);
-	return n.length >= 2 ? `${n.slice(0, 2)}${S}${n.slice(2)}` : n;
+	return n.length >= 2 ? `${n.slice(0, 2)}${T}${n.slice(2)}` : n;
 }
-function w(e, t = !1) {
+function D(e, t = !1) {
 	return e < 2 ? e : e === 2 ? t ? 3 : 2 : Math.min(e + 1, 5);
 }
-function T(e, n) {
-	let r = i(e);
-	return r ? C(t(n === "12h" ? o(r.hour).hour : r.hour) + t(r.minute)) : "";
+function O(e, n) {
+	let r = a(e);
+	return r ? E(t(n === "12h" ? s(r.hour).hour : r.hour) + t(r.minute)) : "";
 }
-function E(t, n, r = "AM") {
+function k(t, n, r = "AM") {
 	let i = e(t);
 	if (i.length !== 4) return null;
-	let o = Number(i.slice(0, 2)), c = Number(i.slice(2));
-	return c > 59 ? null : n === "12h" ? o >= 1 && o <= 12 ? a(s(o, r), c) : null : o <= 23 ? a(o, c) : null;
+	let a = Number(i.slice(0, 2)), s = Number(i.slice(2));
+	return s > 59 ? null : n === "12h" ? a >= 1 && a <= 12 ? o(c(a, r), s) : null : a <= 23 ? o(a, s) : null;
 }
 //#endregion
-export { _ as DIAL_INNER_THRESHOLD, h as angleToIndex, v as dialIndexToHour24, g as distanceFraction, p as formatDisplay, a as formatTime, C as formatTimeMask, y as hour24ToDial, l as hourCycleFor, r as isValidTime, b as minutesOf, i as parseTime, E as parseTimeMask, m as snapMinute, w as timeCaret, x as timeList, T as timeToMask, o as to12h, s as to24h };
+export { b as DIAL_INNER_THRESHOLD, v as angleToIndex, x as dialIndexToHour24, y as distanceFraction, o as formatTime, g as formatTimeDisplay, E as formatTimeMask, S as hour24ToDial, f as hourCycleFor, l as hourWithMeridiem, i as isValidTime, C as minutesOf, a as parseTime, k as parseTimeMask, _ as snapMinute, D as timeCaret, w as timeList, O as timeToMask, s as to12h, c as to24h, u as withMeridiem };
 
 //# sourceMappingURL=time.js.map

package/dist/utils/time.js.map

@@ -1 +1 @@
-{"version":3,"file":"time.js","names":[],"sources":["../../src/utils/time.ts"],"sourcesContent":["// @ssr @core — module-wide: every export below is @core unless tagged otherwise.\n/**\n * All the reasoning about TIMES that the time picker and its clock face rest on. Nothing\n * here draws anything or touches the page: give it the same numbers twice and it answers\n * the same way twice.\n *\n * A time is always carried as text of the form \"19:05\", counted on the 24-hour clock, no\n * matter how it is being SHOWN — a picker displaying \"7:05 PM\" still holds \"19:05\". That\n * one rule is what keeps the value a consumer receives independent of the reader's\n * language and habits.\n *\n * Dates are used only to ask the browser to write a time out in someone's language, and\n * always at a fixed reference instant taken in universal time. Nothing here therefore\n * depends on the clock of the machine it runs on, which is what lets a page rendered on a\n * server and the same page in the browser agree.\n *\n * The clock face's geometry — where a finger landed, which ring it fell on — is worked\n * out here too, and for a practical reason: the environment the tests run in has no\n * layout at all and measures every element as having no size, so a calculation kept\n * inside the component could not be tested.\n */\nimport { digitsOf, pad2 } from './text'\n\nexport type HourFormat = '12h' | '24h'\nexport type Meridiem = 'AM' | 'PM'\n\nexport interface TimeParts {\n  /** The hour on the 24-hour clock, from 0 to 23. */\n  hour: number\n  minute: number\n}\n\nconst TIME_RE = /^([01]\\d|2[0-3]):([0-5]\\d)$/\n\n/** Whether something is a time in the canonical form — two digits, a colon, two digits. */\nexport function isValidTime(value: unknown): value is string {\n  return typeof value === 'string' && TIME_RE.test(value)\n}\n\n/** Reads a canonical time into its two numbers, or nothing at all if it is not one. */\nexport function parseTime(value: string | null | undefined): TimeParts | null {\n  if (!isValidTime(value)) return null\n  const [h, m] = value.split(':')\n  return { hour: Number(h), minute: Number(m) }\n}\n\n/** Writes an hour and a minute back into the canonical form, both on two digits. */\nexport function formatTime(hour: number, minute: number): string {\n  return `${pad2(hour)}:${pad2(minute)}`\n}\n\n/**\n * Turns an hour of the 24-hour clock into the hour a 12-hour clock face shows, together\n * with which half of the day it belongs to: midnight is 12 AM, noon is 12 PM, and eleven\n * at night is 11 PM.\n */\nexport function to12h(hour24: number): { hour: number; meridiem: Meridiem } {\n  const meridiem: Meridiem = hour24 >= 12 ? 'PM' : 'AM'\n  const hour = hour24 % 12 === 0 ? 12 : hour24 % 12\n  return { hour, meridiem }\n}\n\n/**\n * The way back: an hour read off a 12-hour clock face, plus the half of the day it is in,\n * gives the hour on the 24-hour clock — 12 in the morning is 0, 12 in the afternoon is 12.\n */\nexport function to24h(hour12: number, meridiem: Meridiem): number {\n  const base = hour12 % 12 // Twelve is the zero of the cycle, not its top.\n  return meridiem === 'PM' ? base + 12 : base\n}\n\n// @fallback\n/**\n * Whether a language counts the hours to twelve, with a morning and an afternoon, or\n * straight to twenty-four. It is the browser that knows, and it is asked.\n *\n * A language tag it cannot make sense of falls back to the 24-hour clock rather than\n * failing.\n */\nconst hourCycleCache = new Map<string, HourFormat>()\n\nexport function hourCycleFor(locale: string): HourFormat {\n  const cached = hourCycleCache.get(locale)\n  if (cached) return cached\n  const format = resolveHourCycle(locale)\n  hourCycleCache.set(locale, format)\n  return format\n}\n\nfunction resolveHourCycle(locale: string): HourFormat {\n  try {\n    const { hourCycle } = new Intl.DateTimeFormat(locale, { hour: 'numeric' }).resolvedOptions()\n    return hourCycle === 'h11' || hourCycle === 'h12' ? '12h' : '24h'\n  } catch {\n    return '24h'\n  }\n}\n\n/**\n * One formatter per language and clock, kept for as long as the page lives — the same\n * arrangement as the one that writes out file sizes.\n *\n * Building a formatter costs one to two orders of magnitude more than using one, and the\n * list of times is built ONE ENTRY AT A TIME: a list at one-minute intervals is 1440\n * entries, so 1440 formatters would be built every time it is recalculated — measured at\n * around 82 ms, against 2 ms once they are kept. Both the language AND the clock make up\n * the key, since the clock is imposed below rather than following from the language.\n */\nconst displayFormatters = new Map<string, Intl.DateTimeFormat>()\n\nfunction displayFormatterFor(locale: string, format: HourFormat): Intl.DateTimeFormat {\n  const key = `${locale}|${format}`\n  let formatter = displayFormatters.get(key)\n  if (!formatter) {\n    formatter = new Intl.DateTimeFormat(locale, {\n      hour: 'numeric',\n      minute: '2-digit',\n      hourCycle: format === '12h' ? 'h12' : 'h23',\n      timeZone: 'UTC',\n    })\n    displayFormatters.set(key, formatter)\n  }\n  return formatter\n}\n\n/**\n * A time written out for a reader — \"19:05\", or \"7:05 PM\".\n *\n * The choice of clock is imposed on the browser rather than left to it, so that the text\n * follows what the component settled on. A consumer may ask for a 24-hour clock in a\n * language that would have chosen otherwise, and their choice must be the one that shows.\n */\nexport function formatDisplay(time: string, locale: string, format: HourFormat): string {\n  const parts = parseTime(time)\n  if (!parts) return ''\n  return displayFormatterFor(locale, format).format(Date.UTC(2021, 0, 1, parts.hour, parts.minute))\n}\n\n/**\n * Snaps a minute to the nearest one the component allows — every five minutes, say — and\n * brings it back inside the hour.\n *\n * Both ends need that last part: 58 minutes snapped to five-minute steps lands on 60,\n * which is 0, and stepping back from 0 with the keyboard goes through minus one, which is\n * 59.\n */\nexport function snapMinute(minute: number, step: number): number {\n  const snapped = step <= 1 ? Math.round(minute) : Math.round(minute / step) * step\n  return ((snapped % 60) + 60) % 60\n}\n\n/**\n * Where a finger landed on the clock face, given as an offset from the centre, becomes\n * which mark it was pointing at.\n *\n * The marks are numbered from the twelve o'clock position and go round clockwise, and the\n * nearest one wins. The offsets are the ones the screen uses, where going DOWN is\n * positive, which is why the vertical one is negated to measure the angle from the top.\n */\nexport function angleToIndex(dx: number, dy: number, segments: number): number {\n  // The angle from twelve o'clock, positive going clockwise, then that same angle as a\n  // fraction of a full turn.\n  const angle = Math.atan2(dx, -dy)\n  const turn = (angle / (2 * Math.PI) + 1) % 1\n  return Math.round(turn * segments) % segments\n}\n\n/** How far from the centre a finger landed, as a fraction: nothing at the centre, one at the edge. */\nexport function distanceFraction(dx: number, dy: number, radius: number): number {\n  return radius > 0 ? Math.hypot(dx, dy) / radius : 0\n}\n\n/**\n * How close to the centre a finger has to land for it to be aiming at the INNER ring of\n * numbers, the one holding the small hours of a 24-hour clock. It is the halfway mark\n * between the two rings of numerals.\n *\n * TRAP — the number is DERIVED from the dial's size and the size of a numeral, both of\n * which are decided in the stylesheet: a dial of 256px across and numerals of 48px put\n * the two rings' centres at 104px and 56px from the middle, whose halfway point is\n * 0.625 of the radius. Changing either size in the CSS without changing this leaves the\n * threshold between two rings it no longer separates, and a tap near the boundary quietly\n * sets the wrong hour.\n */\nexport const DIAL_INNER_THRESHOLD = 0.625\n\n/**\n * Which hour a mark stands for, on a dial laid out as two rings: the outer one carries 12\n * then 1 to 11, the inner one carries midnight then 13 to 23. The first mark of each is\n * the one at the twelve o'clock position.\n */\nexport function dialIndexToHour24(index: number, ring: 'outer' | 'inner'): number {\n  if (ring === 'outer') return index === 0 ? 12 : index\n  return index === 0 ? 0 : index + 12\n}\n\n/**\n * The way back, which is what tells the hand where to point: midnight is the top of the\n * inner ring, noon the top of the outer one, and three in the afternoon the third mark of\n * the inner ring.\n */\nexport function hour24ToDial(hour: number): { index: number; ring: 'outer' | 'inner' } {\n  if (hour === 0) return { index: 0, ring: 'inner' }\n  if (hour === 12) return { index: 0, ring: 'outer' }\n  if (hour > 12) return { index: hour - 12, ring: 'inner' }\n  return { index: hour, ring: 'outer' }\n}\n\nexport interface TimeOption {\n  /** The canonical time, which is what the component's value will be set to. */\n  value: string\n  /** The same time written out for the reader: \"07:30\", or \"7:30 AM\". */\n  label: string\n}\n\n/**\n * A time as a count of minutes since midnight, or nothing if it is not a time. It is what\n * gives a time its position in a list.\n */\nexport function minutesOf(time: string | null | undefined): number | null {\n  const parts = parseTime(time)\n  return parts ? parts.hour * 60 + parts.minute : null\n}\n\n/**\n * Every time of the day at a given interval, from midnight up to the last one before the\n * next.\n *\n * There is deliberately no earliest or latest here, because the time picker itself has\n * none: do not invent one.\n *\n * An interval that makes no sense — nothing, a fraction, more than an hour — falls back\n * to one an hour. The list has to stay FINITE even when the warning the component prints\n * about it was ignored, since an interval of zero would build times for ever.\n */\nexport function timeList(step: number, locale: string, format: HourFormat): TimeOption[] {\n  const safe = Number.isInteger(step) && step >= 1 && step <= 60 ? step : 60\n  const out: TimeOption[] = []\n  for (let m = 0; m < 24 * 60; m += safe) {\n    const value = formatTime(Math.floor(m / 60), m % 60)\n    out.push({ value, label: formatDisplay(value, locale, format) })\n  }\n  return out\n}\n\n/*\n * What separates the hours from the minutes as a time is typed.\n *\n * Unlike a date's separator, this one is the SAME everywhere: every language writes a\n * time with a colon, and what varies between them is only whether the hours run to twelve\n * or to twenty-four.\n *\n * The grey template shown in an empty field lives in the dictionary instead, because\n * \"hh:mm\" is made of the initials of WORDS and those do change from one language to the\n * next — where the colon does not.\n */\nconst TIME_SEPARATOR = ':'\n\n/**\n * Lays a run of typed digits out as a time. The colon appears AS SOON AS the hour is\n * complete — typing \"09\" already gives \"09:\" — exactly as a date's separators do.\n */\nexport function formatTimeMask(digits: string): string {\n  const all = digitsOf(digits).slice(0, 4)\n  return all.length >= 2 ? `${all.slice(0, 2)}${TIME_SEPARATOR}${all.slice(2)}` : all\n}\n\n/**\n * Where the caret belongs so as to sit just after a given number of digits.\n *\n * It is a plain formula rather than a scan of the text, because a time's separator is\n * always in the same place — which is exactly what the date's equivalent cannot assume,\n * since the order and the width of its parts change from one language to the next.\n *\n * The flag says something was INSERTED, and the caret then steps over the colon into the\n * minutes. On a deletion it stays in FRONT of it, or the next press of the key would step\n * over the colon instead of erasing a digit, and the key would appear to do nothing.\n */\nexport function timeCaret(n: number, skipSeparator = false): number {\n  if (n < 2) return n\n  if (n === 2) return skipSeparator ? 3 : 2\n  return Math.min(n + 1, 5)\n}\n\n/**\n * Writes a canonical time into the field, in whichever form is being SHOWN. On a 12-hour\n * clock the hour is brought back into the range 1 to 12: which half of the day it is\n * belongs to the pair of buttons beside the field, and never to the text itself.\n */\nexport function timeToMask(time: string | null | undefined, format: HourFormat): string {\n  const parts = parseTime(time)\n  if (!parts) return ''\n  const hour = format === '12h' ? to12h(parts.hour).hour : parts.hour\n  return formatTimeMask(pad2(hour) + pad2(parts.minute))\n}\n\n/**\n * Reads what has been typed back into a canonical time, or nothing at all when it is\n * incomplete, too long, or not a time anyone could point to.\n *\n * On a 12-hour clock the half of the day comes from the pair of buttons beside the field.\n * This is the ONE place where what was typed and that choice meet.\n */\nexport function parseTimeMask(\n  text: string,\n  format: HourFormat,\n  meridiem: Meridiem = 'AM',\n): string | null {\n  const digits = digitsOf(text)\n  if (digits.length !== 4) return null\n  const hour = Number(digits.slice(0, 2))\n  const minute = Number(digits.slice(2))\n  if (minute > 59) return null\n  if (format === '12h')\n    return hour >= 1 && hour <= 12 ? formatTime(to24h(hour, meridiem), minute) : null\n  return hour <= 23 ? formatTime(hour, minute) : null\n}\n"],"mappings":"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"}
+{"version":3,"file":"time.js","names":[],"sources":["../../src/utils/time.ts"],"sourcesContent":["// @ssr @core — module-wide: every export below is @core unless tagged otherwise.\n/**\n * The TIME domain behind VTimePicker and VTimeInput. Pure: nothing here draws or touches\n * the page, and the same numbers always give the same answer.\n *\n * A time is always the canonical 24-hour string `'HH:mm'`, whatever is being SHOWN — a\n * picker displaying \"7:05 PM\" still holds `'19:05'`. That is what keeps the value a\n * consumer receives independent of the reader's locale.\n *\n * `Intl` is asked on UTC reference instants only, so nothing depends on the host clock and\n * the server render agrees with the browser's.\n *\n * The dial's geometry lives here too, and for a practical reason: jsdom lays nothing out and\n * measures every element at zero, so a calculation kept inside the component is untestable.\n */\nimport { memo } from './memo'\nimport { digitsOf, pad2 } from './text'\n\nexport type HourFormat = '12h' | '24h'\nexport type Meridiem = 'AM' | 'PM'\n\nexport interface TimeParts {\n  /** The hour on the 24-hour clock, from 0 to 23. */\n  hour: number\n  minute: number\n}\n\nconst TIME_RE = /^([01]\\d|2[0-3]):([0-5]\\d)$/\n\n/** Whether something is a time in the canonical form — two digits, a colon, two digits. */\nexport function isValidTime(value: unknown): value is string {\n  return typeof value === 'string' && TIME_RE.test(value)\n}\n\n/** Reads a canonical time into its two numbers, or nothing at all if it is not one. */\nexport function parseTime(value: string | null | undefined): TimeParts | null {\n  if (!isValidTime(value)) return null\n  const [h, m] = value.split(':')\n  return { hour: Number(h), minute: Number(m) }\n}\n\n/** Writes an hour and a minute back into the canonical form, both on two digits. */\nexport function formatTime(hour: number, minute: number): string {\n  return `${pad2(hour)}:${pad2(minute)}`\n}\n\n/**\n * Turns an hour of the 24-hour clock into the hour a 12-hour clock face shows, together\n * with which half of the day it belongs to: midnight is 12 AM, noon is 12 PM, and eleven\n * at night is 11 PM.\n */\nexport function to12h(hour24: number): { hour: number; meridiem: Meridiem } {\n  const meridiem: Meridiem = hour24 >= 12 ? 'PM' : 'AM'\n  const hour = hour24 % 12 === 0 ? 12 : hour24 % 12\n  return { hour, meridiem }\n}\n\n/**\n * The way back: an hour read off a 12-hour clock face, plus the half of the day it is in,\n * gives the hour on the 24-hour clock — 12 in the morning is 0, 12 in the afternoon is 12.\n */\nexport function to24h(hour12: number, meridiem: Meridiem): number {\n  const base = hour12 % 12 // Twelve is the zero of the cycle, not its top.\n  return meridiem === 'PM' ? base + 12 : base\n}\n\n/**\n * The same hour moved into the other half of the day, or left where it is: 9 with PM gives\n * 21, and 21 with PM stays 21. It is what an AM/PM control does to the hour it qualifies.\n */\nexport function hourWithMeridiem(hour24: number, meridiem: Meridiem): number {\n  return to24h(to12h(hour24).hour, meridiem)\n}\n\n/**\n * A canonical time moved into a half of the day, its minutes untouched, or `null` when it is\n * not a time at all: `'09:30'` with PM gives `'21:30'`.\n */\nexport function withMeridiem(time: string | null | undefined, meridiem: Meridiem): string | null {\n  const parts = parseTime(time)\n  return parts ? formatTime(hourWithMeridiem(parts.hour, meridiem), parts.minute) : null\n}\n\nconst hourCycleCache = new Map<string, HourFormat>()\n\n// @fallback\n/**\n * Whether a language counts the hours to twelve, with a morning and an afternoon, or\n * straight to twenty-four. It is the browser that knows, and it is asked.\n *\n * A language tag it cannot make sense of falls back to the 24-hour clock rather than\n * failing.\n */\nexport function hourCycleFor(locale: string): HourFormat {\n  return memo(hourCycleCache, locale, () => resolveHourCycle(locale))\n}\n\nfunction resolveHourCycle(locale: string): HourFormat {\n  try {\n    const { hourCycle } = new Intl.DateTimeFormat(locale, { hour: 'numeric' }).resolvedOptions()\n    return hourCycle === 'h11' || hourCycle === 'h12' ? '12h' : '24h'\n  } catch {\n    return '24h'\n  }\n}\n\n/**\n * One formatter per locale and clock, module-lived — the `formatterFor` idiom of `file.ts`.\n *\n * Construction costs one to two orders of magnitude more than use, and `timeList` formats\n * ONE VALUE AT A TIME: 1440 entries at one-minute steps, so 1440 constructions per rebuild.\n * Measured at ~82 ms against ~2 ms memoized. The clock is part of the key because it is\n * imposed below rather than following from the locale.\n */\nconst displayFormatters = new Map<string, Intl.DateTimeFormat>()\n\nfunction displayFormatterFor(locale: string, format: HourFormat): Intl.DateTimeFormat {\n  return memo(\n    displayFormatters,\n    `${locale}|${format}`,\n    () =>\n      new Intl.DateTimeFormat(locale, {\n        hour: 'numeric',\n        minute: '2-digit',\n        hourCycle: format === '12h' ? 'h12' : 'h23',\n        timeZone: 'UTC',\n      }),\n  )\n}\n\n/**\n * A time written out for a reader: \"19:05\", or \"7:05 PM\".\n *\n * `hourCycle` is imposed rather than left to `Intl`, so the text follows what the component\n * settled on: a consumer asking for a 24-hour clock in a locale that would choose otherwise\n * must get theirs.\n */\nexport function formatTimeDisplay(time: string, locale: string, format: HourFormat): string {\n  const parts = parseTime(time)\n  if (!parts) return ''\n  return displayFormatterFor(locale, format).format(Date.UTC(2021, 0, 1, parts.hour, parts.minute))\n}\n\n/**\n * Snaps a minute to the nearest allowed step and wraps it back inside the hour.\n *\n * Both ends need the wrap: 58 snapped to five-minute steps lands on 60, which is 0, and\n * stepping back from 0 with the keyboard passes through -1, which is 59.\n */\nexport function snapMinute(minute: number, step: number): number {\n  const snapped = step <= 1 ? Math.round(minute) : Math.round(minute / step) * step\n  return ((snapped % 60) + 60) % 60\n}\n\n/**\n * Which mark a pointer offset from the dial's centre is aiming at. Marks are numbered\n * clockwise from twelve o'clock and the nearest wins. `dy` is negated because screen\n * coordinates grow DOWNWARD and the angle is measured from the top.\n */\nexport function angleToIndex(dx: number, dy: number, segments: number): number {\n  // The angle from twelve o'clock, clockwise-positive, as a fraction of a full turn.\n  const angle = Math.atan2(dx, -dy)\n  const turn = (angle / (2 * Math.PI) + 1) % 1\n  return Math.round(turn * segments) % segments\n}\n\n/** How far from the centre a finger landed, as a fraction: nothing at the centre, one at the edge. */\nexport function distanceFraction(dx: number, dy: number, radius: number): number {\n  return radius > 0 ? Math.hypot(dx, dy) / radius : 0\n}\n\n/**\n * How close to the centre a pointer must land to be aiming at the INNER ring, the one\n * holding the small hours of a 24-hour dial: the halfway mark between the two rings.\n *\n * TRAP — the number is DERIVED from the dial tokens. A 256px dial with 48px numerals puts\n * the rings' centres at 104px and 56px from the middle, whose midpoint is 0.625 of the\n * radius. Change either token without changing this and the threshold no longer separates\n * the two rings: a tap near the boundary quietly sets the wrong hour.\n */\nexport const DIAL_INNER_THRESHOLD = 0.625\n\n/**\n * Which hour a mark stands for on the two-ring dial: outer carries 12 then 1-11, inner\n * carries 00 then 13-23. Index 0 of each is the mark at twelve o'clock.\n */\nexport function dialIndexToHour24(index: number, ring: 'outer' | 'inner'): number {\n  if (ring === 'outer') return index === 0 ? 12 : index\n  return index === 0 ? 0 : index + 12\n}\n\n/** The way back, which is what tells the hand where to point. */\nexport function hour24ToDial(hour: number): { index: number; ring: 'outer' | 'inner' } {\n  if (hour === 0) return { index: 0, ring: 'inner' }\n  if (hour === 12) return { index: 0, ring: 'outer' }\n  if (hour > 12) return { index: hour - 12, ring: 'inner' }\n  return { index: hour, ring: 'outer' }\n}\n\nexport interface TimeOption {\n  /** The canonical time, which is what the component's value will be set to. */\n  value: string\n  /** The same time written out for the reader: \"07:30\", or \"7:30 AM\". */\n  label: string\n}\n\n/** A time as minutes since midnight, `null` if it is not one — its position in a list. */\nexport function minutesOf(time: string | null | undefined): number | null {\n  const parts = parseTime(time)\n  return parts ? parts.hour * 60 + parts.minute : null\n}\n\n/**\n * Every time of the day at a given interval, midnight to the last one before the next.\n *\n * There is deliberately no earliest or latest, VTimePicker having none: do not invent one.\n * A nonsensical step — zero, a fraction, more than an hour — falls back to hourly, so the\n * list stays FINITE even when the component's warning about it was ignored.\n */\nexport function timeList(step: number, locale: string, format: HourFormat): TimeOption[] {\n  const safe = Number.isInteger(step) && step >= 1 && step <= 60 ? step : 60\n  const out: TimeOption[] = []\n  for (let m = 0; m < 24 * 60; m += safe) {\n    const value = formatTime(Math.floor(m / 60), m % 60)\n    out.push({ value, label: formatTimeDisplay(value, locale, format) })\n  }\n  return out\n}\n\n/*\n * Unlike a date's separator this one is UNIVERSAL: every language writes a time with a\n * colon, and only the 12/24-hour cycle varies. It therefore stays out of the dictionary,\n * where the empty field's `hh:mm` placeholder does belong — that one is made of the\n * initials of words.\n */\nconst TIME_SEPARATOR = ':'\n\n/**\n * Lays a run of typed digits out as a time. The colon appears AS SOON AS the hour is\n * complete — typing \"09\" already gives \"09:\" — exactly as a date's separators do.\n */\nexport function formatTimeMask(digits: string): string {\n  const all = digitsOf(digits).slice(0, 4)\n  return all.length >= 2 ? `${all.slice(0, 2)}${TIME_SEPARATOR}${all.slice(2)}` : all\n}\n\n/**\n * Where the caret belongs to sit just after `n` digits. A closed formula rather than\n * `date.ts`'s scan, the colon always being in the same place.\n *\n * `skipSeparator` means something was INSERTED, and the caret then steps over the colon\n * into the minutes. On a DELETION it stays in front of it, or the next Backspace steps\n * over the colon instead of erasing a digit and the key appears to do nothing.\n */\nexport function timeCaret(n: number, skipSeparator = false): number {\n  if (n < 2) return n\n  if (n === 2) return skipSeparator ? 3 : 2\n  return Math.min(n + 1, 5)\n}\n\n/**\n * A canonical time written into the field in whichever form is SHOWN. On a 12-hour clock the\n * hour comes back into 1-12: the meridiem belongs to the toggle beside the field, never to\n * the text.\n */\nexport function timeToMask(time: string | null | undefined, format: HourFormat): string {\n  const parts = parseTime(time)\n  if (!parts) return ''\n  const hour = format === '12h' ? to12h(parts.hour).hour : parts.hour\n  return formatTimeMask(pad2(hour) + pad2(parts.minute))\n}\n\n/**\n * What was typed read back into a canonical time, or `null` when it is incomplete, too long\n * or not a real time. On a 12-hour clock this is the ONE place the typed digits and the\n * meridiem toggle meet.\n */\nexport function parseTimeMask(\n  text: string,\n  format: HourFormat,\n  meridiem: Meridiem = 'AM',\n): string | null {\n  const digits = digitsOf(text)\n  if (digits.length !== 4) return null\n  const hour = Number(digits.slice(0, 2))\n  const minute = Number(digits.slice(2))\n  if (minute > 59) return null\n  if (format === '12h')\n    return hour >= 1 && hour <= 12 ? formatTime(to24h(hour, meridiem), minute) : null\n  return hour <= 23 ? formatTime(hour, minute) : null\n}\n"],"mappings":";;;AA2BA,IAAM,IAAU;AAGhB,SAAgB,EAAY,GAAiC;CAC3D,OAAO,OAAO,KAAU,YAAY,EAAQ,KAAK,CAAK;AACxD;AAGA,SAAgB,EAAU,GAAoD;CAC5E,IAAI,CAAC,EAAY,CAAK,GAAG,OAAO;CAChC,IAAM,CAAC,GAAG,KAAK,EAAM,MAAM,GAAG;CAC9B,OAAO;EAAE,MAAM,OAAO,CAAC;EAAG,QAAQ,OAAO,CAAC;CAAE;AAC9C;AAGA,SAAgB,EAAW,GAAc,GAAwB;CAC/D,OAAO,GAAG,EAAK,CAAI,EAAE,GAAG,EAAK,CAAM;AACrC;AAOA,SAAgB,EAAM,GAAsD;CAC1E,IAAM,IAAqB,KAAU,KAAK,OAAO;CAEjD,OAAO;EAAE,MADI,IAAS,MAAO,IAAI,KAAK,IAAS;EAChC;CAAS;AAC1B;AAMA,SAAgB,EAAM,GAAgB,GAA4B;CAChE,IAAM,IAAO,IAAS;CACtB,OAAO,MAAa,OAAO,IAAO,KAAK;AACzC;AAMA,SAAgB,EAAiB,GAAgB,GAA4B;CAC3E,OAAO,EAAM,EAAM,CAAM,CAAC,CAAC,MAAM,CAAQ;AAC3C;AAMA,SAAgB,EAAa,GAAiC,GAAmC;CAC/F,IAAM,IAAQ,EAAU,CAAI;CAC5B,OAAO,IAAQ,EAAW,EAAiB,EAAM,MAAM,CAAQ,GAAG,EAAM,MAAM,IAAI;AACpF;AAEA,IAAM,oBAAiB,IAAI,IAAwB;AAUnD,SAAgB,EAAa,GAA4B;CACvD,OAAO,EAAK,GAAgB,SAAc,EAAiB,CAAM,CAAC;AACpE;AAEA,SAAS,EAAiB,GAA4B;CACpD,IAAI;EACF,IAAM,EAAE,iBAAc,IAAI,KAAK,eAAe,GAAQ,EAAE,MAAM,UAAU,CAAC,CAAC,CAAC,gBAAgB;EAC3F,OAAO,MAAc,SAAS,MAAc,QAAQ,QAAQ;CAC9D,QAAQ;EACN,OAAO;CACT;AACF;AAUA,IAAM,oBAAoB,IAAI,IAAiC;AAE/D,SAAS,EAAoB,GAAgB,GAAyC;CACpF,OAAO,EACL,GACA,GAAG,EAAO,GAAG,WAEX,IAAI,KAAK,eAAe,GAAQ;EAC9B,MAAM;EACN,QAAQ;EACR,WAAW,MAAW,QAAQ,QAAQ;EACtC,UAAU;CACZ,CAAC,CACL;AACF;AASA,SAAgB,EAAkB,GAAc,GAAgB,GAA4B;CAC1F,IAAM,IAAQ,EAAU,CAAI;CAE5B,OADK,IACE,EAAoB,GAAQ,CAAM,CAAC,CAAC,OAAO,KAAK,IAAI,MAAM,GAAG,GAAG,EAAM,MAAM,EAAM,MAAM,CAAC,IAD7E;AAErB;AAQA,SAAgB,EAAW,GAAgB,GAAsB;CAE/D,SADgB,KAAQ,IAAI,KAAK,MAAM,CAAM,IAAI,KAAK,MAAM,IAAS,CAAI,IAAI,KAC1D,KAAM,MAAM;AACjC;AAOA,SAAgB,EAAa,GAAY,GAAY,GAA0B;CAG7E,IAAM,KADQ,KAAK,MAAM,GAAI,CAAC,CAChB,KAAS,IAAI,KAAK,MAAM,KAAK;CAC3C,OAAO,KAAK,MAAM,IAAO,CAAQ,IAAI;AACvC;AAGA,SAAgB,EAAiB,GAAY,GAAY,GAAwB;CAC/E,OAAO,IAAS,IAAI,KAAK,MAAM,GAAI,CAAE,IAAI,IAAS;AACpD;AAWA,IAAa,IAAuB;AAMpC,SAAgB,EAAkB,GAAe,GAAiC;CAEhF,OADI,MAAS,UAAgB,MAAU,IAAI,KAAK,IACzC,MAAU,IAAI,IAAI,IAAQ;AACnC;AAGA,SAAgB,EAAa,GAA0D;CAIrF,OAHI,MAAS,IAAU;EAAE,OAAO;EAAG,MAAM;CAAQ,IAC7C,MAAS,KAAW;EAAE,OAAO;EAAG,MAAM;CAAQ,IAC9C,IAAO,KAAW;EAAE,OAAO,IAAO;EAAI,MAAM;CAAQ,IACjD;EAAE,OAAO;EAAM,MAAM;CAAQ;AACtC;AAUA,SAAgB,EAAU,GAAgD;CACxE,IAAM,IAAQ,EAAU,CAAI;CAC5B,OAAO,IAAQ,EAAM,OAAO,KAAK,EAAM,SAAS;AAClD;AASA,SAAgB,EAAS,GAAc,GAAgB,GAAkC;CACvF,IAAM,IAAO,OAAO,UAAU,CAAI,KAAK,KAAQ,KAAK,KAAQ,KAAK,IAAO,IAClE,IAAoB,CAAC;CAC3B,KAAK,IAAI,IAAI,GAAG,IAAI,MAAS,KAAK,GAAM;EACtC,IAAM,IAAQ,EAAW,KAAK,MAAM,IAAI,EAAE,GAAG,IAAI,EAAE;EACnD,EAAI,KAAK;GAAE;GAAO,OAAO,EAAkB,GAAO,GAAQ,CAAM;EAAE,CAAC;CACrE;CACA,OAAO;AACT;AAQA,IAAM,IAAiB;AAMvB,SAAgB,EAAe,GAAwB;CACrD,IAAM,IAAM,EAAS,CAAM,CAAC,CAAC,MAAM,GAAG,CAAC;CACvC,OAAO,EAAI,UAAU,IAAI,GAAG,EAAI,MAAM,GAAG,CAAC,IAAI,IAAiB,EAAI,MAAM,CAAC,MAAM;AAClF;AAUA,SAAgB,EAAU,GAAW,IAAgB,IAAe;CAGlE,OAFI,IAAI,IAAU,IACd,MAAM,IAAU,IAAgB,IAAI,IACjC,KAAK,IAAI,IAAI,GAAG,CAAC;AAC1B;AAOA,SAAgB,EAAW,GAAiC,GAA4B;CACtF,IAAM,IAAQ,EAAU,CAAI;CAG5B,OAFK,IAEE,EAAe,EADT,MAAW,QAAQ,EAAM,EAAM,IAAI,CAAC,CAAC,OAAO,EAAM,IAChC,IAAI,EAAK,EAAM,MAAM,CAAC,IAFlC;AAGrB;AAOA,SAAgB,EACd,GACA,GACA,IAAqB,MACN;CACf,IAAM,IAAS,EAAS,CAAI;CAC5B,IAAI,EAAO,WAAW,GAAG,OAAO;CAChC,IAAM,IAAO,OAAO,EAAO,MAAM,GAAG,CAAC,CAAC,GAChC,IAAS,OAAO,EAAO,MAAM,CAAC,CAAC;CAIrC,OAHI,IAAS,KAAW,OACpB,MAAW,QACN,KAAQ,KAAK,KAAQ,KAAK,EAAW,EAAM,GAAM,CAAQ,GAAG,CAAM,IAAI,OACxE,KAAQ,KAAK,EAAW,GAAM,CAAM,IAAI;AACjD"}

package/dist/utils/vnode.d.ts

@@ -1,21 +1,14 @@
 import { VNode } from 'vue';
 /**
- * Reduces what a consumer put inside a component down to the elements that will really be
- * rendered.
+ * A slot's VNodes reduced to the elements that will actually render: `v-for` Fragments
+ * unwrapped, a false `v-if`'s Comment and the source text's whitespace dropped.
  *
- * Content written between a component's tags does not arrive as a plain list. A loop
- * arrives as a bundle to be opened up, a condition that turned out false leaves a marker
- * behind, and the line breaks of the source text arrive as content of their own. All of
- * that is removed here, leaving only what will appear on the page.
+ * This is what lets a component count its children without a registry they feed at mount.
+ * A registry fills up in the browser and stays empty on the server, so the two renders
+ * disagree — VAvatarGroup would say "+0" in one and "+3" in the other. Reading the slot
+ * happens while the parent renders, which is the same on both sides.
  *
- * This is what lets a component count its own children WITHOUT the children announcing
- * themselves as they appear. Such an announcement would arrive nowhere during the render
- * done on the server and everywhere in the browser, so the page the server sent and the
- * page the browser builds would disagree — a group of avatars would say "+0" in one and
- * "+3" in the other. The content is inspected while the parent renders, which happens on
- * both sides alike, so the count is the same in both.
- *
- * It is used by the group of avatars, for the "+3" it ends with, and by the carousel, for
- * its dots and for announcing which slide of how many is showing.
+ * Used by VAvatarGroup for its "+N", by VCarousel for its slide count and the index each
+ * slide is handed, and by VInputGroup for its dev warning on a segment carrying a label.
  */
 export declare function flattenSlot(nodes: VNode[] | undefined): VNode[];

package/dist/utils/vnode.js.map

@@ -1 +1 @@
-{"version":3,"file":"vnode.js","names":[],"sources":["../../src/utils/vnode.ts"],"sourcesContent":["import { Comment, Fragment, Text } from 'vue'\nimport type { VNode } from 'vue'\n\n// @ssr @core\n/**\n * Reduces what a consumer put inside a component down to the elements that will really be\n * rendered.\n *\n * Content written between a component's tags does not arrive as a plain list. A loop\n * arrives as a bundle to be opened up, a condition that turned out false leaves a marker\n * behind, and the line breaks of the source text arrive as content of their own. All of\n * that is removed here, leaving only what will appear on the page.\n *\n * This is what lets a component count its own children WITHOUT the children announcing\n * themselves as they appear. Such an announcement would arrive nowhere during the render\n * done on the server and everywhere in the browser, so the page the server sent and the\n * page the browser builds would disagree — a group of avatars would say \"+0\" in one and\n * \"+3\" in the other. The content is inspected while the parent renders, which happens on\n * both sides alike, so the count is the same in both.\n *\n * It is used by the group of avatars, for the \"+3\" it ends with, and by the carousel, for\n * its dots and for announcing which slide of how many is showing.\n */\nexport function flattenSlot(nodes: VNode[] | undefined): VNode[] {\n  const out: VNode[] = []\n  for (const node of nodes ?? []) {\n    if (node.type === Fragment) out.push(...flattenSlot(node.children as VNode[]))\n    else if (node.type === Comment) continue\n    else if (node.type === Text && !String(node.children).trim()) continue\n    else out.push(node)\n  }\n  return out\n}\n"],"mappings":";;AAuBA,SAAgB,EAAY,GAAqC;CAC/D,IAAM,IAAe,CAAC;CACtB,KAAK,IAAM,KAAQ,KAAS,CAAC,GAC3B,IAAI,EAAK,SAAS,GAAU,EAAI,KAAK,GAAG,EAAY,EAAK,QAAmB,CAAC;MACxE,IAAI,EAAK,SAAS,GAAS;MAC3B,IAAI,EAAK,SAAS,KAAQ,CAAC,OAAO,EAAK,QAAQ,CAAC,CAAC,KAAK,GAAG;MACzD,EAAI,KAAK,CAAI;CAEpB,OAAO;AACT"}
+{"version":3,"file":"vnode.js","names":[],"sources":["../../src/utils/vnode.ts"],"sourcesContent":["import { Comment, Fragment, Text } from 'vue'\nimport type { VNode } from 'vue'\n\n// @ssr @core\n/**\n * A slot's VNodes reduced to the elements that will actually render: `v-for` Fragments\n * unwrapped, a false `v-if`'s Comment and the source text's whitespace dropped.\n *\n * This is what lets a component count its children without a registry they feed at mount.\n * A registry fills up in the browser and stays empty on the server, so the two renders\n * disagree — VAvatarGroup would say \"+0\" in one and \"+3\" in the other. Reading the slot\n * happens while the parent renders, which is the same on both sides.\n *\n * Used by VAvatarGroup for its \"+N\", by VCarousel for its slide count and the index each\n * slide is handed, and by VInputGroup for its dev warning on a segment carrying a label.\n */\nexport function flattenSlot(nodes: VNode[] | undefined): VNode[] {\n  const out: VNode[] = []\n  for (const node of nodes ?? []) {\n    if (node.type === Fragment) out.push(...flattenSlot(node.children as VNode[]))\n    else if (node.type === Comment) continue\n    else if (node.type === Text && !String(node.children).trim()) continue\n    else out.push(node)\n  }\n  return out\n}\n"],"mappings":";;AAgBA,SAAgB,EAAY,GAAqC;CAC/D,IAAM,IAAe,CAAC;CACtB,KAAK,IAAM,KAAQ,KAAS,CAAC,GAC3B,IAAI,EAAK,SAAS,GAAU,EAAI,KAAK,GAAG,EAAY,EAAK,QAAmB,CAAC;MACxE,IAAI,EAAK,SAAS,GAAS;MAC3B,IAAI,EAAK,SAAS,KAAQ,CAAC,OAAO,EAAK,QAAQ,CAAC,CAAC,KAAK,GAAG;MACzD,EAAI,KAAK,CAAI;CAEpB,OAAO;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vectis-ui",
-  "version": "0.1.0",
+  "version": "0.8.0",
   "description": "Vue 3 design system — HTML/CSS first, CSS tokens, Nuxt 3 (SSR) compatible",
   "type": "module",
   "license": "MIT",
@@ -63,10 +63,10 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
-    "@storybook/addon-a11y": "^10.5.5",
-    "@storybook/addon-docs": "^10.5.5",
-    "@storybook/addon-vitest": "^10.5.5",
-    "@storybook/vue3-vite": "^10.5.5",
+    "@storybook/addon-a11y": "^10.6.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-vitest": "^10.6.0",
+    "@storybook/vue3-vite": "^10.6.0",
     "@testing-library/vue": "^8.1.0",
     "@types/node": "^26.1.1",
     "@vitejs/plugin-vue": "^6.0.8",
@@ -78,7 +78,7 @@
     "jsdom": "^29.1.1",
     "playwright": "^1.62.0",
     "publint": "^0.3.23",
-    "storybook": "^10.5.5",
+    "storybook": "^10.6.0",
     "tsx": "^4.23.1",
     "typescript": "^5.9.3",
     "vite": "^8.1.5",

package/dist/components/VToggle/VToggleItem.css

@@ -1,2 +0,0 @@
-@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-toggle-item[data-size][data-icon-only]{min-inline-size:var(--control-height);padding-inline:0}}