vectis-ui 0.15.0 → 0.16.0

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

@@ -1 +1 @@
-{"version":3,"file":"VCombobox.vue_vue_type_script_setup_true_lang.js","names":["$slots","expandMoreIcon","_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createElementVNode","_createVNode","VInput","_mergeProps","_createSlots","_withCtx","_createBlock","VSpinner","VListboxChevron","VListboxValues","_renderSlot","_normalizeProps","_guardReactiveProps","_createCommentVNode","VListboxPanel","_toDisplayString","VEmptyState","searchOffIcon","inboxIcon","VSpinner_default","VInput_default","VEmptyState_default","VListboxChevron_default","VListboxPanel_default","VListboxValues_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","VCombobox_vue_vue_type_script_setup_true_lang_default","expand_more","\"modelValue\"","\"modelModifiers\"","__expose","__emit","props","__props","m","useMessages","resolvedEmptyText","computed","resolvedClearLabel","resolvedLoadingText","emit","group","inject","inputGroupKey","resolvedSize","resolvedCompact","resolvedDisabled","useControlShape","chipScale","chipScaleFor","model","useModel","useRootAttrs","iconStartClick","iconStartListener","event","fieldAttrs","forwardedAttrs","rootEl","ref","inputRef","optionsId","useId","open","query","focused","typed","selectedValues","selectionOf","normalizedOf","createNormalizedCache","normalizedLabelOf","option","searchTerm","closedTerm","panelRef","filtered","useListbox","matcher","list","q","o","needle","normalizeText","stateAnnouncement","emitSearch","cancelSearch","useDebouncedSearch","term","highlightFirst","infiniteScroll","singleLabel","value","labelOf","watch","allOptions","textDisplay","collapsed","clearVisible","canClear","openPanel","highlightSelected","sentinelEl","useInfiniteScroll","sentinel","closePanel","label","frozen","onFocusout","useFocusoutDismiss","onInput","selectQuery","onFocus","onChevron","onControlMousedown","onControlClick","select","remember","toggleValue","removeValue","v","onClear","onKeydown","move","activeIndex","last","options","openBlock","createElementBlock","normalizeClass","unref","rootClass","normalizeStyle","rootStyle","_cache","args","createElementVNode","createVNode","mergeProps","$event","optionId","createSlots","withCtx","createBlock","_ctx","optionOf","renderSlot","normalizeProps","guardReactiveProps","chipProps","overflowProps","createCommentVNode","blocks","measureRow","hover","toDisplayString","search_off","inbox","slotProps"],"sources":["../../../src/components/VCombobox/VCombobox.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * Keep DOM focus on the field and move aria-activedescendant through options. JavaScript\n * supplies filtering, selection and keyboard navigation unavailable to native text inputs.\n */\n\nimport { computed, inject, ref, useId, watch } from 'vue'\n\nimport VEmptyState from '../VEmptyState/VEmptyState.vue'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport { inbox as inboxIcon } from '../VIcon/icons/inbox'\nimport { search_off as searchOffIcon } from '../VIcon/icons/search_off'\nimport type { IconSource } from '../VIcon/types'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VInput from '../VInput/VInput.vue'\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 { toggleValue } from '../../utils/array'\nimport type {\n  ItemValue,\n  ListboxGroup,\n  ListboxItem,\n  ListboxChipSlotProps,\n  ListboxOption,\n  ListboxOptionSlotProps,\n  ListboxOverflowSlotProps,\n  ListboxSeparator,\n} from '../../types'\nimport { inputGroupKey } from '../VInput/context'\n\nimport { chipScaleFor } from '../../utils/chip'\nimport { createNormalizedCache, normalizeText } from '../../utils/text'\n\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\nimport { useFocusoutDismiss } from '../../composables/useFocusoutDismiss'\nimport { useInfiniteScroll } from '../../composables/useInfiniteScroll'\nimport { selectionOf, useListbox } from '../../composables/useListbox'\n\nimport { canClear } from '../../composables/useClearable'\nimport { iconStartListener } from '../../composables/useIconClickHandlers'\n\nimport { useDebouncedSearch } from '../../composables/useDebouncedSearch'\nimport { useMessages } from '../../i18n/state'\n\n/** One thing that can be chosen. */\nexport type ComboboxOption = ListboxOption\n\n/**\n * A named block of options, the equivalent of the grouping a native list offers. A\n * group none of whose options survive the search disappears entirely, its name\n * included.\n */\nexport type ComboboxGroup = ListboxGroup\n\n/**\n * A rule drawn between two blocks of options. It is purely decorative, and a separator the\n * search leaves stranded (at the top, at the bottom, or against another one) is simply not\n * drawn.\n */\nexport type ComboboxSeparator = ListboxSeparator\n\n/** Anything the list may hold: an option, a named block, or a separator. */\nexport type ComboboxItem = ListboxItem\n\n/**\n * How the list is narrowed as one types: by the component itself, not at all (when the\n * options already arrive filtered by a server), or by a rule of your own.\n */\nexport type ComboboxFilter = boolean | ((option: ComboboxOption, query: string) => boolean)\n\n/** Where the list opens relative to the field. */\nexport type ComboboxPlacement =\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type ComboboxSize = '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 ComboboxDisplay = 'chip' | 'text'\n\n/** What the `#option` slot receives. */\nexport type ComboboxOptionSlotProps = ListboxOptionSlotProps\n\n/** What the `#chip` slot receives. */\nexport type ComboboxChipSlotProps = ListboxChipSlotProps\n\n/** What the `#overflow` slot receives. */\nexport type ComboboxOverflowSlotProps = ListboxOverflowSlotProps\n\n/** What the `#empty` slot receives. */\nexport interface ComboboxEmptySlotProps {\n  query: string\n}\n\ninterface ComboboxProps {\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: ComboboxItem[]\n  /**\n   * Allows several values to be chosen, which makes the value a list and shows what has\n   * been chosen inside the field, as chips or as text depending on `display`.\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?: ComboboxDisplay\n  /**\n   * How many chosen values to show before the rest are summed up as \"+X\", as chips or as text\n   * alike. 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  /** Marks the field as required: an asterisk follows the label, and the field is `required`. */\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?: ComboboxSize\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 and nothing has been typed. */\n  placeholder?: string\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows what has been chosen without letting it be changed: nothing can be typed, the list\n   * never opens, the chips lose their crosses and no clear 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  /** Offers a cross that empties both the selection and the search. */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * The title of the empty state the panel shows when the search matches nothing. It is also\n   * what a screen reader hears, even when the `#empty` slot draws something else: set both\n   * together.\n   */\n  emptyText?: string\n  /** How the list is narrowed as one types. */\n  filter?: ComboboxFilter\n  /**\n   * How long to wait before telling the source what is being searched for, in\n   * milliseconds. Zero tells it at once, which suits a source that is not a network\n   * request.\n   */\n  searchDebounce?: number\n  /**\n   * Says that something is being loaded. Either way the field replaces its chevron with a\n   * spinner.\n   */\n  loading?: boolean\n  /**\n   * What is said while loading, and what the spinner is announced as. A screen reader hears\n   * it even when the `#loading` slot draws something else: set both together.\n   */\n  loadingText?: string\n  /**\n   * Says that there are more pages to come, which makes the component ask for the next one as\n   * the end of the list comes into view.\n   */\n  hasMore?: boolean\n  /**\n   * Renders only the rows near the visible part of the panel, for lists of thousands of options.\n   * Rows are measured as they render, so a custom `#option` may vary in height. Options are then\n   * announced with their position in the list.\n   */\n  virtual?: boolean\n  /** Where the list opens relative to the field. */\n  placement?: ComboboxPlacement\n}\n\nconst props = withDefaults(defineProps<ComboboxProps>(), {\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  clearable: false,\n  clearLabel: undefined,\n  emptyText: undefined,\n  filter: true,\n  searchDebounce: 250,\n  loading: false,\n  loadingText: undefined,\n  hasMore: false,\n  virtual: false,\n  placement: 'bottom-start',\n})\n\nconst m = useMessages()\nconst resolvedEmptyText = computed(() => props.emptyText ?? m.value.combobox.empty)\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.combobox.clear)\nconst resolvedLoadingText = computed(() => props.loadingText ?? m.value.common.loading)\n\nconst emit = defineEmits<{\n  /** What is being searched for, to be sent to the source. */\n  search: [query: string]\n  /** The end of the list has come into view: send the next page. */\n  'load-more': []\n  /** The clear cross emptied the selection and the search. */\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: ComboboxOptionSlotProps): unknown\n  /** Replaces the chip standing for one chosen value. */\n  chip?(props: ComboboxChipSlotProps): unknown\n  /** Replaces the \"+X\" standing for the values beyond `max`. */\n  overflow?(props: ComboboxOverflowSlotProps): unknown\n  /** What the panel shows when nothing matches. It receives the term that was searched. */\n  empty?(props: ComboboxEmptySlotProps): unknown\n  /** What the panel shows while loading its first options. */\n  loading?(): unknown\n}>()\n\n// Everything below reads the RESOLVED values and never the props: the chips, the panel and the\n// field would otherwise come out at three different scales inside the same row.\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\n// The size, the density and the HEIGHT of the chips sitting inside the field, worked out\n// once in `utils/chip.ts` and shared with VFileInput. The height is set inline below\n// rather than restated as a table of CSS rules: it is the height the field forces on its\n// input, and deriving both from the same pair is what stops them drifting apart.\nconst chipScale = computed(() => chipScaleFor(resolvedSize.value, resolvedCompact.value))\n\n/** The chosen option's `value`, or the list of them when `multiple` is set. */\nconst model = defineModel<ItemValue | ItemValue[]>({ default: '' })\n\n// `class` and `style` stay on the wrapper, where a consumer expects to style the component;\n// everything else; a name above all; goes down to the text field, which is the element\n// assistive technology treats as the combobox.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\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))\n\n/** What reaches the field: the consumer's own attributes, plus that listener. */\nconst fieldAttrs = computed(() => ({ ...forwardedAttrs.value, ...iconStartClick }))\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\n// One generated identifier serves twice: as the panel's own id, which the field points\n// at, and as the prefix of every option's id. The two strings can never collide, one\n// being a prefix of longer ones.\nconst optionsId = useId()\n\nconst open = ref(false)\nconst query = ref('')\nconst focused = ref(false)\n// The text in the field serves two purposes at once: it SHOWS the chosen label when a single\n// value is picked, and it is what one searches with. This flag tells the two apart; while it is\n// false the text is merely a label and narrows nothing, so reopening the panel offers the whole\n// list again.\nconst typed = ref(false)\n\nconst selectedValues = computed(() => selectionOf(model.value, props.multiple))\n\n/*\n * Reading the label on every call is what keeps the filter reactive: flattening the options\n * only ever touches the containers, so a label changed in place would go unnoticed by anything\n * keyed on the list.\n */\nconst normalizedOf = createNormalizedCache<ComboboxOption>()\nconst normalizedLabelOf = (option: ComboboxOption) => normalizedOf(option, option.label)\n\n// ONE search term, read both by the local filter and by what is sent to the source: the\n// list on screen and the request in flight therefore cannot describe different searches.\n// With nothing typed the term is empty, so a label merely being displayed never narrows\n// the list.\nconst searchTerm = computed(() => (typed.value ? query.value.trim() : ''))\n\n// Closing empties `searchTerm` (the typing flag drops) in the same tick as it hides the panel,\n// but the panel fades out rather than vanishing. Filtered on the live term, the list would\n// spring back to every option during that fade, and the panel grow under the pointer that just\n// chose.\nconst closedTerm = ref<string | null>(null)\n\nconst panelRef = ref<InstanceType<typeof VListboxPanel> | null>(null)\n\nconst {\n  allOptions,\n  visible: filtered,\n  optionOf,\n  labelOf,\n  remember,\n  activeIndex,\n  optionId,\n  highlightFirst,\n  highlightSelected,\n  move,\n  hover,\n  blocks,\n  measureRow,\n} = useListbox({\n  items: () => props.options,\n  filter: (list) => {\n    const matcher = props.filter\n    if (matcher === false) return list\n    const q = closedTerm.value ?? searchTerm.value\n    if (!q) return list\n    if (typeof matcher === 'function') return list.filter((o) => matcher(o, q))\n    const needle = normalizeText(q)\n    return list.filter((o) => normalizedLabelOf(o).includes(needle))\n  },\n  selected: () => selectedValues.value,\n  open: () => open.value,\n  id: optionsId,\n  panelEl: () => panelRef.value?.el ?? null,\n  virtual: () => props.virtual,\n  hasMore: () => props.hasMore,\n  size: () => resolvedSize.value,\n  compact: () => resolvedCompact.value,\n})\n\n// @a11y\n/**\n * What is announced about the state of the panel; that nothing matches, or that something is\n * loading.\n */\nconst stateAnnouncement = computed(() => {\n  if (!open.value || filtered.value.length > 0) return ''\n  return props.loading ? resolvedLoadingText.value : resolvedEmptyText.value\n})\n\nconst { request: emitSearch, cancel: cancelSearch } = useDebouncedSearch({\n  delay: () => props.searchDebounce,\n  active: () => open.value,\n  report: (term) => emit('search', term),\n})\n\nwatch(searchTerm, (term) => {\n  if (!open.value) return\n  // A new search means a new list, so the highlight cannot survive it: with an outside source\n  // the options are replaced wholesale, and the old position would name a completely unrelated\n  // option. It is moved to the first available option rather than dropped altogether, and that\n  // matters when the filtering is left to the source: the visible list keeps the very same\n  // reference until the answer arrives, so the watcher below would never fire and Enter would\n  // do nothing in the meantime.\n  highlightFirst()\n  // The page asked for under the previous term will never arrive, and the first page of the new\n  // one may be exactly as long as the list it replaces; which the paging would not recognise as\n  // an arrival.\n  infiniteScroll.restart()\n  emitSearch(term)\n})\n\n// With a single value, the field shows its label as ordinary text whenever it is not being\n// edited. Read through `selectedValues`, which knows that a number is a value even at zero: a\n// test on the string type would leave a numeric value unlabelled.\nfunction singleLabel() {\n  const value = props.multiple ? undefined : selectedValues.value[0]\n  return value === undefined ? '' : labelOf(value)\n}\n\nquery.value = singleLabel()\n\n// Refresh copied selection labels when options arrive or the parent updates the value.\n// Post-flush timing reads the accepted model after rendering.\nwatch(\n  [allOptions, selectedValues],\n  () => {\n    if (props.multiple || open.value || typed.value) return\n    query.value = singleLabel()\n  },\n  { flush: 'post' },\n)\n\n/** The chosen values are spelled out as one line of text rather than drawn as chips. */\nconst textDisplay = computed(() => props.multiple && props.display === 'text')\n\n// A read-only TEXT display keeps it folded under the focus too: nothing can be typed, and the\n// input's share of the row would only cut the line of values short for nothing.\nconst collapsed = computed(\n  () =>\n    props.multiple &&\n    selectedValues.value.length > 0 &&\n    (!focused.value || (textDisplay.value && props.readonly)),\n)\n\n// The field cannot work that out for itself, since the chips live outside its value, so the\n// answer is given to it explicitly, and the room for the cross is reserved accordingly.\nconst clearVisible = computed(() =>\n  canClear(\n    props,\n    resolvedDisabled.value,\n    selectedValues.value.length > 0 || query.value.length > 0,\n  ),\n)\n\n// The single cut-off point of a frozen field: every route into the list; a click on the\n// control, the focus, a keystroke, typing; ends up here, so `readonly` is refused once rather\n// than guarded in each handler.\nfunction openPanel() {\n  if (resolvedDisabled.value || props.readonly || open.value) return\n  closedTerm.value = null\n  open.value = true\n  highlightSelected()\n  // Told to the source after the panel is marked open; the delayed emission checks that flag\n  // before firing; which lets an outside source load its first page as the panel appears.\n  emitSearch(searchTerm.value, true)\n}\n\n// Asking for the next page as the end of the list is reached. The observer itself, its\n// re-arming after each page and the lock that stops it firing twice all live in\n// `useInfiniteScroll`; it is declared here so that closing the panel can reset it.\nconst sentinelEl = ref<HTMLElement | null>(null)\n\nconst infiniteScroll = useInfiniteScroll({\n  sentinelEl,\n  // Found by its ARIA role, which is public API, rather than by an internal class.\n  root: (sentinel) => sentinel.closest('[role=\"listbox\"]'),\n  canLoad: () => open.value && props.hasMore && !props.loading,\n  loaded: () => allOptions.value,\n  onLoadMore: () => emit('load-more'),\n})\n\n/**\n * Closes the list. The field then shows `label`: the chosen value's, unless the caller passes the\n * label of the option it has just chosen, which the value read back may not yet carry.\n */\nfunction closePanel(label = singleLabel()) {\n  if (!open.value) return\n  cancelSearch()\n  // A page that never arrived; a request that failed; must not leave the paging frozen for\n  // good, so the lock is released here.\n  infiniteScroll.reset()\n  closedTerm.value = searchTerm.value\n  open.value = false\n  activeIndex.value = -1\n  typed.value = false\n  query.value = label\n}\n\nwatch(\n  () => props.readonly || resolvedDisabled.value,\n  (frozen) => {\n    if (frozen) closePanel()\n  },\n)\n\n/**\n * Closes as soon as the focus leaves the component; the panel included, which is a descendant\n * of it even while floating above the page.\n */\nconst onFocusout = useFocusoutDismiss(rootEl, () => closePanel())\n\n/** The reader is typing: the text becomes a search, and the panel opens. */\nfunction onInput() {\n  typed.value = true\n  openPanel()\n}\n\n/**\n * With a single value chosen, the label shown in the field is selected on focus, so that typing\n * replaces it rather than appending to it; and until something IS typed, the whole list stays\n * on offer.\n */\nfunction selectQuery() {\n  if (!props.multiple && query.value) inputRef.value?.select()\n}\n\nfunction onFocus() {\n  focused.value = true\n  selectQuery()\n}\n\n/** Whether a pointer event landed on the chevron, or on the spinner standing in its place. */\nconst onChevron = (event: Event) =>\n  event.target instanceof Element &&\n  event.target.closest('.v-combobox-chevron, .v-combobox-spinner') !== null\n\n// @core\n/*\n * The chevron is not focusable, so pressing it would hand the focus to the page: the root's\n * `focusout` then closes the panel, and the click that follows reopens it. A click meant to\n * close would flash the list instead.\n */\nfunction onControlMousedown(event: MouseEvent) {\n  if (onChevron(event)) event.preventDefault()\n}\n\n/**\n * A click anywhere on the field focuses it and opens the panel; except on the chevron of an\n * open panel, which closes it.\n */\nfunction onControlClick(event: MouseEvent) {\n  if (resolvedDisabled.value) return\n  inputRef.value?.focus()\n  if (open.value && onChevron(event)) {\n    closePanel()\n    return\n  }\n  openPanel()\n  // Selected again after the click, which has just placed the caret somewhere in the middle of\n  // the label.\n  selectQuery()\n}\n\nfunction select(option: ComboboxOption) {\n  if (option.disabled || props.readonly || resolvedDisabled.value) return\n  // Remembered immediately: the option may vanish from the list; on the next search; before the\n  // parent has even passed the new value back down.\n  remember(option)\n  if (props.multiple) {\n    typed.value = false\n    model.value = toggleValue(selectedValues.value, option.value)\n    query.value = ''\n    inputRef.value?.focus()\n  } else {\n    model.value = option.value\n    closePanel(option.label)\n  }\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  inputRef.value?.focus()\n}\n\n/**\n * The clear cross was pressed. The field has already emptied the text it holds; what is left to\n * empty is the selection itself; the single value, or all the chips.\n */\nfunction onClear() {\n  model.value = props.multiple ? [] : ''\n  typed.value = false\n  // The list may still be open (a pointer press on the cross does not close it): the\n  // highlight is moved to the first option rather than dropped, or Enter would do nothing.\n  if (open.value) highlightFirst()\n  else activeIndex.value = -1\n  emit('clear')\n}\n\n// @keyboard @a11y\n// Naming the current option and never the focus itself, which stays in the field throughout;\n// Backspace on an empty field takes back the last chip, the usual gesture in a field holding\n// several values.\nfunction onKeydown(event: KeyboardEvent) {\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault()\n      if (open.value) move(1)\n      else openPanel()\n      break\n    case 'ArrowUp':\n      event.preventDefault()\n      if (open.value) move(-1)\n      else openPanel()\n      break\n    case 'Enter':\n      if (open.value && activeIndex.value >= 0) {\n        event.preventDefault()\n        const option = filtered.value[activeIndex.value]\n        if (option) select(option)\n      }\n      break\n    case 'Escape':\n      // Consumed only when it closes the list, so a surrounding VDialog stays open; on a\n      // closed list it is left to go on and close the dialog.\n      if (open.value) {\n        event.preventDefault()\n        closePanel()\n      }\n      break\n    case 'Tab':\n      closePanel()\n      break\n    case 'Backspace':\n      if (props.multiple && !query.value) {\n        const last = selectedValues.value.at(-1)\n        if (last !== undefined) removeValue(last)\n      }\n      break\n  }\n}\n\ndefineExpose({\n  /** Moves the focus to the search field. */\n  focus: (options?: FocusOptions) => inputRef.value?.focus(options),\n  /** Selects what has been typed in the search field. */\n  select: () => inputRef.value?.select(),\n  /** The real `<input>` behind the field, for what neither of the two above covers. */\n  el: computed(() => inputRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-combobox\"\n    :class=\"rootClass\"\n    :style=\"[{ '--chip-height': chipScale.height }, rootStyle]\"\n    :data-size=\"resolvedSize\"\n    :data-compact=\"resolvedCompact ? '' : undefined\"\n    :data-multiple=\"multiple ? '' : undefined\"\n    :data-collapsed=\"collapsed ? '' : undefined\"\n    :data-open=\"open ? '' : undefined\"\n    @focusout=\"onFocusout\"\n  >\n    <div class=\"v-combobox-control\" @mousedown=\"onControlMousedown\" @click=\"onControlClick\">\n      <!--\n        The two arrangements VInput offers a field holding chips: its end controls lifted out of\n        the flow, always; the chevron and the cross stay put whether or not the input has folded\n        away; and the chips wrapping, when there are chips at all. A text display keeps the\n        field on one line and needs only the first.\n      -->\n      <VInput\n        ref=\"inputRef\"\n        v-model=\"query\"\n        class=\"v-input-end-pinned\"\n        :class=\"{ 'v-input-chips': multiple && !textDisplay }\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-autocomplete=\"list\"\n        :aria-expanded=\"open\"\n        :aria-controls=\"optionsId\"\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\"\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        :placeholder=\"selectedValues.length === 0 ? placeholder : undefined\"\n        :aria-activedescendant=\"open && activeIndex >= 0 ? optionId(activeIndex) : undefined\"\n        @input=\"onInput\"\n        @keydown=\"onKeydown\"\n        @focus=\"onFocus\"\n        @blur=\"focused = false\"\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            :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 v-if=\"$slots['value-end']\" #value-end><slot name=\"value-end\" /></template>\n\n        <!--\n          The chevron sits at the end of the field and turns as the panel opens; the clear cross\n          is rendered by the field itself, to its left. While loading, the spinner takes EXACTLY\n          the chevron's place; the field gives a spinner among its direct children the size of\n          an icon; so nothing shifts.\n        -->\n        <template #end>\n          <VSpinner v-if=\"loading\" class=\"v-combobox-spinner v-input-icon-end\" aria-hidden=\"true\" />\n          <VListboxChevron v-else class=\"v-combobox-chevron\" :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=\"--combobox-anchor\"\n      :placement=\"placement\"\n      class=\"v-combobox-panel\"\n      :size=\"resolvedSize\"\n      :compact=\"resolvedCompact\"\n      :multiple=\"multiple\"\n      :virtual=\"virtual\"\n      :blocks=\"blocks\"\n      :measure=\"measureRow\"\n      @select=\"select\"\n      @highlight=\"hover\"\n    >\n      <template v-if=\"$slots.option\" #option=\"slotProps\">\n        <slot name=\"option\" v-bind=\"slotProps\" />\n      </template>\n\n      <!--\n        The order matters: loading is checked before emptiness, so that a panel waiting for an\n        answer never claims there is no result. Both are hidden from screen readers, and that is\n        not an oversight.\n      -->\n      <div v-if=\"loading && filtered.length === 0\" class=\"v-combobox-state\" aria-hidden=\"true\">\n        <slot name=\"loading\">\n          <VSpinner :label=\"resolvedLoadingText\" />\n          <span>{{ resolvedLoadingText }}</span>\n        </slot>\n      </div>\n      <div v-else-if=\"filtered.length === 0\" class=\"v-combobox-state\" aria-hidden=\"true\">\n        <slot name=\"empty\" :query=\"searchTerm\">\n          <VEmptyState\n            size=\"sm\"\n            class=\"v-combobox-empty\"\n            :icon=\"searchTerm ? searchOffIcon : inboxIcon\"\n            :title=\"resolvedEmptyText\"\n          />\n        </slot>\n      </div>\n\n      <!--\n        It has to stay a SINGLE element: rendering the spinner conditionally in its place would\n        destroy the marker and silently cancel the observation, and no further page would ever\n        be asked for.\n      -->\n      <div v-if=\"hasMore\" ref=\"sentinelEl\" class=\"v-combobox-more\" aria-hidden=\"true\">\n        <VSpinner v-if=\"loading\" :label=\"resolvedLoadingText\" />\n      </div>\n    </VListboxPanel>\n\n    <!-- The spoken counterpart of the two panel states above. It sits OUTSIDE the\n         listbox, being exactly the kind of content a listbox may not contain. -->\n    <span class=\"v-visually-hidden\" role=\"status\">{{ stateAnnouncement }}</span>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-combobox {\n    /*\n     * It is declared on the root because that is the common ancestor of the field and the\n     * panel; a panel drawn above the page remains a descendant of it in the document.\n     */\n    anchor-scope: --combobox-anchor;\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-combobox-control {\n    display: block;\n  }\n\n  /*\n   * The anchor is the FIELD's box and not this wrapper's, which also holds the label and the\n   * hint: anchored to the wrapper, the panel opens a hint's height below the field, and a\n   * label's height above it once there is no room below and `flip-block` turns it over. Against\n   * the field it covers whichever of the two it lands on, which a panel belonging to a control\n   * is supposed to do.\n   */\n  .v-combobox-control .v-input-field {\n    anchor-name: --combobox-anchor;\n  }\n\n  .v-combobox-panel {\n    max-block-size: var(--vectis-control-size-combobox-list-max-block);\n  }\n\n  /*\n   * The chevron and the clear cross are pinned to the end of the field by VInput's\n   * `.v-input-end-pinned`, which also reserves their room. The chevron and the spinner take\n   * turns in the same place and occupy the same box; the field gives a spinner among its direct\n   * children the size of an icon; so swapping one for the other shifts nothing.\n   */\n  .v-combobox-spinner {\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * It remains in the page and remains focusable; clicking the field or tabbing into it brings\n   * it straight back, the folded state ending as soon as it has the focus.\n   */\n  .v-combobox[data-collapsed] .v-input-control {\n    position: absolute;\n    width: 0;\n    height: 0;\n    padding: 0;\n  }\n\n  /*\n   * Under the focus the two share the row, and the line is capped at half of it so that a long\n   * selection cannot squeeze what is being typed down to nothing. Folded, the input is out of\n   * the flow and the line takes the whole field.\n   */\n  .v-combobox:not([data-collapsed]) .v-listbox-text {\n    max-inline-size: 50%;\n  }\n\n  /*\n   * An unbroken line has the whole of its text as its min-content width, and that width travels\n   * up through the field to the root. In a grid track or a flex row sized `auto`, the component\n   * then widens its container to fit every label instead of cutting them short, and the\n   * ellipsis never shows.\n   */\n  .v-combobox:has(.v-listbox-text) {\n    min-inline-size: 0;\n  }\n\n  /* The rows saying \"nothing matches\" or \"loading\" are built like an option: they read\n     the same inherited dimensions from the panel, and the spinner follows through the\n     same block's icon context. They refuse to shrink, the panel being a bounded column\n     that would otherwise squash them. */\n  .v-combobox-state {\n    display: flex;\n    flex: none;\n    align-items: center;\n    gap: var(--control-gap);\n    min-height: var(--control-height);\n    padding: var(--vectis-space-1) var(--control-padding-inline);\n    font-size: var(--control-font-size);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * The default empty state spans the panel. `[data-size]` lifts the selector above VEmptyState's\n   * own size rules, whose sheet may load after this one.\n   */\n  .v-combobox-state > .v-combobox-empty[data-size] {\n    flex: 1;\n    padding-block: var(--vectis-space-3);\n    padding-inline: 0;\n  }\n\n  /*\n   * The foot of the list: the marker watched for the end, and the place the next-page spinner\n   * appears. It is given a real height on purpose; a box of no height at all makes the crossing\n   * it is watched for unreliable.\n   */\n  .v-combobox-more {\n    display: flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n    min-height: var(--vectis-control-height-xs);\n    color: var(--vectis-color-text-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-combobox-chevron {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"VCombobox.vue_vue_type_script_setup_true_lang.js","names":["$slots","expandMoreIcon","_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createElementVNode","_createVNode","VInput","_mergeProps","_createSlots","_withCtx","_createBlock","VSpinner","VListboxChevron","VListboxValues","_renderSlot","_normalizeProps","_guardReactiveProps","_createCommentVNode","VListboxPanel","_toDisplayString","VEmptyState","searchOffIcon","inboxIcon","VSpinner_default","VInput_default","VEmptyState_default","VListboxChevron_default","VListboxPanel_default","VListboxValues_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","VCombobox_vue_vue_type_script_setup_true_lang_default","expand_more","\"modelValue\"","\"modelModifiers\"","__expose","__emit","props","__props","m","useMessages","resolvedEmptyText","computed","resolvedClearLabel","resolvedLoadingText","emit","group","inject","inputGroupKey","resolvedSize","resolvedDisabled","useControlShape","chipScale","chipScaleFor","model","useModel","useRootAttrs","iconStartClick","iconStartListener","event","fieldAttrs","forwardedAttrs","rootEl","ref","inputRef","optionsId","useId","open","query","focused","typed","selectedValues","selectionOf","normalizedOf","createNormalizedCache","normalizedLabelOf","option","searchTerm","closedTerm","panelRef","filtered","useListbox","matcher","list","q","o","needle","normalizeText","stateAnnouncement","emitSearch","cancelSearch","useDebouncedSearch","term","highlightFirst","infiniteScroll","singleLabel","value","labelOf","watch","allOptions","textDisplay","collapsed","clearVisible","canClear","openPanel","highlightSelected","sentinelEl","useInfiniteScroll","sentinel","closePanel","label","frozen","onFocusout","useFocusoutDismiss","onInput","selectQuery","onFocus","onChevron","onControlMousedown","onControlClick","select","remember","toggleValue","removeValue","v","onClear","onKeydown","move","activeIndex","last","options","openBlock","createElementBlock","normalizeClass","unref","rootClass","normalizeStyle","rootStyle","_cache","args","createElementVNode","createVNode","mergeProps","$event","optionId","createSlots","withCtx","createBlock","_ctx","optionOf","renderSlot","normalizeProps","guardReactiveProps","chipProps","overflowProps","createCommentVNode","blocks","measureRow","hover","toDisplayString","search_off","inbox","slotProps"],"sources":["../../../src/components/VCombobox/VCombobox.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * Keep DOM focus on the field and move aria-activedescendant through options. JavaScript\n * supplies filtering, selection and keyboard navigation unavailable to native text inputs.\n */\n\nimport { computed, inject, ref, useId, watch } from 'vue'\n\nimport VEmptyState from '../VEmptyState/VEmptyState.vue'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport { inbox as inboxIcon } from '../VIcon/icons/inbox'\nimport { search_off as searchOffIcon } from '../VIcon/icons/search_off'\nimport type { IconSource } from '../VIcon/types'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VInput from '../VInput/VInput.vue'\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 { toggleValue } from '../../utils/array'\nimport type {\n  ItemValue,\n  ListboxGroup,\n  ListboxItem,\n  ListboxChipSlotProps,\n  ListboxOption,\n  ListboxOptionSlotProps,\n  ListboxOverflowSlotProps,\n  ListboxSeparator,\n} from '../../types'\nimport { inputGroupKey } from '../VInput/context'\n\nimport { chipScaleFor } from '../../utils/chip'\nimport { createNormalizedCache, normalizeText } from '../../utils/text'\n\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\nimport { useFocusoutDismiss } from '../../composables/useFocusoutDismiss'\nimport { useInfiniteScroll } from '../../composables/useInfiniteScroll'\nimport { selectionOf, useListbox } from '../../composables/useListbox'\n\nimport { canClear } from '../../composables/useClearable'\nimport { iconStartListener } from '../../composables/useIconClickHandlers'\n\nimport { useDebouncedSearch } from '../../composables/useDebouncedSearch'\nimport { useMessages } from '../../i18n/state'\n\n/** One thing that can be chosen. */\nexport type ComboboxOption = ListboxOption\n\n/**\n * A named block of options, the equivalent of the grouping a native list offers. A\n * group none of whose options survive the search disappears entirely, its name\n * included.\n */\nexport type ComboboxGroup = ListboxGroup\n\n/**\n * A rule drawn between two blocks of options. It is purely decorative, and a separator the\n * search leaves stranded (at the top, at the bottom, or against another one) is simply not\n * drawn.\n */\nexport type ComboboxSeparator = ListboxSeparator\n\n/** Anything the list may hold: an option, a named block, or a separator. */\nexport type ComboboxItem = ListboxItem\n\n/**\n * How the list is narrowed as one types: by the component itself, not at all (when the\n * options already arrive filtered by a server), or by a rule of your own.\n */\nexport type ComboboxFilter = boolean | ((option: ComboboxOption, query: string) => boolean)\n\n/** Where the list opens relative to the field. */\nexport type ComboboxPlacement =\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type ComboboxSize = '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 ComboboxDisplay = 'chip' | 'text'\n\n/** What the `#option` slot receives. */\nexport type ComboboxOptionSlotProps = ListboxOptionSlotProps\n\n/** What the `#chip` slot receives. */\nexport type ComboboxChipSlotProps = ListboxChipSlotProps\n\n/** What the `#overflow` slot receives. */\nexport type ComboboxOverflowSlotProps = ListboxOverflowSlotProps\n\n/** What the `#empty` slot receives. */\nexport interface ComboboxEmptySlotProps {\n  query: string\n}\n\ninterface ComboboxProps {\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: ComboboxItem[]\n  /**\n   * Allows several values to be chosen, which makes the value a list and shows what has\n   * been chosen inside the field, as chips or as text depending on `display`.\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?: ComboboxDisplay\n  /**\n   * How many chosen values to show before the rest are summed up as \"+X\", as chips or as text\n   * alike. 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  /** Marks the field as required: an asterisk follows the label, and the field is `required`. */\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?: ComboboxSize\n  /** What the field says while nothing is chosen and nothing has been typed. */\n  placeholder?: string\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /**\n   * Shows what has been chosen without letting it be changed: nothing can be typed, the list\n   * never opens, the chips lose their crosses and no clear 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  /** Offers a cross that empties both the selection and the search. */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /**\n   * The title of the empty state the panel shows when the search matches nothing. It is also\n   * what a screen reader hears, even when the `#empty` slot draws something else: set both\n   * together.\n   */\n  emptyText?: string\n  /** How the list is narrowed as one types. */\n  filter?: ComboboxFilter\n  /**\n   * How long to wait before telling the source what is being searched for, in\n   * milliseconds. Zero tells it at once, which suits a source that is not a network\n   * request.\n   */\n  searchDebounce?: number\n  /**\n   * Says that something is being loaded. Either way the field replaces its chevron with a\n   * spinner.\n   */\n  loading?: boolean\n  /**\n   * What is said while loading, and what the spinner is announced as. A screen reader hears\n   * it even when the `#loading` slot draws something else: set both together.\n   */\n  loadingText?: string\n  /**\n   * Says that there are more pages to come, which makes the component ask for the next one as\n   * the end of the list comes into view.\n   */\n  hasMore?: boolean\n  /**\n   * Renders only the rows near the visible part of the panel, for lists of thousands of options.\n   * Rows are measured as they render, so a custom `#option` may vary in height. Options are then\n   * announced with their position in the list.\n   */\n  virtual?: boolean\n  /** Where the list opens relative to the field. */\n  placement?: ComboboxPlacement\n}\n\nconst props = withDefaults(defineProps<ComboboxProps>(), {\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  placeholder: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  iconStart: undefined,\n  iconStartLabel: undefined,\n  expandIcon: () => expandMoreIcon,\n  clearable: false,\n  clearLabel: undefined,\n  emptyText: undefined,\n  filter: true,\n  searchDebounce: 250,\n  loading: false,\n  loadingText: undefined,\n  hasMore: false,\n  virtual: false,\n  placement: 'bottom-start',\n})\n\nconst m = useMessages()\nconst resolvedEmptyText = computed(() => props.emptyText ?? m.value.combobox.empty)\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.combobox.clear)\nconst resolvedLoadingText = computed(() => props.loadingText ?? m.value.common.loading)\n\nconst emit = defineEmits<{\n  /** What is being searched for, to be sent to the source. */\n  search: [query: string]\n  /** The end of the list has come into view: send the next page. */\n  'load-more': []\n  /** The clear cross emptied the selection and the search. */\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: ComboboxOptionSlotProps): unknown\n  /** Replaces the chip standing for one chosen value. */\n  chip?(props: ComboboxChipSlotProps): unknown\n  /** Replaces the \"+X\" standing for the values beyond `max`. */\n  overflow?(props: ComboboxOverflowSlotProps): unknown\n  /** What the panel shows when nothing matches. It receives the term that was searched. */\n  empty?(props: ComboboxEmptySlotProps): unknown\n  /** What the panel shows while loading its first options. */\n  loading?(): unknown\n}>()\n\n// Everything below reads the RESOLVED values and never the props: the chips, the panel and the\n// field would otherwise come out at three different scales inside the same row.\nconst group = inject(inputGroupKey, null)\nconst { size: resolvedSize, disabled: resolvedDisabled } = useControlShape(props, group)\n\n// The size and the HEIGHT of the chips sitting inside the field, worked out\n// once in `utils/chip.ts` and shared with VFileInput. The height is set inline below\n// rather than restated as a table of CSS rules: it is the height the field forces on its\n// input, and deriving both from the same size is what stops them drifting apart.\nconst chipScale = computed(() => chipScaleFor(resolvedSize.value))\n\n/** The chosen option's `value`, or the list of them when `multiple` is set. */\nconst model = defineModel<ItemValue | ItemValue[]>({ default: '' })\n\n// `class` and `style` stay on the wrapper, where a consumer expects to style the component;\n// everything else; a name above all; goes down to the text field, which is the element\n// assistive technology treats as the combobox.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\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))\n\n/** What reaches the field: the consumer's own attributes, plus that listener. */\nconst fieldAttrs = computed(() => ({ ...forwardedAttrs.value, ...iconStartClick }))\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\n// One generated identifier serves twice: as the panel's own id, which the field points\n// at, and as the prefix of every option's id. The two strings can never collide, one\n// being a prefix of longer ones.\nconst optionsId = useId()\n\nconst open = ref(false)\nconst query = ref('')\nconst focused = ref(false)\n// The text in the field serves two purposes at once: it SHOWS the chosen label when a single\n// value is picked, and it is what one searches with. This flag tells the two apart; while it is\n// false the text is merely a label and narrows nothing, so reopening the panel offers the whole\n// list again.\nconst typed = ref(false)\n\nconst selectedValues = computed(() => selectionOf(model.value, props.multiple))\n\n/*\n * Reading the label on every call is what keeps the filter reactive: flattening the options\n * only ever touches the containers, so a label changed in place would go unnoticed by anything\n * keyed on the list.\n */\nconst normalizedOf = createNormalizedCache<ComboboxOption>()\nconst normalizedLabelOf = (option: ComboboxOption) => normalizedOf(option, option.label)\n\n// ONE search term, read both by the local filter and by what is sent to the source: the\n// list on screen and the request in flight therefore cannot describe different searches.\n// With nothing typed the term is empty, so a label merely being displayed never narrows\n// the list.\nconst searchTerm = computed(() => (typed.value ? query.value.trim() : ''))\n\n// Closing empties `searchTerm` (the typing flag drops) in the same tick as it hides the panel,\n// but the panel fades out rather than vanishing. Filtered on the live term, the list would\n// spring back to every option during that fade, and the panel grow under the pointer that just\n// chose.\nconst closedTerm = ref<string | null>(null)\n\nconst panelRef = ref<InstanceType<typeof VListboxPanel> | null>(null)\n\nconst {\n  allOptions,\n  visible: filtered,\n  optionOf,\n  labelOf,\n  remember,\n  activeIndex,\n  optionId,\n  highlightFirst,\n  highlightSelected,\n  move,\n  hover,\n  blocks,\n  measureRow,\n} = useListbox({\n  items: () => props.options,\n  filter: (list) => {\n    const matcher = props.filter\n    if (matcher === false) return list\n    const q = closedTerm.value ?? searchTerm.value\n    if (!q) return list\n    if (typeof matcher === 'function') return list.filter((o) => matcher(o, q))\n    const needle = normalizeText(q)\n    return list.filter((o) => normalizedLabelOf(o).includes(needle))\n  },\n  selected: () => selectedValues.value,\n  open: () => open.value,\n  id: optionsId,\n  panelEl: () => panelRef.value?.el ?? null,\n  virtual: () => props.virtual,\n  hasMore: () => props.hasMore,\n  size: () => resolvedSize.value,\n})\n\n// @a11y\n/**\n * What is announced about the state of the panel; that nothing matches, or that something is\n * loading.\n */\nconst stateAnnouncement = computed(() => {\n  if (!open.value || filtered.value.length > 0) return ''\n  return props.loading ? resolvedLoadingText.value : resolvedEmptyText.value\n})\n\nconst { request: emitSearch, cancel: cancelSearch } = useDebouncedSearch({\n  delay: () => props.searchDebounce,\n  active: () => open.value,\n  report: (term) => emit('search', term),\n})\n\nwatch(searchTerm, (term) => {\n  if (!open.value) return\n  // A new search means a new list, so the highlight cannot survive it: with an outside source\n  // the options are replaced wholesale, and the old position would name a completely unrelated\n  // option. It is moved to the first available option rather than dropped altogether, and that\n  // matters when the filtering is left to the source: the visible list keeps the very same\n  // reference until the answer arrives, so the watcher below would never fire and Enter would\n  // do nothing in the meantime.\n  highlightFirst()\n  // The page asked for under the previous term will never arrive, and the first page of the new\n  // one may be exactly as long as the list it replaces; which the paging would not recognise as\n  // an arrival.\n  infiniteScroll.restart()\n  emitSearch(term)\n})\n\n// With a single value, the field shows its label as ordinary text whenever it is not being\n// edited. Read through `selectedValues`, which knows that a number is a value even at zero: a\n// test on the string type would leave a numeric value unlabelled.\nfunction singleLabel() {\n  const value = props.multiple ? undefined : selectedValues.value[0]\n  return value === undefined ? '' : labelOf(value)\n}\n\nquery.value = singleLabel()\n\n// Refresh copied selection labels when options arrive or the parent updates the value.\n// Post-flush timing reads the accepted model after rendering.\nwatch(\n  [allOptions, selectedValues],\n  () => {\n    if (props.multiple || open.value || typed.value) return\n    query.value = singleLabel()\n  },\n  { flush: 'post' },\n)\n\n/** The chosen values are spelled out as one line of text rather than drawn as chips. */\nconst textDisplay = computed(() => props.multiple && props.display === 'text')\n\n// A read-only TEXT display keeps it folded under the focus too: nothing can be typed, and the\n// input's share of the row would only cut the line of values short for nothing.\nconst collapsed = computed(\n  () =>\n    props.multiple &&\n    selectedValues.value.length > 0 &&\n    (!focused.value || (textDisplay.value && props.readonly)),\n)\n\n// The field cannot work that out for itself, since the chips live outside its value, so the\n// answer is given to it explicitly, and the room for the cross is reserved accordingly.\nconst clearVisible = computed(() =>\n  canClear(\n    props,\n    resolvedDisabled.value,\n    selectedValues.value.length > 0 || query.value.length > 0,\n  ),\n)\n\n// The single cut-off point of a frozen field: every route into the list; a click on the\n// control, the focus, a keystroke, typing; ends up here, so `readonly` is refused once rather\n// than guarded in each handler.\nfunction openPanel() {\n  if (resolvedDisabled.value || props.readonly || open.value) return\n  closedTerm.value = null\n  open.value = true\n  highlightSelected()\n  // Told to the source after the panel is marked open; the delayed emission checks that flag\n  // before firing; which lets an outside source load its first page as the panel appears.\n  emitSearch(searchTerm.value, true)\n}\n\n// Asking for the next page as the end of the list is reached. The observer itself, its\n// re-arming after each page and the lock that stops it firing twice all live in\n// `useInfiniteScroll`; it is declared here so that closing the panel can reset it.\nconst sentinelEl = ref<HTMLElement | null>(null)\n\nconst infiniteScroll = useInfiniteScroll({\n  sentinelEl,\n  // Found by its ARIA role, which is public API, rather than by an internal class.\n  root: (sentinel) => sentinel.closest('[role=\"listbox\"]'),\n  canLoad: () => open.value && props.hasMore && !props.loading,\n  loaded: () => allOptions.value,\n  onLoadMore: () => emit('load-more'),\n})\n\n/**\n * Closes the list. The field then shows `label`: the chosen value's, unless the caller passes the\n * label of the option it has just chosen, which the value read back may not yet carry.\n */\nfunction closePanel(label = singleLabel()) {\n  if (!open.value) return\n  cancelSearch()\n  // A page that never arrived; a request that failed; must not leave the paging frozen for\n  // good, so the lock is released here.\n  infiniteScroll.reset()\n  closedTerm.value = searchTerm.value\n  open.value = false\n  activeIndex.value = -1\n  typed.value = false\n  query.value = label\n}\n\nwatch(\n  () => props.readonly || resolvedDisabled.value,\n  (frozen) => {\n    if (frozen) closePanel()\n  },\n)\n\n/**\n * Closes as soon as the focus leaves the component; the panel included, which is a descendant\n * of it even while floating above the page.\n */\nconst onFocusout = useFocusoutDismiss(rootEl, () => closePanel())\n\n/** The reader is typing: the text becomes a search, and the panel opens. */\nfunction onInput() {\n  typed.value = true\n  openPanel()\n}\n\n/**\n * With a single value chosen, the label shown in the field is selected on focus, so that typing\n * replaces it rather than appending to it; and until something IS typed, the whole list stays\n * on offer.\n */\nfunction selectQuery() {\n  if (!props.multiple && query.value) inputRef.value?.select()\n}\n\nfunction onFocus() {\n  focused.value = true\n  selectQuery()\n}\n\n/** Whether a pointer event landed on the chevron, or on the spinner standing in its place. */\nconst onChevron = (event: Event) =>\n  event.target instanceof Element &&\n  event.target.closest('.v-combobox-chevron, .v-combobox-spinner') !== null\n\n// @core\n/*\n * The chevron is not focusable, so pressing it would hand the focus to the page: the root's\n * `focusout` then closes the panel, and the click that follows reopens it. A click meant to\n * close would flash the list instead.\n */\nfunction onControlMousedown(event: MouseEvent) {\n  if (onChevron(event)) event.preventDefault()\n}\n\n/**\n * A click anywhere on the field focuses it and opens the panel; except on the chevron of an\n * open panel, which closes it.\n */\nfunction onControlClick(event: MouseEvent) {\n  if (resolvedDisabled.value) return\n  inputRef.value?.focus()\n  if (open.value && onChevron(event)) {\n    closePanel()\n    return\n  }\n  openPanel()\n  // Selected again after the click, which has just placed the caret somewhere in the middle of\n  // the label.\n  selectQuery()\n}\n\nfunction select(option: ComboboxOption) {\n  if (option.disabled || props.readonly || resolvedDisabled.value) return\n  // Remembered immediately: the option may vanish from the list; on the next search; before the\n  // parent has even passed the new value back down.\n  remember(option)\n  if (props.multiple) {\n    typed.value = false\n    model.value = toggleValue(selectedValues.value, option.value)\n    query.value = ''\n    inputRef.value?.focus()\n  } else {\n    model.value = option.value\n    closePanel(option.label)\n  }\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  inputRef.value?.focus()\n}\n\n/**\n * The clear cross was pressed. The field has already emptied the text it holds; what is left to\n * empty is the selection itself; the single value, or all the chips.\n */\nfunction onClear() {\n  model.value = props.multiple ? [] : ''\n  typed.value = false\n  // The list may still be open (a pointer press on the cross does not close it): the\n  // highlight is moved to the first option rather than dropped, or Enter would do nothing.\n  if (open.value) highlightFirst()\n  else activeIndex.value = -1\n  emit('clear')\n}\n\n// @keyboard @a11y\n// Naming the current option and never the focus itself, which stays in the field throughout;\n// Backspace on an empty field takes back the last chip, the usual gesture in a field holding\n// several values.\nfunction onKeydown(event: KeyboardEvent) {\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault()\n      if (open.value) move(1)\n      else openPanel()\n      break\n    case 'ArrowUp':\n      event.preventDefault()\n      if (open.value) move(-1)\n      else openPanel()\n      break\n    case 'Enter':\n      if (open.value && activeIndex.value >= 0) {\n        event.preventDefault()\n        const option = filtered.value[activeIndex.value]\n        if (option) select(option)\n      }\n      break\n    case 'Escape':\n      // Consumed only when it closes the list, so a surrounding VDialog stays open; on a\n      // closed list it is left to go on and close the dialog.\n      if (open.value) {\n        event.preventDefault()\n        closePanel()\n      }\n      break\n    case 'Tab':\n      closePanel()\n      break\n    case 'Backspace':\n      if (props.multiple && !query.value) {\n        const last = selectedValues.value.at(-1)\n        if (last !== undefined) removeValue(last)\n      }\n      break\n  }\n}\n\ndefineExpose({\n  /** Moves the focus to the search field. */\n  focus: (options?: FocusOptions) => inputRef.value?.focus(options),\n  /** Selects what has been typed in the search field. */\n  select: () => inputRef.value?.select(),\n  /** The real `<input>` behind the field, for what neither of the two above covers. */\n  el: computed(() => inputRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-combobox\"\n    :class=\"rootClass\"\n    :style=\"[{ '--chip-height': chipScale.height }, rootStyle]\"\n    :data-size=\"resolvedSize\"\n    :data-multiple=\"multiple ? '' : undefined\"\n    :data-collapsed=\"collapsed ? '' : undefined\"\n    :data-open=\"open ? '' : undefined\"\n    @focusout=\"onFocusout\"\n  >\n    <div class=\"v-combobox-control\" @mousedown=\"onControlMousedown\" @click=\"onControlClick\">\n      <!--\n        The two arrangements VInput offers a field holding chips: its end controls lifted out of\n        the flow, always; the chevron and the cross stay put whether or not the input has folded\n        away; and the chips wrapping, when there are chips at all. A text display keeps the\n        field on one line and needs only the first.\n      -->\n      <VInput\n        ref=\"inputRef\"\n        v-model=\"query\"\n        class=\"v-input-end-pinned\"\n        :class=\"{ 'v-input-chips': multiple && !textDisplay }\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-autocomplete=\"list\"\n        :aria-expanded=\"open\"\n        :aria-controls=\"optionsId\"\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        :invalid=\"invalid\"\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        :placeholder=\"selectedValues.length === 0 ? placeholder : undefined\"\n        :aria-activedescendant=\"open && activeIndex >= 0 ? optionId(activeIndex) : undefined\"\n        @input=\"onInput\"\n        @keydown=\"onKeydown\"\n        @focus=\"onFocus\"\n        @blur=\"focused = false\"\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            :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 v-if=\"$slots['value-end']\" #value-end><slot name=\"value-end\" /></template>\n\n        <!--\n          The chevron sits at the end of the field and turns as the panel opens; the clear cross\n          is rendered by the field itself, to its left. While loading, the spinner takes EXACTLY\n          the chevron's place; the field gives a spinner among its direct children the size of\n          an icon; so nothing shifts.\n        -->\n        <template #end>\n          <VSpinner v-if=\"loading\" class=\"v-combobox-spinner v-input-icon-end\" aria-hidden=\"true\" />\n          <VListboxChevron v-else class=\"v-combobox-chevron\" :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=\"--combobox-anchor\"\n      :placement=\"placement\"\n      class=\"v-combobox-panel\"\n      :size=\"resolvedSize\"\n      :multiple=\"multiple\"\n      :virtual=\"virtual\"\n      :blocks=\"blocks\"\n      :measure=\"measureRow\"\n      @select=\"select\"\n      @highlight=\"hover\"\n    >\n      <template v-if=\"$slots.option\" #option=\"slotProps\">\n        <slot name=\"option\" v-bind=\"slotProps\" />\n      </template>\n\n      <!--\n        The order matters: loading is checked before emptiness, so that a panel waiting for an\n        answer never claims there is no result. Both are hidden from screen readers, and that is\n        not an oversight.\n      -->\n      <div v-if=\"loading && filtered.length === 0\" class=\"v-combobox-state\" aria-hidden=\"true\">\n        <slot name=\"loading\">\n          <VSpinner :label=\"resolvedLoadingText\" />\n          <span>{{ resolvedLoadingText }}</span>\n        </slot>\n      </div>\n      <div v-else-if=\"filtered.length === 0\" class=\"v-combobox-state\" aria-hidden=\"true\">\n        <slot name=\"empty\" :query=\"searchTerm\">\n          <VEmptyState\n            size=\"sm\"\n            class=\"v-combobox-empty\"\n            :icon=\"searchTerm ? searchOffIcon : inboxIcon\"\n            :title=\"resolvedEmptyText\"\n          />\n        </slot>\n      </div>\n\n      <!--\n        It has to stay a SINGLE element: rendering the spinner conditionally in its place would\n        destroy the marker and silently cancel the observation, and no further page would ever\n        be asked for.\n      -->\n      <div v-if=\"hasMore\" ref=\"sentinelEl\" class=\"v-combobox-more\" aria-hidden=\"true\">\n        <VSpinner v-if=\"loading\" :label=\"resolvedLoadingText\" />\n      </div>\n    </VListboxPanel>\n\n    <!-- The spoken counterpart of the two panel states above. It sits OUTSIDE the\n         listbox, being exactly the kind of content a listbox may not contain. -->\n    <span class=\"v-visually-hidden\" role=\"status\">{{ stateAnnouncement }}</span>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-combobox {\n    /*\n     * It is declared on the root because that is the common ancestor of the field and the\n     * panel; a panel drawn above the page remains a descendant of it in the document.\n     */\n    anchor-scope: --combobox-anchor;\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-combobox-control {\n    display: block;\n  }\n\n  /*\n   * The anchor is the FIELD's box and not this wrapper's, which also holds the label and the\n   * hint: anchored to the wrapper, the panel opens a hint's height below the field, and a\n   * label's height above it once there is no room below and `flip-block` turns it over. Against\n   * the field it covers whichever of the two it lands on, which a panel belonging to a control\n   * is supposed to do.\n   */\n  .v-combobox-control .v-input-field {\n    anchor-name: --combobox-anchor;\n  }\n\n  .v-combobox-panel {\n    max-block-size: var(--vectis-control-size-combobox-list-max-block);\n  }\n\n  /*\n   * The chevron and the clear cross are pinned to the end of the field by VInput's\n   * `.v-input-end-pinned`, which also reserves their room. The chevron and the spinner take\n   * turns in the same place and occupy the same box; the field gives a spinner among its direct\n   * children the size of an icon; so swapping one for the other shifts nothing.\n   */\n  .v-combobox-spinner {\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * It remains in the page and remains focusable; clicking the field or tabbing into it brings\n   * it straight back, the folded state ending as soon as it has the focus.\n   */\n  .v-combobox[data-collapsed] .v-input-control {\n    position: absolute;\n    width: 0;\n    height: 0;\n    padding: 0;\n  }\n\n  /*\n   * Under the focus the two share the row, and the line is capped at half of it so that a long\n   * selection cannot squeeze what is being typed down to nothing. Folded, the input is out of\n   * the flow and the line takes the whole field.\n   */\n  .v-combobox:not([data-collapsed]) .v-listbox-text {\n    max-inline-size: 50%;\n  }\n\n  /*\n   * An unbroken line has the whole of its text as its min-content width, and that width travels\n   * up through the field to the root. In a grid track or a flex row sized `auto`, the component\n   * then widens its container to fit every label instead of cutting them short, and the\n   * ellipsis never shows.\n   */\n  .v-combobox:has(.v-listbox-text) {\n    min-inline-size: 0;\n  }\n\n  /* The rows saying \"nothing matches\" or \"loading\" are built like an option: they read\n     the same inherited dimensions from the panel, and the spinner follows through the\n     same block's icon context. They refuse to shrink, the panel being a bounded column\n     that would otherwise squash them. */\n  .v-combobox-state {\n    display: flex;\n    flex: none;\n    align-items: center;\n    gap: var(--control-gap);\n    min-height: var(--control-height);\n    padding: var(--vectis-space-1) var(--control-padding-inline);\n    font-size: var(--control-font-size);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * The default empty state spans the panel. `[data-size]` lifts the selector above VEmptyState's\n   * own size rules, whose sheet may load after this one.\n   */\n  .v-combobox-state > .v-combobox-empty[data-size] {\n    flex: 1;\n    padding-block: var(--vectis-space-3);\n    padding-inline: 0;\n  }\n\n  /*\n   * The foot of the list: the marker watched for the end, and the place the next-page spinner\n   * appears. It is given a real height on purpose; a box of no height at all makes the crossing\n   * it is watched for unreliable.\n   */\n  .v-combobox-more {\n    display: flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n    min-height: var(--vectis-control-height-xs);\n    color: var(--vectis-color-text-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-combobox-chevron {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VContextMenu/VContextMenu.d.ts

@@ -4,8 +4,6 @@ interface ContextMenuProps {
     as?: string;
     /** How tall the rows are: 32, 40 or 48 pixels. Submenus inherit it. */
     size?: MenuSize;
-    /** Takes 4px off the height of every row, submenus included. */
-    compact?: boolean;
     /**
      * A width for the panel: a number is read as pixels, a string as any CSS length or
      * keyword. Submenus keep the default width.
@@ -51,7 +49,6 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     size: MenuSize;
-    compact: boolean;
     disabled: boolean;
     as: string;
     width: number | string;

package/dist/components/VContextMenu/VContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"VContextMenu.js","names":["_sfc_main","VContextMenu_vue_vue_type_script_setup_true_lang_default","VContextMenu_default"],"sources":["../../../src/components/VContextMenu/VContextMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * The native `contextmenu` event covers the right click, the long press on Android and the\n * Menu key. JavaScript places a zero-size anchor at the pointer so CSS anchoring can position\n * the panel and flip it near the viewport edges, and adds Shift+F10 where the platform lacks it.\n */\n\nimport { computed, provide, ref, shallowRef, useId } from 'vue'\n\nimport VMenuPanel from '../VMenu/VMenuPanel.vue'\nimport { menuAnchor, menuKey } from '../VMenu/context'\nimport type { MenuSize } from '../VMenu/context'\nimport { usePopoverModel } from '../../composables/usePopover'\nimport { isRtl } from '../../utils/direction'\nimport { clamp } from '../../utils/number'\n\ninterface ContextMenuProps {\n  /** The element wrapping the zone. Any element able to hold the default slot's content. */\n  as?: string\n  /** How tall the rows are: 32, 40 or 48 pixels. Submenus inherit it. */\n  size?: MenuSize\n  /** Takes 4px off the height of every row, submenus included. */\n  compact?: boolean\n  /**\n   * A width for the panel: a number is read as pixels, a string as any CSS length or\n   * keyword. Submenus keep the default width.\n   */\n  width?: number | string\n  /** Leaves the zone to the browser's own context menu. */\n  disabled?: boolean\n}\n\n// The attributes belong on the zone, the one element of the three this component renders that\n// the consumer sees.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<ContextMenuProps>(), {\n  as: 'div',\n  size: 'sm',\n  compact: false,\n  width: undefined,\n  disabled: false,\n})\n\n/**\n * Whether the menu is showing. The browser's own dismissal (a click outside, Escape,\n * choosing a command) writes back to it. Opened from the model, the menu appears under\n * the focused element of the zone, or under the zone itself.\n */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** The zone the menu belongs to. */\n  default(): unknown\n  /**\n   * The contents of the menu: VMenuItem, VMenuGroup and VMenuSeparator. `target` is the\n   * element the menu was opened on, so one menu can serve every item of a list.\n   */\n  menu(props: { target: Element | null }): unknown\n}>()\n\nconst zoneEl = ref<HTMLElement | null>(null)\nconst anchorEl = ref<HTMLElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VMenuPanel> | null>(null)\nconst menuId = useId()\nconst anchor = menuAnchor(menuId)\n\n/** The element the menu was opened on, handed to the `menu` slot. */\nconst target = shallowRef<Element | null>(null)\n\n/** Where the focus goes back when the menu closes. */\nlet returnFocus: HTMLElement | null = null\nlet fromKeyboard = false\n\nprovide(menuKey, { closeAll: () => panelRef.value?.close() })\n\n/** Moves the invisible anchor the panel is positioned against. */\nfunction placeAnchor(x: number, y: number) {\n  const el = anchorEl.value\n  if (!el) return\n  el.style.left = `${x}px`\n  el.style.top = `${y}px`\n}\n\n/**\n * Puts the anchor under an element's start edge, kept inside the viewport so a zone taller\n * than the screen still opens a visible menu.\n */\nfunction placeUnder(el: Element) {\n  const rect = el.getBoundingClientRect()\n  const x = isRtl(el) ? rect.right : rect.left\n  placeAnchor(clamp(x, 0, window.innerWidth), clamp(rect.bottom, 0, window.innerHeight))\n}\n\nfunction openMenu(on: Element | null, keyboard: boolean) {\n  const panel = panelRef.value\n  if (!panel) return\n  target.value = on\n  fromKeyboard = keyboard\n  // Reopening at another spot must not take the focus inside the old panel as the place to\n  // return to.\n  const active = document.activeElement\n  if (!panel.el?.contains(active)) {\n    returnFocus = active instanceof HTMLElement && active !== document.body ? active : null\n  }\n  if (panel.shown) panel.close()\n  panel.show()\n}\n\n/** The element of the zone holding the focus, or the zone itself. */\nfunction focusedInZone(): Element | null {\n  const active = document.activeElement\n  return active && zoneEl.value?.contains(active) ? active : zoneEl.value\n}\n\n// @keyboard\n// Keyboard openings carry no pointer position: the spec gives them an empty pointer type. Where\n// `contextmenu` is still a plain MouseEvent, no button is pressed or released for them; a\n// Control-click on macOS holds the primary button down.\nfunction isKeyboardEvent(event: MouseEvent): boolean {\n  if ('pointerType' in event) return (event as PointerEvent).pointerType === ''\n  return event.button !== 2 && event.buttons === 0\n}\n\nfunction onContextmenu(event: MouseEvent) {\n  // A nested context menu, or the consumer's own handler, already answered this event.\n  if (props.disabled || event.defaultPrevented) return\n  const keyboard = isKeyboardEvent(event)\n  // Shift is the way through to the browser's own menu, as Firefox already does by itself.\n  if (event.shiftKey && !keyboard) return\n  event.preventDefault()\n  // Shift+F10 also fires a native `contextmenu` on some platforms, after the keydown below\n  // has already opened the menu.\n  if (keyboard && panelRef.value?.shown) return\n  const on = event.target instanceof Element ? event.target : zoneEl.value\n  if (keyboard) {\n    if (on) placeUnder(on)\n    openMenu(on, true)\n    return\n  }\n  placeAnchor(event.clientX, event.clientY)\n  // @core\n  // macOS and Linux fire the event on the press, not the release. An auto popover opened while\n  // the button is still down is dismissed by that release, so the opening waits until the\n  // release has been dispatched.\n  const pointer = (event as Partial<PointerEvent>).pointerType\n  if (event.buttons !== 0 && pointer !== 'touch') {\n    const release = () => {\n      window.removeEventListener('pointerup', release, true)\n      window.removeEventListener('pointercancel', release, true)\n      setTimeout(() => openMenu(on, false))\n    }\n    window.addEventListener('pointerup', release, true)\n    window.addEventListener('pointercancel', release, true)\n    return\n  }\n  openMenu(on, false)\n}\n\n// @keyboard\n// Windows and Linux turn Shift+F10 into a `contextmenu` event by themselves; macOS does not.\nfunction onKeydown(event: KeyboardEvent) {\n  if (props.disabled || event.defaultPrevented) return\n  if (event.key !== 'F10' || !event.shiftKey || event.altKey || event.ctrlKey || event.metaKey)\n    return\n  event.preventDefault()\n  const on = focusedInZone()\n  if (on) placeUnder(on)\n  openMenu(on, true)\n}\n\n// @a11y\n// The keyboard lands on the first command, the pointer on the panel itself, as in VMenu. On\n// closing, the focus returns where it was unless it has deliberately moved elsewhere.\nfunction onToggle(value: boolean) {\n  open.value = value\n  if (value) {\n    if (fromKeyboard) panelRef.value?.focusFirst()\n    else panelRef.value?.focusPanel()\n    return\n  }\n  const active = document.activeElement\n  if (!active || active === document.body || panelRef.value?.el?.contains(active)) {\n    if (returnFocus?.isConnected) returnFocus.focus()\n  }\n}\n\n/** Opening from the model or from code without an event. */\nfunction showFromCode() {\n  const on = focusedInZone()\n  if (on) placeUnder(on)\n  openMenu(on, false)\n}\n\nusePopoverModel(\n  open,\n  () => panelRef.value?.shown ?? false,\n  showFromCode,\n  () => panelRef.value?.close(),\n)\n\ndefineExpose({\n  /**\n   * Opens the menu. Given a mouse event, it opens at the pointer on the event's target;\n   * otherwise under the focused element of the zone.\n   */\n  show(event?: MouseEvent) {\n    if (!event) return showFromCode()\n    placeAnchor(event.clientX, event.clientY)\n    openMenu(event.target instanceof Element ? event.target : zoneEl.value, false)\n  },\n  /** Closes the menu, submenus included. */\n  close: () => panelRef.value?.close(),\n  /** The panel element. */\n  el: computed(() => panelRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    ref=\"zoneEl\"\n    v-bind=\"$attrs\"\n    class=\"v-context-menu\"\n    @contextmenu=\"onContextmenu\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </component>\n  <span\n    ref=\"anchorEl\"\n    class=\"v-context-menu-anchor\"\n    aria-hidden=\"true\"\n    :style=\"{ 'anchor-name': anchor }\"\n  />\n  <!-- The browser's menu is kept off the panel: a context menu opened on top of this one\n       would hide it, and a keyboard opening that already moved the focus inside must not be\n       answered by the browser too -->\n  <VMenuPanel\n    :id=\"menuId\"\n    ref=\"panelRef\"\n    class=\"v-context-menu-panel\"\n    placement=\"bottom-start\"\n    :anchor=\"anchor\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :width=\"width\"\n    @toggle=\"onToggle\"\n    @contextmenu.prevent\n  >\n    <slot name=\"menu\" :target=\"target\" />\n  </VMenuPanel>\n</template>\n\n<style>\n@layer vectis.components {\n  /* A point, not a box: the panel's corner sits on it. */\n  .v-context-menu-anchor {\n    /* Physical, like the pointer coordinates written into it. */\n    position: fixed;\n    top: 0;\n    left: 0;\n    inline-size: 0;\n    block-size: 0;\n    pointer-events: none;\n  }\n\n  /*\n   * Native context menus open against the pointer, with no gap. The gutter on the opposite side\n   * stays, so a flipped panel keeps its distance from the viewport edge.\n   */\n  .v-context-menu-panel.v-floating {\n    margin-block-start: 0;\n    /* A pointer can sit in a corner of the viewport, where both directions must flip at once. */\n    position-try-fallbacks:\n      flip-block,\n      flip-inline,\n      flip-block flip-inline;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VContextMenu.js","names":["_sfc_main","VContextMenu_vue_vue_type_script_setup_true_lang_default","VContextMenu_default"],"sources":["../../../src/components/VContextMenu/VContextMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * The native `contextmenu` event covers the right click, the long press on Android and the\n * Menu key. JavaScript places a zero-size anchor at the pointer so CSS anchoring can position\n * the panel and flip it near the viewport edges, and adds Shift+F10 where the platform lacks it.\n */\n\nimport { computed, provide, ref, shallowRef, useId } from 'vue'\n\nimport VMenuPanel from '../VMenu/VMenuPanel.vue'\nimport { menuAnchor, menuKey } from '../VMenu/context'\nimport type { MenuSize } from '../VMenu/context'\nimport { usePopoverModel } from '../../composables/usePopover'\nimport { isRtl } from '../../utils/direction'\nimport { clamp } from '../../utils/number'\n\ninterface ContextMenuProps {\n  /** The element wrapping the zone. Any element able to hold the default slot's content. */\n  as?: string\n  /** How tall the rows are: 32, 40 or 48 pixels. Submenus inherit it. */\n  size?: MenuSize\n  /**\n   * A width for the panel: a number is read as pixels, a string as any CSS length or\n   * keyword. Submenus keep the default width.\n   */\n  width?: number | string\n  /** Leaves the zone to the browser's own context menu. */\n  disabled?: boolean\n}\n\n// The attributes belong on the zone, the one element of the three this component renders that\n// the consumer sees.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<ContextMenuProps>(), {\n  as: 'div',\n  size: 'sm',\n  width: undefined,\n  disabled: false,\n})\n\n/**\n * Whether the menu is showing. The browser's own dismissal (a click outside, Escape,\n * choosing a command) writes back to it. Opened from the model, the menu appears under\n * the focused element of the zone, or under the zone itself.\n */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** The zone the menu belongs to. */\n  default(): unknown\n  /**\n   * The contents of the menu: VMenuItem, VMenuGroup and VMenuSeparator. `target` is the\n   * element the menu was opened on, so one menu can serve every item of a list.\n   */\n  menu(props: { target: Element | null }): unknown\n}>()\n\nconst zoneEl = ref<HTMLElement | null>(null)\nconst anchorEl = ref<HTMLElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VMenuPanel> | null>(null)\nconst menuId = useId()\nconst anchor = menuAnchor(menuId)\n\n/** The element the menu was opened on, handed to the `menu` slot. */\nconst target = shallowRef<Element | null>(null)\n\n/** Where the focus goes back when the menu closes. */\nlet returnFocus: HTMLElement | null = null\nlet fromKeyboard = false\n\nprovide(menuKey, { closeAll: () => panelRef.value?.close() })\n\n/** Moves the invisible anchor the panel is positioned against. */\nfunction placeAnchor(x: number, y: number) {\n  const el = anchorEl.value\n  if (!el) return\n  el.style.left = `${x}px`\n  el.style.top = `${y}px`\n}\n\n/**\n * Puts the anchor under an element's start edge, kept inside the viewport so a zone taller\n * than the screen still opens a visible menu.\n */\nfunction placeUnder(el: Element) {\n  const rect = el.getBoundingClientRect()\n  const x = isRtl(el) ? rect.right : rect.left\n  placeAnchor(clamp(x, 0, window.innerWidth), clamp(rect.bottom, 0, window.innerHeight))\n}\n\nfunction openMenu(on: Element | null, keyboard: boolean) {\n  const panel = panelRef.value\n  if (!panel) return\n  target.value = on\n  fromKeyboard = keyboard\n  // Reopening at another spot must not take the focus inside the old panel as the place to\n  // return to.\n  const active = document.activeElement\n  if (!panel.el?.contains(active)) {\n    returnFocus = active instanceof HTMLElement && active !== document.body ? active : null\n  }\n  if (panel.shown) panel.close()\n  panel.show()\n}\n\n/** The element of the zone holding the focus, or the zone itself. */\nfunction focusedInZone(): Element | null {\n  const active = document.activeElement\n  return active && zoneEl.value?.contains(active) ? active : zoneEl.value\n}\n\n// @keyboard\n// Keyboard openings carry no pointer position: the spec gives them an empty pointer type. Where\n// `contextmenu` is still a plain MouseEvent, no button is pressed or released for them; a\n// Control-click on macOS holds the primary button down.\nfunction isKeyboardEvent(event: MouseEvent): boolean {\n  if ('pointerType' in event) return (event as PointerEvent).pointerType === ''\n  return event.button !== 2 && event.buttons === 0\n}\n\nfunction onContextmenu(event: MouseEvent) {\n  // A nested context menu, or the consumer's own handler, already answered this event.\n  if (props.disabled || event.defaultPrevented) return\n  const keyboard = isKeyboardEvent(event)\n  // Shift is the way through to the browser's own menu, as Firefox already does by itself.\n  if (event.shiftKey && !keyboard) return\n  event.preventDefault()\n  // Shift+F10 also fires a native `contextmenu` on some platforms, after the keydown below\n  // has already opened the menu.\n  if (keyboard && panelRef.value?.shown) return\n  const on = event.target instanceof Element ? event.target : zoneEl.value\n  if (keyboard) {\n    if (on) placeUnder(on)\n    openMenu(on, true)\n    return\n  }\n  placeAnchor(event.clientX, event.clientY)\n  // @core\n  // macOS and Linux fire the event on the press, not the release. An auto popover opened while\n  // the button is still down is dismissed by that release, so the opening waits until the\n  // release has been dispatched.\n  const pointer = (event as Partial<PointerEvent>).pointerType\n  if (event.buttons !== 0 && pointer !== 'touch') {\n    const release = () => {\n      window.removeEventListener('pointerup', release, true)\n      window.removeEventListener('pointercancel', release, true)\n      setTimeout(() => openMenu(on, false))\n    }\n    window.addEventListener('pointerup', release, true)\n    window.addEventListener('pointercancel', release, true)\n    return\n  }\n  openMenu(on, false)\n}\n\n// @keyboard\n// Windows and Linux turn Shift+F10 into a `contextmenu` event by themselves; macOS does not.\nfunction onKeydown(event: KeyboardEvent) {\n  if (props.disabled || event.defaultPrevented) return\n  if (event.key !== 'F10' || !event.shiftKey || event.altKey || event.ctrlKey || event.metaKey)\n    return\n  event.preventDefault()\n  const on = focusedInZone()\n  if (on) placeUnder(on)\n  openMenu(on, true)\n}\n\n// @a11y\n// The keyboard lands on the first command, the pointer on the panel itself, as in VMenu. On\n// closing, the focus returns where it was unless it has deliberately moved elsewhere.\nfunction onToggle(value: boolean) {\n  open.value = value\n  if (value) {\n    if (fromKeyboard) panelRef.value?.focusFirst()\n    else panelRef.value?.focusPanel()\n    return\n  }\n  const active = document.activeElement\n  if (!active || active === document.body || panelRef.value?.el?.contains(active)) {\n    if (returnFocus?.isConnected) returnFocus.focus()\n  }\n}\n\n/** Opening from the model or from code without an event. */\nfunction showFromCode() {\n  const on = focusedInZone()\n  if (on) placeUnder(on)\n  openMenu(on, false)\n}\n\nusePopoverModel(\n  open,\n  () => panelRef.value?.shown ?? false,\n  showFromCode,\n  () => panelRef.value?.close(),\n)\n\ndefineExpose({\n  /**\n   * Opens the menu. Given a mouse event, it opens at the pointer on the event's target;\n   * otherwise under the focused element of the zone.\n   */\n  show(event?: MouseEvent) {\n    if (!event) return showFromCode()\n    placeAnchor(event.clientX, event.clientY)\n    openMenu(event.target instanceof Element ? event.target : zoneEl.value, false)\n  },\n  /** Closes the menu, submenus included. */\n  close: () => panelRef.value?.close(),\n  /** The panel element. */\n  el: computed(() => panelRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    ref=\"zoneEl\"\n    v-bind=\"$attrs\"\n    class=\"v-context-menu\"\n    @contextmenu=\"onContextmenu\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </component>\n  <span\n    ref=\"anchorEl\"\n    class=\"v-context-menu-anchor\"\n    aria-hidden=\"true\"\n    :style=\"{ 'anchor-name': anchor }\"\n  />\n  <!-- The browser's menu is kept off the panel: a context menu opened on top of this one\n       would hide it, and a keyboard opening that already moved the focus inside must not be\n       answered by the browser too -->\n  <VMenuPanel\n    :id=\"menuId\"\n    ref=\"panelRef\"\n    class=\"v-context-menu-panel\"\n    placement=\"bottom-start\"\n    :anchor=\"anchor\"\n    :size=\"size\"\n    :width=\"width\"\n    @toggle=\"onToggle\"\n    @contextmenu.prevent\n  >\n    <slot name=\"menu\" :target=\"target\" />\n  </VMenuPanel>\n</template>\n\n<style>\n@layer vectis.components {\n  /* A point, not a box: the panel's corner sits on it. */\n  .v-context-menu-anchor {\n    /* Physical, like the pointer coordinates written into it. */\n    position: fixed;\n    top: 0;\n    left: 0;\n    inline-size: 0;\n    block-size: 0;\n    pointer-events: none;\n  }\n\n  /*\n   * Native context menus open against the pointer, with no gap. The gutter on the opposite side\n   * stays, so a flipped panel keeps its distance from the viewport edge.\n   */\n  .v-context-menu-panel.v-floating {\n    margin-block-start: 0;\n    /* A pointer can sit in a corner of the viewport, where both directions must flip at once. */\n    position-try-fallbacks:\n      flip-block,\n      flip-inline,\n      flip-block flip-inline;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VContextMenu/VContextMenu.vue_vue_type_script_setup_true_lang.js

@@ -11,10 +11,6 @@ var D = /*@__PURE__*/ f({
 	props: /*@__PURE__*/ p({
 		as: { default: "div" },
 		size: { default: "sm" },
-		compact: {
-			type: Boolean,
-			default: !1
-		},
 		width: { default: void 0 },
 		disabled: {
 			type: Boolean,
@@ -123,7 +119,6 @@ var D = /*@__PURE__*/ f({
 				placement: "bottom-start",
 				anchor: S(N),
 				size: f.size,
-				compact: f.compact,
 				width: f.width,
 				onToggle: W,
 				onContextmenu: t[0] ||= E(() => {}, ["prevent"])
@@ -134,7 +129,6 @@ var D = /*@__PURE__*/ f({
 				"id",
 				"anchor",
 				"size",
-				"compact",
 				"width"
 			])
 		], 64));

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

@@ -1 +1 @@
-{"version":3,"file":"VContextMenu.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_Fragment","_createBlock","_resolveDynamicComponent","_mergeProps","_withCtx","_renderSlot","_createElementVNode","_normalizeStyle","_unref","_createVNode","VMenuPanel","_withModifiers","VMenuPanel_default","VContextMenu_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__expose","props","__props","open","useModel","zoneEl","ref","anchorEl","panelRef","menuId","useId","anchor","menuAnchor","target","shallowRef","returnFocus","fromKeyboard","menuKey","placeAnchor","el","x","y","placeUnder","rect","isRtl","clamp","openMenu","panel","on","keyboard","active","focusedInZone","isKeyboardEvent","event","onContextmenu","pointer","release","onKeydown","onToggle","value","showFromCode","usePopoverModel","computed","openBlock","createElementBlock","Fragment","createBlock","resolveDynamicComponent","mergeProps","_ctx","withCtx","renderSlot","createElementVNode","normalizeStyle","unref","createVNode","_cache","withModifiers"],"sources":["../../../src/components/VContextMenu/VContextMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * The native `contextmenu` event covers the right click, the long press on Android and the\n * Menu key. JavaScript places a zero-size anchor at the pointer so CSS anchoring can position\n * the panel and flip it near the viewport edges, and adds Shift+F10 where the platform lacks it.\n */\n\nimport { computed, provide, ref, shallowRef, useId } from 'vue'\n\nimport VMenuPanel from '../VMenu/VMenuPanel.vue'\nimport { menuAnchor, menuKey } from '../VMenu/context'\nimport type { MenuSize } from '../VMenu/context'\nimport { usePopoverModel } from '../../composables/usePopover'\nimport { isRtl } from '../../utils/direction'\nimport { clamp } from '../../utils/number'\n\ninterface ContextMenuProps {\n  /** The element wrapping the zone. Any element able to hold the default slot's content. */\n  as?: string\n  /** How tall the rows are: 32, 40 or 48 pixels. Submenus inherit it. */\n  size?: MenuSize\n  /** Takes 4px off the height of every row, submenus included. */\n  compact?: boolean\n  /**\n   * A width for the panel: a number is read as pixels, a string as any CSS length or\n   * keyword. Submenus keep the default width.\n   */\n  width?: number | string\n  /** Leaves the zone to the browser's own context menu. */\n  disabled?: boolean\n}\n\n// The attributes belong on the zone, the one element of the three this component renders that\n// the consumer sees.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<ContextMenuProps>(), {\n  as: 'div',\n  size: 'sm',\n  compact: false,\n  width: undefined,\n  disabled: false,\n})\n\n/**\n * Whether the menu is showing. The browser's own dismissal (a click outside, Escape,\n * choosing a command) writes back to it. Opened from the model, the menu appears under\n * the focused element of the zone, or under the zone itself.\n */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** The zone the menu belongs to. */\n  default(): unknown\n  /**\n   * The contents of the menu: VMenuItem, VMenuGroup and VMenuSeparator. `target` is the\n   * element the menu was opened on, so one menu can serve every item of a list.\n   */\n  menu(props: { target: Element | null }): unknown\n}>()\n\nconst zoneEl = ref<HTMLElement | null>(null)\nconst anchorEl = ref<HTMLElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VMenuPanel> | null>(null)\nconst menuId = useId()\nconst anchor = menuAnchor(menuId)\n\n/** The element the menu was opened on, handed to the `menu` slot. */\nconst target = shallowRef<Element | null>(null)\n\n/** Where the focus goes back when the menu closes. */\nlet returnFocus: HTMLElement | null = null\nlet fromKeyboard = false\n\nprovide(menuKey, { closeAll: () => panelRef.value?.close() })\n\n/** Moves the invisible anchor the panel is positioned against. */\nfunction placeAnchor(x: number, y: number) {\n  const el = anchorEl.value\n  if (!el) return\n  el.style.left = `${x}px`\n  el.style.top = `${y}px`\n}\n\n/**\n * Puts the anchor under an element's start edge, kept inside the viewport so a zone taller\n * than the screen still opens a visible menu.\n */\nfunction placeUnder(el: Element) {\n  const rect = el.getBoundingClientRect()\n  const x = isRtl(el) ? rect.right : rect.left\n  placeAnchor(clamp(x, 0, window.innerWidth), clamp(rect.bottom, 0, window.innerHeight))\n}\n\nfunction openMenu(on: Element | null, keyboard: boolean) {\n  const panel = panelRef.value\n  if (!panel) return\n  target.value = on\n  fromKeyboard = keyboard\n  // Reopening at another spot must not take the focus inside the old panel as the place to\n  // return to.\n  const active = document.activeElement\n  if (!panel.el?.contains(active)) {\n    returnFocus = active instanceof HTMLElement && active !== document.body ? active : null\n  }\n  if (panel.shown) panel.close()\n  panel.show()\n}\n\n/** The element of the zone holding the focus, or the zone itself. */\nfunction focusedInZone(): Element | null {\n  const active = document.activeElement\n  return active && zoneEl.value?.contains(active) ? active : zoneEl.value\n}\n\n// @keyboard\n// Keyboard openings carry no pointer position: the spec gives them an empty pointer type. Where\n// `contextmenu` is still a plain MouseEvent, no button is pressed or released for them; a\n// Control-click on macOS holds the primary button down.\nfunction isKeyboardEvent(event: MouseEvent): boolean {\n  if ('pointerType' in event) return (event as PointerEvent).pointerType === ''\n  return event.button !== 2 && event.buttons === 0\n}\n\nfunction onContextmenu(event: MouseEvent) {\n  // A nested context menu, or the consumer's own handler, already answered this event.\n  if (props.disabled || event.defaultPrevented) return\n  const keyboard = isKeyboardEvent(event)\n  // Shift is the way through to the browser's own menu, as Firefox already does by itself.\n  if (event.shiftKey && !keyboard) return\n  event.preventDefault()\n  // Shift+F10 also fires a native `contextmenu` on some platforms, after the keydown below\n  // has already opened the menu.\n  if (keyboard && panelRef.value?.shown) return\n  const on = event.target instanceof Element ? event.target : zoneEl.value\n  if (keyboard) {\n    if (on) placeUnder(on)\n    openMenu(on, true)\n    return\n  }\n  placeAnchor(event.clientX, event.clientY)\n  // @core\n  // macOS and Linux fire the event on the press, not the release. An auto popover opened while\n  // the button is still down is dismissed by that release, so the opening waits until the\n  // release has been dispatched.\n  const pointer = (event as Partial<PointerEvent>).pointerType\n  if (event.buttons !== 0 && pointer !== 'touch') {\n    const release = () => {\n      window.removeEventListener('pointerup', release, true)\n      window.removeEventListener('pointercancel', release, true)\n      setTimeout(() => openMenu(on, false))\n    }\n    window.addEventListener('pointerup', release, true)\n    window.addEventListener('pointercancel', release, true)\n    return\n  }\n  openMenu(on, false)\n}\n\n// @keyboard\n// Windows and Linux turn Shift+F10 into a `contextmenu` event by themselves; macOS does not.\nfunction onKeydown(event: KeyboardEvent) {\n  if (props.disabled || event.defaultPrevented) return\n  if (event.key !== 'F10' || !event.shiftKey || event.altKey || event.ctrlKey || event.metaKey)\n    return\n  event.preventDefault()\n  const on = focusedInZone()\n  if (on) placeUnder(on)\n  openMenu(on, true)\n}\n\n// @a11y\n// The keyboard lands on the first command, the pointer on the panel itself, as in VMenu. On\n// closing, the focus returns where it was unless it has deliberately moved elsewhere.\nfunction onToggle(value: boolean) {\n  open.value = value\n  if (value) {\n    if (fromKeyboard) panelRef.value?.focusFirst()\n    else panelRef.value?.focusPanel()\n    return\n  }\n  const active = document.activeElement\n  if (!active || active === document.body || panelRef.value?.el?.contains(active)) {\n    if (returnFocus?.isConnected) returnFocus.focus()\n  }\n}\n\n/** Opening from the model or from code without an event. */\nfunction showFromCode() {\n  const on = focusedInZone()\n  if (on) placeUnder(on)\n  openMenu(on, false)\n}\n\nusePopoverModel(\n  open,\n  () => panelRef.value?.shown ?? false,\n  showFromCode,\n  () => panelRef.value?.close(),\n)\n\ndefineExpose({\n  /**\n   * Opens the menu. Given a mouse event, it opens at the pointer on the event's target;\n   * otherwise under the focused element of the zone.\n   */\n  show(event?: MouseEvent) {\n    if (!event) return showFromCode()\n    placeAnchor(event.clientX, event.clientY)\n    openMenu(event.target instanceof Element ? event.target : zoneEl.value, false)\n  },\n  /** Closes the menu, submenus included. */\n  close: () => panelRef.value?.close(),\n  /** The panel element. */\n  el: computed(() => panelRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    ref=\"zoneEl\"\n    v-bind=\"$attrs\"\n    class=\"v-context-menu\"\n    @contextmenu=\"onContextmenu\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </component>\n  <span\n    ref=\"anchorEl\"\n    class=\"v-context-menu-anchor\"\n    aria-hidden=\"true\"\n    :style=\"{ 'anchor-name': anchor }\"\n  />\n  <!-- The browser's menu is kept off the panel: a context menu opened on top of this one\n       would hide it, and a keyboard opening that already moved the focus inside must not be\n       answered by the browser too -->\n  <VMenuPanel\n    :id=\"menuId\"\n    ref=\"panelRef\"\n    class=\"v-context-menu-panel\"\n    placement=\"bottom-start\"\n    :anchor=\"anchor\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :width=\"width\"\n    @toggle=\"onToggle\"\n    @contextmenu.prevent\n  >\n    <slot name=\"menu\" :target=\"target\" />\n  </VMenuPanel>\n</template>\n\n<style>\n@layer vectis.components {\n  /* A point, not a box: the panel's corner sits on it. */\n  .v-context-menu-anchor {\n    /* Physical, like the pointer coordinates written into it. */\n    position: fixed;\n    top: 0;\n    left: 0;\n    inline-size: 0;\n    block-size: 0;\n    pointer-events: none;\n  }\n\n  /*\n   * Native context menus open against the pointer, with no gap. The gutter on the opposite side\n   * stays, so a flipped panel keeps its distance from the viewport edge.\n   */\n  .v-context-menu-panel.v-floating {\n    margin-block-start: 0;\n    /* A pointer can sit in a corner of the viewport, where both directions must flip at once. */\n    position-try-fallbacks:\n      flip-block,\n      flip-inline,\n      flip-block flip-inline;\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"VContextMenu.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_Fragment","_createBlock","_resolveDynamicComponent","_mergeProps","_withCtx","_renderSlot","_createElementVNode","_normalizeStyle","_unref","_createVNode","VMenuPanel","_withModifiers","VMenuPanel_default","VContextMenu_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__expose","props","__props","open","useModel","zoneEl","ref","anchorEl","panelRef","menuId","useId","anchor","menuAnchor","target","shallowRef","returnFocus","fromKeyboard","menuKey","placeAnchor","el","x","y","placeUnder","rect","isRtl","clamp","openMenu","panel","on","keyboard","active","focusedInZone","isKeyboardEvent","event","onContextmenu","pointer","release","onKeydown","onToggle","value","showFromCode","usePopoverModel","computed","openBlock","createElementBlock","Fragment","createBlock","resolveDynamicComponent","mergeProps","_ctx","withCtx","renderSlot","createElementVNode","normalizeStyle","unref","createVNode","_cache","withModifiers"],"sources":["../../../src/components/VContextMenu/VContextMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * The native `contextmenu` event covers the right click, the long press on Android and the\n * Menu key. JavaScript places a zero-size anchor at the pointer so CSS anchoring can position\n * the panel and flip it near the viewport edges, and adds Shift+F10 where the platform lacks it.\n */\n\nimport { computed, provide, ref, shallowRef, useId } from 'vue'\n\nimport VMenuPanel from '../VMenu/VMenuPanel.vue'\nimport { menuAnchor, menuKey } from '../VMenu/context'\nimport type { MenuSize } from '../VMenu/context'\nimport { usePopoverModel } from '../../composables/usePopover'\nimport { isRtl } from '../../utils/direction'\nimport { clamp } from '../../utils/number'\n\ninterface ContextMenuProps {\n  /** The element wrapping the zone. Any element able to hold the default slot's content. */\n  as?: string\n  /** How tall the rows are: 32, 40 or 48 pixels. Submenus inherit it. */\n  size?: MenuSize\n  /**\n   * A width for the panel: a number is read as pixels, a string as any CSS length or\n   * keyword. Submenus keep the default width.\n   */\n  width?: number | string\n  /** Leaves the zone to the browser's own context menu. */\n  disabled?: boolean\n}\n\n// The attributes belong on the zone, the one element of the three this component renders that\n// the consumer sees.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<ContextMenuProps>(), {\n  as: 'div',\n  size: 'sm',\n  width: undefined,\n  disabled: false,\n})\n\n/**\n * Whether the menu is showing. The browser's own dismissal (a click outside, Escape,\n * choosing a command) writes back to it. Opened from the model, the menu appears under\n * the focused element of the zone, or under the zone itself.\n */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** The zone the menu belongs to. */\n  default(): unknown\n  /**\n   * The contents of the menu: VMenuItem, VMenuGroup and VMenuSeparator. `target` is the\n   * element the menu was opened on, so one menu can serve every item of a list.\n   */\n  menu(props: { target: Element | null }): unknown\n}>()\n\nconst zoneEl = ref<HTMLElement | null>(null)\nconst anchorEl = ref<HTMLElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VMenuPanel> | null>(null)\nconst menuId = useId()\nconst anchor = menuAnchor(menuId)\n\n/** The element the menu was opened on, handed to the `menu` slot. */\nconst target = shallowRef<Element | null>(null)\n\n/** Where the focus goes back when the menu closes. */\nlet returnFocus: HTMLElement | null = null\nlet fromKeyboard = false\n\nprovide(menuKey, { closeAll: () => panelRef.value?.close() })\n\n/** Moves the invisible anchor the panel is positioned against. */\nfunction placeAnchor(x: number, y: number) {\n  const el = anchorEl.value\n  if (!el) return\n  el.style.left = `${x}px`\n  el.style.top = `${y}px`\n}\n\n/**\n * Puts the anchor under an element's start edge, kept inside the viewport so a zone taller\n * than the screen still opens a visible menu.\n */\nfunction placeUnder(el: Element) {\n  const rect = el.getBoundingClientRect()\n  const x = isRtl(el) ? rect.right : rect.left\n  placeAnchor(clamp(x, 0, window.innerWidth), clamp(rect.bottom, 0, window.innerHeight))\n}\n\nfunction openMenu(on: Element | null, keyboard: boolean) {\n  const panel = panelRef.value\n  if (!panel) return\n  target.value = on\n  fromKeyboard = keyboard\n  // Reopening at another spot must not take the focus inside the old panel as the place to\n  // return to.\n  const active = document.activeElement\n  if (!panel.el?.contains(active)) {\n    returnFocus = active instanceof HTMLElement && active !== document.body ? active : null\n  }\n  if (panel.shown) panel.close()\n  panel.show()\n}\n\n/** The element of the zone holding the focus, or the zone itself. */\nfunction focusedInZone(): Element | null {\n  const active = document.activeElement\n  return active && zoneEl.value?.contains(active) ? active : zoneEl.value\n}\n\n// @keyboard\n// Keyboard openings carry no pointer position: the spec gives them an empty pointer type. Where\n// `contextmenu` is still a plain MouseEvent, no button is pressed or released for them; a\n// Control-click on macOS holds the primary button down.\nfunction isKeyboardEvent(event: MouseEvent): boolean {\n  if ('pointerType' in event) return (event as PointerEvent).pointerType === ''\n  return event.button !== 2 && event.buttons === 0\n}\n\nfunction onContextmenu(event: MouseEvent) {\n  // A nested context menu, or the consumer's own handler, already answered this event.\n  if (props.disabled || event.defaultPrevented) return\n  const keyboard = isKeyboardEvent(event)\n  // Shift is the way through to the browser's own menu, as Firefox already does by itself.\n  if (event.shiftKey && !keyboard) return\n  event.preventDefault()\n  // Shift+F10 also fires a native `contextmenu` on some platforms, after the keydown below\n  // has already opened the menu.\n  if (keyboard && panelRef.value?.shown) return\n  const on = event.target instanceof Element ? event.target : zoneEl.value\n  if (keyboard) {\n    if (on) placeUnder(on)\n    openMenu(on, true)\n    return\n  }\n  placeAnchor(event.clientX, event.clientY)\n  // @core\n  // macOS and Linux fire the event on the press, not the release. An auto popover opened while\n  // the button is still down is dismissed by that release, so the opening waits until the\n  // release has been dispatched.\n  const pointer = (event as Partial<PointerEvent>).pointerType\n  if (event.buttons !== 0 && pointer !== 'touch') {\n    const release = () => {\n      window.removeEventListener('pointerup', release, true)\n      window.removeEventListener('pointercancel', release, true)\n      setTimeout(() => openMenu(on, false))\n    }\n    window.addEventListener('pointerup', release, true)\n    window.addEventListener('pointercancel', release, true)\n    return\n  }\n  openMenu(on, false)\n}\n\n// @keyboard\n// Windows and Linux turn Shift+F10 into a `contextmenu` event by themselves; macOS does not.\nfunction onKeydown(event: KeyboardEvent) {\n  if (props.disabled || event.defaultPrevented) return\n  if (event.key !== 'F10' || !event.shiftKey || event.altKey || event.ctrlKey || event.metaKey)\n    return\n  event.preventDefault()\n  const on = focusedInZone()\n  if (on) placeUnder(on)\n  openMenu(on, true)\n}\n\n// @a11y\n// The keyboard lands on the first command, the pointer on the panel itself, as in VMenu. On\n// closing, the focus returns where it was unless it has deliberately moved elsewhere.\nfunction onToggle(value: boolean) {\n  open.value = value\n  if (value) {\n    if (fromKeyboard) panelRef.value?.focusFirst()\n    else panelRef.value?.focusPanel()\n    return\n  }\n  const active = document.activeElement\n  if (!active || active === document.body || panelRef.value?.el?.contains(active)) {\n    if (returnFocus?.isConnected) returnFocus.focus()\n  }\n}\n\n/** Opening from the model or from code without an event. */\nfunction showFromCode() {\n  const on = focusedInZone()\n  if (on) placeUnder(on)\n  openMenu(on, false)\n}\n\nusePopoverModel(\n  open,\n  () => panelRef.value?.shown ?? false,\n  showFromCode,\n  () => panelRef.value?.close(),\n)\n\ndefineExpose({\n  /**\n   * Opens the menu. Given a mouse event, it opens at the pointer on the event's target;\n   * otherwise under the focused element of the zone.\n   */\n  show(event?: MouseEvent) {\n    if (!event) return showFromCode()\n    placeAnchor(event.clientX, event.clientY)\n    openMenu(event.target instanceof Element ? event.target : zoneEl.value, false)\n  },\n  /** Closes the menu, submenus included. */\n  close: () => panelRef.value?.close(),\n  /** The panel element. */\n  el: computed(() => panelRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    ref=\"zoneEl\"\n    v-bind=\"$attrs\"\n    class=\"v-context-menu\"\n    @contextmenu=\"onContextmenu\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </component>\n  <span\n    ref=\"anchorEl\"\n    class=\"v-context-menu-anchor\"\n    aria-hidden=\"true\"\n    :style=\"{ 'anchor-name': anchor }\"\n  />\n  <!-- The browser's menu is kept off the panel: a context menu opened on top of this one\n       would hide it, and a keyboard opening that already moved the focus inside must not be\n       answered by the browser too -->\n  <VMenuPanel\n    :id=\"menuId\"\n    ref=\"panelRef\"\n    class=\"v-context-menu-panel\"\n    placement=\"bottom-start\"\n    :anchor=\"anchor\"\n    :size=\"size\"\n    :width=\"width\"\n    @toggle=\"onToggle\"\n    @contextmenu.prevent\n  >\n    <slot name=\"menu\" :target=\"target\" />\n  </VMenuPanel>\n</template>\n\n<style>\n@layer vectis.components {\n  /* A point, not a box: the panel's corner sits on it. */\n  .v-context-menu-anchor {\n    /* Physical, like the pointer coordinates written into it. */\n    position: fixed;\n    top: 0;\n    left: 0;\n    inline-size: 0;\n    block-size: 0;\n    pointer-events: none;\n  }\n\n  /*\n   * Native context menus open against the pointer, with no gap. The gutter on the opposite side\n   * stays, so a flipped panel keeps its distance from the viewport edge.\n   */\n  .v-context-menu-panel.v-floating {\n    margin-block-start: 0;\n    /* A pointer can sit in a corner of the viewport, where both directions must flip at once. */\n    position-try-fallbacks:\n      flip-block,\n      flip-inline,\n      flip-block flip-inline;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCA,IAAMqB,IAAQC,GAYRC,IAAOtB,EAAoBqB,GAAC,MAA0B,GAYtDG,IAASC,EAAwB,IAAI,GACrCC,IAAWD,EAAwB,IAAI,GACvCE,IAAWF,EAA4C,IAAI,GAC3DG,IAASC,EAAM,GACfC,IAASC,EAAWH,CAAM,GAG1BI,IAASC,EAA2B,IAAI,GAG1CC,IAAkC,MAClCC,IAAe;EAEnB,EAAQC,GAAS,EAAE,gBAAgBT,EAAS,OAAO,MAAM,EAAE,CAAC;EAG5D,SAASU,EAAY,GAAW,GAAW;GACzC,IAAMC,IAAKZ,EAAS;GACpB,AAAKY,MACL,EAAG,MAAM,OAAO,GAAGC,EAAE,KACrB,EAAG,MAAM,MAAM,GAAGC,EAAE;EACtB;EAMA,SAASC,EAAW,GAAa;GAC/B,IAAMC,IAAOJ,EAAG,sBAAsB,GAChCC,IAAII,EAAML,CAAE,IAAII,EAAK,QAAQA,EAAK;GACxC,EAAYE,EAAML,GAAG,GAAG,OAAO,UAAU,GAAGK,EAAMF,EAAK,QAAQ,GAAG,OAAO,WAAW,CAAC;EACvF;EAEA,SAASG,EAAS,GAAoB,GAAmB;GACvD,IAAMC,IAAQnB,EAAS;GACvB,IAAI,CAACmB,GAAO;GAEZ,AADA,EAAO,QAAQC,GACf,IAAeC;GAGf,IAAMC,IAAS,SAAS;GAKxB,AAJKH,EAAM,IAAI,SAASG,CAAM,MAC5B,IAAcA,aAAkB,eAAeA,MAAW,SAAS,OAAOA,IAAS,OAEjFH,EAAM,SAAOA,EAAM,MAAM,GAC7BA,EAAM,KAAK;EACb;EAGA,SAASI,IAAgC;GACvC,IAAMD,IAAS,SAAS;GACxB,OAAOA,KAAUzB,EAAO,OAAO,SAASyB,CAAM,IAAIA,IAASzB,EAAO;EACpE;EAMA,SAAS2B,EAAgB,GAA4B;GAEnD,OADI,iBAAiBC,IAAeA,EAAuB,gBAAgB,KACpEA,EAAM,WAAW,KAAKA,EAAM,YAAY;EACjD;EAEA,SAASC,EAAc,GAAmB;GAExC,IAAIjC,EAAM,YAAYgC,EAAM,kBAAkB;GAC9C,IAAMJ,IAAWG,EAAgBC,CAAK;GAMtC,IAJIA,EAAM,YAAY,CAACJ,MACvBI,EAAM,eAAe,GAGjBJ,KAAYrB,EAAS,OAAO,QAAO;GACvC,IAAMoB,IAAKK,EAAM,kBAAkB,UAAUA,EAAM,SAAS5B,EAAO;GACnE,IAAIwB,GAAU;IAEZ,AADID,KAAIN,EAAWM,CAAE,GACrBF,EAASE,GAAI,EAAI;IACjB;GACF;GACA,EAAYK,EAAM,SAASA,EAAM,OAAO;GAKxC,IAAME,IAAWF,EAAgC;GACjD,IAAIA,EAAM,YAAY,KAAKE,MAAY,SAAS;IAC9C,IAAMC,UAAgB;KAGpB,AAFA,OAAO,oBAAoB,aAAaA,GAAS,EAAI,GACrD,OAAO,oBAAoB,iBAAiBA,GAAS,EAAI,GACzD,iBAAiBV,EAASE,GAAI,EAAK,CAAC;IACtC;IAEA,AADA,OAAO,iBAAiB,aAAaQ,GAAS,EAAI,GAClD,OAAO,iBAAiB,iBAAiBA,GAAS,EAAI;GAExD,OACA,EAASR,GAAI,EAAK;EACpB;EAIA,SAASS,EAAU,GAAsB;GAEvC,IADIpC,EAAM,YAAYgC,EAAM,oBACxBA,EAAM,QAAQ,SAAS,CAACA,EAAM,YAAYA,EAAM,UAAUA,EAAM,WAAWA,EAAM,SACnF;GACF,EAAM,eAAe;GACrB,IAAML,IAAKG,EAAc;GAEzB,AADIH,KAAIN,EAAWM,CAAE,GACrBF,EAASE,GAAI,EAAI;EACnB;EAKA,SAASU,EAAS,GAAgB;GAEhC,IADA,EAAK,QAAQC,GACTA,GAAO;IACT,AAAIvB,IAAcR,EAAS,OAAO,WAAW,IACxCA,EAAS,OAAO,WAAW;IAChC;GACF;GACA,IAAMsB,IAAS,SAAS;GACxB,CAAI,CAACA,KAAUA,MAAW,SAAS,QAAQtB,EAAS,OAAO,IAAI,SAASsB,CAAM,MACxEf,GAAa,eAAaA,EAAY,MAAM;EAEpD;EAGA,SAASyB,IAAe;GACtB,IAAMZ,IAAKG,EAAc;GAEzB,AADIH,KAAIN,EAAWM,CAAE,GACrBF,EAASE,GAAI,EAAK;EACpB;SAEAa,EACEtC,SACMK,EAAS,OAAO,SAAS,IAC/BgC,SACMhC,EAAS,OAAO,MAAM,CAC9B,GAEAR,EAAa;GAKX,KAAK,GAAoB;IACvB,IAAI,CAACiC,GAAO,OAAOO,EAAa;IAEhC,AADAtB,EAAYe,EAAM,SAASA,EAAM,OAAO,GACxCP,EAASO,EAAM,kBAAkB,UAAUA,EAAM,SAAS5B,EAAO,OAAO,EAAK;GAC/E;GAEA,aAAaG,EAAS,OAAO,MAAM;GAEnC,IAAIkC,QAAelC,EAAS,OAAO,MAAM,IAAI;EAC/C,CAAC;IAIC1B,EAAA,GAAAG,EASYC,EARLgB,EAAA,EAAE,GADTf,EASY;IAPN,SAAA;IAAJ,KAAIkB;GACIzB,GAAAA,EAAAA,QAAM;IACd,OAAM;IACQ;IACJ;;IAEV,SAAAQ,QAAQ,CAARC,EAAQ4D,EAAA,QAAA,SAAA,CAAA,CAAA;;;GAEV3D,EAKE,QAAA;IAJI,SAAA;IAAJ,KAAIiB;IACJ,OAAM;IACN,eAAY;IACX,OAAKhB,EAAA,EAAA,eAAmBC,EAAAmB,CAAA,EAAM,CAAA;;GAKjClB,EAYaC,GAAA;IAXV,IAAIF,EAAAiB,CAAA;IACD,SAAA;IAAJ,KAAID;IACJ,OAAM;IACN,WAAU;IACT,QAAQhB,EAAAmB,CAAA;IACR,MAAMT,EAAA;IACN,OAAOA,EAAA;IACC;IACR,eAAW,AAAAsD,EAAA,OAAA7D,QAAZ,CAAA,GAAoB,CAAA,SAAA,CAAA;;IAEpB,SAAAP,QAAqC,CAArCC,EAAqC4D,EAAA,QAAA,QAAA,EAAlB,QAAQpC,EAAA,MAAM,CAAA,CAAA,CAAA"}

package/dist/components/VDataTable/VDataTable.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-data-table{--data-table-pad-block:var(--vectis-space-3);--data-table-pad-inline:var(--vectis-space-3);--data-table-head-pad-block:var(--vectis-space-2);--data-table-frame-pad:0px;font-family:var(--vectis-text-family);flex-direction:column;block-size:100%;display:flex}.v-data-table[data-compact]{--data-table-pad-block:var(--vectis-space-2);--data-table-pad-inline:var(--vectis-space-2);--data-table-head-pad-block:var(--vectis-space-1)}.v-data-table-frame{flex-direction:column;flex:auto;min-block-size:0;display:flex}.v-data-table:is([data-variant=outline],[data-variant=elevated],[data-variant=filled])>.v-data-table-frame{--data-table-frame-pad:var(--data-table-pad-inline);border-radius:var(--vectis-radius-surface);border:1px solid #0000;overflow:clip}.v-data-table[data-variant=outline]>.v-data-table-frame{background:var(--vectis-color-surface);border-color:var(--vectis-color-border)}.v-data-table[data-variant=elevated]>.v-data-table-frame{background:var(--vectis-color-surface-raised);box-shadow:var(--vectis-shadow-sm);border:none}.v-data-table[data-variant=filled]{--data-table-head-bg:color-mix(in oklab, var(--vectis-color-surface-muted), var(--vectis-color-text) 4%)}.v-data-table[data-variant=filled]>.v-data-table-frame{background:var(--vectis-color-surface-muted)}.v-data-table-scroller{flex:auto;min-block-size:0;position:relative;overflow:auto}.v-data-table[data-variant=flat]>.v-data-table-frame>.v-data-table-scroller{border-radius:var(--vectis-radius-surface)}.v-data-table-header,.v-data-table-toolbar{align-items:center;gap:var(--vectis-space-3);flex-wrap:wrap;flex:none;padding-block-end:var(--vectis-space-3);display:flex}.v-data-table-titles{flex-direction:column;min-inline-size:0;display:flex}.v-data-table-title{--typography-color:var(--vectis-color-text)}.v-data-table-header>.v-data-table-search{inline-size:var(--vectis-control-size-table-search);max-inline-size:100%;margin-inline-start:auto}.v-data-table-table{border-collapse:collapse;width:100%;font-size:var(--vectis-text-body-md-size);color:var(--vectis-color-text)}.v-data-table-table th{padding:var(--data-table-head-pad-block) var(--data-table-pad-inline);text-align:start;font-size:var(--vectis-text-body-md-size);font-weight:var(--vectis-font-weight-semibold);color:var(--vectis-color-text-muted);background-color:var(--data-table-head-bg,var(--vectis-color-surface-muted));border-block-end:1px solid var(--vectis-color-border)}.v-data-table-table td{padding:var(--data-table-pad-block) var(--data-table-pad-inline);border-block-end:1px solid var(--vectis-color-border)}.v-data-table-table tbody tr:last-child td{border-block-end:none}.v-data-table-table [data-align=end]{text-align:end}.v-data-table-table [data-align=center]{text-align:center}.v-data-table-table .v-data-table-select{inline-size:0}.v-data-table[data-striped] tbody tr[data-stripe]{background-color:var(--vectis-color-surface-sunken)}.v-data-table[data-selectable] tbody tr[data-selected]{background-color:var(--vectis-color-accent-surface)}@media (forced-colors:active){.v-data-table[data-selectable] tbody tr[data-selected]{outline:var(--vectis-focus-ring-width) solid Highlight;outline-offset:calc(-1 * var(--vectis-focus-ring-width))}}.v-data-table[data-sticky-header] th{z-index:1;position:sticky;inset-block-start:0}.v-data-table-sort{--vectis-icon-size:var(--vectis-icon-size-md);--vectis-icon-opsz:20;align-items:center;gap:var(--vectis-space-1);color:inherit;font:inherit;cursor:pointer;border-radius:min(var(--vectis-radius-interactive), .5lh);background:0 0;border:none;padding:0;display:inline-flex}.v-data-table-sort:hover{color:var(--vectis-color-text)}.v-data-table-sort:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-data-table-sort-icon{opacity:.35}.v-data-table-sort[data-direction] .v-data-table-sort-icon{opacity:1}.v-data-table[data-virtual] .v-data-table-scroller{overflow-anchor:none}.v-data-table-table .v-data-table-spacer td{border:none;padding:0}.v-data-table-table .v-data-table-more td{block-size:var(--vectis-control-height-md);padding:var(--vectis-space-2);text-align:center;color:var(--vectis-color-text-muted);border:none}.v-data-table-state{padding:var(--vectis-space-6);text-align:center;color:var(--vectis-color-text-muted)}.v-data-table-state>.v-empty-state[data-size]{padding:0}.v-data-table-state-loading{align-items:center;gap:var(--vectis-space-2);display:inline-flex}.v-data-table-footer{justify-content:flex-end;align-items:center;gap:var(--vectis-space-4);padding-block-start:var(--vectis-space-3);padding-block-end:var(--data-table-frame-pad);padding-inline:var(--data-table-frame-pad);flex-wrap:wrap;flex:none;display:flex}.v-data-table-footer-end{justify-content:flex-end;align-items:center;gap:var(--vectis-space-4);flex-wrap:wrap;margin-inline-start:auto;display:flex}.v-data-table-selection,.v-data-table-range,.v-data-table-per-page-label{font-size:var(--vectis-text-body-md-size);color:var(--vectis-color-text-muted)}.v-data-table-per-page{align-items:center;gap:var(--vectis-space-2);display:flex}}
+@layer vectis.components{.v-data-table{--data-table-pad-block:calc(var(--vectis-space-3) - var(--vectis-density-delta));--data-table-pad-inline:calc(var(--vectis-space-3) - var(--vectis-density-delta));--data-table-head-pad-block:calc(var(--vectis-space-2) - var(--vectis-density-delta));--data-table-frame-pad:0px;font-family:var(--vectis-text-family);flex-direction:column;block-size:100%;display:flex}.v-data-table-frame{flex-direction:column;flex:auto;min-block-size:0;display:flex}.v-data-table:is([data-variant=outline],[data-variant=elevated],[data-variant=filled])>.v-data-table-frame{--data-table-frame-pad:var(--data-table-pad-inline);border-radius:var(--vectis-radius-surface);border:1px solid #0000;overflow:clip}.v-data-table[data-variant=outline]>.v-data-table-frame{background:var(--vectis-color-surface);border-color:var(--vectis-color-border)}.v-data-table[data-variant=elevated]>.v-data-table-frame{background:var(--vectis-color-surface-raised);box-shadow:var(--vectis-shadow-sm);border:none}.v-data-table[data-variant=filled]{--data-table-head-bg:color-mix(in oklab, var(--vectis-color-surface-muted), var(--vectis-color-text) 4%)}.v-data-table[data-variant=filled]>.v-data-table-frame{background:var(--vectis-color-surface-muted)}.v-data-table-scroller{flex:auto;min-block-size:0;position:relative;overflow:auto}.v-data-table[data-variant=flat]>.v-data-table-frame>.v-data-table-scroller{border-radius:var(--vectis-radius-surface)}.v-data-table-header,.v-data-table-toolbar{align-items:center;gap:var(--vectis-space-3);flex-wrap:wrap;flex:none;padding-block-end:var(--vectis-space-3);display:flex}.v-data-table-titles{flex-direction:column;min-inline-size:0;display:flex}.v-data-table-title{--typography-color:var(--vectis-color-text)}.v-data-table-header>.v-data-table-search{inline-size:var(--vectis-control-size-table-search);max-inline-size:100%;margin-inline-start:auto}.v-data-table-table{border-collapse:collapse;width:100%;font-size:var(--vectis-text-body-md-size);color:var(--vectis-color-text)}.v-data-table-table th{padding:var(--data-table-head-pad-block) var(--data-table-pad-inline);text-align:start;font-size:var(--vectis-text-body-md-size);font-weight:var(--vectis-font-weight-semibold);color:var(--vectis-color-text-muted);background-color:var(--data-table-head-bg,var(--vectis-color-surface-muted));border-block-end:1px solid var(--vectis-color-border)}.v-data-table-table td{padding:var(--data-table-pad-block) var(--data-table-pad-inline);border-block-end:1px solid var(--vectis-color-border)}.v-data-table-table tbody tr:last-child td{border-block-end:none}.v-data-table-table [data-align=end]{text-align:end}.v-data-table-table [data-align=center]{text-align:center}.v-data-table-table .v-data-table-select{inline-size:0}.v-data-table[data-striped] tbody tr[data-stripe]{background-color:var(--vectis-color-surface-sunken)}.v-data-table[data-selectable] tbody tr[data-selected]{background-color:var(--vectis-color-accent-surface)}@media (forced-colors:active){.v-data-table[data-selectable] tbody tr[data-selected]{outline:var(--vectis-focus-ring-width) solid Highlight;outline-offset:calc(-1 * var(--vectis-focus-ring-width))}}.v-data-table[data-sticky-header] th{z-index:1;position:sticky;inset-block-start:0}.v-data-table-sort{--vectis-icon-size:var(--vectis-icon-size-md);--vectis-icon-opsz:20;align-items:center;gap:var(--vectis-space-1);color:inherit;font:inherit;cursor:pointer;border-radius:min(var(--vectis-radius-interactive), .5lh);background:0 0;border:none;padding:0;display:inline-flex}.v-data-table-sort:hover{color:var(--vectis-color-text)}.v-data-table-sort:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-data-table-sort-icon{opacity:.35}.v-data-table-sort[data-direction] .v-data-table-sort-icon{opacity:1}.v-data-table[data-virtual] .v-data-table-scroller{overflow-anchor:none}.v-data-table-table .v-data-table-spacer td{border:none;padding:0}.v-data-table-table .v-data-table-more td{block-size:var(--vectis-control-height-md);padding:var(--vectis-space-2);text-align:center;color:var(--vectis-color-text-muted);border:none}.v-data-table-state{padding:var(--vectis-space-6);text-align:center;color:var(--vectis-color-text-muted)}.v-data-table-state>.v-empty-state[data-size]{padding:0}.v-data-table-state-loading{align-items:center;gap:var(--vectis-space-2);display:inline-flex}.v-data-table-footer{justify-content:flex-end;align-items:center;gap:var(--vectis-space-4);padding-block-start:var(--vectis-space-3);padding-block-end:var(--data-table-frame-pad);padding-inline:var(--data-table-frame-pad);flex-wrap:wrap;flex:none;display:flex}.v-data-table-footer-end{justify-content:flex-end;align-items:center;gap:var(--vectis-space-4);flex-wrap:wrap;margin-inline-start:auto;display:flex}.v-data-table-selection,.v-data-table-range,.v-data-table-per-page-label{font-size:var(--vectis-text-body-md-size);color:var(--vectis-color-text-muted)}.v-data-table-per-page{align-items:center;gap:var(--vectis-space-2);display:flex}}

package/dist/components/VDataTable/VDataTable.d.ts

@@ -128,8 +128,6 @@ export interface DataTableProps<Row extends Record<string, unknown>> {
      * of its own.
      */
     stickyHeader?: boolean;
-    /** Tightens the cells by one step, and everything the table renders with them. */
-    compact?: boolean;
     /**
      * The height of the whole component, header, toolbar and pagination included: a number is read as
      * pixels, anything else as a CSS length. Left out, the table takes its parent's height