vectis-ui 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"VInput.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VInput/VInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * A complete text field: a label above, a hint below, icons inside — clickable ones\n * included — a character counter, a clear button and a loading state, all arranged\n * around a real `<input>`.\n *\n * The component is a wrapper around that input, so the attributes it is given are\n * split: `class` and `style` stay on the outer element, where a consumer expects to\n * style the field, and everything else is forwarded to the input, where `name`,\n * `required` and the aria-* actually do something.\n *\n * Validation stays the browser's. The field turns red through `:user-invalid`, which\n * only reacts once the reader has left it, and even the soft limit is reported by\n * marking the input invalid rather than by emitting an event of our own — so a\n * consumer's `<form>` sees exactly what it would see with a bare input.\n *\n * The behavioural JavaScript is limited to the v-model and to the clear button,\n * which has to move focus back to the field: it disappears the moment it is clicked,\n * and focus would otherwise fall back to the page.\n */\nimport { computed, ref } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconName, iconProps } from '../VIcon/iconProps'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport type { IconSource } from '../VIcon/types'\nimport VSpinner from '../VSpinner/VSpinner.vue'\nimport VTypography from '../VTypography/VTypography.vue'\n\nimport { useFieldIds } from '../../composables/useFieldIds'\nimport { useIconClickHandlers } from '../../composables/useIconClickHandlers'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTextLimit } from '../../composables/useTextLimit'\nimport { useMessages } from '../../i18n/state'\n\ninterface InputProps {\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: 'sm' | 'md' | 'lg'\n  /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */\n  compact?: boolean\n  /**\n   * The native type of the input, which is also what tells a phone which keyboard to\n   * offer — a numeric pad for `number`, an @ key for `email`.\n   */\n  type?: 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url'\n  /**\n   * Marks the field as invalid whatever the browser thinks. This is the route for a\n   * rule only the server can check; anything the browser can validate on its own\n   * already colours the field without this prop.\n   */\n  invalid?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows the value without allowing it to be changed. The field can still be\n   * focused and copied from, and it hides the clear button — unless `clearVisible`\n   * answers that question explicitly.\n   */\n  readonly?: boolean\n  /** The label above the field, tied to it so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field. It is tied to the input for assistive\n   * technology, so it is read out along with the label.\n   */\n  hint?: string\n  /**\n   * An icon inside the field, at the start. It is decorative by default and becomes\n   * a real button as soon as a `@click:icon-start` listener is attached — in which\n   * case it needs `iconStartLabel`. The `#start` slot replaces it.\n   */\n  iconStart?: IconSource\n  /**\n   * The same at the end of the field. The `#end` slot replaces it, and the loading\n   * spinner takes its place while it turns.\n   */\n  iconEnd?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /** What the end icon does, in words, once it is clickable. */\n  iconEndLabel?: string\n  /** Shows a spinner at the end of the field, in place of the end icon or slot. */\n  loading?: boolean\n  /**\n   * What screen readers announce while the spinner turns. It falls back to the\n   * design system dictionary.\n   */\n  loadingLabel?: string\n  /**\n   * Offers a cross that empties the field. It appears when there is something to\n   * clear and the field can be edited.\n   */\n  clearable?: boolean\n  /**\n   * Decides whether the cross is shown, instead of letting the field work it out\n   * from its own content — a read-only field included.\n   *\n   * It exists for the components built on top of this one, where what there is to\n   * clear is not the text: VCombobox holds its selection as chips beside the field,\n   * and a read-only date or time picker changes its value through a panel rather\n   * than by typing.\n   */\n  clearVisible?: boolean\n  /** What the clear button does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * The maximum number of characters. By default this is the browser's own limit,\n   * which simply refuses anything beyond it.\n   */\n  maxlength?: number\n  /**\n   * Turns that limit into a soft one: the reader may type past it, and the field\n   * goes into error instead of silently refusing the keystrokes. It is reported\n   * through the native validity, so a form cannot be submitted over the limit.\n   */\n  softLimit?: boolean\n  /**\n   * Shows how much has been typed, at the end of the field: \"12/80\" against a limit,\n   * or just \"12\" without one.\n   */\n  counter?: boolean\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<InputProps>(), {\n  size: 'md',\n  compact: false,\n  type: 'text',\n  invalid: false,\n  disabled: false,\n  readonly: false,\n  label: undefined,\n  hint: undefined,\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconStartLabel: undefined,\n  iconEndLabel: undefined,\n  loading: false,\n  loadingLabel: undefined,\n  clearable: false,\n  clearVisible: undefined,\n  clearLabel: undefined,\n  maxlength: undefined,\n  softLimit: false,\n  counter: false,\n})\n\nconst emit = defineEmits<{\n  /** The start icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-start': [event: MouseEvent]\n  /** The end icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-end': [event: MouseEvent]\n  /** The clear button was pressed. The field has already been emptied. */\n  clear: []\n}>()\n\ndefineSlots<{\n  /** Content at the start of the field, which replaces `iconStart`. */\n  start?(): unknown\n  /**\n   * Content at the end of the field, which replaces `iconEnd`. It is hidden while\n   * the field is loading, the spinner taking that place.\n   */\n  end?(): unknown\n}>()\n\n/**\n * The value, typed as text OR a number rather than text alone. On an\n * `<input type=\"number\">` Vue converts the value to a number by itself, so a\n * string-only model would hand a number back to a consumer who passed a string in,\n * and Vue would report an invalid prop.\n */\nconst model = defineModel<string | number>({ default: '' })\n\n/**\n * The value seen as text. Every measurement of its length — the counter, the soft\n * limit, whether the clear cross has anything to clear — goes through this, since a\n * number has no length of its own.\n */\nconst modelText = computed(() => String(model.value ?? ''))\n\nconst { attrs, rootClass, rootStyle, forwardedAttrs: restAttrs } = useRootAttrs()\n\n// The prop keeps priority; what it falls back to is the dictionary, so the default\n// wording follows the language the design system is set to.\nconst m = useMessages()\nconst resolvedLoadingLabel = computed(() => props.loadingLabel ?? m.value.common.loading)\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.common.clear)\n\nconst { fieldId, hintId, describedBy } = useFieldIds(attrs, () => !!props.hint)\n\nconst { hasIconStartHandler, hasIconEndHandler } = useIconClickHandlers({\n  name: 'VInput',\n  iconStartLabel: props.iconStartLabel,\n  iconEndLabel: props.iconEndLabel,\n})\n\nconst controlEl = ref<HTMLInputElement | null>(null)\n\nconst showClear = computed(() => {\n  if (!props.clearable || props.disabled) return false\n  // When `clearVisible` is supplied it is the consumer's EXPLICIT answer to \"is\n  // there anything to clear?\", and it holds even on a read-only field: the value of\n  // a read-only date or time picker changes through its panel rather than by typing.\n  // Left out, the field answers for itself — it has text, and it can be edited.\n  return props.clearVisible ?? (!props.readonly && modelText.value.length > 0)\n})\n\n// @a11y @core — moving the focus back is the accessibility half of this handler.\n// The cross vanishes the instant it empties the field, so without that call focus\n// falls back to the page body and a keyboard user loses their place in the form.\nfunction onClear() {\n  model.value = ''\n  emit('clear')\n  controlEl.value?.focus()\n}\n\n// The counter and the soft limit both measure `modelText` rather than the model\n// itself, a number having no length.\nconst { counterText, over } = useTextLimit({\n  el: controlEl,\n  text: () => modelText.value,\n  maxlength: () => props.maxlength,\n  softLimit: () => props.softLimit,\n})\n\n// The real input is buried inside the wrapper, out of reach of whoever renders this\n// component. These three exposed members are how the components built on top of it\n// reach it — VCombobox refocuses the field and selects its text this way.\ndefineExpose({\n  focus: (options?: FocusOptions) => controlEl.value?.focus(options),\n  select: () => controlEl.value?.select(),\n  el: controlEl,\n})\n</script>\n\n<template>\n  <div\n    class=\"v-input v-control\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n  >\n    <VTypography v-if=\"label\" as=\"label\" variant=\"label\" class=\"v-input-label\" :for=\"fieldId\">\n      {{ label }}\n    </VTypography>\n\n    <div class=\"v-input-field\">\n      <slot name=\"start\">\n        <button\n          v-if=\"iconStart && hasIconStartHandler\"\n          type=\"button\"\n          class=\"v-input-action\"\n          :aria-label=\"iconStartLabel ?? iconName(iconStart)\"\n          :disabled=\"disabled\"\n          @click=\"emit('click:icon-start', $event)\"\n        >\n          <VIcon v-bind=\"iconProps(iconStart)\" />\n        </button>\n        <VIcon v-else-if=\"iconStart\" v-bind=\"iconProps(iconStart)\" />\n      </slot>\n\n      <input\n        v-bind=\"restAttrs\"\n        :id=\"fieldId\"\n        ref=\"controlEl\"\n        v-model=\"model\"\n        class=\"v-input-control\"\n        :type=\"type\"\n        :maxlength=\"softLimit ? undefined : maxlength\"\n        :disabled=\"disabled\"\n        :readonly=\"readonly || undefined\"\n        :aria-invalid=\"invalid || undefined\"\n        :aria-describedby=\"describedBy\"\n      />\n\n      <span v-if=\"counter\" class=\"v-input-counter\" :data-over=\"over ? '' : undefined\">\n        {{ counterText }}\n      </span>\n\n      <button\n        v-if=\"showClear\"\n        type=\"button\"\n        class=\"v-input-action v-input-clear\"\n        :aria-label=\"resolvedClearLabel\"\n        @click=\"onClear\"\n      >\n        <VIcon :name=\"closeIcon\" />\n      </button>\n\n      <VSpinner v-if=\"loading\" :label=\"resolvedLoadingLabel\" />\n      <slot v-else name=\"end\">\n        <button\n          v-if=\"iconEnd && hasIconEndHandler\"\n          type=\"button\"\n          class=\"v-input-action\"\n          :aria-label=\"iconEndLabel ?? iconName(iconEnd)\"\n          :disabled=\"disabled\"\n          @click=\"emit('click:icon-end', $event)\"\n        >\n          <VIcon v-bind=\"iconProps(iconEnd)\" />\n        </button>\n        <VIcon v-else-if=\"iconEnd\" v-bind=\"iconProps(iconEnd)\" />\n      </slot>\n    </div>\n\n    <VTypography v-if=\"hint\" :id=\"hintId\" variant=\"caption\" tone=\"muted\" class=\"v-input-hint\">\n      {{ hint }}\n    </VTypography>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-input {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  /* The label and the hint are rendered by VTypography, which carries their type. The\n     .v-input-label and .v-input-hint classes remain as hooks: a consumer overrides\n     through them, and the disabled state below reaches them that way. */\n\n  /* This is the box that carries the border, the background and the focus ring.\n     `--field-border-color` is the single source of truth for its colour, and the\n     hover, error and disabled states do nothing but redefine it.\n\n     Nothing here restates the size scale: the `--control-*` variables are inherited\n     from the v-control root (styles/control-size.css), the icon context included. */\n  .v-input-field {\n    --field-border-color: var(--vectis-color-border-strong);\n\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    height: var(--control-height);\n    padding-inline: var(--control-padding-inline-field);\n    background: var(--vectis-color-surface);\n    color: var(--vectis-color-text);\n    border: 1px solid var(--field-border-color);\n    border-radius: var(--vectis-radius-interactive);\n    font-size: var(--control-font-size);\n    transition:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-input-control {\n    flex: 1;\n    min-width: 0;\n    height: 100%;\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    outline: none; /* the focus ring is drawn by the field around it, not here */\n  }\n\n  .v-input-control::placeholder {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* The browsers' own in-field controls are removed, because the design system draws\n     its own: WebKit's search cross would sit beside the `clearable` one, the number\n     spinners and Edge's password-reveal eye would clash with the icons. */\n  .v-input-control::-webkit-search-cancel-button,\n  .v-input-control::-webkit-search-decoration,\n  .v-input-control::-webkit-search-results-button,\n  .v-input-control::-webkit-search-results-decoration,\n  .v-input-control::-webkit-inner-spin-button,\n  .v-input-control::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  .v-input-control[type='number'] {\n    appearance: textfield;\n  }\n\n  .v-input-control::-ms-reveal {\n    display: none;\n  }\n\n  /* The yellow autofill background is painted by the browser on the input itself,\n     inside our field. Its colour cannot be changed, but matching the field's radius\n     at least stops it from showing square corners inside a rounded box. */\n  .v-input-control:-webkit-autofill {\n    border-radius: var(--vectis-radius-interactive);\n  }\n\n  /* A read-only field sinks slightly into the page but keeps its text at full\n     strength — the value is there to be read — and still shows the accent focus ring.\n     The state is read from [data-readonly] and never from `:read-only`, which the\n     browser also matches on a disabled field.\n\n     TRAP — this block must stay FIRST in the sequence of states: read-only, then\n     hover, focus, invalid and disabled. Every one of these selectors weighs (0,3,0),\n     `:has()` taking the specificity of what it contains, so nothing but the source\n     order arbitrates between them. Moved further down, this rule would repaint the\n     error border and the accent focus ring grey, with no error anywhere. What\n     belongs to a read-only field is its BASE colour alone. */\n  .v-input[data-readonly] .v-input-field {\n    --field-border-color: var(--vectis-color-border);\n\n    background: var(--vectis-color-surface-sunken);\n  }\n\n  .v-input-field:hover:not(:has(.v-input-control:focus)):not(\n      :has(\n        .v-input-control:disabled,\n        .v-input-control:user-invalid,\n        .v-input-control[aria-invalid='true']\n      )\n    ) {\n    --field-border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  /* The focused field appears to have a two-pixel border: it is really its own 1px\n     border plus a 1px shadow of the same colour just outside it, which costs no\n     layout and therefore makes nothing jump.\n\n     The selector watches the CONTROL's focus and not `:focus-within`, so that when\n     one of the field's own buttons — the cross, a clickable icon — takes keyboard\n     focus, only that button's outline lights up: two indicators at once would be\n     unreadable. And it is `:focus` rather than `:focus-visible`, because a text field\n     shows its focus even when it was reached with the mouse.\n\n     The transparent outline is the safety net for Windows forced colours, which drop\n     box-shadows entirely; an outline survives and keeps the field marked. */\n  .v-input-field:has(.v-input-control:focus) {\n    --field-border-color: var(--vectis-color-accent);\n\n    box-shadow: 0 0 0 1px var(--field-border-color);\n    outline: var(--vectis-focus-ring-width) solid transparent;\n  }\n\n  /* The invalid state, from the browser's own verdict first and from the `invalid`\n     prop second. Only the colour variable is changed, which is why the border AND\n     the focus ring both turn red without either being restated. */\n  .v-input-field:has(.v-input-control:user-invalid),\n  .v-input-field:has(.v-input-control[aria-invalid='true']) {\n    --field-border-color: var(--vectis-color-danger);\n  }\n\n  /* The counter keeps its own local styling rather than going through VTypography:\n     figures of equal width, so the number does not shift as it counts, and a colour\n     that marks the overflow — neither of which is a typographic role. */\n  .v-input-counter {\n    flex: none;\n    font-size: var(--vectis-text-caption-size);\n    color: var(--vectis-color-text-muted);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-input-counter[data-over] {\n    color: var(--vectis-color-danger-text);\n  }\n\n  /* A decorative icon is drawn in a muted grey, so it stays quieter than the text\n     being typed beside it. */\n  .v-input-field > .v-icon {\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-input-field > .v-spinner {\n    font-size: var(--vectis-icon-size);\n  }\n\n  /* The field's own buttons — the clear cross, a clickable icon — go from muted grey\n     to full strength on hover, and take VButton's radius so their focus ring has the\n     same rounded corners as everything else.\n\n     The negative margin is DERIVED and never written as a number: it is exactly half\n     the difference between the icon and the wider box holding it. Subtracting it\n     cancels that inset, so the glyph lands precisely where a decorative icon would\n     have — against the field's padding, one --control-gap from its neighbour. */\n  .v-input-action {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--control-action-size);\n    height: var(--control-action-size);\n    margin-inline: calc((var(--vectis-icon-size) - var(--control-action-size)) / 2);\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: var(--vectis-color-text-muted);\n    border-radius: var(--vectis-radius-interactive);\n    cursor: pointer;\n    flex: none;\n    transition: color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-input-action:hover:not(:disabled) {\n    color: var(--vectis-color-text);\n  }\n\n  .v-input-action:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(var(--vectis-focus-ring-offset) * -1);\n  }\n\n  /* A disabled field greys out through the colour tokens, the same ones VCheckbox and\n     VRadio use, and never through opacity. It comes LAST in the sequence of states,\n     which at equal specificity is what makes it win over all of them, the error\n     included: a disabled field is not submitted, so it has nothing to report.\n\n     The text here is `text-muted` and not the `text-subtle` used by the label and the\n     hint below, because those sit on the page surface where this sits on\n     `surface-muted` — against which subtle falls to a 4.4:1 contrast. The control\n     itself is exempt from that rule, being natively disabled, but the icons the field\n     CONTAINS are not, and they inherit this colour. */\n  .v-input[data-disabled] .v-input-field {\n    --field-border-color: var(--vectis-color-border);\n\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-muted);\n    cursor: not-allowed;\n  }\n\n  .v-input[data-disabled] .v-input-label,\n  .v-input[data-disabled] .v-input-hint,\n  .v-input[data-disabled] .v-input-counter {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-input[data-disabled] .v-input-action,\n  .v-input[data-disabled] .v-input-field > .v-icon {\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  .v-input-control:disabled {\n    cursor: not-allowed;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-input-field,\n    .v-input-action {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VInputOTP/VInputOTP.css

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

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

