vectis-ui 0.8.1 → 0.9.0

package/dist/utils/clock.d.ts

@@ -0,0 +1,113 @@
+import { HourFormat, Meridiem } from './time.js';
+/**
+ * Turns an hour of the 24-hour clock into the hour a 12-hour clock face shows, together
+ * with which half of the day it belongs to: midnight is 12 AM, noon is 12 PM, and eleven
+ * at night is 11 PM.
+ */
+export declare function to12h(hour24: number): {
+    hour: number;
+    meridiem: Meridiem;
+};
+/**
+ * The way back: an hour read off a 12-hour clock face, plus the half of the day it is in,
+ * 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;
+/**
+ * Snaps a minute to the nearest allowed step and wraps it back inside the hour.
+ *
+ * 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;
+/**
+ * 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 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 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;
+/**
+ * How close to the centre a pointer lands on NOTHING. At the very centre there is no angle
+ * at all (`atan2(0, 0)` answers half a turn, which would set six o'clock), and the centre dot
+ * drawn there is not a numeral.
+ *
+ * TRAP: derived from the same tokens as the threshold above: the inner ring's numerals
+ * start 32px from the middle (56px less half a 48px numeral), 0.25 of the radius, so the
+ * dead zone stops short of them. Grow it past 0.25 and the inner small hours lose their
+ * inner half to it.
+ */
+export declare const DIAL_DEAD_ZONE = 0.2;
+/**
+ * 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. */
+export declare function hour24ToDial(hour: number): {
+    index: number;
+    ring: 'outer' | 'inner';
+};
+export interface TimeOption {
+    /** The canonical time, which is what the component's value will be set to. */
+    value: string;
+    /** The same time written out for the reader: "07:30", or "7:30 AM". */
+    label: string;
+}
+/**
+ * Every time of the day at a given interval, midnight to the last one before the next.
+ *
+ * It knows nothing of the restrictions: VTimeInput filters the rows it offers, so the list
+ * itself stays one table per step and locale.
+ *
+ * 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[];
+/**
+ * Lays a run of typed digits out as a time. The colon appears AS SOON AS the hour is
+ * complete: typing "09" already gives "09:", exactly as a date's separators do.
+ */
+export declare function formatTimeMask(digits: string): string;
+/**
+ * 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.
+ *
+ * `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;
+/**
+ * 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;
+/**
+ * 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/clock.js

@@ -0,0 +1,84 @@
+import { digitsOf as e, pad2 as t } from "./text.js";
+import { formatTime as n, formatTimeDisplay as r, parseTime as i } from "./time.js";
+//#region src/utils/clock.ts
+function a(e) {
+	let t = e >= 12 ? "PM" : "AM";
+	return {
+		hour: e % 12 == 0 ? 12 : e % 12,
+		meridiem: t
+	};
+}
+function o(e, t) {
+	let n = e % 12;
+	return t === "PM" ? n + 12 : n;
+}
+function s(e, t) {
+	return o(a(e).hour, t);
+}
+function c(e, t) {
+	let r = i(e);
+	return r ? n(s(r.hour, t), r.minute) : null;
+}
+function l(e, t) {
+	let n = Math.round(t);
+	return ((n <= 1 ? Math.round(e) : Math.round(e / n) * n) % 60 + 60) % 60;
+}
+function u(e, t, n) {
+	let r = (Math.atan2(e, -t) / (2 * Math.PI) + 1) % 1;
+	return Math.round(r * n) % n;
+}
+function d(e, t, n) {
+	return n > 0 ? Math.hypot(e, t) / n : 0;
+}
+var f = .625, p = .2;
+function m(e, t) {
+	return t === "outer" ? e === 0 ? 12 : e : e === 0 ? 0 : e + 12;
+}
+function h(e) {
+	return e === 0 ? {
+		index: 0,
+		ring: "inner"
+	} : e === 12 ? {
+		index: 0,
+		ring: "outer"
+	} : e > 12 ? {
+		index: e - 12,
+		ring: "inner"
+	} : {
+		index: e,
+		ring: "outer"
+	};
+}
+function g(e, t, i) {
+	let a = Number.isInteger(e) && e >= 1 && e <= 60 ? e : 60, o = [];
+	for (let e = 0; e < 1440; e += a) {
+		let a = n(Math.floor(e / 60), e % 60);
+		o.push({
+			value: a,
+			label: r(a, t, i)
+		});
+	}
+	return o;
+}
+var _ = ":";
+function v(t) {
+	let n = e(t).slice(0, 4);
+	return n.length >= 2 ? `${n.slice(0, 2)}${_}${n.slice(2)}` : n;
+}
+function y(e, t = !1) {
+	return e < 2 ? e : e === 2 ? t ? 3 : 2 : Math.min(e + 1, 5);
+}
+function b(e, n) {
+	let r = i(e);
+	return r ? v(t(n === "12h" ? a(r.hour).hour : r.hour) + t(r.minute)) : "";
+}
+function x(t, r, i = "AM") {
+	let a = e(t);
+	if (a.length !== 4) return null;
+	let s = Number(a.slice(0, 2)), c = Number(a.slice(2));
+	return c > 59 ? null : r === "12h" ? s >= 1 && s <= 12 ? n(o(s, i), c) : null : s <= 23 ? n(s, c) : null;
+}
+//#endregion
+export { p as DIAL_DEAD_ZONE, f as DIAL_INNER_THRESHOLD, u as angleToIndex, m as dialIndexToHour24, d as distanceFraction, v as formatTimeMask, h as hour24ToDial, s as hourWithMeridiem, x as parseTimeMask, l as snapMinute, y as timeCaret, g as timeList, b as timeToMask, a as to12h, o as to24h, c as withMeridiem };
+
+//# sourceMappingURL=clock.js.map

package/dist/utils/clock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clock.js","names":[],"sources":["../../src/utils/clock.ts"],"sourcesContent":["// @ssr @core — module-wide: every export below is @core unless tagged otherwise.\n/**\n * What the CLOCK and the FIELD need of the time domain: the AM/PM arithmetic, the dial's\n * geometry, the typing mask and the list of times. VTimePicker and VTimeInput are its only\n * consumers; `./time` holds what VCalendar reads as well, and this is kept apart so that\n * no calendar pays for a dial it never draws.\n *\n * The dial's geometry lives here rather than in the component for a practical reason: jsdom\n * lays nothing out and measures every element at zero, so a calculation kept inside the\n * component is untestable.\n */\nimport { digitsOf, pad2 } from './text'\nimport { formatTime, parseTime, formatTimeDisplay } from './time'\nimport type { HourFormat, Meridiem } from './time'\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\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  // A step is whole minutes: 7.5 divides 60, and wrote `09:7.5` into the model.\n  const size = Math.round(step)\n  const snapped = size <= 1 ? Math.round(minute) : Math.round(minute / size) * size\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 * How close to the centre a pointer lands on NOTHING. At the very centre there is no angle\n * at all (`atan2(0, 0)` answers half a turn, which would set six o'clock), and the centre dot\n * drawn there is not a numeral.\n *\n * TRAP: derived from the same tokens as the threshold above: the inner ring's numerals\n * start 32px from the middle (56px less half a 48px numeral), 0.25 of the radius, so the\n * dead zone stops short of them. Grow it past 0.25 and the inner small hours lose their\n * inner half to it.\n */\nexport const DIAL_DEAD_ZONE = 0.2\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/**\n * Every time of the day at a given interval, midnight to the last one before the next.\n *\n * It knows nothing of the restrictions: VTimeInput filters the rows it offers, so the list\n * itself stays one table per step and locale.\n *\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":";;;AAoBA,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;AAQA,SAAgB,EAAW,GAAgB,GAAsB;CAE/D,IAAM,IAAO,KAAK,MAAM,CAAI;CAE5B,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,MAYvB,IAAiB;AAM9B,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;AAkBA,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/css.d.ts

