vectis-ui 0.12.0 → 0.14.0

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\">\n// @keyboard @core\n/**\n * Coordinate character inputs because HTML has no segmented code field. JavaScript filters\n * values, distributes paste and moves focus; pattern literals stay outside the model.\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 separator\n   * shown between the boxes without ever being part of the value, as in `'GT-###'` or\n   * `'###.###.###'`.\n   */\n  pattern?: string\n  /** An icon drawn in place of every separator of the pattern. */\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 can\n   * still be selected and copied, which 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 system\n   * dictionary.\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 * `aria-describedby` is a list, and the hint is appended to whatever the consumer already\n * pointed at instead of replacing it; left to the fallthrough, their value would land last and\n * take the hint out of the announcement with nothing to show for it.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\n\n// What the FORM reads goes on the hidden native input, and everything else on the group:\n// on the group a `name` submits nothing and `required` validates nothing, silently.\nconst NATIVE_ONLY = ['name', 'form', 'required']\nconst groupAttrs = computed(() =>\n  Object.fromEntries(Object.entries(attrs).filter(([key]) => !NATIVE_ONLY.includes(key))),\n)\nconst nativeAttrs = computed(() =>\n  Object.fromEntries(Object.entries(attrs).filter(([key]) => NATIVE_ONLY.includes(key))),\n)\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  /**\n   * Emitted the moment the code BECOMES complete, carrying it. Retyping a character of a\n   * complete code with the same one does not emit it again.\n   */\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 rootEl = ref<HTMLElement | null>(null)\nconst digits = ref<string[]>([])\n\n// @keyboard\n// Read the rendered order on demand; changing a pattern can move or replace its input cells.\nfunction inputAt(slot: number) {\n  return rootEl.value?.querySelectorAll<HTMLInputElement>('.v-input-otp-input')[slot]\n}\n\nfunction syncFromModel(value: string) {\n  // A value longer than the row is simply shown cut short, and one holding characters the\n  // format refuses is shown filtered; but the model is not rewritten to match: writing back\n  // here would feed the watcher below and the two would keep correcting each other.\n  const clean = sanitize(value)\n  digits.value = Array.from({ length: slotCount.value }, (_, i) => clean[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/** The first empty box, or -1 once the code is complete. Every box before it is filled. */\nconst firstEmpty = () => digits.value.findIndex((d) => !d)\n\n/** Takes a character out and moves the following ones back, so no gap is left behind. */\nfunction removeAt(slot: number) {\n  digits.value.splice(slot, 1)\n  digits.value.push('')\n}\n\nfunction focusBox(slot: number) {\n  const el = inputAt(slot)\n  el?.focus()\n  // Selected, so the next keystroke REPLACES the character: a box that already has the\n  // focus receives no focus event to select it.\n  el?.select()\n}\n\nfunction commit() {\n  const code = digits.value.join('')\n  const previous = model.value\n  model.value = code\n  // Only when the code CHANGES into a full one: retyping a character of a complete code\n  // must not submit it a second time for a consumer listening to `complete`.\n  if (code.length === slotCount.value && code !== previous) emit('complete', code)\n}\n\n// @core\n/**\n * Spreads a run of characters across the boxes, starting from the one that received them. It\n * returns the last box it filled, so the caller knows where to put the focus, and `null` when\n * 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  const chars = [...raw]\n  // Never for ONE character: a `G` typed into the first box of `GT-###` is the code's first\n  // character, not the separator, and swallowing it would make such a code impossible to type.\n  if (chars.length > 1) while (start > 0 && allCells[start - 1]?.type === 'literal') start--\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\n// Separate inputs into something that types like one field; spreading the characters is the\n// core behaviour underneath it.\nfunction onInput(slotIndex: number, event: Event) {\n  const el = event.target as HTMLInputElement\n  const empty = firstEmpty()\n  const filled = empty === -1 || slotIndex < empty\n\n  // A filled box whose character was not selected receives the new one NEXT to it. What\n  // was inserted is what lies just before the caret, and it is what counts.\n  const previous = digits.value[slotIndex] ?? ''\n  let raw = el.value\n  const inserted = raw.length - previous.length\n  if (previous && inserted > 0 && el.selectionStart !== null) {\n    raw = raw.slice(Math.max(0, el.selectionStart - inserted), el.selectionStart)\n  }\n\n  // The same path serves a single keystroke and a pasted code: both are spread from this box\n  // onwards; or from the first empty box, when this one lies past it.\n  const lastFilled = distribute(raw, filled ? slotIndex : empty)\n  if (lastFilled === null) {\n    // Either the box was emptied, or nothing typed was valid for this format. A filled box\n    // loses its character and the ones after it close the gap.\n    if (filled) removeAt(slotIndex)\n    el.value = digits.value[slotIndex] ?? ''\n    commit()\n    return\n  }\n  // Written by hand: when the characters went to another box, this one's value is still\n  // '' in the render, and the patch would leave the typed character on screen.\n  el.value = digits.value[slotIndex] ?? ''\n  focusBox(Math.min(lastFilled + 1, slotCount.value - 1))\n  commit()\n}\n\n// @keyboard\n// Sends the focus there instead: a pointer landing on box 5 of a two-character code types into\n// box 3.\nfunction onFocus(slotIndex: number, event: FocusEvent) {\n  const empty = firstEmpty()\n  if (empty !== -1 && slotIndex > empty) inputAt(empty)?.focus()\n  else (event.target as HTMLInputElement).select()\n}\n\n// @keyboard\nfunction onKeydown(slotIndex: number, event: KeyboardEvent) {\n  const empty = firstEmpty()\n  // The furthest box the focus may reach: the first empty one, or the last of a full code.\n  const reachable = empty === -1 ? slotCount.value - 1 : empty\n  let target: number | null = null\n  switch (event.key) {\n    case 'Backspace':\n      // A read-only box refuses its own edits natively, but this erases ANOTHER box, which\n      // nothing native guards.\n      if (props.readonly || props.disabled || digits.value[slotIndex] || slotIndex === 0) return\n      removeAt(slotIndex - 1)\n      commit()\n      target = slotIndex - 1\n      break\n    case 'ArrowLeft':\n      if (slotIndex > 0) target = slotIndex - 1\n      break\n    case 'ArrowRight':\n      if (slotIndex < reachable) target = slotIndex + 1\n      break\n    case 'Home':\n      target = 0\n      break\n    case 'End':\n      target = reachable\n      break\n  }\n  if (target === null) return\n  event.preventDefault()\n  focusBox(target)\n}\n\n/*\n * `focus` goes to the first empty box rather than to the first box outright, which is where a\n * reader resuming a 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    inputAt(target)?.focus(options)\n  },\n  /** Selects the box the focus is on, as clicking into one already does. */\n  select: () => {\n    const active = rootEl.value?.querySelector<HTMLInputElement>('.v-input-otp-input:focus')\n    ;(active ?? inputAt(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=\"groupAttrs\"\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          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=\"onFocus(cell.slotIndex, $event)\"\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    <!--\n      Out of the tab order and hidden from assistive technology, the boxes being the control; a\n      browser focusing it to report an invalid code is sent on to the box to fill.\n    -->\n    <input\n      v-bind=\"nativeAttrs\"\n      class=\"v-input-otp-native v-visually-hidden\"\n      type=\"text\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      autocomplete=\"off\"\n      :value=\"model\"\n      :pattern=\"`.{${slotCount}}`\"\n      :disabled=\"disabled\"\n      :readonly=\"readonly || undefined\"\n      @focus=\"focusBox(firstEmpty() === -1 ? 0 : firstEmpty())\"\n    />\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  /* A code reads left to right in every language, like the HH:MM of VTimeInput: mirrored\n     under `dir=\"rtl\"`, the arrows would walk against the boxes and a `GT-###` pattern would\n     be drawn backwards. */\n  .v-input-otp-boxes {\n    direction: ltr;\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:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default),\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /*\n   * The states follow VInput's, in VInput's order: read-only, hover, focus, invalid, disabled.\n   * Read-only, focus, invalid and disabled all weigh (0,2,0), so the source order arbitrates\n   * between them and read-only has to come first, or it would repaint the focus and error\n   * borders grey.\n   */\n  .v-input-otp[data-readonly] .v-input-otp-input {\n    background: var(--vectis-color-surface-sunken);\n    border-color: var(--vectis-color-border);\n  }\n\n  /* The hover weighs (0,5,0) and keeps itself off a focused, invalid or disabled box\n     through its own `:not()`, as VInput's does. */\n  .v-input-otp:not([data-invalid]) .v-input-otp-input:hover:not(:focus, :disabled) {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  /*\n   * `:focus` rather than `:focus-visible`, like any text field, which shows its focus when\n   * clicked into too. The transparent outline is the safety net for Windows forced colours,\n   * which drop box-shadows entirely.\n   */\n  .v-input-otp-input:focus {\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-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 {\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  /*\n   * A disabled row greys out through the colour tokens and never through opacity, the same\n   * treatment as VInput; `text-muted` inside the box, where `text-subtle` would fall under\n   * 4.5:1 against `surface-muted`, and `text-subtle` for what sits on the page.\n   */\n  .v-input-otp[data-disabled] .v-input-otp-input {\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-muted);\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":""}
+{"version":3,"file":"VInputOTP.js","names":[],"sources":["../../../src/components/VInputOTP/VInputOTP.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @core\n/**\n * Coordinate character inputs because HTML has no segmented code field. JavaScript filters\n * values, distributes paste and moves focus; pattern literals stay outside the model.\n */\n\nimport { computed, ref, useAttrs, watch } from 'vue'\nimport VField from '../VField/VField.vue'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\nimport { partitionAttrs } from '../../utils/attrs'\nimport { isDev } from '../../utils/env'\n\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 separator\n   * shown between the boxes without ever being part of the value, as in `'GT-###'` or\n   * `'###.###.###'`.\n   */\n  pattern?: string\n  /** An icon drawn in place of every separator of the pattern. */\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 can\n   * still be selected and copied, which 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   * The label above the boxes, which names the row. Without it, the row is named by its\n   * `aria-label` or by the design system dictionary.\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   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /**\n   * Marks the code as required: an asterisk follows the label, and the hidden input a form reads\n   * is `required`.\n   */\n  required?: boolean\n  /** Hides the label visually. It still names the row for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the boxes (`top`, the default), or at their start, in a column\n   * of its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\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  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n})\n\nconst m = useMessages()\n\n// @a11y\n/*\n * `aria-describedby` is a list, and the hint is appended to whatever the consumer already\n * pointed at instead of replacing it; left to the fallthrough, their value would land last and\n * take the hint out of the announcement with nothing to show for it.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\n\n// What the FORM reads goes on the hidden native input, and everything else on the group:\n// on the group a `name` submits nothing and `required` validates nothing, silently.\nconst NATIVE_ONLY = ['name', 'form']\nconst split = computed(() => partitionAttrs(attrs, NATIVE_ONLY))\nconst groupAttrs = computed(() => split.value.rest)\nconst nativeAttrs = computed(() => split.value.picked)\n// @a11y\n// The row has no visible label to be named by when a consumer gives none or names it\n// themselves (VField's group mode): the dictionary names it then.\nfunction rowLabel(fieldProps: Record<string, unknown>): string | undefined {\n  if (fieldProps['aria-labelledby']) return undefined\n  return (fieldProps['aria-label'] as string | undefined) ?? m.value.inputOTP.label\n}\n\nconst isInvalid = computed(() => props.invalid || !!props.error)\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  /**\n   * Emitted the moment the code BECOMES complete, carrying it. Retyping a character of a\n   * complete code with the same one does not emit it again.\n   */\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<InputOTPFormat, 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 rootEl = ref<HTMLElement | null>(null)\nconst digits = ref<string[]>([])\n\n// @keyboard\n// Read the rendered order on demand; changing a pattern can move or replace its input cells.\nfunction inputAt(slot: number) {\n  return rootEl.value?.querySelectorAll<HTMLInputElement>('.v-input-otp-input')[slot]\n}\n\nfunction syncFromModel(value: string) {\n  // A value longer than the row is simply shown cut short, and one holding characters the\n  // format refuses is shown filtered; but the model is not rewritten to match: writing back\n  // here would feed the watcher below and the two would keep correcting each other.\n  const clean = sanitize(value)\n  digits.value = Array.from({ length: slotCount.value }, (_, i) => clean[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/** The first empty box, or -1 once the code is complete. Every box before it is filled. */\nconst firstEmpty = () => digits.value.findIndex((d) => !d)\n\n/** The furthest box the focus may reach: the first empty one, or the last of a full code. */\nfunction reachable() {\n  const empty = firstEmpty()\n  return empty === -1 ? slotCount.value - 1 : empty\n}\n\n/** Takes a character out and moves the following ones back, so no gap is left behind. */\nfunction removeAt(slot: number) {\n  digits.value.splice(slot, 1)\n  digits.value.push('')\n}\n\nfunction focusBox(slot: number) {\n  const el = inputAt(slot)\n  el?.focus()\n  // Selected, so the next keystroke REPLACES the character: a box that already has the\n  // focus receives no focus event to select it.\n  el?.select()\n}\n\nfunction commit() {\n  const code = digits.value.join('')\n  const previous = model.value\n  model.value = code\n  // Only when the code CHANGES into a full one: retyping a character of a complete code\n  // must not submit it a second time for a consumer listening to `complete`.\n  if (code.length === slotCount.value && code !== previous) emit('complete', code)\n}\n\n// @core\n/**\n * Spreads a run of characters across the boxes, starting from the one that received them. It\n * returns the last box it filled, so the caller knows where to put the focus, and `null` when\n * 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  const chars = [...raw]\n  // Never for ONE character: a `G` typed into the first box of `GT-###` is the code's first\n  // character, not the separator, and swallowing it would make such a code impossible to type.\n  if (chars.length > 1) while (start > 0 && allCells[start - 1]?.type === 'literal') start--\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\n// Separate inputs into something that types like one field; spreading the characters is the\n// core behaviour underneath it.\nfunction onInput(slotIndex: number, event: Event) {\n  const el = event.target as HTMLInputElement\n  const empty = firstEmpty()\n  const filled = empty === -1 || slotIndex < empty\n\n  // A filled box whose character was not selected receives the new one NEXT to it. What\n  // was inserted is what lies just before the caret, and it is what counts.\n  const previous = digits.value[slotIndex] ?? ''\n  let raw = el.value\n  const inserted = raw.length - previous.length\n  if (previous && inserted > 0 && el.selectionStart !== null) {\n    raw = raw.slice(Math.max(0, el.selectionStart - inserted), el.selectionStart)\n  }\n\n  // The same path serves a single keystroke and a pasted code: both are spread from this box\n  // onwards; or from the first empty box, when this one lies past it.\n  const lastFilled = distribute(raw, filled ? slotIndex : empty)\n  if (lastFilled === null) {\n    // Either the box was emptied, or nothing typed was valid for this format. A filled box\n    // loses its character and the ones after it close the gap.\n    if (filled) removeAt(slotIndex)\n    el.value = digits.value[slotIndex] ?? ''\n    commit()\n    return\n  }\n  // Written by hand: when the characters went to another box, this one's value is still\n  // '' in the render, and the patch would leave the typed character on screen.\n  el.value = digits.value[slotIndex] ?? ''\n  focusBox(Math.min(lastFilled + 1, slotCount.value - 1))\n  commit()\n}\n\n// @keyboard\n// Sends the focus there instead: a pointer landing on box 5 of a two-character code types into\n// box 3.\nfunction onFocus(slotIndex: number, event: FocusEvent) {\n  const empty = firstEmpty()\n  if (empty !== -1 && slotIndex > empty) inputAt(empty)?.focus()\n  else (event.target as HTMLInputElement).select()\n}\n\n// @keyboard\nfunction onKeydown(slotIndex: number, event: KeyboardEvent) {\n  const last = reachable()\n  let target: number | null = null\n  switch (event.key) {\n    case 'Backspace':\n      // A read-only box refuses its own edits natively, but this erases ANOTHER box, which\n      // nothing native guards.\n      if (props.readonly || props.disabled || digits.value[slotIndex] || slotIndex === 0) return\n      removeAt(slotIndex - 1)\n      commit()\n      target = slotIndex - 1\n      break\n    case 'ArrowLeft':\n      if (slotIndex > 0) target = slotIndex - 1\n      break\n    case 'ArrowRight':\n      if (slotIndex < last) target = slotIndex + 1\n      break\n    case 'Home':\n      target = 0\n      break\n    case 'End':\n      target = last\n      break\n  }\n  if (target === null) return\n  event.preventDefault()\n  focusBox(target)\n}\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) => inputAt(reachable())?.focus(options),\n  /** Selects the box the focus is on, as clicking into one already does. */\n  select: () => {\n    const active = rootEl.value?.querySelector<HTMLInputElement>('.v-input-otp-input:focus')\n    ;(active ?? inputAt(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  <VField\n    v-bind=\"groupAttrs\"\n    class=\"v-input-otp\"\n    :label=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :disabled=\"disabled\"\n    :hide-label=\"hideLabel\"\n    :label-position=\"labelPosition\"\n    group\n  >\n    <template #default=\"{ fieldProps }\">\n      <div\n        ref=\"rootEl\"\n        v-bind=\"fieldProps\"\n        class=\"v-input-otp-group v-control\"\n        role=\"group\"\n        :aria-label=\"rowLabel(fieldProps)\"\n        :data-invalid=\"isInvalid ? '' : 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              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=\"isInvalid || undefined\"\n              @input=\"onInput(cell.slotIndex, $event)\"\n              @keydown=\"onKeydown(cell.slotIndex, $event)\"\n              @focus=\"onFocus(cell.slotIndex, $event)\"\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        <!--\n      Out of the tab order and hidden from assistive technology, the boxes being the control; a\n      browser focusing it to report an invalid code is sent on to the box to fill.\n    -->\n        <input\n          v-bind=\"nativeAttrs\"\n          class=\"v-input-otp-native v-visually-hidden\"\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          autocomplete=\"off\"\n          :value=\"model\"\n          :pattern=\"`.{${slotCount}}`\"\n          :required=\"required || undefined\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly || undefined\"\n          @focus=\"focusBox(reachable())\"\n        />\n      </div>\n    </template>\n  </VField>\n</template>\n\n<style>\n@layer vectis.components {\n  /* Its own width rather than the line's, so that a start label stays next to the boxes. */\n  .v-input-otp.v-field {\n    display: inline-flex;\n    align-items: start;\n  }\n\n  .v-input-otp-group {\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\n  /* A code reads left to right in every language, like the HH:MM of VTimeInput: mirrored\n     under `dir=\"rtl\"`, the arrows would walk against the boxes and a `GT-###` pattern would\n     be drawn backwards. */\n  .v-input-otp-boxes {\n    direction: ltr;\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:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default),\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /*\n   * The states follow VInput's, in VInput's order: read-only, hover, focus, invalid, disabled.\n   * Read-only, focus, invalid and disabled all weigh (0,2,0), so the source order arbitrates\n   * between them and read-only has to come first, or it would repaint the focus and error\n   * borders grey.\n   */\n  .v-input-otp-group[data-readonly] .v-input-otp-input {\n    background: var(--vectis-color-surface-sunken);\n    border-color: var(--vectis-color-border);\n  }\n\n  /* The hover weighs (0,5,0) and keeps itself off a focused, invalid or disabled box\n     through its own `:not()`, as VInput's does. */\n  .v-input-otp-group:not([data-invalid]) .v-input-otp-input:hover:not(:focus, :disabled) {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  /*\n   * `:focus` rather than `:focus-visible`, like any text field, which shows its focus when\n   * clicked into too. The transparent outline is the safety net for Windows forced colours,\n   * which drop box-shadows entirely.\n   */\n  .v-input-otp-input:focus {\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-input-otp-group[data-invalid] .v-input-otp-input {\n    border-color: var(--vectis-color-danger);\n  }\n\n  .v-input-otp-group[data-invalid] .v-input-otp-input:focus {\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  /*\n   * A disabled row greys out through the colour tokens and never through opacity, the same\n   * treatment as VInput; `text-muted` inside the box, where `text-subtle` would fall under\n   * 4.5:1 against `surface-muted`, and `text-subtle` for what sits on the page.\n   */\n  .v-input-otp-group[data-disabled] .v-input-otp-input {\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-muted);\n    border-color: var(--vectis-color-border);\n    cursor: not-allowed;\n  }\n\n  .v-input-otp-group[data-disabled] .v-input-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-input-otp-group[data-size='sm'] {\n    --input-otp-font-size: var(--vectis-font-size-md);\n  }\n\n  .v-input-otp-group[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

@@ -2,20 +2,18 @@ import { isDev as e } from "../../utils/env.js";
 import { useMessages as t } from "../../i18n/state.js";
 import { iconProps as n } from "../VIcon/iconProps.js";
 import r from "../VIcon/VIcon.js";
-import i from "../VTypography/VTypography.js";
-import { useAriaLabel as a } from "../../composables/useAriaLabel.js";
-import { joinIds as o } from "../../utils/ids.js";
-import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, defineComponent as m, mergeModels as h, mergeProps as g, openBlock as _, ref as v, renderList as y, toDisplayString as b, unref as x, useAttrs as S, useId as C, useModel as w, watch as T, withCtx as ee } from "vue";
+import i from "../VField/VField.js";
+import { partitionAttrs as a } from "../../utils/attrs.js";
+import { Fragment as o, computed as s, createBlock as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, defineComponent as f, mergeModels as p, mergeProps as m, openBlock as h, ref as g, renderList as _, toDisplayString as v, unref as y, useAttrs as b, useModel as x, watch as S, withCtx as C } from "vue";
 //#region src/components/VInputOTP/VInputOTP.vue?vue&type=script&setup=true&lang.ts
-var te = [
+var w = [
 	"aria-label",
-	"aria-describedby",
 	"data-invalid",
 	"data-size",
 	"data-compact",
 	"data-disabled",
 	"data-readonly"
-], E = { class: "v-input-otp-boxes" }, D = [
+], T = { class: "v-input-otp-boxes" }, E = [
 	"inputmode",
 	"autocomplete",
 	"value",
@@ -26,19 +24,20 @@ var te = [
 	"onInput",
 	"onKeydown",
 	"onFocus"
-], O = {
+], D = {
 	key: 1,
 	class: "v-input-otp-literal",
 	"aria-hidden": "true"
-}, k = [
+}, O = [
 	"value",
 	"pattern",
+	"required",
 	"disabled",
 	"readonly"
-], A = /*@__PURE__*/ m({
+], k = /*@__PURE__*/ f({
 	inheritAttrs: !1,
 	__name: "VInputOTP",
-	props: /*@__PURE__*/ h({
+	props: /*@__PURE__*/ p({
 		length: { default: 6 },
 		format: { default: "numeric" },
 		pattern: { default: void 0 },
@@ -61,21 +60,31 @@ var te = [
 			default: !1
 		},
 		label: { default: void 0 },
-		hint: { default: void 0 }
+		hint: { default: void 0 },
+		error: { default: void 0 },
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		hideLabel: {
+			type: Boolean,
+			default: !1
+		},
+		labelPosition: { default: "top" }
 	}, {
 		modelValue: { default: "" },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ h(["complete"], ["update:modelValue"]),
-	setup(m, { expose: h, emit: A }) {
-		let j = m, M = t(), N = a(() => j.label ?? M.value.inputOTP.label), P = S(), F = [
-			"name",
-			"form",
-			"required"
-		], I = c(() => Object.fromEntries(Object.entries(P).filter(([e]) => !F.includes(e)))), L = c(() => Object.fromEntries(Object.entries(P).filter(([e]) => F.includes(e)))), R = C(), z = c(() => o(P["aria-describedby"], !!j.hint && R)), B = w(m, "modelValue"), V = A, H = c(() => {
-			if (j.pattern?.includes("#")) {
+	emits: /*@__PURE__*/ p(["complete"], ["update:modelValue"]),
+	setup(f, { expose: p, emit: k }) {
+		let A = f, j = t(), M = b(), N = ["name", "form"], P = s(() => a(M, N)), F = s(() => P.value.rest), I = s(() => P.value.picked);
+		function L(e) {
+			if (!e["aria-labelledby"]) return e["aria-label"] ?? j.value.inputOTP.label;
+		}
+		let R = s(() => A.invalid || !!A.error), z = x(f, "modelValue"), B = k, V = s(() => {
+			if (A.pattern?.includes("#")) {
 				let e = 0;
-				return [...j.pattern].map((t) => t === "#" ? {
+				return [...A.pattern].map((t) => t === "#" ? {
 					type: "slot",
 					slotIndex: e++
 				} : {
@@ -83,45 +92,49 @@ var te = [
 					char: t
 				});
 			}
-			return Array.from({ length: j.length }, (e, t) => ({
+			return Array.from({ length: A.length }, (e, t) => ({
 				type: "slot",
 				slotIndex: t
 			}));
-		}), U = c(() => H.value.filter((e) => e.type === "slot").length);
-		e && j.pattern && !j.pattern.includes("#") && console.warn("[VInputOTP] pattern without '#' — falling back to `length`.");
-		let W = {
+		}), H = s(() => V.value.filter((e) => e.type === "slot").length);
+		e && A.pattern && !A.pattern.includes("#") && console.warn("[VInputOTP] pattern without '#' — falling back to `length`.");
+		let U = {
 			numeric: /[^0-9]/g,
 			alpha: /[^A-Z]/g,
 			alphanumeric: /[^A-Z0-9]/g
 		};
-		function G(e) {
-			return (j.format === "numeric" ? e : e.toUpperCase()).replace(W[j.format], "");
+		function W(e) {
+			return (A.format === "numeric" ? e : e.toUpperCase()).replace(U[A.format], "");
 		}
-		let K = v(null), q = v([]);
-		function J(e) {
-			return K.value?.querySelectorAll(".v-input-otp-input")[e];
+		let G = g(null), K = g([]);
+		function q(e) {
+			return G.value?.querySelectorAll(".v-input-otp-input")[e];
 		}
-		function Y(e) {
-			let t = G(e);
-			q.value = Array.from({ length: U.value }, (e, n) => t[n] ?? "");
+		function J(e) {
+			let t = W(e);
+			K.value = Array.from({ length: H.value }, (e, n) => t[n] ?? "");
 		}
-		Y(B.value), T([B, U], ([e, t]) => {
-			(e !== q.value.join("") || q.value.length !== t) && Y(e);
+		J(z.value), S([z, H], ([e, t]) => {
+			(e !== K.value.join("") || K.value.length !== t) && J(e);
 		});
-		let X = () => q.value.findIndex((e) => !e);
+		let Y = () => K.value.findIndex((e) => !e);
+		function X() {
+			let e = Y();
+			return e === -1 ? H.value - 1 : e;
+		}
 		function Z(e) {
-			q.value.splice(e, 1), q.value.push("");
+			K.value.splice(e, 1), K.value.push("");
 		}
 		function Q(e) {
-			let t = J(e);
+			let t = q(e);
 			t?.focus(), t?.select();
 		}
 		function $() {
-			let e = q.value.join(""), t = B.value;
-			B.value = e, e.length === U.value && e !== t && V("complete", e);
+			let e = K.value.join(""), t = z.value;
+			z.value = e, e.length === H.value && e !== t && B("complete", e);
 		}
-		function ne(e, t) {
-			let n = H.value, r = n.findIndex((e) => e.type === "slot" && e.slotIndex === t), i = [...e];
+		function ee(e, t) {
+			let n = V.value, r = n.findIndex((e) => e.type === "slot" && e.slotIndex === t), i = [...e];
 			if (i.length > 1) for (; r > 0 && n[r - 1]?.type === "literal";) r--;
 			let a = 0, o = null;
 			for (let e of n.slice(r)) {
@@ -131,115 +144,120 @@ var te = [
 					continue;
 				}
 				let t = "";
-				for (; a < i.length && !t;) t = G(i[a] ?? ""), a++;
+				for (; a < i.length && !t;) t = W(i[a] ?? ""), a++;
 				if (!t) break;
-				q.value[e.slotIndex] = t, o = e.slotIndex;
+				K.value[e.slotIndex] = t, o = e.slotIndex;
 			}
 			return o;
 		}
-		function re(e, t) {
-			let n = t.target, r = X(), i = r === -1 || e < r, a = q.value[e] ?? "", o = n.value, s = o.length - a.length;
+		function te(e, t) {
+			let n = t.target, r = Y(), i = r === -1 || e < r, a = K.value[e] ?? "", o = n.value, s = o.length - a.length;
 			a && s > 0 && n.selectionStart !== null && (o = o.slice(Math.max(0, n.selectionStart - s), n.selectionStart));
-			let c = ne(o, i ? e : r);
+			let c = ee(o, i ? e : r);
 			if (c === null) {
-				i && Z(e), n.value = q.value[e] ?? "", $();
+				i && Z(e), n.value = K.value[e] ?? "", $();
 				return;
 			}
-			n.value = q.value[e] ?? "", Q(Math.min(c + 1, U.value - 1)), $();
+			n.value = K.value[e] ?? "", Q(Math.min(c + 1, H.value - 1)), $();
 		}
-		function ie(e, t) {
-			let n = X();
-			n !== -1 && e > n ? J(n)?.focus() : t.target.select();
+		function ne(e, t) {
+			let n = Y();
+			n !== -1 && e > n ? q(n)?.focus() : t.target.select();
 		}
-		function ae(e, t) {
-			let n = X(), r = n === -1 ? U.value - 1 : n, i = null;
+		function re(e, t) {
+			let n = X(), r = null;
 			switch (t.key) {
 				case "Backspace":
-					if (j.readonly || j.disabled || q.value[e] || e === 0) return;
-					Z(e - 1), $(), i = e - 1;
+					if (A.readonly || A.disabled || K.value[e] || e === 0) return;
+					Z(e - 1), $(), r = e - 1;
 					break;
 				case "ArrowLeft":
-					e > 0 && (i = e - 1);
+					e > 0 && (r = e - 1);
 					break;
 				case "ArrowRight":
-					e < r && (i = e + 1);
+					e < n && (r = e + 1);
 					break;
 				case "Home":
-					i = 0;
+					r = 0;
 					break;
 				case "End":
-					i = r;
+					r = n;
 					break;
 			}
-			i !== null && (t.preventDefault(), Q(i));
+			r !== null && (t.preventDefault(), Q(r));
 		}
-		return h({
-			focus: (e) => {
-				let t = q.value.findIndex((e) => !e);
-				J(t === -1 ? U.value - 1 : t)?.focus(e);
-			},
+		return p({
+			focus: (e) => q(X())?.focus(e),
 			select: () => {
-				(K.value?.querySelector(".v-input-otp-input:focus") ?? J(0))?.select();
+				(G.value?.querySelector(".v-input-otp-input:focus") ?? q(0))?.select();
 			},
-			el: K
-		}), (e, t) => (_(), d("div", g({
-			ref_key: "rootEl",
-			ref: K
-		}, I.value, {
-			class: "v-input-otp v-control",
-			role: "group",
-			"aria-label": x(N),
-			"aria-describedby": z.value,
-			"data-invalid": m.invalid ? "" : void 0,
-			"data-size": m.size,
-			"data-compact": m.compact ? "" : void 0,
-			"data-disabled": m.disabled ? "" : void 0,
-			"data-readonly": m.readonly ? "" : void 0
-		}), [
-			f("div", E, [(_(!0), d(s, null, y(H.value, (e, t) => (_(), d(s, { key: t }, [e.type === "slot" ? (_(), d("input", {
+			el: G
+		}), (e, t) => (h(), c(i, m(F.value, {
+			class: "v-input-otp",
+			label: f.label,
+			hint: f.hint,
+			error: f.error,
+			required: f.required,
+			disabled: f.disabled,
+			"hide-label": f.hideLabel,
+			"label-position": f.labelPosition,
+			group: ""
+		}), {
+			default: C(({ fieldProps: e }) => [u("div", m({
+				ref_key: "rootEl",
+				ref: G
+			}, e, {
+				class: "v-input-otp-group v-control",
+				role: "group",
+				"aria-label": L(e),
+				"data-invalid": R.value ? "" : void 0,
+				"data-size": f.size,
+				"data-compact": f.compact ? "" : void 0,
+				"data-disabled": f.disabled ? "" : void 0,
+				"data-readonly": f.readonly ? "" : void 0
+			}), [u("div", T, [(h(!0), l(o, null, _(V.value, (e, t) => (h(), l(o, { key: t }, [e.type === "slot" ? (h(), l("input", {
 				key: 0,
 				type: "text",
 				class: "v-input-otp-input",
-				inputmode: m.format === "numeric" ? "numeric" : "text",
+				inputmode: f.format === "numeric" ? "numeric" : "text",
 				autocomplete: e.slotIndex === 0 ? "one-time-code" : "off",
-				value: q.value[e.slotIndex],
-				disabled: m.disabled,
-				readonly: m.readonly || void 0,
-				"aria-label": x(M).inputOTP.slot(e.slotIndex + 1, U.value),
-				"aria-invalid": m.invalid || void 0,
-				onInput: (t) => re(e.slotIndex, t),
-				onKeydown: (t) => ae(e.slotIndex, t),
-				onFocus: (t) => ie(e.slotIndex, t)
-			}, null, 40, D)) : (_(), d("span", O, [m.separatorIcon ? (_(), l(r, g({
+				value: K.value[e.slotIndex],
+				disabled: f.disabled,
+				readonly: f.readonly || void 0,
+				"aria-label": y(j).inputOTP.slot(e.slotIndex + 1, H.value),
+				"aria-invalid": R.value || void 0,
+				onInput: (t) => te(e.slotIndex, t),
+				onKeydown: (t) => re(e.slotIndex, t),
+				onFocus: (t) => ne(e.slotIndex, t)
+			}, null, 40, E)) : (h(), l("span", D, [f.separatorIcon ? (h(), c(r, m({
 				key: 0,
 				ref_for: !0
-			}, x(n)(m.separatorIcon)), null, 16)) : (_(), d(s, { key: 1 }, [p(b(e.char), 1)], 64))]))], 64))), 128))]),
-			f("input", g(L.value, {
+			}, y(n)(f.separatorIcon)), null, 16)) : (h(), l(o, { key: 1 }, [d(v(e.char), 1)], 64))]))], 64))), 128))]), u("input", m(I.value, {
 				class: "v-input-otp-native v-visually-hidden",
 				type: "text",
 				tabindex: "-1",
 				"aria-hidden": "true",
 				autocomplete: "off",
-				value: B.value,
-				pattern: `.{${U.value}}`,
-				disabled: m.disabled,
-				readonly: m.readonly || void 0,
-				onFocus: t[0] ||= (e) => Q(X() === -1 ? 0 : X())
-			}), null, 16, k),
-			m.hint ? (_(), l(i, {
-				key: 0,
-				id: x(R),
-				variant: "caption",
-				tone: "muted",
-				class: "v-input-otp-hint"
-			}, {
-				default: ee(() => [p(b(m.hint), 1)]),
-				_: 1
-			}, 8, ["id"])) : u("", !0)
-		], 16, te));
+				value: z.value,
+				pattern: `.{${H.value}}`,
+				required: f.required || void 0,
+				disabled: f.disabled,
+				readonly: f.readonly || void 0,
+				onFocus: t[0] ||= (e) => Q(X())
+			}), null, 16, O)], 16, w)]),
+			_: 1
+		}, 16, [
+			"label",
+			"hint",
+			"error",
+			"required",
+			"disabled",
+			"hide-label",
+			"label-position"
+		]));
 	}
 });
 //#endregion
-export { A as default };
+export { k 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\">\n// @keyboard @core\n/**\n * Coordinate character inputs because HTML has no segmented code field. JavaScript filters\n * values, distributes paste and moves focus; pattern literals stay outside the model.\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 separator\n   * shown between the boxes without ever being part of the value, as in `'GT-###'` or\n   * `'###.###.###'`.\n   */\n  pattern?: string\n  /** An icon drawn in place of every separator of the pattern. */\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 can\n   * still be selected and copied, which 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 system\n   * dictionary.\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 * `aria-describedby` is a list, and the hint is appended to whatever the consumer already\n * pointed at instead of replacing it; left to the fallthrough, their value would land last and\n * take the hint out of the announcement with nothing to show for it.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\n\n// What the FORM reads goes on the hidden native input, and everything else on the group:\n// on the group a `name` submits nothing and `required` validates nothing, silently.\nconst NATIVE_ONLY = ['name', 'form', 'required']\nconst groupAttrs = computed(() =>\n  Object.fromEntries(Object.entries(attrs).filter(([key]) => !NATIVE_ONLY.includes(key))),\n)\nconst nativeAttrs = computed(() =>\n  Object.fromEntries(Object.entries(attrs).filter(([key]) => NATIVE_ONLY.includes(key))),\n)\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  /**\n   * Emitted the moment the code BECOMES complete, carrying it. Retyping a character of a\n   * complete code with the same one does not emit it again.\n   */\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 rootEl = ref<HTMLElement | null>(null)\nconst digits = ref<string[]>([])\n\n// @keyboard\n// Read the rendered order on demand; changing a pattern can move or replace its input cells.\nfunction inputAt(slot: number) {\n  return rootEl.value?.querySelectorAll<HTMLInputElement>('.v-input-otp-input')[slot]\n}\n\nfunction syncFromModel(value: string) {\n  // A value longer than the row is simply shown cut short, and one holding characters the\n  // format refuses is shown filtered; but the model is not rewritten to match: writing back\n  // here would feed the watcher below and the two would keep correcting each other.\n  const clean = sanitize(value)\n  digits.value = Array.from({ length: slotCount.value }, (_, i) => clean[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/** The first empty box, or -1 once the code is complete. Every box before it is filled. */\nconst firstEmpty = () => digits.value.findIndex((d) => !d)\n\n/** Takes a character out and moves the following ones back, so no gap is left behind. */\nfunction removeAt(slot: number) {\n  digits.value.splice(slot, 1)\n  digits.value.push('')\n}\n\nfunction focusBox(slot: number) {\n  const el = inputAt(slot)\n  el?.focus()\n  // Selected, so the next keystroke REPLACES the character: a box that already has the\n  // focus receives no focus event to select it.\n  el?.select()\n}\n\nfunction commit() {\n  const code = digits.value.join('')\n  const previous = model.value\n  model.value = code\n  // Only when the code CHANGES into a full one: retyping a character of a complete code\n  // must not submit it a second time for a consumer listening to `complete`.\n  if (code.length === slotCount.value && code !== previous) emit('complete', code)\n}\n\n// @core\n/**\n * Spreads a run of characters across the boxes, starting from the one that received them. It\n * returns the last box it filled, so the caller knows where to put the focus, and `null` when\n * 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  const chars = [...raw]\n  // Never for ONE character: a `G` typed into the first box of `GT-###` is the code's first\n  // character, not the separator, and swallowing it would make such a code impossible to type.\n  if (chars.length > 1) while (start > 0 && allCells[start - 1]?.type === 'literal') start--\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\n// Separate inputs into something that types like one field; spreading the characters is the\n// core behaviour underneath it.\nfunction onInput(slotIndex: number, event: Event) {\n  const el = event.target as HTMLInputElement\n  const empty = firstEmpty()\n  const filled = empty === -1 || slotIndex < empty\n\n  // A filled box whose character was not selected receives the new one NEXT to it. What\n  // was inserted is what lies just before the caret, and it is what counts.\n  const previous = digits.value[slotIndex] ?? ''\n  let raw = el.value\n  const inserted = raw.length - previous.length\n  if (previous && inserted > 0 && el.selectionStart !== null) {\n    raw = raw.slice(Math.max(0, el.selectionStart - inserted), el.selectionStart)\n  }\n\n  // The same path serves a single keystroke and a pasted code: both are spread from this box\n  // onwards; or from the first empty box, when this one lies past it.\n  const lastFilled = distribute(raw, filled ? slotIndex : empty)\n  if (lastFilled === null) {\n    // Either the box was emptied, or nothing typed was valid for this format. A filled box\n    // loses its character and the ones after it close the gap.\n    if (filled) removeAt(slotIndex)\n    el.value = digits.value[slotIndex] ?? ''\n    commit()\n    return\n  }\n  // Written by hand: when the characters went to another box, this one's value is still\n  // '' in the render, and the patch would leave the typed character on screen.\n  el.value = digits.value[slotIndex] ?? ''\n  focusBox(Math.min(lastFilled + 1, slotCount.value - 1))\n  commit()\n}\n\n// @keyboard\n// Sends the focus there instead: a pointer landing on box 5 of a two-character code types into\n// box 3.\nfunction onFocus(slotIndex: number, event: FocusEvent) {\n  const empty = firstEmpty()\n  if (empty !== -1 && slotIndex > empty) inputAt(empty)?.focus()\n  else (event.target as HTMLInputElement).select()\n}\n\n// @keyboard\nfunction onKeydown(slotIndex: number, event: KeyboardEvent) {\n  const empty = firstEmpty()\n  // The furthest box the focus may reach: the first empty one, or the last of a full code.\n  const reachable = empty === -1 ? slotCount.value - 1 : empty\n  let target: number | null = null\n  switch (event.key) {\n    case 'Backspace':\n      // A read-only box refuses its own edits natively, but this erases ANOTHER box, which\n      // nothing native guards.\n      if (props.readonly || props.disabled || digits.value[slotIndex] || slotIndex === 0) return\n      removeAt(slotIndex - 1)\n      commit()\n      target = slotIndex - 1\n      break\n    case 'ArrowLeft':\n      if (slotIndex > 0) target = slotIndex - 1\n      break\n    case 'ArrowRight':\n      if (slotIndex < reachable) target = slotIndex + 1\n      break\n    case 'Home':\n      target = 0\n      break\n    case 'End':\n      target = reachable\n      break\n  }\n  if (target === null) return\n  event.preventDefault()\n  focusBox(target)\n}\n\n/*\n * `focus` goes to the first empty box rather than to the first box outright, which is where a\n * reader resuming a 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    inputAt(target)?.focus(options)\n  },\n  /** Selects the box the focus is on, as clicking into one already does. */\n  select: () => {\n    const active = rootEl.value?.querySelector<HTMLInputElement>('.v-input-otp-input:focus')\n    ;(active ?? inputAt(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=\"groupAttrs\"\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          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=\"onFocus(cell.slotIndex, $event)\"\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    <!--\n      Out of the tab order and hidden from assistive technology, the boxes being the control; a\n      browser focusing it to report an invalid code is sent on to the box to fill.\n    -->\n    <input\n      v-bind=\"nativeAttrs\"\n      class=\"v-input-otp-native v-visually-hidden\"\n      type=\"text\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      autocomplete=\"off\"\n      :value=\"model\"\n      :pattern=\"`.{${slotCount}}`\"\n      :disabled=\"disabled\"\n      :readonly=\"readonly || undefined\"\n      @focus=\"focusBox(firstEmpty() === -1 ? 0 : firstEmpty())\"\n    />\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  /* A code reads left to right in every language, like the HH:MM of VTimeInput: mirrored\n     under `dir=\"rtl\"`, the arrows would walk against the boxes and a `GT-###` pattern would\n     be drawn backwards. */\n  .v-input-otp-boxes {\n    direction: ltr;\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:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default),\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /*\n   * The states follow VInput's, in VInput's order: read-only, hover, focus, invalid, disabled.\n   * Read-only, focus, invalid and disabled all weigh (0,2,0), so the source order arbitrates\n   * between them and read-only has to come first, or it would repaint the focus and error\n   * borders grey.\n   */\n  .v-input-otp[data-readonly] .v-input-otp-input {\n    background: var(--vectis-color-surface-sunken);\n    border-color: var(--vectis-color-border);\n  }\n\n  /* The hover weighs (0,5,0) and keeps itself off a focused, invalid or disabled box\n     through its own `:not()`, as VInput's does. */\n  .v-input-otp:not([data-invalid]) .v-input-otp-input:hover:not(:focus, :disabled) {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  /*\n   * `:focus` rather than `:focus-visible`, like any text field, which shows its focus when\n   * clicked into too. The transparent outline is the safety net for Windows forced colours,\n   * which drop box-shadows entirely.\n   */\n  .v-input-otp-input:focus {\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-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 {\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  /*\n   * A disabled row greys out through the colour tokens and never through opacity, the same\n   * treatment as VInput; `text-muted` inside the box, where `text-subtle` would fall under\n   * 4.5:1 against `surface-muted`, and `text-subtle` for what sits on the page.\n   */\n  .v-input-otp[data-disabled] .v-input-otp-input {\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-muted);\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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"}
+{"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 * Coordinate character inputs because HTML has no segmented code field. JavaScript filters\n * values, distributes paste and moves focus; pattern literals stay outside the model.\n */\n\nimport { computed, ref, useAttrs, watch } from 'vue'\nimport VField from '../VField/VField.vue'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\nimport { partitionAttrs } from '../../utils/attrs'\nimport { isDev } from '../../utils/env'\n\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 separator\n   * shown between the boxes without ever being part of the value, as in `'GT-###'` or\n   * `'###.###.###'`.\n   */\n  pattern?: string\n  /** An icon drawn in place of every separator of the pattern. */\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 can\n   * still be selected and copied, which 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   * The label above the boxes, which names the row. Without it, the row is named by its\n   * `aria-label` or by the design system dictionary.\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   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /**\n   * Marks the code as required: an asterisk follows the label, and the hidden input a form reads\n   * is `required`.\n   */\n  required?: boolean\n  /** Hides the label visually. It still names the row for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the boxes (`top`, the default), or at their start, in a column\n   * of its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\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  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n})\n\nconst m = useMessages()\n\n// @a11y\n/*\n * `aria-describedby` is a list, and the hint is appended to whatever the consumer already\n * pointed at instead of replacing it; left to the fallthrough, their value would land last and\n * take the hint out of the announcement with nothing to show for it.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\n\n// What the FORM reads goes on the hidden native input, and everything else on the group:\n// on the group a `name` submits nothing and `required` validates nothing, silently.\nconst NATIVE_ONLY = ['name', 'form']\nconst split = computed(() => partitionAttrs(attrs, NATIVE_ONLY))\nconst groupAttrs = computed(() => split.value.rest)\nconst nativeAttrs = computed(() => split.value.picked)\n// @a11y\n// The row has no visible label to be named by when a consumer gives none or names it\n// themselves (VField's group mode): the dictionary names it then.\nfunction rowLabel(fieldProps: Record<string, unknown>): string | undefined {\n  if (fieldProps['aria-labelledby']) return undefined\n  return (fieldProps['aria-label'] as string | undefined) ?? m.value.inputOTP.label\n}\n\nconst isInvalid = computed(() => props.invalid || !!props.error)\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  /**\n   * Emitted the moment the code BECOMES complete, carrying it. Retyping a character of a\n   * complete code with the same one does not emit it again.\n   */\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<InputOTPFormat, 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 rootEl = ref<HTMLElement | null>(null)\nconst digits = ref<string[]>([])\n\n// @keyboard\n// Read the rendered order on demand; changing a pattern can move or replace its input cells.\nfunction inputAt(slot: number) {\n  return rootEl.value?.querySelectorAll<HTMLInputElement>('.v-input-otp-input')[slot]\n}\n\nfunction syncFromModel(value: string) {\n  // A value longer than the row is simply shown cut short, and one holding characters the\n  // format refuses is shown filtered; but the model is not rewritten to match: writing back\n  // here would feed the watcher below and the two would keep correcting each other.\n  const clean = sanitize(value)\n  digits.value = Array.from({ length: slotCount.value }, (_, i) => clean[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/** The first empty box, or -1 once the code is complete. Every box before it is filled. */\nconst firstEmpty = () => digits.value.findIndex((d) => !d)\n\n/** The furthest box the focus may reach: the first empty one, or the last of a full code. */\nfunction reachable() {\n  const empty = firstEmpty()\n  return empty === -1 ? slotCount.value - 1 : empty\n}\n\n/** Takes a character out and moves the following ones back, so no gap is left behind. */\nfunction removeAt(slot: number) {\n  digits.value.splice(slot, 1)\n  digits.value.push('')\n}\n\nfunction focusBox(slot: number) {\n  const el = inputAt(slot)\n  el?.focus()\n  // Selected, so the next keystroke REPLACES the character: a box that already has the\n  // focus receives no focus event to select it.\n  el?.select()\n}\n\nfunction commit() {\n  const code = digits.value.join('')\n  const previous = model.value\n  model.value = code\n  // Only when the code CHANGES into a full one: retyping a character of a complete code\n  // must not submit it a second time for a consumer listening to `complete`.\n  if (code.length === slotCount.value && code !== previous) emit('complete', code)\n}\n\n// @core\n/**\n * Spreads a run of characters across the boxes, starting from the one that received them. It\n * returns the last box it filled, so the caller knows where to put the focus, and `null` when\n * 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  const chars = [...raw]\n  // Never for ONE character: a `G` typed into the first box of `GT-###` is the code's first\n  // character, not the separator, and swallowing it would make such a code impossible to type.\n  if (chars.length > 1) while (start > 0 && allCells[start - 1]?.type === 'literal') start--\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\n// Separate inputs into something that types like one field; spreading the characters is the\n// core behaviour underneath it.\nfunction onInput(slotIndex: number, event: Event) {\n  const el = event.target as HTMLInputElement\n  const empty = firstEmpty()\n  const filled = empty === -1 || slotIndex < empty\n\n  // A filled box whose character was not selected receives the new one NEXT to it. What\n  // was inserted is what lies just before the caret, and it is what counts.\n  const previous = digits.value[slotIndex] ?? ''\n  let raw = el.value\n  const inserted = raw.length - previous.length\n  if (previous && inserted > 0 && el.selectionStart !== null) {\n    raw = raw.slice(Math.max(0, el.selectionStart - inserted), el.selectionStart)\n  }\n\n  // The same path serves a single keystroke and a pasted code: both are spread from this box\n  // onwards; or from the first empty box, when this one lies past it.\n  const lastFilled = distribute(raw, filled ? slotIndex : empty)\n  if (lastFilled === null) {\n    // Either the box was emptied, or nothing typed was valid for this format. A filled box\n    // loses its character and the ones after it close the gap.\n    if (filled) removeAt(slotIndex)\n    el.value = digits.value[slotIndex] ?? ''\n    commit()\n    return\n  }\n  // Written by hand: when the characters went to another box, this one's value is still\n  // '' in the render, and the patch would leave the typed character on screen.\n  el.value = digits.value[slotIndex] ?? ''\n  focusBox(Math.min(lastFilled + 1, slotCount.value - 1))\n  commit()\n}\n\n// @keyboard\n// Sends the focus there instead: a pointer landing on box 5 of a two-character code types into\n// box 3.\nfunction onFocus(slotIndex: number, event: FocusEvent) {\n  const empty = firstEmpty()\n  if (empty !== -1 && slotIndex > empty) inputAt(empty)?.focus()\n  else (event.target as HTMLInputElement).select()\n}\n\n// @keyboard\nfunction onKeydown(slotIndex: number, event: KeyboardEvent) {\n  const last = reachable()\n  let target: number | null = null\n  switch (event.key) {\n    case 'Backspace':\n      // A read-only box refuses its own edits natively, but this erases ANOTHER box, which\n      // nothing native guards.\n      if (props.readonly || props.disabled || digits.value[slotIndex] || slotIndex === 0) return\n      removeAt(slotIndex - 1)\n      commit()\n      target = slotIndex - 1\n      break\n    case 'ArrowLeft':\n      if (slotIndex > 0) target = slotIndex - 1\n      break\n    case 'ArrowRight':\n      if (slotIndex < last) target = slotIndex + 1\n      break\n    case 'Home':\n      target = 0\n      break\n    case 'End':\n      target = last\n      break\n  }\n  if (target === null) return\n  event.preventDefault()\n  focusBox(target)\n}\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) => inputAt(reachable())?.focus(options),\n  /** Selects the box the focus is on, as clicking into one already does. */\n  select: () => {\n    const active = rootEl.value?.querySelector<HTMLInputElement>('.v-input-otp-input:focus')\n    ;(active ?? inputAt(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  <VField\n    v-bind=\"groupAttrs\"\n    class=\"v-input-otp\"\n    :label=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :disabled=\"disabled\"\n    :hide-label=\"hideLabel\"\n    :label-position=\"labelPosition\"\n    group\n  >\n    <template #default=\"{ fieldProps }\">\n      <div\n        ref=\"rootEl\"\n        v-bind=\"fieldProps\"\n        class=\"v-input-otp-group v-control\"\n        role=\"group\"\n        :aria-label=\"rowLabel(fieldProps)\"\n        :data-invalid=\"isInvalid ? '' : 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              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=\"isInvalid || undefined\"\n              @input=\"onInput(cell.slotIndex, $event)\"\n              @keydown=\"onKeydown(cell.slotIndex, $event)\"\n              @focus=\"onFocus(cell.slotIndex, $event)\"\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        <!--\n      Out of the tab order and hidden from assistive technology, the boxes being the control; a\n      browser focusing it to report an invalid code is sent on to the box to fill.\n    -->\n        <input\n          v-bind=\"nativeAttrs\"\n          class=\"v-input-otp-native v-visually-hidden\"\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          autocomplete=\"off\"\n          :value=\"model\"\n          :pattern=\"`.{${slotCount}}`\"\n          :required=\"required || undefined\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly || undefined\"\n          @focus=\"focusBox(reachable())\"\n        />\n      </div>\n    </template>\n  </VField>\n</template>\n\n<style>\n@layer vectis.components {\n  /* Its own width rather than the line's, so that a start label stays next to the boxes. */\n  .v-input-otp.v-field {\n    display: inline-flex;\n    align-items: start;\n  }\n\n  .v-input-otp-group {\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\n  /* A code reads left to right in every language, like the HH:MM of VTimeInput: mirrored\n     under `dir=\"rtl\"`, the arrows would walk against the boxes and a `GT-###` pattern would\n     be drawn backwards. */\n  .v-input-otp-boxes {\n    direction: ltr;\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:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default),\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /*\n   * The states follow VInput's, in VInput's order: read-only, hover, focus, invalid, disabled.\n   * Read-only, focus, invalid and disabled all weigh (0,2,0), so the source order arbitrates\n   * between them and read-only has to come first, or it would repaint the focus and error\n   * borders grey.\n   */\n  .v-input-otp-group[data-readonly] .v-input-otp-input {\n    background: var(--vectis-color-surface-sunken);\n    border-color: var(--vectis-color-border);\n  }\n\n  /* The hover weighs (0,5,0) and keeps itself off a focused, invalid or disabled box\n     through its own `:not()`, as VInput's does. */\n  .v-input-otp-group:not([data-invalid]) .v-input-otp-input:hover:not(:focus, :disabled) {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  /*\n   * `:focus` rather than `:focus-visible`, like any text field, which shows its focus when\n   * clicked into too. The transparent outline is the safety net for Windows forced colours,\n   * which drop box-shadows entirely.\n   */\n  .v-input-otp-input:focus {\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-input-otp-group[data-invalid] .v-input-otp-input {\n    border-color: var(--vectis-color-danger);\n  }\n\n  .v-input-otp-group[data-invalid] .v-input-otp-input:focus {\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  /*\n   * A disabled row greys out through the colour tokens and never through opacity, the same\n   * treatment as VInput; `text-muted` inside the box, where `text-subtle` would fall under\n   * 4.5:1 against `surface-muted`, and `text-subtle` for what sits on the page.\n   */\n  .v-input-otp-group[data-disabled] .v-input-otp-input {\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-muted);\n    border-color: var(--vectis-color-border);\n    cursor: not-allowed;\n  }\n\n  .v-input-otp-group[data-disabled] .v-input-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-input-otp-group[data-size='sm'] {\n    --input-otp-font-size: var(--vectis-font-size-md);\n  }\n\n  .v-input-otp-group[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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"}

package/dist/components/VLink/VLink.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-link{--vectis-icon-size:1em;border-radius:var(--vectis-radius-xs);color:var(--tone-text-tinted);text-decoration-line:none;-webkit-text-decoration-color:color-mix(in oklab, currentcolor 50%, transparent);text-decoration-color:color-mix(in oklab, currentcolor 50%, transparent);cursor:pointer;transition:text-decoration-color var(--vectis-duration-fast) var(--vectis-ease-default)}.v-link[data-underline=always],.v-link[data-underline=hover]:is(:hover,:focus-visible){text-decoration-line:underline}.v-link:hover{text-decoration-color:currentColor}.v-link[data-tone=inherit]{color:inherit}.v-link[data-tone=inherit]:hover:not([aria-disabled=true]){color:var(--vectis-color-accent-text)}.v-link:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-link-external{vertical-align:middle;margin-inline-start:var(--vectis-space-1)}.v-link[aria-disabled=true]{color:var(--vectis-color-text-subtle);cursor:not-allowed;text-decoration-color:currentColor}@media (forced-colors:active){.v-link[aria-disabled=true]{color:graytext}}@media (prefers-reduced-motion:reduce){.v-link{transition:none}}}