vectis-ui 0.12.0 → 0.13.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"],"sources":["../../../src/components/VCombobox/VCombobox.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @keyboard @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, reactive, ref, useId, watch, watchEffect } from 'vue'\n\nimport VChip from '../VChip/VChip.vue'\nimport type { ChipSize } from '../VChip/VChip.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport VInput from '../VInput/VInput.vue'\nimport VPopover from '../VPopover/VPopover.vue'\nimport VComboboxOption from './VComboboxOption.vue'\nimport VComboboxGroup from './VComboboxGroup.vue'\nimport VComboboxSeparator from './VComboboxSeparator.vue'\nimport { useInfiniteScroll } from './infiniteScroll'\nimport VSpinner from '../VSpinner/VSpinner.vue'\n\nimport { toggleValue } from '../../utils/array'\nimport type { ItemValue } 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'\n\nimport { canClear } from '../../composables/useClearable'\nimport { iconStartListener } from '../../composables/useIconClickHandlers'\n\nimport { useTimer } from '../../composables/useTimer'\nimport { useMessages } from '../../i18n/state'\n\n/** One thing that can be chosen. */\nexport interface ComboboxOption {\n  /**\n   * What choosing it means: this is what the value holds. A number is admitted because a\n   * list of options almost always comes from somewhere that keys its rows by one.\n   */\n  value: ItemValue\n  /** What it is called on screen, and what the search matches against. */\n  label: string\n  /** An icon before the label: an icon name, or an explicit render. */\n  icon?: IconSource\n  /** Shows the option without allowing it to be chosen. */\n  disabled?: boolean\n}\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 interface ComboboxGroup {\n  /** The name of the block. */\n  label: string\n  /** The options it holds. */\n  options: ComboboxOption[]\n}\n\n/**\n * A rule drawn between two blocks of options. It is purely decorative, and a separator\n * the search leaves stranded (at the top, at the bottom, or against another one) is\n * simply not drawn.\n */\nexport interface ComboboxSeparator {\n  separator: true\n}\n\n/** Anything the list may hold: an option, a named block, or a separator. */\nexport type ComboboxItem = ComboboxOption | ComboboxGroup | ComboboxSeparator\n\nconst isGroup = (item: ComboboxItem): item is ComboboxGroup => 'options' in item\nconst isSeparator = (item: ComboboxItem): item is ComboboxSeparator => 'separator' in item\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' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | '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 interface ComboboxOptionSlotProps {\n  option: ComboboxOption\n  index: number\n  active: boolean\n  selected: boolean\n}\n\n/** What the `#chip` slot receives. */\nexport interface ComboboxChipSlotProps {\n  value: ItemValue\n  option: ComboboxOption | undefined\n  label: string\n  remove: () => void\n  size: ChipSize\n  compact: boolean\n}\n\n/** What the `#overflow` slot receives. */\nexport interface ComboboxOverflowSlotProps {\n  count: number\n  size: ChipSize\n  compact: boolean\n}\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  /** 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  /**\n   * Leaves the chevron out, for a field that reads as a search box with suggestions rather than\n   * as a list to pick from.\n   */\n  hideExpandIcon?: boolean\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   * What the panel says when the search matches nothing. It is also what a screen reader\n   * hears, even when the `#empty` slot draws something else: set both 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  /** 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  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  hideExpandIcon: false,\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  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 activeIndex = ref(-1)\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<ItemValue[]>(() => {\n  if (props.multiple) return Array.isArray(model.value) ? model.value : []\n  // An empty string is what an emptied combobox says, and it is not a value. A NUMBER, on the\n  // other hand, is a value even at zero; hence the test on the empty string alone rather than\n  // on falsiness, which would drop the option keyed `0`.\n  return !Array.isArray(model.value) && model.value !== '' ? [model.value] : []\n})\n\n// Every option, flattened: the blocks unwrapped, the separators dropped, in the order they were\n// given. This is the ONE reading of the options the rest of the component does; the filtering,\n// the memory of what was chosen, the labels and the paging all ignore the hierarchy entirely.\nconst allOptions = computed<ComboboxOption[]>(() =>\n  props.options.flatMap((item) => {\n    if (isSeparator(item)) return []\n    return isGroup(item) ? item.options : [item]\n  }),\n)\n\n// With a source that answers over the network, the options only ever hold the latest results,\n// and something already chosen is usually absent from them; without this, a chip would show a\n// raw identifier instead of a name, and a custom chip would lose the option's icon. It is kept\n// up to date by an effect rather than by watching the options, because the effect tracks the\n// ITERATION and therefore also notices a page appended in place.\nconst optionCache = reactive(new Map<ItemValue, ComboboxOption>())\nwatchEffect(() => {\n  const wanted = new Set(selectedValues.value)\n  for (const option of allOptions.value) {\n    if (wanted.has(option.value)) optionCache.set(option.value, option)\n  }\n  // Without this the memory would grow with every value chosen during the session rather than\n  // with the current selection; a slow leak in a long-lived multiple field fed by a paginated\n  // source.\n  for (const value of optionCache.keys()) if (!wanted.has(value)) optionCache.delete(value)\n})\n\n/*\n * A lookup from value to option, built once per list of options rather than searched each time.\n * Finding an option is done several times per chip and per render; for the chip itself, its\n * label and the name of its remove button; so a linear search here would cost the number of\n * chips times the number of options, on every keystroke.\n */\nconst optionsByValue = computed(() => {\n  const map = new Map<ItemValue, ComboboxOption>()\n  for (const option of allOptions.value) if (!map.has(option.value)) map.set(option.value, option)\n  return map\n})\n\n/**\n * The selection as a set, so that asking \"is this one chosen?\" costs nothing however many are;\n * the same device VDataTable uses for its selected rows.\n */\nconst selectedSet = computed(() => new Set(selectedValues.value))\n\n/**\n * An option coming from that memory is a reactive PROXY, since making the map reactive converts\n * the objects inside it. Compare options by their value and never by identity, or the two forms\n * of the same option will not match.\n */\nfunction optionOf(value: ItemValue) {\n  return optionsByValue.value.get(value) ?? optionCache.get(value)\n}\n\nfunction labelOf(value: ItemValue) {\n  return optionOf(value)?.label ?? String(value)\n}\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\n// This is what the keyboard counts through: blocks and separators do not appear in it, which is\n// exactly why the arrows never stop on one.\nconst filtered = computed(() => {\n  const matcher = props.filter\n  const list = allOptions.value\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\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\n// Each option there carries its index in `filtered` (and not its position in the tree): ids,\n// highlight and the #option slot stay aligned on the keyboard navigation.\ntype RenderedOption = { kind: 'option'; key: string; option: ComboboxOption; index: number }\ntype RenderedNode =\n  | RenderedOption\n  | { kind: 'group'; key: string; label: string; options: RenderedOption[] }\n  | { kind: 'separator'; key: string }\n\n// Nothing here is keyed by VALUE. Two options may share one (a consumer's duplicate, or `1`\n// beside `'1'`, which a template literal spells the same), and a value-keyed index hands both\n// the same position, so both light up as active and Vue patches two rows under one key.\nconst rendered = computed<RenderedNode[]>(() => {\n  const kept = new Set(filtered.value)\n  let next = 0\n\n  const entryOf = (option: ComboboxOption, key: string): RenderedOption | null => {\n    if (!kept.has(option)) return null\n    return { kind: 'option', key: `option:${key}`, option, index: next++ }\n  }\n\n  const nodes: RenderedNode[] = []\n  // A separator is held back and only drawn once something has come before it and something\n  // comes after it. That single rule covers all three ways the filtering can strand one: at the\n  // top of the list, at the bottom, and two in a row.\n  let pendingSeparator: string | null = null\n\n  for (const [i, item] of props.options.entries()) {\n    if (isSeparator(item)) {\n      if (nodes.length > 0) pendingSeparator = `sep:${i}`\n      continue\n    }\n\n    let node: RenderedNode | null\n    if (isGroup(item)) {\n      const options = item.options\n        .map((option, j) => entryOf(option, `${i}.${j}`))\n        .filter((entry): entry is RenderedOption => entry !== null)\n      // A block none of whose options survived is dropped entirely, its name included:\n      // a heading over nothing is worse than no heading.\n      node =\n        options.length > 0 ? { kind: 'group', key: `group:${i}`, label: item.label, options } : null\n    } else {\n      node = entryOf(item, String(i))\n    }\n    if (!node) continue\n\n    if (pendingSeparator !== null) {\n      nodes.push({ kind: 'separator', key: pendingSeparator })\n      pendingSeparator = null\n    }\n    nodes.push(node)\n  }\n\n  return nodes\n})\n\n// Nothing native waits before sending a request, or refrains from sending the same one twice,\n// so both have to be written. The waiting itself is delegated to `useTimer`; re-arming, a delay\n// of zero running at once, cancellation when the component goes away; and what stays here is\n// specific to this component: not repeating a term, and giving up when the panel closes.\nconst searchTimer = useTimer()\n// The last term actually sent, or nothing if none ever was. It is what stops reopening the\n// panel on an unchanged term from firing the request again; a consumer with a cache of their\n// own is of course free to answer instantly.\nlet lastEmitted: string | undefined\n\nconst cancelSearch = searchTimer.cancel\n\nfunction emitSearch(term: string, immediate = false) {\n  cancelSearch()\n  if (term === lastEmitted) return\n  searchTimer.start(\n    () => {\n      // The panel may have closed while we were waiting: there is then nothing left to load,\n      // and the check has to happen here rather than before arming the timer.\n      if (!open.value) return\n      lastEmitted = term\n      emit('search', term)\n    },\n    immediate ? 0 : props.searchDebounce,\n  )\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  activeIndex.value = filtered.value.findIndex((o) => !o.disabled)\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\nwatch(filtered, (list) => {\n  // While the panel is open there must always be a valid option highlighted. It is moved back\n  // to the first result whenever the highlighted one has fallen out of the list or there was\n  // none at all; without that second case, a search that passed through \"no result\" would leave\n  // nothing highlighted, and Enter would not choose the single result that came back.\n  if (!open.value) return\n  if (activeIndex.value < 0 || activeIndex.value >= list.length) {\n    activeIndex.value = list.findIndex((o) => !o.disabled)\n  }\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// Unfolded, the reader is working on the selection, and every value must be there to be seen\n// and taken back; Backspace included, which would otherwise remove a value hidden behind the\n// \"+X\". `max: 0` means no limit, as on VAvatarGroup: a truthiness test, never `!= null`, which\n// would hide every value.\nconst visibleValues = computed(() =>\n  collapsed.value && props.max ? selectedValues.value.slice(0, props.max) : selectedValues.value,\n)\nconst overflowCount = computed(() => selectedValues.value.length - visibleValues.value.length)\n\n// Digits and a plus sign stay out of the dictionary, as VAvatarGroup's \"+N\" does: rephrasing\n// goes through `overflowText` or the `#overflow` slot.\nconst resolvedOverflowText = computed(() =>\n  props.overflowText ? props.overflowText(overflowCount.value) : `+${overflowCount.value}`,\n)\n\n// The comma is universal punctuation rather than a word, so it stays out of the dictionary,\n// as in VFileInput's own text display.\nconst displayText = computed(() =>\n  textDisplay.value ? visibleValues.value.map(labelOf).join(', ') : '',\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// @a11y\n// An option's id follows the OPTION, from its place among all the options, and never its place\n// in the filtered list: a screen reader announces the current option when\n// `aria-activedescendant` changes, and a positional id would keep the same value while the\n// filter slides another option under the highlight, which then goes unannounced. Still indexed\n// by the filtered position, which the keyboard counts through.\nconst sourceIndex = computed(() => new Map(allOptions.value.map((option, i) => [option, i])))\nconst optionId = (index: number) => {\n  const option = filtered.value[index]\n  return `${optionsId}-option-${option ? sourceIndex.value.get(option) : index}`\n}\n\n/**\n * A rendered option with its state worked out, once per row: `row` is what the option element\n * takes, `slot` what the `#option` slot receives, and both read the same two answers.\n */\ntype OptionRow = RenderedOption & {\n  row: { id: string; icon?: IconSource; active: boolean; selected: boolean; disabled?: boolean }\n  slot: { option: ComboboxOption; index: number; active: boolean; selected: boolean }\n}\ntype RowNode =\n  | OptionRow\n  | { kind: 'group'; key: string; label: string; options: OptionRow[] }\n  | { kind: 'separator'; key: string }\n\nfunction withState(entry: RenderedOption): OptionRow {\n  const active = entry.index === activeIndex.value\n  const selected = selectedSet.value.has(entry.option.value)\n  return {\n    ...entry,\n    row: {\n      id: optionId(entry.index),\n      icon: entry.option.icon,\n      active,\n      selected,\n      disabled: entry.option.disabled,\n    },\n    slot: { option: entry.option, index: entry.index, active, selected },\n  }\n}\n\n// A row has to be written twice in the template, once inside a block and once at the top level\n// of the panel, a Vue template having no way to declare a reusable fragment. Kept apart from\n// `rendered` on purpose: the highlight moves on every arrow key, and only this cheap pass over\n// the tree follows it; the filtering and the grouping stay where they are.\nconst rows = computed<RowNode[]>(() =>\n  rendered.value.map((node) => {\n    if (node.kind === 'option') return withState(node)\n    if (node.kind === 'group') return { ...node, options: node.options.map(withState) }\n    return node\n  }),\n)\n\nfunction hover(entry: RenderedOption) {\n  if (!entry.option.disabled) activeIndex.value = entry.index\n}\n\n// @a11y\n// Since the focus never leaves the field, the browser has no reason to scroll the highlighted\n// option into view; nothing was focused. It is brought into view by hand instead, and asked for\n// the SMALLEST movement that reveals it, so an option already visible does not make the panel\n// jump.\nwatch(\n  activeIndex,\n  (index) => {\n    if (index < 0) return\n    // Called optionally: the unit-test environment implements no scrolling at all.\n    document.getElementById(optionId(index))?.scrollIntoView?.({ block: 'nearest' })\n  },\n  { flush: 'post' },\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  const list = filtered.value\n  const selectedIdx = list.findIndex((o) => !o.disabled && selectedSet.value.has(o.value))\n  activeIndex.value = selectedIdx >= 0 ? selectedIdx : list.findIndex((o) => !o.disabled)\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// `./infiniteScroll`; 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  canLoad: () => open.value && props.hasMore && !props.loading,\n  loaded: () => allOptions.value,\n  onLoadMore: () => emit('load-more'),\n})\n\nfunction closePanel() {\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 = singleLabel()\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// @a11y\n/*\n * The focus must never leave the field, and this is what prevents it. Without cancelling the\n * press, clicking an option takes the focus off the field, the handler above closes the panel\n * before the click is turned into a selection, and choosing with the mouse stops working\n * entirely.\n */\nfunction onPanelMousedown(event: MouseEvent) {\n  event.preventDefault()\n}\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  optionCache.set(option.value, option)\n  if (!props.multiple) closedTerm.value = searchTerm.value\n  typed.value = false\n  if (props.multiple) {\n    model.value = toggleValue(selectedValues.value, option.value)\n    query.value = ''\n    inputRef.value?.focus()\n  } else {\n    model.value = option.value\n    // This path does not go through the closing function, so the pending search has to be\n    // cancelled here as well; otherwise the last keystroke would fire its request after the\n    // panel had closed. The paging lock goes for the same reason: a page still on its way when\n    // the panel shut would otherwise freeze it on the next opening.\n    cancelSearch()\n    infiniteScroll.reset()\n    // The label is taken from the option just chosen and not by reading the value back.\n    query.value = option.label\n    open.value = false\n    activeIndex.value = -1\n  }\n}\n\nfunction removeValue(value: ItemValue) {\n  if (!props.multiple || props.readonly) 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  activeIndex.value = open.value ? filtered.value.findIndex((o) => !o.disabled) : -1\n  emit('clear')\n}\n\n// @keyboard\nfunction move(delta: number) {\n  const list = filtered.value\n  if (list.length === 0) return\n  // From \"nothing highlighted\" the first step lands on an END of the list: starting at -1,\n  // a step back would stop on the second-to-last option.\n  let i = activeIndex.value < 0 && delta < 0 ? 0 : activeIndex.value\n  for (let step = 0; step < list.length; step++) {\n    i = (i + delta + list.length) % list.length\n    if (!list[i]?.disabled) break\n  }\n  activeIndex.value = i\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        :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          <span v-if=\"displayText\" class=\"v-combobox-text\">{{ displayText }}</span>\n          <!-- A box of its own beside the line rather than the end of it: the labels are what\n               the ellipsis cuts, and the count of what they do not show must survive it. -->\n          <span v-if=\"textDisplay && overflowCount > 0\" class=\"v-combobox-overflow\">\n            <slot\n              name=\"overflow\"\n              :count=\"overflowCount\"\n              :size=\"chipScale.size\"\n              :compact=\"chipScale.compact\"\n              >{{ resolvedOverflowText }}</slot\n            >\n          </span>\n          <template v-for=\"value in multiple && !textDisplay ? visibleValues : []\" :key=\"value\">\n            <slot\n              name=\"chip\"\n              :value=\"value\"\n              :option=\"optionOf(value)\"\n              :label=\"labelOf(value)\"\n              :remove=\"() => removeValue(value)\"\n              :size=\"chipScale.size\"\n              :compact=\"chipScale.compact\"\n            >\n              <VChip\n                tone=\"accent\"\n                :size=\"chipScale.size\"\n                :compact=\"chipScale.compact\"\n                :dismissible=\"!readonly && !resolvedDisabled\"\n                :dismiss-label=\"m.common.remove(labelOf(value))\"\n                :disabled=\"resolvedDisabled\"\n                @dismiss=\"removeValue(value)\"\n                >{{ labelOf(value) }}</VChip\n              >\n            </slot>\n          </template>\n          <!-- Not wrapped, unlike the text display's counter: a box around an inline-flex chip\n               opens a line box, whose strut makes the field taller than its chips. Neutral\n               and not dismissible, so it reads as a summary rather than one more value. -->\n          <slot\n            v-if=\"multiple && !textDisplay && overflowCount > 0\"\n            name=\"overflow\"\n            :count=\"overflowCount\"\n            :size=\"chipScale.size\"\n            :compact=\"chipScale.compact\"\n          >\n            <VChip\n              class=\"v-combobox-overflow-chip\"\n              tone=\"neutral\"\n              :size=\"chipScale.size\"\n              :compact=\"chipScale.compact\"\n              :disabled=\"resolvedDisabled\"\n              >{{ resolvedOverflowText }}</VChip\n            >\n          </slot>\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 v-if=\"loading || !hideExpandIcon\" #end>\n          <VSpinner v-if=\"loading\" class=\"v-combobox-spinner v-input-icon-end\" aria-hidden=\"true\" />\n          <VIcon\n            v-else\n            v-bind=\"iconProps(expandIcon)\"\n            class=\"v-combobox-chevron v-input-icon-end\"\n            aria-hidden=\"true\"\n          />\n        </template>\n      </VInput>\n    </div>\n\n    <!--\n      The panel itself carries both the listbox role and the scrolling. That single fact is what\n      the observer watching for the end of the list and the scrolling of the highlighted option\n      both rely on: inserting any wrapper between them breaks the two at once.\n    -->\n    <VPopover\n      :id=\"optionsId\"\n      v-model:open=\"open\"\n      mode=\"manual\"\n      anchor=\"--combobox-anchor\"\n      match-trigger\n      :placement=\"placement\"\n      role=\"listbox\"\n      class=\"v-combobox-panel v-control\"\n      :data-size=\"resolvedSize\"\n      :data-compact=\"resolvedCompact ? '' : undefined\"\n      :aria-multiselectable=\"multiple ? 'true' : undefined\"\n      @mousedown=\"onPanelMousedown\"\n    >\n      <!-- Blocks and separators exist for the eye alone: the keyboard counts through the\n           flat list of surviving options and therefore never encounters one. -->\n      <template v-for=\"node in rows\" :key=\"node.key\">\n        <VComboboxSeparator v-if=\"node.kind === 'separator'\" />\n\n        <VComboboxGroup v-else-if=\"node.kind === 'group'\" :label=\"node.label\">\n          <VComboboxOption\n            v-for=\"entry in node.options\"\n            :key=\"entry.key\"\n            v-bind=\"entry.row\"\n            @select=\"select(entry.option)\"\n            @pointermove=\"hover(entry)\"\n          >\n            <slot name=\"option\" v-bind=\"entry.slot\">{{ entry.option.label }}</slot>\n          </VComboboxOption>\n        </VComboboxGroup>\n\n        <VComboboxOption\n          v-else\n          v-bind=\"node.row\"\n          @select=\"select(node.option)\"\n          @pointermove=\"hover(node)\"\n        >\n          <slot name=\"option\" v-bind=\"node.slot\">{{ node.option.label }}</slot>\n        </VComboboxOption>\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\">{{ resolvedEmptyText }}</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    </VPopover>\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  /*\n   * The panel comes from VPopover, which brings the floating element, its open state, its\n   * anchoring, its placement and its surface. It also carries the shared size class, so the\n   * options and the state rows read their dimensions from it with no size table here.\n   */\n  .v-combobox-panel {\n    max-block-size: var(--vectis-control-size-combobox-list-max-block);\n    overflow: auto;\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-chevron,\n  .v-combobox-spinner {\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-combobox-chevron {\n    transition: rotate var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-combobox[data-open] .v-combobox-chevron {\n    rotate: 180deg;\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-text {\n    flex: 0 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-combobox:not([data-collapsed]) .v-combobox-text {\n    max-inline-size: 50%;\n  }\n\n  /* The \"+X\" after a line of text never shrinks: the line gives way instead. */\n  .v-combobox-overflow {\n    flex: none;\n    white-space: nowrap;\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * An unbroken line has the whole of its text as its min-content width, 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-combobox-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 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgFA,IAAM,KAAW,MAA8C,aAAa,GACtE,MAAe,MAAkD,eAAe,GA0JhF,IAAQ,GA4BR,IAAI,EAAY,GAChB,KAAoB,QAAe,EAAM,aAAa,EAAE,MAAM,SAAS,KAAK,GAC5E,KAAqB,QAAe,EAAM,cAAc,EAAE,MAAM,SAAS,KAAK,GAC9E,IAAsB,QAAe,EAAM,eAAe,EAAE,MAAM,OAAO,OAAO,GAEhF,IAAO,IAqCP,EACJ,MAAM,GACN,SAAS,GACT,UAAU,MACR,EAAgB,GALN,GAAO,IAAe,IAKT,CAAK,GAM1B,IAAY,QAAe,GAAa,EAAa,OAAO,EAAgB,KAAK,CAAC,GAGlF,IAAQ,GAAoC,GAAA,YAAgB,GAM5D,EAAE,eAAW,eAAW,uBAAmB,GAAa,GAIxD,KAAiB,IAAmB,MAAU,EAAK,oBAAoB,CAAK,CAAC,GAG7E,KAAa,SAAgB;GAAE,GAAG,GAAe;GAAO,GAAG;EAAe,EAAE,GAE5E,KAAS,EAAwB,IAAI,GACrC,IAAW,EAAwC,IAAI,GAIvD,IAAY,GAAM,GAElB,IAAO,EAAI,EAAK,GAChB,IAAQ,EAAI,EAAE,GACd,IAAc,EAAI,EAAE,GACpB,KAAU,EAAI,EAAK,GAKnB,IAAQ,EAAI,EAAK,GAEjB,IAAiB,QACjB,EAAM,WAAiB,MAAM,QAAQ,EAAM,KAAK,IAAI,EAAM,QAAQ,CAAC,IAIhE,CAAC,MAAM,QAAQ,EAAM,KAAK,KAAK,EAAM,UAAU,KAAK,CAAC,EAAM,KAAK,IAAI,CAAC,CAC7E,GAKK,IAAa,QACjB,EAAM,QAAQ,SAAS,MACjB,GAAY,CAAI,IAAU,CAAC,IACxB,EAAQ,CAAI,IAAI,EAAK,UAAU,CAAC,CAAI,CAC5C,CACH,GAOM,IAAc,mBAAS,IAAI,IAA+B,CAAC;EACjE,SAAkB;GAChB,IAAM,IAAS,IAAI,IAAI,EAAe,KAAK;GAC3C,KAAK,IAAM,KAAU,EAAW,OAC9B,AAAI,EAAO,IAAI,EAAO,KAAK,KAAG,EAAY,IAAI,EAAO,OAAO,CAAM;GAKpE,KAAK,IAAM,KAAS,EAAY,KAAK,GAAG,AAAK,EAAO,IAAI,CAAK,KAAG,EAAY,OAAO,CAAK;EAC1F,CAAC;EAQD,IAAM,KAAiB,QAAe;GACpC,IAAM,oBAAM,IAAI,IAA+B;GAC/C,KAAK,IAAM,KAAU,EAAW,OAAO,AAAK,EAAI,IAAI,EAAO,KAAK,KAAG,EAAI,IAAI,EAAO,OAAO,CAAM;GAC/F,OAAO;EACT,CAAC,GAMK,KAAc,QAAe,IAAI,IAAI,EAAe,KAAK,CAAC;EAOhE,SAAS,GAAS,GAAkB;GAClC,OAAO,GAAe,MAAM,IAAI,CAAK,KAAK,EAAY,IAAI,CAAK;EACjE;EAEA,SAAS,EAAQ,GAAkB;GACjC,OAAO,GAAS,CAAK,CAAC,EAAE,SAAS,OAAO,CAAK;EAC/C;EAOA,IAAM,KAAe,GAAsC,GACrD,MAAqB,MAA2B,GAAa,GAAQ,EAAO,KAAK,GAMjF,IAAa,QAAgB,EAAM,QAAQ,EAAM,MAAM,KAAK,IAAI,EAAG,GAMnE,IAAa,EAAmB,IAAI,GAIpC,IAAW,QAAe;GAC9B,IAAM,IAAU,EAAM,QAChB,IAAO,EAAW;GACxB,IAAI,MAAY,IAAO,OAAO;GAC9B,IAAM,IAAI,EAAW,SAAS,EAAW;GACzC,IAAI,CAAC,GAAG,OAAO;GACf,IAAI,OAAO,KAAY,YAAY,OAAO,EAAK,QAAQ,MAAM,EAAQ,GAAG,CAAC,CAAC;GAC1E,IAAM,IAAS,GAAc,CAAC;GAC9B,OAAO,EAAK,QAAQ,MAAM,GAAkB,CAAC,CAAC,CAAC,SAAS,CAAM,CAAC;EACjE,CAAC,GAOK,KAAoB,QACpB,CAAC,EAAK,SAAS,EAAS,MAAM,SAAS,IAAU,KAC9C,EAAM,UAAU,EAAoB,QAAQ,GAAkB,KACtE,GAaK,KAAW,QAA+B;GAC9C,IAAM,IAAO,IAAI,IAAI,EAAS,KAAK,GAC/B,IAAO,GAEL,KAAW,GAAwB,MAClC,EAAK,IAAI,CAAM,IACb;IAAE,MAAM;IAAU,KAAK,UAAU;IAAO;IAAQ,OAAO;GAAO,IADvC,MAI1B,IAAwB,CAAC,GAI3B,IAAkC;GAEtC,KAAK,IAAM,CAAC,GAAG,MAAS,EAAM,QAAQ,QAAQ,GAAG;IAC/C,IAAI,GAAY,CAAI,GAAG;KACrB,AAAI,EAAM,SAAS,MAAG,IAAmB,OAAO;KAChD;IACF;IAEA,IAAI;IACJ,IAAI,EAAQ,CAAI,GAAG;KACjB,IAAM,IAAU,EAAK,QAClB,KAAK,GAAQ,MAAM,EAAQ,GAAQ,GAAG,EAAE,GAAG,GAAG,CAAC,CAAA,CAC/C,QAAQ,MAAmC,MAAU,IAAI;KAG5D,IACE,EAAQ,SAAS,IAAI;MAAE,MAAM;MAAS,KAAK,SAAS;MAAK,OAAO,EAAK;MAAO;KAAQ,IAAI;IAC5F,OACE,IAAO,EAAQ,GAAM,OAAO,CAAC,CAAC;IAE3B,MAED,MAAqB,SACvB,EAAM,KAAK;KAAE,MAAM;KAAa,KAAK;IAAiB,CAAC,GACvD,IAAmB,OAErB,EAAM,KAAK,CAAI;GACjB;GAEA,OAAO;EACT,CAAC,GAMK,KAAc,GAAS,GAIzB,IAEE,IAAe,GAAY;EAEjC,SAAS,GAAW,GAAc,IAAY,IAAO;GACnD,EAAa,GACT,MAAS,MACb,GAAY,YACJ;IAGC,EAAK,UACV,KAAc,GACd,EAAK,UAAU,CAAI;GACrB,GACA,IAAY,IAAI,EAAM,cACxB;EACF;EAkBA,AAhBA,EAAM,IAAa,MAAS;GACrB,EAAK,UAOV,EAAY,QAAQ,EAAS,MAAM,WAAW,MAAM,CAAC,EAAE,QAAQ,GAI/D,GAAe,QAAQ,GACvB,GAAW,CAAI;EACjB,CAAC,GAED,EAAM,IAAW,MAAS;GAKnB,EAAK,UACN,EAAY,QAAQ,KAAK,EAAY,SAAS,EAAK,YACrD,EAAY,QAAQ,EAAK,WAAW,MAAM,CAAC,EAAE,QAAQ;EAEzD,CAAC;EAKD,SAAS,IAAc;GACrB,IAAM,IAAQ,EAAM,WAAW,KAAA,IAAY,EAAe,MAAM;GAChE,OAAO,MAAU,KAAA,IAAY,KAAK,EAAQ,CAAK;EACjD;EAMA,AAJA,EAAM,QAAQ,EAAY,GAI1B,EACE,CAAC,GAAY,CAAc,SACrB;GACA,EAAM,YAAY,EAAK,SAAS,EAAM,UAC1C,EAAM,QAAQ,EAAY;EAC5B,GACA,EAAE,OAAO,OAAO,CAClB;EAGA,IAAM,IAAc,QAAe,EAAM,YAAY,EAAM,YAAY,MAAM,GAIvE,KAAY,QAEd,EAAM,YACN,EAAe,MAAM,SAAS,MAC7B,CAAC,GAAQ,SAAU,EAAY,SAAS,EAAM,SACnD,GAMM,IAAgB,QACpB,GAAU,SAAS,EAAM,MAAM,EAAe,MAAM,MAAM,GAAG,EAAM,GAAG,IAAI,EAAe,KAC3F,GACM,IAAgB,QAAe,EAAe,MAAM,SAAS,EAAc,MAAM,MAAM,GAIvF,KAAuB,QAC3B,EAAM,eAAe,EAAM,aAAa,EAAc,KAAK,IAAI,IAAI,EAAc,OACnF,GAIM,KAAc,QAClB,EAAY,QAAQ,EAAc,MAAM,IAAI,CAAO,CAAC,CAAC,KAAK,IAAI,IAAI,EACpE,GAIM,KAAe,QACnB,GACE,GACA,EAAiB,OACjB,EAAe,MAAM,SAAS,KAAK,EAAM,MAAM,SAAS,CAC1D,CACF,GAQM,KAAc,QAAe,IAAI,IAAI,EAAW,MAAM,KAAK,GAAQ,MAAM,CAAC,GAAQ,CAAC,CAAC,CAAC,CAAC,GACtF,MAAY,MAAkB;GAClC,IAAM,IAAS,EAAS,MAAM;GAC9B,OAAO,GAAG,EAAU,UAAU,IAAS,GAAY,MAAM,IAAI,CAAM,IAAI;EACzE;EAeA,SAAS,GAAU,GAAkC;GACnD,IAAM,IAAS,EAAM,UAAU,EAAY,OACrC,IAAW,GAAY,MAAM,IAAI,EAAM,OAAO,KAAK;GACzD,OAAO;IACL,GAAG;IACH,KAAK;KACH,IAAI,GAAS,EAAM,KAAK;KACxB,MAAM,EAAM,OAAO;KACnB;KACA;KACA,UAAU,EAAM,OAAO;IACzB;IACA,MAAM;KAAE,QAAQ,EAAM;KAAQ,OAAO,EAAM;KAAO;KAAQ;IAAS;GACrE;EACF;EAMA,IAAM,KAAO,QACX,GAAS,MAAM,KAAK,MACd,EAAK,SAAS,WAAiB,GAAU,CAAI,IAC7C,EAAK,SAAS,UAAgB;GAAE,GAAG;GAAM,SAAS,EAAK,QAAQ,IAAI,EAAS;EAAE,IAC3E,CACR,CACH;EAEA,SAAS,GAAM,GAAuB;GACpC,AAAK,EAAM,OAAO,aAAU,EAAY,QAAQ,EAAM;EACxD;EAOA,EACE,IACC,MAAU;GACL,IAAQ,KAEZ,SAAS,eAAe,GAAS,CAAK,CAAC,CAAC,EAAE,iBAAiB,EAAE,OAAO,UAAU,CAAC;EACjF,GACA,EAAE,OAAO,OAAO,CAClB;EAKA,SAAS,IAAY;GACnB,IAAI,EAAiB,SAAS,EAAM,YAAY,EAAK,OAAO;GAE5D,AADA,EAAW,QAAQ,MACnB,EAAK,QAAQ;GACb,IAAM,IAAO,EAAS,OAChB,IAAc,EAAK,WAAW,MAAM,CAAC,EAAE,YAAY,GAAY,MAAM,IAAI,EAAE,KAAK,CAAC;GAIvF,AAHA,EAAY,QAAQ,KAAe,IAAI,IAAc,EAAK,WAAW,MAAM,CAAC,EAAE,QAAQ,GAGtF,GAAW,EAAW,OAAO,EAAI;EACnC;EAKA,IAAM,KAAa,EAAwB,IAAI,GAEzC,KAAiB,GAAkB;GACvC;GACA,eAAe,EAAK,SAAS,EAAM,WAAW,CAAC,EAAM;GACrD,cAAc,EAAW;GACzB,kBAAkB,EAAK,WAAW;EACpC,CAAC;EAED,SAAS,IAAa;GACf,EAAK,UACV,EAAa,GAGb,GAAe,MAAM,GACrB,EAAW,QAAQ,EAAW,OAC9B,EAAK,QAAQ,IACb,EAAY,QAAQ,IACpB,EAAM,QAAQ,IACd,EAAM,QAAQ,EAAY;EAC5B;EAEA,QACQ,EAAM,YAAY,EAAiB,QACxC,MAAW;GACV,AAAI,KAAQ,EAAW;EACzB,CACF;EAMA,IAAM,KAAa,GAAmB,IAAQ,CAAU;EASxD,SAAS,GAAiB,GAAmB;GAC3C,EAAM,eAAe;EACvB;EAGA,SAAS,KAAU;GAEjB,AADA,EAAM,QAAQ,IACd,EAAU;EACZ;EAOA,SAAS,KAAc;GACrB,AAAI,CAAC,EAAM,YAAY,EAAM,SAAO,EAAS,OAAO,OAAO;EAC7D;EAEA,SAAS,KAAU;GAEjB,AADA,GAAQ,QAAQ,IAChB,GAAY;EACd;EAGA,IAAM,MAAa,MACjB,EAAM,kBAAkB,WACxB,EAAM,OAAO,QAAQ,0CAA0C,MAAM;EAQvE,SAAS,GAAmB,GAAmB;GAC7C,AAAI,GAAU,CAAK,KAAG,EAAM,eAAe;EAC7C;EAMA,SAAS,GAAe,GAAmB;GACrC,OAAiB,OAErB;QADA,EAAS,OAAO,MAAM,GAClB,EAAK,SAAS,GAAU,CAAK,GAAG;KAClC,EAAW;KACX;IACF;IAIA,AAHA,EAAU,GAGV,GAAY;GAJZ;EAKF;EAEA,SAAS,GAAO,GAAwB;GAClC,EAAO,YAAY,EAAM,YAAY,EAAiB,UAG1D,EAAY,IAAI,EAAO,OAAO,CAAM,GAC/B,EAAM,aAAU,EAAW,QAAQ,EAAW,QACnD,EAAM,QAAQ,IACV,EAAM,YACR,EAAM,QAAQ,GAAY,EAAe,OAAO,EAAO,KAAK,GAC5D,EAAM,QAAQ,IACd,EAAS,OAAO,MAAM,MAEtB,EAAM,QAAQ,EAAO,OAKrB,EAAa,GACb,GAAe,MAAM,GAErB,EAAM,QAAQ,EAAO,OACrB,EAAK,QAAQ,IACb,EAAY,QAAQ;EAExB;EAEA,SAAS,GAAY,GAAkB;GACjC,CAAC,EAAM,YAAY,EAAM,aAC7B,EAAM,QAAQ,EAAe,MAAM,QAAQ,MAAM,MAAM,CAAK,GAC5D,EAAS,OAAO,MAAM;EACxB;EAMA,SAAS,KAAU;GAMjB,AALA,EAAM,QAAQ,EAAM,WAAW,CAAC,IAAI,IACpC,EAAM,QAAQ,IAGd,EAAY,QAAQ,EAAK,QAAQ,EAAS,MAAM,WAAW,MAAM,CAAC,EAAE,QAAQ,IAAI,IAChF,EAAK,OAAO;EACd;EAGA,SAAS,GAAK,GAAe;GAC3B,IAAM,IAAO,EAAS;GACtB,IAAI,EAAK,WAAW,GAAG;GAGvB,IAAI,IAAI,EAAY,QAAQ,KAAK,IAAQ,IAAI,IAAI,EAAY;GAC7D,KAAK,IAAI,IAAO,GAAG,IAAO,EAAK,WAC7B,KAAK,IAAI,IAAQ,EAAK,UAAU,EAAK,QAChC,EAAK,EAAE,EAAE,WAFuB;GAIvC,EAAY,QAAQ;EACtB;EAMA,SAAS,GAAU,GAAsB;GACvC,QAAQ,EAAM,KAAd;IACE,KAAK;KAEH,AADA,EAAM,eAAe,GACjB,EAAK,QAAO,GAAK,CAAC,IACjB,EAAU;KACf;IACF,KAAK;KAEH,AADA,EAAM,eAAe,GACjB,EAAK,QAAO,GAAK,EAAE,IAClB,EAAU;KACf;IACF,KAAK;KACH,IAAI,EAAK,SAAS,EAAY,SAAS,GAAG;MACxC,EAAM,eAAe;MACrB,IAAM,IAAS,EAAS,MAAM,EAAY;MAC1C,AAAI,KAAQ,GAAO,CAAM;KAC3B;KACA;IACF,KAAK;KAGH,AAAI,EAAK,UACP,EAAM,eAAe,GACrB,EAAW;KAEb;IACF,KAAK;KACH,EAAW;KACX;IACF,KAAK;KACH,IAAI,EAAM,YAAY,CAAC,EAAM,OAAO;MAClC,IAAM,IAAO,EAAe,MAAM,GAAG,EAAE;MACvC,AAAI,MAAS,KAAA,KAAW,GAAY,CAAI;KAC1C;KACA;GACJ;EACF;SAEA,GAAa;GAEX,QAAQ,MAA2B,EAAS,OAAO,MAAM,CAAO;GAEhE,cAAc,EAAS,OAAO,OAAO;GAErC,IAAI,QAAe,EAAS,OAAO,MAAM,IAAI;EAC/C,CAAC,mBAIC,EAyMM,OAAA;YAxMA;GAAJ,KAAI;GACJ,OAAK,GAAA,CAAC,cACE,EAAA,EAAA,CAAS,CAAA;GAChB,OAAK,GAAA,CAAA,EAAA,iBAAsB,EAAA,MAAU,OAAM,GAAI,EAAA,EAAA,CAAS,CAAA;GACxD,aAAW,EAAA,CAAA;GACX,gBAAc,EAAA,CAAA,IAAe,KAAQ,KAAA;GACrC,iBAAe,EAAA,WAAQ,KAAQ,KAAA;GAC/B,kBAAgB,GAAA,QAAS,KAAQ,KAAA;GACjC,aAAW,EAAA,QAAI,KAAQ,KAAA;GACvB,YAAQ,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,CAAA,GAAA,CAAA;;GAEX,EAiHM,OAAA;IAjHD,OAAM;IAAsB,aAAW;IAAqB,SAAO;OAOtE,EAyGS,IAzGT,EAyGS;aAxGH;IAAJ,KAAI;gBACK,EAAA;6CAAK,QAAA;IACd,OAAK,CAAC,sBAAoB,EAAA,iBACC,EAAA,YAAQ,CAAK,EAAA,MAAW,CAAA;IACnD,MAAK;IACL,iBAAc;IACd,qBAAkB;IACjB,iBAAe,EAAA;IACf,iBAAe,EAAA,CAAA;MACR,GAAA,OAAU;IACjB,OAAO,EAAA;IACP,MAAM,EAAA;IACN,MAAM,EAAA,CAAA;IACN,SAAS,EAAA,CAAA;IACT,SAAS,EAAA;IACT,UAAU,EAAA,CAAA;IACV,UAAU,EAAA;IACV,cAAY,EAAA;IACZ,oBAAkB,EAAA;IAClB,WAAW,EAAA;IACX,iBAAe,GAAA;IACf,eAAa,GAAA;IACb,aAAa,EAAA,MAAe,WAAM,IAAS,EAAA,cAAc,KAAA;IACzD,yBAAuB,EAAA,SAAQ,EAAA,SAAW,IAAQ,GAAS,EAAA,KAAW,IAAI,KAAA;IACnE;IACE;IACF;IACP,QAAI,AAAA,EAAA,QAAA,MAAE,GAAA,QAAO;IACN;;IAEQ,EAAA,YAAYA,EAAAA,OAAO,QAAA;WAAQ;iBACgC;MAA7D,GAAA,SAAA,EAAA,GAAZ,EAAyE,QAAzE,IAAyE,EAArB,GAAA,KAAW,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;MAGnD,EAAA,SAAe,EAAA,QAAa,KAAA,EAAA,GAAxC,EAQO,QARP,IAQO,CAPL,EAMC,EAAA,QAAA,YAAA;OAJE,OAAO,EAAA;OACP,MAAM,EAAA,MAAU;OAChB,SAAS,EAAA,MAAU;eAErB,CAAA,EAAA,EADK,GAAA,KAAoB,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;cAG5B,EAqBW,GAAA,MAAA,EArBe,EAAA,YAAQ,CAAK,EAAA,QAAc,EAAA,QAAa,CAAA,IAAjD,MACf,EAmBO,EAAA,QAAA,QAAA;OAjBG;OACP,QAAQ,GAAS,CAAK;OACtB,OAAO,EAAQ,CAAK;OACpB,cAAc,GAAY,CAAK;OAC/B,MAAM,EAAA,MAAU;OAChB,SAAS,EAAA,MAAU;eAYf,CAVL,EASC,IAAA;OARC,MAAK;OACJ,MAAM,EAAA,MAAU;OAChB,SAAS,EAAA,MAAU;OACnB,aAAW,CAAG,EAAA,YAAQ,CAAK,EAAA,CAAA;OAC3B,iBAAe,EAAA,CAAA,CAAC,CAAC,OAAO,OAAO,EAAQ,CAAK,CAAA;OAC5C,UAAU,EAAA,CAAA;OACV,YAAO,MAAE,GAAY,CAAK;;wBACN,CAAA,EAAA,EAAjB,EAAQ,CAAK,CAAA,GAAA,CAAA,CAAA,CAAA;;;;;;;;;mBAlBwD,CAAK;MA0B5E,EAAA,YAAQ,CAAK,EAAA,SAAe,EAAA,QAAa,IADjD,EAeO,EAAA,QAAA,YAAA;OAZJ,OAAO,EAAA;OACP,MAAM,EAAA,MAAU;OAChB,SAAS,EAAA,MAAU;eAUf,CARL,EAOC,IAAA;OANC,OAAM;OACN,MAAK;OACJ,MAAM,EAAA,MAAU;OAChB,SAAS,EAAA,MAAU;OACnB,UAAU,EAAA,CAAA;;wBACgB,CAAA,EAAA,EAAvB,GAAA,KAAoB,GAAA,CAAA,CAAA,CAAA;;;;;;;MAG5B,EAAqB,EAAA,QAAA,OAAA;;;;IAGPA,EAAAA,OAAM,eAAA;WAAgB;iBAAmC,CAAzB,EAAyB,EAAA,QAAA,WAAA,CAAA,CAAA;;;IAQzD,EAAA,WAAO,CAAK,EAAA,iBAAA;WAAiB;iBAC+C,CAA1E,EAAA,WAAA,EAAA,GAAhB,EAA0F,GAAA;;MAAjE,OAAM;MAAsC,eAAY;iBACjF,EAKE,GALF,EAKE,EAAA,KAAA,EAAA,GAHQ,EAAA,CAAA,CAAS,CAAC,EAAA,UAAU,GAAA;MAC5B,OAAM;MACN,eAAY;;;;;;;;;;;;;;;;;;;;;;;;GAWpB,EAgEW,GAAA;IA/DR,IAAI,EAAA,CAAA;IACG,MAAM,EAAA;uCAAI,QAAA;IAClB,MAAK;IACL,QAAO;IACP,iBAAA;IACC,WAAW,EAAA;IACZ,MAAK;IACL,OAAM;IACL,aAAW,EAAA,CAAA;IACX,gBAAc,EAAA,CAAA,IAAe,KAAQ,KAAA;IACrC,wBAAsB,EAAA,WAAQ,SAAY,KAAA;IAC1C,aAAW;;qBAIkB;aAA9B,EAuBW,GAAA,MAAA,EAvBc,GAAA,QAAR,wBAAoB,EAAK,IAAA,GAAA,CACd,EAAK,SAAI,eAAA,EAAA,GAAnC,EAAuD,IAAA,EAAA,KAAA,EAAA,CAAA,KAE5B,EAAK,SAAI,WAAA,EAAA,GAApC,EAUiB,IAAA;;MAVkC,OAAO,EAAK;;uBAE9B,EAAA,EAAA,EAAA,GAD/B,EAQkB,GAAA,MAAA,EAPA,EAAK,UAAd,YADT,EAQkB,IARlB,EAQkB,EANf,KAAK,EAAM,IAAA,GAAA,EAAA,SAAA,GAAA,GACJ,EAAM,KAAG;OAChB,WAAM,MAAE,GAAO,EAAM,MAAM;OAC3B,gBAAW,MAAE,GAAM,CAAK;;wBAE8C,CAAvE,EAAuE,EAAA,QAAA,UAAvE,EAAuE,EAAA,SAAA,GAAA,GAA3C,EAAM,IAAI,SAAiC,CAAA,EAAA,EAA5B,EAAM,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;;kCAIjE,EAOkB,IAPlB,EAOkB;;;QALR,EAAK,KAAG;MACf,WAAM,MAAE,GAAO,EAAK,MAAM;MAC1B,gBAAW,MAAE,GAAM,CAAI;;uBAE6C,CAArE,EAAqE,EAAA,QAAA,UAArE,EAAqE,EAAA,SAAA,GAAA,GAAzC,EAAK,IAAI,SAAgC,CAAA,EAAA,EAA3B,EAAK,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;KASpD,EAAA,WAAW,EAAA,MAAS,WAAM,KAAA,EAAA,GAArC,EAKM,OALN,IAKM,CAJJ,EAGO,EAAA,QAAA,WAAA,CAAA,SAAA,CAFL,EAAyC,GAAA,EAA9B,OAAO,EAAA,MAAmB,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,GACrC,EAAsC,QAAA,MAAA,EAA7B,EAAA,KAAmB,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAGhB,EAAA,MAAS,WAAM,KAAA,EAAA,GAA/B,EAEM,OAFN,IAEM,CADJ,EAAqE,EAAA,QAAA,SAAA,EAAjD,OAAO,EAAA,MAAU,SAAgC,CAAA,EAAA,EAA3B,GAAA,KAAiB,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;KAQlD,EAAA,WAAA,EAAA,GAAX,EAEM,OAAA;;eAFkB;MAAJ,KAAI;MAAa,OAAM;MAAkB,eAAY;SACvD,EAAA,WAAA,EAAA,GAAhB,EAAwD,GAAA;;MAA9B,OAAO,EAAA;;;;;;;;;;;;GAMrC,EAA4E,QAA5E,IAA4E,EAA3B,GAAA,KAAiB,GAAA,CAAA"}
+{"version":3,"file":"VCombobox.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"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' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | '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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"}

package/dist/components/VCommandPalette/VCommandPalette.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-command-palette{--command-palette-width:var(--vectis-control-size-command-palette-width);--command-palette-inset:calc(var(--vectis-space-2) + var(--vectis-space-4));inline-size:var(--command-palette-width);max-inline-size:calc(100dvi - 2 * var(--vectis-space-4));max-block-size:calc(100dvb - var(--vectis-control-size-command-palette-offset) - var(--vectis-space-4));margin:var(--vectis-control-size-command-palette-offset) auto auto;border-radius:var(--vectis-radius-overlay);background:var(--vectis-color-surface-overlay);color:var(--vectis-color-text);box-shadow:var(--vectis-shadow-xl);font-family:var(--vectis-text-family);border:none;flex-direction:column;padding:0;display:flex;overflow:hidden}.v-command-palette:not([open]){display:none}.v-command-palette:focus-visible{outline:none}.v-command-palette-search{align-items:center;gap:var(--vectis-space-2);min-block-size:var(--vectis-control-height-xl);padding-inline:var(--command-palette-inset);border-block-end:1px solid var(--vectis-color-border);--vectis-icon-size:var(--vectis-icon-size-md);flex:none;display:flex}.v-command-palette-search:has(.v-command-palette-input:focus-visible){border-block-end-color:var(--vectis-focus-ring-color)}.v-command-palette-search-icon,.v-command-palette-spinner{color:var(--vectis-color-text-muted);flex:none}.v-command-palette-input{min-inline-size:0;color:inherit;font-family:inherit;font-size:var(--vectis-text-body-lg-size);font-weight:var(--vectis-text-body-lg-weight);line-height:var(--vectis-text-body-lg-leading);background:0 0;border:none;outline:none;flex:1;padding:0}.v-command-palette-input::placeholder{color:var(--vectis-color-text-subtle);opacity:1}.v-command-palette-list{gap:var(--vectis-space-1);min-block-size:0;max-block-size:var(--vectis-control-size-command-palette-list-max-block);overscroll-behavior:contain;padding:var(--vectis-space-2);scroll-padding-block:var(--vectis-space-2);flex-direction:column;flex:auto;display:flex;overflow-y:auto}.v-command-palette-group{gap:var(--vectis-space-1);flex-direction:column;flex:none;display:flex}.v-command-palette-list>.v-command-palette-item{flex:none}.v-command-palette-group-label{min-block-size:var(--control-height);padding-inline:var(--control-padding-inline);font-size:var(--vectis-text-overline-size);font-weight:var(--vectis-text-overline-weight);letter-spacing:var(--vectis-text-overline-tracking);color:var(--vectis-color-text-muted);align-items:center;display:flex}.v-separator.v-command-palette-separator{margin-inline:calc(-1 * var(--vectis-space-2));flex:none}.v-command-palette-state{justify-content:center;align-items:center;gap:var(--control-gap);min-block-size:var(--control-height);padding:var(--vectis-space-1) var(--control-padding-inline);font-size:var(--control-font-size);color:var(--vectis-color-text-muted);flex:none;display:flex}.v-command-palette-state>.v-command-palette-empty[data-size]{padding-block:var(--vectis-space-4);flex:1;padding-inline:0}.v-command-palette-footer{padding:var(--vectis-space-2) var(--command-palette-inset);border-block-start:1px solid var(--vectis-color-border);font-size:var(--vectis-text-caption-size);line-height:var(--vectis-text-caption-leading);color:var(--vectis-color-text-muted);flex:none;align-items:center;display:flex}.v-command-palette-hints{gap:var(--vectis-space-1) var(--vectis-space-4);flex-wrap:wrap;display:flex}.v-command-palette-hint{align-items:center;gap:var(--vectis-space-1);display:inline-flex}.v-command-palette{transition:opacity var(--vectis-duration-base) var(--vectis-ease-default), transform var(--vectis-duration-base) var(--vectis-ease-default)}@starting-style{.v-command-palette[open]{opacity:0;transform:scale(.97)}}.v-command-palette::backdrop{background:var(--vectis-color-backdrop);transition:opacity var(--vectis-duration-base) var(--vectis-ease-default)}@starting-style{.v-command-palette[open]::backdrop{opacity:0}}@media (prefers-reduced-motion:reduce){.v-command-palette,.v-command-palette::backdrop{transition:none}}@media (forced-colors:active){.v-command-palette{outline:1px solid canvastext}}}

