vectis-ui 0.11.0 → 0.13.0

package/dist/components/VSelect/VSelect.d.ts

@@ -0,0 +1,193 @@
+import { IconSource } from '../VIcon/types.js';
+import { FieldLabelPosition } from '../VField/VField.js';
+import { ItemValue, ListboxGroup, ListboxItem, ListboxChipSlotProps, ListboxOption, ListboxOptionSlotProps, ListboxOverflowSlotProps, ListboxSeparator } from '../../types.js';
+/** One thing that can be chosen. */
+export type SelectOption = ListboxOption;
+/** A named block of options, the equivalent of a native `<optgroup>`. */
+export type SelectGroup = ListboxGroup;
+/** A rule drawn between two blocks of options, purely decorative. */
+export type SelectSeparator = ListboxSeparator;
+/** Anything the list may hold: an option, a named block, or a separator. */
+export type SelectItem = ListboxItem;
+/** Where the list opens relative to the field. */
+export type SelectPlacement = 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';
+/** The height of the field: 32, 40 or 48 pixels. */
+export type SelectSize = 'sm' | 'md' | 'lg';
+/**
+ * How the chosen values are shown in a multiple field: one chip each, or their labels
+ * joined by commas.
+ */
+export type SelectDisplay = 'chip' | 'text';
+/** What the `#option` slot receives. */
+export type SelectOptionSlotProps = ListboxOptionSlotProps;
+/** What the `#chip` slot receives. */
+export type SelectChipSlotProps = ListboxChipSlotProps;
+/** What the `#overflow` slot receives. */
+export type SelectOverflowSlotProps = ListboxOverflowSlotProps;
+interface SelectProps {
+    /**
+     * What the list offers. An entry may be an option, a named block of options, or a
+     * separator; a plain list of options remains perfectly valid.
+     */
+    options: SelectItem[];
+    /**
+     * Allows several values to be chosen, which makes the value a list and shows what has been
+     * chosen inside the field, as chips or as text depending on `display`. The list then stays
+     * open while options are toggled.
+     */
+    multiple?: boolean;
+    /**
+     * How the chosen values are shown when several can be chosen: one dismissible chip each, or
+     * their labels joined by commas on a single line, cut short with an ellipsis when they run
+     * out of room.
+     */
+    display?: SelectDisplay;
+    /**
+     * How many chosen values to show while the field is not focused, before the rest are summed
+     * up as "+X". Left out, or set to 0, every value is shown.
+     */
+    max?: number;
+    /**
+     * Rephrases the "+X" standing for the values beyond `max`, "+5 products" for instance.
+     * It receives the number of values being hidden.
+     */
+    overflowText?: (count: number) => string;
+    /** The label above the field, tied to it so that clicking it focuses the field. */
+    label?: string;
+    /**
+     * A line of help under the field. It is tied to the field for assistive technology,
+     * so it is read out along with the label.
+     */
+    hint?: string;
+    /**
+     * A message saying what is wrong with the value, shown in place of the hint so that the field
+     * does not grow. It marks the field invalid, is read along with it, and is announced when it
+     * appears or changes.
+     */
+    error?: string;
+    /**
+     * Marks the field as required: an asterisk follows the label, the combobox is announced as
+     * required, and the hidden `<select>` a form reads is `required`.
+     */
+    required?: boolean;
+    /** Hides the label visually. It still names the field for assistive technology. */
+    hideLabel?: boolean;
+    /**
+     * Where the label sits: above the field (`top`, the default), or at its start, in a column of
+     * its own, moving back above when there is not room for both.
+     */
+    labelPosition?: FieldLabelPosition;
+    /** The height of the field: 32, 40 or 48 pixels. */
+    size?: SelectSize;
+    /** Takes 4px off the height, as everywhere else in the design system. */
+    compact?: boolean;
+    /** What the field says while nothing is chosen. */
+    placeholder?: string;
+    /** Makes the field unusable, greyed out through the colour tokens. Its value is not submitted. */
+    disabled?: boolean;
+    /**
+     * Shows what has been chosen without letting it be changed: the field stays focusable and its
+     * value is submitted, but the list never opens, the chips lose their crosses and no clear
+     * cross is offered.
+     */
+    readonly?: boolean;
+    /** Marks the field as invalid, for a rule of your own. */
+    invalid?: boolean;
+    /**
+     * An icon inside the field, at the start, before the chips when several values can
+     * be chosen. It is decorative by default and becomes a real button as soon as a
+     * `@click:icon-start` listener is attached, in which case it needs `iconStartLabel`.
+     */
+    iconStart?: IconSource;
+    /** What the start icon does, in words, once it is clickable. */
+    iconStartLabel?: string;
+    /**
+     * The chevron at the end of the field, which turns as the list opens: an icon name, or an
+     * explicit render.
+     */
+    expandIcon?: IconSource;
+    /**
+     * Says that the options are being loaded: a spinner takes the chevron's place. The list still
+     * opens.
+     */
+    loading?: boolean;
+    /** What the spinner is announced as. It falls back to the design system dictionary. */
+    loadingText?: string;
+    /** Offers a cross that empties the selection. */
+    clearable?: boolean;
+    /** What that cross does, in words. It falls back to the design system dictionary. */
+    clearLabel?: string;
+    /** Where the list opens relative to the field. */
+    placement?: SelectPlacement;
+}
+type __VLS_Props = SelectProps;
+type __VLS_Slots = {
+    /**
+     * Content at the start of the field, rendered after the chips standing for the chosen
+     * values rather than in their place.
+     */
+    start?(): unknown;
+    /**
+     * Controls of your own inside the field, placed before the ones the field owns: the clear
+     * cross and the chevron.
+     */
+    'value-end'?(): unknown;
+    /** What a row of the list shows, in place of the plain label: a subtitle, an avatar, a badge. */
+    option?(props: SelectOptionSlotProps): unknown;
+    /** Replaces the chip standing for one chosen value. */
+    chip?(props: SelectChipSlotProps): unknown;
+    /** Replaces the "+X" standing for the values beyond `max`. */
+    overflow?(props: SelectOverflowSlotProps): unknown;
+};
+type __VLS_ModelProps = {
+    /** The chosen option's `value`, `''` while nothing is chosen, or the list of them when `multiple` is set. */
+    modelValue?: ItemValue | ItemValue[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    /** Moves the focus to the field. */
+    focus: (options?: FocusOptions) => void | undefined;
+    /** The button that acts as the combobox. */
+    el: import('vue').Ref<HTMLButtonElement | null, HTMLButtonElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    clear: () => any;
+    "update:modelValue": (value: ItemValue | ItemValue[]) => any;
+    "click:icon-start": (event: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClear?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: ItemValue | ItemValue[]) => any) | undefined;
+    "onClick:icon-start"?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    loading: boolean;
+    label: string;
+    placeholder: string;
+    error: string;
+    size: SelectSize;
+    compact: boolean;
+    iconStart: IconSource;
+    disabled: boolean;
+    required: boolean;
+    multiple: boolean;
+    display: SelectDisplay;
+    placement: SelectPlacement;
+    invalid: boolean;
+    hint: string;
+    hideLabel: boolean;
+    labelPosition: FieldLabelPosition;
+    readonly: boolean;
+    iconStartLabel: string;
+    loadingText: string;
+    clearable: boolean;
+    clearLabel: string;
+    max: number;
+    expandIcon: IconSource;
+    overflowText: (count: number) => string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VSelect/VSelect.js

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

package/dist/components/VSelect/VSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VSelect.js","names":[],"sources":["../../../src/components/VSelect/VSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * A select-only combobox: a native button keeps DOM focus and moves aria-activedescendant through\n * the options, since a native `<select>` cannot draw its list with the design system on every\n * engine. A hidden native `<select>` carries the value into forms, with its constraint\n * validation, autofill and reset.\n */\n\nimport { computed, inject, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'\n\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VInput from '../VInput/VInput.vue'\nimport { inputGroupKey } from '../VInput/context'\nimport VListboxChevron from '../VListbox/VListboxChevron.vue'\nimport VListboxPanel from '../VListbox/VListboxPanel.vue'\nimport VListboxValues from '../VListbox/VListboxValues.vue'\nimport VSpinner from '../VSpinner/VSpinner.vue'\n\nimport type {\n  ItemValue,\n  ListboxGroup,\n  ListboxItem,\n  ListboxChipSlotProps,\n  ListboxOption,\n  ListboxOptionSlotProps,\n  ListboxOverflowSlotProps,\n  ListboxSeparator,\n} from '../../types'\nimport { toggleValue } from '../../utils/array'\nimport { partitionAttrs } from '../../utils/attrs'\nimport { chipScaleFor } from '../../utils/chip'\nimport { createNormalizedCache, normalizeText } from '../../utils/text'\n\nimport { canClear } from '../../composables/useClearable'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useFocusoutDismiss } from '../../composables/useFocusoutDismiss'\nimport { iconStartListener } from '../../composables/useIconClickHandlers'\nimport { selectionOf, useListbox } from '../../composables/useListbox'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTimer } from '../../composables/useTimer'\nimport { useMessages } from '../../i18n/state'\n\n/** One thing that can be chosen. */\nexport type SelectOption = ListboxOption\n\n/** A named block of options, the equivalent of a native `<optgroup>`. */\nexport type SelectGroup = ListboxGroup\n\n/** A rule drawn between two blocks of options, purely decorative. */\nexport type SelectSeparator = ListboxSeparator\n\n/** Anything the list may hold: an option, a named block, or a separator. */\nexport type SelectItem = ListboxItem\n\n/** Where the list opens relative to the field. */\nexport type SelectPlacement =\n  'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type SelectSize = 'sm' | 'md' | 'lg'\n\n/**\n * How the chosen values are shown in a multiple field: one chip each, or their labels\n * joined by commas.\n */\nexport type SelectDisplay = 'chip' | 'text'\n\n/** What the `#option` slot receives. */\nexport type SelectOptionSlotProps = ListboxOptionSlotProps\n\n/** What the `#chip` slot receives. */\nexport type SelectChipSlotProps = ListboxChipSlotProps\n\n/** What the `#overflow` slot receives. */\nexport type SelectOverflowSlotProps = ListboxOverflowSlotProps\n\ninterface SelectProps {\n  /**\n   * What the list offers. An entry may be an option, a named block of options, or a\n   * separator; a plain list of options remains perfectly valid.\n   */\n  options: SelectItem[]\n  /**\n   * Allows several values to be chosen, which makes the value a list and shows what has been\n   * chosen inside the field, as chips or as text depending on `display`. The list then stays\n   * open while options are toggled.\n   */\n  multiple?: boolean\n  /**\n   * How the chosen values are shown when several can be chosen: one dismissible chip each, or\n   * their labels joined by commas on a single line, cut short with an ellipsis when they run\n   * out of room.\n   */\n  display?: SelectDisplay\n  /**\n   * How many chosen values to show while the field is not focused, before the rest are summed\n   * up as \"+X\". Left out, or set to 0, every value is shown.\n   */\n  max?: number\n  /**\n   * Rephrases the \"+X\" standing for the values beyond `max`, \"+5 products\" for instance.\n   * It receives the number of values being hidden.\n   */\n  overflowText?: (count: number) => string\n  /** The label above the field, tied to it so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field. It is tied to the field for assistive technology,\n   * 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 field as required: an asterisk follows the label, the combobox is announced as\n   * required, and the hidden `<select>` a form reads is `required`.\n   */\n  required?: boolean\n  /** Hides the label visually. It still names the field for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the field (`top`, the default), or at its start, in a column of\n   * its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: SelectSize\n  /** Takes 4px off the height, as everywhere else in the design system. */\n  compact?: boolean\n  /** What the field says while nothing is chosen. */\n  placeholder?: string\n  /** Makes the field unusable, greyed out through the colour tokens. Its value is not submitted. */\n  disabled?: boolean\n  /**\n   * Shows what has been chosen without letting it be changed: the field stays focusable and its\n   * value is submitted, but the list never opens, the chips lose their crosses and no clear\n   * cross is offered.\n   */\n  readonly?: boolean\n  /** Marks the field as invalid, for a rule of your own. */\n  invalid?: boolean\n  /**\n   * An icon inside the field, at the start, before the chips when several values can\n   * be chosen. It is decorative by default and becomes a real button as soon as a\n   * `@click:icon-start` listener is attached, in which case it needs `iconStartLabel`.\n   */\n  iconStart?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /**\n   * The chevron at the end of the field, which turns as the list opens: an icon name, or an\n   * explicit render.\n   */\n  expandIcon?: IconSource\n  /**\n   * Says that the options are being loaded: a spinner takes the chevron's place. The list still\n   * opens.\n   */\n  loading?: boolean\n  /** What the spinner is announced as. It falls back to the design system dictionary. */\n  loadingText?: string\n  /** Offers a cross that empties the selection. */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /** Where the list opens relative to the field. */\n  placement?: SelectPlacement\n}\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n  multiple: false,\n  display: 'chip',\n  max: undefined,\n  overflowText: undefined,\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  size: 'md',\n  compact: false,\n  placeholder: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  iconStart: undefined,\n  iconStartLabel: undefined,\n  expandIcon: () => expandMoreIcon,\n  loading: false,\n  loadingText: undefined,\n  clearable: false,\n  clearLabel: undefined,\n  placement: 'bottom-start',\n})\n\nconst m = useMessages()\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.select.clear)\n\nconst emit = defineEmits<{\n  /** The clear cross emptied the selection. */\n  clear: []\n  /** The start icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-start': [event: MouseEvent]\n}>()\n\ndefineSlots<{\n  /**\n   * Content at the start of the field, rendered after the chips standing for the chosen\n   * values rather than in their place.\n   */\n  start?(): unknown\n  /**\n   * Controls of your own inside the field, placed before the ones the field owns: the clear\n   * cross and the chevron.\n   */\n  'value-end'?(): unknown\n  /** What a row of the list shows, in place of the plain label: a subtitle, an avatar, a badge. */\n  option?(props: SelectOptionSlotProps): unknown\n  /** Replaces the chip standing for one chosen value. */\n  chip?(props: SelectChipSlotProps): unknown\n  /** Replaces the \"+X\" standing for the values beyond `max`. */\n  overflow?(props: SelectOverflowSlotProps): unknown\n}>()\n\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\nconst chipScale = computed(() => chipScaleFor(resolvedSize.value, resolvedCompact.value))\n\n/** The chosen option's `value`, `''` while nothing is chosen, or the list of them when `multiple` is set. */\nconst model = defineModel<ItemValue | ItemValue[]>({ default: '' })\n\n// `class` and `style` stay on the wrapper; the form attributes go to the hidden `<select>`, which\n// is what a form reads; everything else goes down to the button, the element assistive\n// technology treats as the combobox.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst NATIVE_ONLY = ['name', 'form', 'autocomplete']\nconst split = computed(() => partitionAttrs(forwardedAttrs.value, NATIVE_ONLY))\nconst nativeAttrs = computed(() => split.value.picked)\n\n// Declared as this component's own event, `click:icon-start` is out of `$attrs`, so the\n// listener is relayed to the field by hand; and only when the consumer wrote one.\nconst iconStartClick = iconStartListener((event) => emit('click:icon-start', event))\nconst fieldAttrs = computed(() => ({ ...split.value.rest, ...iconStartClick }))\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst triggerEl = ref<HTMLButtonElement | null>(null)\nconst nativeEl = ref<HTMLSelectElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VListboxPanel> | null>(null)\nconst optionsId = useId()\n\nconst open = ref(false)\nconst focused = ref(false)\n\nconst selectedValues = computed(() => selectionOf(model.value, props.multiple))\n\nconst {\n  allOptions,\n  visible,\n  optionOf,\n  labelOf,\n  remember,\n  activeIndex,\n  optionId,\n  highlightFirst,\n  highlightLast,\n  highlightSelected,\n  move,\n  page,\n  hover,\n  blocks,\n  measureRow,\n} = useListbox({\n  items: () => props.options,\n  selected: () => selectedValues.value,\n  open: () => open.value,\n  id: optionsId,\n  panelEl: () => panelRef.value?.el ?? null,\n  virtual: () => false,\n  size: () => resolvedSize.value,\n  compact: () => resolvedCompact.value,\n})\n\n// @a11y\n// What the button says, which assistive technology reads as the combobox's value: the chosen\n// label, or every chosen label when the chips beside it show them.\nconst valueText = computed(() => selectedValues.value.map(labelOf).join(', '))\n\nconst textDisplay = computed(() => props.multiple && props.display === 'text')\n\n// Folded, the values beyond `max` are summed up; under the focus, every value is there to be\n// seen and taken back.\nconst collapsed = computed(() => props.multiple && !focused.value && !open.value)\n\nconst clearVisible = computed(() =>\n  canClear(props, resolvedDisabled.value, selectedValues.value.length > 0),\n)\n\n/** Whether the hidden `<select>` failed validation since the value last changed. */\nconst nativeInvalid = ref(false)\n\nfunction openPanel() {\n  if (resolvedDisabled.value || props.readonly || open.value) return\n  open.value = true\n  highlightSelected()\n}\n\nfunction closePanel() {\n  if (!open.value) return\n  open.value = false\n  activeIndex.value = -1\n}\n\nfunction togglePanel() {\n  if (open.value) closePanel()\n  else openPanel()\n}\n\nconst onFocusout = useFocusoutDismiss(rootEl, () => {\n  focused.value = false\n  closePanel()\n})\n\nfunction choose(option: SelectOption) {\n  if (option.disabled || props.readonly || resolvedDisabled.value) return\n  remember(option)\n  if (props.multiple) {\n    model.value = toggleValue(selectedValues.value, option.value)\n  } else {\n    // Choosing the option already chosen (Tab without moving, for one) changes nothing.\n    if (model.value !== option.value) model.value = option.value\n    closePanel()\n  }\n}\n\nfunction chooseActive() {\n  const option = visible.value[activeIndex.value]\n  if (option) choose(option)\n}\n\nfunction removeValue(value: ItemValue) {\n  if (!props.multiple || props.readonly || resolvedDisabled.value) return\n  model.value = selectedValues.value.filter((v) => v !== value)\n  // The cross disappears along with its chip, so the focus would fall back to the page.\n  triggerEl.value?.focus()\n}\n\n/** The cross was pressed. It disappears with the selection, so the focus goes back to the button. */\nfunction onClear() {\n  model.value = props.multiple ? [] : ''\n  triggerEl.value?.focus()\n  emit('clear')\n}\n\nconst normalizedOf = createNormalizedCache<SelectOption>()\nlet typed = ''\nconst typeTimer = useTimer()\n\n// @keyboard\n/*\n * Typing a label's first letters highlights it, as a native list does: the letters typed within\n * half a second add up to a prefix, and the same letter repeated cycles through the options it\n * starts.\n */\nfunction typeahead(key: string) {\n  typed += normalizeText(key)\n  typeTimer.start(() => (typed = ''), 500)\n  const list = visible.value\n  if (list.length === 0) return\n  const cycling = [...typed].every((char) => char === typed[0])\n  const needle = cycling ? typed[0]! : typed\n  // A new prefix may match the highlighted option itself; a cycle moves on from it.\n  const from = activeIndex.value + (typed.length === 1 || cycling ? 1 : 0)\n  for (let step = 0; step < list.length; step++) {\n    const index = (Math.max(from, 0) + step) % list.length\n    const option = list[index]!\n    if (!option.disabled && normalizedOf(option, option.label).startsWith(needle)) {\n      activeIndex.value = index\n      return\n    }\n  }\n}\n\nconst printable = (event: KeyboardEvent) =>\n  event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey\n\n// @keyboard\n// The keys of the select-only combobox pattern. Enter and Space are consumed on the closed button\n// too, so the click they would synthesise does not toggle the list a second time.\nfunction onKeydown(event: KeyboardEvent) {\n  if (!open.value) {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'Enter':\n      case ' ':\n        event.preventDefault()\n        openPanel()\n        return\n      case 'Home':\n        event.preventDefault()\n        openPanel()\n        if (open.value) highlightFirst()\n        return\n      case 'End':\n        event.preventDefault()\n        openPanel()\n        if (open.value) highlightLast()\n        return\n    }\n    if (printable(event)) {\n      openPanel()\n      if (open.value) typeahead(event.key)\n    }\n    return\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault()\n      move(1)\n      break\n    case 'ArrowUp':\n      event.preventDefault()\n      if (event.altKey) {\n        chooseActive()\n        closePanel()\n      } else move(-1)\n      break\n    case 'Home':\n      event.preventDefault()\n      highlightFirst()\n      break\n    case 'End':\n      event.preventDefault()\n      highlightLast()\n      break\n    case 'PageDown':\n      event.preventDefault()\n      page(10)\n      break\n    case 'PageUp':\n      event.preventDefault()\n      page(-10)\n      break\n    case ' ':\n      event.preventDefault()\n      // While letters are being typed, a space belongs to the prefix: \"New York\".\n      if (typed) typeahead(' ')\n      else chooseActive()\n      break\n    case 'Enter':\n      event.preventDefault()\n      chooseActive()\n      break\n    case 'Escape':\n      // Consumed only when it closes the list, so a surrounding VDialog stays open.\n      event.preventDefault()\n      closePanel()\n      break\n    case 'Tab':\n      // Leaving a single list takes the highlighted option, as the pattern prescribes.\n      if (!props.multiple) chooseActive()\n      closePanel()\n      break\n    default:\n      if (printable(event)) typeahead(event.key)\n  }\n}\n\nconst interactive = 'a, button, input, select, textarea, [tabindex]'\n\n// @core\n/*\n * The rest of the field is not focusable, so pressing it would hand the focus to the page: the\n * root's `focusout` then closes the list, and the click that follows reopens it.\n */\nfunction onControlMousedown(event: MouseEvent) {\n  const target = event.target as Element\n  if (target.closest('.v-input-field') && !target.closest(interactive)) event.preventDefault()\n}\n\n/**\n * A click anywhere in the box of the field toggles the list, as one on the button does. The\n * field's own controls keep their clicks, and the label's reaches the button by itself.\n */\nfunction onControlClick(event: MouseEvent) {\n  const target = event.target as Element\n  if (resolvedDisabled.value || !target.closest('.v-input-field') || target.closest(interactive))\n    return\n  triggerEl.value?.focus()\n  togglePanel()\n}\n\n/*\n * The hidden `<select>` is written by hand rather than through `selected` bindings: a form reset\n * changes it behind the virtual DOM's back, which would then consider unchanged options already\n * in the right state.\n */\nfunction syncNative() {\n  const el = nativeEl.value\n  if (!el) return\n  for (const option of el.options) {\n    option.selected = option.value !== '' && wantedValues.value.has(option.value)\n  }\n  if (!props.multiple && selectedValues.value.length === 0) el.value = ''\n}\n\nconst wantedValues = computed(() => new Set(selectedValues.value.map(String)))\n\nwatch([selectedValues, allOptions], syncNative, { flush: 'post' })\n\n// A choice that satisfies the constraint clears the error the last submission raised; one that\n// does not raises it again, `checkValidity` firing `invalid`.\nwatch(\n  selectedValues,\n  () => {\n    if (nativeInvalid.value) nativeInvalid.value = !nativeEl.value?.checkValidity()\n  },\n  { flush: 'post' },\n)\n\n/** Autofill writes the hidden `<select>`; the strings it holds are read back as option values. */\nfunction onNativeChange() {\n  const el = nativeEl.value\n  if (!el) return\n  const values = [...el.selectedOptions]\n    .map((native) => allOptions.value.find((option) => String(option.value) === native.value))\n    .filter((option): option is SelectOption => option !== undefined)\n    .map((option) => option.value)\n  model.value = props.multiple ? values : (values[0] ?? '')\n}\n\n// @core\n// A form reset restores the value the field was created with. The browser resets the hidden\n// `<select>` after the event, so it is rewritten on the next task.\nlet initial: ItemValue | ItemValue[] = ''\nlet formEl: HTMLFormElement | null = null\n\nfunction onFormReset() {\n  model.value = Array.isArray(initial) ? [...initial] : initial\n  nativeInvalid.value = false\n  setTimeout(syncNative)\n}\n\nonMounted(() => {\n  initial = Array.isArray(model.value) ? [...model.value] : model.value\n  syncNative()\n  formEl = nativeEl.value?.form ?? null\n  formEl?.addEventListener('reset', onFormReset)\n})\n\nonBeforeUnmount(() => formEl?.removeEventListener('reset', onFormReset))\n\ndefineExpose({\n  /** Moves the focus to the field. */\n  focus: (options?: FocusOptions) => triggerEl.value?.focus(options),\n  /** The button that acts as the combobox. */\n  el: triggerEl,\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-select\"\n    :class=\"rootClass\"\n    :style=\"[{ '--chip-height': chipScale.height }, rootStyle]\"\n    :data-size=\"resolvedSize\"\n    :data-multiple=\"multiple ? '' : undefined\"\n    :data-open=\"open ? '' : undefined\"\n    @focusin=\"focused = true\"\n    @focusout=\"onFocusout\"\n  >\n    <div class=\"v-select-control\" @mousedown=\"onControlMousedown\" @click=\"onControlClick\">\n      <VInput\n        class=\"v-input-end-pinned\"\n        :class=\"{ 'v-input-chips': multiple && !textDisplay }\"\n        v-bind=\"fieldAttrs\"\n        :label=\"label\"\n        :hint=\"hint\"\n        :error=\"error\"\n        :required=\"required\"\n        :hide-label=\"hideLabel\"\n        :label-position=\"labelPosition\"\n        :size=\"resolvedSize\"\n        :compact=\"resolvedCompact\"\n        :invalid=\"invalid || nativeInvalid\"\n        :disabled=\"resolvedDisabled\"\n        :readonly=\"readonly\"\n        :icon-start=\"iconStart\"\n        :icon-start-label=\"iconStartLabel\"\n        :clearable=\"clearable\"\n        :clear-visible=\"clearVisible\"\n        :clear-label=\"resolvedClearLabel\"\n        @clear=\"onClear\"\n      >\n        <template v-if=\"multiple || $slots.start\" #start>\n          <VListboxValues\n            v-if=\"multiple\"\n            :values=\"selectedValues\"\n            :display=\"display\"\n            :max=\"max\"\n            :collapsed=\"collapsed\"\n            :overflow-text=\"overflowText\"\n            :scale=\"chipScale\"\n            :removable=\"!readonly\"\n            :disabled=\"resolvedDisabled\"\n            hide-text\n            :label-of=\"labelOf\"\n            :option-of=\"optionOf\"\n            @remove=\"removeValue\"\n          >\n            <template v-if=\"$slots.chip\" #chip=\"chipProps\">\n              <slot name=\"chip\" v-bind=\"chipProps\" />\n            </template>\n            <template v-if=\"$slots.overflow\" #overflow=\"overflowProps\">\n              <slot name=\"overflow\" v-bind=\"overflowProps\" />\n            </template>\n          </VListboxValues>\n          <slot name=\"start\" />\n        </template>\n\n        <template #control=\"{ controlProps }\">\n          <button\n            ref=\"triggerEl\"\n            type=\"button\"\n            role=\"combobox\"\n            :aria-expanded=\"open\"\n            :aria-controls=\"optionsId\"\n            :aria-activedescendant=\"open && activeIndex >= 0 ? optionId(activeIndex) : undefined\"\n            :aria-required=\"required || undefined\"\n            :aria-readonly=\"readonly || undefined\"\n            v-bind=\"controlProps\"\n            class=\"v-select-trigger\"\n            @click=\"togglePanel\"\n            @keydown=\"onKeydown\"\n          >\n            <span\n              v-if=\"valueText\"\n              class=\"v-select-value\"\n              :class=\"{ 'v-visually-hidden': multiple }\"\n              >{{ valueText }}</span\n            >\n            <span v-else-if=\"placeholder\" class=\"v-select-placeholder\">{{ placeholder }}</span>\n          </button>\n          <!--\n            Out of the tab order and hidden from screen readers, it leaves the button as the\n            single stop and the single announcement. Its options mirror the flat list: a form\n            needs no groups.\n          -->\n          <select\n            ref=\"nativeEl\"\n            v-bind=\"nativeAttrs\"\n            class=\"v-select-native v-hidden-input\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            :multiple=\"multiple || undefined\"\n            :required=\"required || undefined\"\n            :disabled=\"resolvedDisabled || undefined\"\n            @change=\"onNativeChange\"\n            @focus=\"triggerEl?.focus()\"\n            @invalid=\"nativeInvalid = true\"\n          >\n            <option v-if=\"!multiple\" value=\"\" />\n            <option\n              v-for=\"(option, index) in allOptions\"\n              :key=\"index\"\n              :value=\"String(option.value)\"\n              :disabled=\"option.disabled\"\n            >\n              {{ option.label }}\n            </option>\n          </select>\n        </template>\n\n        <template v-if=\"$slots['value-end']\" #value-end><slot name=\"value-end\" /></template>\n\n        <!-- The spinner takes the chevron's place: the field sizes either as an icon. -->\n        <template #end>\n          <VSpinner v-if=\"loading\" class=\"v-select-spinner v-input-icon-end\" :label=\"loadingText\" />\n          <VListboxChevron v-else :icon=\"expandIcon\" :open=\"open\" />\n        </template>\n      </VInput>\n    </div>\n\n    <VListboxPanel\n      :id=\"optionsId\"\n      ref=\"panelRef\"\n      v-model:open=\"open\"\n      anchor=\"--select-anchor\"\n      :placement=\"placement\"\n      class=\"v-select-panel\"\n      :size=\"resolvedSize\"\n      :compact=\"resolvedCompact\"\n      :multiple=\"multiple\"\n      :blocks=\"blocks\"\n      :measure=\"measureRow\"\n      @select=\"choose\"\n      @highlight=\"hover\"\n    >\n      <template v-if=\"$slots.option\" #option=\"slotProps\">\n        <slot name=\"option\" v-bind=\"slotProps\" />\n      </template>\n    </VListboxPanel>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-select {\n    /*\n     * Declared on the root, the common ancestor of the field and the panel; a panel drawn above\n     * the page remains a descendant of it in the document.\n     */\n    anchor-scope: --select-anchor;\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-select-control {\n    display: block;\n  }\n\n  /* The panel opens against the box of the field, not against its label and hint. */\n  .v-select-control .v-input-field {\n    anchor-name: --select-anchor;\n  }\n\n  .v-select-panel {\n    max-block-size: var(--vectis-control-size-select-list-max-block);\n  }\n\n  /*\n   * VInput's `.v-input-control` gives the button the input's box: it fills the field and draws\n   * no border of its own, the field drawing the focus around it.\n   */\n  .v-select-trigger {\n    display: flex;\n    align-items: center;\n    text-align: start;\n    cursor: pointer;\n  }\n\n  /*\n   * Beside chips the button takes what is left of the last row, down to nothing, rather than\n   * wrapping onto a row of its own.\n   */\n  .v-select[data-multiple] .v-select-trigger {\n    flex: 1 1 0;\n  }\n\n  .v-select-value,\n  .v-select-placeholder {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-select-placeholder {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-select-spinner {\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * An unbroken line has the whole of its text as its min-content width; without this, a grid\n   * track or a flex row sized `auto` widens to fit every label and the ellipsis never shows.\n   */\n  .v-select:has(.v-listbox-text) {\n    min-inline-size: 0;\n  }\n}\n</style>\n"],"mappings":""}