vectis-ui 0.14.0 → 0.16.0

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, 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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"}
+{"version":3,"file":"VInputOTP.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","VField","_mergeProps","_withCtx","_createElementVNode","_createElementBlock","_Fragment","_renderList","_unref","VIcon","_createTextVNode","_toDisplayString","VIcon_default","VField_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","VInputOTP_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","__emit","props","__props","m","useMessages","attrs","useAttrs","NATIVE_ONLY","split","computed","partitionAttrs","groupAttrs","nativeAttrs","rowLabel","fieldProps","isInvalid","model","useModel","emit","cells","slotIndex","char","i","slotCount","cell","isDev","filters","sanitize","text","rootEl","ref","digits","inputAt","slot","syncFromModel","clean","value","watch","count","firstEmpty","d","reachable","empty","removeAt","focusBox","el","commit","code","previous","distribute","allCells","start","startSlot","chars","raw","charIndex","lastFilled","onInput","event","filled","inserted","onFocus","onKeydown","last","target","options","openBlock","createBlock","mergeProps","withCtx","createElementVNode","createElementBlock","Fragment","renderList","unref","$event","iconProps","createTextVNode","toDisplayString","_cache"],"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  /** 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  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-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.js.map

@@ -1 +1 @@
-{"version":3,"file":"VLink.js","names":[],"sources":["../../../src/components/VLink/VLink.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * A native link painted in a tone. It takes its size from the text around it. An external link\n * opens in a new tab and says so, with an icon and words for assistive technology.\n */\nimport { computed, useAttrs } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { open_in_new as openInNewIcon } from '../VIcon/icons/open_in_new'\nimport type { IconSource } from '../VIcon/types'\nimport { useInertLink } from '../../composables/useInertLink'\nimport { useMessages } from '../../i18n/state'\n\n/**\n * The colour of the link. `neutral` takes the colour of the text; `inherit` takes the colour of\n * the parent and turns to the accent on hover.\n */\nexport type LinkTone = 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'inherit'\n\n/** When the link is underlined: always, on hover and focus only, or never. */\nexport type LinkUnderline = 'always' | 'hover' | 'none'\n\ninterface LinkProps {\n  /** Where the link goes. */\n  href: string\n  /**\n   * The colour of the link. `neutral` takes the colour of the text; `inherit` takes the colour of\n   * the parent, muted text for instance, and turns to the accent on hover.\n   */\n  tone?: LinkTone\n  /**\n   * When the link is underlined. Keep `always` inside running text, where colour alone does not\n   * tell a link apart; `hover` and `none` suit menus and lists of links.\n   */\n  underline?: LinkUnderline\n  /**\n   * Opens the link in a new tab, with `rel=\"noopener noreferrer\"`, and says so: an icon, and\n   * words for screen readers. A `target=\"_blank\"` passed as an attribute says so too.\n   */\n  external?: boolean\n  /** The icon marking an external link: an icon name, or an explicit render. */\n  externalIcon?: IconSource\n  /** Removes the icon of an external link. Screen readers still hear that it opens a new tab. */\n  hideExternalIcon?: boolean\n  /** Makes the link unusable: its address is removed and it is marked `aria-disabled`. */\n  disabled?: boolean\n}\n\n// The attributes are bound by hand: on a disabled link, useInertLink drops the click listeners.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<LinkProps>(), {\n  tone: 'accent',\n  underline: 'always',\n  external: false,\n  externalIcon: () => openInNewIcon,\n  hideExternalIcon: false,\n  disabled: false,\n})\n\ndefineSlots<{\n  /** The text of the link. */\n  default(): unknown\n}>()\n\nconst attrs = useAttrs()\nconst m = useMessages()\n\nconst link = useInertLink({\n  href: () => props.href,\n  inert: () => props.disabled,\n  attrs: () => attrs,\n})\n\nconst newTab = computed(() => props.external || attrs.target === '_blank')\n</script>\n\n<template>\n  <!-- `target` and `rel` come before the forwarded attributes, which may replace them. -->\n  <a\n    class=\"v-link v-tone\"\n    :data-tone=\"tone\"\n    :data-underline=\"underline\"\n    :target=\"external ? '_blank' : undefined\"\n    :rel=\"external ? 'noopener noreferrer' : undefined\"\n    :aria-disabled=\"link.isInertLink.value ? 'true' : undefined\"\n    v-bind=\"link.attrs.value\"\n    :href=\"link.linkHref.value\"\n    ><slot /><template v-if=\"newTab\"\n      ><VIcon\n        v-if=\"!hideExternalIcon\"\n        class=\"v-link-external\"\n        v-bind=\"iconProps(externalIcon)\"\n        mirrored\n      /><span class=\"v-visually-hidden\">{{ m.link.newTab }}</span></template\n    ></a\n  >\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The size, weight and line height are the surrounding text's. The icon follows that size too,\n   * whatever icon size an ancestor sets.\n   */\n  .v-link {\n    --vectis-icon-size: 1em;\n\n    border-radius: var(--vectis-radius-xs);\n    color: var(--tone-text-tinted);\n    text-decoration-line: none;\n    text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);\n    cursor: pointer;\n    transition: text-decoration-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-link[data-underline='always'],\n  .v-link[data-underline='hover']:is(:hover, :focus-visible) {\n    text-decoration-line: underline;\n  }\n\n  .v-link:hover {\n    text-decoration-color: currentcolor;\n  }\n\n  /* No tone table: the link blends into its sentence, and only the hover singles it out. */\n  .v-link[data-tone='inherit'] {\n    color: inherit;\n  }\n\n  /* A disabled link keeps its subtle colour: the rule further down would lose to this one. */\n  .v-link[data-tone='inherit']:hover:not([aria-disabled='true']) {\n    color: var(--vectis-color-accent-text);\n  }\n\n  .v-link:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-link-external {\n    margin-inline-start: var(--vectis-space-1);\n    vertical-align: middle;\n  }\n\n  .v-link[aria-disabled='true'] {\n    color: var(--vectis-color-text-subtle);\n    text-decoration-color: currentcolor;\n    cursor: not-allowed;\n  }\n\n  @media (forced-colors: active) {\n    .v-link[aria-disabled='true'] {\n      color: GrayText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-link {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VLink.js","names":["_sfc_main","VLink_vue_vue_type_script_setup_true_lang_default","VLink_default"],"sources":["../../../src/components/VLink/VLink.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * A native link painted in a tone. It takes its size from the text around it. An external link\n * opens in a new tab and says so, with an icon and words for assistive technology.\n */\nimport { computed, useAttrs } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { open_in_new as openInNewIcon } from '../VIcon/icons/open_in_new'\nimport type { IconSource } from '../VIcon/types'\nimport { useInertLink } from '../../composables/useInertLink'\nimport { useMessages } from '../../i18n/state'\n\n/**\n * The colour of the link. `neutral` takes the colour of the text; `inherit` takes the colour of\n * the parent and turns to the accent on hover.\n */\nexport type LinkTone = 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'inherit'\n\n/** When the link is underlined: always, on hover and focus only, or never. */\nexport type LinkUnderline = 'always' | 'hover' | 'none'\n\ninterface LinkProps {\n  /** Where the link goes. */\n  href: string\n  /**\n   * The colour of the link. `neutral` takes the colour of the text; `inherit` takes the colour of\n   * the parent, muted text for instance, and turns to the accent on hover.\n   */\n  tone?: LinkTone\n  /**\n   * When the link is underlined. Keep `always` inside running text, where colour alone does not\n   * tell a link apart; `hover` and `none` suit menus and lists of links.\n   */\n  underline?: LinkUnderline\n  /**\n   * Opens the link in a new tab, with `rel=\"noopener noreferrer\"`, and says so: an icon, and\n   * words for screen readers. A `target=\"_blank\"` passed as an attribute says so too.\n   */\n  external?: boolean\n  /** The icon marking an external link: an icon name, or an explicit render. */\n  externalIcon?: IconSource\n  /** Removes the icon of an external link. Screen readers still hear that it opens a new tab. */\n  hideExternalIcon?: boolean\n  /** Makes the link unusable: its address is removed and it is marked `aria-disabled`. */\n  disabled?: boolean\n}\n\n// The attributes are bound by hand: on a disabled link, useInertLink drops the click listeners.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<LinkProps>(), {\n  tone: 'accent',\n  underline: 'always',\n  external: false,\n  externalIcon: () => openInNewIcon,\n  hideExternalIcon: false,\n  disabled: false,\n})\n\ndefineSlots<{\n  /** The text of the link. */\n  default(): unknown\n}>()\n\nconst attrs = useAttrs()\nconst m = useMessages()\n\nconst link = useInertLink({\n  href: () => props.href,\n  inert: () => props.disabled,\n  attrs: () => attrs,\n})\n\nconst newTab = computed(() => props.external || attrs.target === '_blank')\n</script>\n\n<template>\n  <!-- `target` and `rel` come before the forwarded attributes, which may replace them. -->\n  <a\n    class=\"v-link v-tone\"\n    :data-tone=\"tone\"\n    :data-underline=\"underline\"\n    :target=\"external ? '_blank' : undefined\"\n    :rel=\"external ? 'noopener noreferrer' : undefined\"\n    :aria-disabled=\"link.isInertLink.value ? 'true' : undefined\"\n    v-bind=\"link.attrs.value\"\n    :href=\"link.linkHref.value\"\n    ><slot /><template v-if=\"newTab\"\n      ><VIcon\n        v-if=\"!hideExternalIcon\"\n        class=\"v-link-external\"\n        v-bind=\"iconProps(externalIcon)\"\n        mirrored\n      /><span class=\"v-visually-hidden\">{{ m.link.newTab }}</span></template\n    ></a\n  >\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The size, weight and line height are the surrounding text's. The icon follows that size too,\n   * whatever icon size an ancestor sets.\n   */\n  .v-link {\n    --vectis-icon-size: 1em;\n\n    border-radius: var(--vectis-radius-xs);\n    color: var(--tone-text-tinted);\n    text-decoration-line: none;\n    text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);\n    cursor: pointer;\n    transition: text-decoration-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-link[data-underline='always'],\n  .v-link[data-underline='hover']:is(:hover, :focus-visible) {\n    text-decoration-line: underline;\n  }\n\n  .v-link:hover {\n    text-decoration-color: currentcolor;\n  }\n\n  /* No tone table: the link blends into its sentence, and only the hover singles it out. */\n  .v-link[data-tone='inherit'] {\n    color: inherit;\n  }\n\n  /* A disabled link keeps its subtle colour: the rule further down would lose to this one. */\n  .v-link[data-tone='inherit']:hover:not([aria-disabled='true']) {\n    color: var(--vectis-color-accent-text);\n  }\n\n  .v-link:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-link-external {\n    margin-inline-start: var(--vectis-space-1);\n    vertical-align: middle;\n  }\n\n  .v-link[aria-disabled='true'] {\n    color: var(--vectis-color-text-subtle);\n    text-decoration-color: currentcolor;\n    cursor: not-allowed;\n  }\n\n  @media (forced-colors: active) {\n    .v-link[aria-disabled='true'] {\n      color: GrayText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-link {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VLink.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VLink/VLink.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * A native link painted in a tone. It takes its size from the text around it. An external link\n * opens in a new tab and says so, with an icon and words for assistive technology.\n */\nimport { computed, useAttrs } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { open_in_new as openInNewIcon } from '../VIcon/icons/open_in_new'\nimport type { IconSource } from '../VIcon/types'\nimport { useInertLink } from '../../composables/useInertLink'\nimport { useMessages } from '../../i18n/state'\n\n/**\n * The colour of the link. `neutral` takes the colour of the text; `inherit` takes the colour of\n * the parent and turns to the accent on hover.\n */\nexport type LinkTone = 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'inherit'\n\n/** When the link is underlined: always, on hover and focus only, or never. */\nexport type LinkUnderline = 'always' | 'hover' | 'none'\n\ninterface LinkProps {\n  /** Where the link goes. */\n  href: string\n  /**\n   * The colour of the link. `neutral` takes the colour of the text; `inherit` takes the colour of\n   * the parent, muted text for instance, and turns to the accent on hover.\n   */\n  tone?: LinkTone\n  /**\n   * When the link is underlined. Keep `always` inside running text, where colour alone does not\n   * tell a link apart; `hover` and `none` suit menus and lists of links.\n   */\n  underline?: LinkUnderline\n  /**\n   * Opens the link in a new tab, with `rel=\"noopener noreferrer\"`, and says so: an icon, and\n   * words for screen readers. A `target=\"_blank\"` passed as an attribute says so too.\n   */\n  external?: boolean\n  /** The icon marking an external link: an icon name, or an explicit render. */\n  externalIcon?: IconSource\n  /** Removes the icon of an external link. Screen readers still hear that it opens a new tab. */\n  hideExternalIcon?: boolean\n  /** Makes the link unusable: its address is removed and it is marked `aria-disabled`. */\n  disabled?: boolean\n}\n\n// The attributes are bound by hand: on a disabled link, useInertLink drops the click listeners.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<LinkProps>(), {\n  tone: 'accent',\n  underline: 'always',\n  external: false,\n  externalIcon: () => openInNewIcon,\n  hideExternalIcon: false,\n  disabled: false,\n})\n\ndefineSlots<{\n  /** The text of the link. */\n  default(): unknown\n}>()\n\nconst attrs = useAttrs()\nconst m = useMessages()\n\nconst link = useInertLink({\n  href: () => props.href,\n  inert: () => props.disabled,\n  attrs: () => attrs,\n})\n\nconst newTab = computed(() => props.external || attrs.target === '_blank')\n</script>\n\n<template>\n  <!-- `target` and `rel` come before the forwarded attributes, which may replace them. -->\n  <a\n    class=\"v-link v-tone\"\n    :data-tone=\"tone\"\n    :data-underline=\"underline\"\n    :target=\"external ? '_blank' : undefined\"\n    :rel=\"external ? 'noopener noreferrer' : undefined\"\n    :aria-disabled=\"link.isInertLink.value ? 'true' : undefined\"\n    v-bind=\"link.attrs.value\"\n    :href=\"link.linkHref.value\"\n    ><slot /><template v-if=\"newTab\"\n      ><VIcon\n        v-if=\"!hideExternalIcon\"\n        class=\"v-link-external\"\n        v-bind=\"iconProps(externalIcon)\"\n        mirrored\n      /><span class=\"v-visually-hidden\">{{ m.link.newTab }}</span></template\n    ></a\n  >\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The size, weight and line height are the surrounding text's. The icon follows that size too,\n   * whatever icon size an ancestor sets.\n   */\n  .v-link {\n    --vectis-icon-size: 1em;\n\n    border-radius: var(--vectis-radius-xs);\n    color: var(--tone-text-tinted);\n    text-decoration-line: none;\n    text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);\n    cursor: pointer;\n    transition: text-decoration-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-link[data-underline='always'],\n  .v-link[data-underline='hover']:is(:hover, :focus-visible) {\n    text-decoration-line: underline;\n  }\n\n  .v-link:hover {\n    text-decoration-color: currentcolor;\n  }\n\n  /* No tone table: the link blends into its sentence, and only the hover singles it out. */\n  .v-link[data-tone='inherit'] {\n    color: inherit;\n  }\n\n  /* A disabled link keeps its subtle colour: the rule further down would lose to this one. */\n  .v-link[data-tone='inherit']:hover:not([aria-disabled='true']) {\n    color: var(--vectis-color-accent-text);\n  }\n\n  .v-link:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-link-external {\n    margin-inline-start: var(--vectis-space-1);\n    vertical-align: middle;\n  }\n\n  .v-link[aria-disabled='true'] {\n    color: var(--vectis-color-text-subtle);\n    text-decoration-color: currentcolor;\n    cursor: not-allowed;\n  }\n\n  @media (forced-colors: active) {\n    .v-link[aria-disabled='true'] {\n      color: GrayText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-link {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDA,IAAM,IAAQ,GAcR,IAAQ,EAAS,GACjB,IAAI,EAAY,GAEhB,IAAO,EAAa;GACxB,YAAY,EAAM;GAClB,aAAa,EAAM;GACnB,aAAa;EACf,CAAC,GAEK,IAAS,QAAe,EAAM,YAAY,EAAM,WAAW,QAAQ;yBAKvE,EAiBC,KAjBD,EAiBC;GAhBC,OAAM;GACL,aAAW,EAAA;GACX,kBAAgB,EAAA;GAChB,QAAQ,EAAA,WAAQ,WAAc,KAAA;GAC9B,KAAK,EAAA,WAAQ,wBAA2B,KAAA;GACxC,iBAAe,EAAA,CAAA,CAAI,CAAC,YAAY,QAAK,SAAY,KAAA;KAC1C,EAAA,CAAA,CAAI,CAAC,MAAM,OAAK,EACvB,MAAM,EAAA,CAAA,CAAI,CAAC,SAAS,MAAA,CAAA,GAAA,CACpB,EAAQ,EAAA,QAAA,SAAA,GAAgB,EAAA,SAAA,EAAA,GAAhB,EAOR,GAAA,EAAA,KAAA,EAAA,GAAA,CALU,EAAA,mBAGC,EAAA,IAAA,EAAA,KAHD,EAAA,GADR,EAKC,GALD,EAKC;;GAHA,OAAM;KACE,EAAA,CAAA,CAAS,CAAC,EAAA,YAAY,GAAA,EAC9B,UAAA,GAAQ,CAAA,GAAA,MAAA,EAAA,IACR,EAA0D,QAA1D,GAA0D,EAAvB,EAAA,CAAA,CAAC,CAAC,KAAK,MAAM,GAAA,CAAA,CAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA,CAAA"}
+{"version":3,"file":"VLink.vue_vue_type_script_setup_true_lang.js","names":["openInNewIcon","_openBlock","_createElementBlock","_mergeProps","_unref","_renderSlot","_Fragment","_createBlock","VIcon","_createCommentVNode","_createElementVNode","_toDisplayString","VIcon_default","_hoisted_1","_hoisted_2","VLink_vue_vue_type_script_setup_true_lang_default","open_in_new","props","__props","attrs","useAttrs","m","useMessages","link","useInertLink","newTab","computed","openBlock","createElementBlock","mergeProps","unref","renderSlot","_ctx","Fragment","createCommentVNode","createBlock","iconProps","createElementVNode","toDisplayString"],"sources":["../../../src/components/VLink/VLink.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * A native link painted in a tone. It takes its size from the text around it. An external link\n * opens in a new tab and says so, with an icon and words for assistive technology.\n */\nimport { computed, useAttrs } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { open_in_new as openInNewIcon } from '../VIcon/icons/open_in_new'\nimport type { IconSource } from '../VIcon/types'\nimport { useInertLink } from '../../composables/useInertLink'\nimport { useMessages } from '../../i18n/state'\n\n/**\n * The colour of the link. `neutral` takes the colour of the text; `inherit` takes the colour of\n * the parent and turns to the accent on hover.\n */\nexport type LinkTone = 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'inherit'\n\n/** When the link is underlined: always, on hover and focus only, or never. */\nexport type LinkUnderline = 'always' | 'hover' | 'none'\n\ninterface LinkProps {\n  /** Where the link goes. */\n  href: string\n  /**\n   * The colour of the link. `neutral` takes the colour of the text; `inherit` takes the colour of\n   * the parent, muted text for instance, and turns to the accent on hover.\n   */\n  tone?: LinkTone\n  /**\n   * When the link is underlined. Keep `always` inside running text, where colour alone does not\n   * tell a link apart; `hover` and `none` suit menus and lists of links.\n   */\n  underline?: LinkUnderline\n  /**\n   * Opens the link in a new tab, with `rel=\"noopener noreferrer\"`, and says so: an icon, and\n   * words for screen readers. A `target=\"_blank\"` passed as an attribute says so too.\n   */\n  external?: boolean\n  /** The icon marking an external link: an icon name, or an explicit render. */\n  externalIcon?: IconSource\n  /** Removes the icon of an external link. Screen readers still hear that it opens a new tab. */\n  hideExternalIcon?: boolean\n  /** Makes the link unusable: its address is removed and it is marked `aria-disabled`. */\n  disabled?: boolean\n}\n\n// The attributes are bound by hand: on a disabled link, useInertLink drops the click listeners.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<LinkProps>(), {\n  tone: 'accent',\n  underline: 'always',\n  external: false,\n  externalIcon: () => openInNewIcon,\n  hideExternalIcon: false,\n  disabled: false,\n})\n\ndefineSlots<{\n  /** The text of the link. */\n  default(): unknown\n}>()\n\nconst attrs = useAttrs()\nconst m = useMessages()\n\nconst link = useInertLink({\n  href: () => props.href,\n  inert: () => props.disabled,\n  attrs: () => attrs,\n})\n\nconst newTab = computed(() => props.external || attrs.target === '_blank')\n</script>\n\n<template>\n  <!-- `target` and `rel` come before the forwarded attributes, which may replace them. -->\n  <a\n    class=\"v-link v-tone\"\n    :data-tone=\"tone\"\n    :data-underline=\"underline\"\n    :target=\"external ? '_blank' : undefined\"\n    :rel=\"external ? 'noopener noreferrer' : undefined\"\n    :aria-disabled=\"link.isInertLink.value ? 'true' : undefined\"\n    v-bind=\"link.attrs.value\"\n    :href=\"link.linkHref.value\"\n    ><slot /><template v-if=\"newTab\"\n      ><VIcon\n        v-if=\"!hideExternalIcon\"\n        class=\"v-link-external\"\n        v-bind=\"iconProps(externalIcon)\"\n        mirrored\n      /><span class=\"v-visually-hidden\">{{ m.link.newTab }}</span></template\n    ></a\n  >\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The size, weight and line height are the surrounding text's. The icon follows that size too,\n   * whatever icon size an ancestor sets.\n   */\n  .v-link {\n    --vectis-icon-size: 1em;\n\n    border-radius: var(--vectis-radius-xs);\n    color: var(--tone-text-tinted);\n    text-decoration-line: none;\n    text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);\n    cursor: pointer;\n    transition: text-decoration-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-link[data-underline='always'],\n  .v-link[data-underline='hover']:is(:hover, :focus-visible) {\n    text-decoration-line: underline;\n  }\n\n  .v-link:hover {\n    text-decoration-color: currentcolor;\n  }\n\n  /* No tone table: the link blends into its sentence, and only the hover singles it out. */\n  .v-link[data-tone='inherit'] {\n    color: inherit;\n  }\n\n  /* A disabled link keeps its subtle colour: the rule further down would lose to this one. */\n  .v-link[data-tone='inherit']:hover:not([aria-disabled='true']) {\n    color: var(--vectis-color-accent-text);\n  }\n\n  .v-link:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-link-external {\n    margin-inline-start: var(--vectis-space-1);\n    vertical-align: middle;\n  }\n\n  .v-link[aria-disabled='true'] {\n    color: var(--vectis-color-text-subtle);\n    text-decoration-color: currentcolor;\n    cursor: not-allowed;\n  }\n\n  @media (forced-colors: active) {\n    .v-link[aria-disabled='true'] {\n      color: GrayText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-link {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDA,IAAMiB,IAAQC,GAcRC,IAAQC,EAAS,GACjBC,IAAIC,EAAY,GAEhBC,IAAOC,EAAa;GACxB,YAAYP,EAAM;GAClB,aAAaA,EAAM;GACnB,aAAaE;EACf,CAAC,GAEKM,IAASC,QAAeT,EAAM,YAAYE,EAAM,WAAW,QAAQ;oBAKvElB,EAAA,GAAAC,EAiBC,KAjBDC,EAiBC;GAhBC,OAAM;GACL,aAAWe,EAAA;GACX,kBAAgBA,EAAA;GAChB,QAAQA,EAAA,WAAQ,WAAc,KAAA;GAC9B,KAAKA,EAAA,WAAQ,wBAA2B,KAAA;GACxC,iBAAed,EAAAmB,CAAA,CAAI,CAAC,YAAY,QAAK,SAAY,KAAA;EAC1C,GAAAnB,EAAAmB,CAAA,CAAI,CAAC,MAAM,OAAK,EACvB,MAAMnB,EAAAmB,CAAA,CAAI,CAAC,SAAS,MAAA,CAAA,GAAA,CACpBlB,EAAQ2B,EAAA,QAAA,SAAA,GAAgBP,EAAA,SAAhBxB,EAAA,GAAAC,EAORI,GAAA,EAAA,KAAA,EAAA,GAAA,CALUY,EAAA,mBAGCgB,EAAA,IAAA,EAAA,KAJTjC,EAAA,GAAAM,EAKCC,GALDL,EAKC;;GAHA,OAAM;EACE,GAAAC,EAAAgC,CAAA,CAAS,CAAClB,EAAA,YAAY,GAAA,EAC9B,UAAA,GAAQ,CAAA,GAAA,MAAA,EAAA,IACRR,EAA0D,QAA1DI,GAA0DH,EAAvBP,EAAAiB,CAAA,CAAC,CAAC,KAAK,MAAM,GAAA,CAAA,CAAA,GAAA,EAAA,KAAAa,EAAA,IAAA,EAAA,CAAA,GAAA,IAAArB,CAAA"}

package/dist/components/VListbox/VListboxChevron.js.map

@@ -1 +1 @@
-{"version":3,"file":"VListboxChevron.js","names":[],"sources":["../../../src/components/VListbox/VListboxChevron.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Draw the chevron at the end of a field owning a listbox, turned while the list is open. It is\n * decorative: the field itself says whether the list is expanded.\n */\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\ninterface ListboxChevronProps {\n  /** The icon to draw. */\n  icon: IconSource\n  /** Whether the list is open. */\n  open?: boolean\n}\n\nwithDefaults(defineProps<ListboxChevronProps>(), { open: false })\n</script>\n\n<template>\n  <!-- `.v-input-icon-end` lets VInput pin it to the end of the field and reserve its room. -->\n  <VIcon\n    v-bind=\"iconProps(icon)\"\n    class=\"v-listbox-chevron v-input-icon-end\"\n    :data-open=\"open ? '' : undefined\"\n    aria-hidden=\"true\"\n  />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-listbox-chevron {\n    color: var(--vectis-color-text-muted);\n    transition: rotate var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-listbox-chevron[data-open] {\n    rotate: 180deg;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-listbox-chevron {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VListboxChevron.js","names":["_sfc_main","VListboxChevron_vue_vue_type_script_setup_true_lang_default","VListboxChevron_default"],"sources":["../../../src/components/VListbox/VListboxChevron.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Draw the chevron at the end of a field owning a listbox, turned while the list is open. It is\n * decorative: the field itself says whether the list is expanded.\n */\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\ninterface ListboxChevronProps {\n  /** The icon to draw. */\n  icon: IconSource\n  /** Whether the list is open. */\n  open?: boolean\n}\n\nwithDefaults(defineProps<ListboxChevronProps>(), { open: false })\n</script>\n\n<template>\n  <!-- `.v-input-icon-end` lets VInput pin it to the end of the field and reserve its room. -->\n  <VIcon\n    v-bind=\"iconProps(icon)\"\n    class=\"v-listbox-chevron v-input-icon-end\"\n    :data-open=\"open ? '' : undefined\"\n    aria-hidden=\"true\"\n  />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-listbox-chevron {\n    color: var(--vectis-color-text-muted);\n    transition: rotate var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-listbox-chevron[data-open] {\n    rotate: 180deg;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-listbox-chevron {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VListbox/VListboxChevron.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"VListboxChevron.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VListbox/VListboxChevron.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Draw the chevron at the end of a field owning a listbox, turned while the list is open. It is\n * decorative: the field itself says whether the list is expanded.\n */\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\ninterface ListboxChevronProps {\n  /** The icon to draw. */\n  icon: IconSource\n  /** Whether the list is open. */\n  open?: boolean\n}\n\nwithDefaults(defineProps<ListboxChevronProps>(), { open: false })\n</script>\n\n<template>\n  <!-- `.v-input-icon-end` lets VInput pin it to the end of the field and reserve its room. -->\n  <VIcon\n    v-bind=\"iconProps(icon)\"\n    class=\"v-listbox-chevron v-input-icon-end\"\n    :data-open=\"open ? '' : undefined\"\n    aria-hidden=\"true\"\n  />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-listbox-chevron {\n    color: var(--vectis-color-text-muted);\n    transition: rotate var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-listbox-chevron[data-open] {\n    rotate: 180deg;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-listbox-chevron {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;yBAqBE,EAKE,GALF,EACU,EAIR,CAAA,CAJiB,CAAC,EAAA,IAAI,GAAA;GACtB,OAAM;GACL,aAAW,EAAA,OAAI,KAAQ,KAAA;GACxB,eAAY"}
+{"version":3,"file":"VListboxChevron.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","VIcon","_mergeProps","_unref","VIcon_default","VListboxChevron_vue_vue_type_script_setup_true_lang_default","openBlock","createBlock","mergeProps","unref","iconProps","__props"],"sources":["../../../src/components/VListbox/VListboxChevron.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Draw the chevron at the end of a field owning a listbox, turned while the list is open. It is\n * decorative: the field itself says whether the list is expanded.\n */\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\ninterface ListboxChevronProps {\n  /** The icon to draw. */\n  icon: IconSource\n  /** Whether the list is open. */\n  open?: boolean\n}\n\nwithDefaults(defineProps<ListboxChevronProps>(), { open: false })\n</script>\n\n<template>\n  <!-- `.v-input-icon-end` lets VInput pin it to the end of the field and reserve its room. -->\n  <VIcon\n    v-bind=\"iconProps(icon)\"\n    class=\"v-listbox-chevron v-input-icon-end\"\n    :data-open=\"open ? '' : undefined\"\n    aria-hidden=\"true\"\n  />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-listbox-chevron {\n    color: var(--vectis-color-text-muted);\n    transition: rotate var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-listbox-chevron[data-open] {\n    rotate: 180deg;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-listbox-chevron {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;oBAqBEA,EAAA,GAAAC,EAKEC,GALFC,EACUC,EAIRO,CAAA,CAJiB,CAACC,EAAA,IAAI,GAAA;GACtB,OAAM;GACL,aAAWA,EAAA,OAAI,KAAQ,KAAA;GACxB,eAAY"}

package/dist/components/VListbox/VListboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"VListboxGroup.js","names":[],"sources":["../../../src/components/VListbox/VListboxGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Group generated options under their accessible label; groups and options are the listbox's\n * permitted children. The panel renders the heading among the group's rows, so the virtual mode\n * can measure it and leave it out like any other row.\n */\n\ninterface ListboxGroupProps {\n  /** The name of the block. */\n  label: string\n  /**\n   * The id of the heading rendered inside the group, which then names it. Without one, the\n   * heading is out of the rendered window and the name is given as `aria-label`.\n   */\n  labelId?: string\n}\n\ndefineProps<ListboxGroupProps>()\n\ndefineSlots<{\n  /** The heading and the options belonging to this block. */\n  default(): unknown\n}>()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    class=\"v-listbox-group\"\n    :aria-labelledby=\"labelId\"\n    :aria-label=\"labelId ? undefined : label\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * It refuses to shrink, where a menu group has no need to: this panel is a column of bounded\n   * height that scrolls, and a block left free to shrink would be squashed to make its content\n   * fit; the same reason the state rows and the foot of the list refuse it too. Its gap matches\n   * the panel's, which the virtual mode relies on to size the space standing for hidden rows.\n   */\n  .v-listbox-group {\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n  }\n\n  /* The heading is a row of the panel: it is not something that can be chosen. */\n  .v-listbox-group-label {\n    display: flex;\n    flex: none;\n    align-items: center;\n    min-block-size: var(--control-height);\n    padding-block: var(--vectis-space-1);\n    padding-inline: var(--control-padding-inline);\n    font-size: var(--vectis-text-overline-size);\n    font-weight: var(--vectis-text-overline-weight);\n    letter-spacing: var(--vectis-text-overline-tracking);\n    color: var(--vectis-color-text-muted);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VListboxGroup.js","names":["_sfc_main","VListboxGroup_vue_vue_type_script_setup_true_lang_default","VListboxGroup_default"],"sources":["../../../src/components/VListbox/VListboxGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Group generated options under their accessible label; groups and options are the listbox's\n * permitted children. The panel renders the heading among the group's rows, so the virtual mode\n * can measure it and leave it out like any other row.\n */\n\ninterface ListboxGroupProps {\n  /** The name of the block. */\n  label: string\n  /**\n   * The id of the heading rendered inside the group, which then names it. Without one, the\n   * heading is out of the rendered window and the name is given as `aria-label`.\n   */\n  labelId?: string\n}\n\ndefineProps<ListboxGroupProps>()\n\ndefineSlots<{\n  /** The heading and the options belonging to this block. */\n  default(): unknown\n}>()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    class=\"v-listbox-group\"\n    :aria-labelledby=\"labelId\"\n    :aria-label=\"labelId ? undefined : label\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * It refuses to shrink, where a menu group has no need to: this panel is a column of bounded\n   * height that scrolls, and a block left free to shrink would be squashed to make its content\n   * fit; the same reason the state rows and the foot of the list refuse it too. Its gap matches\n   * the panel's, which the virtual mode relies on to size the space standing for hidden rows.\n   */\n  .v-listbox-group {\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n  }\n\n  /* The heading is a row of the panel: it is not something that can be chosen. */\n  .v-listbox-group-label {\n    display: flex;\n    flex: none;\n    align-items: center;\n    min-block-size: var(--control-height);\n    padding-block: var(--vectis-space-1);\n    padding-inline: var(--control-padding-inline);\n    font-size: var(--vectis-text-overline-size);\n    font-weight: var(--vectis-text-overline-weight);\n    letter-spacing: var(--vectis-text-overline-tracking);\n    color: var(--vectis-color-text-muted);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VListbox/VListboxGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"VListboxGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VListbox/VListboxGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Group generated options under their accessible label; groups and options are the listbox's\n * permitted children. The panel renders the heading among the group's rows, so the virtual mode\n * can measure it and leave it out like any other row.\n */\n\ninterface ListboxGroupProps {\n  /** The name of the block. */\n  label: string\n  /**\n   * The id of the heading rendered inside the group, which then names it. Without one, the\n   * heading is out of the rendered window and the name is given as `aria-label`.\n   */\n  labelId?: string\n}\n\ndefineProps<ListboxGroupProps>()\n\ndefineSlots<{\n  /** The heading and the options belonging to this block. */\n  default(): unknown\n}>()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    class=\"v-listbox-group\"\n    :aria-labelledby=\"labelId\"\n    :aria-label=\"labelId ? undefined : label\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * It refuses to shrink, where a menu group has no need to: this panel is a column of bounded\n   * height that scrolls, and a block left free to shrink would be squashed to make its content\n   * fit; the same reason the state rows and the foot of the list refuse it too. Its gap matches\n   * the panel's, which the virtual mode relies on to size the space standing for hidden rows.\n   */\n  .v-listbox-group {\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n  }\n\n  /* The heading is a row of the panel: it is not something that can be chosen. */\n  .v-listbox-group-label {\n    display: flex;\n    flex: none;\n    align-items: center;\n    min-block-size: var(--control-height);\n    padding-block: var(--vectis-space-1);\n    padding-inline: var(--control-padding-inline);\n    font-size: var(--vectis-text-overline-size);\n    font-weight: var(--vectis-text-overline-weight);\n    letter-spacing: var(--vectis-text-overline-tracking);\n    color: var(--vectis-color-text-muted);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;yBA0BE,EAOM,OAAA;GANJ,MAAK;GACL,OAAM;GACL,mBAAiB,EAAA;GACjB,cAAY,EAAA,UAAU,KAAA,IAAY,EAAA;MAEnC,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA"}
+{"version":3,"file":"VListboxGroup.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_renderSlot","_hoisted_1","VListboxGroup_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","__props","renderSlot","_ctx"],"sources":["../../../src/components/VListbox/VListboxGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Group generated options under their accessible label; groups and options are the listbox's\n * permitted children. The panel renders the heading among the group's rows, so the virtual mode\n * can measure it and leave it out like any other row.\n */\n\ninterface ListboxGroupProps {\n  /** The name of the block. */\n  label: string\n  /**\n   * The id of the heading rendered inside the group, which then names it. Without one, the\n   * heading is out of the rendered window and the name is given as `aria-label`.\n   */\n  labelId?: string\n}\n\ndefineProps<ListboxGroupProps>()\n\ndefineSlots<{\n  /** The heading and the options belonging to this block. */\n  default(): unknown\n}>()\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    class=\"v-listbox-group\"\n    :aria-labelledby=\"labelId\"\n    :aria-label=\"labelId ? undefined : label\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * It refuses to shrink, where a menu group has no need to: this panel is a column of bounded\n   * height that scrolls, and a block left free to shrink would be squashed to make its content\n   * fit; the same reason the state rows and the foot of the list refuse it too. Its gap matches\n   * the panel's, which the virtual mode relies on to size the space standing for hidden rows.\n   */\n  .v-listbox-group {\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n  }\n\n  /* The heading is a row of the panel: it is not something that can be chosen. */\n  .v-listbox-group-label {\n    display: flex;\n    flex: none;\n    align-items: center;\n    min-block-size: var(--control-height);\n    padding-block: var(--vectis-space-1);\n    padding-inline: var(--control-padding-inline);\n    font-size: var(--vectis-text-overline-size);\n    font-weight: var(--vectis-text-overline-weight);\n    letter-spacing: var(--vectis-text-overline-tracking);\n    color: var(--vectis-color-text-muted);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;oBA0BEA,EAAA,GAAAC,EAOM,OAAA;GANJ,MAAK;GACL,OAAM;GACL,mBAAiBM,EAAA;GACjB,cAAYA,EAAA,UAAU,KAAA,IAAYA,EAAA;EAEnCL,GAAAA,CAAAA,EAAQO,EAAA,QAAA,SAAA,CAAA,GAAA,GAAAN,CAAA"}

package/dist/components/VListbox/VListboxOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"VListboxOption.js","names":[],"sources":["../../../src/components/VListbox/VListboxOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Options use aria-disabled while field focus stays on aria-activedescendant; do not apply\n * native disabling to the active-descendant target.\n */\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { check as checkIcon } from '../VIcon/icons/check'\nimport type { IconSource } from '../VIcon/types'\n\ninterface ListboxOptionProps {\n  /** An icon before the label: an icon name, or an explicit render. */\n  icon?: IconSource\n  /** Marks the option as one of the chosen ones, which also draws the tick. */\n  selected?: boolean\n  /** Marks the option as the one currently highlighted. The field decides this. */\n  active?: boolean\n  /** Shows the option without allowing it to be chosen. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<ListboxOptionProps>(), {\n  icon: undefined,\n  selected: false,\n  active: false,\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  /** The option was clicked. What that does to the selection is the field's business. */\n  select: []\n}>()\n\ndefineSlots<{\n  /** What the row shows. */\n  default?(): unknown\n}>()\n\nfunction onClick() {\n  if (props.disabled) return\n  emit('select')\n}\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    role=\"option\"\n    tabindex=\"-1\"\n    class=\"v-listbox-option\"\n    :aria-selected=\"selected\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n    :data-active=\"active ? '' : undefined\"\n    @click=\"onClick\"\n  >\n    <VIcon v-if=\"icon\" v-bind=\"iconProps(icon)\" />\n    <span class=\"v-listbox-option-label\"><slot /></span>\n    <VIcon v-if=\"selected\" :name=\"checkIcon\" class=\"v-listbox-option-check\" />\n  </button>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-listbox-option {\n    /*\n     * Every dimension is inherited from the panel, which carries the shared size class, and the\n     * icons follow through the same inheritance. The type is composite, exactly as in a menu\n     * row: the SIZE comes from the scale, the line height stays that of body text; a unitless\n     * ratio, so it follows the size; and the weight stays regular, since a row may wrap.\n     */\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    width: 100%;\n    min-height: var(--control-height);\n    padding: var(--vectis-space-1) var(--control-padding-inline);\n    border: none;\n    background: transparent;\n    color: var(--vectis-color-text);\n    border-radius: min(var(--vectis-radius-interactive), calc(var(--control-height) / 2));\n    font-family: inherit;\n    font-size: var(--control-font-size);\n    line-height: var(--vectis-text-body-md-leading);\n    text-align: start;\n    cursor: pointer;\n  }\n\n  /* The zero minimum is what allows a long label to be compressed at all: a flex item\n     otherwise refuses to shrink below its own content. */\n  .v-listbox-option-label {\n    flex: 1;\n    min-inline-size: 0;\n  }\n\n  /* A row is highlighted by the pointer resting on it, or by being the current one. There\n     is deliberately no focus rule: the focus never arrives here, it stays in the field. */\n  .v-listbox-option:hover:not([aria-disabled='true']),\n  .v-listbox-option[data-active] {\n    background: var(--vectis-color-surface-muted);\n    outline: none;\n  }\n\n  .v-listbox-option[aria-selected='true'] {\n    color: var(--vectis-color-accent-text);\n  }\n\n  /*\n   * Matched on the ARIA state and not on the native one, which this component deliberately\n   * never sets; see the introduction.\n   */\n  .v-listbox-option[aria-disabled='true'] {\n    background: transparent;\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VListboxOption.js","names":["_sfc_main","VListboxOption_vue_vue_type_script_setup_true_lang_default","VListboxOption_default"],"sources":["../../../src/components/VListbox/VListboxOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Options use aria-disabled while field focus stays on aria-activedescendant; do not apply\n * native disabling to the active-descendant target.\n */\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { check as checkIcon } from '../VIcon/icons/check'\nimport type { IconSource } from '../VIcon/types'\n\ninterface ListboxOptionProps {\n  /** An icon before the label: an icon name, or an explicit render. */\n  icon?: IconSource\n  /** Marks the option as one of the chosen ones, which also draws the tick. */\n  selected?: boolean\n  /** Marks the option as the one currently highlighted. The field decides this. */\n  active?: boolean\n  /** Shows the option without allowing it to be chosen. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<ListboxOptionProps>(), {\n  icon: undefined,\n  selected: false,\n  active: false,\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  /** The option was clicked. What that does to the selection is the field's business. */\n  select: []\n}>()\n\ndefineSlots<{\n  /** What the row shows. */\n  default?(): unknown\n}>()\n\nfunction onClick() {\n  if (props.disabled) return\n  emit('select')\n}\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    role=\"option\"\n    tabindex=\"-1\"\n    class=\"v-listbox-option\"\n    :aria-selected=\"selected\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n    :data-active=\"active ? '' : undefined\"\n    @click=\"onClick\"\n  >\n    <VIcon v-if=\"icon\" v-bind=\"iconProps(icon)\" />\n    <span class=\"v-listbox-option-label\"><slot /></span>\n    <VIcon v-if=\"selected\" :name=\"checkIcon\" class=\"v-listbox-option-check\" />\n  </button>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-listbox-option {\n    /*\n     * Every dimension is inherited from the panel, which carries the shared size class, and the\n     * icons follow through the same inheritance. The type is composite, exactly as in a menu\n     * row: the SIZE comes from the scale, the line height stays that of body text; a unitless\n     * ratio, so it follows the size; and the weight stays regular, since a row may wrap.\n     */\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    width: 100%;\n    min-height: var(--control-height);\n    padding: var(--vectis-space-1) var(--control-padding-inline);\n    border: none;\n    background: transparent;\n    color: var(--vectis-color-text);\n    border-radius: min(var(--vectis-radius-interactive), calc(var(--control-height) / 2));\n    font-family: inherit;\n    font-size: var(--control-font-size);\n    line-height: var(--vectis-text-body-md-leading);\n    text-align: start;\n    cursor: pointer;\n  }\n\n  /* The zero minimum is what allows a long label to be compressed at all: a flex item\n     otherwise refuses to shrink below its own content. */\n  .v-listbox-option-label {\n    flex: 1;\n    min-inline-size: 0;\n  }\n\n  /* A row is highlighted by the pointer resting on it, or by being the current one. There\n     is deliberately no focus rule: the focus never arrives here, it stays in the field. */\n  .v-listbox-option:hover:not([aria-disabled='true']),\n  .v-listbox-option[data-active] {\n    background: var(--vectis-color-surface-muted);\n    outline: none;\n  }\n\n  .v-listbox-option[aria-selected='true'] {\n    color: var(--vectis-color-accent-text);\n  }\n\n  /*\n   * Matched on the ARIA state and not on the native one, which this component deliberately\n   * never sets; see the introduction.\n   */\n  .v-listbox-option[aria-disabled='true'] {\n    background: transparent;\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VListbox/VListboxOption.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"VListboxOption.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VListbox/VListboxOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Options use aria-disabled while field focus stays on aria-activedescendant; do not apply\n * native disabling to the active-descendant target.\n */\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { check as checkIcon } from '../VIcon/icons/check'\nimport type { IconSource } from '../VIcon/types'\n\ninterface ListboxOptionProps {\n  /** An icon before the label: an icon name, or an explicit render. */\n  icon?: IconSource\n  /** Marks the option as one of the chosen ones, which also draws the tick. */\n  selected?: boolean\n  /** Marks the option as the one currently highlighted. The field decides this. */\n  active?: boolean\n  /** Shows the option without allowing it to be chosen. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<ListboxOptionProps>(), {\n  icon: undefined,\n  selected: false,\n  active: false,\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  /** The option was clicked. What that does to the selection is the field's business. */\n  select: []\n}>()\n\ndefineSlots<{\n  /** What the row shows. */\n  default?(): unknown\n}>()\n\nfunction onClick() {\n  if (props.disabled) return\n  emit('select')\n}\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    role=\"option\"\n    tabindex=\"-1\"\n    class=\"v-listbox-option\"\n    :aria-selected=\"selected\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n    :data-active=\"active ? '' : undefined\"\n    @click=\"onClick\"\n  >\n    <VIcon v-if=\"icon\" v-bind=\"iconProps(icon)\" />\n    <span class=\"v-listbox-option-label\"><slot /></span>\n    <VIcon v-if=\"selected\" :name=\"checkIcon\" class=\"v-listbox-option-check\" />\n  </button>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-listbox-option {\n    /*\n     * Every dimension is inherited from the panel, which carries the shared size class, and the\n     * icons follow through the same inheritance. The type is composite, exactly as in a menu\n     * row: the SIZE comes from the scale, the line height stays that of body text; a unitless\n     * ratio, so it follows the size; and the weight stays regular, since a row may wrap.\n     */\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    width: 100%;\n    min-height: var(--control-height);\n    padding: var(--vectis-space-1) var(--control-padding-inline);\n    border: none;\n    background: transparent;\n    color: var(--vectis-color-text);\n    border-radius: min(var(--vectis-radius-interactive), calc(var(--control-height) / 2));\n    font-family: inherit;\n    font-size: var(--control-font-size);\n    line-height: var(--vectis-text-body-md-leading);\n    text-align: start;\n    cursor: pointer;\n  }\n\n  /* The zero minimum is what allows a long label to be compressed at all: a flex item\n     otherwise refuses to shrink below its own content. */\n  .v-listbox-option-label {\n    flex: 1;\n    min-inline-size: 0;\n  }\n\n  /* A row is highlighted by the pointer resting on it, or by being the current one. There\n     is deliberately no focus rule: the focus never arrives here, it stays in the field. */\n  .v-listbox-option:hover:not([aria-disabled='true']),\n  .v-listbox-option[data-active] {\n    background: var(--vectis-color-surface-muted);\n    outline: none;\n  }\n\n  .v-listbox-option[aria-selected='true'] {\n    color: var(--vectis-color-accent-text);\n  }\n\n  /*\n   * Matched on the ARIA state and not on the native one, which this component deliberately\n   * never sets; see the introduction.\n   */\n  .v-listbox-option[aria-disabled='true'] {\n    background: transparent;\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsBA,IAAM,IAAQ,GAOR,IAAO;EAUb,SAAS,IAAU;GACb,EAAM,YACV,EAAK,QAAQ;EACf;yBAIE,EAaS,UAAA;GAZP,MAAK;GACL,MAAK;GACL,UAAS;GACT,OAAM;GACL,iBAAe,EAAA;GACf,iBAAe,EAAA,WAAQ,SAAY,KAAA;GACnC,eAAa,EAAA,SAAM,KAAQ,KAAA;GACpB;;GAEK,EAAA,QAAA,EAAA,GAAb,EAA8C,GAAA,EAAA,EAAA,EAAA,KAAA,EAAA,GAAnB,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,CAAA,CAAA,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA;GACzC,EAAoD,QAApD,GAAoD,CAAf,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA;GAChC,EAAA,YAAA,EAAA,GAAb,EAA0E,GAAA;;IAAlD,MAAM,EAAA,CAAA;IAAW,OAAM"}
+{"version":3,"file":"VListboxOption.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createBlock","VIcon","_normalizeProps","_mergeProps","_unref","_createCommentVNode","_createElementVNode","_renderSlot","checkIcon","VIcon_default","_hoisted_1","_hoisted_2","VListboxOption_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","onClick","openBlock","createElementBlock","createBlock","normalizeProps","mergeProps","unref","iconProps","createCommentVNode","createElementVNode","renderSlot","_ctx","check"],"sources":["../../../src/components/VListbox/VListboxOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Options use aria-disabled while field focus stays on aria-activedescendant; do not apply\n * native disabling to the active-descendant target.\n */\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { check as checkIcon } from '../VIcon/icons/check'\nimport type { IconSource } from '../VIcon/types'\n\ninterface ListboxOptionProps {\n  /** An icon before the label: an icon name, or an explicit render. */\n  icon?: IconSource\n  /** Marks the option as one of the chosen ones, which also draws the tick. */\n  selected?: boolean\n  /** Marks the option as the one currently highlighted. The field decides this. */\n  active?: boolean\n  /** Shows the option without allowing it to be chosen. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<ListboxOptionProps>(), {\n  icon: undefined,\n  selected: false,\n  active: false,\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  /** The option was clicked. What that does to the selection is the field's business. */\n  select: []\n}>()\n\ndefineSlots<{\n  /** What the row shows. */\n  default?(): unknown\n}>()\n\nfunction onClick() {\n  if (props.disabled) return\n  emit('select')\n}\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    role=\"option\"\n    tabindex=\"-1\"\n    class=\"v-listbox-option\"\n    :aria-selected=\"selected\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n    :data-active=\"active ? '' : undefined\"\n    @click=\"onClick\"\n  >\n    <VIcon v-if=\"icon\" v-bind=\"iconProps(icon)\" />\n    <span class=\"v-listbox-option-label\"><slot /></span>\n    <VIcon v-if=\"selected\" :name=\"checkIcon\" class=\"v-listbox-option-check\" />\n  </button>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-listbox-option {\n    /*\n     * Every dimension is inherited from the panel, which carries the shared size class, and the\n     * icons follow through the same inheritance. The type is composite, exactly as in a menu\n     * row: the SIZE comes from the scale, the line height stays that of body text; a unitless\n     * ratio, so it follows the size; and the weight stays regular, since a row may wrap.\n     */\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    width: 100%;\n    min-height: var(--control-height);\n    padding: var(--vectis-space-1) var(--control-padding-inline);\n    border: none;\n    background: transparent;\n    color: var(--vectis-color-text);\n    border-radius: min(var(--vectis-radius-interactive), calc(var(--control-height) / 2));\n    font-family: inherit;\n    font-size: var(--control-font-size);\n    line-height: var(--vectis-text-body-md-leading);\n    text-align: start;\n    cursor: pointer;\n  }\n\n  /* The zero minimum is what allows a long label to be compressed at all: a flex item\n     otherwise refuses to shrink below its own content. */\n  .v-listbox-option-label {\n    flex: 1;\n    min-inline-size: 0;\n  }\n\n  /* A row is highlighted by the pointer resting on it, or by being the current one. There\n     is deliberately no focus rule: the focus never arrives here, it stays in the field. */\n  .v-listbox-option:hover:not([aria-disabled='true']),\n  .v-listbox-option[data-active] {\n    background: var(--vectis-color-surface-muted);\n    outline: none;\n  }\n\n  .v-listbox-option[aria-selected='true'] {\n    color: var(--vectis-color-accent-text);\n  }\n\n  /*\n   * Matched on the ARIA state and not on the native one, which this component deliberately\n   * never sets; see the introduction.\n   */\n  .v-listbox-option[aria-disabled='true'] {\n    background: transparent;\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsBA,IAAMgB,IAAQC,GAORC,IAAOH;EAUb,SAASI,IAAU;GACjB,AAAIH,EAAM,YACVE,EAAK,QAAQ;EACf;oBAIElB,EAAA,GAAAC,EAaS,UAAA;GAZP,MAAK;GACL,MAAK;GACL,UAAS;GACT,OAAM;GACL,iBAAegB,EAAA;GACf,iBAAeA,EAAA,WAAQ,SAAY,KAAA;GACnC,eAAaA,EAAA,SAAM,KAAQ,KAAA;GACpB;;GAEKA,EAAA,QAAbjB,EAAA,GAAAE,EAA8CC,GAAAC,EAAAC,EAAA,EAAA,KAAA,EAAA,GAAnBC,EAAAoB,CAAA,CAAS,CAACT,EAAA,IAAI,CAAA,CAAA,GAAA,MAAA,EAAA,KAAAU,EAAA,IAAA,EAAA;GACzCnB,EAAoD,QAApDK,GAAoD,CAAfJ,EAAQqB,EAAA,QAAA,SAAA,CAAA,CAAA;GAChCb,EAAA,YAAbjB,EAAA,GAAAE,EAA0EC,GAAA;;IAAlD,MAAMG,EAAAI,CAAA;IAAW,OAAM"}

package/dist/components/VListbox/VListboxPanel.d.ts

@@ -10,8 +10,6 @@ interface ListboxPanelProps {
     placement: PopoverPlacement;
     /** The size the options take, the field's own. */
     size: 'sm' | 'md' | 'lg';
-    /** The field's reduced density. */
-    compact?: boolean;
     /** Several options can be chosen. */
     multiple?: boolean;
     /** Only the rows near the visible part of the panel are rendered. */
@@ -45,7 +43,6 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onHighlight?: ((row: ListboxRenderedOption) => any) | undefined;
 }>, {
-    compact: boolean;
     multiple: boolean;
     virtual: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/VListbox/VListboxPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"VListboxPanel.js","names":[],"sources":["../../../src/components/VListbox/VListboxPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * Render the floating listbox of VCombobox and VSelect from the rows `useListbox` works out. The\n * panel carries both the listbox role and the scrolling: the virtual window, the scrolling of the\n * highlighted option and the observer watching for the end of the list all rely on it, so no\n * wrapper may come between them.\n */\nimport { computed, ref } from 'vue'\n\nimport type { Listbox, ListboxBlock, ListboxRenderedOption } from '../../composables/useListbox'\nimport type { ListboxOption, ListboxOptionSlotProps } from '../../types'\nimport VPopover, { type PopoverPlacement } from '../VPopover/VPopover.vue'\nimport VListboxGroup from './VListboxGroup.vue'\nimport VListboxOption from './VListboxOption.vue'\nimport VListboxSeparator from './VListboxSeparator.vue'\n\ninterface ListboxPanelProps {\n  /** The panel's id, which the field points at through `aria-controls`. */\n  id: string\n  /** The CSS anchor name the owner sets on its field, which the panel opens against. */\n  anchor: string\n  /** Where the panel opens relative to the field. */\n  placement: PopoverPlacement\n  /** The size the options take, the field's own. */\n  size: 'sm' | 'md' | 'lg'\n  /** The field's reduced density. */\n  compact?: boolean\n  /** Several options can be chosen. */\n  multiple?: boolean\n  /** Only the rows near the visible part of the panel are rendered. */\n  virtual?: boolean\n  /** The rows to render. */\n  blocks: ListboxBlock[]\n  /** Measures a rendered row, in the virtual mode. */\n  measure: Listbox['measureRow']\n}\n\nwithDefaults(defineProps<ListboxPanelProps>(), {\n  compact: false,\n  multiple: false,\n  virtual: false,\n})\n\n/** Whether the panel is showing. */\nconst open = defineModel<boolean>('open', { default: false })\n\nconst emit = defineEmits<{\n  /** An option was clicked. What that does to the selection is the field's business. */\n  select: [option: ListboxOption]\n  /** The pointer moved over an option, which should become the highlighted one. */\n  highlight: [row: ListboxRenderedOption]\n}>()\n\ndefineSlots<{\n  /** What a row shows, in place of the plain label. */\n  option?(props: ListboxOptionSlotProps): unknown\n  /** Rows of the owner's own after the options: an empty state, a loading foot. */\n  default?(): unknown\n}>()\n\nconst popoverRef = ref<InstanceType<typeof VPopover> | null>(null)\n\n// @a11y\n/*\n * The focus must never leave the field. Without cancelling the press, clicking an option takes\n * the focus off the field, the field's focusout closes the panel before the click is turned into\n * a selection, and choosing with the mouse stops working entirely.\n */\nfunction onMousedown(event: MouseEvent) {\n  event.preventDefault()\n}\n\ndefineExpose({\n  /** The panel element, which scrolls. */\n  el: computed(() => popoverRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <VPopover\n    :id=\"id\"\n    ref=\"popoverRef\"\n    v-model:open=\"open\"\n    mode=\"manual\"\n    :anchor=\"anchor\"\n    match-trigger\n    :placement=\"placement\"\n    role=\"listbox\"\n    class=\"v-listbox-panel v-control\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :aria-multiselectable=\"multiple ? 'true' : undefined\"\n    :data-virtual=\"virtual ? '' : undefined\"\n    @mousedown=\"onMousedown\"\n  >\n    <template v-for=\"block in blocks\" :key=\"block.key\">\n      <div\n        v-if=\"block.kind === 'spacer'\"\n        class=\"v-listbox-spacer\"\n        aria-hidden=\"true\"\n        :style=\"{ blockSize: `${block.size}px` }\"\n      />\n\n      <VListboxSeparator\n        v-else-if=\"block.kind === 'separator'\"\n        :ref=\"virtual ? (el) => measure(el, block.at) : undefined\"\n      />\n\n      <VListboxGroup\n        v-else-if=\"block.kind === 'group'\"\n        :label=\"block.label\"\n        :label-id=\"block.labelId\"\n      >\n        <template v-for=\"child in block.children\" :key=\"child.key\">\n          <div\n            v-if=\"child.kind === 'spacer'\"\n            class=\"v-listbox-spacer\"\n            aria-hidden=\"true\"\n            :style=\"{ blockSize: `${child.size}px` }\"\n          />\n          <span\n            v-else-if=\"child.kind === 'heading'\"\n            :id=\"child.id\"\n            :ref=\"virtual ? (el) => measure(el, child.at) : undefined\"\n            class=\"v-listbox-group-label\"\n            >{{ child.label }}</span\n          >\n          <VListboxOption\n            v-else-if=\"child.kind === 'option'\"\n            :ref=\"virtual ? (el) => measure(el, child.at) : undefined\"\n            v-bind=\"child.row\"\n            @select=\"emit('select', child.option)\"\n            @pointermove=\"emit('highlight', child)\"\n          >\n            <slot name=\"option\" v-bind=\"child.slot\">{{ child.option.label }}</slot>\n          </VListboxOption>\n        </template>\n      </VListboxGroup>\n\n      <VListboxOption\n        v-else-if=\"block.kind === 'option'\"\n        :ref=\"virtual ? (el) => measure(el, block.at) : undefined\"\n        v-bind=\"block.row\"\n        @select=\"emit('select', block.option)\"\n        @pointermove=\"emit('highlight', block)\"\n      >\n        <slot name=\"option\" v-bind=\"block.slot\">{{ block.option.label }}</slot>\n      </VListboxOption>\n    </template>\n\n    <slot />\n  </VPopover>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * VPopover brings the floating element, its open state, its anchoring, its placement and its\n   * surface. The shared size class lets the options and the owner's state rows read their\n   * dimensions from the panel with no size table here; the owner sets the maximum height.\n   */\n  .v-listbox-panel {\n    overflow: auto;\n  }\n\n  /* The virtual mode corrects the scroll itself when a row above the view changes height. */\n  .v-listbox-panel[data-virtual] {\n    overflow-anchor: none;\n  }\n\n  .v-listbox-spacer {\n    flex: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VListboxPanel.js","names":["_sfc_main","VListboxPanel_vue_vue_type_script_setup_true_lang_default","VListboxPanel_default"],"sources":["../../../src/components/VListbox/VListboxPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * Render the floating listbox of VCombobox and VSelect from the rows `useListbox` works out. The\n * panel carries both the listbox role and the scrolling: the virtual window, the scrolling of the\n * highlighted option and the observer watching for the end of the list all rely on it, so no\n * wrapper may come between them.\n */\nimport { computed, ref } from 'vue'\n\nimport type { Listbox, ListboxBlock, ListboxRenderedOption } from '../../composables/useListbox'\nimport type { ListboxOption, ListboxOptionSlotProps } from '../../types'\nimport VPopover, { type PopoverPlacement } from '../VPopover/VPopover.vue'\nimport VListboxGroup from './VListboxGroup.vue'\nimport VListboxOption from './VListboxOption.vue'\nimport VListboxSeparator from './VListboxSeparator.vue'\n\ninterface ListboxPanelProps {\n  /** The panel's id, which the field points at through `aria-controls`. */\n  id: string\n  /** The CSS anchor name the owner sets on its field, which the panel opens against. */\n  anchor: string\n  /** Where the panel opens relative to the field. */\n  placement: PopoverPlacement\n  /** The size the options take, the field's own. */\n  size: 'sm' | 'md' | 'lg'\n  /** Several options can be chosen. */\n  multiple?: boolean\n  /** Only the rows near the visible part of the panel are rendered. */\n  virtual?: boolean\n  /** The rows to render. */\n  blocks: ListboxBlock[]\n  /** Measures a rendered row, in the virtual mode. */\n  measure: Listbox['measureRow']\n}\n\nwithDefaults(defineProps<ListboxPanelProps>(), {\n  multiple: false,\n  virtual: false,\n})\n\n/** Whether the panel is showing. */\nconst open = defineModel<boolean>('open', { default: false })\n\nconst emit = defineEmits<{\n  /** An option was clicked. What that does to the selection is the field's business. */\n  select: [option: ListboxOption]\n  /** The pointer moved over an option, which should become the highlighted one. */\n  highlight: [row: ListboxRenderedOption]\n}>()\n\ndefineSlots<{\n  /** What a row shows, in place of the plain label. */\n  option?(props: ListboxOptionSlotProps): unknown\n  /** Rows of the owner's own after the options: an empty state, a loading foot. */\n  default?(): unknown\n}>()\n\nconst popoverRef = ref<InstanceType<typeof VPopover> | null>(null)\n\n// @a11y\n/*\n * The focus must never leave the field. Without cancelling the press, clicking an option takes\n * the focus off the field, the field's focusout closes the panel before the click is turned into\n * a selection, and choosing with the mouse stops working entirely.\n */\nfunction onMousedown(event: MouseEvent) {\n  event.preventDefault()\n}\n\ndefineExpose({\n  /** The panel element, which scrolls. */\n  el: computed(() => popoverRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <VPopover\n    :id=\"id\"\n    ref=\"popoverRef\"\n    v-model:open=\"open\"\n    mode=\"manual\"\n    :anchor=\"anchor\"\n    match-trigger\n    :placement=\"placement\"\n    role=\"listbox\"\n    class=\"v-listbox-panel v-control\"\n    :data-size=\"size\"\n    :aria-multiselectable=\"multiple ? 'true' : undefined\"\n    :data-virtual=\"virtual ? '' : undefined\"\n    @mousedown=\"onMousedown\"\n  >\n    <template v-for=\"block in blocks\" :key=\"block.key\">\n      <div\n        v-if=\"block.kind === 'spacer'\"\n        class=\"v-listbox-spacer\"\n        aria-hidden=\"true\"\n        :style=\"{ blockSize: `${block.size}px` }\"\n      />\n\n      <VListboxSeparator\n        v-else-if=\"block.kind === 'separator'\"\n        :ref=\"virtual ? (el) => measure(el, block.at) : undefined\"\n      />\n\n      <VListboxGroup\n        v-else-if=\"block.kind === 'group'\"\n        :label=\"block.label\"\n        :label-id=\"block.labelId\"\n      >\n        <template v-for=\"child in block.children\" :key=\"child.key\">\n          <div\n            v-if=\"child.kind === 'spacer'\"\n            class=\"v-listbox-spacer\"\n            aria-hidden=\"true\"\n            :style=\"{ blockSize: `${child.size}px` }\"\n          />\n          <span\n            v-else-if=\"child.kind === 'heading'\"\n            :id=\"child.id\"\n            :ref=\"virtual ? (el) => measure(el, child.at) : undefined\"\n            class=\"v-listbox-group-label\"\n            >{{ child.label }}</span\n          >\n          <VListboxOption\n            v-else-if=\"child.kind === 'option'\"\n            :ref=\"virtual ? (el) => measure(el, child.at) : undefined\"\n            v-bind=\"child.row\"\n            @select=\"emit('select', child.option)\"\n            @pointermove=\"emit('highlight', child)\"\n          >\n            <slot name=\"option\" v-bind=\"child.slot\">{{ child.option.label }}</slot>\n          </VListboxOption>\n        </template>\n      </VListboxGroup>\n\n      <VListboxOption\n        v-else-if=\"block.kind === 'option'\"\n        :ref=\"virtual ? (el) => measure(el, block.at) : undefined\"\n        v-bind=\"block.row\"\n        @select=\"emit('select', block.option)\"\n        @pointermove=\"emit('highlight', block)\"\n      >\n        <slot name=\"option\" v-bind=\"block.slot\">{{ block.option.label }}</slot>\n      </VListboxOption>\n    </template>\n\n    <slot />\n  </VPopover>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * VPopover brings the floating element, its open state, its anchoring, its placement and its\n   * surface. The shared size class lets the options and the owner's state rows read their\n   * dimensions from the panel with no size table here; the owner sets the maximum height.\n   */\n  .v-listbox-panel {\n    overflow: auto;\n  }\n\n  /* The virtual mode corrects the scroll itself when a row above the view changes height. */\n  .v-listbox-panel[data-virtual] {\n    overflow-anchor: none;\n  }\n\n  .v-listbox-spacer {\n    flex: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VListbox/VListboxPanel.vue_vue_type_script_setup_true_lang.js

@@ -11,10 +11,6 @@ var x = ["id"], S = /*@__PURE__*/ u({
 		anchor: {},
 		placement: {},
 		size: {},
-		compact: {
-			type: Boolean,
-			default: !1
-		},
 		multiple: {
 			type: Boolean,
 			default: !1
@@ -51,7 +47,6 @@ var x = ["id"], S = /*@__PURE__*/ u({
 			role: "listbox",
 			class: "v-listbox-panel v-control",
 			"data-size": u.size,
-			"data-compact": u.compact ? "" : void 0,
 			"aria-multiselectable": u.multiple ? "true" : void 0,
 			"data-virtual": u.virtual ? "" : void 0,
 			onMousedown: E
@@ -111,7 +106,6 @@ var x = ["id"], S = /*@__PURE__*/ u({
 			"anchor",
 			"placement",
 			"data-size",
-			"data-compact",
 			"aria-multiselectable",
 			"data-virtual"
 		]));

package/dist/components/VListbox/VListboxPanel.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"VListboxPanel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VListbox/VListboxPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * Render the floating listbox of VCombobox and VSelect from the rows `useListbox` works out. The\n * panel carries both the listbox role and the scrolling: the virtual window, the scrolling of the\n * highlighted option and the observer watching for the end of the list all rely on it, so no\n * wrapper may come between them.\n */\nimport { computed, ref } from 'vue'\n\nimport type { Listbox, ListboxBlock, ListboxRenderedOption } from '../../composables/useListbox'\nimport type { ListboxOption, ListboxOptionSlotProps } from '../../types'\nimport VPopover, { type PopoverPlacement } from '../VPopover/VPopover.vue'\nimport VListboxGroup from './VListboxGroup.vue'\nimport VListboxOption from './VListboxOption.vue'\nimport VListboxSeparator from './VListboxSeparator.vue'\n\ninterface ListboxPanelProps {\n  /** The panel's id, which the field points at through `aria-controls`. */\n  id: string\n  /** The CSS anchor name the owner sets on its field, which the panel opens against. */\n  anchor: string\n  /** Where the panel opens relative to the field. */\n  placement: PopoverPlacement\n  /** The size the options take, the field's own. */\n  size: 'sm' | 'md' | 'lg'\n  /** The field's reduced density. */\n  compact?: boolean\n  /** Several options can be chosen. */\n  multiple?: boolean\n  /** Only the rows near the visible part of the panel are rendered. */\n  virtual?: boolean\n  /** The rows to render. */\n  blocks: ListboxBlock[]\n  /** Measures a rendered row, in the virtual mode. */\n  measure: Listbox['measureRow']\n}\n\nwithDefaults(defineProps<ListboxPanelProps>(), {\n  compact: false,\n  multiple: false,\n  virtual: false,\n})\n\n/** Whether the panel is showing. */\nconst open = defineModel<boolean>('open', { default: false })\n\nconst emit = defineEmits<{\n  /** An option was clicked. What that does to the selection is the field's business. */\n  select: [option: ListboxOption]\n  /** The pointer moved over an option, which should become the highlighted one. */\n  highlight: [row: ListboxRenderedOption]\n}>()\n\ndefineSlots<{\n  /** What a row shows, in place of the plain label. */\n  option?(props: ListboxOptionSlotProps): unknown\n  /** Rows of the owner's own after the options: an empty state, a loading foot. */\n  default?(): unknown\n}>()\n\nconst popoverRef = ref<InstanceType<typeof VPopover> | null>(null)\n\n// @a11y\n/*\n * The focus must never leave the field. Without cancelling the press, clicking an option takes\n * the focus off the field, the field's focusout closes the panel before the click is turned into\n * a selection, and choosing with the mouse stops working entirely.\n */\nfunction onMousedown(event: MouseEvent) {\n  event.preventDefault()\n}\n\ndefineExpose({\n  /** The panel element, which scrolls. */\n  el: computed(() => popoverRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <VPopover\n    :id=\"id\"\n    ref=\"popoverRef\"\n    v-model:open=\"open\"\n    mode=\"manual\"\n    :anchor=\"anchor\"\n    match-trigger\n    :placement=\"placement\"\n    role=\"listbox\"\n    class=\"v-listbox-panel v-control\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :aria-multiselectable=\"multiple ? 'true' : undefined\"\n    :data-virtual=\"virtual ? '' : undefined\"\n    @mousedown=\"onMousedown\"\n  >\n    <template v-for=\"block in blocks\" :key=\"block.key\">\n      <div\n        v-if=\"block.kind === 'spacer'\"\n        class=\"v-listbox-spacer\"\n        aria-hidden=\"true\"\n        :style=\"{ blockSize: `${block.size}px` }\"\n      />\n\n      <VListboxSeparator\n        v-else-if=\"block.kind === 'separator'\"\n        :ref=\"virtual ? (el) => measure(el, block.at) : undefined\"\n      />\n\n      <VListboxGroup\n        v-else-if=\"block.kind === 'group'\"\n        :label=\"block.label\"\n        :label-id=\"block.labelId\"\n      >\n        <template v-for=\"child in block.children\" :key=\"child.key\">\n          <div\n            v-if=\"child.kind === 'spacer'\"\n            class=\"v-listbox-spacer\"\n            aria-hidden=\"true\"\n            :style=\"{ blockSize: `${child.size}px` }\"\n          />\n          <span\n            v-else-if=\"child.kind === 'heading'\"\n            :id=\"child.id\"\n            :ref=\"virtual ? (el) => measure(el, child.at) : undefined\"\n            class=\"v-listbox-group-label\"\n            >{{ child.label }}</span\n          >\n          <VListboxOption\n            v-else-if=\"child.kind === 'option'\"\n            :ref=\"virtual ? (el) => measure(el, child.at) : undefined\"\n            v-bind=\"child.row\"\n            @select=\"emit('select', child.option)\"\n            @pointermove=\"emit('highlight', child)\"\n          >\n            <slot name=\"option\" v-bind=\"child.slot\">{{ child.option.label }}</slot>\n          </VListboxOption>\n        </template>\n      </VListboxGroup>\n\n      <VListboxOption\n        v-else-if=\"block.kind === 'option'\"\n        :ref=\"virtual ? (el) => measure(el, block.at) : undefined\"\n        v-bind=\"block.row\"\n        @select=\"emit('select', block.option)\"\n        @pointermove=\"emit('highlight', block)\"\n      >\n        <slot name=\"option\" v-bind=\"block.slot\">{{ block.option.label }}</slot>\n      </VListboxOption>\n    </template>\n\n    <slot />\n  </VPopover>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * VPopover brings the floating element, its open state, its anchoring, its placement and its\n   * surface. The shared size class lets the options and the owner's state rows read their\n   * dimensions from the panel with no size table here; the owner sets the maximum height.\n   */\n  .v-listbox-panel {\n    overflow: auto;\n  }\n\n  /* The virtual mode corrects the scroll itself when a row above the view changes height. */\n  .v-listbox-panel[data-virtual] {\n    overflow-anchor: none;\n  }\n\n  .v-listbox-spacer {\n    flex: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CA,IAAM,IAAO,EAAoB,GAAC,MAA0B,GAEtD,IAAO,GAcP,IAAa,EAA0C,IAAI;EAQjE,SAAS,EAAY,GAAmB;GACtC,EAAM,eAAe;EACvB;SAEA,EAAa,EAEX,IAAI,QAAe,EAAW,OAAO,MAAM,IAAI,EACjD,CAAC,mBAIC,EAwEW,GAAA;GAvER,IAAI,EAAA;YACD;GAAJ,KAAI;GACI,MAAM,EAAA;sCAAI,QAAA;GAClB,MAAK;GACJ,QAAQ,EAAA;GACT,iBAAA;GACC,WAAW,EAAA;GACZ,MAAK;GACL,OAAM;GACL,aAAW,EAAA;GACX,gBAAc,EAAA,UAAO,KAAQ,KAAA;GAC7B,wBAAsB,EAAA,WAAQ,SAAY,KAAA;GAC1C,gBAAc,EAAA,UAAO,KAAQ,KAAA;GAClB;;oBAEqB,EAAA,EAAA,EAAA,GAAjC,EAqDW,GAAA,MAAA,EArDe,EAAA,SAAT,wBAAuB,EAAM,IAAA,GAAA,CAEpC,EAAM,SAAI,YAAA,EAAA,GADlB,EAKE,OAAA;;IAHA,OAAM;IACN,eAAY;IACX,OAAK,EAAA,EAAA,WAAA,GAAkB,EAAM,KAAI,IAAA,CAAA;kBAIvB,EAAM,SAAI,eAAA,EAAA,GADvB,EAGE,GAAA;;;IADC,KAAK,EAAA,WAAW,MAAO,EAAA,QAAQ,GAAI,EAAM,EAAE,IAAI,KAAA;oBAIrC,EAAM,SAAI,WAAA,EAAA,GADvB,EA6BgB,GAAA;;IA3Bb,OAAO,EAAM;IACb,YAAU,EAAM;;qBAEwB,EAAA,EAAA,EAAA,GAAzC,EAuBW,GAAA,MAAA,EAvBe,EAAM,WAAf,wBAA+B,EAAM,IAAA,GAAA,CAE5C,EAAM,SAAI,YAAA,EAAA,GADlB,EAKE,OAAA;;KAHA,OAAM;KACN,eAAY;KACX,OAAK,EAAA,EAAA,WAAA,GAAkB,EAAM,KAAI,IAAA,CAAA;mBAGvB,EAAM,SAAI,aAAA,EAAA,GADvB,EAMC,QAAA;;KAJE,IAAI,EAAM;;KACV,KAAK,EAAA,WAAW,MAAO,EAAA,QAAQ,GAAI,EAAM,EAAE,IAAI,KAAA;KAChD,OAAM;SACF,EAAM,KAAK,GAAA,GAAA,CAAA,KAGJ,EAAM,SAAI,YAAA,EAAA,GADvB,EAQiB,GARjB,EAQiB;;;KANd,KAAK,EAAA,WAAW,MAAO,EAAA,QAAQ,GAAI,EAAM,EAAE,IAAI,KAAA;wBACxC,EAAM,KAAG;KAChB,WAAM,MAAE,EAAI,UAAW,EAAM,MAAM;KACnC,gBAAW,MAAE,EAAI,aAAc,CAAK;;sBAEkC,CAAvE,EAAuE,EAAA,QAAA,UAAvE,EAAuE,EAAA,SAAA,GAAA,GAA3C,EAAM,IAAI,SAAiC,CAAA,EAAA,EAA5B,EAAM,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;;sCAMtD,EAAM,SAAI,YAAA,EAAA,GADvB,EAQiB,GARjB,EAQiB;;;IANd,KAAK,EAAA,WAAW,MAAO,EAAA,QAAQ,GAAI,EAAM,EAAE,IAAI,KAAA;uBACxC,EAAM,KAAG;IAChB,WAAM,MAAE,EAAI,UAAW,EAAM,MAAM;IACnC,gBAAW,MAAE,EAAI,aAAc,CAAK;;qBAEkC,CAAvE,EAAuE,EAAA,QAAA,UAAvE,EAAuE,EAAA,SAAA,GAAA,GAA3C,EAAM,IAAI,SAAiC,CAAA,EAAA,EAA5B,EAAM,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;wEAIjE,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"VListboxPanel.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","VPopover","_withCtx","_createElementBlock","_Fragment","_renderList","_normalizeStyle","VListboxSeparator","VListboxGroup","_toDisplayString","VListboxOption","_mergeProps","_renderSlot","_createTextVNode","_createCommentVNode","VPopover_default","VListboxGroup_default","VListboxOption_default","VListboxSeparator_default","_hoisted_1","VListboxPanel_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__expose","__emit","open","useModel","__props","emit","popoverRef","ref","onMousedown","computed","openBlock","createBlock","_cache","$event","withCtx","createElementBlock","Fragment","renderList","block","normalizeStyle","el","child","toDisplayString","mergeProps","renderSlot","_ctx","createTextVNode","createCommentVNode"],"sources":["../../../src/components/VListbox/VListboxPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * Render the floating listbox of VCombobox and VSelect from the rows `useListbox` works out. The\n * panel carries both the listbox role and the scrolling: the virtual window, the scrolling of the\n * highlighted option and the observer watching for the end of the list all rely on it, so no\n * wrapper may come between them.\n */\nimport { computed, ref } from 'vue'\n\nimport type { Listbox, ListboxBlock, ListboxRenderedOption } from '../../composables/useListbox'\nimport type { ListboxOption, ListboxOptionSlotProps } from '../../types'\nimport VPopover, { type PopoverPlacement } from '../VPopover/VPopover.vue'\nimport VListboxGroup from './VListboxGroup.vue'\nimport VListboxOption from './VListboxOption.vue'\nimport VListboxSeparator from './VListboxSeparator.vue'\n\ninterface ListboxPanelProps {\n  /** The panel's id, which the field points at through `aria-controls`. */\n  id: string\n  /** The CSS anchor name the owner sets on its field, which the panel opens against. */\n  anchor: string\n  /** Where the panel opens relative to the field. */\n  placement: PopoverPlacement\n  /** The size the options take, the field's own. */\n  size: 'sm' | 'md' | 'lg'\n  /** Several options can be chosen. */\n  multiple?: boolean\n  /** Only the rows near the visible part of the panel are rendered. */\n  virtual?: boolean\n  /** The rows to render. */\n  blocks: ListboxBlock[]\n  /** Measures a rendered row, in the virtual mode. */\n  measure: Listbox['measureRow']\n}\n\nwithDefaults(defineProps<ListboxPanelProps>(), {\n  multiple: false,\n  virtual: false,\n})\n\n/** Whether the panel is showing. */\nconst open = defineModel<boolean>('open', { default: false })\n\nconst emit = defineEmits<{\n  /** An option was clicked. What that does to the selection is the field's business. */\n  select: [option: ListboxOption]\n  /** The pointer moved over an option, which should become the highlighted one. */\n  highlight: [row: ListboxRenderedOption]\n}>()\n\ndefineSlots<{\n  /** What a row shows, in place of the plain label. */\n  option?(props: ListboxOptionSlotProps): unknown\n  /** Rows of the owner's own after the options: an empty state, a loading foot. */\n  default?(): unknown\n}>()\n\nconst popoverRef = ref<InstanceType<typeof VPopover> | null>(null)\n\n// @a11y\n/*\n * The focus must never leave the field. Without cancelling the press, clicking an option takes\n * the focus off the field, the field's focusout closes the panel before the click is turned into\n * a selection, and choosing with the mouse stops working entirely.\n */\nfunction onMousedown(event: MouseEvent) {\n  event.preventDefault()\n}\n\ndefineExpose({\n  /** The panel element, which scrolls. */\n  el: computed(() => popoverRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <VPopover\n    :id=\"id\"\n    ref=\"popoverRef\"\n    v-model:open=\"open\"\n    mode=\"manual\"\n    :anchor=\"anchor\"\n    match-trigger\n    :placement=\"placement\"\n    role=\"listbox\"\n    class=\"v-listbox-panel v-control\"\n    :data-size=\"size\"\n    :aria-multiselectable=\"multiple ? 'true' : undefined\"\n    :data-virtual=\"virtual ? '' : undefined\"\n    @mousedown=\"onMousedown\"\n  >\n    <template v-for=\"block in blocks\" :key=\"block.key\">\n      <div\n        v-if=\"block.kind === 'spacer'\"\n        class=\"v-listbox-spacer\"\n        aria-hidden=\"true\"\n        :style=\"{ blockSize: `${block.size}px` }\"\n      />\n\n      <VListboxSeparator\n        v-else-if=\"block.kind === 'separator'\"\n        :ref=\"virtual ? (el) => measure(el, block.at) : undefined\"\n      />\n\n      <VListboxGroup\n        v-else-if=\"block.kind === 'group'\"\n        :label=\"block.label\"\n        :label-id=\"block.labelId\"\n      >\n        <template v-for=\"child in block.children\" :key=\"child.key\">\n          <div\n            v-if=\"child.kind === 'spacer'\"\n            class=\"v-listbox-spacer\"\n            aria-hidden=\"true\"\n            :style=\"{ blockSize: `${child.size}px` }\"\n          />\n          <span\n            v-else-if=\"child.kind === 'heading'\"\n            :id=\"child.id\"\n            :ref=\"virtual ? (el) => measure(el, child.at) : undefined\"\n            class=\"v-listbox-group-label\"\n            >{{ child.label }}</span\n          >\n          <VListboxOption\n            v-else-if=\"child.kind === 'option'\"\n            :ref=\"virtual ? (el) => measure(el, child.at) : undefined\"\n            v-bind=\"child.row\"\n            @select=\"emit('select', child.option)\"\n            @pointermove=\"emit('highlight', child)\"\n          >\n            <slot name=\"option\" v-bind=\"child.slot\">{{ child.option.label }}</slot>\n          </VListboxOption>\n        </template>\n      </VListboxGroup>\n\n      <VListboxOption\n        v-else-if=\"block.kind === 'option'\"\n        :ref=\"virtual ? (el) => measure(el, block.at) : undefined\"\n        v-bind=\"block.row\"\n        @select=\"emit('select', block.option)\"\n        @pointermove=\"emit('highlight', block)\"\n      >\n        <slot name=\"option\" v-bind=\"block.slot\">{{ block.option.label }}</slot>\n      </VListboxOption>\n    </template>\n\n    <slot />\n  </VPopover>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * VPopover brings the floating element, its open state, its anchoring, its placement and its\n   * surface. The shared size class lets the options and the owner's state rows read their\n   * dimensions from the panel with no size table here; the owner sets the maximum height.\n   */\n  .v-listbox-panel {\n    overflow: auto;\n  }\n\n  /* The virtual mode corrects the scroll itself when a row above the view changes height. */\n  .v-listbox-panel[data-virtual] {\n    overflow-anchor: none;\n  }\n\n  .v-listbox-spacer {\n    flex: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VListbox/VListboxSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"VListboxSeparator.js","names":[],"sources":["../../../src/components/VListbox/VListboxSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Use presentation semantics for separators: a listbox owns only options and groups, unlike a\n * menu.\n */\nimport VSeparator from '../VSeparator/VSeparator.vue'\n</script>\n\n<template>\n  <VSeparator role=\"presentation\" class=\"v-listbox-separator\" />\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The selector compounds both classes because `.v-separator` sets `margin: 0` from a sheet of\n   * its own: at equal specificity the winner would be whichever of the two the consumer's\n   * bundler happens to put last. The space above and below comes from the panel's own gap, so\n   * no margin is added here.\n   */\n  .v-separator.v-listbox-separator {\n    margin-inline: calc(-1 * var(--vectis-space-1));\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VListboxSeparator.js","names":["_sfc_main","VListboxSeparator_vue_vue_type_script_setup_true_lang_default","VListboxSeparator_default"],"sources":["../../../src/components/VListbox/VListboxSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Use presentation semantics for separators: a listbox owns only options and groups, unlike a\n * menu.\n */\nimport VSeparator from '../VSeparator/VSeparator.vue'\n</script>\n\n<template>\n  <VSeparator role=\"presentation\" class=\"v-listbox-separator\" />\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The selector compounds both classes because `.v-separator` sets `margin: 0` from a sheet of\n   * its own: at equal specificity the winner would be whichever of the two the consumer's\n   * bundler happens to put last. The space above and below comes from the panel's own gap, so\n   * no margin is added here.\n   */\n  .v-separator.v-listbox-separator {\n    margin-inline: calc(-1 * var(--vectis-space-1));\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VListbox/VListboxSeparator.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"VListboxSeparator.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VListbox/VListboxSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Use presentation semantics for separators: a listbox owns only options and groups, unlike a\n * menu.\n */\nimport VSeparator from '../VSeparator/VSeparator.vue'\n</script>\n\n<template>\n  <VSeparator role=\"presentation\" class=\"v-listbox-separator\" />\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The selector compounds both classes because `.v-separator` sets `margin: 0` from a sheet of\n   * its own: at equal specificity the winner would be whichever of the two the consumer's\n   * bundler happens to put last. The space above and below comes from the panel's own gap, so\n   * no margin is added here.\n   */\n  .v-separator.v-listbox-separator {\n    margin-inline: calc(-1 * var(--vectis-space-1));\n  }\n}\n</style>\n"],"mappings":";;;;;;yBASE,EAA8D,GAAA;GAAlD,MAAK;GAAe,OAAM"}
+{"version":3,"file":"VListboxSeparator.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","VSeparator","VSeparator_default","VListboxSeparator_vue_vue_type_script_setup_true_lang_default","openBlock","createBlock"],"sources":["../../../src/components/VListbox/VListboxSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Use presentation semantics for separators: a listbox owns only options and groups, unlike a\n * menu.\n */\nimport VSeparator from '../VSeparator/VSeparator.vue'\n</script>\n\n<template>\n  <VSeparator role=\"presentation\" class=\"v-listbox-separator\" />\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The selector compounds both classes because `.v-separator` sets `margin: 0` from a sheet of\n   * its own: at equal specificity the winner would be whichever of the two the consumer's\n   * bundler happens to put last. The space above and below comes from the panel's own gap, so\n   * no margin is added here.\n   */\n  .v-separator.v-listbox-separator {\n    margin-inline: calc(-1 * var(--vectis-space-1));\n  }\n}\n</style>\n"],"mappings":";;;;;;oBASEA,EAAA,GAAAC,EAA8DC,GAAA;GAAlD,MAAK;GAAe,OAAM"}

package/dist/components/VListbox/VListboxValues.js.map

@@ -1 +1 @@
-{"version":3,"file":"VListboxValues.js","names":[],"sources":["../../../src/components/VListbox/VListboxValues.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Render the values of a multiple VCombobox or VSelect inside its field: one chip each, or their\n * labels on one line, with the values beyond `max` summed up as \"+X\" while the field is folded.\n * It renders siblings rather than a wrapper, so the chips wrap as items of the field itself.\n */\nimport { computed } from 'vue'\n\nimport VChip from '../VChip/VChip.vue'\nimport type { ChipScale } from '../../utils/chip'\nimport type {\n  ItemValue,\n  ListboxChipSlotProps,\n  ListboxOption,\n  ListboxOverflowSlotProps,\n} from '../../types'\nimport { useMessages } from '../../i18n/state'\n\ninterface ListboxValuesProps {\n  /** Every chosen value, in order. */\n  values: ItemValue[]\n  /** One chip per value, or the labels joined by commas. */\n  display: 'chip' | 'text'\n  /** How many values to show while folded; 0 or none shows them all. */\n  max?: number\n  /** Whether the field is folded, the only state in which `max` applies. */\n  collapsed?: boolean\n  /** Rephrases the \"+X\". */\n  overflowText?: (count: number) => string\n  /** The chips' scale inside the field. */\n  scale: ChipScale\n  /** Whether each chip offers a cross. */\n  removable?: boolean\n  /** Greys the chips out. */\n  disabled?: boolean\n  /** Hides the line of labels from assistive technology, for a field that speaks its value. */\n  hideText?: boolean\n  /** The label of a value. */\n  labelOf: (value: ItemValue) => string\n  /** The option holding a value. */\n  optionOf: (value: ItemValue) => ListboxOption | undefined\n}\n\nconst props = withDefaults(defineProps<ListboxValuesProps>(), {\n  max: undefined,\n  collapsed: false,\n  overflowText: undefined,\n  removable: false,\n  disabled: false,\n  hideText: false,\n})\n\nconst emit = defineEmits<{\n  /** A chip's cross was pressed. */\n  remove: [value: ItemValue]\n}>()\n\ndefineSlots<{\n  /** Replaces the chip standing for one value. */\n  chip?(props: ListboxChipSlotProps): unknown\n  /** Replaces the \"+X\" standing for the values beyond `max`. */\n  overflow?(props: ListboxOverflowSlotProps): unknown\n}>()\n\nconst m = useMessages()\n\n// Unfolded, the reader is working on the selection, and every value must be there to be seen\n// and taken back. `max: 0` means no limit, as on VAvatarGroup: a truthiness test, never\n// `!= null`, which would hide every value.\nconst shown = computed(() =>\n  props.collapsed && props.max ? props.values.slice(0, props.max) : props.values,\n)\nconst overflowCount = computed(() => props.values.length - shown.value.length)\n\n// Digits and a plus sign stay out of the dictionary, as VAvatarGroup's \"+N\" does: rephrasing\n// goes through `overflowText` or the `#overflow` slot.\nconst overflowLabel = computed(() =>\n  props.overflowText ? props.overflowText(overflowCount.value) : `+${overflowCount.value}`,\n)\n\n// The comma is universal punctuation rather than a word, so it stays out of the dictionary,\n// as in VFileInput's own text display.\nconst text = computed(() =>\n  props.display === 'text' ? shown.value.map(props.labelOf).join(', ') : '',\n)\n</script>\n\n<template>\n  <span v-if=\"text\" class=\"v-listbox-text\" :aria-hidden=\"hideText ? 'true' : undefined\">{{\n    text\n  }}</span>\n  <!-- A box of its own beside the line rather than the end of it: the labels are what the\n       ellipsis cuts, and the count of what they do not show must survive it. -->\n  <span\n    v-if=\"display === 'text' && overflowCount > 0\"\n    class=\"v-listbox-overflow\"\n    :aria-hidden=\"hideText ? 'true' : undefined\"\n  >\n    <slot name=\"overflow\" :count=\"overflowCount\" :size=\"scale.size\" :compact=\"scale.compact\">{{\n      overflowLabel\n    }}</slot>\n  </span>\n  <template v-for=\"value in display === 'chip' ? shown : []\" :key=\"value\">\n    <slot\n      name=\"chip\"\n      :value=\"value\"\n      :option=\"optionOf(value)\"\n      :label=\"labelOf(value)\"\n      :remove=\"() => emit('remove', value)\"\n      :size=\"scale.size\"\n      :compact=\"scale.compact\"\n    >\n      <VChip\n        tone=\"accent\"\n        :size=\"scale.size\"\n        :compact=\"scale.compact\"\n        :dismissible=\"removable && !disabled\"\n        :dismiss-label=\"m.common.remove(labelOf(value))\"\n        :disabled=\"disabled\"\n        @dismiss=\"emit('remove', value)\"\n        >{{ labelOf(value) }}</VChip\n      >\n    </slot>\n  </template>\n  <!-- Not wrapped, unlike the text display's counter: a box around an inline-flex chip opens a\n       line box, whose strut makes the field taller than its chips. Neutral and not dismissible,\n       so it reads as a summary rather than one more value. -->\n  <slot\n    v-if=\"display === 'chip' && overflowCount > 0\"\n    name=\"overflow\"\n    :count=\"overflowCount\"\n    :size=\"scale.size\"\n    :compact=\"scale.compact\"\n  >\n    <VChip\n      class=\"v-listbox-overflow-chip\"\n      tone=\"neutral\"\n      :size=\"scale.size\"\n      :compact=\"scale.compact\"\n      :disabled=\"disabled\"\n      >{{ overflowLabel }}</VChip\n    >\n  </slot>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The line shrinks before anything else in the field, and the zero minimum is what lets it:\n   * an unbroken line otherwise has the whole of its text as its minimum width.\n   */\n  .v-listbox-text {\n    flex: 0 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* The \"+X\" after a line of text never shrinks: the line gives way instead. */\n  .v-listbox-overflow {\n    flex: none;\n    white-space: nowrap;\n    color: var(--vectis-color-text-muted);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VListboxValues.js","names":["_sfc_main","VListboxValues_vue_vue_type_script_setup_true_lang_default","VListboxValues_default"],"sources":["../../../src/components/VListbox/VListboxValues.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Render the values of a multiple VCombobox or VSelect inside its field: one chip each, or their\n * labels on one line, with the values beyond `max` summed up as \"+X\" while the field is folded.\n * It renders siblings rather than a wrapper, so the chips wrap as items of the field itself.\n */\nimport { computed } from 'vue'\n\nimport VChip from '../VChip/VChip.vue'\nimport type { ChipScale } from '../../utils/chip'\nimport type {\n  ItemValue,\n  ListboxChipSlotProps,\n  ListboxOption,\n  ListboxOverflowSlotProps,\n} from '../../types'\nimport { useMessages } from '../../i18n/state'\n\ninterface ListboxValuesProps {\n  /** Every chosen value, in order. */\n  values: ItemValue[]\n  /** One chip per value, or the labels joined by commas. */\n  display: 'chip' | 'text'\n  /** How many values to show while folded; 0 or none shows them all. */\n  max?: number\n  /** Whether the field is folded, the only state in which `max` applies. */\n  collapsed?: boolean\n  /** Rephrases the \"+X\". */\n  overflowText?: (count: number) => string\n  /** The chips' scale inside the field. */\n  scale: ChipScale\n  /** Whether each chip offers a cross. */\n  removable?: boolean\n  /** Greys the chips out. */\n  disabled?: boolean\n  /** Hides the line of labels from assistive technology, for a field that speaks its value. */\n  hideText?: boolean\n  /** The label of a value. */\n  labelOf: (value: ItemValue) => string\n  /** The option holding a value. */\n  optionOf: (value: ItemValue) => ListboxOption | undefined\n}\n\nconst props = withDefaults(defineProps<ListboxValuesProps>(), {\n  max: undefined,\n  collapsed: false,\n  overflowText: undefined,\n  removable: false,\n  disabled: false,\n  hideText: false,\n})\n\nconst emit = defineEmits<{\n  /** A chip's cross was pressed. */\n  remove: [value: ItemValue]\n}>()\n\ndefineSlots<{\n  /** Replaces the chip standing for one value. */\n  chip?(props: ListboxChipSlotProps): unknown\n  /** Replaces the \"+X\" standing for the values beyond `max`. */\n  overflow?(props: ListboxOverflowSlotProps): unknown\n}>()\n\nconst m = useMessages()\n\n// Unfolded, the reader is working on the selection, and every value must be there to be seen\n// and taken back. `max: 0` means no limit, as on VAvatarGroup: a truthiness test, never\n// `!= null`, which would hide every value.\nconst shown = computed(() =>\n  props.collapsed && props.max ? props.values.slice(0, props.max) : props.values,\n)\nconst overflowCount = computed(() => props.values.length - shown.value.length)\n\n// Digits and a plus sign stay out of the dictionary, as VAvatarGroup's \"+N\" does: rephrasing\n// goes through `overflowText` or the `#overflow` slot.\nconst overflowLabel = computed(() =>\n  props.overflowText ? props.overflowText(overflowCount.value) : `+${overflowCount.value}`,\n)\n\n// The comma is universal punctuation rather than a word, so it stays out of the dictionary,\n// as in VFileInput's own text display.\nconst text = computed(() =>\n  props.display === 'text' ? shown.value.map(props.labelOf).join(', ') : '',\n)\n</script>\n\n<template>\n  <span v-if=\"text\" class=\"v-listbox-text\" :aria-hidden=\"hideText ? 'true' : undefined\">{{\n    text\n  }}</span>\n  <!-- A box of its own beside the line rather than the end of it: the labels are what the\n       ellipsis cuts, and the count of what they do not show must survive it. -->\n  <span\n    v-if=\"display === 'text' && overflowCount > 0\"\n    class=\"v-listbox-overflow\"\n    :aria-hidden=\"hideText ? 'true' : undefined\"\n  >\n    <slot name=\"overflow\" :count=\"overflowCount\" :size=\"scale.size\">{{ overflowLabel }}</slot>\n  </span>\n  <template v-for=\"value in display === 'chip' ? shown : []\" :key=\"value\">\n    <slot\n      name=\"chip\"\n      :value=\"value\"\n      :option=\"optionOf(value)\"\n      :label=\"labelOf(value)\"\n      :remove=\"() => emit('remove', value)\"\n      :size=\"scale.size\"\n    >\n      <VChip\n        tone=\"accent\"\n        :size=\"scale.size\"\n        :dismissible=\"removable && !disabled\"\n        :dismiss-label=\"m.common.remove(labelOf(value))\"\n        :disabled=\"disabled\"\n        @dismiss=\"emit('remove', value)\"\n        >{{ labelOf(value) }}</VChip\n      >\n    </slot>\n  </template>\n  <!-- Not wrapped, unlike the text display's counter: a box around an inline-flex chip opens a\n       line box, whose strut makes the field taller than its chips. Neutral and not dismissible,\n       so it reads as a summary rather than one more value. -->\n  <slot\n    v-if=\"display === 'chip' && overflowCount > 0\"\n    name=\"overflow\"\n    :count=\"overflowCount\"\n    :size=\"scale.size\"\n  >\n    <VChip class=\"v-listbox-overflow-chip\" tone=\"neutral\" :size=\"scale.size\" :disabled=\"disabled\">{{\n      overflowLabel\n    }}</VChip>\n  </slot>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The line shrinks before anything else in the field, and the zero minimum is what lets it:\n   * an unbroken line otherwise has the whole of its text as its minimum width.\n   */\n  .v-listbox-text {\n    flex: 0 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* The \"+X\" after a line of text never shrinks: the line gives way instead. */\n  .v-listbox-overflow {\n    flex: none;\n    white-space: nowrap;\n    color: var(--vectis-color-text-muted);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VListbox/VListboxValues.vue_vue_type_script_setup_true_lang.js

@@ -47,20 +47,17 @@ var h = ["aria-hidden"], g = ["aria-hidden"], _ = /*@__PURE__*/ c({
 				"aria-hidden": c.hideText ? "true" : void 0
 			}, [d(e.$slots, "overflow", {
 				count: S.value,
-				size: c.scale.size,
-				compact: c.scale.compact
+				size: c.scale.size
 			}, () => [o(f(C.value), 1)])], 8, g)) : i("", !0),
 			(l(!0), a(n, null, u(c.display === "chip" ? x.value : [], (n) => d(e.$slots, "chip", {
 				value: n,
 				option: c.optionOf(n),
 				label: c.labelOf(n),
 				remove: () => y("remove", n),
-				size: c.scale.size,
-				compact: c.scale.compact
+				size: c.scale.size
 			}, () => [s(t, {
 				tone: "accent",
 				size: c.scale.size,
-				compact: c.scale.compact,
 				dismissible: c.removable && !c.disabled,
 				"dismiss-label": p(b).common.remove(c.labelOf(n)),
 				disabled: c.disabled,
@@ -70,7 +67,6 @@ var h = ["aria-hidden"], g = ["aria-hidden"], _ = /*@__PURE__*/ c({
 				_: 2
 			}, 1032, [
 				"size",
-				"compact",
 				"dismissible",
 				"dismiss-label",
 				"disabled",
@@ -78,22 +74,16 @@ var h = ["aria-hidden"], g = ["aria-hidden"], _ = /*@__PURE__*/ c({
 			])], void 0, n)), 128)),
 			c.display === "chip" && S.value > 0 ? d(e.$slots, "overflow", {
 				count: S.value,
-				size: c.scale.size,
-				compact: c.scale.compact
+				size: c.scale.size
 			}, () => [s(t, {
 				class: "v-listbox-overflow-chip",
 				tone: "neutral",
 				size: c.scale.size,
-				compact: c.scale.compact,
 				disabled: c.disabled
 			}, {
 				default: m(() => [o(f(C.value), 1)]),
 				_: 1
-			}, 8, [
-				"size",
-				"compact",
-				"disabled"
-			])], void 0, 2) : i("", !0)
+			}, 8, ["size", "disabled"])], void 0, 2) : i("", !0)
 		], 64));
 	}
 });