@@ -1,21 +1,23 @@
 /**
  * A dimension always in pixels: `12` and `'12'` both give `12px`.
  *
- * Anything non-numeric yields `undefined` rather than a custom property CSS cannot read —
+ * Anything non-numeric, or negative, yields `undefined` rather than a custom property CSS cannot read:
  * an invalid value breaks the geometry outright, where nothing at all lets the component's
  * own default apply.
  *
- * TRAP — `Number`, never `parseFloat`: the latter reads a numeric PREFIX, so `'12rem'`
+ * TRAP: `Number`, never `parseFloat`: the latter reads a numeric PREFIX, so `'12rem'`
  * would come out as `12px`, a wrong size with nothing to say so. `Number('')` being 0, a
  * blank string is refused before it gets there.
  */
 export declare function px(v: number | string | undefined): string | undefined;
 /**
  * A dimension in any unit: a bare number is read as pixels, a string passes through
- * untouched — `50%`, `20vw`, `max-content`.
+ * untouched: `50%`, `20vw`, `max-content`.
  *
  * Unlike `px` above, the string is deliberately not examined: CSS judges it, and one it
- * cannot parse falls back to whatever the component declares for itself.
+ * cannot parse falls back to whatever the component declares for itself. A NUMBER is judged
+ * here, as `px` judges one: a width computed as `NaN` or below zero, and an empty string,
+ * give nothing rather than a declaration CSS drops, so the component's own default applies.
  */
 export declare function cssSize(v: number | string | undefined): string | undefined;
 /**

package/dist/utils/css.js

@@ -2,10 +2,10 @@
 function e(e) {
 	if (e === void 0) return;
 	let t = typeof e == "number" ? e : e.trim() === "" ? NaN : Number(e);
-	return Number.isFinite(t) ? `${t}px` : void 0;
+	return Number.isFinite(t) && t >= 0 ? `${t}px` : void 0;
 }
 function t(e) {
-	if (e !== void 0) return typeof e == "number" ? `${e}px` : e;
+	if (!(e === void 0 || e === "")) return typeof e == "string" ? e : Number.isFinite(e) && e >= 0 ? `${e}px` : void 0;
 }
 function n(e) {
 	return e === void 0 ? void 0 : { "--custom-color": e };

package/dist/utils/css.js.map

@@ -1 +1 @@
-{"version":3,"file":"css.js","names":[],"sources":["../../src/utils/css.ts"],"sourcesContent":["// @core\n/**\n * A dimension always in pixels: `12` and `'12'` both give `12px`.\n *\n * Anything non-numeric yields `undefined` rather than a custom property CSS cannot read —\n * an invalid value breaks the geometry outright, where nothing at all lets the component's\n * own default apply.\n *\n * TRAP — `Number`, never `parseFloat`: the latter reads a numeric PREFIX, so `'12rem'`\n * would come out as `12px`, a wrong size with nothing to say so. `Number('')` being 0, a\n * blank string is refused before it gets there.\n */\nexport function px(v: number | string | undefined): string | undefined {\n  if (v === undefined) return undefined\n  const n = typeof v === 'number' ? v : v.trim() === '' ? Number.NaN : Number(v)\n  return Number.isFinite(n) ? `${n}px` : undefined\n}\n\n// @core\n/**\n * A dimension in any unit: a bare number is read as pixels, a string passes through\n * untouched — `50%`, `20vw`, `max-content`.\n *\n * Unlike `px` above, the string is deliberately not examined: CSS judges it, and one it\n * cannot parse falls back to whatever the component declares for itself.\n */\nexport function cssSize(v: number | string | undefined): string | undefined {\n  if (v === undefined) return undefined\n  return typeof v === 'number' ? `${v}px` : v\n}\n\n// @core\n/**\n * The inline style carrying a consumer's own colour to a component's sheet, which derives\n * every shade from `--custom-color`: VChip, VAvatar and VBadge.\n *\n * `undefined` when no colour was given, so a style array holding it binds nothing and the\n * tone the sheet already paints stays in force.\n */\nexport function customColorStyle(\n  color: string | undefined,\n): { '--custom-color': string } | undefined {\n  return color === undefined ? undefined : { '--custom-color': color }\n}\n"],"mappings":";AAYA,SAAgB,EAAG,GAAoD;CACrE,IAAI,MAAM,KAAA,GAAW;CACrB,IAAM,IAAI,OAAO,KAAM,WAAW,IAAI,EAAE,KAAK,MAAM,KAAK,MAAa,OAAO,CAAC;CAC7E,OAAO,OAAO,SAAS,CAAC,IAAI,GAAG,EAAE,MAAM,KAAA;AACzC;AAUA,SAAgB,EAAQ,GAAoD;CACtE,UAAM,KAAA,GACV,OAAO,OAAO,KAAM,WAAW,GAAG,EAAE,MAAM;AAC5C;AAUA,SAAgB,EACd,GAC0C;CAC1C,OAAO,MAAU,KAAA,IAAY,KAAA,IAAY,EAAE,kBAAkB,EAAM;AACrE"}
+{"version":3,"file":"css.js","names":[],"sources":["../../src/utils/css.ts"],"sourcesContent":["// @core\n/**\n * A dimension always in pixels: `12` and `'12'` both give `12px`.\n *\n * Anything non-numeric, or negative, yields `undefined` rather than a custom property CSS cannot read:\n * an invalid value breaks the geometry outright, where nothing at all lets the component's\n * own default apply.\n *\n * TRAP: `Number`, never `parseFloat`: the latter reads a numeric PREFIX, so `'12rem'`\n * would come out as `12px`, a wrong size with nothing to say so. `Number('')` being 0, a\n * blank string is refused before it gets there.\n */\nexport function px(v: number | string | undefined): string | undefined {\n  if (v === undefined) return undefined\n  const n = typeof v === 'number' ? v : v.trim() === '' ? Number.NaN : Number(v)\n  return Number.isFinite(n) && n >= 0 ? `${n}px` : undefined\n}\n\n// @core\n/**\n * A dimension in any unit: a bare number is read as pixels, a string passes through\n * untouched: `50%`, `20vw`, `max-content`.\n *\n * Unlike `px` above, the string is deliberately not examined: CSS judges it, and one it\n * cannot parse falls back to whatever the component declares for itself. A NUMBER is judged\n * here, as `px` judges one: a width computed as `NaN` or below zero, and an empty string,\n * give nothing rather than a declaration CSS drops, so the component's own default applies.\n */\nexport function cssSize(v: number | string | undefined): string | undefined {\n  if (v === undefined || v === '') return undefined\n  if (typeof v === 'string') return v\n  return Number.isFinite(v) && v >= 0 ? `${v}px` : undefined\n}\n\n// @core\n/**\n * The inline style carrying a consumer's own colour to a component's sheet, which derives\n * every shade from `--custom-color`: VChip, VAvatar and VBadge.\n *\n * `undefined` when no colour was given, so a style array holding it binds nothing and the\n * tone the sheet already paints stays in force.\n */\nexport function customColorStyle(\n  color: string | undefined,\n): { '--custom-color': string } | undefined {\n  return color === undefined ? undefined : { '--custom-color': color }\n}\n"],"mappings":";AAYA,SAAgB,EAAG,GAAoD;CACrE,IAAI,MAAM,KAAA,GAAW;CACrB,IAAM,IAAI,OAAO,KAAM,WAAW,IAAI,EAAE,KAAK,MAAM,KAAK,MAAa,OAAO,CAAC;CAC7E,OAAO,OAAO,SAAS,CAAC,KAAK,KAAK,IAAI,GAAG,EAAE,MAAM,KAAA;AACnD;AAYA,SAAgB,EAAQ,GAAoD;CACtE,YAAM,KAAA,KAAa,MAAM,KAE7B,OADI,OAAO,KAAM,WAAiB,IAC3B,OAAO,SAAS,CAAC,KAAK,KAAK,IAAI,GAAG,EAAE,MAAM,KAAA;AACnD;AAUA,SAAgB,EACd,GAC0C;CAC1C,OAAO,MAAU,KAAA,IAAY,KAAA,IAAY,EAAE,kBAAkB,EAAM;AACrE"}

