vectis-ui 0.1.0 → 0.8.0

package/dist/components/VInput/context.js

@@ -0,0 +1,6 @@
+//#region src/components/VInput/context.ts
+var e = Symbol("v-input-group");
+//#endregion
+export { e as inputGroupKey };
+
+//# sourceMappingURL=context.js.map

package/dist/components/VInput/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/VInput/context.ts"],"sourcesContent":["/**\n * What a VInputGroup passes down to the fields it joins. A joined row is one object, so the\n * shape of the controls in it is a decision that belongs to the row rather than to each of\n * its segments, and the group announces it once instead of the writer repeating the same\n * props on every child.\n *\n * The arbitration follows VButtonGroup's, minus the tone — a field has none:\n *\n * - `size` and `compact` are the SHAPE of the control, and the group wins. A segment of\n *   another height no longer lines up with its neighbours, and the merged border stops\n *   reading as a single object (`group?.x ?? props.x`).\n * - `disabled` is read as an OR (`group?.disabled || props.disabled`). The two answers are\n *   cumulative: a row switched off cannot have one of its segments opt back in, and a\n *   segment disabled on its own is not revived by a row that says nothing.\n *\n * Everything is exposed through getters, which is what keeps the group's props reactive on\n * the other side of the injection. Every member is optional: a group that sets none of them\n * provides `undefined` throughout, which `??` hands straight back to the child's own prop.\n *\n * A composed field resolves this twice — once for itself, once inside the VInput it renders\n * — and that is harmless: `group?.size ?? (group?.size ?? props.size)` is the first term\n * whenever the group names one, and the child's prop otherwise. The redundancy even helps, a\n * composed field that forgot to resolve still following the row through its inner VInput.\n *\n * TRAP — this key is injected in DEPTH, not only into direct children. It carries only what\n * a FIELD reads, never what a button would: the buttons of a floating panel are inside a\n * segment's subtree and would otherwise take the row's size. See `NO_BUTTON_GROUP`, which\n * VDateInput and VTimeInput provide for exactly that reason.\n */\n\nimport type { InjectionKey } from 'vue'\n\nimport type { InputGroupSize } from './VInputGroup.vue'\n\nexport interface InputGroupContext {\n  /** The height of the segments. */\n  readonly size?: InputGroupSize\n  /** The reduced density. */\n  readonly compact?: boolean\n  /** Whether the whole row is unusable, which no segment can refuse. */\n  readonly disabled?: boolean\n}\n\nexport const inputGroupKey: InjectionKey<InputGroupContext> = Symbol('v-input-group')\n"],"mappings":";AA2CA,IAAa,IAAiD,OAAO,eAAe"}

package/dist/components/VInputOTP/VInputOTP.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-otp{--otp-font-size:var(--vectis-font-size-lg);align-items:center;gap:var(--control-gap);display:inline-flex}.v-otp-input{width:var(--control-height);height:var(--control-height);text-align:center;background:var(--vectis-color-surface);color:var(--vectis-color-text);border:1px solid var(--vectis-color-border-strong);border-radius:var(--vectis-radius-interactive);font-family:var(--vectis-text-family-code);font-size:var(--otp-font-size);transition:border-color var(--vectis-duration-fast) var(--vectis-ease-default)}.v-otp-input:focus-visible{border-color:var(--vectis-color-accent);box-shadow:0 0 0 1px var(--vectis-color-accent);outline:var(--vectis-focus-ring-width) solid transparent}.v-otp[data-invalid] .v-otp-input{border-color:var(--vectis-color-danger)}.v-otp[data-invalid] .v-otp-input:focus-visible{box-shadow:0 0 0 1px var(--vectis-color-danger)}.v-otp-literal{color:var(--vectis-color-text-muted);font-family:var(--vectis-text-family-code);font-size:var(--otp-font-size);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:inline-flex}.v-otp[data-disabled] .v-otp-input{background:var(--vectis-color-surface-muted);color:var(--vectis-color-text-subtle);border-color:var(--vectis-color-border);cursor:not-allowed}.v-otp[data-disabled] .v-otp-literal{color:var(--vectis-color-text-subtle)}.v-otp[data-size=sm]{--otp-font-size:var(--vectis-font-size-md)}.v-otp[data-size=lg]{--otp-font-size:var(--vectis-font-size-xl)}@media (prefers-reduced-motion:reduce){.v-otp-input{transition:none}}}
+@layer vectis.components{.v-input-otp{--input-otp-font-size:var(--vectis-font-size-lg);align-items:start;gap:var(--vectis-space-1);flex-direction:column;display:inline-flex}.v-input-otp-boxes{align-items:center;gap:var(--control-gap);display:flex}.v-input-otp-input{width:var(--control-height);height:var(--control-height);text-align:center;background:var(--vectis-color-surface);color:var(--vectis-color-text);border:1px solid var(--vectis-color-border-strong);border-radius:var(--vectis-radius-interactive);font-family:var(--vectis-text-family-code);font-size:var(--input-otp-font-size);transition:border-color var(--vectis-duration-fast) var(--vectis-ease-default)}.v-input-otp-input:focus-visible{border-color:var(--vectis-color-accent);box-shadow:0 0 0 1px var(--vectis-color-accent);outline:var(--vectis-focus-ring-width) solid transparent}.v-input-otp[data-readonly] .v-input-otp-input{background:var(--vectis-color-surface-sunken)}.v-input-otp[data-invalid] .v-input-otp-input{border-color:var(--vectis-color-danger)}.v-input-otp[data-invalid] .v-input-otp-input:focus-visible{box-shadow:0 0 0 1px var(--vectis-color-danger)}.v-input-otp-literal{color:var(--vectis-color-text-muted);font-family:var(--vectis-text-family-code);font-size:var(--input-otp-font-size);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:inline-flex}.v-input-otp[data-disabled] .v-input-otp-input{background:var(--vectis-color-surface-muted);color:var(--vectis-color-text-subtle);border-color:var(--vectis-color-border);cursor:not-allowed}.v-input-otp[data-disabled] .v-input-otp-literal,.v-input-otp[data-disabled] .v-input-otp-hint{color:var(--vectis-color-text-subtle)}.v-input-otp[data-size=sm]{--input-otp-font-size:var(--vectis-font-size-md)}.v-input-otp[data-size=lg]{--input-otp-font-size:var(--vectis-font-size-xl)}@media (prefers-reduced-motion:reduce){.v-input-otp-input{transition:none}}}

package/dist/components/VInputOTP/VInputOTP.d.ts

@@ -1,21 +1,8 @@
 import { IconSource } from '../VIcon/types.js';