package/dist/components/VCommandPalette/VCommandPalette.d.ts

@@ -0,0 +1,163 @@
+import { IconSource } from '../VIcon/types.js';
+/** One thing the palette can do. */
+export interface CommandPaletteCommand {
+    /** What it is called on screen, and what the search matches. */
+    label: string;
+    /** A second line under the label. The search does not read it. */
+    description?: string;
+    /** Other words the search matches without showing them: synonyms, a former name. */
+    keywords?: string[];
+    /** An icon before the label: an icon name, or an explicit render. */
+    icon?: IconSource;
+    /**
+     * A shortcut shown at the end of the row, written as for VHotkeys (`mod+shift+p`). The palette
+     * displays it and does not listen for it.
+     */
+    shortcut?: string;
+    /**
+     * Makes the command a link: choosing it follows the address, and a modified or middle click
+     * opens it elsewhere, natively.
+     */
+    href?: string;
+    /** Shows the command without allowing it to be chosen. */
+    disabled?: boolean;
+    /** Leaves the palette open once the command is chosen. */
+    keepOpen?: boolean;
+    /** An identifier of your own. The palette does not read it; it comes back with `select`. */
+    id?: string | number;
+}
+/** A named block of commands. A block none of whose commands match is hidden, name included. */
+export interface CommandPaletteGroup {
+    label: string;
+    commands: CommandPaletteCommand[];
+}
+/** A rule between two blocks. One the search leaves at an end or against another is not drawn. */
+export interface CommandPaletteSeparator {
+    separator: true;
+}
+/** Anything the list may hold: a command, a named block, or a separator. */
+export type CommandPaletteItem = CommandPaletteCommand | CommandPaletteGroup | CommandPaletteSeparator;
+/**
+ * How the list is narrowed as one types: by the label and the keywords, not at all (when the
+ * commands arrive already filtered by a server), or by a rule of your own.
+ */
+export type CommandPaletteFilter = boolean | ((command: CommandPaletteCommand, query: string) => boolean);
+/** What the `#item` slot receives. */
+export interface CommandPaletteItemSlotProps {
+    command: CommandPaletteCommand;
+    active: boolean;
+}
+/** What the `#empty` slot receives. */
+export interface CommandPaletteEmptySlotProps {
+    query: string;
+}
+/** What the trigger has to carry: the click that opens the palette, and the fact that it does. */
+export type CommandPaletteTriggerProps = {
+    onClick: () => void;
+    'aria-haspopup': 'dialog';
+    /** The `shortcut`, spelled for assistive technology, when there is one. */
+    'aria-keyshortcuts'?: string;
+};
+interface CommandPaletteProps {
+    /** What the palette offers: commands, named blocks of commands, and separators. */
+    items: CommandPaletteItem[];
+    /**
+     * A shortcut that opens the palette from anywhere in the page and closes it again, written as
+     * for VHotkeys: `mod+k` is ⌘K on a Mac and Ctrl+K elsewhere. Left out, nothing is listened for.
+     */
+    shortcut?: string;
+    /** How the list is narrowed as one types. */
+    filter?: CommandPaletteFilter;
+    /**
+     * How long to wait before reporting the search with `search`, in milliseconds. Zero reports
+     * it at once.
+     */
+    searchDebounce?: number;
+    /** Says that commands are being loaded: a spinner shows in the search field. */
+    loading?: boolean;
+    /** What is announced while loading with nothing to show yet. */
+    loadingText?: string;
+    /** What the palette says when nothing matches. */
+    emptyText?: string;
+    /** What the search field says while empty. */
+    placeholder?: string;
+    /** The accessible name of the palette. */
+    label?: string;
+    /** The accessible name of its search field. */
+    searchLabel?: string;
+    /** Leaves out the footer listing the keys. */
+    hideFooter?: boolean;
+    /**
+     * How wide the palette is: a number is read as pixels, a string as any CSS length. Left out,
+     * it takes the `--vectis-control-size-command-palette-width` token, 640px by default.
+     */
+    width?: number | string;
+}
+type __VLS_Props = CommandPaletteProps;
+type __VLS_Slots = {
+    /**
+     * The button that opens the palette. Bind the `triggerProps` it receives onto it. It stays
+     * rendered always, unlike the palette itself.
+     */
+    trigger?(props: {
+        triggerProps: CommandPaletteTriggerProps;
+    }): unknown;
+    /** The label and description of a row. The icon and the shortcut stay in place. */
+    item?(props: CommandPaletteItemSlotProps): unknown;
+    /** What the palette shows when nothing matches. It receives the term that was searched. */
+    empty?(props: CommandPaletteEmptySlotProps): unknown;
+    /** What the palette shows while loading with nothing to show yet. */
+    loading?(): unknown;
+    /** Replaces the footer listing the keys. */
+    footer?(): unknown;
+};
+type __VLS_ModelProps = {
+    /** Whether the palette is showing. */
+    'open'?: boolean;
+    /** What is typed in the search field. It is emptied each time the palette closes. */
+    'query'?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    /**
+     * Opens the palette, exactly as setting `open` does. The promise settles once the element has
+     * been rendered.
+     */
+    show: () => Promise<void>;
+    /** Closes the palette. */
+    close: () => void;
+    /** Moves the focus to the search field, while the palette is open. */
+    focus: (options?: FocusOptions) => void | undefined;
+    /** The `<dialog>` element. It is null while closed: each opening builds a fresh one. */
+    el: import('vue').Ref<HTMLDialogElement | null, HTMLDialogElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (command: CommandPaletteCommand, event: MouseEvent) => any;
+    search: (query: string) => any;
+    "update:open": (value: boolean) => any;
+    "update:query": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((command: CommandPaletteCommand, event: MouseEvent) => any) | undefined;
+    onSearch?: ((query: string) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:query"?: ((value: string) => any) | undefined;
+}>, {
+    loading: boolean;
+    label: string;
+    searchLabel: string;
+    placeholder: string;
+    filter: CommandPaletteFilter;
+    width: number | string;
+    loadingText: string;
+    emptyText: string;
+    searchDebounce: number;
+    shortcut: string;
+    hideFooter: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VCommandPalette/VCommandPalette.js

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

package/dist/components/VCommandPalette/VCommandPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VCommandPalette.js","names":[],"sources":["../../../src/components/VCommandPalette/VCommandPalette.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * A native modal `<dialog>` holding a search field and the listbox it filters. The focus stays\n * in the field, which points at the active command through aria-activedescendant: no native\n * element pairs free text with a list the arrows walk through.\n */\n\nimport { computed, onMounted, ref, useId, watch } from 'vue'\n\nimport VEmptyState from '../VEmptyState/VEmptyState.vue'\nimport VHotkeys from '../VHotkeys/VHotkeys.vue'\nimport {\n  DEFAULT_PLATFORM,\n  ariaKeyshortcuts,\n  detectPlatform,\n  parseHotkeys,\n} from '../VHotkeys/platform'\nimport type { HotkeysPlatform } from '../VHotkeys/platform'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { search as searchIcon } from '../VIcon/icons/search'\nimport { search_off as searchOffIcon } from '../VIcon/icons/search_off'\nimport type { IconSource } from '../VIcon/types'\nimport VSeparator from '../VSeparator/VSeparator.vue'\nimport VSpinner from '../VSpinner/VSpinner.vue'\nimport VCommandPaletteItem from './VCommandPaletteItem.vue'\nimport { useHotkeyListener } from '../../composables/useHotkeyListener'\nimport { useModalDialog } from '../../composables/useModalDialog'\nimport { useDebouncedSearch } from '../../composables/useDebouncedSearch'\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\nimport { createNormalizedCache, normalizeText } from '../../utils/text'\n\n/** One thing the palette can do. */\nexport interface CommandPaletteCommand {\n  /** What it is called on screen, and what the search matches. */\n  label: string\n  /** A second line under the label. The search does not read it. */\n  description?: string\n  /** Other words the search matches without showing them: synonyms, a former name. */\n  keywords?: string[]\n  /** An icon before the label: an icon name, or an explicit render. */\n  icon?: IconSource\n  /**\n   * A shortcut shown at the end of the row, written as for VHotkeys (`mod+shift+p`). The palette\n   * displays it and does not listen for it.\n   */\n  shortcut?: string\n  /**\n   * Makes the command a link: choosing it follows the address, and a modified or middle click\n   * opens it elsewhere, natively.\n   */\n  href?: string\n  /** Shows the command without allowing it to be chosen. */\n  disabled?: boolean\n  /** Leaves the palette open once the command is chosen. */\n  keepOpen?: boolean\n  /** An identifier of your own. The palette does not read it; it comes back with `select`. */\n  id?: string | number\n}\n\n/** A named block of commands. A block none of whose commands match is hidden, name included. */\nexport interface CommandPaletteGroup {\n  label: string\n  commands: CommandPaletteCommand[]\n}\n\n/** A rule between two blocks. One the search leaves at an end or against another is not drawn. */\nexport interface CommandPaletteSeparator {\n  separator: true\n}\n\n/** Anything the list may hold: a command, a named block, or a separator. */\nexport type CommandPaletteItem =\n  CommandPaletteCommand | CommandPaletteGroup | CommandPaletteSeparator\n\n/**\n * How the list is narrowed as one types: by the label and the keywords, not at all (when the\n * commands arrive already filtered by a server), or by a rule of your own.\n */\nexport type CommandPaletteFilter =\n  boolean | ((command: CommandPaletteCommand, query: string) => boolean)\n\n/** What the `#item` slot receives. */\nexport interface CommandPaletteItemSlotProps {\n  command: CommandPaletteCommand\n  active: boolean\n}\n\n/** What the `#empty` slot receives. */\nexport interface CommandPaletteEmptySlotProps {\n  query: string\n}\n\n/** What the trigger has to carry: the click that opens the palette, and the fact that it does. */\nexport type CommandPaletteTriggerProps = {\n  onClick: () => void\n  'aria-haspopup': 'dialog'\n  /** The `shortcut`, spelled for assistive technology, when there is one. */\n  'aria-keyshortcuts'?: string\n}\n\nconst isGroup = (item: CommandPaletteItem): item is CommandPaletteGroup => 'commands' in item\nconst isSeparator = (item: CommandPaletteItem): item is CommandPaletteSeparator =>\n  'separator' in item\n\ninterface CommandPaletteProps {\n  /** What the palette offers: commands, named blocks of commands, and separators. */\n  items: CommandPaletteItem[]\n  /**\n   * A shortcut that opens the palette from anywhere in the page and closes it again, written as\n   * for VHotkeys: `mod+k` is ⌘K on a Mac and Ctrl+K elsewhere. Left out, nothing is listened for.\n   */\n  shortcut?: string\n  /** How the list is narrowed as one types. */\n  filter?: CommandPaletteFilter\n  /**\n   * How long to wait before reporting the search with `search`, in milliseconds. Zero reports\n   * it at once.\n   */\n  searchDebounce?: number\n  /** Says that commands are being loaded: a spinner shows in the search field. */\n  loading?: boolean\n  /** What is announced while loading with nothing to show yet. */\n  loadingText?: string\n  /** What the palette says when nothing matches. */\n  emptyText?: string\n  /** What the search field says while empty. */\n  placeholder?: string\n  /** The accessible name of the palette. */\n  label?: string\n  /** The accessible name of its search field. */\n  searchLabel?: string\n  /** Leaves out the footer listing the keys. */\n  hideFooter?: boolean\n  /**\n   * How wide the palette is: a number is read as pixels, a string as any CSS length. Left out,\n   * it takes the `--vectis-control-size-command-palette-width` token, 640px by default.\n   */\n  width?: number | string\n}\n\nconst props = withDefaults(defineProps<CommandPaletteProps>(), {\n  shortcut: undefined,\n  filter: true,\n  searchDebounce: 250,\n  loading: false,\n  loadingText: undefined,\n  emptyText: undefined,\n  placeholder: undefined,\n  label: undefined,\n  searchLabel: undefined,\n  hideFooter: false,\n  width: undefined,\n})\n\nconst emit = defineEmits<{\n  /**\n   * A command was chosen, by a click or by Enter. Call `event.preventDefault()` to stop a link\n   * being followed, to hand its address to a router instead.\n   */\n  select: [command: CommandPaletteCommand, event: MouseEvent]\n  /** What is being searched for, to be sent to the source. It is also reported on opening. */\n  search: [query: string]\n}>()\n\ndefineSlots<{\n  /**\n   * The button that opens the palette. Bind the `triggerProps` it receives onto it. It stays\n   * rendered always, unlike the palette itself.\n   */\n  trigger?(props: { triggerProps: CommandPaletteTriggerProps }): unknown\n  /** The label and description of a row. The icon and the shortcut stay in place. */\n  item?(props: CommandPaletteItemSlotProps): unknown\n  /** What the palette shows when nothing matches. It receives the term that was searched. */\n  empty?(props: CommandPaletteEmptySlotProps): unknown\n  /** What the palette shows while loading with nothing to show yet. */\n  loading?(): unknown\n  /** Replaces the footer listing the keys. */\n  footer?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst m = useMessages()\nconst resolvedLabel = computed(() => props.label ?? m.value.commandPalette.label)\nconst resolvedSearchLabel = computed(() => props.searchLabel ?? m.value.commandPalette.searchLabel)\nconst resolvedPlaceholder = computed(() => props.placeholder ?? m.value.commandPalette.placeholder)\nconst resolvedEmptyText = computed(() => props.emptyText ?? m.value.commandPalette.empty)\nconst resolvedLoadingText = computed(() => props.loadingText ?? m.value.common.loading)\n\n/** Whether the palette is showing. */\nconst open = defineModel<boolean>('open', { default: false })\n/** What is typed in the search field. It is emptied each time the palette closes. */\nconst query = defineModel<string>('query', { default: '' })\n\nconst {\n  dialogEl,\n  rendered,\n  rootAttrs,\n  show,\n  close,\n  onClose,\n  onCancel,\n  onPointerdown,\n  onBackdropClick,\n} = useModalDialog(open, { persistentBackdrop: () => false, persistentEscape: () => false })\n\nconst inputEl = ref<HTMLInputElement | null>(null)\nconst listId = useId()\nconst activeIndex = ref(-1)\n\n// @ssr\n// The server renders `mod` as Ctrl; the platform is read once mounted.\nconst platform = ref<HotkeysPlatform>(DEFAULT_PLATFORM)\nonMounted(() => {\n  platform.value = detectPlatform()\n})\n\nconst shortcutTokens = computed(() => (props.shortcut ? parseHotkeys(props.shortcut) : []))\n\nuseHotkeyListener({\n  tokens: () => shortcutTokens.value,\n  platform: () => platform.value,\n  enabled: () => !!props.shortcut,\n  // While open, the focus is held inside the palette: the field being typed in is its own\n  // search field, and the shortcut closes it again.\n  allowInInput: () => open.value,\n  onTrigger: () => (open.value ? close() : void show()),\n})\n\nconst triggerProps = computed<CommandPaletteTriggerProps>(() => ({\n  onClick: show,\n  'aria-haspopup': 'dialog',\n  'aria-keyshortcuts': props.shortcut\n    ? ariaKeyshortcuts(shortcutTokens.value, platform.value)\n    : undefined,\n}))\n\n/** A command, with its place among all of them: the same command may be listed twice. */\ntype Entry = { command: CommandPaletteCommand; source: number }\n\n// The blocks unwrapped and the separators dropped: this flat list is what the filter, the\n// keyboard and the option ids count through.\nconst allEntries = computed<Entry[]>(() =>\n  props.items\n    .flatMap((item) => {\n      if (isSeparator(item)) return []\n      return isGroup(item) ? item.commands : [item]\n    })\n    .map((command, source) => ({ command, source })),\n)\n\nconst normalizedOf = createNormalizedCache<CommandPaletteCommand>()\n\nfunction matches(command: CommandPaletteCommand, needle: string) {\n  if (normalizedOf(command, command.label).includes(needle)) return true\n  return (\n    command.keywords?.some((word, i) =>\n      normalizedOf(command, word, `keyword${i}`).includes(needle),\n    ) ?? false\n  )\n}\n\nconst term = computed(() => query.value.trim())\n\nconst filtered = computed(() => {\n  const list = allEntries.value\n  const matcher = props.filter\n  if (matcher === false || !term.value) return list\n  if (typeof matcher === 'function') return list.filter((e) => matcher(e.command, term.value))\n  const needle = normalizeText(term.value)\n  return list.filter((e) => matches(e.command, needle))\n})\n\nconst firstEnabled = () => filtered.value.findIndex((e) => !e.command.disabled)\n\n// @a11y\n// An option's id follows its place among ALL the commands, not its place in the filtered list:\n// a screen reader announces the active option when aria-activedescendant changes, and a\n// positional id would stay the same while the filter slides another command under it. Nor is\n// it keyed by the command object, which a block of recent commands lists a second time.\nconst optionId = (source: number) => `${listId}-${source}`\nconst activeId = computed(() => {\n  const entry = filtered.value[activeIndex.value]\n  return entry ? optionId(entry.source) : undefined\n})\n\ntype Row = {\n  kind: 'command'\n  key: string\n  command: CommandPaletteCommand\n  index: number\n  source: number\n}\ntype Node =\n  | Row\n  | { kind: 'group'; key: string; label: string; labelId: string; rows: Row[] }\n  | { kind: 'separator'; key: string }\n\nconst nodes = computed<Node[]>(() => {\n  const kept = new Set(filtered.value.map((e) => e.source))\n  let source = 0\n  let next = 0\n  // Walked in the order `allEntries` was built, so `source` names the same entry.\n  const rowOf = (command: CommandPaletteCommand, key: string): Row | null => {\n    const at = source++\n    return kept.has(at) ? { kind: 'command', key, command, index: next++, source: at } : null\n  }\n\n  const result: Node[] = []\n  // A separator is held back until something comes after it, and dropped when nothing came\n  // before: one rule for the three ways a search can strand it.\n  let pendingSeparator: string | null = null\n  for (const [i, item] of props.items.entries()) {\n    if (isSeparator(item)) {\n      if (result.length > 0) pendingSeparator = `separator-${i}`\n      continue\n    }\n    let node: Node | null\n    if (isGroup(item)) {\n      const rows = item.commands\n        .map((command, j) => rowOf(command, `${i}.${j}`))\n        .filter((row): row is Row => row !== null)\n      node = rows.length\n        ? {\n            kind: 'group',\n            key: `group-${i}`,\n            label: item.label,\n            labelId: `${listId}-group-${i}`,\n            rows,\n          }\n        : null\n    } else {\n      node = rowOf(item, String(i))\n    }\n    if (!node) continue\n    if (pendingSeparator !== null) {\n      result.push({ kind: 'separator', key: pendingSeparator })\n      pendingSeparator = null\n    }\n    result.push(node)\n  }\n  return result\n})\n\n// @a11y\n/** What is announced about the list: that nothing matches, or that something is loading. */\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: (value) => emit('search', value),\n})\n\nwatch(open, (value) => {\n  if (value) {\n    activeIndex.value = firstEnabled()\n    emitSearch(term.value, true)\n  } else {\n    cancelSearch()\n    query.value = ''\n    activeIndex.value = -1\n  }\n})\n\nwatch(term, (value) => {\n  if (!open.value) return\n  activeIndex.value = firstEnabled()\n  emitSearch(value)\n})\n\n// Commands arriving from a source replace the list without the term changing: a highlight that\n// fell out of it, or that never existed, moves to the first command, or Enter would do nothing.\nwatch(filtered, (list) => {\n  if (!open.value) return\n  if (activeIndex.value < 0 || activeIndex.value >= list.length) activeIndex.value = firstEnabled()\n})\n\n// @a11y\n// The focus never moves, so nothing scrolls the active row into view by itself.\nwatch(\n  activeId,\n  () => {\n    if (!activeId.value) return\n    // Optional call: jsdom implements no scrolling.\n    document.getElementById(activeId.value)?.scrollIntoView?.({ block: 'nearest' })\n  },\n  { flush: 'post' },\n)\n\n/** What a row draws: the command's own fields, and none of the ones meant for the palette. */\nconst rowProps = ({\n  label,\n  description,\n  icon,\n  shortcut,\n  href,\n  disabled,\n}: CommandPaletteCommand) => ({\n  label,\n  description,\n  icon,\n  shortcut,\n  href,\n  disabled,\n})\n\nfunction hover(row: Row) {\n  if (!row.command.disabled) activeIndex.value = row.index\n}\n\nfunction choose(command: CommandPaletteCommand, event: MouseEvent) {\n  emit('select', command, event)\n  // A link opened elsewhere leaves this page as it was, the palette included.\n  const elsewhere = !!command.href && (event.ctrlKey || event.metaKey || event.shiftKey)\n  if (!command.keepOpen && !elsewhere) open.value = false\n}\n\n// @keyboard\nfunction move(delta: number) {\n  const list = filtered.value\n  if (list.length === 0) return\n  // From nothing highlighted, a step back lands on the last command rather than the one before.\n  let i = activeIndex.value < 0 && delta < 0 ? 0 : activeIndex.value\n  for (let step = 0; step < list.length; step++) {\n    i = (i + delta + list.length) % list.length\n    if (!list[i]?.command.disabled) break\n  }\n  activeIndex.value = i\n}\n\n// @keyboard\n// Home and End stay with the field, where they move the caret. Escape is the dialog's own\n// close request.\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.isComposing) return\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault()\n      move(1)\n      break\n    case 'ArrowUp':\n      event.preventDefault()\n      move(-1)\n      break\n    case 'Enter': {\n      if (!activeId.value) return\n      event.preventDefault()\n      // Clicking the row itself is what lets a link be followed natively.\n      document.getElementById(activeId.value)?.click()\n      break\n    }\n  }\n}\n\ndefineExpose({\n  /**\n   * Opens the palette, exactly as setting `open` does. The promise settles once the element has\n   * been rendered.\n   */\n  show,\n  /** Closes the palette. */\n  close,\n  /** Moves the focus to the search field, while the palette is open. */\n  focus: (options?: FocusOptions) => inputEl.value?.focus(options),\n  /** The `<dialog>` element. It is null while closed: each opening builds a fresh one. */\n  el: dialogEl,\n})\n</script>\n\n<template>\n  <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n  <dialog\n    v-if=\"rendered\"\n    ref=\"dialogEl\"\n    :aria-label=\"resolvedLabel\"\n    v-bind=\"rootAttrs\"\n    class=\"v-command-palette\"\n    :style=\"{ '--command-palette-width': cssSize(width) }\"\n    @close=\"onClose\"\n    @cancel=\"onCancel\"\n    @pointerdown=\"onPointerdown\"\n    @click=\"onBackdropClick\"\n  >\n    <div class=\"v-command-palette-search\">\n      <VIcon :name=\"searchIcon\" class=\"v-command-palette-search-icon\" />\n      <!-- `autofocus` is what the native dialog focusing steps look for when it opens. -->\n      <!-- eslint-disable vuejs-accessibility/no-autofocus -->\n      <input\n        ref=\"inputEl\"\n        v-model=\"query\"\n        class=\"v-command-palette-input\"\n        type=\"text\"\n        role=\"combobox\"\n        autofocus\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        aria-autocomplete=\"list\"\n        aria-expanded=\"true\"\n        :aria-controls=\"listId\"\n        :aria-activedescendant=\"activeId\"\n        :aria-label=\"resolvedSearchLabel\"\n        :placeholder=\"resolvedPlaceholder\"\n        @keydown=\"onKeydown\"\n      />\n      <!-- eslint-enable vuejs-accessibility/no-autofocus -->\n      <VSpinner v-if=\"loading\" class=\"v-command-palette-spinner\" aria-hidden=\"true\" />\n    </div>\n\n    <!-- A press on a row would take the focus out of the field; it is cancelled so the click\n         that follows still chooses, and the field keeps typing. -->\n    <div\n      :id=\"listId\"\n      role=\"listbox\"\n      :aria-label=\"resolvedLabel\"\n      class=\"v-command-palette-list v-control\"\n      data-size=\"md\"\n      @mousedown.prevent\n    >\n      <template v-for=\"node in nodes\" :key=\"node.key\">\n        <VSeparator\n          v-if=\"node.kind === 'separator'\"\n          role=\"presentation\"\n          class=\"v-command-palette-separator\"\n        />\n        <div\n          v-else-if=\"node.kind === 'group'\"\n          role=\"group\"\n          class=\"v-command-palette-group\"\n          :aria-labelledby=\"node.labelId\"\n        >\n          <span :id=\"node.labelId\" class=\"v-command-palette-group-label\">{{ node.label }}</span>\n          <VCommandPaletteItem\n            v-for=\"row in node.rows\"\n            :id=\"optionId(row.source)\"\n            :key=\"row.key\"\n            v-bind=\"rowProps(row.command)\"\n            :active=\"row.index === activeIndex\"\n            @select=\"(event) => choose(row.command, event)\"\n            @pointermove=\"hover(row)\"\n          >\n            <template v-if=\"$slots.item\" #default>\n              <slot name=\"item\" :command=\"row.command\" :active=\"row.index === activeIndex\" />\n            </template>\n          </VCommandPaletteItem>\n        </div>\n        <VCommandPaletteItem\n          v-else\n          :id=\"optionId(node.source)\"\n          v-bind=\"rowProps(node.command)\"\n          :active=\"node.index === activeIndex\"\n          @select=\"(event) => choose(node.command, event)\"\n          @pointermove=\"hover(node)\"\n        >\n          <template v-if=\"$slots.item\" #default>\n            <slot name=\"item\" :command=\"node.command\" :active=\"node.index === activeIndex\" />\n          </template>\n        </VCommandPaletteItem>\n      </template>\n\n      <!-- Loading is checked before emptiness, so a list waiting for an answer never claims\n           there is none. Both are spoken by the status below instead. -->\n      <div\n        v-if=\"loading && filtered.length === 0\"\n        class=\"v-command-palette-state\"\n        aria-hidden=\"true\"\n      >\n        <slot name=\"loading\">\n          <VSpinner />\n          <span>{{ resolvedLoadingText }}</span>\n        </slot>\n      </div>\n      <div v-else-if=\"filtered.length === 0\" class=\"v-command-palette-state\" aria-hidden=\"true\">\n        <slot name=\"empty\" :query=\"term\">\n          <VEmptyState\n            size=\"sm\"\n            class=\"v-command-palette-empty\"\n            :icon=\"searchOffIcon\"\n            :title=\"resolvedEmptyText\"\n          />\n        </slot>\n      </div>\n    </div>\n\n    <footer v-if=\"!hideFooter\" class=\"v-command-palette-footer\">\n      <slot name=\"footer\">\n        <!-- A reminder for the eye: the combobox already tells assistive technology how it\n             works, and every cap would otherwise be read as \"Keyboard shortcut\". -->\n        <span class=\"v-command-palette-hints\" aria-hidden=\"true\">\n          <span class=\"v-command-palette-hint\">\n            <VHotkeys keys=\"up\" />\n            <VHotkeys keys=\"down\" />\n            {{ m.commandPalette.navigate }}\n          </span>\n          <span class=\"v-command-palette-hint\">\n            <VHotkeys keys=\"enter\" />\n            {{ m.commandPalette.choose }}\n          </span>\n          <span class=\"v-command-palette-hint\">\n            <VHotkeys keys=\"esc\" />\n            {{ m.common.close }}\n          </span>\n        </span>\n      </slot>\n    </footer>\n\n    <!-- Outside the listbox, which may hold only options and groups. -->\n    <span class=\"v-visually-hidden\" role=\"status\">{{ stateAnnouncement }}</span>\n  </dialog>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-command-palette {\n    /*\n     * Declared on the element rather than as a fallback: a custom property inherits, and a\n     * palette opened inside a wider dialog would otherwise take that dialog's width.\n     */\n    --command-palette-width: var(--vectis-control-size-command-palette-width);\n    /*\n     * Where a row's icon and a block's name start: the list padding plus the inline padding of\n     * a medium row. The field and the footer use it to line up with them.\n     */\n    --command-palette-inset: calc(var(--vectis-space-2) + var(--vectis-space-4));\n    inline-size: var(--command-palette-width);\n    max-inline-size: calc(100dvi - 2 * var(--vectis-space-4));\n    max-block-size: calc(\n      100dvb - var(--vectis-control-size-command-palette-offset) - var(--vectis-space-4)\n    );\n    /*\n     * Pinned near the top rather than centred: the list grows and shrinks with every keystroke,\n     * and a centred palette would move the field being typed in.\n     */\n    margin: var(--vectis-control-size-command-palette-offset) auto auto;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    padding: 0;\n    border: none;\n    border-radius: var(--vectis-radius-overlay);\n    background: var(--vectis-color-surface-overlay);\n    color: var(--vectis-color-text);\n    box-shadow: var(--vectis-shadow-xl);\n    font-family: var(--vectis-text-family);\n  }\n\n  /* The display above beats the browser's own rule hiding a closed dialog. */\n  .v-command-palette:not([open]) {\n    display: none;\n  }\n\n  .v-command-palette:focus-visible {\n    outline: none;\n  }\n\n  .v-command-palette-search {\n    flex: none;\n    display: flex;\n    align-items: center;\n    /* The gap of a medium row, so the typed text starts where the labels do. */\n    gap: var(--vectis-space-2);\n    min-block-size: var(--vectis-control-height-xl);\n    padding-inline: var(--command-palette-inset);\n    border-block-end: 1px solid var(--vectis-color-border);\n    /* The magnifier matches the larger text of the field, through VIcon's context size. */\n    --vectis-icon-size: var(--vectis-icon-size-md);\n  }\n\n  /* The field draws no ring of its own inside the palette: its edge takes the focus colour. */\n  .v-command-palette-search:has(.v-command-palette-input:focus-visible) {\n    border-block-end-color: var(--vectis-focus-ring-color);\n  }\n\n  .v-command-palette-search-icon,\n  .v-command-palette-spinner {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-command-palette-input {\n    flex: 1;\n    min-inline-size: 0;\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: inherit;\n    font-family: inherit;\n    font-size: var(--vectis-text-body-lg-size);\n    font-weight: var(--vectis-text-body-lg-weight);\n    line-height: var(--vectis-text-body-lg-leading);\n    outline: none;\n  }\n\n  .v-command-palette-input::placeholder {\n    color: var(--vectis-color-text-subtle);\n    opacity: 1;\n  }\n\n  /*\n   * The zero minimum is what lets the list shrink inside a short viewport and scroll, a flex\n   * item otherwise refusing to go below its content.\n   */\n  .v-command-palette-list {\n    flex: 1 1 auto;\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    min-block-size: 0;\n    max-block-size: var(--vectis-control-size-command-palette-list-max-block);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    padding: var(--vectis-space-2);\n    scroll-padding-block: var(--vectis-space-2);\n  }\n\n  /* Blocks and rows refuse to shrink: the list is a bounded column that scrolls instead. */\n  .v-command-palette-group {\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n  }\n\n  .v-command-palette-list > .v-command-palette-item {\n    flex: none;\n  }\n\n  .v-command-palette-group-label {\n    display: flex;\n    align-items: center;\n    min-block-size: var(--control-height);\n    padding-inline: var(--control-padding-inline);\n    font-size: var(--vectis-text-overline-size);\n    font-weight: var(--vectis-text-overline-weight);\n    letter-spacing: var(--vectis-text-overline-tracking);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* Compounded with `.v-separator`, whose own sheet sets the margin and may load after this one. */\n  .v-separator.v-command-palette-separator {\n    flex: none;\n    margin-inline: calc(-1 * var(--vectis-space-2));\n  }\n\n  .v-command-palette-state {\n    display: flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n    gap: var(--control-gap);\n    min-block-size: 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  /* `[data-size]` lifts the selector above VEmptyState's size rules, whose sheet may load after. */\n  .v-command-palette-state > .v-command-palette-empty[data-size] {\n    flex: 1;\n    padding-block: var(--vectis-space-4);\n    padding-inline: 0;\n  }\n\n  .v-command-palette-footer {\n    flex: none;\n    display: flex;\n    align-items: center;\n    padding: var(--vectis-space-2) var(--command-palette-inset);\n    border-block-start: 1px solid var(--vectis-color-border);\n    font-size: var(--vectis-text-caption-size);\n    line-height: var(--vectis-text-caption-leading);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-command-palette-hints {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-1) var(--vectis-space-4);\n  }\n\n  .v-command-palette-hint {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n  }\n\n  .v-command-palette {\n    transition:\n      opacity var(--vectis-duration-base) var(--vectis-ease-default),\n      transform var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  @starting-style {\n    .v-command-palette[open] {\n      opacity: 0;\n      transform: scale(0.97);\n    }\n  }\n\n  .v-command-palette::backdrop {\n    background: var(--vectis-color-backdrop);\n    transition: opacity var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  @starting-style {\n    .v-command-palette[open]::backdrop {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-command-palette,\n    .v-command-palette::backdrop {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .v-command-palette {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}