package/dist/utils/date.d.ts

@@ -4,7 +4,7 @@
  *
  * Two shortcuts are banned as a result. `new Date('YYYY-MM-DD')` parses as UTC and lands a
  * day out depending on the zone, and `toISOString()` formats in UTC for the same reason.
- * `Date` exists here only as an intermediate, built with `new Date(y, m, d)` — local
+ * `Date` exists here only as an intermediate, built with `localDate(y, m, d)` — local
  * midnight — and turned back into text by concatenation.
  *
  * Month and day names come from `Intl` on REFERENCE dates pinned to `timeZone: 'UTC'`, so a
@@ -20,6 +20,10 @@ export declare function isValidISO(iso: unknown): iso is string;
  * Turns an ISO string into a `Date` set at local midnight, or returns `null` when
  * the string is not one. Every caller here has to handle that `null`: the bounds a
  * consumer passes are raw strings and may be anything.
+ *
+ * TRAP: the shape is not enough. The `Date` constructor rolls an impossible day over
+ * rather than refusing it (`2026-02-31` is March 3rd), so the date is written back and
+ * compared: a day the month does not have reads as no date at all.
  */
 export declare function parseISO(iso: string | null | undefined): Date | null;
 /**
@@ -95,7 +99,7 @@ export interface MonthCell {
 export declare function buildMonthGrid(year: number, month0: number, firstDayOfWeek: number): MonthCell[];
 /**
  * The day the week starts on in a given locale, from 0 for Sunday to 6 for Saturday
- * — Sunday in the United States, Monday in most of Europe, Saturday in much of the
+ *: Sunday in the United States, Monday in most of Europe, Saturday in much of the
  * Middle East. It comes from `Intl.Locale`, whose own numbering runs from 1 for
  * Monday to 7 for Sunday.
  *
@@ -109,20 +113,8 @@ export declare function firstDayOfWeekFor(locale: string): number;
  * dropped straight into a calendar header.
  */
 export declare function weekdayNames(locale: string, firstDayOfWeek: number, weekday?: 'short' | 'long'): string[];