-/**
- * The row of boxes a one-time code is typed into, one character per box.
- *
- * The platform has no such control, so each box is a real `<input>` and the
- * JavaScript is what makes the row behave as a single field: typing a character moves
- * to the next box, Backspace on an empty one goes back, the arrows walk along, and a
- * code pasted anywhere is spread across the boxes. The first box carries
- * `autocomplete="one-time-code"`, so a code filled in from an SMS or a password
- * manager is spread the same way.
- *
- * `pattern` is what cuts the row up: every `#` becomes a box, and every other
- * character becomes a separator shown between them, which is displayed but never part
- * of the value. Pasting understands those separators — a code copied in its formatted
- * shape, "GT-123" or "123.456.789", is consumed with them in place — and everything
- * else is filtered by `format`, which also forces capitals outside a numeric code so
- * that the value has one canonical form.
- */
+/** The height of the boxes: 32, 40 or 48 pixels. */
+export type InputOTPSize = 'sm' | 'md' | 'lg';
+/** Which characters the code is made of. */
+export type InputOTPFormat = 'numeric' | 'alpha' | 'alphanumeric';
 interface InputOTPProps {
     /** How many boxes the code has. It is ignored as soon as a `pattern` is given. */
     length?: number;
@@ -23,7 +10,7 @@ interface InputOTPProps {
      * Which characters the code is made of. It filters what can be typed or pasted, and
      * decides which keyboard a phone offers.
      */
-    format?: 'numeric' | 'alpha' | 'alphanumeric';
+    format?: InputOTPFormat;
     /**
      * The shape of the code: each `#` is a box to fill, and every other character is a
      * separator shown between the boxes without ever being part of the value —
@@ -37,25 +24,51 @@ interface InputOTPProps {
      */
     separatorIcon?: IconSource;
     /** The size of the boxes: 32, 40 or 48 pixels. */
-    size?: 'sm' | 'md' | 'lg';
+    size?: InputOTPSize;
     /** Takes 4px off the boxes, leaving the text and the icons as they are. */
     compact?: boolean;
     /** Makes every box unusable, greyed out through the colour tokens. */
     disabled?: boolean;
+    /**
+     * Shows the code without letting it be changed. The boxes keep their focus and the code
+     * can still be selected and copied, which is what separates it from `disabled`.
+     */
+    readonly?: boolean;
     /** Marks the code as wrong, which colours the boxes and tells assistive technology so. */
     invalid?: boolean;
     /**
      * What screen readers announce for the row as a whole. It falls back to the design
      * system dictionary.
+     *
+     * Unlike the `label` of VInput and the other text fields, NOTHING is rendered from it:
+     * a row of boxes carries its own instructions above it, written by the page. Use `hint`
+     * for a line the reader can see.
      */
     label?: string;
+    /**
+     * A line of help under the boxes — where the code was sent, how long it lasts. It is
+     * tied to the row for assistive technology, so it is read out along with the label.
+     */
+    hint?: string;
 }
 type __VLS_Props = InputOTPProps;
 type __VLS_ModelProps = {
+    /**
+     * The code as one string, without the separators: a `GT-###` template still yields three
+     * characters. It is empty to begin with, and shorter than the full length while it is being
+     * typed.
+     */
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
+    /** Moves the focus to the first empty box, or to the last one when the code is complete. */
+    focus: (options?: FocusOptions) => void;
+    /** Selects the box the focus is on, as clicking into one already does. */
+    select: () => void;
+    /** The row itself, for what neither of the two above covers. */
+    el: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
     complete: (code: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
@@ -63,14 +76,16 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {},
     onComplete?: ((code: string) => any) | undefined;
 }>, {
     label: string;
-    size: "sm" | "md" | "lg";
+    size: InputOTPSize;
     length: number;
     pattern: string;
     compact: boolean;
     disabled: boolean;
     invalid: boolean;
-    format: "numeric" | "alpha" | "alphanumeric";
+    hint: string;
+    readonly: boolean;
     separatorIcon: IconSource;
+    format: InputOTPFormat;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/VInputOTP/VInputOTP.js.map

@@ -1 +1 @@
-{"version":3,"file":"VInputOTP.js","names":[],"sources":["../../../src/components/VInputOTP/VInputOTP.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\nimport { isDev } from '../../utils/env'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\n// @keyboard @core\n/**\n * The row of boxes a one-time code is typed into, one character per box.\n *\n * The platform has no such control, so each box is a real `<input>` and the\n * JavaScript is what makes the row behave as a single field: typing a character moves\n * to the next box, Backspace on an empty one goes back, the arrows walk along, and a\n * code pasted anywhere is spread across the boxes. The first box carries\n * `autocomplete=\"one-time-code\"`, so a code filled in from an SMS or a password\n * manager is spread the same way.\n *\n * `pattern` is what cuts the row up: every `#` becomes a box, and every other\n * character becomes a separator shown between them, which is displayed but never part\n * of the value. Pasting understands those separators — a code copied in its formatted\n * shape, \"GT-123\" or \"123.456.789\", is consumed with them in place — and everything\n * else is filtered by `format`, which also forces capitals outside a numeric code so\n * that the value has one canonical form.\n */\ninterface InputOTPProps {\n  /** How many boxes the code has. It is ignored as soon as a `pattern` is given. */\n  length?: number\n  /**\n   * Which characters the code is made of. It filters what can be typed or pasted, and\n   * decides which keyboard a phone offers.\n   */\n  format?: 'numeric' | 'alpha' | 'alphanumeric'\n  /**\n   * The shape of the code: each `#` is a box to fill, and every other character is a\n   * separator shown between the boxes without ever being part of the value —\n   * `'GT-###'`, `'###.###.###'`. It wins over `length`.\n   */\n  pattern?: string\n  /**\n   * An icon drawn in place of EVERY separator of the pattern. It suits a template\n   * whose separators are purely decorative, `'###-###'`, and should not be used with\n   * one carrying meaningful text such as `'GT-###'`, which the icon would erase.\n   */\n  separatorIcon?: IconSource\n  /** The size of the boxes: 32, 40 or 48 pixels. */\n  size?: 'sm' | 'md' | 'lg'\n  /** Takes 4px off the boxes, leaving the text and the icons as they are. */\n  compact?: boolean\n  /** Makes every box unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Marks the code as wrong, which colours the boxes and tells assistive technology so. */\n  invalid?: boolean\n  /**\n   * What screen readers announce for the row as a whole. It falls back to the design\n   * system dictionary.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<InputOTPProps>(), {\n  length: 6,\n  format: 'numeric',\n  pattern: undefined,\n  separatorIcon: undefined,\n  size: 'md',\n  compact: false,\n  disabled: false,\n  invalid: false,\n  label: undefined,\n})\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.inputOTP.label)\n\nconst model = defineModel<string>({ default: '' })\n\nconst emit = defineEmits<{\n  /** Emitted the moment every box is filled, carrying the complete code. */\n  complete: [code: string]\n}>()\n\ntype Cell = { type: 'slot'; slotIndex: number } | { type: 'literal'; char: string }\n\nconst cells = computed<Cell[]>(() => {\n  if (props.pattern?.includes('#')) {\n    let slotIndex = 0\n    return [...props.pattern].map((char): Cell =>\n      char === '#' ? { type: 'slot', slotIndex: slotIndex++ } : { type: 'literal', char },\n    )\n  }\n  return Array.from({ length: props.length }, (_, i) => ({ type: 'slot', slotIndex: i }))\n})\nconst slotCount = computed(() => cells.value.filter((cell) => cell.type === 'slot').length)\n\n// @devwarn\nif (isDev) {\n  if (props.pattern && !props.pattern.includes('#'))\n    console.warn(\"[VInputOTP] pattern without '#' — falling back to `length`.\")\n}\n\nconst filters: Record<NonNullable<InputOTPProps['format']>, RegExp> = {\n  numeric: /[^0-9]/g,\n  alpha: /[^A-Z]/g,\n  alphanumeric: /[^A-Z0-9]/g,\n}\n\n/**\n * Keeps only what the format allows. Outside a numeric code the text is put in\n * capitals first, so that the value has a single canonical form whichever case the\n * reader typed or pasted.\n */\nfunction sanitize(text: string) {\n  const upper = props.format === 'numeric' ? text : text.toUpperCase()\n  return upper.replace(filters[props.format], '')\n}\n\nconst inputs = ref<(HTMLInputElement | null)[]>([])\nconst digits = ref<string[]>([])\n\nfunction syncFromModel(value: string) {\n  // A value longer than the row is simply shown cut short, and the model is NOT\n  // rewritten to match: writing back here would feed the watcher below and the two\n  // would keep correcting each other.\n  digits.value = Array.from({ length: slotCount.value }, (_, i) => value[i] ?? '')\n}\nsyncFromModel(model.value)\nwatch([model, slotCount], ([value, count]) => {\n  if (value !== digits.value.join('') || digits.value.length !== count) syncFromModel(value)\n})\n\nfunction commit() {\n  const code = digits.value.join('')\n  model.value = code\n  if (code.length === slotCount.value) emit('complete', code)\n}\n\n// @core\n/**\n * Spreads a run of characters across the boxes, starting from the one that received\n * them. It walks the row: a separator swallows the incoming character when the two\n * match, which is what lets a code pasted in its formatted shape line up, and a box\n * takes the next character the format accepts.\n *\n * It returns the last box it filled, so the caller knows where to put the focus, and\n * `null` when nothing in the text was usable.\n */\nfunction distribute(raw: string, startSlot: number): number | null {\n  const allCells = cells.value\n  let start = allCells.findIndex((cell) => cell.type === 'slot' && cell.slotIndex === startSlot)\n  // Step back over the separators immediately before that box: pasting the whole\n  // string onto the first box means pasting its prefix too, and \"GT-\" has to be\n  // matched rather than treated as characters of the code.\n  while (start > 0 && allCells[start - 1]?.type === 'literal') start--\n  const chars = [...raw]\n  let charIndex = 0\n  let lastFilled: number | null = null\n  for (const cell of allCells.slice(start)) {\n    if (charIndex >= chars.length) break\n    if (cell.type === 'literal') {\n      if (chars[charIndex]?.toUpperCase() === cell.char.toUpperCase()) charIndex++\n      continue\n    }\n    let char = ''\n    while (charIndex < chars.length && !char) {\n      char = sanitize(chars[charIndex] ?? '')\n      charIndex++\n    }\n    if (!char) break\n    digits.value[cell.slotIndex] = char\n    lastFilled = cell.slotIndex\n  }\n  return lastFilled\n}\n\n// @keyboard @core — moving the focus forward on its own is what turns a row of\n// separate inputs into something that types like one field; spreading the characters\n// is the core behaviour underneath it.\nfunction onInput(slotIndex: number, event: Event) {\n  const el = event.target as HTMLInputElement\n  // The same path serves a single keystroke and a pasted code: both are spread from\n  // this box onwards.\n  const lastFilled = distribute(el.value, slotIndex)\n  if (lastFilled === null) {\n    // Either the box was emptied, or nothing typed was valid for this format.\n    digits.value[slotIndex] = ''\n    el.value = ''\n    commit()\n    return\n  }\n  el.value = digits.value[slotIndex] ?? ''\n  inputs.value[Math.min(lastFilled + 1, slotCount.value - 1)]?.focus()\n  commit()\n}\n\n// @keyboard\nfunction onKeydown(slotIndex: number, event: KeyboardEvent) {\n  if (event.key === 'Backspace' && !digits.value[slotIndex] && slotIndex > 0) {\n    event.preventDefault()\n    digits.value[slotIndex - 1] = ''\n    commit()\n    inputs.value[slotIndex - 1]?.focus()\n  } else if (event.key === 'ArrowLeft' && slotIndex > 0) {\n    event.preventDefault()\n    inputs.value[slotIndex - 1]?.focus()\n  } else if (event.key === 'ArrowRight' && slotIndex < slotCount.value - 1) {\n    event.preventDefault()\n    inputs.value[slotIndex + 1]?.focus()\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"v-otp v-control\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :data-invalid=\"invalid ? '' : undefined\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <template v-for=\"(cell, i) in cells\" :key=\"i\">\n      <input\n        v-if=\"cell.type === 'slot'\"\n        :ref=\"\n          (el) => {\n            inputs[cell.slotIndex] = el as HTMLInputElement | null\n          }\n        \"\n        type=\"text\"\n        class=\"v-otp-input\"\n        :inputmode=\"format === 'numeric' ? 'numeric' : 'text'\"\n        :autocomplete=\"cell.slotIndex === 0 ? 'one-time-code' : 'off'\"\n        :value=\"digits[cell.slotIndex]\"\n        :disabled=\"disabled\"\n        :aria-label=\"m.inputOTP.slot(cell.slotIndex + 1, slotCount)\"\n        :aria-invalid=\"invalid || undefined\"\n        @input=\"onInput(cell.slotIndex, $event)\"\n        @keydown=\"onKeydown(cell.slotIndex, $event)\"\n        @focus=\"($event.target as HTMLInputElement).select()\"\n      />\n      <!-- A separator from the pattern: shown, never focusable, and never part of the\n           value. It is hidden from screen readers, each box already announcing its\n           own position in the code. -->\n      <span v-else class=\"v-otp-literal\" aria-hidden=\"true\">\n        <VIcon v-if=\"separatorIcon\" v-bind=\"iconProps(separatorIcon)\" />\n        <template v-else>{{ cell.char }}</template>\n      </span>\n    </template>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-otp {\n    /*\n     * The heights and the icon context come from the shared v-control class\n     * (styles/control-size.css). The type is the one thing kept local, and set one or\n     * two steps above the other fields: a single character has a whole square to\n     * itself, and at the usual field size it would look lost in it.\n     */\n    --otp-font-size: var(--vectis-font-size-lg);\n\n    display: inline-flex;\n    align-items: center;\n    gap: var(--control-gap);\n  }\n\n  .v-otp-input {\n    /* The boxes are square: reading the same variable for both dimensions is what\n       makes the size and the density scale them together. */\n    width: var(--control-height);\n    height: var(--control-height);\n    text-align: center;\n    background: var(--vectis-color-surface);\n    color: var(--vectis-color-text);\n    border: 1px solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-interactive);\n    font-family: var(--vectis-text-family-code);\n    font-size: var(--otp-font-size);\n    transition: border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* The focused box appears to have a two-pixel border, exactly as in VInput and\n     VTextarea: its own 1px border plus a 1px shadow of the same colour just outside\n     it. The transparent outline is the safety net for Windows forced colours, which\n     drop box-shadows entirely. */\n  .v-otp-input:focus-visible {\n    border-color: var(--vectis-color-accent);\n    box-shadow: 0 0 0 1px var(--vectis-color-accent);\n    outline: var(--vectis-focus-ring-width) solid transparent;\n  }\n\n  .v-otp[data-invalid] .v-otp-input {\n    border-color: var(--vectis-color-danger);\n  }\n\n  .v-otp[data-invalid] .v-otp-input:focus-visible {\n    box-shadow: 0 0 0 1px var(--vectis-color-danger);\n  }\n\n  .v-otp-literal {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--vectis-color-text-muted);\n    font-family: var(--vectis-text-family-code);\n    font-size: var(--otp-font-size);\n    user-select: none;\n  }\n\n  /* A disabled row greys out through the colour tokens and never through opacity, the\n     same treatment as VInput. */\n  .v-otp[data-disabled] .v-otp-input {\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-subtle);\n    border-color: var(--vectis-color-border);\n    cursor: not-allowed;\n  }\n\n  .v-otp[data-disabled] .v-otp-literal {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* Of the whole size scale, only the raised type is restated here; the dimensions\n     themselves come from v-control. */\n  .v-otp[data-size='sm'] {\n    --otp-font-size: var(--vectis-font-size-md);\n  }\n\n  .v-otp[data-size='lg'] {\n    --otp-font-size: var(--vectis-font-size-xl);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-otp-input {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VInputOTP.js","names":[],"sources":["../../../src/components/VInputOTP/VInputOTP.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @core\n/**\n * The row of boxes a one-time code is typed into, one character per box.\n *\n * The platform has no such control, so each box is a real `<input>` and the JS is what makes\n * the row behave as one field: a character moves to the next box, Backspace on an empty one\n * goes back, the arrows walk along, and a code pasted anywhere is spread across them. The\n * first box carries `autocomplete=\"one-time-code\"`, so a code arriving from an SMS or a\n * password manager is spread the same way.\n *\n * `pattern` cuts the row up: every `#` is a box, every other character a decorative literal\n * shown between them and never part of the value. Pasting understands those literals — a\n * code copied formatted, `GT-123`, is consumed with them in place — and `format` filters the\n * rest, forcing capitals outside a numeric code so the value has one canonical form.\n */\n\nimport { computed, ref, useAttrs, useId, watch } from 'vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { isDev } from '../../utils/env'\nimport { joinIds } from '../../utils/ids'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\n/** The height of the boxes: 32, 40 or 48 pixels. */\nexport type InputOTPSize = 'sm' | 'md' | 'lg'\n\n/** Which characters the code is made of. */\nexport type InputOTPFormat = 'numeric' | 'alpha' | 'alphanumeric'\n\ninterface InputOTPProps {\n  /** How many boxes the code has. It is ignored as soon as a `pattern` is given. */\n  length?: number\n  /**\n   * Which characters the code is made of. It filters what can be typed or pasted, and\n   * decides which keyboard a phone offers.\n   */\n  format?: InputOTPFormat\n  /**\n   * The shape of the code: each `#` is a box to fill, and every other character is a\n   * separator shown between the boxes without ever being part of the value —\n   * `'GT-###'`, `'###.###.###'`. It wins over `length`.\n   */\n  pattern?: string\n  /**\n   * An icon drawn in place of EVERY separator of the pattern. It suits a template\n   * whose separators are purely decorative, `'###-###'`, and should not be used with\n   * one carrying meaningful text such as `'GT-###'`, which the icon would erase.\n   */\n  separatorIcon?: IconSource\n  /** The size of the boxes: 32, 40 or 48 pixels. */\n  size?: InputOTPSize\n  /** Takes 4px off the boxes, leaving the text and the icons as they are. */\n  compact?: boolean\n  /** Makes every box unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the code without letting it be changed. The boxes keep their focus and the code\n   * can still be selected and copied, which is what separates it from `disabled`.\n   */\n  readonly?: boolean\n  /** Marks the code as wrong, which colours the boxes and tells assistive technology so. */\n  invalid?: boolean\n  /**\n   * What screen readers announce for the row as a whole. It falls back to the design\n   * system dictionary.\n   *\n   * Unlike the `label` of VInput and the other text fields, NOTHING is rendered from it:\n   * a row of boxes carries its own instructions above it, written by the page. Use `hint`\n   * for a line the reader can see.\n   */\n  label?: string\n  /**\n   * A line of help under the boxes — where the code was sent, how long it lasts. It is\n   * tied to the row for assistive technology, so it is read out along with the label.\n   */\n  hint?: string\n}\n\nconst props = withDefaults(defineProps<InputOTPProps>(), {\n  length: 6,\n  format: 'numeric',\n  pattern: undefined,\n  separatorIcon: undefined,\n  size: 'md',\n  compact: false,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  label: undefined,\n  hint: undefined,\n})\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.inputOTP.label)\n\n// @a11y\n/*\n * The root IS the group, so the consumer's attributes belong on it — but they are bound\n * BEFORE the two the component decides itself. `aria-describedby` is a list, and the hint\n * is appended to whatever the consumer already pointed at instead of replacing it; left\n * to the fallthrough, their value would land last and take the hint out of the\n * announcement with nothing to show for it.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\n// No `useFieldIds` here: the row is named by `aria-label` and renders no `<label>`, so the\n// field id that composable generates would have nothing to point it at.\nconst hintId = useId()\nconst describedBy = computed(() =>\n  joinIds(attrs['aria-describedby'] as string | undefined, !!props.hint && hintId),\n)\n\n/**\n * The code as one string, without the separators: a `GT-###` template still yields three\n * characters. It is empty to begin with, and shorter than the full length while it is being\n * typed.\n */\nconst model = defineModel<string>({ default: '' })\n\nconst emit = defineEmits<{\n  /** Emitted the moment every box is filled, carrying the complete code. */\n  complete: [code: string]\n}>()\n\ntype Cell = { type: 'slot'; slotIndex: number } | { type: 'literal'; char: string }\n\nconst cells = computed<Cell[]>(() => {\n  if (props.pattern?.includes('#')) {\n    let slotIndex = 0\n    return [...props.pattern].map((char): Cell =>\n      char === '#' ? { type: 'slot', slotIndex: slotIndex++ } : { type: 'literal', char },\n    )\n  }\n  return Array.from({ length: props.length }, (_, i) => ({ type: 'slot', slotIndex: i }))\n})\nconst slotCount = computed(() => cells.value.filter((cell) => cell.type === 'slot').length)\n\n// @devwarn\nif (isDev) {\n  if (props.pattern && !props.pattern.includes('#'))\n    console.warn(\"[VInputOTP] pattern without '#' — falling back to `length`.\")\n}\n\nconst filters: Record<NonNullable<InputOTPProps['format']>, RegExp> = {\n  numeric: /[^0-9]/g,\n  alpha: /[^A-Z]/g,\n  alphanumeric: /[^A-Z0-9]/g,\n}\n\n/**\n * Keeps only what the format allows. Outside a numeric code the text is put in\n * capitals first, so that the value has a single canonical form whichever case the\n * reader typed or pasted.\n */\nfunction sanitize(text: string) {\n  const upper = props.format === 'numeric' ? text : text.toUpperCase()\n  return upper.replace(filters[props.format], '')\n}\n\nconst inputs = ref<(HTMLInputElement | null)[]>([])\nconst rootEl = ref<HTMLElement | null>(null)\nconst digits = ref<string[]>([])\n\nfunction syncFromModel(value: string) {\n  // A value longer than the row is simply shown cut short, and the model is NOT\n  // rewritten to match: writing back here would feed the watcher below and the two\n  // would keep correcting each other.\n  digits.value = Array.from({ length: slotCount.value }, (_, i) => value[i] ?? '')\n}\nsyncFromModel(model.value)\nwatch([model, slotCount], ([value, count]) => {\n  if (value !== digits.value.join('') || digits.value.length !== count) syncFromModel(value)\n})\n\n/*\n * TRAP — the list of boxes is trimmed AFTER the render, never before it. A box that\n * disappears calls its function ref with `null` while it is being unmounted, at its OLD\n * position: trimmed in a `pre` watcher, that late assignment would stretch the array back\n * out, and a pattern that shortened would keep its departed boxes as trailing entries.\n */\nwatch(\n  slotCount,\n  (count) => {\n    inputs.value.length = count\n  },\n  { flush: 'post' },\n)\n\nfunction commit() {\n  const code = digits.value.join('')\n  model.value = code\n  if (code.length === slotCount.value) emit('complete', code)\n}\n\n// @core\n/**\n * Spreads a run of characters across the boxes, starting from the one that received\n * them. It walks the row: a separator swallows the incoming character when the two\n * match, which is what lets a code pasted in its formatted shape line up, and a box\n * takes the next character the format accepts.\n *\n * It returns the last box it filled, so the caller knows where to put the focus, and\n * `null` when nothing in the text was usable.\n */\nfunction distribute(raw: string, startSlot: number): number | null {\n  const allCells = cells.value\n  let start = allCells.findIndex((cell) => cell.type === 'slot' && cell.slotIndex === startSlot)\n  // Step back over the separators immediately before that box: pasting the whole\n  // string onto the first box means pasting its prefix too, and \"GT-\" has to be\n  // matched rather than treated as characters of the code.\n  while (start > 0 && allCells[start - 1]?.type === 'literal') start--\n  const chars = [...raw]\n  let charIndex = 0\n  let lastFilled: number | null = null\n  for (const cell of allCells.slice(start)) {\n    if (charIndex >= chars.length) break\n    if (cell.type === 'literal') {\n      if (chars[charIndex]?.toUpperCase() === cell.char.toUpperCase()) charIndex++\n      continue\n    }\n    let char = ''\n    while (charIndex < chars.length && !char) {\n      char = sanitize(chars[charIndex] ?? '')\n      charIndex++\n    }\n    if (!char) break\n    digits.value[cell.slotIndex] = char\n    lastFilled = cell.slotIndex\n  }\n  return lastFilled\n}\n\n// @keyboard @core — moving the focus forward on its own is what turns a row of\n// separate inputs into something that types like one field; spreading the characters\n// is the core behaviour underneath it.\nfunction onInput(slotIndex: number, event: Event) {\n  const el = event.target as HTMLInputElement\n  // The same path serves a single keystroke and a pasted code: both are spread from\n  // this box onwards.\n  const lastFilled = distribute(el.value, slotIndex)\n  if (lastFilled === null) {\n    // Either the box was emptied, or nothing typed was valid for this format.\n    digits.value[slotIndex] = ''\n    el.value = ''\n    commit()\n    return\n  }\n  el.value = digits.value[slotIndex] ?? ''\n  inputs.value[Math.min(lastFilled + 1, slotCount.value - 1)]?.focus()\n  commit()\n}\n\n// @keyboard\nfunction onKeydown(slotIndex: number, event: KeyboardEvent) {\n  if (event.key === 'Backspace' && !digits.value[slotIndex] && slotIndex > 0) {\n    event.preventDefault()\n    digits.value[slotIndex - 1] = ''\n    commit()\n    inputs.value[slotIndex - 1]?.focus()\n  } else if (event.key === 'ArrowLeft' && slotIndex > 0) {\n    event.preventDefault()\n    inputs.value[slotIndex - 1]?.focus()\n  } else if (event.key === 'ArrowRight' && slotIndex < slotCount.value - 1) {\n    event.preventDefault()\n    inputs.value[slotIndex + 1]?.focus()\n  }\n}\n/*\n * The same trio every other field of the size scale exposes. `focus` goes to the FIRST\n * EMPTY box rather than to the first box outright, which is where a reader resuming a\n * half-entered code expects to land.\n */\ndefineExpose({\n  /** Moves the focus to the first empty box, or to the last one when the code is complete. */\n  focus: (options?: FocusOptions) => {\n    const empty = digits.value.findIndex((d) => !d)\n    const target = empty === -1 ? slotCount.value - 1 : empty\n    inputs.value[target]?.focus(options)\n  },\n  /** Selects the box the focus is on, as clicking into one already does. */\n  select: () => {\n    const active = inputs.value.find((el) => el === document.activeElement)\n    ;(active ?? inputs.value[0])?.select()\n  },\n  /** The row itself, for what neither of the two above covers. */\n  el: rootEl,\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    v-bind=\"attrs\"\n    class=\"v-input-otp v-control\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :aria-describedby=\"describedBy\"\n    :data-invalid=\"invalid ? '' : undefined\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <div class=\"v-input-otp-boxes\">\n      <template v-for=\"(cell, i) in cells\" :key=\"i\">\n        <input\n          v-if=\"cell.type === 'slot'\"\n          :ref=\"\n            (el) => {\n              inputs[cell.slotIndex] = el as HTMLInputElement | null\n            }\n          \"\n          type=\"text\"\n          class=\"v-input-otp-input\"\n          :inputmode=\"format === 'numeric' ? 'numeric' : 'text'\"\n          :autocomplete=\"cell.slotIndex === 0 ? 'one-time-code' : 'off'\"\n          :value=\"digits[cell.slotIndex]\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly || undefined\"\n          :aria-label=\"m.inputOTP.slot(cell.slotIndex + 1, slotCount)\"\n          :aria-invalid=\"invalid || undefined\"\n          @input=\"onInput(cell.slotIndex, $event)\"\n          @keydown=\"onKeydown(cell.slotIndex, $event)\"\n          @focus=\"($event.target as HTMLInputElement).select()\"\n        />\n        <!-- A separator from the pattern: shown, never focusable, and never part of the\n             value. It is hidden from screen readers, each box already announcing its\n             own position in the code. -->\n        <span v-else class=\"v-input-otp-literal\" aria-hidden=\"true\">\n          <VIcon v-if=\"separatorIcon\" v-bind=\"iconProps(separatorIcon)\" />\n          <template v-else>{{ cell.char }}</template>\n        </span>\n      </template>\n    </div>\n\n    <VTypography v-if=\"hint\" :id=\"hintId\" variant=\"caption\" tone=\"muted\" class=\"v-input-otp-hint\">\n      {{ hint }}\n    </VTypography>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-input-otp {\n    /*\n     * The heights and the icon context come from the shared v-control class\n     * (styles/control-size.css). The type is the one thing kept local, and set one or\n     * two steps above the other fields: a single character has a whole square to\n     * itself, and at the usual field size it would look lost in it.\n     */\n    --input-otp-font-size: var(--vectis-font-size-lg);\n\n    /* A column, so the hint sits under the boxes rather than beside them; the row itself\n       is the box below. `inline-flex` keeps the component's own width, and the start\n       alignment stops the hint from stretching the row to its own length. */\n    display: inline-flex;\n    flex-direction: column;\n    align-items: start;\n    gap: var(--vectis-space-1);\n  }\n\n  .v-input-otp-boxes {\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n  }\n\n  .v-input-otp-input {\n    /* The boxes are square: reading the same variable for both dimensions is what\n       makes the size and the density scale them together. */\n    width: var(--control-height);\n    height: var(--control-height);\n    text-align: center;\n    background: var(--vectis-color-surface);\n    color: var(--vectis-color-text);\n    border: 1px solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-interactive);\n    font-family: var(--vectis-text-family-code);\n    font-size: var(--input-otp-font-size);\n    transition: border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* The focused box appears to have a two-pixel border, exactly as in VInput and\n     VTextarea: its own 1px border plus a 1px shadow of the same colour just outside\n     it. The transparent outline is the safety net for Windows forced colours, which\n     drop box-shadows entirely. */\n  .v-input-otp-input:focus-visible {\n    border-color: var(--vectis-color-accent);\n    box-shadow: 0 0 0 1px var(--vectis-color-accent);\n    outline: var(--vectis-focus-ring-width) solid transparent;\n  }\n\n  /* A read-only row takes the sunken background of a read-only VInput, and the state is\n     read from [data-readonly] rather than from `:read-only`, which the browser also matches\n     on a disabled box. It is declared BEFORE the invalid and disabled blocks, all three\n     weighing (0,2,0), so those still win over it. */\n  .v-input-otp[data-readonly] .v-input-otp-input {\n    background: var(--vectis-color-surface-sunken);\n  }\n\n  .v-input-otp[data-invalid] .v-input-otp-input {\n    border-color: var(--vectis-color-danger);\n  }\n\n  .v-input-otp[data-invalid] .v-input-otp-input:focus-visible {\n    box-shadow: 0 0 0 1px var(--vectis-color-danger);\n  }\n\n  .v-input-otp-literal {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--vectis-color-text-muted);\n    font-family: var(--vectis-text-family-code);\n    font-size: var(--input-otp-font-size);\n    user-select: none;\n  }\n\n  /* A disabled row greys out through the colour tokens and never through opacity, the\n     same treatment as VInput. */\n  .v-input-otp[data-disabled] .v-input-otp-input {\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-subtle);\n    border-color: var(--vectis-color-border);\n    cursor: not-allowed;\n  }\n\n  .v-input-otp[data-disabled] .v-input-otp-literal,\n  .v-input-otp[data-disabled] .v-input-otp-hint {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* Of the whole size scale, only the raised type is restated here; the dimensions\n     themselves come from v-control. */\n  .v-input-otp[data-size='sm'] {\n    --input-otp-font-size: var(--vectis-font-size-md);\n  }\n\n  .v-input-otp[data-size='lg'] {\n    --input-otp-font-size: var(--vectis-font-size-xl);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-input-otp-input {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VInputOTP/VInputOTP.vue_vue_type_script_setup_true_lang.js

@@ -1,31 +1,37 @@
 import { useMessages as e } from "../../i18n/state.js";
-import t from "../VIcon/VIcon.js";
-import { iconProps as n } from "../VIcon/iconProps.js";
-import { useAriaLabel as r } from "../../composables/useAriaLabel.js";
-import { Fragment as i, computed as a, createBlock as o, createElementBlock as s, createTextVNode as c, defineComponent as l, mergeModels as u, mergeProps as d, openBlock as f, ref as p, renderList as m, toDisplayString as h, unref as g, useModel as _, watch as v } from "vue";
+import { iconProps as t } from "../VIcon/iconProps.js";
+import n from "../VIcon/VIcon.js";
+import r from "../VTypography/VTypography.js";
+import { useAriaLabel as i } from "../../composables/useAriaLabel.js";
+import { joinIds as a } from "../../utils/ids.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, defineComponent as p, mergeModels as m, mergeProps as h, openBlock as g, ref as _, renderList as v, toDisplayString as y, unref as b, useAttrs as x, useId as S, useModel as C, watch as w, withCtx as T } from "vue";
 //#region src/components/VInputOTP/VInputOTP.vue?vue&type=script&setup=true&lang.ts
-var y = [
+var E = [
 	"aria-label",
+	"aria-describedby",
 	"data-invalid",
 	"data-size",
 	"data-compact",
-	"data-disabled"
-], b = [
+	"data-disabled",
+	"data-readonly"
+], D = { class: "v-input-otp-boxes" }, O = [
 	"inputmode",
 	"autocomplete",
 	"value",
 	"disabled",
+	"readonly",
 	"aria-label",
 	"aria-invalid",
 	"onInput",
 	"onKeydown"
-], x = {
+], k = {
 	key: 1,
-	class: "v-otp-literal",
+	class: "v-input-otp-literal",
 	"aria-hidden": "true"
-}, S = /*@__PURE__*/ l({
+}, A = /*@__PURE__*/ p({
+	inheritAttrs: !1,
 	__name: "VInputOTP",
-	props: /*@__PURE__*/ u({
+	props: /*@__PURE__*/ m({
 		length: { default: 6 },
 		format: { default: "numeric" },
 		pattern: { default: void 0 },
@@ -39,21 +45,26 @@ var y = [
 			type: Boolean,
 			default: !1
 		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
 		invalid: {
 			type: Boolean,
 			default: !1
 		},
-		label: { default: void 0 }
+		label: { default: void 0 },
+		hint: { default: void 0 }
 	}, {
 		modelValue: { default: "" },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ u(["complete"], ["update:modelValue"]),
-	setup(l, { emit: u }) {
-		let S = l, C = e(), w = r(() => S.label ?? C.value.inputOTP.label), T = _(l, "modelValue"), E = u, D = a(() => {
-			if (S.pattern?.includes("#")) {
+	emits: /*@__PURE__*/ m(["complete"], ["update:modelValue"]),
+	setup(p, { expose: m, emit: A }) {
+		let j = p, M = e(), N = i(() => j.label ?? M.value.inputOTP.label), P = x(), F = S(), I = s(() => a(P["aria-describedby"], !!j.hint && F)), L = C(p, "modelValue"), R = A, z = s(() => {
+			if (j.pattern?.includes("#")) {
 				let e = 0;
-				return [...S.pattern].map((t) => t === "#" ? {
+				return [...j.pattern].map((t) => t === "#" ? {
 					type: "slot",
 					slotIndex: e++
 				} : {
@@ -61,31 +72,33 @@ var y = [
 					char: t
 				});
 			}
-			return Array.from({ length: S.length }, (e, t) => ({
+			return Array.from({ length: j.length }, (e, t) => ({
 				type: "slot",
 				slotIndex: t
 			}));
-		}), O = a(() => D.value.filter((e) => e.type === "slot").length), k = {
+		}), B = s(() => z.value.filter((e) => e.type === "slot").length), V = {
 			numeric: /[^0-9]/g,
 			alpha: /[^A-Z]/g,
 			alphanumeric: /[^A-Z0-9]/g
 		};
-		function A(e) {
-			return (S.format === "numeric" ? e : e.toUpperCase()).replace(k[S.format], "");
+		function H(e) {
+			return (j.format === "numeric" ? e : e.toUpperCase()).replace(V[j.format], "");
 		}
-		let j = p([]), M = p([]);
-		function N(e) {
-			M.value = Array.from({ length: O.value }, (t, n) => e[n] ?? "");
+		let U = _([]), W = _(null), G = _([]);
+		function K(e) {
+			G.value = Array.from({ length: B.value }, (t, n) => e[n] ?? "");
 		}
-		N(T.value), v([T, O], ([e, t]) => {
-			(e !== M.value.join("") || M.value.length !== t) && N(e);
-		});
-		function P() {
-			let e = M.value.join("");
-			T.value = e, e.length === O.value && E("complete", e);
+		K(L.value), w([L, B], ([e, t]) => {
+			(e !== G.value.join("") || G.value.length !== t) && K(e);
+		}), w(B, (e) => {
+			U.value.length = e;
+		}, { flush: "post" });
+		function q() {
+			let e = G.value.join("");
+			L.value = e, e.length === B.value && R("complete", e);
 		}
-		function F(e, t) {
-			let n = D.value, r = n.findIndex((e) => e.type === "slot" && e.slotIndex === t);
+		function J(e, t) {
+			let n = z.value, r = n.findIndex((e) => e.type === "slot" && e.slotIndex === t);
 			for (; r > 0 && n[r - 1]?.type === "literal";) r--;
 			let i = [...e], a = 0, o = null;
 			for (let e of n.slice(r)) {
@@ -95,55 +108,79 @@ var y = [
 					continue;
 				}
 				let t = "";
-				for (; a < i.length && !t;) t = A(i[a] ?? ""), a++;
+				for (; a < i.length && !t;) t = H(i[a] ?? ""), a++;
 				if (!t) break;
-				M.value[e.slotIndex] = t, o = e.slotIndex;
+				G.value[e.slotIndex] = t, o = e.slotIndex;
 			}
 			return o;
 		}
-		function I(e, t) {
-			let n = t.target, r = F(n.value, e);
+		function Y(e, t) {
+			let n = t.target, r = J(n.value, e);
 			if (r === null) {
-				M.value[e] = "", n.value = "", P();
+				G.value[e] = "", n.value = "", q();
 				return;
 			}
-			n.value = M.value[e] ?? "", j.value[Math.min(r + 1, O.value - 1)]?.focus(), P();
+			n.value = G.value[e] ?? "", U.value[Math.min(r + 1, B.value - 1)]?.focus(), q();
 		}
-		function L(e, t) {
-			t.key === "Backspace" && !M.value[e] && e > 0 ? (t.preventDefault(), M.value[e - 1] = "", P(), j.value[e - 1]?.focus()) : t.key === "ArrowLeft" && e > 0 ? (t.preventDefault(), j.value[e - 1]?.focus()) : t.key === "ArrowRight" && e < O.value - 1 && (t.preventDefault(), j.value[e + 1]?.focus());
+		function X(e, t) {
+			t.key === "Backspace" && !G.value[e] && e > 0 ? (t.preventDefault(), G.value[e - 1] = "", q(), U.value[e - 1]?.focus()) : t.key === "ArrowLeft" && e > 0 ? (t.preventDefault(), U.value[e - 1]?.focus()) : t.key === "ArrowRight" && e < B.value - 1 && (t.preventDefault(), U.value[e + 1]?.focus());
 		}
-		return (e, r) => (f(), s("div", {
-			class: "v-otp v-control",
+		return m({
+			focus: (e) => {
+				let t = G.value.findIndex((e) => !e), n = t === -1 ? B.value - 1 : t;
+				U.value[n]?.focus(e);
+			},
+			select: () => {
+				(U.value.find((e) => e === document.activeElement) ?? U.value[0])?.select();
+			},
+			el: W
+		}), (e, i) => (g(), u("div", h({
+			ref_key: "rootEl",
+			ref: W
+		}, b(P), {
+			class: "v-input-otp v-control",
 			role: "group",
-			"aria-label": g(w),
-			"data-invalid": l.invalid ? "" : void 0,
-			"data-size": l.size,
-			"data-compact": l.compact ? "" : void 0,
-			"data-disabled": l.disabled ? "" : void 0
-		}, [(f(!0), s(i, null, m(D.value, (e, a) => (f(), s(i, { key: a }, [e.type === "slot" ? (f(), s("input", {
+			"aria-label": b(N),
+			"aria-describedby": I.value,
+			"data-invalid": p.invalid ? "" : void 0,
+			"data-size": p.size,
+			"data-compact": p.compact ? "" : void 0,
+			"data-disabled": p.disabled ? "" : void 0,
+			"data-readonly": p.readonly ? "" : void 0
+		}), [d("div", D, [(g(!0), u(o, null, v(z.value, (e, r) => (g(), u(o, { key: r }, [e.type === "slot" ? (g(), u("input", {
 			key: 0,
 			ref_for: !0,
 			ref: (t) => {
-				j.value[e.slotIndex] = t;
+				U.value[e.slotIndex] = t;
 			},
 			type: "text",
-			class: "v-otp-input",
-			inputmode: l.format === "numeric" ? "numeric" : "text",
+			class: "v-input-otp-input",
+			inputmode: p.format === "numeric" ? "numeric" : "text",
 			autocomplete: e.slotIndex === 0 ? "one-time-code" : "off",
-			value: M.value[e.slotIndex],
-			disabled: l.disabled,
-			"aria-label": g(C).inputOTP.slot(e.slotIndex + 1, O.value),
-			"aria-invalid": l.invalid || void 0,
-			onInput: (t) => I(e.slotIndex, t),
-			onKeydown: (t) => L(e.slotIndex, t),
-			onFocus: r[0] ||= (e) => e.target.select()
-		}, null, 40, b)) : (f(), s("span", x, [l.separatorIcon ? (f(), o(t, d({
+			value: G.value[e.slotIndex],
+			disabled: p.disabled,
+			readonly: p.readonly || void 0,
+			"aria-label": b(M).inputOTP.slot(e.slotIndex + 1, B.value),
+			"aria-invalid": p.invalid || void 0,
+			onInput: (t) => Y(e.slotIndex, t),
+			onKeydown: (t) => X(e.slotIndex, t),
+			onFocus: i[0] ||= (e) => e.target.select()
+		}, null, 40, O)) : (g(), u("span", k, [p.separatorIcon ? (g(), c(n, h({
 			key: 0,
 			ref_for: !0
-		}, g(n)(l.separatorIcon)), null, 16)) : (f(), s(i, { key: 1 }, [c(h(e.char), 1)], 64))]))], 64))), 128))], 8, y));
+		}, b(t)(p.separatorIcon)), null, 16)) : (g(), u(o, { key: 1 }, [f(y(e.char), 1)], 64))]))], 64))), 128))]), p.hint ? (g(), c(r, {
+			key: 0,
+			id: b(F),
+			variant: "caption",
+			tone: "muted",
+			class: "v-input-otp-hint"
+		}, {
+			default: T(() => [f(y(p.hint), 1)]),
+			_: 1
+		}, 8, ["id"])) : l("", !0)], 16, E));
 	}
 });
 //#endregion
-export { S as default };
+export { A as default };
 
 //# sourceMappingURL=VInputOTP.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VInputOTP.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VInputOTP/VInputOTP.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\nimport { isDev } from '../../utils/env'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\n// @keyboard @core\n/**\n * The row of boxes a one-time code is typed into, one character per box.\n *\n * The platform has no such control, so each box is a real `<input>` and the\n * JavaScript is what makes the row behave as a single field: typing a character moves\n * to the next box, Backspace on an empty one goes back, the arrows walk along, and a\n * code pasted anywhere is spread across the boxes. The first box carries\n * `autocomplete=\"one-time-code\"`, so a code filled in from an SMS or a password\n * manager is spread the same way.\n *\n * `pattern` is what cuts the row up: every `#` becomes a box, and every other\n * character becomes a separator shown between them, which is displayed but never part\n * of the value. Pasting understands those separators — a code copied in its formatted\n * shape, \"GT-123\" or \"123.456.789\", is consumed with them in place — and everything\n * else is filtered by `format`, which also forces capitals outside a numeric code so\n * that the value has one canonical form.\n */\ninterface InputOTPProps {\n  /** How many boxes the code has. It is ignored as soon as a `pattern` is given. */\n  length?: number\n  /**\n   * Which characters the code is made of. It filters what can be typed or pasted, and\n   * decides which keyboard a phone offers.\n   */\n  format?: 'numeric' | 'alpha' | 'alphanumeric'\n  /**\n   * The shape of the code: each `#` is a box to fill, and every other character is a\n   * separator shown between the boxes without ever being part of the value —\n   * `'GT-###'`, `'###.###.###'`. It wins over `length`.\n   */\n  pattern?: string\n  /**\n   * An icon drawn in place of EVERY separator of the pattern. It suits a template\n   * whose separators are purely decorative, `'###-###'`, and should not be used with\n   * one carrying meaningful text such as `'GT-###'`, which the icon would erase.\n   */\n  separatorIcon?: IconSource\n  /** The size of the boxes: 32, 40 or 48 pixels. */\n  size?: 'sm' | 'md' | 'lg'\n  /** Takes 4px off the boxes, leaving the text and the icons as they are. */\n  compact?: boolean\n  /** Makes every box unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Marks the code as wrong, which colours the boxes and tells assistive technology so. */\n  invalid?: boolean\n  /**\n   * What screen readers announce for the row as a whole. It falls back to the design\n   * system dictionary.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<InputOTPProps>(), {\n  length: 6,\n  format: 'numeric',\n  pattern: undefined,\n  separatorIcon: undefined,\n  size: 'md',\n  compact: false,\n  disabled: false,\n  invalid: false,\n  label: undefined,\n})\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.inputOTP.label)\n\nconst model = defineModel<string>({ default: '' })\n\nconst emit = defineEmits<{\n  /** Emitted the moment every box is filled, carrying the complete code. */\n  complete: [code: string]\n}>()\n\ntype Cell = { type: 'slot'; slotIndex: number } | { type: 'literal'; char: string }\n\nconst cells = computed<Cell[]>(() => {\n  if (props.pattern?.includes('#')) {\n    let slotIndex = 0\n    return [...props.pattern].map((char): Cell =>\n      char === '#' ? { type: 'slot', slotIndex: slotIndex++ } : { type: 'literal', char },\n    )\n  }\n  return Array.from({ length: props.length }, (_, i) => ({ type: 'slot', slotIndex: i }))\n})\nconst slotCount = computed(() => cells.value.filter((cell) => cell.type === 'slot').length)\n\n// @devwarn\nif (isDev) {\n  if (props.pattern && !props.pattern.includes('#'))\n    console.warn(\"[VInputOTP] pattern without '#' — falling back to `length`.\")\n}\n\nconst filters: Record<NonNullable<InputOTPProps['format']>, RegExp> = {\n  numeric: /[^0-9]/g,\n  alpha: /[^A-Z]/g,\n  alphanumeric: /[^A-Z0-9]/g,\n}\n\n/**\n * Keeps only what the format allows. Outside a numeric code the text is put in\n * capitals first, so that the value has a single canonical form whichever case the\n * reader typed or pasted.\n */\nfunction sanitize(text: string) {\n  const upper = props.format === 'numeric' ? text : text.toUpperCase()\n  return upper.replace(filters[props.format], '')\n}\n\nconst inputs = ref<(HTMLInputElement | null)[]>([])\nconst digits = ref<string[]>([])\n\nfunction syncFromModel(value: string) {\n  // A value longer than the row is simply shown cut short, and the model is NOT\n  // rewritten to match: writing back here would feed the watcher below and the two\n  // would keep correcting each other.\n  digits.value = Array.from({ length: slotCount.value }, (_, i) => value[i] ?? '')\n}\nsyncFromModel(model.value)\nwatch([model, slotCount], ([value, count]) => {\n  if (value !== digits.value.join('') || digits.value.length !== count) syncFromModel(value)\n})\n\nfunction commit() {\n  const code = digits.value.join('')\n  model.value = code\n  if (code.length === slotCount.value) emit('complete', code)\n}\n\n// @core\n/**\n * Spreads a run of characters across the boxes, starting from the one that received\n * them. It walks the row: a separator swallows the incoming character when the two\n * match, which is what lets a code pasted in its formatted shape line up, and a box\n * takes the next character the format accepts.\n *\n * It returns the last box it filled, so the caller knows where to put the focus, and\n * `null` when nothing in the text was usable.\n */\nfunction distribute(raw: string, startSlot: number): number | null {\n  const allCells = cells.value\n  let start = allCells.findIndex((cell) => cell.type === 'slot' && cell.slotIndex === startSlot)\n  // Step back over the separators immediately before that box: pasting the whole\n  // string onto the first box means pasting its prefix too, and \"GT-\" has to be\n  // matched rather than treated as characters of the code.\n  while (start > 0 && allCells[start - 1]?.type === 'literal') start--\n  const chars = [...raw]\n  let charIndex = 0\n  let lastFilled: number | null = null\n  for (const cell of allCells.slice(start)) {\n    if (charIndex >= chars.length) break\n    if (cell.type === 'literal') {\n      if (chars[charIndex]?.toUpperCase() === cell.char.toUpperCase()) charIndex++\n      continue\n    }\n    let char = ''\n    while (charIndex < chars.length && !char) {\n      char = sanitize(chars[charIndex] ?? '')\n      charIndex++\n    }\n    if (!char) break\n    digits.value[cell.slotIndex] = char\n    lastFilled = cell.slotIndex\n  }\n  return lastFilled\n}\n\n// @keyboard @core — moving the focus forward on its own is what turns a row of\n// separate inputs into something that types like one field; spreading the characters\n// is the core behaviour underneath it.\nfunction onInput(slotIndex: number, event: Event) {\n  const el = event.target as HTMLInputElement\n  // The same path serves a single keystroke and a pasted code: both are spread from\n  // this box onwards.\n  const lastFilled = distribute(el.value, slotIndex)\n  if (lastFilled === null) {\n    // Either the box was emptied, or nothing typed was valid for this format.\n    digits.value[slotIndex] = ''\n    el.value = ''\n    commit()\n    return\n  }\n  el.value = digits.value[slotIndex] ?? ''\n  inputs.value[Math.min(lastFilled + 1, slotCount.value - 1)]?.focus()\n  commit()\n}\n\n// @keyboard\nfunction onKeydown(slotIndex: number, event: KeyboardEvent) {\n  if (event.key === 'Backspace' && !digits.value[slotIndex] && slotIndex > 0) {\n    event.preventDefault()\n    digits.value[slotIndex - 1] = ''\n    commit()\n    inputs.value[slotIndex - 1]?.focus()\n  } else if (event.key === 'ArrowLeft' && slotIndex > 0) {\n    event.preventDefault()\n    inputs.value[slotIndex - 1]?.focus()\n  } else if (event.key === 'ArrowRight' && slotIndex < slotCount.value - 1) {\n    event.preventDefault()\n    inputs.value[slotIndex + 1]?.focus()\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"v-otp v-control\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :data-invalid=\"invalid ? '' : undefined\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <template v-for=\"(cell, i) in cells\" :key=\"i\">\n      <input\n        v-if=\"cell.type === 'slot'\"\n        :ref=\"\n          (el) => {\n            inputs[cell.slotIndex] = el as HTMLInputElement | null\n          }\n        \"\n        type=\"text\"\n        class=\"v-otp-input\"\n        :inputmode=\"format === 'numeric' ? 'numeric' : 'text'\"\n        :autocomplete=\"cell.slotIndex === 0 ? 'one-time-code' : 'off'\"\n        :value=\"digits[cell.slotIndex]\"\n        :disabled=\"disabled\"\n        :aria-label=\"m.inputOTP.slot(cell.slotIndex + 1, slotCount)\"\n        :aria-invalid=\"invalid || undefined\"\n        @input=\"onInput(cell.slotIndex, $event)\"\n        @keydown=\"onKeydown(cell.slotIndex, $event)\"\n        @focus=\"($event.target as HTMLInputElement).select()\"\n      />\n      <!-- A separator from the pattern: shown, never focusable, and never part of the\n           value. It is hidden from screen readers, each box already announcing its\n           own position in the code. -->\n      <span v-else class=\"v-otp-literal\" aria-hidden=\"true\">\n        <VIcon v-if=\"separatorIcon\" v-bind=\"iconProps(separatorIcon)\" />\n        <template v-else>{{ cell.char }}</template>\n      </span>\n    </template>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-otp {\n    /*\n     * The heights and the icon context come from the shared v-control class\n     * (styles/control-size.css). The type is the one thing kept local, and set one or\n     * two steps above the other fields: a single character has a whole square to\n     * itself, and at the usual field size it would look lost in it.\n     */\n    --otp-font-size: var(--vectis-font-size-lg);\n\n    display: inline-flex;\n    align-items: center;\n    gap: var(--control-gap);\n  }\n\n  .v-otp-input {\n    /* The boxes are square: reading the same variable for both dimensions is what\n       makes the size and the density scale them together. */\n    width: var(--control-height);\n    height: var(--control-height);\n    text-align: center;\n    background: var(--vectis-color-surface);\n    color: var(--vectis-color-text);\n    border: 1px solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-interactive);\n    font-family: var(--vectis-text-family-code);\n    font-size: var(--otp-font-size);\n    transition: border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* The focused box appears to have a two-pixel border, exactly as in VInput and\n     VTextarea: its own 1px border plus a 1px shadow of the same colour just outside\n     it. The transparent outline is the safety net for Windows forced colours, which\n     drop box-shadows entirely. */\n  .v-otp-input:focus-visible {\n    border-color: var(--vectis-color-accent);\n    box-shadow: 0 0 0 1px var(--vectis-color-accent);\n    outline: var(--vectis-focus-ring-width) solid transparent;\n  }\n\n  .v-otp[data-invalid] .v-otp-input {\n    border-color: var(--vectis-color-danger);\n  }\n\n  .v-otp[data-invalid] .v-otp-input:focus-visible {\n    box-shadow: 0 0 0 1px var(--vectis-color-danger);\n  }\n\n  .v-otp-literal {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--vectis-color-text-muted);\n    font-family: var(--vectis-text-family-code);\n    font-size: var(--otp-font-size);\n    user-select: none;\n  }\n\n  /* A disabled row greys out through the colour tokens and never through opacity, the\n     same treatment as VInput. */\n  .v-otp[data-disabled] .v-otp-input {\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-subtle);\n    border-color: var(--vectis-color-border);\n    cursor: not-allowed;\n  }\n\n  .v-otp[data-disabled] .v-otp-literal {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* Of the whole size scale, only the raised type is restated here; the dimensions\n     themselves come from v-control. */\n  .v-otp[data-size='sm'] {\n    --otp-font-size: var(--vectis-font-size-md);\n  }\n\n  .v-otp[data-size='lg'] {\n    --otp-font-size: var(--vectis-font-size-xl);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-otp-input {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"VInputOTP.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VInputOTP/VInputOTP.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @core\n/**\n * The row of boxes a one-time code is typed into, one character per box.\n *\n * The platform has no such control, so each box is a real `<input>` and the JS is what makes\n * the row behave as one field: a character moves to the next box, Backspace on an empty one\n * goes back, the arrows walk along, and a code pasted anywhere is spread across them. The\n * first box carries `autocomplete=\"one-time-code\"`, so a code arriving from an SMS or a\n * password manager is spread the same way.\n *\n * `pattern` cuts the row up: every `#` is a box, every other character a decorative literal\n * shown between them and never part of the value. Pasting understands those literals — a\n * code copied formatted, `GT-123`, is consumed with them in place — and `format` filters the\n * rest, forcing capitals outside a numeric code so the value has one canonical form.\n */\n\nimport { computed, ref, useAttrs, useId, watch } from 'vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { isDev } from '../../utils/env'\nimport { joinIds } from '../../utils/ids'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\n/** The height of the boxes: 32, 40 or 48 pixels. */\nexport type InputOTPSize = 'sm' | 'md' | 'lg'\n\n/** Which characters the code is made of. */\nexport type InputOTPFormat = 'numeric' | 'alpha' | 'alphanumeric'\n\ninterface InputOTPProps {\n  /** How many boxes the code has. It is ignored as soon as a `pattern` is given. */\n  length?: number\n  /**\n   * Which characters the code is made of. It filters what can be typed or pasted, and\n   * decides which keyboard a phone offers.\n   */\n  format?: InputOTPFormat\n  /**\n   * The shape of the code: each `#` is a box to fill, and every other character is a\n   * separator shown between the boxes without ever being part of the value —\n   * `'GT-###'`, `'###.###.###'`. It wins over `length`.\n   */\n  pattern?: string\n  /**\n   * An icon drawn in place of EVERY separator of the pattern. It suits a template\n   * whose separators are purely decorative, `'###-###'`, and should not be used with\n   * one carrying meaningful text such as `'GT-###'`, which the icon would erase.\n   */\n  separatorIcon?: IconSource\n  /** The size of the boxes: 32, 40 or 48 pixels. */\n  size?: InputOTPSize\n  /** Takes 4px off the boxes, leaving the text and the icons as they are. */\n  compact?: boolean\n  /** Makes every box unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the code without letting it be changed. The boxes keep their focus and the code\n   * can still be selected and copied, which is what separates it from `disabled`.\n   */\n  readonly?: boolean\n  /** Marks the code as wrong, which colours the boxes and tells assistive technology so. */\n  invalid?: boolean\n  /**\n   * What screen readers announce for the row as a whole. It falls back to the design\n   * system dictionary.\n   *\n   * Unlike the `label` of VInput and the other text fields, NOTHING is rendered from it:\n   * a row of boxes carries its own instructions above it, written by the page. Use `hint`\n   * for a line the reader can see.\n   */\n  label?: string\n  /**\n   * A line of help under the boxes — where the code was sent, how long it lasts. It is\n   * tied to the row for assistive technology, so it is read out along with the label.\n   */\n  hint?: string\n}\n\nconst props = withDefaults(defineProps<InputOTPProps>(), {\n  length: 6,\n  format: 'numeric',\n  pattern: undefined,\n  separatorIcon: undefined,\n  size: 'md',\n  compact: false,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  label: undefined,\n  hint: undefined,\n})\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.inputOTP.label)\n\n// @a11y\n/*\n * The root IS the group, so the consumer's attributes belong on it — but they are bound\n * BEFORE the two the component decides itself. `aria-describedby` is a list, and the hint\n * is appended to whatever the consumer already pointed at instead of replacing it; left\n * to the fallthrough, their value would land last and take the hint out of the\n * announcement with nothing to show for it.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\n// No `useFieldIds` here: the row is named by `aria-label` and renders no `<label>`, so the\n// field id that composable generates would have nothing to point it at.\nconst hintId = useId()\nconst describedBy = computed(() =>\n  joinIds(attrs['aria-describedby'] as string | undefined, !!props.hint && hintId),\n)\n\n/**\n * The code as one string, without the separators: a `GT-###` template still yields three\n * characters. It is empty to begin with, and shorter than the full length while it is being\n * typed.\n */\nconst model = defineModel<string>({ default: '' })\n\nconst emit = defineEmits<{\n  /** Emitted the moment every box is filled, carrying the complete code. */\n  complete: [code: string]\n}>()\n\ntype Cell = { type: 'slot'; slotIndex: number } | { type: 'literal'; char: string }\n\nconst cells = computed<Cell[]>(() => {\n  if (props.pattern?.includes('#')) {\n    let slotIndex = 0\n    return [...props.pattern].map((char): Cell =>\n      char === '#' ? { type: 'slot', slotIndex: slotIndex++ } : { type: 'literal', char },\n    )\n  }\n  return Array.from({ length: props.length }, (_, i) => ({ type: 'slot', slotIndex: i }))\n})\nconst slotCount = computed(() => cells.value.filter((cell) => cell.type === 'slot').length)\n\n// @devwarn\nif (isDev) {\n  if (props.pattern && !props.pattern.includes('#'))\n    console.warn(\"[VInputOTP] pattern without '#' — falling back to `length`.\")\n}\n\nconst filters: Record<NonNullable<InputOTPProps['format']>, RegExp> = {\n  numeric: /[^0-9]/g,\n  alpha: /[^A-Z]/g,\n  alphanumeric: /[^A-Z0-9]/g,\n}\n\n/**\n * Keeps only what the format allows. Outside a numeric code the text is put in\n * capitals first, so that the value has a single canonical form whichever case the\n * reader typed or pasted.\n */\nfunction sanitize(text: string) {\n  const upper = props.format === 'numeric' ? text : text.toUpperCase()\n  return upper.replace(filters[props.format], '')\n}\n\nconst inputs = ref<(HTMLInputElement | null)[]>([])\nconst rootEl = ref<HTMLElement | null>(null)\nconst digits = ref<string[]>([])\n\nfunction syncFromModel(value: string) {\n  // A value longer than the row is simply shown cut short, and the model is NOT\n  // rewritten to match: writing back here would feed the watcher below and the two\n  // would keep correcting each other.\n  digits.value = Array.from({ length: slotCount.value }, (_, i) => value[i] ?? '')\n}\nsyncFromModel(model.value)\nwatch([model, slotCount], ([value, count]) => {\n  if (value !== digits.value.join('') || digits.value.length !== count) syncFromModel(value)\n})\n\n/*\n * TRAP — the list of boxes is trimmed AFTER the render, never before it. A box that\n * disappears calls its function ref with `null` while it is being unmounted, at its OLD\n * position: trimmed in a `pre` watcher, that late assignment would stretch the array back\n * out, and a pattern that shortened would keep its departed boxes as trailing entries.\n */\nwatch(\n  slotCount,\n  (count) => {\n    inputs.value.length = count\n  },\n  { flush: 'post' },\n)\n\nfunction commit() {\n  const code = digits.value.join('')\n  model.value = code\n  if (code.length === slotCount.value) emit('complete', code)\n}\n\n// @core\n/**\n * Spreads a run of characters across the boxes, starting from the one that received\n * them. It walks the row: a separator swallows the incoming character when the two\n * match, which is what lets a code pasted in its formatted shape line up, and a box\n * takes the next character the format accepts.\n *\n * It returns the last box it filled, so the caller knows where to put the focus, and\n * `null` when nothing in the text was usable.\n */\nfunction distribute(raw: string, startSlot: number): number | null {\n  const allCells = cells.value\n  let start = allCells.findIndex((cell) => cell.type === 'slot' && cell.slotIndex === startSlot)\n  // Step back over the separators immediately before that box: pasting the whole\n  // string onto the first box means pasting its prefix too, and \"GT-\" has to be\n  // matched rather than treated as characters of the code.\n  while (start > 0 && allCells[start - 1]?.type === 'literal') start--\n  const chars = [...raw]\n  let charIndex = 0\n  let lastFilled: number | null = null\n  for (const cell of allCells.slice(start)) {\n    if (charIndex >= chars.length) break\n    if (cell.type === 'literal') {\n      if (chars[charIndex]?.toUpperCase() === cell.char.toUpperCase()) charIndex++\n      continue\n    }\n    let char = ''\n    while (charIndex < chars.length && !char) {\n      char = sanitize(chars[charIndex] ?? '')\n      charIndex++\n    }\n    if (!char) break\n    digits.value[cell.slotIndex] = char\n    lastFilled = cell.slotIndex\n  }\n  return lastFilled\n}\n\n// @keyboard @core — moving the focus forward on its own is what turns a row of\n// separate inputs into something that types like one field; spreading the characters\n// is the core behaviour underneath it.\nfunction onInput(slotIndex: number, event: Event) {\n  const el = event.target as HTMLInputElement\n  // The same path serves a single keystroke and a pasted code: both are spread from\n  // this box onwards.\n  const lastFilled = distribute(el.value, slotIndex)\n  if (lastFilled === null) {\n    // Either the box was emptied, or nothing typed was valid for this format.\n    digits.value[slotIndex] = ''\n    el.value = ''\n    commit()\n    return\n  }\n  el.value = digits.value[slotIndex] ?? ''\n  inputs.value[Math.min(lastFilled + 1, slotCount.value - 1)]?.focus()\n  commit()\n}\n\n// @keyboard\nfunction onKeydown(slotIndex: number, event: KeyboardEvent) {\n  if (event.key === 'Backspace' && !digits.value[slotIndex] && slotIndex > 0) {\n    event.preventDefault()\n    digits.value[slotIndex - 1] = ''\n    commit()\n    inputs.value[slotIndex - 1]?.focus()\n  } else if (event.key === 'ArrowLeft' && slotIndex > 0) {\n    event.preventDefault()\n    inputs.value[slotIndex - 1]?.focus()\n  } else if (event.key === 'ArrowRight' && slotIndex < slotCount.value - 1) {\n    event.preventDefault()\n    inputs.value[slotIndex + 1]?.focus()\n  }\n}\n/*\n * The same trio every other field of the size scale exposes. `focus` goes to the FIRST\n * EMPTY box rather than to the first box outright, which is where a reader resuming a\n * half-entered code expects to land.\n */\ndefineExpose({\n  /** Moves the focus to the first empty box, or to the last one when the code is complete. */\n  focus: (options?: FocusOptions) => {\n    const empty = digits.value.findIndex((d) => !d)\n    const target = empty === -1 ? slotCount.value - 1 : empty\n    inputs.value[target]?.focus(options)\n  },\n  /** Selects the box the focus is on, as clicking into one already does. */\n  select: () => {\n    const active = inputs.value.find((el) => el === document.activeElement)\n    ;(active ?? inputs.value[0])?.select()\n  },\n  /** The row itself, for what neither of the two above covers. */\n  el: rootEl,\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    v-bind=\"attrs\"\n    class=\"v-input-otp v-control\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :aria-describedby=\"describedBy\"\n    :data-invalid=\"invalid ? '' : undefined\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <div class=\"v-input-otp-boxes\">\n      <template v-for=\"(cell, i) in cells\" :key=\"i\">\n        <input\n          v-if=\"cell.type === 'slot'\"\n          :ref=\"\n            (el) => {\n              inputs[cell.slotIndex] = el as HTMLInputElement | null\n            }\n          \"\n          type=\"text\"\n          class=\"v-input-otp-input\"\n          :inputmode=\"format === 'numeric' ? 'numeric' : 'text'\"\n          :autocomplete=\"cell.slotIndex === 0 ? 'one-time-code' : 'off'\"\n          :value=\"digits[cell.slotIndex]\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly || undefined\"\n          :aria-label=\"m.inputOTP.slot(cell.slotIndex + 1, slotCount)\"\n          :aria-invalid=\"invalid || undefined\"\n          @input=\"onInput(cell.slotIndex, $event)\"\n          @keydown=\"onKeydown(cell.slotIndex, $event)\"\n          @focus=\"($event.target as HTMLInputElement).select()\"\n        />\n        <!-- A separator from the pattern: shown, never focusable, and never part of the\n             value. It is hidden from screen readers, each box already announcing its\n             own position in the code. -->\n        <span v-else class=\"v-input-otp-literal\" aria-hidden=\"true\">\n          <VIcon v-if=\"separatorIcon\" v-bind=\"iconProps(separatorIcon)\" />\n          <template v-else>{{ cell.char }}</template>\n        </span>\n      </template>\n    </div>\n\n    <VTypography v-if=\"hint\" :id=\"hintId\" variant=\"caption\" tone=\"muted\" class=\"v-input-otp-hint\">\n      {{ hint }}\n    </VTypography>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-input-otp {\n    /*\n     * The heights and the icon context come from the shared v-control class\n     * (styles/control-size.css). The type is the one thing kept local, and set one or\n     * two steps above the other fields: a single character has a whole square to\n     * itself, and at the usual field size it would look lost in it.\n     */\n    --input-otp-font-size: var(--vectis-font-size-lg);\n\n    /* A column, so the hint sits under the boxes rather than beside them; the row itself\n       is the box below. `inline-flex` keeps the component's own width, and the start\n       alignment stops the hint from stretching the row to its own length. */\n    display: inline-flex;\n    flex-direction: column;\n    align-items: start;\n    gap: var(--vectis-space-1);\n  }\n\n  .v-input-otp-boxes {\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n  }\n\n  .v-input-otp-input {\n    /* The boxes are square: reading the same variable for both dimensions is what\n       makes the size and the density scale them together. */\n    width: var(--control-height);\n    height: var(--control-height);\n    text-align: center;\n    background: var(--vectis-color-surface);\n    color: var(--vectis-color-text);\n    border: 1px solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-interactive);\n    font-family: var(--vectis-text-family-code);\n    font-size: var(--input-otp-font-size);\n    transition: border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* The focused box appears to have a two-pixel border, exactly as in VInput and\n     VTextarea: its own 1px border plus a 1px shadow of the same colour just outside\n     it. The transparent outline is the safety net for Windows forced colours, which\n     drop box-shadows entirely. */\n  .v-input-otp-input:focus-visible {\n    border-color: var(--vectis-color-accent);\n    box-shadow: 0 0 0 1px var(--vectis-color-accent);\n    outline: var(--vectis-focus-ring-width) solid transparent;\n  }\n\n  /* A read-only row takes the sunken background of a read-only VInput, and the state is\n     read from [data-readonly] rather than from `:read-only`, which the browser also matches\n     on a disabled box. It is declared BEFORE the invalid and disabled blocks, all three\n     weighing (0,2,0), so those still win over it. */\n  .v-input-otp[data-readonly] .v-input-otp-input {\n    background: var(--vectis-color-surface-sunken);\n  }\n\n  .v-input-otp[data-invalid] .v-input-otp-input {\n    border-color: var(--vectis-color-danger);\n  }\n\n  .v-input-otp[data-invalid] .v-input-otp-input:focus-visible {\n    box-shadow: 0 0 0 1px var(--vectis-color-danger);\n  }\n\n  .v-input-otp-literal {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--vectis-color-text-muted);\n    font-family: var(--vectis-text-family-code);\n    font-size: var(--input-otp-font-size);\n    user-select: none;\n  }\n\n  /* A disabled row greys out through the colour tokens and never through opacity, the\n     same treatment as VInput. */\n  .v-input-otp[data-disabled] .v-input-otp-input {\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-subtle);\n    border-color: var(--vectis-color-border);\n    cursor: not-allowed;\n  }\n\n  .v-input-otp[data-disabled] .v-input-otp-literal,\n  .v-input-otp[data-disabled] .v-input-otp-hint {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* Of the whole size scale, only the raised type is restated here; the dimensions\n     themselves come from v-control. */\n  .v-input-otp[data-size='sm'] {\n    --input-otp-font-size: var(--vectis-font-size-md);\n  }\n\n  .v-input-otp[data-size='lg'] {\n    --input-otp-font-size: var(--vectis-font-size-xl);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-input-otp-input {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}