@@ -0,0 +1,76 @@
+import { IconSource } from '../VIcon/types.js';
+/**
+ * The row of boxes a one-time code is typed into, one character per box.
+ *
+ * The platform has no such control, so each box is a real `<input>` and the
+ * JavaScript is what makes the row behave as a single field: typing a character moves
+ * to the next box, Backspace on an empty one goes back, the arrows walk along, and a
+ * code pasted anywhere is spread across the boxes. The first box carries
+ * `autocomplete="one-time-code"`, so a code filled in from an SMS or a password
+ * manager is spread the same way.
+ *
+ * `pattern` is what cuts the row up: every `#` becomes a box, and every other
+ * character becomes a separator shown between them, which is displayed but never part
+ * of the value. Pasting understands those separators — a code copied in its formatted
+ * shape, "GT-123" or "123.456.789", is consumed with them in place — and everything
+ * else is filtered by `format`, which also forces capitals outside a numeric code so
+ * that the value has one canonical form.
+ */
+interface InputOTPProps {
+    /** How many boxes the code has. It is ignored as soon as a `pattern` is given. */
+    length?: number;
+    /**
+     * Which characters the code is made of. It filters what can be typed or pasted, and
+     * decides which keyboard a phone offers.
+     */
+    format?: 'numeric' | 'alpha' | 'alphanumeric';
+    /**
+     * The shape of the code: each `#` is a box to fill, and every other character is a
+     * separator shown between the boxes without ever being part of the value —
+     * `'GT-###'`, `'###.###.###'`. It wins over `length`.
+     */
+    pattern?: string;
+    /**
+     * An icon drawn in place of EVERY separator of the pattern. It suits a template
+     * whose separators are purely decorative, `'###-###'`, and should not be used with
+     * one carrying meaningful text such as `'GT-###'`, which the icon would erase.
+     */
+    separatorIcon?: IconSource;
+    /** The size of the boxes: 32, 40 or 48 pixels. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Takes 4px off the boxes, leaving the text and the icons as they are. */
+    compact?: boolean;
+    /** Makes every box unusable, greyed out through the colour tokens. */
+    disabled?: boolean;
+    /** Marks the code as wrong, which colours the boxes and tells assistive technology so. */
+    invalid?: boolean;
+    /**
+     * What screen readers announce for the row as a whole. It falls back to the design
+     * system dictionary.
+     */
+    label?: string;
+}
+type __VLS_Props = InputOTPProps;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    complete: (code: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onComplete?: ((code: string) => any) | undefined;
+}>, {
+    label: string;
+    size: "sm" | "md" | "lg";
+    length: number;
+    pattern: string;
+    compact: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    format: "numeric" | "alpha" | "alphanumeric";
+    separatorIcon: IconSource;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VInputOTP/VInputOTP.js

@@ -0,0 +1,9 @@
+import './VInputOTP.css';
+import e from "./VInputOTP.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                          */
+//#region src/components/VInputOTP/VInputOTP.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VInputOTP.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VInputOTP.js","names":[],"sources":["../../../src/components/VInputOTP/VInputOTP.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\nimport { isDev } from '../../utils/env'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\n// @keyboard @core\n/**\n * The row of boxes a one-time code is typed into, one character per box.\n *\n * The platform has no such control, so each box is a real `<input>` and the\n * JavaScript is what makes the row behave as a single field: typing a character moves\n * to the next box, Backspace on an empty one goes back, the arrows walk along, and a\n * code pasted anywhere is spread across the boxes. The first box carries\n * `autocomplete=\"one-time-code\"`, so a code filled in from an SMS or a password\n * manager is spread the same way.\n *\n * `pattern` is what cuts the row up: every `#` becomes a box, and every other\n * character becomes a separator shown between them, which is displayed but never part\n * of the value. Pasting understands those separators — a code copied in its formatted\n * shape, \"GT-123\" or \"123.456.789\", is consumed with them in place — and everything\n * else is filtered by `format`, which also forces capitals outside a numeric code so\n * that the value has one canonical form.\n */\ninterface InputOTPProps {\n  /** How many boxes the code has. It is ignored as soon as a `pattern` is given. */\n  length?: number\n  /**\n   * Which characters the code is made of. It filters what can be typed or pasted, and\n   * decides which keyboard a phone offers.\n   */\n  format?: 'numeric' | 'alpha' | 'alphanumeric'\n  /**\n   * The shape of the code: each `#` is a box to fill, and every other character is a\n   * separator shown between the boxes without ever being part of the value —\n   * `'GT-###'`, `'###.###.###'`. It wins over `length`.\n   */\n  pattern?: string\n  /**\n   * An icon drawn in place of EVERY separator of the pattern. It suits a template\n   * whose separators are purely decorative, `'###-###'`, and should not be used with\n   * one carrying meaningful text such as `'GT-###'`, which the icon would erase.\n   */\n  separatorIcon?: IconSource\n  /** The size of the boxes: 32, 40 or 48 pixels. */\n  size?: 'sm' | 'md' | 'lg'\n  /** Takes 4px off the boxes, leaving the text and the icons as they are. */\n  compact?: boolean\n  /** Makes every box unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Marks the code as wrong, which colours the boxes and tells assistive technology so. */\n  invalid?: boolean\n  /**\n   * What screen readers announce for the row as a whole. It falls back to the design\n   * system dictionary.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<InputOTPProps>(), {\n  length: 6,\n  format: 'numeric',\n  pattern: undefined,\n  separatorIcon: undefined,\n  size: 'md',\n  compact: false,\n  disabled: false,\n  invalid: false,\n  label: undefined,\n})\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.inputOTP.label)\n\nconst model = defineModel<string>({ default: '' })\n\nconst emit = defineEmits<{\n  /** Emitted the moment every box is filled, carrying the complete code. */\n  complete: [code: string]\n}>()\n\ntype Cell = { type: 'slot'; slotIndex: number } | { type: 'literal'; char: string }\n\nconst cells = computed<Cell[]>(() => {\n  if (props.pattern?.includes('#')) {\n    let slotIndex = 0\n    return [...props.pattern].map((char): Cell =>\n      char === '#' ? { type: 'slot', slotIndex: slotIndex++ } : { type: 'literal', char },\n    )\n  }\n  return Array.from({ length: props.length }, (_, i) => ({ type: 'slot', slotIndex: i }))\n})\nconst slotCount = computed(() => cells.value.filter((cell) => cell.type === 'slot').length)\n\n// @devwarn\nif (isDev) {\n  if (props.pattern && !props.pattern.includes('#'))\n    console.warn(\"[VInputOTP] pattern without '#' — falling back to `length`.\")\n}\n\nconst filters: Record<NonNullable<InputOTPProps['format']>, RegExp> = {\n  numeric: /[^0-9]/g,\n  alpha: /[^A-Z]/g,\n  alphanumeric: /[^A-Z0-9]/g,\n}\n\n/**\n * Keeps only what the format allows. Outside a numeric code the text is put in\n * capitals first, so that the value has a single canonical form whichever case the\n * reader typed or pasted.\n */\nfunction sanitize(text: string) {\n  const upper = props.format === 'numeric' ? text : text.toUpperCase()\n  return upper.replace(filters[props.format], '')\n}\n\nconst inputs = ref<(HTMLInputElement | null)[]>([])\nconst digits = ref<string[]>([])\n\nfunction syncFromModel(value: string) {\n  // A value longer than the row is simply shown cut short, and the model is NOT\n  // rewritten to match: writing back here would feed the watcher below and the two\n  // would keep correcting each other.\n  digits.value = Array.from({ length: slotCount.value }, (_, i) => value[i] ?? '')\n}\nsyncFromModel(model.value)\nwatch([model, slotCount], ([value, count]) => {\n  if (value !== digits.value.join('') || digits.value.length !== count) syncFromModel(value)\n})\n\nfunction commit() {\n  const code = digits.value.join('')\n  model.value = code\n  if (code.length === slotCount.value) emit('complete', code)\n}\n\n// @core\n/**\n * Spreads a run of characters across the boxes, starting from the one that received\n * them. It walks the row: a separator swallows the incoming character when the two\n * match, which is what lets a code pasted in its formatted shape line up, and a box\n * takes the next character the format accepts.\n *\n * It returns the last box it filled, so the caller knows where to put the focus, and\n * `null` when nothing in the text was usable.\n */\nfunction distribute(raw: string, startSlot: number): number | null {\n  const allCells = cells.value\n  let start = allCells.findIndex((cell) => cell.type === 'slot' && cell.slotIndex === startSlot)\n  // Step back over the separators immediately before that box: pasting the whole\n  // string onto the first box means pasting its prefix too, and \"GT-\" has to be\n  // matched rather than treated as characters of the code.\n  while (start > 0 && allCells[start - 1]?.type === 'literal') start--\n  const chars = [...raw]\n  let charIndex = 0\n  let lastFilled: number | null = null\n  for (const cell of allCells.slice(start)) {\n    if (charIndex >= chars.length) break\n    if (cell.type === 'literal') {\n      if (chars[charIndex]?.toUpperCase() === cell.char.toUpperCase()) charIndex++\n      continue\n    }\n    let char = ''\n    while (charIndex < chars.length && !char) {\n      char = sanitize(chars[charIndex] ?? '')\n      charIndex++\n    }\n    if (!char) break\n    digits.value[cell.slotIndex] = char\n    lastFilled = cell.slotIndex\n  }\n  return lastFilled\n}\n\n// @keyboard @core — moving the focus forward on its own is what turns a row of\n// separate inputs into something that types like one field; spreading the characters\n// is the core behaviour underneath it.\nfunction onInput(slotIndex: number, event: Event) {\n  const el = event.target as HTMLInputElement\n  // The same path serves a single keystroke and a pasted code: both are spread from\n  // this box onwards.\n  const lastFilled = distribute(el.value, slotIndex)\n  if (lastFilled === null) {\n    // Either the box was emptied, or nothing typed was valid for this format.\n    digits.value[slotIndex] = ''\n    el.value = ''\n    commit()\n    return\n  }\n  el.value = digits.value[slotIndex] ?? ''\n  inputs.value[Math.min(lastFilled + 1, slotCount.value - 1)]?.focus()\n  commit()\n}\n\n// @keyboard\nfunction onKeydown(slotIndex: number, event: KeyboardEvent) {\n  if (event.key === 'Backspace' && !digits.value[slotIndex] && slotIndex > 0) {\n    event.preventDefault()\n    digits.value[slotIndex - 1] = ''\n    commit()\n    inputs.value[slotIndex - 1]?.focus()\n  } else if (event.key === 'ArrowLeft' && slotIndex > 0) {\n    event.preventDefault()\n    inputs.value[slotIndex - 1]?.focus()\n  } else if (event.key === 'ArrowRight' && slotIndex < slotCount.value - 1) {\n    event.preventDefault()\n    inputs.value[slotIndex + 1]?.focus()\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"v-otp v-control\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :data-invalid=\"invalid ? '' : undefined\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <template v-for=\"(cell, i) in cells\" :key=\"i\">\n      <input\n        v-if=\"cell.type === 'slot'\"\n        :ref=\"\n          (el) => {\n            inputs[cell.slotIndex] = el as HTMLInputElement | null\n          }\n        \"\n        type=\"text\"\n        class=\"v-otp-input\"\n        :inputmode=\"format === 'numeric' ? 'numeric' : 'text'\"\n        :autocomplete=\"cell.slotIndex === 0 ? 'one-time-code' : 'off'\"\n        :value=\"digits[cell.slotIndex]\"\n        :disabled=\"disabled\"\n        :aria-label=\"m.inputOTP.slot(cell.slotIndex + 1, slotCount)\"\n        :aria-invalid=\"invalid || undefined\"\n        @input=\"onInput(cell.slotIndex, $event)\"\n        @keydown=\"onKeydown(cell.slotIndex, $event)\"\n        @focus=\"($event.target as HTMLInputElement).select()\"\n      />\n      <!-- A separator from the pattern: shown, never focusable, and never part of the\n           value. It is hidden from screen readers, each box already announcing its\n           own position in the code. -->\n      <span v-else class=\"v-otp-literal\" aria-hidden=\"true\">\n        <VIcon v-if=\"separatorIcon\" v-bind=\"iconProps(separatorIcon)\" />\n        <template v-else>{{ cell.char }}</template>\n      </span>\n    </template>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-otp {\n    /*\n     * The heights and the icon context come from the shared v-control class\n     * (styles/control-size.css). The type is the one thing kept local, and set one or\n     * two steps above the other fields: a single character has a whole square to\n     * itself, and at the usual field size it would look lost in it.\n     */\n    --otp-font-size: var(--vectis-font-size-lg);\n\n    display: inline-flex;\n    align-items: center;\n    gap: var(--control-gap);\n  }\n\n  .v-otp-input {\n    /* The boxes are square: reading the same variable for both dimensions is what\n       makes the size and the density scale them together. */\n    width: var(--control-height);\n    height: var(--control-height);\n    text-align: center;\n    background: var(--vectis-color-surface);\n    color: var(--vectis-color-text);\n    border: 1px solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-interactive);\n    font-family: var(--vectis-text-family-code);\n    font-size: var(--otp-font-size);\n    transition: border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* The focused box appears to have a two-pixel border, exactly as in VInput and\n     VTextarea: its own 1px border plus a 1px shadow of the same colour just outside\n     it. The transparent outline is the safety net for Windows forced colours, which\n     drop box-shadows entirely. */\n  .v-otp-input:focus-visible {\n    border-color: var(--vectis-color-accent);\n    box-shadow: 0 0 0 1px var(--vectis-color-accent);\n    outline: var(--vectis-focus-ring-width) solid transparent;\n  }\n\n  .v-otp[data-invalid] .v-otp-input {\n    border-color: var(--vectis-color-danger);\n  }\n\n  .v-otp[data-invalid] .v-otp-input:focus-visible {\n    box-shadow: 0 0 0 1px var(--vectis-color-danger);\n  }\n\n  .v-otp-literal {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--vectis-color-text-muted);\n    font-family: var(--vectis-text-family-code);\n    font-size: var(--otp-font-size);\n    user-select: none;\n  }\n\n  /* A disabled row greys out through the colour tokens and never through opacity, the\n     same treatment as VInput. */\n  .v-otp[data-disabled] .v-otp-input {\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-subtle);\n    border-color: var(--vectis-color-border);\n    cursor: not-allowed;\n  }\n\n  .v-otp[data-disabled] .v-otp-literal {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* Of the whole size scale, only the raised type is restated here; the dimensions\n     themselves come from v-control. */\n  .v-otp[data-size='sm'] {\n    --otp-font-size: var(--vectis-font-size-md);\n  }\n\n  .v-otp[data-size='lg'] {\n    --otp-font-size: var(--vectis-font-size-xl);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-otp-input {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -0,0 +1,149 @@
+import { useMessages as e } from "../../i18n/state.js";
+import t from "../VIcon/VIcon.js";
+import { iconProps as n } from "../VIcon/iconProps.js";
+import { useAriaLabel as r } from "../../composables/useAriaLabel.js";
+import { Fragment as i, computed as a, createBlock as o, createElementBlock as s, createTextVNode as c, defineComponent as l, mergeModels as u, mergeProps as d, openBlock as f, ref as p, renderList as m, toDisplayString as h, unref as g, useModel as _, watch as v } from "vue";
+//#region src/components/VInputOTP/VInputOTP.vue?vue&type=script&setup=true&lang.ts
+var y = [
+	"aria-label",
+	"data-invalid",
+	"data-size",
+	"data-compact",
+	"data-disabled"
+], b = [
+	"inputmode",
+	"autocomplete",
+	"value",
+	"disabled",
+	"aria-label",
+	"aria-invalid",
+	"onInput",
+	"onKeydown"
+], x = {
+	key: 1,
+	class: "v-otp-literal",
+	"aria-hidden": "true"
+}, S = /*@__PURE__*/ l({
+	__name: "VInputOTP",
+	props: /*@__PURE__*/ u({
+		length: { default: 6 },
+		format: { default: "numeric" },
+		pattern: { default: void 0 },
+		separatorIcon: { default: void 0 },
+		size: { default: "md" },
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		label: { default: void 0 }
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ u(["complete"], ["update:modelValue"]),
+	setup(l, { emit: u }) {
+		let S = l, C = e(), w = r(() => S.label ?? C.value.inputOTP.label), T = _(l, "modelValue"), E = u, D = a(() => {
+			if (S.pattern?.includes("#")) {
+				let e = 0;
+				return [...S.pattern].map((t) => t === "#" ? {
+					type: "slot",
+					slotIndex: e++
+				} : {
+					type: "literal",
+					char: t
+				});
+			}
+			return Array.from({ length: S.length }, (e, t) => ({
+				type: "slot",
+				slotIndex: t
+			}));
+		}), O = a(() => D.value.filter((e) => e.type === "slot").length), k = {
+			numeric: /[^0-9]/g,
+			alpha: /[^A-Z]/g,
+			alphanumeric: /[^A-Z0-9]/g
+		};
+		function A(e) {
+			return (S.format === "numeric" ? e : e.toUpperCase()).replace(k[S.format], "");
+		}
+		let j = p([]), M = p([]);
+		function N(e) {
+			M.value = Array.from({ length: O.value }, (t, n) => e[n] ?? "");
+		}
+		N(T.value), v([T, O], ([e, t]) => {
+			(e !== M.value.join("") || M.value.length !== t) && N(e);
+		});
+		function P() {
+			let e = M.value.join("");
+			T.value = e, e.length === O.value && E("complete", e);
+		}
+		function F(e, t) {
+			let n = D.value, r = n.findIndex((e) => e.type === "slot" && e.slotIndex === t);
+			for (; r > 0 && n[r - 1]?.type === "literal";) r--;
+			let i = [...e], a = 0, o = null;
+			for (let e of n.slice(r)) {
+				if (a >= i.length) break;
+				if (e.type === "literal") {
+					i[a]?.toUpperCase() === e.char.toUpperCase() && a++;
+					continue;
+				}
+				let t = "";
+				for (; a < i.length && !t;) t = A(i[a] ?? ""), a++;
+				if (!t) break;
+				M.value[e.slotIndex] = t, o = e.slotIndex;
+			}
+			return o;
+		}
+		function I(e, t) {
+			let n = t.target, r = F(n.value, e);
+			if (r === null) {
+				M.value[e] = "", n.value = "", P();
+				return;
+			}
+			n.value = M.value[e] ?? "", j.value[Math.min(r + 1, O.value - 1)]?.focus(), P();
+		}
+		function L(e, t) {
+			t.key === "Backspace" && !M.value[e] && e > 0 ? (t.preventDefault(), M.value[e - 1] = "", P(), j.value[e - 1]?.focus()) : t.key === "ArrowLeft" && e > 0 ? (t.preventDefault(), j.value[e - 1]?.focus()) : t.key === "ArrowRight" && e < O.value - 1 && (t.preventDefault(), j.value[e + 1]?.focus());
+		}
+		return (e, r) => (f(), s("div", {
+			class: "v-otp v-control",
+			role: "group",
+			"aria-label": g(w),
+			"data-invalid": l.invalid ? "" : void 0,
+			"data-size": l.size,
+			"data-compact": l.compact ? "" : void 0,
+			"data-disabled": l.disabled ? "" : void 0
+		}, [(f(!0), s(i, null, m(D.value, (e, a) => (f(), s(i, { key: a }, [e.type === "slot" ? (f(), s("input", {
+			key: 0,
+			ref_for: !0,
+			ref: (t) => {
+				j.value[e.slotIndex] = t;
+			},
+			type: "text",
+			class: "v-otp-input",
+			inputmode: l.format === "numeric" ? "numeric" : "text",
+			autocomplete: e.slotIndex === 0 ? "one-time-code" : "off",
+			value: M.value[e.slotIndex],
+			disabled: l.disabled,
+			"aria-label": g(C).inputOTP.slot(e.slotIndex + 1, O.value),
+			"aria-invalid": l.invalid || void 0,
+			onInput: (t) => I(e.slotIndex, t),
+			onKeydown: (t) => L(e.slotIndex, t),
+			onFocus: r[0] ||= (e) => e.target.select()
+		}, null, 40, b)) : (f(), s("span", x, [l.separatorIcon ? (f(), o(t, d({
+			key: 0,
+			ref_for: !0
+		}, g(n)(l.separatorIcon)), null, 16)) : (f(), s(i, { key: 1 }, [c(h(e.char), 1)], 64))]))], 64))), 128))], 8, y));
+	}
+});
+//#endregion
+export { S 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

@@ -0,0 +1 @@
+{"version":3,"file":"VInputOTP.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VInputOTP/VInputOTP.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\nimport { isDev } from '../../utils/env'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\n// @keyboard @core\n/**\n * The row of boxes a one-time code is typed into, one character per box.\n *\n * The platform has no such control, so each box is a real `<input>` and the\n * JavaScript is what makes the row behave as a single field: typing a character moves\n * to the next box, Backspace on an empty one goes back, the arrows walk along, and a\n * code pasted anywhere is spread across the boxes. The first box carries\n * `autocomplete=\"one-time-code\"`, so a code filled in from an SMS or a password\n * manager is spread the same way.\n *\n * `pattern` is what cuts the row up: every `#` becomes a box, and every other\n * character becomes a separator shown between them, which is displayed but never part\n * of the value. Pasting understands those separators — a code copied in its formatted\n * shape, \"GT-123\" or \"123.456.789\", is consumed with them in place — and everything\n * else is filtered by `format`, which also forces capitals outside a numeric code so\n * that the value has one canonical form.\n */\ninterface InputOTPProps {\n  /** How many boxes the code has. It is ignored as soon as a `pattern` is given. */\n  length?: number\n  /**\n   * Which characters the code is made of. It filters what can be typed or pasted, and\n   * decides which keyboard a phone offers.\n   */\n  format?: 'numeric' | 'alpha' | 'alphanumeric'\n  /**\n   * The shape of the code: each `#` is a box to fill, and every other character is a\n   * separator shown between the boxes without ever being part of the value —\n   * `'GT-###'`, `'###.###.###'`. It wins over `length`.\n   */\n  pattern?: string\n  /**\n   * An icon drawn in place of EVERY separator of the pattern. It suits a template\n   * whose separators are purely decorative, `'###-###'`, and should not be used with\n   * one carrying meaningful text such as `'GT-###'`, which the icon would erase.\n   */\n  separatorIcon?: IconSource\n  /** The size of the boxes: 32, 40 or 48 pixels. */\n  size?: 'sm' | 'md' | 'lg'\n  /** Takes 4px off the boxes, leaving the text and the icons as they are. */\n  compact?: boolean\n  /** Makes every box unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Marks the code as wrong, which colours the boxes and tells assistive technology so. */\n  invalid?: boolean\n  /**\n   * What screen readers announce for the row as a whole. It falls back to the design\n   * system dictionary.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<InputOTPProps>(), {\n  length: 6,\n  format: 'numeric',\n  pattern: undefined,\n  separatorIcon: undefined,\n  size: 'md',\n  compact: false,\n  disabled: false,\n  invalid: false,\n  label: undefined,\n})\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.inputOTP.label)\n\nconst model = defineModel<string>({ default: '' })\n\nconst emit = defineEmits<{\n  /** Emitted the moment every box is filled, carrying the complete code. */\n  complete: [code: string]\n}>()\n\ntype Cell = { type: 'slot'; slotIndex: number } | { type: 'literal'; char: string }\n\nconst cells = computed<Cell[]>(() => {\n  if (props.pattern?.includes('#')) {\n    let slotIndex = 0\n    return [...props.pattern].map((char): Cell =>\n      char === '#' ? { type: 'slot', slotIndex: slotIndex++ } : { type: 'literal', char },\n    )\n  }\n  return Array.from({ length: props.length }, (_, i) => ({ type: 'slot', slotIndex: i }))\n})\nconst slotCount = computed(() => cells.value.filter((cell) => cell.type === 'slot').length)\n\n// @devwarn\nif (isDev) {\n  if (props.pattern && !props.pattern.includes('#'))\n    console.warn(\"[VInputOTP] pattern without '#' — falling back to `length`.\")\n}\n\nconst filters: Record<NonNullable<InputOTPProps['format']>, RegExp> = {\n  numeric: /[^0-9]/g,\n  alpha: /[^A-Z]/g,\n  alphanumeric: /[^A-Z0-9]/g,\n}\n\n/**\n * Keeps only what the format allows. Outside a numeric code the text is put in\n * capitals first, so that the value has a single canonical form whichever case the\n * reader typed or pasted.\n */\nfunction sanitize(text: string) {\n  const upper = props.format === 'numeric' ? text : text.toUpperCase()\n  return upper.replace(filters[props.format], '')\n}\n\nconst inputs = ref<(HTMLInputElement | null)[]>([])\nconst digits = ref<string[]>([])\n\nfunction syncFromModel(value: string) {\n  // A value longer than the row is simply shown cut short, and the model is NOT\n  // rewritten to match: writing back here would feed the watcher below and the two\n  // would keep correcting each other.\n  digits.value = Array.from({ length: slotCount.value }, (_, i) => value[i] ?? '')\n}\nsyncFromModel(model.value)\nwatch([model, slotCount], ([value, count]) => {\n  if (value !== digits.value.join('') || digits.value.length !== count) syncFromModel(value)\n})\n\nfunction commit() {\n  const code = digits.value.join('')\n  model.value = code\n  if (code.length === slotCount.value) emit('complete', code)\n}\n\n// @core\n/**\n * Spreads a run of characters across the boxes, starting from the one that received\n * them. It walks the row: a separator swallows the incoming character when the two\n * match, which is what lets a code pasted in its formatted shape line up, and a box\n * takes the next character the format accepts.\n *\n * It returns the last box it filled, so the caller knows where to put the focus, and\n * `null` when nothing in the text was usable.\n */\nfunction distribute(raw: string, startSlot: number): number | null {\n  const allCells = cells.value\n  let start = allCells.findIndex((cell) => cell.type === 'slot' && cell.slotIndex === startSlot)\n  // Step back over the separators immediately before that box: pasting the whole\n  // string onto the first box means pasting its prefix too, and \"GT-\" has to be\n  // matched rather than treated as characters of the code.\n  while (start > 0 && allCells[start - 1]?.type === 'literal') start--\n  const chars = [...raw]\n  let charIndex = 0\n  let lastFilled: number | null = null\n  for (const cell of allCells.slice(start)) {\n    if (charIndex >= chars.length) break\n    if (cell.type === 'literal') {\n      if (chars[charIndex]?.toUpperCase() === cell.char.toUpperCase()) charIndex++\n      continue\n    }\n    let char = ''\n    while (charIndex < chars.length && !char) {\n      char = sanitize(chars[charIndex] ?? '')\n      charIndex++\n    }\n    if (!char) break\n    digits.value[cell.slotIndex] = char\n    lastFilled = cell.slotIndex\n  }\n  return lastFilled\n}\n\n// @keyboard @core — moving the focus forward on its own is what turns a row of\n// separate inputs into something that types like one field; spreading the characters\n// is the core behaviour underneath it.\nfunction onInput(slotIndex: number, event: Event) {\n  const el = event.target as HTMLInputElement\n  // The same path serves a single keystroke and a pasted code: both are spread from\n  // this box onwards.\n  const lastFilled = distribute(el.value, slotIndex)\n  if (lastFilled === null) {\n    // Either the box was emptied, or nothing typed was valid for this format.\n    digits.value[slotIndex] = ''\n    el.value = ''\n    commit()\n    return\n  }\n  el.value = digits.value[slotIndex] ?? ''\n  inputs.value[Math.min(lastFilled + 1, slotCount.value - 1)]?.focus()\n  commit()\n}\n\n// @keyboard\nfunction onKeydown(slotIndex: number, event: KeyboardEvent) {\n  if (event.key === 'Backspace' && !digits.value[slotIndex] && slotIndex > 0) {\n    event.preventDefault()\n    digits.value[slotIndex - 1] = ''\n    commit()\n    inputs.value[slotIndex - 1]?.focus()\n  } else if (event.key === 'ArrowLeft' && slotIndex > 0) {\n    event.preventDefault()\n    inputs.value[slotIndex - 1]?.focus()\n  } else if (event.key === 'ArrowRight' && slotIndex < slotCount.value - 1) {\n    event.preventDefault()\n    inputs.value[slotIndex + 1]?.focus()\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"v-otp v-control\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :data-invalid=\"invalid ? '' : undefined\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <template v-for=\"(cell, i) in cells\" :key=\"i\">\n      <input\n        v-if=\"cell.type === 'slot'\"\n        :ref=\"\n          (el) => {\n            inputs[cell.slotIndex] = el as HTMLInputElement | null\n          }\n        \"\n        type=\"text\"\n        class=\"v-otp-input\"\n        :inputmode=\"format === 'numeric' ? 'numeric' : 'text'\"\n        :autocomplete=\"cell.slotIndex === 0 ? 'one-time-code' : 'off'\"\n        :value=\"digits[cell.slotIndex]\"\n        :disabled=\"disabled\"\n        :aria-label=\"m.inputOTP.slot(cell.slotIndex + 1, slotCount)\"\n        :aria-invalid=\"invalid || undefined\"\n        @input=\"onInput(cell.slotIndex, $event)\"\n        @keydown=\"onKeydown(cell.slotIndex, $event)\"\n        @focus=\"($event.target as HTMLInputElement).select()\"\n      />\n      <!-- A separator from the pattern: shown, never focusable, and never part of the\n           value. It is hidden from screen readers, each box already announcing its\n           own position in the code. -->\n      <span v-else class=\"v-otp-literal\" aria-hidden=\"true\">\n        <VIcon v-if=\"separatorIcon\" v-bind=\"iconProps(separatorIcon)\" />\n        <template v-else>{{ cell.char }}</template>\n      </span>\n    </template>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-otp {\n    /*\n     * The heights and the icon context come from the shared v-control class\n     * (styles/control-size.css). The type is the one thing kept local, and set one or\n     * two steps above the other fields: a single character has a whole square to\n     * itself, and at the usual field size it would look lost in it.\n     */\n    --otp-font-size: var(--vectis-font-size-lg);\n\n    display: inline-flex;\n    align-items: center;\n    gap: var(--control-gap);\n  }\n\n  .v-otp-input {\n    /* The boxes are square: reading the same variable for both dimensions is what\n       makes the size and the density scale them together. */\n    width: var(--control-height);\n    height: var(--control-height);\n    text-align: center;\n    background: var(--vectis-color-surface);\n    color: var(--vectis-color-text);\n    border: 1px solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-interactive);\n    font-family: var(--vectis-text-family-code);\n    font-size: var(--otp-font-size);\n    transition: border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* The focused box appears to have a two-pixel border, exactly as in VInput and\n     VTextarea: its own 1px border plus a 1px shadow of the same colour just outside\n     it. The transparent outline is the safety net for Windows forced colours, which\n     drop box-shadows entirely. */\n  .v-otp-input:focus-visible {\n    border-color: var(--vectis-color-accent);\n    box-shadow: 0 0 0 1px var(--vectis-color-accent);\n    outline: var(--vectis-focus-ring-width) solid transparent;\n  }\n\n  .v-otp[data-invalid] .v-otp-input {\n    border-color: var(--vectis-color-danger);\n  }\n\n  .v-otp[data-invalid] .v-otp-input:focus-visible {\n    box-shadow: 0 0 0 1px var(--vectis-color-danger);\n  }\n\n  .v-otp-literal {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--vectis-color-text-muted);\n    font-family: var(--vectis-text-family-code);\n    font-size: var(--otp-font-size);\n    user-select: none;\n  }\n\n  /* A disabled row greys out through the colour tokens and never through opacity, the\n     same treatment as VInput. */\n  .v-otp[data-disabled] .v-otp-input {\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-subtle);\n    border-color: var(--vectis-color-border);\n    cursor: not-allowed;\n  }\n\n  .v-otp[data-disabled] .v-otp-literal {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* Of the whole size scale, only the raised type is restated here; the dimensions\n     themselves come from v-control. */\n  .v-otp[data-size='sm'] {\n    --otp-font-size: var(--vectis-font-size-md);\n  }\n\n  .v-otp[data-size='lg'] {\n    --otp-font-size: var(--vectis-font-size-xl);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-otp-input {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VMenu/VMenu.d.ts

@@ -0,0 +1,91 @@
+import { MenuPlacement } from './context.js';
+/**
+ * A menu of actions, opened by a button and closed as soon as one is chosen. It
+ * follows the ARIA menu pattern, which is what tells a screen reader that these are
+ * commands rather than links or options in a list.
+ *
+ * It rests on the browser's own popover support: the panel closes on a click outside
+ * or on Escape without a line of code, and it positions itself in CSS against the
+ * button that opened it — the browser knows which one, since that button names the
+ * panel it opens.
+ *
+ * The JavaScript here is limited to what the platform does not do: keeping
+ * `v-model:open` and the browser's own state in step, moving the focus into the panel
+ * when it opens, and giving it back to the trigger when it closes. The keyboard inside
+ * the panel — the arrows moving from one command to the next — lives in VMenuPanel.
+ *
+ * How far the focus goes in depends on how the menu was opened. Opened from the
+ * keyboard it settles on the first command, ready to be chosen; opened with a mouse or
+ * a finger it stops at the panel, so that nothing is picked out for someone who has
+ * not asked for a choice yet — the arrows still enter the list from there.
+ */
+interface MenuProps {
+    /**
+     * Where the panel opens relative to its trigger. The browser moves it to another
+     * side by itself when there is not enough room.
+     */
+    placement?: MenuPlacement;
+    /**
+     * How tall the rows are: 32, 40 or 48 pixels. Submenus inherit it, so it is set
+     * once on the menu as a whole.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /** Takes 4px off the height of every row, submenus included. */
+    compact?: boolean;
+    /**
+     * A width for the panel, given as any CSS length or keyword — `16rem`,
+     * `max-content`. It applies to the menu itself; submenus keep the default width.
+     */
+    width?: string;
+    /**
+     * Stops the panel from being narrower than the button that opened it, while leaving
+     * it free to grow wider for its content. Submenus are unaffected.
+     */
+    matchTrigger?: boolean;
+}
+type __VLS_Props = MenuProps;
+/**
+ * What the trigger has to carry: the link to the panel it opens, and the two
+ * attributes telling assistive technology that a menu is attached to this button and
+ * whether it is currently open.
+ */
+type MenuTriggerProps = {
+    popovertarget: string;
+    'aria-haspopup': 'menu';
+    'aria-expanded': boolean;
+    'aria-controls': string;
+};
+type __VLS_Slots = {
+    /**
+     * The button that opens the menu. Bind the `triggerProps` it receives onto it —
+     * that is what wires the two together.
+     */
+    trigger(props: {
+        triggerProps: MenuTriggerProps;
+    }): unknown;
+    /** The contents of the menu: VMenuItem, VMenuGroup and VMenuSeparator. */
+    default(): unknown;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    placement: MenuPlacement;
+    compact: boolean;
+    width: string;
+    matchTrigger: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VMenu/VMenu.js

@@ -0,0 +1,7 @@
+import e from "./VMenu.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/VMenu/VMenu.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VMenu.js.map

package/dist/components/VMenu/VMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VMenu.js","names":[],"sources":["../../../src/components/VMenu/VMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, provide, ref, useId, watch } from 'vue'\n\nimport VMenuPanel from './VMenuPanel.vue'\nimport { menuInvoker, menuKey } from './context'\nimport type { MenuPlacement } from './context'\nimport { isKeyboardFocus } from '../../utils/focus'\n\n// @a11y @core\n/**\n * A menu of actions, opened by a button and closed as soon as one is chosen. It\n * follows the ARIA menu pattern, which is what tells a screen reader that these are\n * commands rather than links or options in a list.\n *\n * It rests on the browser's own popover support: the panel closes on a click outside\n * or on Escape without a line of code, and it positions itself in CSS against the\n * button that opened it — the browser knows which one, since that button names the\n * panel it opens.\n *\n * The JavaScript here is limited to what the platform does not do: keeping\n * `v-model:open` and the browser's own state in step, moving the focus into the panel\n * when it opens, and giving it back to the trigger when it closes. The keyboard inside\n * the panel — the arrows moving from one command to the next — lives in VMenuPanel.\n *\n * How far the focus goes in depends on how the menu was opened. Opened from the\n * keyboard it settles on the first command, ready to be chosen; opened with a mouse or\n * a finger it stops at the panel, so that nothing is picked out for someone who has\n * not asked for a choice yet — the arrows still enter the list from there.\n */\ninterface MenuProps {\n  /**\n   * Where the panel opens relative to its trigger. The browser moves it to another\n   * side by itself when there is not enough room.\n   */\n  placement?: MenuPlacement\n  /**\n   * How tall the rows are: 32, 40 or 48 pixels. Submenus inherit it, so it is set\n   * once on the menu as a whole.\n   */\n  size?: 'sm' | 'md' | 'lg'\n  /** Takes 4px off the height of every row, submenus included. */\n  compact?: boolean\n  /**\n   * A width for the panel, given as any CSS length or keyword — `16rem`,\n   * `max-content`. It applies to the menu itself; submenus keep the default width.\n   */\n  width?: string\n  /**\n   * Stops the panel from being narrower than the button that opened it, while leaving\n   * it free to grow wider for its content. Submenus are unaffected.\n   */\n  matchTrigger?: boolean\n}\n\n// Deliberately not assigned to a variable: the template reads the props directly.\nwithDefaults(defineProps<MenuProps>(), {\n  placement: 'bottom-start',\n  size: 'sm',\n  compact: false,\n  width: undefined,\n  matchTrigger: false,\n})\n\nconst open = defineModel<boolean>('open', { default: false })\n\n/**\n * What the trigger has to carry: the link to the panel it opens, and the two\n * attributes telling assistive technology that a menu is attached to this button and\n * whether it is currently open.\n */\ntype MenuTriggerProps = {\n  popovertarget: string\n  'aria-haspopup': 'menu'\n  'aria-expanded': boolean\n  'aria-controls': string\n}\n\ndefineSlots<{\n  /**\n   * The button that opens the menu. Bind the `triggerProps` it receives onto it —\n   * that is what wires the two together.\n   */\n  trigger(props: { triggerProps: MenuTriggerProps }): unknown\n  /** The contents of the menu: VMenuItem, VMenuGroup and VMenuSeparator. */\n  default(): unknown\n}>()\n\nconst panelRef = ref<InstanceType<typeof VMenuPanel> | null>(null)\nconst menuId = useId()\nconst shown = ref(false)\n\nconst triggerProps = computed<MenuTriggerProps>(() => ({\n  popovertarget: menuId,\n  'aria-haspopup': 'menu',\n  'aria-expanded': open.value,\n  'aria-controls': menuId,\n}))\n\n// Closing this panel closes every submenu with it: they are rendered inside it, and\n// the browser closes a stack of popovers from the outside in.\nprovide(menuKey, { closeAll: () => panelRef.value?.hide() })\n\n// @a11y — the focus half of the bridge: into the panel when it opens, back to the\n// trigger when it closes. Keeping the state in step alone would leave a keyboard user\n// stranded at the top of the page every time a menu opened or closed.\n//\n// WHERE it lands in the panel is the whole question, and the browser is the one that\n// answers it. In a menu the focus IS the highlight (see the rule in VMenuItem), so\n// taking the first item singles out a command — which is what someone arriving on the\n// arrows wants, and what someone who has just clicked never asked for. `:focus-visible`\n// is exactly that distinction, read off whatever holds the focus at this instant: the\n// trigger, since opening a popover through `popovertarget` does not move the focus.\n//\n// The pointer branch focuses the PANEL rather than nothing at all, and that is\n// structural: every key the menu answers to is listened for on the panel element, so\n// focus left outside it — on a trigger that is a DOM sibling — would silence the arrows,\n// Home/End and the Tab that closes the menu. Both ways of being wrong are mild and\n// symmetric: a misread pointer costs one extra keystroke, a misread keyboard gives back\n// the older behaviour.\nfunction onToggle(value: boolean) {\n  shown.value = value\n  open.value = value\n  if (value) {\n    if (isKeyboardFocus(document.activeElement)) panelRef.value?.focusFirst()\n    else panelRef.value?.focusPanel()\n  } else {\n    // The browser's own dismissal — a click outside, Escape — leaves the focus\n    // nowhere, on the page body. Only then is it handed back to the trigger: if the\n    // focus has already moved somewhere else deliberately, it must be left alone.\n    const active = document.activeElement\n    if (!active || active === document.body || panelRef.value?.el?.contains(active)) {\n      menuInvoker(menuId)?.focus()\n    }\n  }\n}\n\n// Opening and closing from the model. The guard is what keeps the two directions from\n// chasing each other: a menu the browser has just closed already reports it here.\nwatch(open, (value) => {\n  if (value === shown.value) return\n  if (value) panelRef.value?.show()\n  else panelRef.value?.hide()\n})\n\n// @ssr — a watcher does not run during the server render, so a menu asked to be open\n// from the start would never be told to open. Replaying the initial state on mount is\n// what covers that case.\nonMounted(() => {\n  if (open.value) panelRef.value?.show()\n})\n</script>\n\n<template>\n  <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n  <VMenuPanel\n    :id=\"menuId\"\n    ref=\"panelRef\"\n    :placement=\"placement\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :width=\"width\"\n    :match-trigger=\"matchTrigger\"\n    @toggle=\"onToggle\"\n  >\n    <slot />\n  </VMenuPanel>\n</template>\n"],"mappings":""}

package/dist/components/VMenu/VMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,73 @@
+import { menuInvoker as e, menuKey as t } from "./context.js";
+import n from "./VMenuPanel.js";
+import { isKeyboardFocus as r } from "../../utils/focus.js";
+import { Fragment as i, computed as a, createElementBlock as o, createVNode as s, defineComponent as c, mergeModels as l, onMounted as u, openBlock as d, provide as f, ref as p, renderSlot as m, unref as h, useId as g, useModel as _, watch as v, withCtx as y } from "vue";
+//#region src/components/VMenu/VMenu.vue?vue&type=script&setup=true&lang.ts
+var b = /*@__PURE__*/ c({
+	__name: "VMenu",
+	props: /*@__PURE__*/ l({
+		placement: { default: "bottom-start" },
+		size: { default: "sm" },
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		width: { default: void 0 },
+		matchTrigger: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: ["update:open"],
+	setup(c) {
+		let l = _(c, "open"), b = p(null), x = g(), S = p(!1), C = a(() => ({
+			popovertarget: x,
+			"aria-haspopup": "menu",
+			"aria-expanded": l.value,
+			"aria-controls": x
+		}));
+		f(t, { closeAll: () => b.value?.hide() });
+		function w(t) {
+			if (S.value = t, l.value = t, t) r(document.activeElement) ? b.value?.focusFirst() : b.value?.focusPanel();
+			else {
+				let t = document.activeElement;
+				(!t || t === document.body || b.value?.el?.contains(t)) && e(x)?.focus();
+			}
+		}
+		return v(l, (e) => {
+			e !== S.value && (e ? b.value?.show() : b.value?.hide());
+		}), u(() => {
+			l.value && b.value?.show();
+		}), (e, t) => (d(), o(i, null, [m(e.$slots, "trigger", { triggerProps: C.value }), s(n, {
+			id: h(x),
+			ref_key: "panelRef",
+			ref: b,
+			placement: c.placement,
+			size: c.size,
+			compact: c.compact,
+			width: c.width,
+			"match-trigger": c.matchTrigger,
+			onToggle: w
+		}, {
+			default: y(() => [m(e.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"id",
+			"placement",
+			"size",
+			"compact",
+			"width",
+			"match-trigger"
+		])], 64));
+	}
+});
+//#endregion
+export { b as default };
+
+//# sourceMappingURL=VMenu.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VMenu.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VMenu/VMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, provide, ref, useId, watch } from 'vue'\n\nimport VMenuPanel from './VMenuPanel.vue'\nimport { menuInvoker, menuKey } from './context'\nimport type { MenuPlacement } from './context'\nimport { isKeyboardFocus } from '../../utils/focus'\n\n// @a11y @core\n/**\n * A menu of actions, opened by a button and closed as soon as one is chosen. It\n * follows the ARIA menu pattern, which is what tells a screen reader that these are\n * commands rather than links or options in a list.\n *\n * It rests on the browser's own popover support: the panel closes on a click outside\n * or on Escape without a line of code, and it positions itself in CSS against the\n * button that opened it — the browser knows which one, since that button names the\n * panel it opens.\n *\n * The JavaScript here is limited to what the platform does not do: keeping\n * `v-model:open` and the browser's own state in step, moving the focus into the panel\n * when it opens, and giving it back to the trigger when it closes. The keyboard inside\n * the panel — the arrows moving from one command to the next — lives in VMenuPanel.\n *\n * How far the focus goes in depends on how the menu was opened. Opened from the\n * keyboard it settles on the first command, ready to be chosen; opened with a mouse or\n * a finger it stops at the panel, so that nothing is picked out for someone who has\n * not asked for a choice yet — the arrows still enter the list from there.\n */\ninterface MenuProps {\n  /**\n   * Where the panel opens relative to its trigger. The browser moves it to another\n   * side by itself when there is not enough room.\n   */\n  placement?: MenuPlacement\n  /**\n   * How tall the rows are: 32, 40 or 48 pixels. Submenus inherit it, so it is set\n   * once on the menu as a whole.\n   */\n  size?: 'sm' | 'md' | 'lg'\n  /** Takes 4px off the height of every row, submenus included. */\n  compact?: boolean\n  /**\n   * A width for the panel, given as any CSS length or keyword — `16rem`,\n   * `max-content`. It applies to the menu itself; submenus keep the default width.\n   */\n  width?: string\n  /**\n   * Stops the panel from being narrower than the button that opened it, while leaving\n   * it free to grow wider for its content. Submenus are unaffected.\n   */\n  matchTrigger?: boolean\n}\n\n// Deliberately not assigned to a variable: the template reads the props directly.\nwithDefaults(defineProps<MenuProps>(), {\n  placement: 'bottom-start',\n  size: 'sm',\n  compact: false,\n  width: undefined,\n  matchTrigger: false,\n})\n\nconst open = defineModel<boolean>('open', { default: false })\n\n/**\n * What the trigger has to carry: the link to the panel it opens, and the two\n * attributes telling assistive technology that a menu is attached to this button and\n * whether it is currently open.\n */\ntype MenuTriggerProps = {\n  popovertarget: string\n  'aria-haspopup': 'menu'\n  'aria-expanded': boolean\n  'aria-controls': string\n}\n\ndefineSlots<{\n  /**\n   * The button that opens the menu. Bind the `triggerProps` it receives onto it —\n   * that is what wires the two together.\n   */\n  trigger(props: { triggerProps: MenuTriggerProps }): unknown\n  /** The contents of the menu: VMenuItem, VMenuGroup and VMenuSeparator. */\n  default(): unknown\n}>()\n\nconst panelRef = ref<InstanceType<typeof VMenuPanel> | null>(null)\nconst menuId = useId()\nconst shown = ref(false)\n\nconst triggerProps = computed<MenuTriggerProps>(() => ({\n  popovertarget: menuId,\n  'aria-haspopup': 'menu',\n  'aria-expanded': open.value,\n  'aria-controls': menuId,\n}))\n\n// Closing this panel closes every submenu with it: they are rendered inside it, and\n// the browser closes a stack of popovers from the outside in.\nprovide(menuKey, { closeAll: () => panelRef.value?.hide() })\n\n// @a11y — the focus half of the bridge: into the panel when it opens, back to the\n// trigger when it closes. Keeping the state in step alone would leave a keyboard user\n// stranded at the top of the page every time a menu opened or closed.\n//\n// WHERE it lands in the panel is the whole question, and the browser is the one that\n// answers it. In a menu the focus IS the highlight (see the rule in VMenuItem), so\n// taking the first item singles out a command — which is what someone arriving on the\n// arrows wants, and what someone who has just clicked never asked for. `:focus-visible`\n// is exactly that distinction, read off whatever holds the focus at this instant: the\n// trigger, since opening a popover through `popovertarget` does not move the focus.\n//\n// The pointer branch focuses the PANEL rather than nothing at all, and that is\n// structural: every key the menu answers to is listened for on the panel element, so\n// focus left outside it — on a trigger that is a DOM sibling — would silence the arrows,\n// Home/End and the Tab that closes the menu. Both ways of being wrong are mild and\n// symmetric: a misread pointer costs one extra keystroke, a misread keyboard gives back\n// the older behaviour.\nfunction onToggle(value: boolean) {\n  shown.value = value\n  open.value = value\n  if (value) {\n    if (isKeyboardFocus(document.activeElement)) panelRef.value?.focusFirst()\n    else panelRef.value?.focusPanel()\n  } else {\n    // The browser's own dismissal — a click outside, Escape — leaves the focus\n    // nowhere, on the page body. Only then is it handed back to the trigger: if the\n    // focus has already moved somewhere else deliberately, it must be left alone.\n    const active = document.activeElement\n    if (!active || active === document.body || panelRef.value?.el?.contains(active)) {\n      menuInvoker(menuId)?.focus()\n    }\n  }\n}\n\n// Opening and closing from the model. The guard is what keeps the two directions from\n// chasing each other: a menu the browser has just closed already reports it here.\nwatch(open, (value) => {\n  if (value === shown.value) return\n  if (value) panelRef.value?.show()\n  else panelRef.value?.hide()\n})\n\n// @ssr — a watcher does not run during the server render, so a menu asked to be open\n// from the start would never be told to open. Replaying the initial state on mount is\n// what covers that case.\nonMounted(() => {\n  if (open.value) panelRef.value?.show()\n})\n</script>\n\n<template>\n  <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n  <VMenuPanel\n    :id=\"menuId\"\n    ref=\"panelRef\"\n    :placement=\"placement\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :width=\"width\"\n    :match-trigger=\"matchTrigger\"\n    @toggle=\"onToggle\"\n  >\n    <slot />\n  </VMenuPanel>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+DA,IAAM,IAAO,EAAoB,GAAC,MAA0B,GAwBtD,IAAW,EAA4C,IAAI,GAC3D,IAAS,EAAM,GACf,IAAQ,EAAI,EAAK,GAEjB,IAAe,SAAkC;GACrD,eAAe;GACf,iBAAiB;GACjB,iBAAiB,EAAK;GACtB,iBAAiB;EACnB,EAAE;EAIF,EAAQ,GAAS,EAAE,gBAAgB,EAAS,OAAO,KAAK,EAAE,CAAC;EAmB3D,SAAS,EAAS,GAAgB;GAGhC,IAFA,EAAM,QAAQ,GACd,EAAK,QAAQ,GACT,GACF,AAAI,EAAgB,SAAS,aAAa,IAAG,EAAS,OAAO,WAAW,IACnE,EAAS,OAAO,WAAW;QAC3B;IAIL,IAAM,IAAS,SAAS;IACxB,CAAI,CAAC,KAAU,MAAW,SAAS,QAAQ,EAAS,OAAO,IAAI,SAAS,CAAM,MAC5E,EAAY,CAAM,CAAC,EAAE,MAAM;GAE/B;EACF;SAIA,EAAM,IAAO,MAAU;GACjB,MAAU,EAAM,UAChB,IAAO,EAAS,OAAO,KAAK,IAC3B,EAAS,OAAO,KAAK;EAC5B,CAAC,GAKD,QAAgB;GACd,AAAI,EAAK,SAAO,EAAS,OAAO,KAAK;EACvC,CAAC,+BAIC,EAAqD,EAAA,QAAA,WAAA,EAA/B,cAAe,EAAA,MAAY,CAAA,GACjD,EAWa,GAAA;GAVV,IAAI,EAAA,CAAA;YACD;GAAJ,KAAI;GACH,WAAW,EAAA;GACX,MAAM,EAAA;GACN,SAAS,EAAA;GACT,OAAO,EAAA;GACP,iBAAe,EAAA;GACP;;oBAED,CAAR,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/components/VMenu/VMenuGroup.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-menu-group{gap:var(--vectis-space-1);flex-direction:column;display:flex}.v-menu-group-label{min-height:var(--control-height);padding:var(--vectis-space-1) var(--control-padding-inline);font-size:var(--vectis-text-overline-size);font-weight:var(--vectis-text-overline-weight);letter-spacing:var(--vectis-text-overline-tracking);color:var(--vectis-color-text-muted);align-items:center;display:flex}}

package/dist/components/VMenu/VMenuGroup.d.ts

@@ -0,0 +1,22 @@
+/**
+ * A named section inside a menu — "Sort by", "Recent files". The name is announced as
+ * the group's label rather than being read as one more item, and it is plain text: it
+ * cannot be chosen, and the arrow keys walk straight past it.
+ */
+interface MenuGroupProps {
+    /** The name of the section. It is a heading, not a command: nothing happens on click. */
+    label: string;
+}
+type __VLS_Slots = {
+    /** The commands belonging to this section. */
+    default(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<MenuGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MenuGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VMenu/VMenuGroup.js

@@ -0,0 +1,9 @@
+import './VMenuGroup.css';
+import e from "./VMenuGroup.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                           */
+//#region src/components/VMenu/VMenuGroup.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VMenuGroup.js.map