vectis-ui 0.13.0 → 0.14.0

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

@@ -1 +1 @@
-{"version":3,"file":"VPagination.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VPagination/VPagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @core\n/**\n * Native buttons activate pages. JavaScript builds bounded page windows and provides roving\n * keyboard navigation.\n */\nimport { computed, h, nextTick, ref } from 'vue'\nimport type { FunctionalComponent } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VButtonGroup from '../VButton/VButtonGroup.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { chevron_left as chevronLeftIcon } from '../VIcon/icons/chevron_left'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport { first_page as firstPageIcon } from '../VIcon/icons/first_page'\nimport { last_page as lastPageIcon } from '../VIcon/icons/last_page'\nimport { more_horiz as moreHorizIcon } from '../VIcon/icons/more_horiz'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\n\nimport { arrowNavigate, navigableItems } from '../../utils/arrowNav'\nimport { clamp } from '../../utils/number'\nimport { resolveMatcher } from '../../utils/matcher'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\n/** How the pages that are not the current one are drawn. */\nexport type PaginationItemVariant = 'ghost' | 'outline'\n\n/** How the current page is drawn. */\nexport type PaginationSelectedVariant = 'solid' | 'soft' | 'ghost'\n\n/** The colour of the current page. */\nexport type PaginationTone = 'accent' | 'neutral' | 'danger'\n\n/** The height of the pills, from the scale every control shares. */\nexport type PaginationSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\n/** Where the row sits in the width it is given. */\nexport type PaginationAlign = 'start' | 'center' | 'end'\n\n/** Whether the previous and next controls are rendered, and what they show. */\nexport type PaginationControls = false | 'icon' | 'text' | 'both'\n\n/**\n * Which pages cannot be reached, given either as a list of page numbers or as a function\n * answering that question for a page.\n */\nexport type PaginationMatcher = number[] | ((page: number) => boolean)\n\ninterface PaginationProps {\n  /**\n   * How many pages there are in all. It is 1 by default, which renders a single page: the\n   * real count almost always has to be given.\n   */\n  length?: number\n  /**\n   * How many slots to render, ellipses counted among them, so the row keeps exactly the same\n   * width whichever page is current. Below 5, the row drops the bounds and the ellipses and\n   * shows that many consecutive pages around the current one. At 0, no page is rendered and the\n   * controls alone remain. Left out, every page is rendered.\n   */\n  totalVisible?: number\n\n  /**\n   * Separates the buttons instead of joining them into one segmented control. It is the\n   * word VButtonGroup and VToggle use for the same question, in the same direction.\n   */\n  detached?: boolean\n  /**\n   * Draws a line between the joined buttons, so the row reads as segments rather than as one\n   * frame, on the terms of VButtonGroup's own `bordered`. It has no effect under `detached`.\n   */\n  bordered?: boolean\n  /**\n   * How the pages OTHER than the current one, and the controls, are drawn. It is named for the\n   * ITEMS because that is what it paints: on VTabs and VDataTable `variant` names the\n   * decoration of the frame instead.\n   */\n  itemVariant?: PaginationItemVariant\n  /**\n   * How the current page is drawn, in the row's tone: filled, tinted, or the colour of its\n   * text alone. The same choice as VToggle's `selectedVariant`.\n   */\n  selectedVariant?: PaginationSelectedVariant\n  /** The colour the current page takes. The other pages and the controls stay neutral. */\n  tone?: PaginationTone\n  /** The height of the buttons, from the scale shared by every control. */\n  size?: PaginationSize\n  /** Takes 4px off the height of every button. */\n  compact?: boolean\n  /** Raises the row off the page, on the terms of VButton's own `elevated`. */\n  elevated?: boolean\n  /** Where the row sits in the width it is given. */\n  align?: PaginationAlign\n\n  /**\n   * The previous and next buttons on either side of the pages: what they show, or `false` to\n   * leave them out.\n   */\n  controls?: PaginationControls\n  /** The icon of the previous control: an icon name, or an explicit render. */\n  prevIcon?: IconSource\n  /** The icon of the next control: an icon name, or an explicit render. */\n  nextIcon?: IconSource\n  /**\n   * The wording of the previous control, used both as its visible text and as what\n   * screen readers announce. It falls back to the design system dictionary.\n   */\n  prevText?: string\n  /**\n   * The wording of the next control, used both as its visible text and as what screen\n   * readers announce. It falls back to the design system dictionary.\n   */\n  nextText?: string\n  /**\n   * Adds first and last page controls outside the previous and next ones, drawn the way\n   * `controls` draws those. It has no effect when `controls` is `false`.\n   */\n  edgeControls?: boolean\n  /** The icon of the first page control: an icon name, or an explicit render. */\n  firstIcon?: IconSource\n  /** The icon of the last page control: an icon name, or an explicit render. */\n  lastIcon?: IconSource\n  /**\n   * The wording of the first page control, used both as its visible text and as what\n   * screen readers announce. It falls back to the design system dictionary.\n   */\n  firstText?: string\n  /**\n   * The wording of the last page control, used both as its visible text and as what\n   * screen readers announce. It falls back to the design system dictionary.\n   */\n  lastText?: string\n\n  /** Makes the whole component unusable. */\n  disabled?: boolean\n  /**\n   * Which pages cannot be reached, as a list or as a function. The previous and next\n   * controls step OVER them rather than stopping at one.\n   */\n  disabledPages?: PaginationMatcher\n\n  /**\n   * What screen readers announce for the navigation itself. It falls back to the\n   * design system dictionary.\n   */\n  label?: string\n  /**\n   * How a page is announced. A pill shows a bare number, which alone means nothing to\n   * a screen reader: this is what turns it into \"Page 3\". It falls back to the design\n   * system dictionary.\n   */\n  pageLabel?: (page: number) => string\n  /** The address of a page. Left out, they are buttons. */\n  href?: (page: number) => string\n}\n\nconst props = withDefaults(defineProps<PaginationProps>(), {\n  length: 1,\n  totalVisible: undefined,\n  detached: false,\n  bordered: false,\n  itemVariant: 'ghost',\n  selectedVariant: 'solid',\n  tone: 'accent',\n  size: 'md',\n  compact: false,\n  elevated: false,\n  align: 'start',\n  controls: 'icon',\n  prevIcon: () => chevronLeftIcon,\n  nextIcon: () => chevronRightIcon,\n  prevText: undefined,\n  nextText: undefined,\n  edgeControls: false,\n  firstIcon: () => firstPageIcon,\n  lastIcon: () => lastPageIcon,\n  firstText: undefined,\n  lastText: undefined,\n  disabled: false,\n  disabledPages: undefined,\n  label: undefined,\n  pageLabel: undefined,\n  href: undefined,\n})\n\nconst emit = defineEmits<{\n  /**\n   * A page was chosen from the row, a pill or a control, with the click that chose it. It comes\n   * before the model changes, so under `href` a single-page application calls\n   * `preventDefault()` on the event and hands the address to its router instead of letting the\n   * browser load it.\n   */\n  navigate: [page: number, event: MouseEvent]\n}>()\n\n// The prop wins over the dictionary, and above both, a consumer's own aria-label or\n// aria-labelledby still wins; that arbitration is what `useAriaLabel` is for.\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.pagination.label)\nconst resolvedPrevText = computed(() => props.prevText ?? m.value.pagination.previous)\nconst resolvedNextText = computed(() => props.nextText ?? m.value.pagination.next)\nconst resolvedFirstText = computed(() => props.firstText ?? m.value.pagination.first)\nconst resolvedLastText = computed(() => props.lastText ?? m.value.pagination.last)\n\n/** The page being shown, counted from 1. It starts on the first. */\nconst page = defineModel<number>({ default: 1 })\n\n/** One slot in the row: either a page, or the ellipsis standing for those left out. */\ntype PaginationItem = { kind: 'page'; key: string; page: number } | { kind: 'gap'; key: string }\n\n// A length or a model that is not a whole number (`NaN` while a page size is still loading,\n// a computed `2.5`) is brought back to a page that exists, or no pill would ever match it.\nconst total = computed(() => Math.max(Math.trunc(props.length) || 1, 1))\nconst currentPage = computed(() => clamp(Math.round(page.value) || 1, 1, total.value))\n\nconst isPageDisabled = computed(() => resolveMatcher(props.disabledPages))\n\n// @a11y\n// A pill shows nothing but a number, which on its own tells a screen reader\n// nothing at all; this is what has it announced as \"Page 3\".\nfunction pageLabelFor(n: number): string {\n  return props.pageLabel ? props.pageLabel(n) : m.value.pagination.page(n)\n}\n\n/** Works out which slots the row holds. */\nconst items = computed<PaginationItem[]>(() => {\n  const count = total.value\n  const current = currentPage.value\n\n  const pageItem = (n: number): PaginationItem => ({ kind: 'page', key: `page-${n}`, page: n })\n  const pages = (from: number, to: number): PaginationItem[] => {\n    const out: PaginationItem[] = []\n    for (let n = from; n <= to; n++) out.push(pageItem(n))\n    return out\n  }\n  // Keyed by the side it stands on, never by the page it follows: there is at most one\n  // ellipsis per side, and the left one always comes after the first page while the right\n  // one always comes before the last. A key derived from the window would change on every\n  // navigation, so the right-hand ellipsis would be destroyed and rebuilt each time the\n  // window slid, for a node that never changes.\n  const gap = (side: 'start' | 'end'): PaginationItem => ({ kind: 'gap', key: `gap-${side}` })\n\n  // With no limit given, nothing is left out. At 0 the row holds the controls alone.\n  const limit = Math.trunc(props.totalVisible ?? count)\n  const visible = Number.isNaN(limit) ? count : Math.max(limit, 0)\n  if (visible === 0) return []\n  if (visible >= count) return pages(1, count)\n\n  // Below five slots there is no room for the first page, an ellipsis, the current page,\n  // another ellipsis and the last: the row is a plain window of consecutive pages, held\n  // against the bounds so it keeps the same number of slots.\n  if (visible < 5) {\n    const from = clamp(current - Math.floor((visible - 1) / 2), 1, count - visible + 1)\n    return pages(from, from + visible - 1)\n  }\n\n  const start = current - Math.floor((visible - 5) / 2)\n  const end = start + (visible - 5)\n\n  // The window is stretched to the bound instead, which both avoids that and keeps the number\n  // of slots exactly the same.\n  if (start <= 3) return [...pages(1, visible - 2), gap('end'), pageItem(count)]\n  if (end >= count - 2) return [pageItem(1), gap('start'), ...pages(count - visible + 3, count)]\n  return [pageItem(1), gap('start'), ...pages(start, end), gap('end'), pageItem(count)]\n})\n\n/**\n * Where a control leads: the nearest page in that direction that can actually be reached,\n * disabled ones being stepped over rather than stopped at. Answering `undefined` means there is\n * none left, which disables the control; and that single answer also covers being on the first\n * or the last page, with no separate test for the ends.\n */\nfunction step(direction: -1 | 1): number | undefined {\n  for (let n = currentPage.value + direction; n >= 1 && n <= total.value; n += direction) {\n    if (!isPageDisabled.value(n)) return n\n  }\n  return undefined\n}\n\n/**\n * Where a first or last control leads: the reachable page farthest in that direction. It is\n * `undefined` exactly when `step` is, so each edge control disables itself with its neighbour.\n */\nfunction leap(direction: -1 | 1): number | undefined {\n  const end = direction < 0 ? 1 : total.value\n  for (let n = end; n !== currentPage.value; n -= direction) {\n    if (!isPageDisabled.value(n)) return n\n  }\n  return undefined\n}\n\nconst firstTarget = computed(() => leap(-1))\nconst prevTarget = computed(() => step(-1))\nconst nextTarget = computed(() => step(1))\nconst lastTarget = computed(() => leap(1))\n\nfunction goTo(n: number | undefined) {\n  if (n === undefined) return\n  page.value = clamp(n, 1, total.value)\n}\n\n/** The address a pill or a control links to, or `undefined` when the row is made of buttons. */\nfunction hrefFor(n: number): string | undefined {\n  return props.href?.(n)\n}\n\n// @core\n/*\n * A link clicked with a modifier held (Ctrl or Cmd for a new tab, Shift for a window, Alt for a\n * download) opens somewhere ELSE: the page on screen stays where it is, so the model must not\n * move. The test the routers themselves make before taking a click over.\n */\nfunction opensElsewhere(event: MouseEvent): boolean {\n  return (\n    props.href !== undefined &&\n    (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)\n  )\n}\n\nfunction choose(event: MouseEvent, n: number | undefined) {\n  if (n === undefined || opensElsewhere(event)) return\n  emit('navigate', n, event)\n  goTo(n)\n}\n\nfunction isUnusable(el: HTMLElement): boolean {\n  return el.matches(':disabled, [aria-disabled=\"true\"]')\n}\n\n// @a11y\n/*\n * The previous and next controls disable themselves once no page is left in their direction,\n * and a focused button that becomes disabled hands the focus to <body>: a keyboard reader\n * pressing \"Next page\" on the second to last page would be sent back to the top of the document\n * by the next Tab. The focus goes to the page just reached instead, the current page being\n * always rendered. A row without pages hands it to the nearest control still usable, the one\n * before it first.\n */\nasync function goFromControl(event: MouseEvent, n: number | undefined) {\n  const control = event.currentTarget as HTMLElement\n  const hadFocus = control === document.activeElement\n  choose(event, n)\n  if (!hadFocus) return\n  await nextTick()\n  const nav = navEl.value\n  if (!nav || !isUnusable(control)) return\n  const current = nav.querySelector<HTMLElement>('[aria-current=\"page\"]')\n  if (current) return current.focus()\n  const usable = [...nav.querySelectorAll<HTMLElement>(':is(button, a[href]):not(:disabled)')]\n  const before = usable.filter(\n    (el) => control.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_PRECEDING,\n  )\n  ;(before.at(-1) ?? usable[0])?.focus()\n}\n\ntype ControlSide = 'first' | 'prev' | 'next' | 'last'\n\n/*\n * The four controls, written once: they differ only by their direction and reach, and template\n * blocks drifting apart on the next change is exactly what this avoids. A functional component\n * because they sit at either end of the row, with the pages in between, where a `v-for` over\n * descriptors could not put them.\n */\nconst PageControl: FunctionalComponent<{ side: ControlSide }> = ({ side }) => {\n  const { label, icon, target } = {\n    first: { label: resolvedFirstText.value, icon: props.firstIcon, target: firstTarget.value },\n    prev: { label: resolvedPrevText.value, icon: props.prevIcon, target: prevTarget.value },\n    next: { label: resolvedNextText.value, icon: props.nextIcon, target: nextTarget.value },\n    last: { label: resolvedLastText.value, icon: props.lastIcon, target: lastTarget.value },\n  }[side]\n  const disabled = props.disabled || target === undefined\n  const common = {\n    class: 'v-pagination-control',\n    'data-side': side,\n    variant: props.itemVariant,\n    disabled,\n    href: hrefFor(target ?? currentPage.value),\n    rel: props.href && !disabled ? side : undefined,\n    onClick: (event: MouseEvent) => goFromControl(event, target),\n  }\n  const glyph = () => h(VIcon, { ...iconProps(icon), mirrored: true })\n  if (props.controls === 'icon') return h(VIconButton, { ...common, label }, glyph)\n  const backward = side === 'first' || side === 'prev'\n  return h(\n    VButton,\n    { ...common, tone: 'neutral' },\n    {\n      ...(props.controls === 'both' ? { [backward ? 'start' : 'end']: glyph } : {}),\n      default: () => h('span', { class: 'v-pagination-control-label' }, label),\n    },\n  )\n}\n\nconst navEl = ref<HTMLElement | null>(null)\n\n// @keyboard @a11y\n/** The arrow keys, through the shared implementation in `utils/arrowNav`. */\nfunction onKeydown(event: KeyboardEvent) {\n  const nav = navEl.value\n  if (!nav) return\n  arrowNavigate(event, nav, () =>\n    navigableItems(nav, '.v-pagination-page:not(:disabled, [aria-disabled=\"true\"])'),\n  )\n}\n\n// The pills are rendered by a VButtonGroup inside the nav, so a template ref reaches none of\n// them. `focus` goes to the current page.\ndefineExpose({\n  // Two queries, not one selector list: a list matches in DOM order, which would hand the\n  // focus to the previous control ahead of the current page. `a[href]` because an inert link\n  // has lost its address, and with it the ability to take the focus.\n  /** Moves the focus to the current page, or to the first control that can take it. */\n  focus: (options?: FocusOptions) =>\n    (\n      navEl.value?.querySelector<HTMLElement>(\n        '[aria-current=\"page\"]:is(button, a[href]):not(:disabled)',\n      ) ?? navEl.value?.querySelector<HTMLElement>(':is(button, a[href]):not(:disabled)')\n    )?.focus(options),\n  /** The `<nav>` element, which is also where the consumer's attributes land. */\n  el: navEl,\n})\n</script>\n\n<template>\n  <nav\n    ref=\"navEl\"\n    class=\"v-pagination\"\n    :aria-label=\"ariaLabel\"\n    :data-align=\"align\"\n    :data-item-variant=\"itemVariant\"\n    @keydown=\"onKeydown\"\n  >\n    <!-- The row is a VButtonGroup either way: joined it merges the borders of its DIRECT\n         button children, and detached it spaces them, which is all this prop asks of it.\n         That is why there is no list markup wrapping the pills, and why the ellipsis is\n         itself an inert button rather than a plain span: anything else between two pills\n         would break the seam. -->\n    <!--\n      `|| undefined` keeps the group opinion-free when the row does not ask, `undefined` being\n      what means \"no opinion\" there where `false` is an order. The size is always an opinion,\n      the pagination having a default of its own.\n    -->\n    <VButtonGroup\n      class=\"v-pagination-items\"\n      :detached=\"detached\"\n      :bordered=\"bordered\"\n      :size=\"size\"\n      :compact=\"compact || undefined\"\n      :elevated=\"elevated || undefined\"\n    >\n      <PageControl v-if=\"controls && edgeControls\" side=\"first\" />\n      <PageControl v-if=\"controls\" side=\"prev\" />\n\n      <template v-for=\"item in items\" :key=\"item.key\">\n        <VButton\n          v-if=\"item.kind === 'page'\"\n          class=\"v-pagination-page\"\n          :variant=\"item.page === currentPage ? selectedVariant : itemVariant\"\n          :tone=\"item.page === currentPage ? tone : 'neutral'\"\n          :disabled=\"disabled || isPageDisabled(item.page)\"\n          :aria-label=\"pageLabelFor(item.page)\"\n          :aria-current=\"item.page === currentPage ? 'page' : undefined\"\n          :href=\"hrefFor(item.page)\"\n          @click=\"choose($event, item.page)\"\n        >\n          {{ item.page }}\n        </VButton>\n        <!--\n          The ellipsis is a disabled icon-only button rather than a span: being a button, it\n          keeps the joined row's seam continuous and follows the size and density like\n          everything else. Disabling it takes it out of the tab order, and it is hidden from\n          screen readers, which have the page numbers themselves; which is also why it is a\n          VButton and not a VIconButton, whose required label would name something nobody can\n          reach.\n        -->\n        <VButton\n          v-else\n          class=\"v-pagination-ellipsis\"\n          aria-hidden=\"true\"\n          data-icon-only\n          :variant=\"itemVariant\"\n          tone=\"neutral\"\n          disabled\n        >\n          <template #start>\n            <VIcon :name=\"moreHorizIcon\" />\n          </template>\n        </VButton>\n      </template>\n\n      <PageControl v-if=\"controls\" side=\"next\" />\n      <PageControl v-if=\"controls && edgeControls\" side=\"last\" />\n    </VButtonGroup>\n  </nav>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-pagination {\n    display: flex;\n  }\n\n  .v-pagination[data-align='center'] {\n    justify-content: center;\n  }\n\n  .v-pagination[data-align='end'] {\n    justify-content: flex-end;\n  }\n\n  /*\n   * Qualified by an attribute VButton always renders, which makes both of these beat that\n   * button's own padding and its own transition whatever order the two sheets end up in; the\n   * VIconButton idiom.\n   */\n  .v-pagination-page[data-size] {\n    /* A one-digit pill is square, and widens by itself past that. The height variable\n       is set by the shared size class on this very element, so this single rule covers\n       all five sizes and their compact forms. */\n    min-inline-size: var(--control-height);\n    padding-inline: var(--vectis-space-2);\n\n    /*\n     * The highlight changes instantly, and this must not be \"restored for consistency\". VButton\n     * fades `background-color` over `--vectis-duration-fast`, which is right for a button that\n     * stays put and wrong here: truncation SHIFTS its window, so from one page to the next the\n     * highlight keeps its slot but changes ELEMENT, and the outgoing and incoming pills are\n     * both half-tinted for a few frames; read as a flicker, with nothing in the console.\n     */\n    transition: none;\n  }\n\n  /* The ellipsis is a disabled button only as a technical device; to the reader it is\n     not a control that has been turned off, so it does not take the forbidden\n     cursor. Qualified like the pills: VButton's disabled cursor weighs (0,2,0), and a bare\n     class loses to it whatever the sheet order. */\n  .v-pagination-ellipsis[data-size] {\n    cursor: default;\n  }\n\n  /*\n   * A disabled page or control greys its outline to a different token, hence a variable the\n   * second rule changes. VToggle's `--toggle-frame` is the same device.\n   */\n  .v-pagination[data-item-variant='outline'] {\n    --pagination-frame: var(--vectis-color-border-strong);\n  }\n\n  .v-pagination[data-item-variant='outline'] > * > :is(:disabled, [aria-disabled='true']) {\n    --pagination-frame: var(--vectis-color-border);\n  }\n\n  .v-pagination[data-item-variant='outline']\n    > *\n    > .v-pagination-page[aria-current='page']:is([data-variant='soft'], [data-variant='ghost']) {\n    border-color: var(--pagination-frame);\n  }\n\n  /*\n   * The class is repeated to reach (0,6,0). The variant, hover and active rules reach (0,5,0),\n   * and with the forcing turned off any of them that still won would paint its tone over the\n   * selection, with HighlightText on top of it.\n   */\n  @media (forced-colors: active) {\n    .v-pagination-page.v-pagination-page.v-pagination-page.v-pagination-page[aria-current='page']:not(\n        :disabled,\n        [aria-disabled='true']\n      ) {\n      forced-color-adjust: none;\n      background-color: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n      outline-color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"VPagination.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VPagination/VPagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @core\n/**\n * Native buttons activate pages. JavaScript builds bounded page windows and provides roving\n * keyboard navigation.\n */\nimport { computed, h, nextTick, ref } from 'vue'\nimport type { FunctionalComponent } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VButtonGroup from '../VButton/VButtonGroup.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { chevron_left as chevronLeftIcon } from '../VIcon/icons/chevron_left'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport { first_page as firstPageIcon } from '../VIcon/icons/first_page'\nimport { last_page as lastPageIcon } from '../VIcon/icons/last_page'\nimport { more_horiz as moreHorizIcon } from '../VIcon/icons/more_horiz'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\n\nimport { arrowNavigate, navigableItems } from '../../utils/arrowNav'\nimport { clamp } from '../../utils/number'\nimport { resolveMatcher } from '../../utils/matcher'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\n/** How the pages that are not the current one are drawn. */\nexport type PaginationItemVariant = 'ghost' | 'outline'\n\n/** How the current page is drawn. */\nexport type PaginationSelectedVariant = 'solid' | 'soft' | 'ghost'\n\n/** The colour of the current page. */\nexport type PaginationTone = 'accent' | 'neutral' | 'danger'\n\n/** The height of the pills, from the scale every control shares. */\nexport type PaginationSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\n/** Where the row sits in the width it is given. */\nexport type PaginationAlign = 'start' | 'center' | 'end'\n\n/** Whether the previous and next controls are rendered, and what they show. */\nexport type PaginationControls = false | 'icon' | 'text' | 'both'\n\n/**\n * Which pages cannot be reached, given either as a list of page numbers or as a function\n * answering that question for a page.\n */\nexport type PaginationMatcher = number[] | ((page: number) => boolean)\n\ninterface PaginationProps {\n  /**\n   * How many pages there are in all. It is 1 by default, which renders a single page: the\n   * real count almost always has to be given.\n   */\n  length?: number\n  /**\n   * How many slots to render, ellipses counted among them, so the row keeps exactly the same\n   * width whichever page is current. Below 5, the row drops the bounds and the ellipses and\n   * shows that many consecutive pages around the current one. At 0, no page is rendered and the\n   * controls alone remain. Left out, every page is rendered.\n   */\n  totalVisible?: number\n\n  /**\n   * Separates the buttons instead of joining them into one segmented control. It is the\n   * word VButtonGroup and VToggle use for the same question, in the same direction.\n   */\n  detached?: boolean\n  /**\n   * Draws a line between the joined buttons, so the row reads as segments rather than as one\n   * frame, on the terms of VButtonGroup's own `bordered`. It has no effect under `detached`.\n   */\n  bordered?: boolean\n  /**\n   * How the pages OTHER than the current one, and the controls, are drawn. It is named for the\n   * ITEMS because that is what it paints: on VTabs and VDataTable `variant` names the\n   * decoration of the frame instead.\n   */\n  itemVariant?: PaginationItemVariant\n  /**\n   * How the current page is drawn, in the row's tone: filled, tinted, or the colour of its\n   * text alone. The same choice as VToggle's `selectedVariant`.\n   */\n  selectedVariant?: PaginationSelectedVariant\n  /** The colour the current page takes. The other pages and the controls stay neutral. */\n  tone?: PaginationTone\n  /** The height of the buttons, from the scale shared by every control. */\n  size?: PaginationSize\n  /** Takes 4px off the height of every button. */\n  compact?: boolean\n  /** Raises the row off the page, on the terms of VButton's own `elevated`. */\n  elevated?: boolean\n  /** Where the row sits in the width it is given. */\n  align?: PaginationAlign\n\n  /**\n   * The previous and next buttons on either side of the pages: what they show, or `false` to\n   * leave them out.\n   */\n  controls?: PaginationControls\n  /** The icon of the previous control: an icon name, or an explicit render. */\n  prevIcon?: IconSource\n  /** The icon of the next control: an icon name, or an explicit render. */\n  nextIcon?: IconSource\n  /**\n   * The wording of the previous control, used both as its visible text and as what\n   * screen readers announce. It falls back to the design system dictionary.\n   */\n  prevText?: string\n  /**\n   * The wording of the next control, used both as its visible text and as what screen\n   * readers announce. It falls back to the design system dictionary.\n   */\n  nextText?: string\n  /**\n   * Adds first and last page controls outside the previous and next ones, drawn the way\n   * `controls` draws those. It has no effect when `controls` is `false`.\n   */\n  edgeControls?: boolean\n  /** The icon of the first page control: an icon name, or an explicit render. */\n  firstIcon?: IconSource\n  /** The icon of the last page control: an icon name, or an explicit render. */\n  lastIcon?: IconSource\n  /**\n   * The wording of the first page control, used both as its visible text and as what\n   * screen readers announce. It falls back to the design system dictionary.\n   */\n  firstText?: string\n  /**\n   * The wording of the last page control, used both as its visible text and as what\n   * screen readers announce. It falls back to the design system dictionary.\n   */\n  lastText?: string\n\n  /** Makes the whole component unusable. */\n  disabled?: boolean\n  /**\n   * Which pages cannot be reached, as a list or as a function. The previous and next\n   * controls step OVER them rather than stopping at one.\n   */\n  disabledPages?: PaginationMatcher\n\n  /**\n   * What screen readers announce for the navigation itself. It falls back to the\n   * design system dictionary.\n   */\n  label?: string\n  /**\n   * How a page is announced. A pill shows a bare number, which alone means nothing to\n   * a screen reader: this is what turns it into \"Page 3\". It falls back to the design\n   * system dictionary.\n   */\n  pageLabel?: (page: number) => string\n  /** The address of a page. Left out, they are buttons. */\n  href?: (page: number) => string\n}\n\nconst props = withDefaults(defineProps<PaginationProps>(), {\n  length: 1,\n  totalVisible: undefined,\n  detached: false,\n  bordered: false,\n  itemVariant: 'outline',\n  selectedVariant: 'solid',\n  tone: 'accent',\n  size: 'md',\n  compact: false,\n  elevated: false,\n  align: 'start',\n  controls: 'icon',\n  prevIcon: () => chevronLeftIcon,\n  nextIcon: () => chevronRightIcon,\n  prevText: undefined,\n  nextText: undefined,\n  edgeControls: false,\n  firstIcon: () => firstPageIcon,\n  lastIcon: () => lastPageIcon,\n  firstText: undefined,\n  lastText: undefined,\n  disabled: false,\n  disabledPages: undefined,\n  label: undefined,\n  pageLabel: undefined,\n  href: undefined,\n})\n\nconst emit = defineEmits<{\n  /**\n   * A page was chosen from the row, a pill or a control, with the click that chose it. It comes\n   * before the model changes, so under `href` a single-page application calls\n   * `preventDefault()` on the event and hands the address to its router instead of letting the\n   * browser load it.\n   */\n  navigate: [page: number, event: MouseEvent]\n}>()\n\n// The prop wins over the dictionary, and above both, a consumer's own aria-label or\n// aria-labelledby still wins; that arbitration is what `useAriaLabel` is for.\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.pagination.label)\nconst resolvedPrevText = computed(() => props.prevText ?? m.value.pagination.previous)\nconst resolvedNextText = computed(() => props.nextText ?? m.value.pagination.next)\nconst resolvedFirstText = computed(() => props.firstText ?? m.value.pagination.first)\nconst resolvedLastText = computed(() => props.lastText ?? m.value.pagination.last)\n\n/** The page being shown, counted from 1. It starts on the first. */\nconst page = defineModel<number>({ default: 1 })\n\n/** One slot in the row: either a page, or the ellipsis standing for those left out. */\ntype PaginationItem = { kind: 'page'; key: string; page: number } | { kind: 'gap'; key: string }\n\n// A length or a model that is not a whole number (`NaN` while a page size is still loading,\n// a computed `2.5`) is brought back to a page that exists, or no pill would ever match it.\nconst total = computed(() => Math.max(Math.trunc(props.length) || 1, 1))\nconst currentPage = computed(() => clamp(Math.round(page.value) || 1, 1, total.value))\n\nconst isPageDisabled = computed(() => resolveMatcher(props.disabledPages))\n\n// @a11y\n// A pill shows nothing but a number, which on its own tells a screen reader\n// nothing at all; this is what has it announced as \"Page 3\".\nfunction pageLabelFor(n: number): string {\n  return props.pageLabel ? props.pageLabel(n) : m.value.pagination.page(n)\n}\n\n/** Works out which slots the row holds. */\nconst items = computed<PaginationItem[]>(() => {\n  const count = total.value\n  const current = currentPage.value\n\n  const pageItem = (n: number): PaginationItem => ({ kind: 'page', key: `page-${n}`, page: n })\n  const pages = (from: number, to: number): PaginationItem[] => {\n    const out: PaginationItem[] = []\n    for (let n = from; n <= to; n++) out.push(pageItem(n))\n    return out\n  }\n  // Keyed by the side it stands on, never by the page it follows: there is at most one\n  // ellipsis per side, and the left one always comes after the first page while the right\n  // one always comes before the last. A key derived from the window would change on every\n  // navigation, so the right-hand ellipsis would be destroyed and rebuilt each time the\n  // window slid, for a node that never changes.\n  const gap = (side: 'start' | 'end'): PaginationItem => ({ kind: 'gap', key: `gap-${side}` })\n\n  // With no limit given, nothing is left out. At 0 the row holds the controls alone.\n  const limit = Math.trunc(props.totalVisible ?? count)\n  const visible = Number.isNaN(limit) ? count : Math.max(limit, 0)\n  if (visible === 0) return []\n  if (visible >= count) return pages(1, count)\n\n  // Below five slots there is no room for the first page, an ellipsis, the current page,\n  // another ellipsis and the last: the row is a plain window of consecutive pages, held\n  // against the bounds so it keeps the same number of slots.\n  if (visible < 5) {\n    const from = clamp(current - Math.floor((visible - 1) / 2), 1, count - visible + 1)\n    return pages(from, from + visible - 1)\n  }\n\n  const start = current - Math.floor((visible - 5) / 2)\n  const end = start + (visible - 5)\n\n  // The window is stretched to the bound instead, which both avoids that and keeps the number\n  // of slots exactly the same.\n  if (start <= 3) return [...pages(1, visible - 2), gap('end'), pageItem(count)]\n  if (end >= count - 2) return [pageItem(1), gap('start'), ...pages(count - visible + 3, count)]\n  return [pageItem(1), gap('start'), ...pages(start, end), gap('end'), pageItem(count)]\n})\n\n/**\n * Where a control leads: the nearest page in that direction that can actually be reached,\n * disabled ones being stepped over rather than stopped at. Answering `undefined` means there is\n * none left, which disables the control; and that single answer also covers being on the first\n * or the last page, with no separate test for the ends.\n */\nfunction step(direction: -1 | 1): number | undefined {\n  for (let n = currentPage.value + direction; n >= 1 && n <= total.value; n += direction) {\n    if (!isPageDisabled.value(n)) return n\n  }\n  return undefined\n}\n\n/**\n * Where a first or last control leads: the reachable page farthest in that direction. It is\n * `undefined` exactly when `step` is, so each edge control disables itself with its neighbour.\n */\nfunction leap(direction: -1 | 1): number | undefined {\n  const end = direction < 0 ? 1 : total.value\n  for (let n = end; n !== currentPage.value; n -= direction) {\n    if (!isPageDisabled.value(n)) return n\n  }\n  return undefined\n}\n\nconst firstTarget = computed(() => leap(-1))\nconst prevTarget = computed(() => step(-1))\nconst nextTarget = computed(() => step(1))\nconst lastTarget = computed(() => leap(1))\n\nfunction goTo(n: number | undefined) {\n  if (n === undefined) return\n  page.value = clamp(n, 1, total.value)\n}\n\n/** The address a pill or a control links to, or `undefined` when the row is made of buttons. */\nfunction hrefFor(n: number): string | undefined {\n  return props.href?.(n)\n}\n\n// @core\n/*\n * A link clicked with a modifier held (Ctrl or Cmd for a new tab, Shift for a window, Alt for a\n * download) opens somewhere ELSE: the page on screen stays where it is, so the model must not\n * move. The test the routers themselves make before taking a click over.\n */\nfunction opensElsewhere(event: MouseEvent): boolean {\n  return (\n    props.href !== undefined &&\n    (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)\n  )\n}\n\nfunction choose(event: MouseEvent, n: number | undefined) {\n  if (n === undefined || opensElsewhere(event)) return\n  emit('navigate', n, event)\n  goTo(n)\n}\n\nfunction isUnusable(el: HTMLElement): boolean {\n  return el.matches(':disabled, [aria-disabled=\"true\"]')\n}\n\n// @a11y\n/*\n * The previous and next controls disable themselves once no page is left in their direction,\n * and a focused button that becomes disabled hands the focus to <body>: a keyboard reader\n * pressing \"Next page\" on the second to last page would be sent back to the top of the document\n * by the next Tab. The focus goes to the page just reached instead, the current page being\n * always rendered. A row without pages hands it to the nearest control still usable, the one\n * before it first.\n */\nasync function goFromControl(event: MouseEvent, n: number | undefined) {\n  const control = event.currentTarget as HTMLElement\n  const hadFocus = control === document.activeElement\n  choose(event, n)\n  if (!hadFocus) return\n  await nextTick()\n  const nav = navEl.value\n  if (!nav || !isUnusable(control)) return\n  const current = nav.querySelector<HTMLElement>('[aria-current=\"page\"]')\n  if (current) return current.focus()\n  const usable = [...nav.querySelectorAll<HTMLElement>(':is(button, a[href]):not(:disabled)')]\n  const before = usable.filter(\n    (el) => control.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_PRECEDING,\n  )\n  ;(before.at(-1) ?? usable[0])?.focus()\n}\n\ntype ControlSide = 'first' | 'prev' | 'next' | 'last'\n\n/*\n * The four controls, written once: they differ only by their direction and reach, and template\n * blocks drifting apart on the next change is exactly what this avoids. A functional component\n * because they sit at either end of the row, with the pages in between, where a `v-for` over\n * descriptors could not put them.\n */\nconst PageControl: FunctionalComponent<{ side: ControlSide }> = ({ side }) => {\n  const { label, icon, target } = {\n    first: { label: resolvedFirstText.value, icon: props.firstIcon, target: firstTarget.value },\n    prev: { label: resolvedPrevText.value, icon: props.prevIcon, target: prevTarget.value },\n    next: { label: resolvedNextText.value, icon: props.nextIcon, target: nextTarget.value },\n    last: { label: resolvedLastText.value, icon: props.lastIcon, target: lastTarget.value },\n  }[side]\n  const disabled = props.disabled || target === undefined\n  const common = {\n    class: 'v-pagination-control',\n    'data-side': side,\n    variant: props.itemVariant,\n    disabled,\n    href: hrefFor(target ?? currentPage.value),\n    rel: props.href && !disabled ? side : undefined,\n    onClick: (event: MouseEvent) => goFromControl(event, target),\n  }\n  const glyph = () => h(VIcon, { ...iconProps(icon), mirrored: true })\n  if (props.controls === 'icon') return h(VIconButton, { ...common, label }, glyph)\n  const backward = side === 'first' || side === 'prev'\n  return h(\n    VButton,\n    { ...common, tone: 'neutral' },\n    {\n      ...(props.controls === 'both' ? { [backward ? 'start' : 'end']: glyph } : {}),\n      default: () => h('span', { class: 'v-pagination-control-label' }, label),\n    },\n  )\n}\n\nconst navEl = ref<HTMLElement | null>(null)\n\n// @keyboard @a11y\n/** The arrow keys, through the shared implementation in `utils/arrowNav`. */\nfunction onKeydown(event: KeyboardEvent) {\n  const nav = navEl.value\n  if (!nav) return\n  arrowNavigate(event, nav, () =>\n    navigableItems(nav, '.v-pagination-page:not(:disabled, [aria-disabled=\"true\"])'),\n  )\n}\n\n// The pills are rendered by a VButtonGroup inside the nav, so a template ref reaches none of\n// them. `focus` goes to the current page.\ndefineExpose({\n  // Two queries, not one selector list: a list matches in DOM order, which would hand the\n  // focus to the previous control ahead of the current page. `a[href]` because an inert link\n  // has lost its address, and with it the ability to take the focus.\n  /** Moves the focus to the current page, or to the first control that can take it. */\n  focus: (options?: FocusOptions) =>\n    (\n      navEl.value?.querySelector<HTMLElement>(\n        '[aria-current=\"page\"]:is(button, a[href]):not(:disabled)',\n      ) ?? navEl.value?.querySelector<HTMLElement>(':is(button, a[href]):not(:disabled)')\n    )?.focus(options),\n  /** The `<nav>` element, which is also where the consumer's attributes land. */\n  el: navEl,\n})\n</script>\n\n<template>\n  <nav\n    ref=\"navEl\"\n    class=\"v-pagination\"\n    :aria-label=\"ariaLabel\"\n    :data-align=\"align\"\n    :data-item-variant=\"itemVariant\"\n    @keydown=\"onKeydown\"\n  >\n    <!-- The row is a VButtonGroup either way: joined it merges the borders of its DIRECT\n         button children, and detached it spaces them, which is all this prop asks of it.\n         That is why there is no list markup wrapping the pills, and why the ellipsis is\n         itself an inert button rather than a plain span: anything else between two pills\n         would break the seam. -->\n    <!--\n      `|| undefined` keeps the group opinion-free when the row does not ask, `undefined` being\n      what means \"no opinion\" there where `false` is an order. The size is always an opinion,\n      the pagination having a default of its own.\n    -->\n    <VButtonGroup\n      class=\"v-pagination-items\"\n      :detached=\"detached\"\n      :bordered=\"bordered\"\n      :size=\"size\"\n      :compact=\"compact || undefined\"\n      :elevated=\"elevated || undefined\"\n    >\n      <PageControl v-if=\"controls && edgeControls\" side=\"first\" />\n      <PageControl v-if=\"controls\" side=\"prev\" />\n\n      <template v-for=\"item in items\" :key=\"item.key\">\n        <VButton\n          v-if=\"item.kind === 'page'\"\n          class=\"v-pagination-page\"\n          :variant=\"item.page === currentPage ? selectedVariant : itemVariant\"\n          :tone=\"item.page === currentPage ? tone : 'neutral'\"\n          :disabled=\"disabled || isPageDisabled(item.page)\"\n          :aria-label=\"pageLabelFor(item.page)\"\n          :aria-current=\"item.page === currentPage ? 'page' : undefined\"\n          :href=\"hrefFor(item.page)\"\n          @click=\"choose($event, item.page)\"\n        >\n          {{ item.page }}\n        </VButton>\n        <!--\n          The ellipsis is a disabled icon-only button rather than a span: being a button, it\n          keeps the joined row's seam continuous and follows the size and density like\n          everything else. Disabling it takes it out of the tab order, and it is hidden from\n          screen readers, which have the page numbers themselves; which is also why it is a\n          VButton and not a VIconButton, whose required label would name something nobody can\n          reach.\n        -->\n        <VButton\n          v-else\n          class=\"v-pagination-ellipsis\"\n          aria-hidden=\"true\"\n          data-icon-only\n          :variant=\"itemVariant\"\n          tone=\"neutral\"\n          disabled\n        >\n          <template #start>\n            <VIcon :name=\"moreHorizIcon\" />\n          </template>\n        </VButton>\n      </template>\n\n      <PageControl v-if=\"controls\" side=\"next\" />\n      <PageControl v-if=\"controls && edgeControls\" side=\"last\" />\n    </VButtonGroup>\n  </nav>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-pagination {\n    display: flex;\n  }\n\n  .v-pagination[data-align='center'] {\n    justify-content: center;\n  }\n\n  .v-pagination[data-align='end'] {\n    justify-content: flex-end;\n  }\n\n  /*\n   * Qualified by an attribute VButton always renders, which makes both of these beat that\n   * button's own padding and its own transition whatever order the two sheets end up in; the\n   * VIconButton idiom.\n   */\n  .v-pagination-page[data-size] {\n    /* A one-digit pill is square, and widens by itself past that. The height variable\n       is set by the shared size class on this very element, so this single rule covers\n       all five sizes and their compact forms. */\n    min-inline-size: var(--control-height);\n    padding-inline: var(--vectis-space-2);\n\n    /*\n     * The highlight changes instantly, and this must not be \"restored for consistency\". VButton\n     * fades `background-color` over `--vectis-duration-fast`, which is right for a button that\n     * stays put and wrong here: truncation SHIFTS its window, so from one page to the next the\n     * highlight keeps its slot but changes ELEMENT, and the outgoing and incoming pills are\n     * both half-tinted for a few frames; read as a flicker, with nothing in the console.\n     */\n    transition: none;\n  }\n\n  /* The ellipsis is a disabled button only as a technical device; to the reader it is\n     not a control that has been turned off, so it does not take the forbidden\n     cursor. Qualified like the pills: VButton's disabled cursor weighs (0,2,0), and a bare\n     class loses to it whatever the sheet order. */\n  .v-pagination-ellipsis[data-size] {\n    cursor: default;\n  }\n\n  /*\n   * A disabled page or control greys its outline to a different token, hence a variable the\n   * second rule changes. VToggle's `--toggle-frame` is the same device.\n   */\n  .v-pagination[data-item-variant='outline'] {\n    --pagination-frame: var(--vectis-color-border-strong);\n  }\n\n  .v-pagination[data-item-variant='outline'] > * > :is(:disabled, [aria-disabled='true']) {\n    --pagination-frame: var(--vectis-color-border);\n  }\n\n  .v-pagination[data-item-variant='outline']\n    > *\n    > .v-pagination-page[aria-current='page']:is([data-variant='soft'], [data-variant='ghost']) {\n    border-color: var(--pagination-frame);\n  }\n\n  /*\n   * The class is repeated to reach (0,6,0). The variant, hover and active rules reach (0,5,0),\n   * and with the forcing turned off any of them that still won would paint its tone over the\n   * selection, with HighlightText on top of it.\n   */\n  @media (forced-colors: active) {\n    .v-pagination-page.v-pagination-page.v-pagination-page.v-pagination-page[aria-current='page']:not(\n        :disabled,\n        [aria-disabled='true']\n      ) {\n      forced-color-adjust: none;\n      background-color: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n      outline-color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

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

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