-/** The full names of the twelve months, in January-to-December order. */
-export declare function monthNames(locale: string): string[];
-/**
- * Month names shortened for the picker's narrow cells: a name of four characters or
- * fewer is kept whole ("May", "June", "July"), a longer one is cut to three
- * characters followed by a dot ("January" becomes "Jan."). The name is spread with
- * `[...n]` rather than indexed, so that an accented or non-Latin character counts as
- * one character and is never cut in half.
- */
-export declare function monthNamesCompact(locale: string): string[];
-/** The full name of one month, 0 being January. */
-export declare function monthName(locale: string, month0: number): string;
 /**
- * A date written out for the reader, in the conventions of their locale — this is
+ * A date written out for the reader, in the conventions of their locale: this is
  * what VDateInput shows in its field. An unparsable date yields an empty string
  * rather than a broken one.
  */
@@ -133,90 +125,3 @@ export declare function formatDateDisplay(iso: string, locale: string, options:
  * full dates side by side. A period of a single day is formatted as that one date.
  */
 export declare function formatDisplayRange(start: string, end: string, locale: string, options: Intl.DateTimeFormatOptions): string;
-export type DateMaskField = 'day' | 'month' | 'year';
-/** Everything a locale decides about how a date is typed. */
-export interface DateMask {
-    /**
-     * The order the three fields appear in: day, month, year in the United Kingdom,
-     * month, day, year in the United States, year, month, day in Japan.
-     */
-    order: readonly DateMaskField[];
-    /** The single character between two fields, stripped of bidi marks and spaces. */
-    separator: string;
-    /** How many digits each field takes, in the same order: 4 for the year, 2 otherwise. */
-    lengths: readonly number[];
-    /** How many digits the complete mask holds, which is always 8. */
-    size: number;
-}
-/**
- * Works out how a date is typed in a given locale, by formatting a known date and
- * looking at what came out.
- *
- * The calendar and the numbering system are FORCED to Gregorian and Latin digits.
- * Without that, `fa-IR` answers with a Persian year (1400 rather than 2021) and
- * `ar-EG` with Arabic-Indic digits — two things a numeric field could neither
- * display nor read back. An invalid locale throws, and the answer then falls back to
- * day/month/year separated by "/".
- */
-export declare function dateMaskFor(locale: string): DateMask;
-/**
- * Lays a run of digits out as masked text. The separator appears AS SOON AS the field
- * before it is full — typing "22" already gives "22/" — so the reader sees their
- * progress without ever having to type a separator themselves.
- *
- * This has a consequence the component must honour: pressing Backspace on such a
- * separator has to delete the DIGIT before it. Deleting the separator alone would
- * see the mask write it straight back, and the key would look dead.
- */
-export declare function formatDateMask(digits: string, mask: DateMask): string;
-/**
- * Writes an ISO date in the mask of the locale, ready to be put in the field: the
- * same day reads "10/06/2026" in London and "06/10/2026" in Chicago.
- */
-export declare function isoToMask(iso: string, mask: DateMask): string;
-export interface ParseMaskOptions {
-    /**
-     * The century a two-digit year is expanded into: with 2000, "10/06/26" is read as
-     * 2026. It is only accepted when the year is the LAST field of the mask, since
-     * elsewhere the following separator already tells the two apart.
-     *
-     * Leaving it out refuses any year shorter than four digits, and that is the mode
-     * used while the reader types — so that "26", passed through on the way to "2026",
-     * is never committed as a year of its own.
-     */
-    yearPivot?: number;
-}
-/**
- * Reads masked text back into an ISO date, or returns `null` when the text is
- * incomplete, holds too many digits, or names a day that does not exist — 31
- * February passes every length check and is caught by the round trip `isValidISO`
- * performs.
- *
- * Whether the resulting date is allowed is a different question: the `min`/`max`
- * bounds and the disabled dates belong to the component, and this function knows
- * nothing about props.
- */
-export declare function parseDateMask(text: string, mask: DateMask, options?: ParseMaskOptions): string | null;
-/**
- * Where the caret has to go to sit just after the nth digit. Counting digits is the
- * only landmark that survives a reformat: an absolute position jumps by one the
- * moment a separator appears or disappears, so restoring it would leave the caret in
- * the wrong place on exactly the keystrokes that matter.
- *
- * When a separator is passed and it directly follows that position, the caret steps
- * over it: while typing, it must land in the NEXT field rather than in front of a
- * separator that has just been written. On deletion the argument is omitted, so the
- * caret stays before it and the next Backspace reaches the digit.
- */
-export declare function caretAfterDigits(text: string, n: number, separator?: string): number;
-/**
- * The empty template shown in the field: "dd/mm/yyyy" in English, "jj/mm/aaaa" in
- * French, "tt.mm.jjjj" in German, "дд/мм/гггг" in Russian.
- *
- * Each letter is the first letter of the field's own name in that language, taken
- * from `Intl.DisplayNames` — which lands on the attested convention of every
- * alphabetic script without a table to maintain. It falls back to the Latin letters
- * when that part of `Intl` is missing, or when the script is ideographic and the
- * repetition would mean nothing.
- */
-export declare function maskPlaceholder(locale: string, mask: DateMask): string;

package/dist/utils/date.js

@@ -1,22 +1,24 @@
-import { digitsOf as e, pad2 as t } from "./text.js";
-import { memo as n } from "./memo.js";
+import { pad2 as e } from "./text.js";
+import { memo as t } from "./memo.js";
 //#region src/utils/date.ts
+function n(e, t, n) {
+	let r = new Date(e, t, n);
+	return e >= 0 && e < 100 && r.setFullYear(e, t, n), r;
+}
 var r = /^\d{4}-\d{2}-\d{2}$/;
 function i(e) {
-	if (typeof e != "string" || !r.test(e)) return !1;
-	let t = a(e);
-	return t !== null && o(t) === e;
+	return typeof e == "string" && a(e) !== null;
 }
 function a(e) {
 	if (typeof e != "string" || !r.test(e)) return null;
-	let t = e.split("-"), n = new Date(Number(t[0]), Number(t[1]) - 1, Number(t[2]));
-	return Number.isNaN(n.getTime()) ? null : n;
+	let t = e.split("-"), i = n(Number(t[0]), Number(t[1]) - 1, Number(t[2]));
+	return Number.isNaN(i.getTime()) || o(i) !== e ? null : i;
 }
-function o(e) {
-	return `${e.getFullYear()}-${t(e.getMonth() + 1)}-${t(e.getDate())}`;
+function o(t) {
+	return `${String(t.getFullYear()).padStart(4, "0")}-${e(t.getMonth() + 1)}-${e(t.getDate())}`;
 }
-function s(e, t, n) {
-	return o(new Date(e, t, n));
+function s(e, t, r) {
+	return o(n(e, t, r));
 }
 function c(e, t) {
 	let n = a(e);
@@ -29,7 +31,7 @@ function l(e, t) {
 	return n.setDate(1), n.setMonth(n.getMonth() + t), n.setDate(Math.min(r, u(n.getFullYear(), n.getMonth()))), o(n);
 }
 function u(e, t) {
-	return new Date(e, t + 1, 0).getDate();
+	return n(e, t + 1, 0).getDate();
 }
 function d(e, t) {
 	return e < t ? -1 : +(e > t);
@@ -44,21 +46,21 @@ function m(e, t, n) {
 function h(e, t, n, r) {
 	return m(e, t, n) && !r(e);
 }
-function g(e, t, n) {
-	let r = new Date(e, t, 1), i = (r.getDay() - n + 7) % 7, a = [];
-	for (let n = 0; n < 42; n++) {
-		let s = new Date(e, t, 1 - i + n), c = s.getMonth() === t && s.getFullYear() === e ? null : s < r ? "prev" : "next";
-		a.push({
-			iso: o(s),
-			day: s.getDate(),
-			adjacent: c
+function g(e, t, r) {
+	let i = n(e, t, 1), a = (i.getDay() - r + 7) % 7, s = [];
+	for (let r = 0; r < 42; r++) {
+		let c = n(e, t, 1 - a + r), l = c.getMonth() === t && c.getFullYear() === e ? null : c < i ? "prev" : "next";
+		s.push({
+			iso: o(c),
+			day: c.getDate(),
+			adjacent: l
 		});
 	}
-	return a;
+	return s;
 }
 var _ = /* @__PURE__ */ new Map();
 function v(e) {
-	return n(_, e, () => y(e));
+	return t(_, e, () => y(e));
 }
 function y(e) {
 	try {
@@ -75,150 +77,21 @@ function S(e, t, n = "short") {
 	});
 	return Array.from({ length: 7 }, (e, n) => r.format(b + (t + n) % 7 * x));
 }
-function C(e) {
-	let t = new Intl.DateTimeFormat(e, {
-		month: "long",
-		timeZone: "UTC"
-	});
-	return Array.from({ length: 12 }, (e, n) => t.format(Date.UTC(2021, n, 1)));
-}
-function w(e) {
-	return C(e).map((e) => {
-		let t = [...e];
-		return t.length <= 4 ? e : t.slice(0, 3).join("") + ".";
-	});
-}
-var T = /* @__PURE__ */ new Map();
-function E(e, t) {
-	return n(T, `${e}|${JSON.stringify(t)}`, () => new Intl.DateTimeFormat(e, t));
-}
-function D(e, t) {
-	return E(e, {
-		month: "long",
-		timeZone: "UTC"
-	}).format(Date.UTC(2021, t, 1));
+var C = /* @__PURE__ */ new Map();
+function w(e, n) {
+	return t(C, `${e}|${JSON.stringify(n)}`, () => new Intl.DateTimeFormat(e, n));
 }
-function O(e, t, n) {
+function T(e, t, n) {
 	let r = a(e);
-	return r ? E(t, n).format(r) : "";
+	return r ? w(t, n).format(r) : "";
 }
-function k(e, t, n, r) {
+function E(e, t, n, r) {
 	let i = a(e), o = a(t);
 	if (!i || !o) return "";
-	let s = E(n, r);
-	return d(e, t) === 0 ? s.format(i) : s.formatRange(i, o);
-}
-var A = {
-	order: [
-		"day",
-		"month",
-		"year"
-	],
-	separator: "/",
-	lengths: [
-		2,
-		2,
-		4
-	],
-	size: 8
-}, j = Date.UTC(2021, 10, 22), M = /[‎‏؜]/g, N = /* @__PURE__ */ new Map();
-function P(e) {
-	return n(N, e, () => F(e));
-}
-function F(e) {
-	try {
-		let t = new Intl.DateTimeFormat(e, {
-			day: "2-digit",
-			month: "2-digit",
-			year: "numeric",
-			timeZone: "UTC",
-			calendar: "gregory",
-			numberingSystem: "latn"
-		}).formatToParts(j), n = t.map((e) => e.type).filter((e) => e === "day" || e === "month" || e === "year"), r = t.findIndex((e) => e.type !== "literal"), i = t.slice(r).find((e) => e.type === "literal")?.value.replace(M, "").trim();
-		if (n.length === 3 && i) return {
-			order: n,
-			separator: i,
-			lengths: n.map((e) => e === "year" ? 4 : 2),
-			size: 8
-		};
-	} catch {}
-	return A;
-}
-function I(t, n) {
-	let r = e(t).slice(0, n.size), i = "", a = 0;
-	for (let e = 0; e < n.lengths.length; e++) {
-		let t = n.lengths[e], o = r.slice(a, a + t);
-		if (!o || (i += o, a += t, o.length < t)) break;
-		e < n.lengths.length - 1 && (i += n.separator);
-	}
-	return i;
-}
-function L(e, t) {
-	if (!i(e)) return "";
-	let [n, r, a] = e.split("-"), o = {
-		year: n,
-		month: r,
-		day: a
-	};
-	return I(t.order.map((e) => o[e]).join(""), t);
-}
-function R(t, n, r = {}) {
-	let a = e(t), o = {}, s = 0;
-	for (let e = 0; e < n.order.length; e++) {
-		let t = n.order[e], i = n.lengths[e], c = a.slice(s, s + i);
-		if (c.length === i) s += i;
-		else if (t === "year" && r.yearPivot !== void 0 && e === n.order.length - 1 && c.length === 2) s += 2;
-		else return null;
-		o[t] = c;
-	}
-	if (s !== a.length) return null;
-	let c = `${o.year.length === 2 ? String(r.yearPivot + Number(o.year)) : o.year}-${o.month}-${o.day}`;
-	return i(c) ? c : null;
-}
-function z(e, t, n) {
-	let r = 0;
-	if (t > 0) {
-		r = e.length;
-		let n = 0;
-		for (let i = 0; i < e.length; i++) {
-			let a = e.charCodeAt(i);
-			if (a >= 48 && a <= 57 && ++n === t) {
-				r = i + 1;
-				break;
-			}
-		}
-	}
-	return n && e.startsWith(n, r) && (r += n.length), r;
-}
-var B = {
-	day: "d",
-	month: "m",
-	year: "y"
-}, V = /[\p{sc=Han}\p{sc=Hangul}\p{sc=Hiragana}\p{sc=Katakana}]/u;
-function H(e, t) {
-	let n = W(e);
-	return t.order.map((e, r) => n[e].repeat(t.lengths[r])).join(t.separator);
-}
-var U = /* @__PURE__ */ new Map();
-function W(e) {
-	return n(U, e, () => G(e));
-}
-function G(e) {
-	let t = { ...B };
-	try {
-		let n = new Intl.DisplayNames(e, { type: "dateTimeField" });
-		for (let r of [
-			"day",
-			"month",
-			"year"
-		]) {
-			let i = [...n.of(r) ?? ""][0];
-			i && /\p{L}/u.test(i) && !V.test(i) && (t[r] = i.toLocaleLowerCase(e));
-		}
-	} catch {}
-	return t;
+	let s = w(n, r), c = d(e, t);
+	return c === 0 ? s.format(i) : c < 0 ? s.formatRange(i, o) : s.formatRange(o, i);
 }
 //#endregion
-export { c as addDays, l as addMonths, g as buildMonthGrid, z as caretAfterDigits, p as clampISO, d as compareISO, P as dateMaskFor, u as daysInMonth, v as firstDayOfWeekFor, O as formatDateDisplay, I as formatDateMask, k as formatDisplayRange, o as formatISO, h as isDateAllowed, f as isSameISO, i as isValidISO, m as isWithin, s as isoOf, L as isoToMask, H as maskPlaceholder, D as monthName, C as monthNames, w as monthNamesCompact, R as parseDateMask, a as parseISO, S as weekdayNames };
+export { c as addDays, l as addMonths, g as buildMonthGrid, p as clampISO, d as compareISO, u as daysInMonth, v as firstDayOfWeekFor, T as formatDateDisplay, E as formatDisplayRange, o as formatISO, h as isDateAllowed, f as isSameISO, i as isValidISO, m as isWithin, s as isoOf, a as parseISO, S as weekdayNames };
 
 //# sourceMappingURL=date.js.map