vectis-ui 0.1.0 → 0.8.0

package/dist/composables/useMaskedField.d.ts

@@ -38,21 +38,36 @@ export interface MaskedFieldOptions<T extends string> {
      */
     acceptable?: (value: T) => boolean;
 }
-export interface MaskedField {
+/** What a component adds to the mask's own keys. */
+export interface MaskedKeyHooks {
+    /**
+     * A key that is not a digit was typed — a separator, most often. Its character never
+     * reaches the field; what it MEANS is the component's: a date pads the field being typed
+     * and moves on to the next, a time pads the hour.
+     */
+    onSeparator: (el: HTMLInputElement) => void;
+    /**
+     * The down arrow, which a component with a panel turns into the way into it. It answers
+     * whether it handled the press: only then is the default cancelled, and a press left
+     * alone travels on to whatever opens the panel.
+     */
+    onArrowDown?: () => boolean;
+    /** Runs once Enter has committed or reverted what was typed: closing a panel, say. */
+    onEnter?: () => void;
+}
+export interface MaskedField<T extends string> {
     /** The text currently in the field while it is being typed into. */
     draft: Ref<string>;
     /**
-     * TRAP — bind this with `v-model` on the field and NEVER as a one-way value. Without a
-     * listener for its updates, the field keeps an internal copy of the RAW text typed and
-     * writes it back on the next patch — which erases the mask precisely when the masked
-     * text did NOT change: a rejected character, or a digit past the last. Both components
-     * have a test locking it.
+     * TRAP — bind with `v-model` and NEVER `:model-value`. Without an `onUpdate:modelValue`
+     * listener, `useModel` keeps an internal copy of the RAW typed text and rewrites it on the
+     * next patch, erasing the mask exactly when the masked text did NOT change: a rejected
+     * character, or a digit past the last. Both components lock it with a test.
      */
     fieldModel: WritableComputedRef<string | number>;
     /**
-     * Writes the text into both the draft and the input itself. Both are needed: Vue does
-     * not patch an element whose text it believes is unchanged, and after a reformat it
-     * often is.
+     * Writes into both the draft and the input. Both are needed: Vue does not patch an element
+     * whose value it believes unchanged, and after a reformat it often is.
      */
     writeField: (text: string, caret?: number) => void;
     /** Takes the value as soon as what has been typed is complete and acceptable. */
@@ -61,5 +76,13 @@ export interface MaskedField {
     commitOrRevert: () => void;
     /** The handler to bind to the field's input event. */
     onFieldInput: (event: Event) => void;
+    /** The handler for the field's keydown event, with what the component adds to it. */
+    onKeydown: (event: KeyboardEvent, hooks: MaskedKeyHooks) => void;
+    /**
+     * The handler for the field's paste event. `recognize` reads the pasted text as a WHOLE
+     * value when it is one — a date in ISO form, a canonical time — and answers nothing
+     * otherwise, in which case only the digits of what was pasted are taken.
+     */
+    onPaste: (event: ClipboardEvent, recognize: (pasted: string) => T | null) => void;
 }
-export declare function useMaskedField<T extends string>(options: MaskedFieldOptions<T>): MaskedField;
+export declare function useMaskedField<T extends string>(options: MaskedFieldOptions<T>): MaskedField<T>;

package/dist/composables/useMaskedField.js

@@ -39,13 +39,57 @@ function i(i) {
 		let n = t.target, r = n.value, a = n.selectionStart ?? r.length, o = e(r.slice(0, a)).length, s = e(r).slice(0, i.maxDigits()), u = !String(t.inputType ?? "").startsWith("delete"), d = i.format(s);
 		c(d, i.caret(d, Math.min(o, s.length), u)), l();
 	}
+	function f(t) {
+		let n = t.selectionStart;
+		if (n === null || n !== t.selectionEnd || n === 0 || /\d/.test(t.value[n - 1] ?? "")) return !1;
+		let r = e(t.value.slice(0, n)).length, a = e(t.value), o = i.format(a.slice(0, r - 1) + a.slice(r));
+		return c(o, i.caret(o, r - 1, !1)), l(), !0;
+	}
+	function p(t, n) {
+		let r = t.selectionStart ?? t.value.length, a = t.selectionEnd ?? r, o = e(t.value), s = e(t.value.slice(0, r)).length, u = e(t.value.slice(0, a)).length, d = e(n), f = (o.slice(0, s) + d + o.slice(u)).slice(0, i.maxDigits()), p = i.format(f);
+		c(p, i.caret(p, Math.min(s + d.length, f.length), !0)), l();
+	}
+	function m(e, t) {
+		if (!i.typing()) return;
+		let n = i.fieldEl.value;
+		if (n) {
+			if (e.key === "Enter") {
+				e.preventDefault(), u(), t.onEnter?.();
+				return;
+			}
+			if (e.key === "ArrowDown") {
+				t.onArrowDown?.() && e.preventDefault();
+				return;
+			}
+			if (e.key === "Backspace") {
+				f(n) && e.preventDefault();
+				return;
+			}
+			e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && !/\d/.test(e.key) && (e.preventDefault(), t.onSeparator(n));
+		}
+	}
+	function h(e, t) {
+		if (!i.typing()) return;
+		let n = i.fieldEl.value;
+		if (!n) return;
+		e.preventDefault();
+		let r = (e.clipboardData?.getData("text") ?? "").trim(), a = t(r);
+		if (a) {
+			let e = i.toMask(a);
+			c(e, e.length), o(a) && a !== i.readValue() && i.writeValue(a);
+			return;
+		}
+		p(n, r);
+	}
 	return {
 		draft: a,
 		fieldModel: s,
 		writeField: c,
 		commitLive: l,
 		commitOrRevert: u,
-		onFieldInput: d
+		onFieldInput: d,
+		onKeydown: m,
+		onPaste: h
 	};
 }
 //#endregion

package/dist/composables/useMaskedField.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMaskedField.js","names":[],"sources":["../../src/composables/useMaskedField.ts"],"sourcesContent":["// @core — module-wide: mask, caret and commit are the field's own behaviour.\n/**\n * A field one types a date or a time into: the reader enters digits, and the separators\n * appear as they go.\n *\n * It is the FIELD half of the date and time pickers, the panel half being shared already.\n * What is injected here is only the vocabulary of the mask itself: how many digits it\n * holds, how those digits become text, where the caret should land, and how the text\n * becomes a value.\n *\n * The two differ in one respect worth knowing: a date's separator depends on the reader's\n * language while a time's is the same everywhere, so they work out the caret differently.\n * Nothing here cares — it only tells them whether the edit was an INSERTION, which is what\n * decides whether the caret steps over a separator.\n */\nimport { computed, ref, watch, type Ref, type WritableComputedRef } from 'vue'\n\nimport { digitsOf } from '../utils/text'\n\nexport interface MaskedFieldOptions<T extends string> {\n  /** The real input, which is written to directly — see below. */\n  fieldEl: Ref<HTMLInputElement | null>\n  /** Whether the field can be typed into at all. Everything here is inert when it cannot. */\n  typing: () => boolean\n  /** What the field shows when it is NOT being typed into: the value, written out in full. */\n  displayText: () => string\n  /** The current value, or nothing. */\n  readValue: () => T | null\n  /** Writes a new value. */\n  writeValue: (value: T | null) => void\n  /** How many digits the mask holds: eight for a date, four for a time. */\n  maxDigits: () => number\n  /** Lays a run of digits out as masked text. */\n  format: (digits: string) => string\n  /**\n   * Where the caret goes so as to sit after a given number of digits.\n   *\n   * The flag says whether something was INSERTED rather than deleted, and it matters: on\n   * a deletion the caret must stay IN FRONT of the separator, or the next press of the key\n   * would step over it instead of erasing, and the key would appear to do nothing.\n   */\n  caret: (text: string, digitsBefore: number, inserting: boolean) => number\n  /**\n   * Reads masked text back into a value, or nothing when it is not one yet.\n   *\n   * The flag marks the FINAL reading, when the reader leaves the field. A date expands a\n   * two-digit year only there: \"26\" must not be committed as 2026 while it may still be on\n   * its way to becoming it.\n   */\n  parse: (text: string, final: boolean) => T | null\n  /** Writes a value as masked text, and nothing at all for no value. */\n  toMask: (value: T | null) => string\n  /**\n   * Whether a value the reader has finished typing may be taken — within the bounds, not\n   * one of the excluded days. Everything is acceptable by default.\n   */\n  acceptable?: (value: T) => boolean\n}\n\nexport interface MaskedField {\n  /** The text currently in the field while it is being typed into. */\n  draft: Ref<string>\n  /**\n   * TRAP — bind this with `v-model` on the field and NEVER as a one-way value. Without a\n   * listener for its updates, the field keeps an internal copy of the RAW text typed and\n   * writes it back on the next patch — which erases the mask precisely when the masked\n   * text did NOT change: a rejected character, or a digit past the last. Both components\n   * have a test locking it.\n   */\n  fieldModel: WritableComputedRef<string | number>\n  /**\n   * Writes the text into both the draft and the input itself. Both are needed: Vue does\n   * not patch an element whose text it believes is unchanged, and after a reformat it\n   * often is.\n   */\n  writeField: (text: string, caret?: number) => void\n  /** Takes the value as soon as what has been typed is complete and acceptable. */\n  commitLive: () => void\n  /** Called as the reader leaves the field. It is safe to call twice. */\n  commitOrRevert: () => void\n  /** The handler to bind to the field's input event. */\n  onFieldInput: (event: Event) => void\n}\n\nexport function useMaskedField<T extends string>(options: MaskedFieldOptions<T>): MaskedField {\n  const draft = ref('')\n  const acceptable = options.acceptable ?? (() => true)\n\n  /*\n   * The current value, written as masked text. Being derived, it also tracks whatever the\n   * conversion reads — the language's own mask, the choice of clock — so neither component\n   * has to list those dependencies itself.\n   */\n  const maskedValue = computed(() => options.toMask(options.readValue()))\n\n  watch(\n    maskedValue,\n    (next) => {\n      // TRAP — this guard is what stops the field and the value chasing each other. A\n      // commit made while typing writes the value, which comes straight back here; without\n      // the test, the text being typed and the caret with it would be overwritten by text\n      // identical to what is already there.\n      if (next !== draft.value) draft.value = next\n    },\n    { immediate: true },\n  )\n\n  const fieldModel = computed<string | number>({\n    get: () => (options.typing() ? draft.value : options.displayText()),\n    set: (value) => {\n      if (options.typing()) draft.value = String(value ?? '')\n    },\n  })\n\n  function writeField(text: string, caret?: number) {\n    draft.value = text\n    const el = options.fieldEl.value\n    if (!el) return\n    if (el.value !== text) el.value = text\n    if (caret !== undefined) el.setSelectionRange(caret, caret)\n  }\n\n  function commitLive() {\n    const value = options.parse(draft.value, false)\n    if (value && acceptable(value) && value !== options.readValue()) options.writeValue(value)\n  }\n\n  /**\n   * Tidies up what was typed, or SILENTLY puts back what was there before.\n   *\n   * An entry that is incomplete, impossible — the 31st of February — outside the allowed\n   * bounds or excluded simply disappears in favour of the current value. There is\n   * deliberately no error state of our own competing with the `invalid` prop a consumer\n   * controls.\n   */\n  function commitOrRevert() {\n    if (!options.typing()) return\n    if (!digitsOf(draft.value)) {\n      if (options.readValue() !== null) options.writeValue(null)\n      writeField('')\n      return\n    }\n    const value = options.parse(draft.value, true)\n    if (value && acceptable(value)) {\n      if (value !== options.readValue()) options.writeValue(value)\n      // Rewritten in full: \"5/6/26\" becomes \"05/06/2026\".\n      writeField(options.toMask(value))\n      return\n    }\n    writeField(options.toMask(options.readValue()))\n  }\n\n  /**\n   * Reformats the field on every keystroke.\n   *\n   * The invariant to keep is that the number of digits to the LEFT of the caret survives\n   * the reformatting. Restoring an absolute position instead would misplace the caret on\n   * exactly the keystrokes that matter: a position jumps by one the moment a separator\n   * appears or disappears.\n   */\n  function onFieldInput(event: Event) {\n    if (!options.typing()) return\n    const el = event.target as HTMLInputElement\n    const raw = el.value\n    const caret = el.selectionStart ?? raw.length\n    const before = digitsOf(raw.slice(0, caret)).length\n    const digits = digitsOf(raw).slice(0, options.maxDigits())\n    const inserting = !String((event as InputEvent).inputType ?? '').startsWith('delete')\n    const text = options.format(digits)\n    writeField(text, options.caret(text, Math.min(before, digits.length), inserting))\n    commitLive()\n  }\n\n  return { draft, fieldModel, writeField, commitLive, commitOrRevert, onFieldInput }\n}\n"],"mappings":";;;AAoFA,SAAgB,EAAiC,GAA6C;CAC5F,IAAM,IAAQ,EAAI,EAAE,GACd,IAAa,EAAQ,qBAAqB;CAShD,EAFoB,QAAe,EAAQ,OAAO,EAAQ,UAAU,CAAC,CAGnE,IACC,MAAS;EAKR,AAAI,MAAS,EAAM,UAAO,EAAM,QAAQ;CAC1C,GACA,EAAE,WAAW,GAAK,CACpB;CAEA,IAAM,IAAa,EAA0B;EAC3C,WAAY,EAAQ,OAAO,IAAI,EAAM,QAAQ,EAAQ,YAAY;EACjE,MAAM,MAAU;GACd,AAAI,EAAQ,OAAO,MAAG,EAAM,QAAQ,OAAO,KAAS,EAAE;EACxD;CACF,CAAC;CAED,SAAS,EAAW,GAAc,GAAgB;EAChD,EAAM,QAAQ;EACd,IAAM,IAAK,EAAQ,QAAQ;EACtB,MACD,EAAG,UAAU,MAAM,EAAG,QAAQ,IAC9B,MAAU,KAAA,KAAW,EAAG,kBAAkB,GAAO,CAAK;CAC5D;CAEA,SAAS,IAAa;EACpB,IAAM,IAAQ,EAAQ,MAAM,EAAM,OAAO,EAAK;EAC9C,AAAI,KAAS,EAAW,CAAK,KAAK,MAAU,EAAQ,UAAU,KAAG,EAAQ,WAAW,CAAK;CAC3F;CAUA,SAAS,IAAiB;EACxB,IAAI,CAAC,EAAQ,OAAO,GAAG;EACvB,IAAI,CAAC,EAAS,EAAM,KAAK,GAAG;GAE1B,AADI,EAAQ,UAAU,MAAM,QAAM,EAAQ,WAAW,IAAI,GACzD,EAAW,EAAE;GACb;EACF;EACA,IAAM,IAAQ,EAAQ,MAAM,EAAM,OAAO,EAAI;EAC7C,IAAI,KAAS,EAAW,CAAK,GAAG;GAG9B,AAFI,MAAU,EAAQ,UAAU,KAAG,EAAQ,WAAW,CAAK,GAE3D,EAAW,EAAQ,OAAO,CAAK,CAAC;GAChC;EACF;EACA,EAAW,EAAQ,OAAO,EAAQ,UAAU,CAAC,CAAC;CAChD;CAUA,SAAS,EAAa,GAAc;EAClC,IAAI,CAAC,EAAQ,OAAO,GAAG;EACvB,IAAM,IAAK,EAAM,QACX,IAAM,EAAG,OACT,IAAQ,EAAG,kBAAkB,EAAI,QACjC,IAAS,EAAS,EAAI,MAAM,GAAG,CAAK,CAAC,CAAC,CAAC,QACvC,IAAS,EAAS,CAAG,CAAC,CAAC,MAAM,GAAG,EAAQ,UAAU,CAAC,GACnD,IAAY,CAAC,OAAQ,EAAqB,aAAa,EAAE,CAAC,CAAC,WAAW,QAAQ,GAC9E,IAAO,EAAQ,OAAO,CAAM;EAElC,AADA,EAAW,GAAM,EAAQ,MAAM,GAAM,KAAK,IAAI,GAAQ,EAAO,MAAM,GAAG,CAAS,CAAC,GAChF,EAAW;CACb;CAEA,OAAO;EAAE;EAAO;EAAY;EAAY;EAAY;EAAgB;CAAa;AACnF"}
+{"version":3,"file":"useMaskedField.js","names":[],"sources":["../../src/composables/useMaskedField.ts"],"sourcesContent":["// @core — module-wide: mask, caret and commit are the field's own behaviour.\n/**\n * The masked field of VDateInput and VTimeInput: the reader types digits, the separators\n * appear as they go. The FIELD half, `useFieldPanel` being the panel half.\n *\n * Only the mask's vocabulary is injected — how many digits, how they become text, where the\n * caret lands, how the text becomes a value. A date's separator is locale-dependent where a\n * time's is universal, so the two compute the caret differently; nothing here cares beyond\n * telling them whether the edit was an INSERTION.\n */\nimport { computed, ref, watch, type Ref, type WritableComputedRef } from 'vue'\n\nimport { digitsOf } from '../utils/text'\n\nexport interface MaskedFieldOptions<T extends string> {\n  /** The real input, which is written to directly — see below. */\n  fieldEl: Ref<HTMLInputElement | null>\n  /** Whether the field can be typed into at all. Everything here is inert when it cannot. */\n  typing: () => boolean\n  /** What the field shows when it is NOT being typed into: the value, written out in full. */\n  displayText: () => string\n  /** The current value, or nothing. */\n  readValue: () => T | null\n  /** Writes a new value. */\n  writeValue: (value: T | null) => void\n  /** How many digits the mask holds: eight for a date, four for a time. */\n  maxDigits: () => number\n  /** Lays a run of digits out as masked text. */\n  format: (digits: string) => string\n  /**\n   * Where the caret goes so as to sit after a given number of digits.\n   *\n   * The flag says whether something was INSERTED rather than deleted, and it matters: on\n   * a deletion the caret must stay IN FRONT of the separator, or the next press of the key\n   * would step over it instead of erasing, and the key would appear to do nothing.\n   */\n  caret: (text: string, digitsBefore: number, inserting: boolean) => number\n  /**\n   * Reads masked text back into a value, or nothing when it is not one yet.\n   *\n   * The flag marks the FINAL reading, when the reader leaves the field. A date expands a\n   * two-digit year only there: \"26\" must not be committed as 2026 while it may still be on\n   * its way to becoming it.\n   */\n  parse: (text: string, final: boolean) => T | null\n  /** Writes a value as masked text, and nothing at all for no value. */\n  toMask: (value: T | null) => string\n  /**\n   * Whether a value the reader has finished typing may be taken — within the bounds, not\n   * one of the excluded days. Everything is acceptable by default.\n   */\n  acceptable?: (value: T) => boolean\n}\n\n/** What a component adds to the mask's own keys. */\nexport interface MaskedKeyHooks {\n  /**\n   * A key that is not a digit was typed — a separator, most often. Its character never\n   * reaches the field; what it MEANS is the component's: a date pads the field being typed\n   * and moves on to the next, a time pads the hour.\n   */\n  onSeparator: (el: HTMLInputElement) => void\n  /**\n   * The down arrow, which a component with a panel turns into the way into it. It answers\n   * whether it handled the press: only then is the default cancelled, and a press left\n   * alone travels on to whatever opens the panel.\n   */\n  onArrowDown?: () => boolean\n  /** Runs once Enter has committed or reverted what was typed: closing a panel, say. */\n  onEnter?: () => void\n}\n\nexport interface MaskedField<T extends string> {\n  /** The text currently in the field while it is being typed into. */\n  draft: Ref<string>\n  /**\n   * TRAP — bind with `v-model` and NEVER `:model-value`. Without an `onUpdate:modelValue`\n   * listener, `useModel` keeps an internal copy of the RAW typed text and rewrites it on the\n   * next patch, erasing the mask exactly when the masked text did NOT change: a rejected\n   * character, or a digit past the last. Both components lock it with a test.\n   */\n  fieldModel: WritableComputedRef<string | number>\n  /**\n   * Writes into both the draft and the input. Both are needed: Vue does not patch an element\n   * whose value it believes unchanged, and after a reformat it often is.\n   */\n  writeField: (text: string, caret?: number) => void\n  /** Takes the value as soon as what has been typed is complete and acceptable. */\n  commitLive: () => void\n  /** Called as the reader leaves the field. It is safe to call twice. */\n  commitOrRevert: () => void\n  /** The handler to bind to the field's input event. */\n  onFieldInput: (event: Event) => void\n  /** The handler for the field's keydown event, with what the component adds to it. */\n  onKeydown: (event: KeyboardEvent, hooks: MaskedKeyHooks) => void\n  /**\n   * The handler for the field's paste event. `recognize` reads the pasted text as a WHOLE\n   * value when it is one — a date in ISO form, a canonical time — and answers nothing\n   * otherwise, in which case only the digits of what was pasted are taken.\n   */\n  onPaste: (event: ClipboardEvent, recognize: (pasted: string) => T | null) => void\n}\n\nexport function useMaskedField<T extends string>(options: MaskedFieldOptions<T>): MaskedField<T> {\n  const draft = ref('')\n  const acceptable = options.acceptable ?? (() => true)\n\n  /*\n   * The value as masked text. Being a computed it also tracks what the conversion reads —\n   * the locale's mask, the hour cycle — so neither component lists those dependencies.\n   */\n  const maskedValue = computed(() => options.toMask(options.readValue()))\n\n  watch(\n    maskedValue,\n    (next) => {\n      // TRAP — the anti-loop guard. A commit made while typing writes the value, which comes\n      // straight back here; without the test, the text being typed and its caret would be\n      // overwritten by text identical to what is already there.\n      if (next !== draft.value) draft.value = next\n    },\n    { immediate: true },\n  )\n\n  const fieldModel = computed<string | number>({\n    get: () => (options.typing() ? draft.value : options.displayText()),\n    set: (value) => {\n      if (options.typing()) draft.value = String(value ?? '')\n    },\n  })\n\n  function writeField(text: string, caret?: number) {\n    draft.value = text\n    const el = options.fieldEl.value\n    if (!el) return\n    if (el.value !== text) el.value = text\n    if (caret !== undefined) el.setSelectionRange(caret, caret)\n  }\n\n  function commitLive() {\n    const value = options.parse(draft.value, false)\n    if (value && acceptable(value) && value !== options.readValue()) options.writeValue(value)\n  }\n\n  /**\n   * Commits what was typed, or SILENTLY reverts to the current value.\n   *\n   * An entry that is incomplete, impossible (31 February), out of bounds or excluded simply\n   * disappears. There is deliberately no error state of our own competing with the `invalid`\n   * prop the consumer controls.\n   */\n  function commitOrRevert() {\n    if (!options.typing()) return\n    if (!digitsOf(draft.value)) {\n      if (options.readValue() !== null) options.writeValue(null)\n      writeField('')\n      return\n    }\n    const value = options.parse(draft.value, true)\n    if (value && acceptable(value)) {\n      if (value !== options.readValue()) options.writeValue(value)\n      // Rewritten in full: \"5/6/26\" becomes \"05/06/2026\".\n      writeField(options.toMask(value))\n      return\n    }\n    writeField(options.toMask(options.readValue()))\n  }\n\n  /**\n   * Reformats the field on every keystroke.\n   *\n   * The invariant to keep is that the number of digits to the LEFT of the caret survives\n   * the reformatting. Restoring an absolute position instead would misplace the caret on\n   * exactly the keystrokes that matter: a position jumps by one the moment a separator\n   * appears or disappears.\n   */\n  function onFieldInput(event: Event) {\n    if (!options.typing()) return\n    const el = event.target as HTMLInputElement\n    const raw = el.value\n    const caret = el.selectionStart ?? raw.length\n    const before = digitsOf(raw.slice(0, caret)).length\n    const digits = digitsOf(raw).slice(0, options.maxDigits())\n    const inserting = !String((event as InputEvent).inputType ?? '').startsWith('delete')\n    const text = options.format(digits)\n    writeField(text, options.caret(text, Math.min(before, digits.length), inserting))\n    commitLive()\n  }\n\n  /*\n   * Backspace over a SEPARATOR, which erases the digit in front of it instead.\n   *\n   * TRAP — a separator is placed by the mask and never typed, so erasing one has to erase\n   * the DIGIT before it, which is what the reader believes they are erasing. Left alone, the\n   * mask writes the separator straight back and the key looks dead.\n   *\n   * It answers whether it handled the press: `false` means the caret was not sitting after a\n   * separator and the browser's own Backspace should run.\n   */\n  function backspaceOverSeparator(el: HTMLInputElement) {\n    const start = el.selectionStart\n    if (\n      start === null ||\n      start !== el.selectionEnd ||\n      start === 0 ||\n      /\\d/.test(el.value[start - 1] ?? '')\n    ) {\n      return false\n    }\n    const before = digitsOf(el.value.slice(0, start)).length\n    const digits = digitsOf(el.value)\n    const text = options.format(digits.slice(0, before - 1) + digits.slice(before))\n    writeField(text, options.caret(text, before - 1, false))\n    commitLive()\n    return true\n  }\n\n  /**\n   * Splices a pasted run of digits into the one already in the field, at the selection, and\n   * puts the caret after what was inserted.\n   */\n  function pasteDigits(el: HTMLInputElement, pasted: string) {\n    const start = el.selectionStart ?? el.value.length\n    const end = el.selectionEnd ?? start\n    const digits = digitsOf(el.value)\n    const from = digitsOf(el.value.slice(0, start)).length\n    const to = digitsOf(el.value.slice(0, end)).length\n    const inserted = digitsOf(pasted)\n    const next = (digits.slice(0, from) + inserted + digits.slice(to)).slice(0, options.maxDigits())\n    const text = options.format(next)\n    writeField(text, options.caret(text, Math.min(from + inserted.length, next.length), true))\n    commitLive()\n  }\n\n  // @keyboard\n  function onKeydown(event: KeyboardEvent, hooks: MaskedKeyHooks) {\n    if (!options.typing()) return\n    const el = options.fieldEl.value\n    if (!el) return\n\n    if (event.key === 'Enter') {\n      // Cancelling the default does two things at once: it stops the surrounding form from\n      // being submitted, and it stops a panel this keystroke closes from being reopened as\n      // the event travels up to the component's root.\n      event.preventDefault()\n      commitOrRevert()\n      hooks.onEnter?.()\n      return\n    }\n    if (event.key === 'ArrowDown') {\n      if (hooks.onArrowDown?.()) event.preventDefault()\n      return\n    }\n    if (event.key === 'Backspace') {\n      if (backspaceOverSeparator(el)) event.preventDefault()\n      return\n    }\n    if (\n      event.key.length === 1 &&\n      !event.ctrlKey &&\n      !event.metaKey &&\n      !event.altKey &&\n      !/\\d/.test(event.key)\n    ) {\n      event.preventDefault()\n      hooks.onSeparator(el)\n    }\n  }\n\n  /**\n   * Pasting. Without the whole-value path, pasting \"2026-06-10\" into a field expecting day,\n   * month, year would produce \"20/26/0610\": the digits would be taken in order and the\n   * separators ignored.\n   *\n   * A whole value is written as it stands rather than read back from the mask, which is not\n   * a detail on a 12-hour clock: \"19:05\" shows as \"07:05\", and reading that text back would\n   * take the half of the day from the AM/PM button instead of from what was pasted.\n   */\n  function onPaste(event: ClipboardEvent, recognize: (pasted: string) => T | null) {\n    if (!options.typing()) return\n    const el = options.fieldEl.value\n    if (!el) return\n    event.preventDefault()\n    const pasted = (event.clipboardData?.getData('text') ?? '').trim()\n    const whole = recognize(pasted)\n    if (whole) {\n      const text = options.toMask(whole)\n      writeField(text, text.length)\n      if (acceptable(whole) && whole !== options.readValue()) options.writeValue(whole)\n      return\n    }\n    pasteDigits(el, pasted)\n  }\n\n  return {\n    draft,\n    fieldModel,\n    writeField,\n    commitLive,\n    commitOrRevert,\n    onFieldInput,\n    onKeydown,\n    onPaste,\n  }\n}\n"],"mappings":"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"}

package/dist/composables/usePopover.d.ts

@@ -1,7 +1,21 @@
 import { Ref } from 'vue';
-export declare function usePopover(el: Ref<HTMLElement | null>): {
+export declare function usePopover(el: Readonly<Ref<HTMLElement | null>>): {
     shown: Ref<boolean, boolean>;
     syncShown: (event: Event) => void;
     show: (source?: HTMLElement) => void;
     hide: () => void;
 };
+/**
+ * The model half of a popover's `v-model:open`, for a component that publishes its open
+ * state: a change to the model opens or closes the panel. The other half — writing the
+ * DOM's state back into the model — stays with the component, in its own toggle handler,
+ * because that is where it knows the state has settled.
+ *
+ * `shown` is a getter so that the state may live in a child: VPopover reads its own
+ * `usePopover`, VMenu reads the one VMenuPanel exposes.
+ *
+ * TRAP — the `value === shown()` guard is what keeps the two directions from chasing each
+ * other. A panel the browser has just dismissed writes `false` into the model; without the
+ * guard that write would come back here as a request to close a panel already closed.
+ */
+export declare function usePopoverModel(open: Ref<boolean>, shown: () => boolean, show: () => void, hide: () => void): void;

package/dist/composables/usePopover.js

@@ -1,24 +1,39 @@
-import { ref as e } from "vue";
+import { onMounted as e, ref as t, watch as n } from "vue";
 //#region src/composables/usePopover.ts
-function t(t) {
-	let n = e(!1);
+function r(e) {
+	let n = t(!1);
 	function r(e) {
 		n.value = e.newState === "open";
 	}
 	function i(e) {
-		n.value || t.value?.showPopover(e ? { source: e } : void 0);
+		a(e, !0);
 	}
-	function a() {
-		n.value && t.value?.hidePopover();
+	function a(t, r) {
+		let i = e.value;
+		if (!(!i || n.value)) try {
+			i.showPopover(t ? { source: t } : void 0);
+		} catch {
+			r && queueMicrotask(() => a(t, !1));
+		}
+	}
+	function o() {
+		n.value && e.value?.hidePopover();
 	}
 	return {
 		shown: n,
 		syncShown: r,
 		show: i,
-		hide: a
+		hide: o
 	};
 }
+function i(t, r, i, a) {
+	n(t, (e) => {
+		e !== r() && (e ? i() : a());
+	}), e(() => {
+		t.value && i();
+	});
+}
 //#endregion
-export { t as usePopover };
+export { r as usePopover, i as usePopoverModel };
 
 //# sourceMappingURL=usePopover.js.map

package/dist/composables/usePopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePopover.js","names":[],"sources":["../../src/composables/usePopover.ts"],"sourcesContent":["import { ref, type Ref } from 'vue'\n\n// @core\n/**\n * Everything needed to know whether a floating panel is open, and to open or close it.\n * It is the code half of a subject whose other half is `styles/floating.css`, which\n * handles where such a panel is placed.\n *\n * The browser's own support for these panels is imperative, where the rest of the design\n * system is declarative, and it sets two traps a plain local boolean would fall into.\n *\n * Asking to close a panel that is already closed — or to open one already open — throws.\n * Hence the guards, which make both calls safe to repeat.\n *\n * And a panel of the self-dismissing kind closes WITHOUT anyone asking, on a click outside\n * or on Escape. So the state is READ from the panel rather than guessed: it reports both\n * synchronously as it changes and again afterwards, and both have to be listened to — the\n * first is the only one that catches a dismissal in time, the second the only one the unit\n * tests' stub emits at all.\n *\n * TRAP — never assign that state by hand, tempting though it is inside the opening\n * function. A panel dismissed by the browser would then leave the state saying it is open,\n * and the next request to close it would be swallowed by the guard.\n */\n\n// @fallback\n// The option below is newer than the type definitions shipped with TypeScript, so the\n// element is described locally rather than being cast about at each call site.\ntype PopoverWithSource = HTMLElement & { showPopover(options?: { source?: HTMLElement }): void }\n\nexport function usePopover(el: Ref<HTMLElement | null>) {\n  const shown = ref(false)\n\n  /**\n   * Reads the state from the panel itself. It must be wired to BOTH events the panel\n   * emits, and on the panel element: these events do not travel up the tree.\n   */\n  function syncShown(event: Event) {\n    shown.value = (event as ToggleEvent).newState === 'open'\n  }\n\n  /**\n   * Opens the panel.\n   *\n   * TRAP — when the panel is opened from code rather than by a click, the element it\n   * belongs to must be named as the SOURCE of that opening. That is what re-establishes\n   * the relationship a click would have created: the panel's implicit anchor, and its\n   * place in the stack of open panels. Without it the panel has nothing to position itself\n   * against.\n   */\n  function show(source?: HTMLElement) {\n    if (!shown.value)\n      (el.value as PopoverWithSource | null)?.showPopover(source ? { source } : undefined)\n  }\n\n  /** Closes the panel. */\n  function hide() {\n    if (shown.value) el.value?.hidePopover()\n  }\n\n  return { shown, syncShown, show, hide }\n}\n"],"mappings":";;AA8BA,SAAgB,EAAW,GAA6B;CACtD,IAAM,IAAQ,EAAI,EAAK;CAMvB,SAAS,EAAU,GAAc;EAC/B,EAAM,QAAS,EAAsB,aAAa;CACpD;CAWA,SAAS,EAAK,GAAsB;EAClC,AAAK,EAAM,SACT,EAAI,OAAoC,YAAY,IAAS,EAAE,UAAO,IAAI,KAAA,CAAS;CACvF;CAGA,SAAS,IAAO;EACd,AAAI,EAAM,SAAO,EAAG,OAAO,YAAY;CACzC;CAEA,OAAO;EAAE;EAAO;EAAW;EAAM;CAAK;AACxC"}
+{"version":3,"file":"usePopover.js","names":[],"sources":["../../src/composables/usePopover.ts"],"sourcesContent":["// @core\n/**\n * The state plumbing of a `[popover]`: whether it is open, and how to open or close it.\n * The JS half of `styles/floating.css`, which places the panel.\n *\n * The Popover API is imperative where the rest of the library is declarative, and it sets\n * three traps a plain boolean would fall into. Closing an already-closed panel throws, hence\n * the idempotence guards. Opening one while the browser is busy with another popover throws\n * as well, hence the retry on `show`. And an `auto` panel dismisses itself on a click outside\n * or on Escape, so the state is READ from the DOM: wire `syncShown` to both `beforetoggle`\n * and `toggle`, the first being the only one that catches light dismiss in time and the\n * second the only one the jsdom stub emits.\n *\n * TRAP — never assign `shown` by hand. A panel the browser dismissed would then still read\n * as open, and the guard would swallow the next request to close it.\n */\n\nimport { onMounted, ref, watch, type Ref } from 'vue'\n\n// @fallback\n// The option below is newer than the type definitions shipped with TypeScript, so the\n// element is described locally rather than being cast about at each call site.\ntype PopoverWithSource = HTMLElement & { showPopover(options?: { source?: HTMLElement }): void }\n\nexport function usePopover(el: Readonly<Ref<HTMLElement | null>>) {\n  const shown = ref(false)\n\n  /**\n   * Reads the state back off the panel. Bind it to both `@beforetoggle` and `@toggle`, and\n   * on the popover element itself: ToggleEvents do not bubble.\n   */\n  function syncShown(event: Event) {\n    shown.value = (event as ToggleEvent).newState === 'open'\n  }\n\n  /**\n   * Opens the panel.\n   *\n   * TRAP — opening from code rather than from a click must name the invoker as `source`.\n   * That is what recreates the relationship a click would have: the implicit anchor and the\n   * panel's place in the popover stack. Without it the panel has nothing to position\n   * against and lands at the corner of the viewport.\n   */\n  function show(source?: HTMLElement) {\n    attempt(source, true)\n  }\n\n  /*\n   * TRAP — the browser REFUSES to open a popover while it is in the middle of another\n   * popover operation, and it throws rather than queueing the request\n   * (\"Invalid to show a popover during another show operation\").\n   *\n   * The case that reaches it is ordinary: closing a popover that holds the focus hands\n   * that focus back to its invoker SYNCHRONOUSLY, inside the hide, and a component\n   * listening for that focus opens a panel of its own from the handler — a tooltip on the\n   * button a menu has just closed. Nothing in the calling code can see it coming.\n   *\n   * A microtask runs once the stack has unwound, hence after the operation the browser was\n   * in, which is all it takes. A second refusal is left alone: the panel stays closed\n   * rather than the page taking an uncaught error.\n   */\n  function attempt(source: HTMLElement | undefined, retry: boolean) {\n    const panel = el.value as PopoverWithSource | null\n    if (!panel || shown.value) return\n    try {\n      panel.showPopover(source ? { source } : undefined)\n    } catch {\n      if (retry) queueMicrotask(() => attempt(source, false))\n    }\n  }\n\n  /** Closes the panel. */\n  function hide() {\n    if (shown.value) el.value?.hidePopover()\n  }\n\n  return { shown, syncShown, show, hide }\n}\n\n// @core\n/**\n * The model half of a popover's `v-model:open`, for a component that publishes its open\n * state: a change to the model opens or closes the panel. The other half — writing the\n * DOM's state back into the model — stays with the component, in its own toggle handler,\n * because that is where it knows the state has settled.\n *\n * `shown` is a getter so that the state may live in a child: VPopover reads its own\n * `usePopover`, VMenu reads the one VMenuPanel exposes.\n *\n * TRAP — the `value === shown()` guard is what keeps the two directions from chasing each\n * other. A panel the browser has just dismissed writes `false` into the model; without the\n * guard that write would come back here as a request to close a panel already closed.\n */\nexport function usePopoverModel(\n  open: Ref<boolean>,\n  shown: () => boolean,\n  show: () => void,\n  hide: () => void,\n) {\n  watch(open, (value) => {\n    if (value === shown()) return\n    if (value) show()\n    else hide()\n  })\n\n  // @ssr — a watcher does not run during the server render, so a panel asked to be open\n  // from the start would never be told to open. Replaying the initial state on mount is\n  // what covers that case.\n  onMounted(() => {\n    if (open.value) show()\n  })\n}\n"],"mappings":";;AAwBA,SAAgB,EAAW,GAAuC;CAChE,IAAM,IAAQ,EAAI,EAAK;CAMvB,SAAS,EAAU,GAAc;EAC/B,EAAM,QAAS,EAAsB,aAAa;CACpD;CAUA,SAAS,EAAK,GAAsB;EAClC,EAAQ,GAAQ,EAAI;CACtB;CAgBA,SAAS,EAAQ,GAAiC,GAAgB;EAChE,IAAM,IAAQ,EAAG;EACb,OAAC,KAAS,EAAM,QACpB,IAAI;GACF,EAAM,YAAY,IAAS,EAAE,UAAO,IAAI,KAAA,CAAS;EACnD,QAAQ;GACN,AAAI,KAAO,qBAAqB,EAAQ,GAAQ,EAAK,CAAC;EACxD;CACF;CAGA,SAAS,IAAO;EACd,AAAI,EAAM,SAAO,EAAG,OAAO,YAAY;CACzC;CAEA,OAAO;EAAE;EAAO;EAAW;EAAM;CAAK;AACxC;AAgBA,SAAgB,EACd,GACA,GACA,GACA,GACA;CAUA,AATA,EAAM,IAAO,MAAU;EACjB,MAAU,EAAM,MAChB,IAAO,EAAK,IACX,EAAK;CACZ,CAAC,GAKD,QAAgB;EACd,AAAI,EAAK,SAAO,EAAK;CACvB,CAAC;AACH"}

package/dist/composables/useProgressValue.d.ts

@@ -1,13 +1,10 @@
 import { ComputedRef } from 'vue';
-/**
- * Brings a progress value into line, for the bar and the ring alike.
- *
- * It returns two things: the value itself, held inside the range it is allowed to take,
- * and how far along that range it sits, as a number between nothing and one. Everything
- * both components draw comes from those two — how much of the bar is filled, how much of
- * the ring is drawn, the percentage written out, and what a screen reader announces.
- */
 export declare function useProgressValue(value: () => number, max: () => number): {
+    max: ComputedRef<number>;
     clamped: ComputedRef<number>;
     fraction: ComputedRef<number>;
+    /** The fraction as a percentage, unrounded: what the default slot receives. */
+    percent: ComputedRef<number>;
+    /** The percentage rounded to a whole number: what the component writes by default. */
+    roundedPercent: ComputedRef<number>;
 };

package/dist/composables/useProgressValue.js

@@ -2,10 +2,13 @@ import { clamp as e } from "../utils/number.js";
 import { computed as t } from "vue";
 //#region src/composables/useProgressValue.ts
 function n(n, r) {
-	let i = t(() => e(n(), 0, Math.max(r(), 0)));
+	let i = t(() => Math.max(r(), 0)), a = t(() => e(n(), 0, i.value)), o = t(() => a.value / (i.value || 1)), s = t(() => o.value * 100);
 	return {
-		clamped: i,
-		fraction: t(() => i.value / (r() || 1))
+		max: i,
+		clamped: a,
+		fraction: o,
+		percent: s,
+		roundedPercent: t(() => Math.round(s.value))
 	};
 }
 //#endregion

package/dist/composables/useProgressValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"useProgressValue.js","names":[],"sources":["../../src/composables/useProgressValue.ts"],"sourcesContent":["import { computed, type ComputedRef } from 'vue'\nimport { clamp } from '../utils/number'\n\n// @core\n/**\n * Brings a progress value into line, for the bar and the ring alike.\n *\n * It returns two things: the value itself, held inside the range it is allowed to take,\n * and how far along that range it sits, as a number between nothing and one. Everything\n * both components draw comes from those two — how much of the bar is filled, how much of\n * the ring is drawn, the percentage written out, and what a screen reader announces.\n */\nexport function useProgressValue(\n  value: () => number,\n  max: () => number,\n): { clamped: ComputedRef<number>; fraction: ComputedRef<number> } {\n  const clamped = computed(() => clamp(value(), 0, Math.max(max(), 0)))\n\n  /**\n   * How far along, from 0 to 1 — the number every part of the rendering is driven by.\n   * The fallback denominator is what keeps a maximum of zero from dividing by nothing.\n   */\n  const fraction = computed(() => clamped.value / (max() || 1))\n\n  return { clamped, fraction }\n}\n"],"mappings":";;;AAYA,SAAgB,EACd,GACA,GACiE;CACjE,IAAM,IAAU,QAAe,EAAM,EAAM,GAAG,GAAG,KAAK,IAAI,EAAI,GAAG,CAAC,CAAC,CAAC;CAQpE,OAAO;EAAE;EAAS,UAFD,QAAe,EAAQ,SAAS,EAAI,KAAK,EAExC;CAAS;AAC7B"}
+{"version":3,"file":"useProgressValue.js","names":[],"sources":["../../src/composables/useProgressValue.ts"],"sourcesContent":["// @core\n/**\n * A progress value normalized for VProgressLinear and VProgressCircular: the bound brought\n * back to zero or above, the value clamped into range, and its position in that range as a\n * 0-to-1 fraction and as a percentage. Everything either component draws comes from those —\n * the fill, the arc, the percentage written inside, the ARIA values.\n *\n * The bound is returned rather than left for each component to read off its prop: the value\n * is clamped against the NORMALIZED bound, so announcing the raw one would give assistive\n * technology a `aria-valuenow` above an `aria-valuemax` of -5.\n */\n\nimport { computed, type ComputedRef } from 'vue'\nimport { clamp } from '../utils/number'\n\nexport function useProgressValue(\n  value: () => number,\n  max: () => number,\n): {\n  max: ComputedRef<number>\n  clamped: ComputedRef<number>\n  fraction: ComputedRef<number>\n  /** The fraction as a percentage, unrounded: what the default slot receives. */\n  percent: ComputedRef<number>\n  /** The percentage rounded to a whole number: what the component writes by default. */\n  roundedPercent: ComputedRef<number>\n} {\n  const normalizedMax = computed(() => Math.max(max(), 0))\n  const clamped = computed(() => clamp(value(), 0, normalizedMax.value))\n\n  // The `|| 1` denominator is what keeps a max of 0 from dividing by nothing.\n  const fraction = computed(() => clamped.value / (normalizedMax.value || 1))\n  const percent = computed(() => fraction.value * 100)\n  const roundedPercent = computed(() => Math.round(percent.value))\n\n  return { max: normalizedMax, clamped, fraction, percent, roundedPercent }\n}\n"],"mappings":";;;AAeA,SAAgB,EACd,GACA,GASA;CACA,IAAM,IAAgB,QAAe,KAAK,IAAI,EAAI,GAAG,CAAC,CAAC,GACjD,IAAU,QAAe,EAAM,EAAM,GAAG,GAAG,EAAc,KAAK,CAAC,GAG/D,IAAW,QAAe,EAAQ,SAAS,EAAc,SAAS,EAAE,GACpE,IAAU,QAAe,EAAS,QAAQ,GAAG;CAGnD,OAAO;EAAE,KAAK;EAAe;EAAS;EAAU;EAAS,gBAFlC,QAAe,KAAK,MAAM,EAAQ,KAAK,CAEL;CAAe;AAC1E"}

package/dist/composables/useRootAttrs.d.ts

@@ -1,29 +1,22 @@
 import { ComputedRef, StyleValue } from 'vue';
 /**
- * The shape of a class binding. It is written out here rather than imported because the
- * type exists in Vue's DOM runtime under another name and the `vue` package does not
- * pass it on. Without it the class stays untyped, and a template refuses to bind it.
+ * Redeclared locally: `@vue/runtime-dom` exports this as `ClassValue` and the `vue` package
+ * does not re-export it. Typed `unknown` instead, a template refuses to bind it.
  */
 type ClassBinding = false | null | undefined | string | Record<string, unknown> | ClassBinding[];
 /**
- * Splits the attributes a consumer wrote on a component in two, for the components whose
- * outermost element is only a container: the two text fields, the search field, the
- * table, the two pickers, the row of tabs.
+ * The attribute split of the wrapper-root pattern, for components whose root is only a
+ * container: VInput, VTextarea, VTabs, VCombobox, VDataTable, VDateInput, VTimeInput, VSlider,
+ * and the three choice controls, whose root holds the <label> and its hint.
  *
- * Everything a consumer writes on a component lands, by default, on that outermost
- * element. Here that is the wrong place for most of it. Styling belongs on the container,
- * since that is the box the consumer sees and positions; everything else belongs on the
- * element that actually DOES something — the real input, the real control. Left
- * unsplit, the field's name, the fact that it is required and everything describing it
- * for a screen reader all end up on a decorative box, where a form ignores them and a
- * screen reader never finds them.
+ * `class`/`style` stay on the root, which is the box the consumer positions; everything
+ * else is forwarded to the functional element. Unsplit, `name`, `required` and every
+ * `aria-*` land on a decorative wrapper, where the form ignores them and assistive
+ * technology never finds them.
  *
- * Turning the default placement off stays the component's own business: that is a
- * compilation option of the file, not something that can be arranged from here.
- *
- * The whole set is handed back as well, for the few components that need to look
- * something up in it — an identifier the consumer supplied, which must win over the
- * generated one, or a description that has to be merged rather than replaced.
+ * `defineOptions({ inheritAttrs: false })` stays in the SFC — it is a compilation option.
+ * `attrs` is returned whole for the components that need to read one back: a consumer `id`
+ * that must beat the generated one, a `describedby` to merge rather than replace.
  */
 export declare function useRootAttrs(): {
     attrs: Record<string, unknown>;

package/dist/composables/useRootAttrs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRootAttrs.js","names":[],"sources":["../../src/composables/useRootAttrs.ts"],"sourcesContent":["import { computed, useAttrs, type ComputedRef, type StyleValue } from 'vue'\n\n/**\n * The shape of a class binding. It is written out here rather than imported because the\n * type exists in Vue's DOM runtime under another name and the `vue` package does not\n * pass it on. Without it the class stays untyped, and a template refuses to bind it.\n */\ntype ClassBinding = false | null | undefined | string | Record<string, unknown> | ClassBinding[]\n\n// @a11y\n/**\n * Splits the attributes a consumer wrote on a component in two, for the components whose\n * outermost element is only a container: the two text fields, the search field, the\n * table, the two pickers, the row of tabs.\n *\n * Everything a consumer writes on a component lands, by default, on that outermost\n * element. Here that is the wrong place for most of it. Styling belongs on the container,\n * since that is the box the consumer sees and positions; everything else belongs on the\n * element that actually DOES something — the real input, the real control. Left\n * unsplit, the field's name, the fact that it is required and everything describing it\n * for a screen reader all end up on a decorative box, where a form ignores them and a\n * screen reader never finds them.\n *\n * Turning the default placement off stays the component's own business: that is a\n * compilation option of the file, not something that can be arranged from here.\n *\n * The whole set is handed back as well, for the few components that need to look\n * something up in it — an identifier the consumer supplied, which must win over the\n * generated one, or a description that has to be merged rather than replaced.\n */\nexport function useRootAttrs(): {\n  attrs: Record<string, unknown>\n  rootClass: ComputedRef<ClassBinding>\n  rootStyle: ComputedRef<StyleValue>\n  forwardedAttrs: ComputedRef<Record<string, unknown>>\n} {\n  const attrs = useAttrs()\n\n  return {\n    attrs,\n    rootClass: computed(() => attrs.class as ClassBinding),\n    rootStyle: computed(() => attrs.style as StyleValue),\n    forwardedAttrs: computed(() =>\n      Object.fromEntries(\n        Object.entries(attrs).filter(([key]) => key !== 'class' && key !== 'style'),\n      ),\n    ),\n  }\n}\n"],"mappings":";;AA8BA,SAAgB,IAKd;CACA,IAAM,IAAQ,EAAS;CAEvB,OAAO;EACL;EACA,WAAW,QAAe,EAAM,KAAqB;EACrD,WAAW,QAAe,EAAM,KAAmB;EACnD,gBAAgB,QACd,OAAO,YACL,OAAO,QAAQ,CAAK,CAAC,CAAC,QAAQ,CAAC,OAAS,MAAQ,WAAW,MAAQ,OAAO,CAC5E,CACF;CACF;AACF"}
+{"version":3,"file":"useRootAttrs.js","names":[],"sources":["../../src/composables/useRootAttrs.ts"],"sourcesContent":["import { computed, useAttrs, type ComputedRef, type StyleValue } from 'vue'\n\n/**\n * Redeclared locally: `@vue/runtime-dom` exports this as `ClassValue` and the `vue` package\n * does not re-export it. Typed `unknown` instead, a template refuses to bind it.\n */\ntype ClassBinding = false | null | undefined | string | Record<string, unknown> | ClassBinding[]\n\n// @a11y\n/**\n * The attribute split of the wrapper-root pattern, for components whose root is only a\n * container: VInput, VTextarea, VTabs, VCombobox, VDataTable, VDateInput, VTimeInput, VSlider,\n * and the three choice controls, whose root holds the <label> and its hint.\n *\n * `class`/`style` stay on the root, which is the box the consumer positions; everything\n * else is forwarded to the functional element. Unsplit, `name`, `required` and every\n * `aria-*` land on a decorative wrapper, where the form ignores them and assistive\n * technology never finds them.\n *\n * `defineOptions({ inheritAttrs: false })` stays in the SFC — it is a compilation option.\n * `attrs` is returned whole for the components that need to read one back: a consumer `id`\n * that must beat the generated one, a `describedby` to merge rather than replace.\n */\nexport function useRootAttrs(): {\n  attrs: Record<string, unknown>\n  rootClass: ComputedRef<ClassBinding>\n  rootStyle: ComputedRef<StyleValue>\n  forwardedAttrs: ComputedRef<Record<string, unknown>>\n} {\n  const attrs = useAttrs()\n\n  return {\n    attrs,\n    rootClass: computed(() => attrs.class as ClassBinding),\n    rootStyle: computed(() => attrs.style as StyleValue),\n    forwardedAttrs: computed(() =>\n      Object.fromEntries(\n        Object.entries(attrs).filter(([key]) => key !== 'class' && key !== 'style'),\n      ),\n    ),\n  }\n}\n"],"mappings":";;AAuBA,SAAgB,IAKd;CACA,IAAM,IAAQ,EAAS;CAEvB,OAAO;EACL;EACA,WAAW,QAAe,EAAM,KAAqB;EACrD,WAAW,QAAe,EAAM,KAAmB;EACnD,gBAAgB,QACd,OAAO,YACL,OAAO,QAAQ,CAAK,CAAC,CAAC,QAAQ,CAAC,OAAS,MAAQ,WAAW,MAAQ,OAAO,CAC5E,CACF;CACF;AACF"}

package/dist/composables/useTimer.d.ts

@@ -1,16 +1,14 @@
 /**
- * A delay one can re-arm, and which cancels itself when the component goes away.
+ * A re-armable delay, cancelled on unmount.
  *
- * Three things are true of it, and each is there to prevent a specific bug. The handle is
- * held in a plain variable rather than a reactive one, because nothing renders it and
- * making it reactive would cause renders for nothing. Starting a delay always cancels the
- * one before it, or two would run at once — a tooltip armed twice opens, closes and opens
- * again. And it is cancelled before the component is torn down, or the callback would run
- * against a component that no longer exists.
+ * `start` always cancels the pending one, or a tooltip armed twice opens, closes and opens
+ * again. The handle is a plain variable: nothing renders it, and making it reactive would
+ * cost renders for nothing.
  *
- * A delay of zero runs the callback SYNCHRONOUSLY, which a zero timeout does not: the
- * design system's convention is that zero means no deferral at all. That is what makes a
- * debounce of zero immediate, and a notification given no duration permanent.
+ * TRAP — a delay of 0 runs the callback SYNCHRONOUSLY, where `setTimeout(fn, 0)` would not.
+ * The library's convention is that zero disarms the deferral, which is what makes a debounce
+ * of 0 immediate. Callers for whom 0 means "never" (VSnackbar's duration, VCarousel's
+ * autoplay) must guard before calling, or the callback fires in the tick that armed it.
  */
 export declare function useTimer(): {
     start: (fn: () => void, delay: number) => void;

package/dist/composables/useTimer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTimer.js","names":[],"sources":["../../src/composables/useTimer.ts"],"sourcesContent":["import { onBeforeUnmount } from 'vue'\n\n// @core\n/**\n * A delay one can re-arm, and which cancels itself when the component goes away.\n *\n * Three things are true of it, and each is there to prevent a specific bug. The handle is\n * held in a plain variable rather than a reactive one, because nothing renders it and\n * making it reactive would cause renders for nothing. Starting a delay always cancels the\n * one before it, or two would run at once — a tooltip armed twice opens, closes and opens\n * again. And it is cancelled before the component is torn down, or the callback would run\n * against a component that no longer exists.\n *\n * A delay of zero runs the callback SYNCHRONOUSLY, which a zero timeout does not: the\n * design system's convention is that zero means no deferral at all. That is what makes a\n * debounce of zero immediate, and a notification given no duration permanent.\n */\nexport function useTimer(): { start: (fn: () => void, delay: number) => void; cancel: () => void } {\n  let timer: ReturnType<typeof setTimeout> | undefined\n\n  function cancel() {\n    clearTimeout(timer)\n    timer = undefined\n  }\n\n  function start(fn: () => void, delay: number) {\n    cancel()\n    if (delay <= 0) fn()\n    else timer = setTimeout(fn, delay)\n  }\n\n  onBeforeUnmount(cancel)\n\n  return { start, cancel }\n}\n"],"mappings":";;AAiBA,SAAgB,IAAmF;CACjG,IAAI;CAEJ,SAAS,IAAS;EAEhB,AADA,aAAa,CAAK,GAClB,IAAQ,KAAA;CACV;CAEA,SAAS,EAAM,GAAgB,GAAe;EAE5C,AADA,EAAO,GACH,KAAS,IAAG,EAAG,IACd,IAAQ,WAAW,GAAI,CAAK;CACnC;CAIA,OAFA,EAAgB,CAAM,GAEf;EAAE;EAAO;CAAO;AACzB"}
+{"version":3,"file":"useTimer.js","names":[],"sources":["../../src/composables/useTimer.ts"],"sourcesContent":["// @core\n/**\n * A re-armable delay, cancelled on unmount.\n *\n * `start` always cancels the pending one, or a tooltip armed twice opens, closes and opens\n * again. The handle is a plain variable: nothing renders it, and making it reactive would\n * cost renders for nothing.\n *\n * TRAP — a delay of 0 runs the callback SYNCHRONOUSLY, where `setTimeout(fn, 0)` would not.\n * The library's convention is that zero disarms the deferral, which is what makes a debounce\n * of 0 immediate. Callers for whom 0 means \"never\" (VSnackbar's duration, VCarousel's\n * autoplay) must guard before calling, or the callback fires in the tick that armed it.\n */\n\nimport { onBeforeUnmount } from 'vue'\n\nexport function useTimer(): { start: (fn: () => void, delay: number) => void; cancel: () => void } {\n  let timer: ReturnType<typeof setTimeout> | undefined\n\n  function cancel() {\n    clearTimeout(timer)\n    timer = undefined\n  }\n\n  function start(fn: () => void, delay: number) {\n    cancel()\n    if (delay <= 0) fn()\n    else timer = setTimeout(fn, delay)\n  }\n\n  onBeforeUnmount(cancel)\n\n  return { start, cancel }\n}\n"],"mappings":";;AAgBA,SAAgB,IAAmF;CACjG,IAAI;CAEJ,SAAS,IAAS;EAEhB,AADA,aAAa,CAAK,GAClB,IAAQ,KAAA;CACV;CAEA,SAAS,EAAM,GAAgB,GAAe;EAE5C,AADA,EAAO,GACH,KAAS,IAAG,EAAG,IACd,IAAQ,WAAW,GAAI,CAAK;CACnC;CAIA,OAFA,EAAgB,CAAM,GAEf;EAAE;EAAO;CAAO;AACzB"}

package/dist/i18n/en.d.ts

@@ -1,10 +1,2 @@
-import { VectisMessages } from './types.js';
-/**
- * English, the dictionary the library always carries. Any language with no dictionary of
- * its own falls back to this one, entry by entry, so nothing is ever left unsaid.
- *
- * Take care changing anything here: these words are checked letter for letter by the
- * tests, and they are the names the browser tests reach for when they look a control up.
- * Changing one means changing what expects it.
- */
-export declare const en: VectisMessages;
+import { Messages } from './types.js';
+export declare const en: Messages;

package/dist/i18n/en.js

@@ -5,6 +5,7 @@ var e = {
 		clear: "Clear",
 		close: "Close",
 		dismiss: "Remove",
+		remove: (e) => `Remove ${e}`,
 		cancel: "Cancel",
 		confirm: "OK"
 	},
@@ -12,8 +13,7 @@ var e = {
 		label: "Pagination",
 		previous: "Previous page",
 		next: "Next page",
-		page: (e) => `Page ${e}`,
-		hiddenPages: "Hidden pages"
+		page: (e) => `Page ${e}`
 	},
 	tabs: {
 		label: "Tabs",
@@ -27,8 +27,7 @@ var e = {
 	sideNavigation: { label: "Navigation" },
 	combobox: {
 		empty: "No results",
-		clear: "Clear selection",
-		remove: (e) => `Remove ${e}`
+		clear: "Clear selection"
 	},
 	dataTable: {
 		empty: "No data",
@@ -84,6 +83,7 @@ var e = {
 		label: (e) => `Keyboard shortcut: ${e}`
 	},
 	datePicker: {
+		label: "Date picker",
 		previousMonth: "Previous month",
 		nextMonth: "Next month",
 		previousYear: "Previous year",
@@ -93,41 +93,40 @@ var e = {
 	},
 	dateInput: {
 		clear: "Clear date",
-		open: "Open calendar",
-		label: "Choose a date"
+		openPicker: "Open calendar",
+		pickerLabel: "Choose a date"
 	},
 	timePicker: {
+		label: "Time picker",
 		meridiem: "AM or PM",
 		am: "AM",
 		pm: "PM",
 		selectHour: "Select hour",
-		selectMinute: "Select minutes",
-		hourStep: "Selecting the hour",
-		minuteStep: "Selecting the minutes",
+		selectMinutes: "Select minutes",
+		choosingHour: "Selecting the hour",
+		choosingMinutes: "Selecting the minutes",
 		hour: "Hour",
 		minutes: "Minutes",
-		hoursValue: (e) => `${e} o'clock`,
+		hourValue: (e) => `${e} o'clock`,
 		minutesValue: (e) => `${e} minutes`
 	},
 	timeInput: {
 		clear: "Clear time",
-		openList: "Open the list of times",
 		openPicker: "Open time picker",
-		listLabel: "Available times",
 		pickerLabel: "Choose a time",
-		maskPlaceholder: "hh:mm"
+		meridiemValue: (e) => `AM or PM: ${e}`,
+		maskPlaceholder: "hh:mm",
+		unavailable: "This time is not available."
 	},
 	fileInput: {
-		attach: "Choose files",
+		openPicker: "Choose files",
 		clear: "Clear files",
-		remove: (e) => `Remove ${e}`,
 		files: (e) => `${e} file${e === 1 ? "" : "s"}`,
 		placeholder: "No file selected"
 	},
 	filePicker: {
 		browse: "Browse files",
 		or: "or",
-		remove: (e) => `Remove ${e}`,
 		list: "Selected files"
 	},
 	carousel: {
@@ -164,10 +163,10 @@ var e = {
 		allDay: "All day",
 		moreEvents: (e) => `+${e} more`,
 		openDay: (e) => `Open ${e}`,
-		newEvent: (e) => `Event #${e}`,
+		untitled: "(No title)",
 		eventRoleDescription: "event",
-		eventHint: "Press Enter to take hold of this event, then the arrow keys to move it and Shift with the arrow keys to change when it ends.",
-		grabbed: "Event held. Use the arrow keys to move it, Enter to place it, Escape to cancel.",
+		eventHint: "Press Enter to open this event. Press Space to take hold of it, then the arrow keys to move it and Shift with the arrow keys to change when it ends.",
+		grabbed: "Event held. Use the arrow keys to move it, Enter or Space to place it, Escape to cancel.",
 		dropped: "Event placed.",
 		reverted: "Move cancelled. The event is back where it was.",
 		movedTo: (e, t) => `${e} moved to ${t}.`

package/dist/i18n/en.js.map

@@ -1 +1 @@
-{"version":3,"file":"en.js","names":[],"sources":["../../src/i18n/en.ts"],"sourcesContent":["import type { VectisMessages } from './types'\n\n/**\n * English, the dictionary the library always carries. Any language with no dictionary of\n * its own falls back to this one, entry by entry, so nothing is ever left unsaid.\n *\n * Take care changing anything here: these words are checked letter for letter by the\n * tests, and they are the names the browser tests reach for when they look a control up.\n * Changing one means changing what expects it.\n */\nexport const en: VectisMessages = {\n  common: {\n    loading: 'Loading…',\n    clear: 'Clear',\n    close: 'Close',\n    dismiss: 'Remove',\n    cancel: 'Cancel',\n    confirm: 'OK',\n  },\n  pagination: {\n    label: 'Pagination',\n    previous: 'Previous page',\n    next: 'Next page',\n    page: (page) => `Page ${page}`,\n    hiddenPages: 'Hidden pages',\n  },\n  tabs: {\n    label: 'Tabs',\n    previous: 'Previous tabs',\n    next: 'Next tabs',\n  },\n  breadcrumb: {\n    label: 'Breadcrumb',\n    ellipsis: 'Show intermediate pages',\n  },\n  sideNavigation: { label: 'Navigation' },\n  combobox: {\n    empty: 'No results',\n    clear: 'Clear selection',\n    remove: (label) => `Remove ${label}`,\n  },\n  dataTable: {\n    empty: 'No data',\n    loading: 'Loading data…',\n    searchLabel: 'Search the table',\n    searchPlaceholder: 'Search…',\n    perPage: 'Rows per page',\n    perPageValue: (label, value) => `${label}: ${value}`,\n    selectAll: 'Select all',\n    selectRow: (index) => `Select row ${index}`,\n    // The plural is chosen right here, in the message itself. That one line is the whole\n    // of the design system's handling of plurals, and it is meant to be.\n    selection: (count) => `${count} item${count === 1 ? '' : 's'} selected`,\n    range: ({ start, end, total }) => `${start}–${end} of ${total}`,\n    pagination: 'Table pagination',\n  },\n  toaster: { label: 'Notifications' },\n  snackbar: { label: 'Confirmation', action: 'Undo' },\n  inputOTP: {\n    label: 'Verification code',\n    slot: (index, total) => `Character ${index} of ${total}`,\n  },\n  slider: {\n    value: 'Value',\n    start: 'Start',\n    end: 'End',\n    rangeStart: (label) => `${label} (start)`,\n    rangeEnd: (label) => `${label} (end)`,\n  },\n  field: {\n    limitExceeded: (max) => `Exceeds the limit of ${max} characters`,\n  },\n  progress: { percent: (percent) => `${percent}%`, label: 'Progress' },\n  hotkeys: {\n    command: 'Command',\n    ctrl: 'Ctrl',\n    alt: 'Alt',\n    shift: 'Shift',\n    windows: 'Win',\n    super: 'Super',\n    enter: 'Enter',\n    escape: 'Esc',\n    space: 'Space',\n    backspace: 'Backspace',\n    delete: 'Del',\n    tab: 'Tab',\n    up: 'Up arrow',\n    down: 'Down arrow',\n    left: 'Left arrow',\n    right: 'Right arrow',\n    label: (keys) => `Keyboard shortcut: ${keys}`,\n  },\n  datePicker: {\n    previousMonth: 'Previous month',\n    nextMonth: 'Next month',\n    previousYear: 'Previous year',\n    nextYear: 'Next year',\n    monthPicker: 'Choose month',\n    yearPicker: 'Choose year',\n  },\n  dateInput: {\n    clear: 'Clear date',\n    open: 'Open calendar',\n    label: 'Choose a date',\n  },\n  timePicker: {\n    meridiem: 'AM or PM',\n    am: 'AM',\n    pm: 'PM',\n    selectHour: 'Select hour',\n    selectMinute: 'Select minutes',\n    hourStep: 'Selecting the hour',\n    minuteStep: 'Selecting the minutes',\n    hour: 'Hour',\n    minutes: 'Minutes',\n    hoursValue: (hour) => `${hour} o'clock`,\n    minutesValue: (minute) => `${minute} minutes`,\n  },\n  timeInput: {\n    clear: 'Clear time',\n    openList: 'Open the list of times',\n    openPicker: 'Open time picker',\n    listLabel: 'Available times',\n    pickerLabel: 'Choose a time',\n    maskPlaceholder: 'hh:mm',\n  },\n  fileInput: {\n    attach: 'Choose files',\n    clear: 'Clear files',\n    remove: (name) => `Remove ${name}`,\n    files: (count) => `${count} file${count === 1 ? '' : 's'}`,\n    placeholder: 'No file selected',\n  },\n  filePicker: {\n    browse: 'Browse files',\n    or: 'or',\n    remove: (name) => `Remove ${name}`,\n    list: 'Selected files',\n  },\n  carousel: {\n    label: 'Carousel',\n    roleDescription: 'carousel',\n    slideRoleDescription: 'slide',\n    slides: 'Slides',\n    slide: (index, total) => `${index} of ${total}`,\n    previous: 'Previous slide',\n    next: 'Next slide',\n    indicators: 'Choose slide to display',\n  },\n  calendar: {\n    label: 'Calendar',\n    roleDescription: 'calendar',\n    today: 'Today',\n    view: 'View',\n    viewDay: 'Day',\n    view4Days: '4 days',\n    viewWeek: 'Week',\n    viewMonth: 'Month',\n    viewYear: 'Year',\n    viewCustom: (days) => `${days} days`,\n    previousDay: 'Previous day',\n    nextDay: 'Next day',\n    previousWeek: 'Previous week',\n    nextWeek: 'Next week',\n    previousMonth: 'Previous month',\n    nextMonth: 'Next month',\n    previousYear: 'Previous year',\n    nextYear: 'Next year',\n    previousPeriod: 'Previous period',\n    nextPeriod: 'Next period',\n    allDay: 'All day',\n    moreEvents: (count) => `+${count} more`,\n    openDay: (day) => `Open ${day}`,\n    newEvent: (index) => `Event #${index}`,\n    eventRoleDescription: 'event',\n    eventHint:\n      'Press Enter to take hold of this event, then the arrow keys to move it and Shift with the arrow keys to change when it ends.',\n    grabbed: 'Event held. Use the arrow keys to move it, Enter to place it, Escape to cancel.',\n    dropped: 'Event placed.',\n    reverted: 'Move cancelled. The event is back where it was.',\n    movedTo: (title, when) => `${title} moved to ${when}.`,\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"en.js","names":[],"sources":["../../src/i18n/en.ts"],"sourcesContent":["/**\n * English, the dictionary always bundled. Any language without one of its own falls back\n * here entry by entry, so nothing is ever left unsaid.\n *\n * TRAP — these strings are asserted letter for letter by the unit tests, and the play\n * functions query controls BY them (they run with the default globals, so the locale there\n * is deterministically `en-US`). Changing a word means changing what expects it.\n */\n\nimport type { Messages } from './types'\n\nexport const en: Messages = {\n  common: {\n    loading: 'Loading…',\n    clear: 'Clear',\n    close: 'Close',\n    dismiss: 'Remove',\n    remove: (name) => `Remove ${name}`,\n    cancel: 'Cancel',\n    confirm: 'OK',\n  },\n  pagination: {\n    label: 'Pagination',\n    previous: 'Previous page',\n    next: 'Next page',\n    page: (page) => `Page ${page}`,\n  },\n  tabs: {\n    label: 'Tabs',\n    previous: 'Previous tabs',\n    next: 'Next tabs',\n  },\n  breadcrumb: {\n    label: 'Breadcrumb',\n    ellipsis: 'Show intermediate pages',\n  },\n  sideNavigation: { label: 'Navigation' },\n  combobox: {\n    empty: 'No results',\n    clear: 'Clear selection',\n  },\n  dataTable: {\n    empty: 'No data',\n    loading: 'Loading data…',\n    searchLabel: 'Search the table',\n    searchPlaceholder: 'Search…',\n    perPage: 'Rows per page',\n    perPageValue: (label, value) => `${label}: ${value}`,\n    selectAll: 'Select all',\n    selectRow: (index) => `Select row ${index}`,\n    // The plural is chosen right here, in the message itself. That one line is the whole\n    // of the design system's handling of plurals, and it is meant to be.\n    selection: (count) => `${count} item${count === 1 ? '' : 's'} selected`,\n    range: ({ start, end, total }) => `${start}–${end} of ${total}`,\n    pagination: 'Table pagination',\n  },\n  toaster: { label: 'Notifications' },\n  snackbar: { label: 'Confirmation', action: 'Undo' },\n  inputOTP: {\n    label: 'Verification code',\n    slot: (index, total) => `Character ${index} of ${total}`,\n  },\n  slider: {\n    value: 'Value',\n    start: 'Start',\n    end: 'End',\n    rangeStart: (label) => `${label} (start)`,\n    rangeEnd: (label) => `${label} (end)`,\n  },\n  field: {\n    limitExceeded: (max) => `Exceeds the limit of ${max} characters`,\n  },\n  progress: { percent: (percent) => `${percent}%`, label: 'Progress' },\n  hotkeys: {\n    command: 'Command',\n    ctrl: 'Ctrl',\n    alt: 'Alt',\n    shift: 'Shift',\n    windows: 'Win',\n    super: 'Super',\n    enter: 'Enter',\n    escape: 'Esc',\n    space: 'Space',\n    backspace: 'Backspace',\n    delete: 'Del',\n    tab: 'Tab',\n    up: 'Up arrow',\n    down: 'Down arrow',\n    left: 'Left arrow',\n    right: 'Right arrow',\n    label: (keys) => `Keyboard shortcut: ${keys}`,\n  },\n  datePicker: {\n    label: 'Date picker',\n    previousMonth: 'Previous month',\n    nextMonth: 'Next month',\n    previousYear: 'Previous year',\n    nextYear: 'Next year',\n    monthPicker: 'Choose month',\n    yearPicker: 'Choose year',\n  },\n  dateInput: {\n    clear: 'Clear date',\n    openPicker: 'Open calendar',\n    pickerLabel: 'Choose a date',\n  },\n  timePicker: {\n    label: 'Time picker',\n    meridiem: 'AM or PM',\n    am: 'AM',\n    pm: 'PM',\n    selectHour: 'Select hour',\n    selectMinutes: 'Select minutes',\n    choosingHour: 'Selecting the hour',\n    choosingMinutes: 'Selecting the minutes',\n    hour: 'Hour',\n    minutes: 'Minutes',\n    hourValue: (hour) => `${hour} o'clock`,\n    minutesValue: (minute) => `${minute} minutes`,\n  },\n  timeInput: {\n    clear: 'Clear time',\n    openPicker: 'Open time picker',\n    pickerLabel: 'Choose a time',\n    meridiemValue: (value) => `AM or PM: ${value}`,\n    maskPlaceholder: 'hh:mm',\n    unavailable: 'This time is not available.',\n  },\n  fileInput: {\n    openPicker: 'Choose files',\n    clear: 'Clear files',\n    files: (count) => `${count} file${count === 1 ? '' : 's'}`,\n    placeholder: 'No file selected',\n  },\n  filePicker: {\n    browse: 'Browse files',\n    or: 'or',\n    list: 'Selected files',\n  },\n  carousel: {\n    label: 'Carousel',\n    roleDescription: 'carousel',\n    slideRoleDescription: 'slide',\n    slides: 'Slides',\n    slide: (index, total) => `${index} of ${total}`,\n    previous: 'Previous slide',\n    next: 'Next slide',\n    indicators: 'Choose slide to display',\n  },\n  calendar: {\n    label: 'Calendar',\n    roleDescription: 'calendar',\n    today: 'Today',\n    view: 'View',\n    viewDay: 'Day',\n    view4Days: '4 days',\n    viewWeek: 'Week',\n    viewMonth: 'Month',\n    viewYear: 'Year',\n    viewCustom: (days) => `${days} days`,\n    previousDay: 'Previous day',\n    nextDay: 'Next day',\n    previousWeek: 'Previous week',\n    nextWeek: 'Next week',\n    previousMonth: 'Previous month',\n    nextMonth: 'Next month',\n    previousYear: 'Previous year',\n    nextYear: 'Next year',\n    previousPeriod: 'Previous period',\n    nextPeriod: 'Next period',\n    allDay: 'All day',\n    moreEvents: (count) => `+${count} more`,\n    openDay: (day) => `Open ${day}`,\n    untitled: '(No title)',\n    eventRoleDescription: 'event',\n    eventHint:\n      'Press Enter to open this event. Press Space to take hold of it, then the arrow keys to move it and Shift with the arrow keys to change when it ends.',\n    grabbed:\n      'Event held. Use the arrow keys to move it, Enter or Space to place it, Escape to cancel.',\n    dropped: 'Event placed.',\n    reverted: 'Move cancelled. The event is back where it was.',\n    movedTo: (title, when) => `${title} moved to ${when}.`,\n  },\n}\n"],"mappings":"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"}