vectis-ui 0.12.0 → 0.13.0

package/dist/components/VTreeView/VTreeView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VTreeView.js","names":[],"sources":["../../../src/components/VTreeView/VTreeView.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * A hierarchy following the ARIA tree pattern. The rows are rendered flat, in display order, their\n * depth carried by `aria-level`, `aria-setsize` and `aria-posinset`: no native element folds a tree\n * with a single tab stop, and a row that does not wrap its subtree keeps its accessible name free of\n * its descendants' text. JavaScript owns the focus, the keyboard, selection and lazy loading.\n */\nimport { computed, onMounted, ref, shallowReactive, watch } from 'vue'\nimport type { ComponentPublicInstance } from 'vue'\n\nimport VCheckMark from '../VCheckbox/VCheckMark.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport VSpinner from '../VSpinner/VSpinner.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport { error as errorIcon } from '../VIcon/icons/error'\nimport type { IconSource } from '../VIcon/types'\nimport type { ItemValue } from '../../types'\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useLiveAnnouncer } from '../../composables/useLiveAnnouncer'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTimer } from '../../composables/useTimer'\nimport { useMessages } from '../../i18n/state'\nimport { isRtl } from '../../utils/direction'\nimport { normalizeText } from '../../utils/text'\n\n/** Whether nodes can be selected: not at all, one at a time, or several with checkboxes. */\nexport type TreeSelectionMode = 'none' | 'single' | 'multiple'\n\n/** The height of the rows: 32 or 40 pixels. */\nexport type TreeViewSize = 'sm' | 'md'\n\n/**\n * What is selected, and its shape follows `selectionMode`: a single value (or `null`) in `single`\n * mode, an array in `multiple` mode.\n */\nexport type TreeViewModelValue = ItemValue | ItemValue[] | null\n\n/** One node of the tree. */\nexport interface TreeItem {\n  /** What identifies the node, in the selection and expansion models. Unique across the tree. */\n  value: ItemValue\n  /** What the row says. It is also what typeahead matches. */\n  label: string\n  /** An icon before the label: an icon name, or an explicit render. */\n  icon?: IconSource\n  /** The child nodes, which make this node a branch. */\n  children?: TreeItem[]\n  /**\n   * Marks a branch whose children `loadChildren` fetches on its first expansion. Ignored when\n   * `children` is set or when the tree has no `loadChildren`.\n   */\n  lazy?: boolean\n  /** Where the node leads, which makes the row a link. */\n  href?: string\n  /** Marks the node as the page being viewed (`aria-current`). */\n  current?: boolean\n  /**\n   * Keeps the node focusable, so it is still found, but it cannot be selected, activated, expanded\n   * or collapsed.\n   */\n  disabled?: boolean\n}\n\n/** What the `#icon`, `#label` and `#end` slots receive. */\nexport interface TreeItemSlotProps {\n  item: TreeItem\n  /** The depth of the node, from 1. */\n  level: number\n  /** Whether the node's children are shown. */\n  expanded: boolean\n}\n\ntype CheckState = 'true' | 'false' | 'mixed'\n\ninterface TreeNode {\n  item: TreeItem\n  level: number\n  parent: TreeNode | null\n  posinset: number\n  setsize: number\n}\n\ninterface TreeViewProps {\n  /** The first level of the tree. */\n  items: TreeItem[]\n  /**\n   * Whether nodes can be selected. In `multiple` mode each row has a checkbox, and checking a\n   * branch checks everything under it.\n   */\n  selectionMode?: TreeSelectionMode\n  /**\n   * Fetches the children of a `lazy` node, on its first expansion. The tree keeps them; a failure\n   * collapses the node again, and the next expansion retries.\n   */\n  loadChildren?: (item: TreeItem) => Promise<TreeItem[]>\n  /** The height of the rows, 32 or 40 pixels. */\n  size?: TreeViewSize\n  /** What screen readers announce for the tree. It falls back to the design system dictionary. */\n  label?: string\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<TreeViewProps>(), {\n  selectionMode: 'none',\n  loadChildren: undefined,\n  size: 'md',\n  label: undefined,\n})\n\n/**\n * What is selected. In `single` mode, a value or `null`; in `multiple` mode, the checked nodes in\n * tree order, a branch included when everything under it is checked. A value given for a branch\n * checks its whole subtree. A shape that does not match the mode reads as an empty selection.\n */\nconst model = defineModel<TreeViewModelValue>({ default: null })\n\n/** The values of the expanded nodes. Left unbound, the tree keeps that state itself. */\nconst expanded = defineModel<ItemValue[]>('expanded', { default: () => [] })\n\nconst emit = defineEmits<{\n  /**\n   * A node was clicked or Enter was pressed on it, after the tree applied its own effect: selecting\n   * it, checking it, or folding a branch in `none` mode. For a link, calling `preventDefault()` on\n   * the event stops the navigation, which hands it to a router.\n   */\n  activate: [item: TreeItem, event: MouseEvent | KeyboardEvent]\n}>()\n\ndefineSlots<{\n  /** Replaces the icon of a node, for instance to show an open folder when it is expanded. */\n  icon?(props: TreeItemSlotProps): unknown\n  /** Replaces the label of a node. */\n  label?(props: TreeItemSlotProps): unknown\n  /**\n   * Content at the end of a row: a count, a badge. It must not be focusable: a row is a single\n   * control.\n   */\n  end?(props: TreeItemSlotProps): unknown\n}>()\n\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.treeView.label)\nconst { polite: announcement, announce } = useLiveAnnouncer()\n\nconst loaded = shallowReactive(new Map<ItemValue, TreeItem[]>())\nconst loading = shallowReactive(new Set<ItemValue>())\nconst failed = shallowReactive(new Set<ItemValue>())\n\nfunction childrenOf(item: TreeItem): TreeItem[] | undefined {\n  return item.children ?? loaded.get(item.value)\n}\n\nfunction isPending(item: TreeItem): boolean {\n  return !!props.loadChildren && !!item.lazy && !item.children && !loaded.has(item.value)\n}\n\nfunction isBranch(item: TreeItem): boolean {\n  return !!childrenOf(item)?.length || isPending(item)\n}\n\nconst expandedSet = computed(() => new Set(expanded.value))\n\n/** The rows on screen, in display order: every node whose ancestors are all expanded. */\nconst visible = computed(() => {\n  const rows: TreeNode[] = []\n  const walk = (items: TreeItem[], level: number, parent: TreeNode | null) => {\n    items.forEach((item, index) => {\n      const node = { item, level, parent, posinset: index + 1, setsize: items.length }\n      rows.push(node)\n      const children = childrenOf(item)\n      if (children && expandedSet.value.has(item.value)) walk(children, level + 1, node)\n    })\n  }\n  walk(props.items, 1, null)\n  return rows\n})\n\nfunction setExpanded(item: TreeItem, open: boolean) {\n  if (open === expandedSet.value.has(item.value)) return\n  expanded.value = open\n    ? [...expanded.value, item.value]\n    : expanded.value.filter((value) => value !== item.value)\n}\n\n// @core\n/**\n * Derives what each checkbox shows. A value in the selection checks its node and the whole subtree\n * under it; a branch then shows checked when all its children are, unchecked when none are, and\n * mixed otherwise, so its own presence in the selection only matters through its children. The map\n * is filled in tree order, which is the order the model is written in.\n */\nfunction deriveCheckStates(chosen: Set<ItemValue>): Map<ItemValue, CheckState> {\n  const states = new Map<ItemValue, CheckState>()\n  const visit = (item: TreeItem, inherited: boolean): CheckState => {\n    states.set(item.value, 'false')\n    const own = inherited || chosen.has(item.value)\n    const children = childrenOf(item)\n    let state: CheckState = own ? 'true' : 'false'\n    if (children?.length) {\n      const childStates = children.map((child) => visit(child, own))\n      state = childStates.every((s) => s === 'true')\n        ? 'true'\n        : childStates.every((s) => s === 'false')\n          ? 'false'\n          : 'mixed'\n    }\n    states.set(item.value, state)\n    return state\n  }\n  props.items.forEach((item) => visit(item, false))\n  return states\n}\n\nconst chosenValues = computed<ItemValue[]>(() => {\n  const value = model.value\n  if (props.selectionMode === 'multiple') return Array.isArray(value) ? value : []\n  return value === null || Array.isArray(value) ? [] : [value]\n})\n\nconst checkStates = computed(() =>\n  props.selectionMode === 'multiple'\n    ? deriveCheckStates(new Set(chosenValues.value))\n    : new Map<ItemValue, CheckState>(),\n)\n\n/** Calls `fn` on a node and on every node under it that is not disabled. */\nfunction eachEnabled(item: TreeItem, fn: (item: TreeItem) => void) {\n  fn(item)\n  childrenOf(item)?.forEach((child) => {\n    if (!child.disabled) eachEnabled(child, fn)\n  })\n}\n\n// @core\n/**\n * Checks a node and its subtree when any leaf of it is unchecked, and unchecks them otherwise.\n * Disabled nodes keep their state. Unchecking also drops the ancestors, which would otherwise check\n * the node again through their subtree. Values the tree does not know, such as the children of a\n * node not loaded yet, are kept at the end.\n */\nfunction toggleCheck(node: TreeNode) {\n  const states = checkStates.value\n  const chosen = new Set<ItemValue>()\n  states.forEach((state, value) => {\n    if (state === 'true') chosen.add(value)\n  })\n  const unknown = chosenValues.value.filter((value) => !states.has(value))\n\n  let check = false\n  eachEnabled(node.item, (item) => {\n    if (!childrenOf(item)?.length && states.get(item.value) !== 'true') check = true\n  })\n  // Only the leaves are added: a branch in the selection would check its disabled children too.\n  eachEnabled(node.item, (item) => {\n    if (!check) chosen.delete(item.value)\n    else if (!childrenOf(item)?.length) chosen.add(item.value)\n  })\n  if (!check) for (let p = node.parent; p; p = p.parent) chosen.delete(p.item.value)\n\n  const next: ItemValue[] = []\n  deriveCheckStates(chosen).forEach((state, value) => {\n    if (state === 'true') next.push(value)\n  })\n  model.value = [...next, ...unknown]\n}\n\nfunction isSelected(item: TreeItem): boolean {\n  return props.selectionMode === 'single' && chosenValues.value[0] === item.value\n}\n\n// @core\n/** What a click or Enter does besides the `activate` event, which follows it. */\nfunction applyDefault(node: TreeNode) {\n  const { item } = node\n  if (props.selectionMode === 'single') model.value = item.value\n  else if (props.selectionMode === 'multiple') toggleCheck(node)\n  else if (item.href === undefined && isBranch(item))\n    setExpanded(item, !expandedSet.value.has(item.value))\n}\n\nfunction activate(node: TreeNode, event: MouseEvent | KeyboardEvent) {\n  applyDefault(node)\n  emit('activate', node.item, event)\n}\n\nasync function load(item: TreeItem) {\n  const loader = props.loadChildren\n  if (!loader) return\n  loading.add(item.value)\n  failed.delete(item.value)\n  try {\n    loaded.set(item.value, await loader(item))\n  } catch {\n    failed.add(item.value)\n    setExpanded(item, false)\n    announce(m.value.treeView.loadError(item.label), false)\n  } finally {\n    loading.delete(item.value)\n  }\n}\n\n// @ssr\n// Loading waits for the client: an expanded lazy node renders busy on the server, then fetches.\nonMounted(() => {\n  // The expanded set is watched too: a pending node shows no children, so its expansion alone\n  // does not change the rows.\n  watch(\n    [visible, expandedSet],\n    ([rows, open]) => {\n      for (const { item } of rows)\n        if (open.has(item.value) && isPending(item) && !loading.has(item.value)) void load(item)\n    },\n    { immediate: true },\n  )\n})\n\nconst treeEl = ref<HTMLElement | null>(null)\nconst rowEls = new Map<ItemValue, HTMLElement>()\nconst rowValues = new WeakMap<Element, ItemValue>()\n\nfunction bindRow(value: ItemValue, el: Element | ComponentPublicInstance | null) {\n  if (el instanceof HTMLElement) {\n    rowEls.set(value, el)\n    rowValues.set(el, value)\n  } else rowEls.delete(value)\n}\n\n// @keyboard @a11y\n/**\n * The single tab stop: the node last focused, or its closest ancestor still on screen once a\n * branch above it folds; before any focus, the first selected node on screen, then the current\n * one, then the first row.\n */\nconst active = ref<TreeNode | null>(null)\nconst tabStop = computed<ItemValue | undefined>(() => {\n  const rows = visible.value\n  const shown = new Set(rows.map((node) => node.item.value))\n  for (let node = active.value; node; node = node.parent)\n    if (shown.has(node.item.value)) return node.item.value\n  const selected =\n    props.selectionMode === 'multiple'\n      ? rows.find((node) => checkStates.value.get(node.item.value) === 'true')\n      : rows.find((node) => isSelected(node.item))\n  return (selected ?? rows.find((node) => node.item.current) ?? rows[0])?.item.value\n})\n\nfunction onFocusin(event: FocusEvent) {\n  const value = rowValues.get(event.target as Element)\n  if (value === undefined) return\n  active.value = visible.value.find((node) => node.item.value === value) ?? null\n}\n\nfunction focusRow(node: TreeNode | undefined) {\n  if (node) rowEls.get(node.item.value)?.focus()\n}\n\nconst typeahead = useTimer()\nlet typed = ''\n\n// @keyboard\n/**\n * Moves to the next row whose label starts with what was typed in the last half-second. Repeating\n * one letter cycles through the rows starting with it.\n */\nfunction typeTo(char: string, index: number) {\n  typed += normalizeText(char)\n  typeahead.start(() => (typed = ''), 500)\n  const rows = visible.value\n  const needle = [...typed].every((c) => c === typed[0]) ? typed[0]! : typed\n  const start = needle.length === 1 ? index + 1 : index\n  for (let i = 0; i < rows.length; i++) {\n    const node = rows[(start + i) % rows.length]!\n    if (normalizeText(node.item.label).startsWith(needle)) return focusRow(node)\n  }\n}\n\n// @keyboard @a11y\nfunction onKeydown(event: KeyboardEvent) {\n  const tree = treeEl.value\n  const value = rowValues.get(event.target as Element)\n  if (!tree || value === undefined || event.altKey || event.ctrlKey || event.metaKey) return\n  const rows = visible.value\n  const index = rows.findIndex((node) => node.item.value === value)\n  const node = rows[index]\n  if (!node) return\n  const { item } = node\n  const isOpen = expandedSet.value.has(item.value)\n  const forward = isRtl(tree) ? 'ArrowLeft' : 'ArrowRight'\n  const back = isRtl(tree) ? 'ArrowRight' : 'ArrowLeft'\n\n  switch (event.key) {\n    case 'ArrowDown':\n      focusRow(rows[index + 1])\n      break\n    case 'ArrowUp':\n      focusRow(rows[index - 1])\n      break\n    case 'Home':\n      focusRow(rows[0])\n      break\n    case 'End':\n      focusRow(rows.at(-1))\n      break\n    case forward:\n      if (!isBranch(item)) break\n      if (!isOpen) {\n        if (!item.disabled) setExpanded(item, true)\n      } else if (rows[index + 1]?.parent?.item === item) focusRow(rows[index + 1])\n      break\n    case back:\n      if (isBranch(item) && isOpen && !item.disabled) setExpanded(item, false)\n      else focusRow(node.parent ?? undefined)\n      break\n    case 'Enter':\n      // A link follows itself: the browser turns Enter into a click, which lands in onRowClick.\n      if (item.href !== undefined) return\n      if (!item.disabled) activate(node, event)\n      break\n    case ' ':\n      // Space selects without following a link, as it does nothing on a link natively.\n      if (item.disabled) break\n      if (item.href !== undefined) applyDefault(node)\n      else activate(node, event)\n      break\n    case '*': {\n      const siblings = node.parent ? childrenOf(node.parent.item)! : props.items\n      const closed = siblings\n        .filter((sibling) => !sibling.disabled && isBranch(sibling))\n        .map((sibling) => sibling.value)\n        .filter((sibling) => !expandedSet.value.has(sibling))\n      if (closed.length) expanded.value = [...expanded.value, ...closed]\n      break\n    }\n    default:\n      if (event.key.length !== 1 || event.key === ' ') return\n      typeTo(event.key, index)\n  }\n  event.preventDefault()\n}\n\nfunction onRowClick(node: TreeNode, event: MouseEvent) {\n  // An inert link has no address left to follow; this also covers a click on its children.\n  if (node.item.disabled) {\n    event.preventDefault()\n    return\n  }\n  activate(node, event)\n}\n\n// The chevron folds without selecting, and without following the link it sits in.\nfunction onChevronClick(node: TreeNode, event: MouseEvent) {\n  event.preventDefault()\n  event.stopPropagation()\n  if (!node.item.disabled && isBranch(node.item))\n    setExpanded(node.item, !expandedSet.value.has(node.item.value))\n}\n\nfunction slotProps(node: TreeNode): TreeItemSlotProps {\n  return {\n    item: node.item,\n    level: node.level,\n    expanded: expandedSet.value.has(node.item.value) && !isPending(node.item),\n  }\n}\n\nfunction ariaExpanded(item: TreeItem) {\n  return isBranch(item) ? String(expandedSet.value.has(item.value)) : undefined\n}\n\nfunction ariaCurrent(item: TreeItem) {\n  if (!item.current) return undefined\n  return item.href !== undefined ? 'page' : 'true'\n}\n\n// The root is a wrapper holding the live region, which a tree may not contain: these two reach\n// the tree itself.\ndefineExpose({\n  /** Moves the focus to the tree's tab stop: the last focused node, else the selected or current one. */\n  focus: (options?: FocusOptions) =>\n    tabStop.value !== undefined && rowEls.get(tabStop.value)?.focus(options),\n  /** The `role=\"tree\"` element, which also receives the consumer's attributes. */\n  el: treeEl,\n})\n</script>\n\n<template>\n  <div class=\"v-tree-view\" :class=\"rootClass\" :style=\"rootStyle\">\n    <ul\n      ref=\"treeEl\"\n      class=\"v-tree v-control\"\n      role=\"tree\"\n      :data-size=\"size\"\n      :aria-multiselectable=\"selectionMode === 'multiple' || undefined\"\n      v-bind=\"forwardedAttrs\"\n      :aria-label=\"ariaLabel\"\n      @keydown=\"onKeydown\"\n      @focusin=\"onFocusin\"\n    >\n      <li v-for=\"node in visible\" :key=\"node.item.value\" class=\"v-tree-node\" role=\"none\">\n        <component\n          :is=\"node.item.href !== undefined ? 'a' : 'div'\"\n          :ref=\"(el: Element | ComponentPublicInstance | null) => bindRow(node.item.value, el)\"\n          class=\"v-tree-row\"\n          role=\"treeitem\"\n          :style=\"{ '--tree-level': node.level - 1 }\"\n          :href=\"node.item.disabled ? undefined : node.item.href\"\n          :tabindex=\"tabStop === node.item.value ? 0 : -1\"\n          :aria-level=\"node.level\"\n          :aria-setsize=\"node.setsize\"\n          :aria-posinset=\"node.posinset\"\n          :aria-expanded=\"ariaExpanded(node.item)\"\n          :aria-selected=\"selectionMode === 'single' ? String(isSelected(node.item)) : undefined\"\n          :aria-checked=\"\n            selectionMode === 'multiple' ? checkStates.get(node.item.value) : undefined\n          \"\n          :aria-current=\"ariaCurrent(node.item)\"\n          :aria-disabled=\"node.item.disabled || undefined\"\n          :aria-busy=\"loading.has(node.item.value) || undefined\"\n          :data-current=\"node.item.current ? '' : undefined\"\n          @click=\"onRowClick(node, $event)\"\n        >\n          <!-- Decorative: the row is the control, and the arrows fold it. -->\n          <span class=\"v-tree-toggle\" aria-hidden=\"true\" @click=\"onChevronClick(node, $event)\">\n            <VSpinner v-if=\"loading.has(node.item.value)\" />\n            <VIcon\n              v-else-if=\"isBranch(node.item)\"\n              class=\"v-tree-chevron\"\n              :name=\"chevronRightIcon\"\n              mirrored\n            />\n          </span>\n          <VCheckMark v-if=\"selectionMode === 'multiple'\" />\n          <slot name=\"icon\" v-bind=\"slotProps(node)\">\n            <VIcon v-if=\"node.item.icon\" class=\"v-tree-icon\" v-bind=\"iconProps(node.item.icon)\" />\n          </slot>\n          <span class=\"v-tree-label\"\n            ><slot name=\"label\" v-bind=\"slotProps(node)\">{{ node.item.label }}</slot></span\n          >\n          <template v-if=\"failed.has(node.item.value)\">\n            <VIcon class=\"v-tree-error\" :name=\"errorIcon\" />\n            <span class=\"v-visually-hidden\">{{ m.treeView.loadFailed }}</span>\n          </template>\n          <span v-if=\"$slots.end\" class=\"v-tree-end\"\n            ><slot name=\"end\" v-bind=\"slotProps(node)\"\n          /></span>\n        </component>\n      </li>\n    </ul>\n    <div class=\"v-visually-hidden\" role=\"status\" aria-live=\"polite\">{{ announcement }}</div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-tree {\n    /* One level of indentation puts a child's chevron under its parent's icon. */\n    --tree-indent: calc(var(--vectis-icon-size) + var(--control-gap));\n\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-tree-row {\n    /* See VSideNavigation: the radius cannot exceed half the height of a single row. */\n    --tree-row-radius: min(var(--vectis-radius-interactive), calc(var(--control-height) / 2));\n\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    min-block-size: var(--control-height);\n    padding-block: var(--vectis-space-1);\n    padding-inline: calc(var(--vectis-space-2) + var(--tree-level, 0) * var(--tree-indent))\n      var(--vectis-space-2);\n    border-radius: var(--tree-row-radius);\n    color: var(--vectis-color-text);\n    font-size: var(--control-font-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .v-tree-row:hover:not([aria-disabled='true']) {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  /* Drawn inwards, so that neighbouring rows cannot cover it. */\n  .v-tree-row:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-tree-row:is([aria-selected='true'], [data-current]) {\n    background: var(--vectis-color-accent-surface);\n    color: var(--vectis-color-accent-text);\n  }\n\n  /* The selected row is already tinted, so its hover deepens that tint; the VMenuItem idiom. */\n  .v-tree-row:is([aria-selected='true'], [data-current]):hover:not([aria-disabled='true']) {\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-accent-surface),\n      var(--vectis-color-accent-text) 8%\n    );\n  }\n\n  .v-tree-row:is([aria-selected='true'], [data-current]) :is(.v-tree-icon, .v-tree-toggle) {\n    color: inherit;\n  }\n\n  .v-tree-row[data-current] .v-tree-label {\n    font-weight: var(--vectis-text-label-weight);\n  }\n\n  .v-tree-toggle {\n    display: inline-grid;\n    flex: none;\n    place-items: center;\n    inline-size: var(--vectis-icon-size);\n    block-size: var(--vectis-icon-size);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-tree-chevron {\n    transition: rotate var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-tree-row[aria-expanded='true'] .v-tree-chevron {\n    rotate: 90deg;\n  }\n\n  /* The mirrored chevron points left, and turns the other way to point down. */\n  .v-tree-row[aria-expanded='true'] .v-tree-chevron:dir(rtl) {\n    rotate: -90deg;\n  }\n\n  .v-tree-icon {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-tree-label {\n    flex: 1;\n    min-inline-size: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-tree-end {\n    flex: none;\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-tree-error {\n    flex: none;\n    color: var(--vectis-color-danger-text);\n  }\n\n  .v-tree-row:is([aria-checked='true'], [aria-checked='mixed']) .v-check-mark {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-tree-row[aria-checked='true'] .v-check-mark-tick,\n  .v-tree-row[aria-checked='mixed'] .v-check-mark-dash {\n    opacity: 1;\n  }\n\n  /* Last of the colour rules, so that a disabled node reads as such whatever its state. */\n  .v-tree-row[aria-disabled='true'] {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-tree-row[aria-disabled='true'] :is(.v-tree-icon, .v-tree-toggle, .v-tree-end) {\n    color: inherit;\n  }\n\n  .v-tree-row[aria-disabled='true'] .v-check-mark {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * Forced colours flatten the tint of the selected row: it takes the system selection pair,\n   * repeated to (0,4,0) above its own hover.\n   */\n  @media (forced-colors: active) {\n    .v-tree-row.v-tree-row:is([aria-selected='true'], [data-current]):not([aria-disabled='true']) {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n\n    .v-tree-row:is([aria-checked='true'], [aria-checked='mixed']):not([aria-disabled='true'])\n      .v-check-mark {\n      forced-color-adjust: none;\n      background: Highlight;\n      border-color: Highlight;\n      color: HighlightText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-tree-chevron {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VTreeView/VTreeView.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,321 @@
+import { useMessages as e } from "../../i18n/state.js";
+import { iconProps as t } from "../VIcon/iconProps.js";
+import n from "../VIcon/VIcon.js";
+import { isRtl as r } from "../../utils/direction.js";
+import i from "../VSpinner/VSpinner.js";
+import { useAriaLabel as a } from "../../composables/useAriaLabel.js";
+import { useRootAttrs as o } from "../../composables/useRootAttrs.js";
+import { chevron_right as s } from "../VIcon/icons/chevron_right.js";
+import c from "../VCheckbox/VCheckMark.js";
+import { error as l } from "../VIcon/icons/error.js";
+import { useLiveAnnouncer as ee } from "../../composables/useLiveAnnouncer.js";
+import { useTimer as te } from "../../composables/useTimer.js";
+import { normalizeText as u } from "../../utils/text.js";
+import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as ne, createVNode as re, defineComponent as _, mergeModels as v, mergeProps as y, normalizeClass as ie, normalizeStyle as b, onMounted as ae, openBlock as x, ref as S, renderList as oe, renderSlot as C, resolveDynamicComponent as se, shallowReactive as w, toDisplayString as T, unref as E, useModel as ce, watch as le, withCtx as ue } from "vue";
+//#region src/components/VTreeView/VTreeView.vue?vue&type=script&setup=true&lang.ts
+var de = [
+	"data-size",
+	"aria-multiselectable",
+	"aria-label"
+], fe = ["onClick"], pe = { class: "v-tree-label" }, me = { class: "v-visually-hidden" }, he = {
+	key: 2,
+	class: "v-tree-end"
+}, ge = {
+	class: "v-visually-hidden",
+	role: "status",
+	"aria-live": "polite"
+}, _e = /*@__PURE__*/ _({
+	inheritAttrs: !1,
+	__name: "VTreeView",
+	props: /*@__PURE__*/ v({
+		items: {},
+		selectionMode: { default: "none" },
+		loadChildren: {
+			type: Function,
+			default: void 0
+		},
+		size: { default: "md" },
+		label: { default: void 0 }
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {},
+		expanded: { default: () => [] },
+		expandedModifiers: {}
+	}),
+	emits: /*@__PURE__*/ v(["activate"], ["update:modelValue", "update:expanded"]),
+	setup(_, { expose: v, emit: _e }) {
+		let D = _, O = ce(_, "modelValue"), k = ce(_, "expanded"), ve = _e, { rootClass: ye, rootStyle: be, forwardedAttrs: xe } = o(), A = e(), Se = a(() => D.label ?? A.value.treeView.label), { polite: Ce, announce: we } = ee(), j = w(/* @__PURE__ */ new Map()), M = w(/* @__PURE__ */ new Set()), N = w(/* @__PURE__ */ new Set());
+		function P(e) {
+			return e.children ?? j.get(e.value);
+		}
+		function F(e) {
+			return !!D.loadChildren && !!e.lazy && !e.children && !j.has(e.value);
+		}
+		function I(e) {
+			return !!P(e)?.length || F(e);
+		}
+		let L = f(() => new Set(k.value)), R = f(() => {
+			let e = [], t = (n, r, i) => {
+				n.forEach((a, o) => {
+					let s = {
+						item: a,
+						level: r,
+						parent: i,
+						posinset: o + 1,
+						setsize: n.length
+					};
+					e.push(s);
+					let c = P(a);
+					c && L.value.has(a.value) && t(c, r + 1, s);
+				});
+			};
+			return t(D.items, 1, null), e;
+		});
+		function z(e, t) {
+			t !== L.value.has(e.value) && (k.value = t ? [...k.value, e.value] : k.value.filter((t) => t !== e.value));
+		}
+		function B(e) {
+			let t = /* @__PURE__ */ new Map(), n = (r, i) => {
+				t.set(r.value, "false");
+				let a = i || e.has(r.value), o = P(r), s = a ? "true" : "false";
+				if (o?.length) {
+					let e = o.map((e) => n(e, a));
+					s = e.every((e) => e === "true") ? "true" : e.every((e) => e === "false") ? "false" : "mixed";
+				}
+				return t.set(r.value, s), s;
+			};
+			return D.items.forEach((e) => n(e, !1)), t;
+		}
+		let V = f(() => {
+			let e = O.value;
+			return D.selectionMode === "multiple" ? Array.isArray(e) ? e : [] : e === null || Array.isArray(e) ? [] : [e];
+		}), H = f(() => D.selectionMode === "multiple" ? B(new Set(V.value)) : /* @__PURE__ */ new Map());
+		function U(e, t) {
+			t(e), P(e)?.forEach((e) => {
+				e.disabled || U(e, t);
+			});
+		}
+		function Te(e) {
+			let t = H.value, n = /* @__PURE__ */ new Set();
+			t.forEach((e, t) => {
+				e === "true" && n.add(t);
+			});
+			let r = V.value.filter((e) => !t.has(e)), i = !1;
+			if (U(e.item, (e) => {
+				!P(e)?.length && t.get(e.value) !== "true" && (i = !0);
+			}), U(e.item, (e) => {
+				i ? P(e)?.length || n.add(e.value) : n.delete(e.value);
+			}), !i) for (let t = e.parent; t; t = t.parent) n.delete(t.item.value);
+			let a = [];
+			B(n).forEach((e, t) => {
+				e === "true" && a.push(t);
+			}), O.value = [...a, ...r];
+		}
+		function W(e) {
+			return D.selectionMode === "single" && V.value[0] === e.value;
+		}
+		function G(e) {
+			let { item: t } = e;
+			D.selectionMode === "single" ? O.value = t.value : D.selectionMode === "multiple" ? Te(e) : t.href === void 0 && I(t) && z(t, !L.value.has(t.value));
+		}
+		function K(e, t) {
+			G(e), ve("activate", e.item, t);
+		}
+		async function Ee(e) {
+			let t = D.loadChildren;
+			if (t) {
+				M.add(e.value), N.delete(e.value);
+				try {
+					j.set(e.value, await t(e));
+				} catch {
+					N.add(e.value), z(e, !1), we(A.value.treeView.loadError(e.label), !1);
+				} finally {
+					M.delete(e.value);
+				}
+			}
+		}
+		ae(() => {
+			le([R, L], ([e, t]) => {
+				for (let { item: n } of e) t.has(n.value) && F(n) && !M.has(n.value) && Ee(n);
+			}, { immediate: !0 });
+		});
+		let q = S(null), J = /* @__PURE__ */ new Map(), Y = /* @__PURE__ */ new WeakMap();
+		function De(e, t) {
+			t instanceof HTMLElement ? (J.set(e, t), Y.set(t, e)) : J.delete(e);
+		}
+		let Oe = S(null), X = f(() => {
+			let e = R.value, t = new Set(e.map((e) => e.item.value));
+			for (let e = Oe.value; e; e = e.parent) if (t.has(e.item.value)) return e.item.value;
+			return ((D.selectionMode === "multiple" ? e.find((e) => H.value.get(e.item.value) === "true") : e.find((e) => W(e.item))) ?? e.find((e) => e.item.current) ?? e[0])?.item.value;
+		});
+		function ke(e) {
+			let t = Y.get(e.target);
+			t !== void 0 && (Oe.value = R.value.find((e) => e.item.value === t) ?? null);
+		}
+		function Z(e) {
+			e && J.get(e.item.value)?.focus();
+		}
+		let Ae = te(), Q = "";
+		function je(e, t) {
+			Q += u(e), Ae.start(() => Q = "", 500);
+			let n = R.value, r = [...Q].every((e) => e === Q[0]) ? Q[0] : Q, i = r.length === 1 ? t + 1 : t;
+			for (let e = 0; e < n.length; e++) {
+				let t = n[(i + e) % n.length];
+				if (u(t.item.label).startsWith(r)) return Z(t);
+			}
+		}
+		function Me(e) {
+			let t = q.value, n = Y.get(e.target);
+			if (!t || n === void 0 || e.altKey || e.ctrlKey || e.metaKey) return;
+			let i = R.value, a = i.findIndex((e) => e.item.value === n), o = i[a];
+			if (!o) return;
+			let { item: s } = o, c = L.value.has(s.value), l = r(t) ? "ArrowLeft" : "ArrowRight", ee = r(t) ? "ArrowRight" : "ArrowLeft";
+			switch (e.key) {
+				case "ArrowDown":
+					Z(i[a + 1]);
+					break;
+				case "ArrowUp":
+					Z(i[a - 1]);
+					break;
+				case "Home":
+					Z(i[0]);
+					break;
+				case "End":
+					Z(i.at(-1));
+					break;
+				case l:
+					if (!I(s)) break;
+					c ? i[a + 1]?.parent?.item === s && Z(i[a + 1]) : s.disabled || z(s, !0);
+					break;
+				case ee:
+					I(s) && c && !s.disabled ? z(s, !1) : Z(o.parent ?? void 0);
+					break;
+				case "Enter":
+					if (s.href !== void 0) return;
+					s.disabled || K(o, e);
+					break;
+				case " ":
+					if (s.disabled) break;
+					s.href === void 0 ? K(o, e) : G(o);
+					break;
+				case "*": {
+					let e = (o.parent ? P(o.parent.item) : D.items).filter((e) => !e.disabled && I(e)).map((e) => e.value).filter((e) => !L.value.has(e));
+					e.length && (k.value = [...k.value, ...e]);
+					break;
+				}
+				default:
+					if (e.key.length !== 1 || e.key === " ") return;
+					je(e.key, a);
+			}
+			e.preventDefault();
+		}
+		function Ne(e, t) {
+			if (e.item.disabled) {
+				t.preventDefault();
+				return;
+			}
+			K(e, t);
+		}
+		function Pe(e, t) {
+			t.preventDefault(), t.stopPropagation(), !e.item.disabled && I(e.item) && z(e.item, !L.value.has(e.item.value));
+		}
+		function $(e) {
+			return {
+				item: e.item,
+				level: e.level,
+				expanded: L.value.has(e.item.value) && !F(e.item)
+			};
+		}
+		function Fe(e) {
+			return I(e) ? String(L.value.has(e.value)) : void 0;
+		}
+		function Ie(e) {
+			if (e.current) return e.href === void 0 ? "true" : "page";
+		}
+		return v({
+			focus: (e) => X.value !== void 0 && J.get(X.value)?.focus(e),
+			el: q
+		}), (e, r) => (x(), h("div", {
+			class: ie(["v-tree-view", E(ye)]),
+			style: b(E(be))
+		}, [g("ul", y({
+			ref_key: "treeEl",
+			ref: q,
+			class: "v-tree v-control",
+			role: "tree",
+			"data-size": _.size,
+			"aria-multiselectable": _.selectionMode === "multiple" || void 0
+		}, E(xe), {
+			"aria-label": E(Se),
+			onKeydown: Me,
+			onFocusin: ke
+		}), [(x(!0), h(d, null, oe(R.value, (r) => (x(), h("li", {
+			key: r.item.value,
+			class: "v-tree-node",
+			role: "none"
+		}, [(x(), p(se(r.item.href === void 0 ? "div" : "a"), {
+			ref_for: !0,
+			ref: (e) => De(r.item.value, e),
+			class: "v-tree-row",
+			role: "treeitem",
+			style: b({ "--tree-level": r.level - 1 }),
+			href: r.item.disabled ? void 0 : r.item.href,
+			tabindex: X.value === r.item.value ? 0 : -1,
+			"aria-level": r.level,
+			"aria-setsize": r.setsize,
+			"aria-posinset": r.posinset,
+			"aria-expanded": Fe(r.item),
+			"aria-selected": _.selectionMode === "single" ? String(W(r.item)) : void 0,
+			"aria-checked": _.selectionMode === "multiple" ? H.value.get(r.item.value) : void 0,
+			"aria-current": Ie(r.item),
+			"aria-disabled": r.item.disabled || void 0,
+			"aria-busy": E(M).has(r.item.value) || void 0,
+			"data-current": r.item.current ? "" : void 0,
+			onClick: (e) => Ne(r, e)
+		}, {
+			default: ue(() => [
+				g("span", {
+					class: "v-tree-toggle",
+					"aria-hidden": "true",
+					onClick: (e) => Pe(r, e)
+				}, [E(M).has(r.item.value) ? (x(), p(i, { key: 0 })) : I(r.item) ? (x(), p(n, {
+					key: 1,
+					class: "v-tree-chevron",
+					name: E(s),
+					mirrored: ""
+				}, null, 8, ["name"])) : m("", !0)], 8, fe),
+				_.selectionMode === "multiple" ? (x(), p(c, { key: 0 })) : m("", !0),
+				C(e.$slots, "icon", y({ ref_for: !0 }, $(r)), () => [r.item.icon ? (x(), p(n, y({
+					key: 0,
+					class: "v-tree-icon"
+				}, { ref_for: !0 }, E(t)(r.item.icon)), null, 16)) : m("", !0)]),
+				g("span", pe, [C(e.$slots, "label", y({ ref_for: !0 }, $(r)), () => [ne(T(r.item.label), 1)])]),
+				E(N).has(r.item.value) ? (x(), h(d, { key: 1 }, [re(n, {
+					class: "v-tree-error",
+					name: E(l)
+				}, null, 8, ["name"]), g("span", me, T(E(A).treeView.loadFailed), 1)], 64)) : m("", !0),
+				e.$slots.end ? (x(), h("span", he, [C(e.$slots, "end", y({ ref_for: !0 }, $(r)))])) : m("", !0)
+			]),
+			_: 2
+		}, 1032, [
+			"style",
+			"href",
+			"tabindex",
+			"aria-level",
+			"aria-setsize",
+			"aria-posinset",
+			"aria-expanded",
+			"aria-selected",
+			"aria-checked",
+			"aria-current",
+			"aria-disabled",
+			"aria-busy",
+			"data-current",
+			"onClick"
+		]))]))), 128))], 16, de), g("div", ge, T(E(Ce)), 1)], 6));
+	}
+});
+//#endregion
+export { _e as default };
+
+//# sourceMappingURL=VTreeView.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VTreeView.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VTreeView/VTreeView.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * A hierarchy following the ARIA tree pattern. The rows are rendered flat, in display order, their\n * depth carried by `aria-level`, `aria-setsize` and `aria-posinset`: no native element folds a tree\n * with a single tab stop, and a row that does not wrap its subtree keeps its accessible name free of\n * its descendants' text. JavaScript owns the focus, the keyboard, selection and lazy loading.\n */\nimport { computed, onMounted, ref, shallowReactive, watch } from 'vue'\nimport type { ComponentPublicInstance } from 'vue'\n\nimport VCheckMark from '../VCheckbox/VCheckMark.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport VSpinner from '../VSpinner/VSpinner.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport { error as errorIcon } from '../VIcon/icons/error'\nimport type { IconSource } from '../VIcon/types'\nimport type { ItemValue } from '../../types'\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useLiveAnnouncer } from '../../composables/useLiveAnnouncer'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTimer } from '../../composables/useTimer'\nimport { useMessages } from '../../i18n/state'\nimport { isRtl } from '../../utils/direction'\nimport { normalizeText } from '../../utils/text'\n\n/** Whether nodes can be selected: not at all, one at a time, or several with checkboxes. */\nexport type TreeSelectionMode = 'none' | 'single' | 'multiple'\n\n/** The height of the rows: 32 or 40 pixels. */\nexport type TreeViewSize = 'sm' | 'md'\n\n/**\n * What is selected, and its shape follows `selectionMode`: a single value (or `null`) in `single`\n * mode, an array in `multiple` mode.\n */\nexport type TreeViewModelValue = ItemValue | ItemValue[] | null\n\n/** One node of the tree. */\nexport interface TreeItem {\n  /** What identifies the node, in the selection and expansion models. Unique across the tree. */\n  value: ItemValue\n  /** What the row says. It is also what typeahead matches. */\n  label: string\n  /** An icon before the label: an icon name, or an explicit render. */\n  icon?: IconSource\n  /** The child nodes, which make this node a branch. */\n  children?: TreeItem[]\n  /**\n   * Marks a branch whose children `loadChildren` fetches on its first expansion. Ignored when\n   * `children` is set or when the tree has no `loadChildren`.\n   */\n  lazy?: boolean\n  /** Where the node leads, which makes the row a link. */\n  href?: string\n  /** Marks the node as the page being viewed (`aria-current`). */\n  current?: boolean\n  /**\n   * Keeps the node focusable, so it is still found, but it cannot be selected, activated, expanded\n   * or collapsed.\n   */\n  disabled?: boolean\n}\n\n/** What the `#icon`, `#label` and `#end` slots receive. */\nexport interface TreeItemSlotProps {\n  item: TreeItem\n  /** The depth of the node, from 1. */\n  level: number\n  /** Whether the node's children are shown. */\n  expanded: boolean\n}\n\ntype CheckState = 'true' | 'false' | 'mixed'\n\ninterface TreeNode {\n  item: TreeItem\n  level: number\n  parent: TreeNode | null\n  posinset: number\n  setsize: number\n}\n\ninterface TreeViewProps {\n  /** The first level of the tree. */\n  items: TreeItem[]\n  /**\n   * Whether nodes can be selected. In `multiple` mode each row has a checkbox, and checking a\n   * branch checks everything under it.\n   */\n  selectionMode?: TreeSelectionMode\n  /**\n   * Fetches the children of a `lazy` node, on its first expansion. The tree keeps them; a failure\n   * collapses the node again, and the next expansion retries.\n   */\n  loadChildren?: (item: TreeItem) => Promise<TreeItem[]>\n  /** The height of the rows, 32 or 40 pixels. */\n  size?: TreeViewSize\n  /** What screen readers announce for the tree. It falls back to the design system dictionary. */\n  label?: string\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<TreeViewProps>(), {\n  selectionMode: 'none',\n  loadChildren: undefined,\n  size: 'md',\n  label: undefined,\n})\n\n/**\n * What is selected. In `single` mode, a value or `null`; in `multiple` mode, the checked nodes in\n * tree order, a branch included when everything under it is checked. A value given for a branch\n * checks its whole subtree. A shape that does not match the mode reads as an empty selection.\n */\nconst model = defineModel<TreeViewModelValue>({ default: null })\n\n/** The values of the expanded nodes. Left unbound, the tree keeps that state itself. */\nconst expanded = defineModel<ItemValue[]>('expanded', { default: () => [] })\n\nconst emit = defineEmits<{\n  /**\n   * A node was clicked or Enter was pressed on it, after the tree applied its own effect: selecting\n   * it, checking it, or folding a branch in `none` mode. For a link, calling `preventDefault()` on\n   * the event stops the navigation, which hands it to a router.\n   */\n  activate: [item: TreeItem, event: MouseEvent | KeyboardEvent]\n}>()\n\ndefineSlots<{\n  /** Replaces the icon of a node, for instance to show an open folder when it is expanded. */\n  icon?(props: TreeItemSlotProps): unknown\n  /** Replaces the label of a node. */\n  label?(props: TreeItemSlotProps): unknown\n  /**\n   * Content at the end of a row: a count, a badge. It must not be focusable: a row is a single\n   * control.\n   */\n  end?(props: TreeItemSlotProps): unknown\n}>()\n\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.treeView.label)\nconst { polite: announcement, announce } = useLiveAnnouncer()\n\nconst loaded = shallowReactive(new Map<ItemValue, TreeItem[]>())\nconst loading = shallowReactive(new Set<ItemValue>())\nconst failed = shallowReactive(new Set<ItemValue>())\n\nfunction childrenOf(item: TreeItem): TreeItem[] | undefined {\n  return item.children ?? loaded.get(item.value)\n}\n\nfunction isPending(item: TreeItem): boolean {\n  return !!props.loadChildren && !!item.lazy && !item.children && !loaded.has(item.value)\n}\n\nfunction isBranch(item: TreeItem): boolean {\n  return !!childrenOf(item)?.length || isPending(item)\n}\n\nconst expandedSet = computed(() => new Set(expanded.value))\n\n/** The rows on screen, in display order: every node whose ancestors are all expanded. */\nconst visible = computed(() => {\n  const rows: TreeNode[] = []\n  const walk = (items: TreeItem[], level: number, parent: TreeNode | null) => {\n    items.forEach((item, index) => {\n      const node = { item, level, parent, posinset: index + 1, setsize: items.length }\n      rows.push(node)\n      const children = childrenOf(item)\n      if (children && expandedSet.value.has(item.value)) walk(children, level + 1, node)\n    })\n  }\n  walk(props.items, 1, null)\n  return rows\n})\n\nfunction setExpanded(item: TreeItem, open: boolean) {\n  if (open === expandedSet.value.has(item.value)) return\n  expanded.value = open\n    ? [...expanded.value, item.value]\n    : expanded.value.filter((value) => value !== item.value)\n}\n\n// @core\n/**\n * Derives what each checkbox shows. A value in the selection checks its node and the whole subtree\n * under it; a branch then shows checked when all its children are, unchecked when none are, and\n * mixed otherwise, so its own presence in the selection only matters through its children. The map\n * is filled in tree order, which is the order the model is written in.\n */\nfunction deriveCheckStates(chosen: Set<ItemValue>): Map<ItemValue, CheckState> {\n  const states = new Map<ItemValue, CheckState>()\n  const visit = (item: TreeItem, inherited: boolean): CheckState => {\n    states.set(item.value, 'false')\n    const own = inherited || chosen.has(item.value)\n    const children = childrenOf(item)\n    let state: CheckState = own ? 'true' : 'false'\n    if (children?.length) {\n      const childStates = children.map((child) => visit(child, own))\n      state = childStates.every((s) => s === 'true')\n        ? 'true'\n        : childStates.every((s) => s === 'false')\n          ? 'false'\n          : 'mixed'\n    }\n    states.set(item.value, state)\n    return state\n  }\n  props.items.forEach((item) => visit(item, false))\n  return states\n}\n\nconst chosenValues = computed<ItemValue[]>(() => {\n  const value = model.value\n  if (props.selectionMode === 'multiple') return Array.isArray(value) ? value : []\n  return value === null || Array.isArray(value) ? [] : [value]\n})\n\nconst checkStates = computed(() =>\n  props.selectionMode === 'multiple'\n    ? deriveCheckStates(new Set(chosenValues.value))\n    : new Map<ItemValue, CheckState>(),\n)\n\n/** Calls `fn` on a node and on every node under it that is not disabled. */\nfunction eachEnabled(item: TreeItem, fn: (item: TreeItem) => void) {\n  fn(item)\n  childrenOf(item)?.forEach((child) => {\n    if (!child.disabled) eachEnabled(child, fn)\n  })\n}\n\n// @core\n/**\n * Checks a node and its subtree when any leaf of it is unchecked, and unchecks them otherwise.\n * Disabled nodes keep their state. Unchecking also drops the ancestors, which would otherwise check\n * the node again through their subtree. Values the tree does not know, such as the children of a\n * node not loaded yet, are kept at the end.\n */\nfunction toggleCheck(node: TreeNode) {\n  const states = checkStates.value\n  const chosen = new Set<ItemValue>()\n  states.forEach((state, value) => {\n    if (state === 'true') chosen.add(value)\n  })\n  const unknown = chosenValues.value.filter((value) => !states.has(value))\n\n  let check = false\n  eachEnabled(node.item, (item) => {\n    if (!childrenOf(item)?.length && states.get(item.value) !== 'true') check = true\n  })\n  // Only the leaves are added: a branch in the selection would check its disabled children too.\n  eachEnabled(node.item, (item) => {\n    if (!check) chosen.delete(item.value)\n    else if (!childrenOf(item)?.length) chosen.add(item.value)\n  })\n  if (!check) for (let p = node.parent; p; p = p.parent) chosen.delete(p.item.value)\n\n  const next: ItemValue[] = []\n  deriveCheckStates(chosen).forEach((state, value) => {\n    if (state === 'true') next.push(value)\n  })\n  model.value = [...next, ...unknown]\n}\n\nfunction isSelected(item: TreeItem): boolean {\n  return props.selectionMode === 'single' && chosenValues.value[0] === item.value\n}\n\n// @core\n/** What a click or Enter does besides the `activate` event, which follows it. */\nfunction applyDefault(node: TreeNode) {\n  const { item } = node\n  if (props.selectionMode === 'single') model.value = item.value\n  else if (props.selectionMode === 'multiple') toggleCheck(node)\n  else if (item.href === undefined && isBranch(item))\n    setExpanded(item, !expandedSet.value.has(item.value))\n}\n\nfunction activate(node: TreeNode, event: MouseEvent | KeyboardEvent) {\n  applyDefault(node)\n  emit('activate', node.item, event)\n}\n\nasync function load(item: TreeItem) {\n  const loader = props.loadChildren\n  if (!loader) return\n  loading.add(item.value)\n  failed.delete(item.value)\n  try {\n    loaded.set(item.value, await loader(item))\n  } catch {\n    failed.add(item.value)\n    setExpanded(item, false)\n    announce(m.value.treeView.loadError(item.label), false)\n  } finally {\n    loading.delete(item.value)\n  }\n}\n\n// @ssr\n// Loading waits for the client: an expanded lazy node renders busy on the server, then fetches.\nonMounted(() => {\n  // The expanded set is watched too: a pending node shows no children, so its expansion alone\n  // does not change the rows.\n  watch(\n    [visible, expandedSet],\n    ([rows, open]) => {\n      for (const { item } of rows)\n        if (open.has(item.value) && isPending(item) && !loading.has(item.value)) void load(item)\n    },\n    { immediate: true },\n  )\n})\n\nconst treeEl = ref<HTMLElement | null>(null)\nconst rowEls = new Map<ItemValue, HTMLElement>()\nconst rowValues = new WeakMap<Element, ItemValue>()\n\nfunction bindRow(value: ItemValue, el: Element | ComponentPublicInstance | null) {\n  if (el instanceof HTMLElement) {\n    rowEls.set(value, el)\n    rowValues.set(el, value)\n  } else rowEls.delete(value)\n}\n\n// @keyboard @a11y\n/**\n * The single tab stop: the node last focused, or its closest ancestor still on screen once a\n * branch above it folds; before any focus, the first selected node on screen, then the current\n * one, then the first row.\n */\nconst active = ref<TreeNode | null>(null)\nconst tabStop = computed<ItemValue | undefined>(() => {\n  const rows = visible.value\n  const shown = new Set(rows.map((node) => node.item.value))\n  for (let node = active.value; node; node = node.parent)\n    if (shown.has(node.item.value)) return node.item.value\n  const selected =\n    props.selectionMode === 'multiple'\n      ? rows.find((node) => checkStates.value.get(node.item.value) === 'true')\n      : rows.find((node) => isSelected(node.item))\n  return (selected ?? rows.find((node) => node.item.current) ?? rows[0])?.item.value\n})\n\nfunction onFocusin(event: FocusEvent) {\n  const value = rowValues.get(event.target as Element)\n  if (value === undefined) return\n  active.value = visible.value.find((node) => node.item.value === value) ?? null\n}\n\nfunction focusRow(node: TreeNode | undefined) {\n  if (node) rowEls.get(node.item.value)?.focus()\n}\n\nconst typeahead = useTimer()\nlet typed = ''\n\n// @keyboard\n/**\n * Moves to the next row whose label starts with what was typed in the last half-second. Repeating\n * one letter cycles through the rows starting with it.\n */\nfunction typeTo(char: string, index: number) {\n  typed += normalizeText(char)\n  typeahead.start(() => (typed = ''), 500)\n  const rows = visible.value\n  const needle = [...typed].every((c) => c === typed[0]) ? typed[0]! : typed\n  const start = needle.length === 1 ? index + 1 : index\n  for (let i = 0; i < rows.length; i++) {\n    const node = rows[(start + i) % rows.length]!\n    if (normalizeText(node.item.label).startsWith(needle)) return focusRow(node)\n  }\n}\n\n// @keyboard @a11y\nfunction onKeydown(event: KeyboardEvent) {\n  const tree = treeEl.value\n  const value = rowValues.get(event.target as Element)\n  if (!tree || value === undefined || event.altKey || event.ctrlKey || event.metaKey) return\n  const rows = visible.value\n  const index = rows.findIndex((node) => node.item.value === value)\n  const node = rows[index]\n  if (!node) return\n  const { item } = node\n  const isOpen = expandedSet.value.has(item.value)\n  const forward = isRtl(tree) ? 'ArrowLeft' : 'ArrowRight'\n  const back = isRtl(tree) ? 'ArrowRight' : 'ArrowLeft'\n\n  switch (event.key) {\n    case 'ArrowDown':\n      focusRow(rows[index + 1])\n      break\n    case 'ArrowUp':\n      focusRow(rows[index - 1])\n      break\n    case 'Home':\n      focusRow(rows[0])\n      break\n    case 'End':\n      focusRow(rows.at(-1))\n      break\n    case forward:\n      if (!isBranch(item)) break\n      if (!isOpen) {\n        if (!item.disabled) setExpanded(item, true)\n      } else if (rows[index + 1]?.parent?.item === item) focusRow(rows[index + 1])\n      break\n    case back:\n      if (isBranch(item) && isOpen && !item.disabled) setExpanded(item, false)\n      else focusRow(node.parent ?? undefined)\n      break\n    case 'Enter':\n      // A link follows itself: the browser turns Enter into a click, which lands in onRowClick.\n      if (item.href !== undefined) return\n      if (!item.disabled) activate(node, event)\n      break\n    case ' ':\n      // Space selects without following a link, as it does nothing on a link natively.\n      if (item.disabled) break\n      if (item.href !== undefined) applyDefault(node)\n      else activate(node, event)\n      break\n    case '*': {\n      const siblings = node.parent ? childrenOf(node.parent.item)! : props.items\n      const closed = siblings\n        .filter((sibling) => !sibling.disabled && isBranch(sibling))\n        .map((sibling) => sibling.value)\n        .filter((sibling) => !expandedSet.value.has(sibling))\n      if (closed.length) expanded.value = [...expanded.value, ...closed]\n      break\n    }\n    default:\n      if (event.key.length !== 1 || event.key === ' ') return\n      typeTo(event.key, index)\n  }\n  event.preventDefault()\n}\n\nfunction onRowClick(node: TreeNode, event: MouseEvent) {\n  // An inert link has no address left to follow; this also covers a click on its children.\n  if (node.item.disabled) {\n    event.preventDefault()\n    return\n  }\n  activate(node, event)\n}\n\n// The chevron folds without selecting, and without following the link it sits in.\nfunction onChevronClick(node: TreeNode, event: MouseEvent) {\n  event.preventDefault()\n  event.stopPropagation()\n  if (!node.item.disabled && isBranch(node.item))\n    setExpanded(node.item, !expandedSet.value.has(node.item.value))\n}\n\nfunction slotProps(node: TreeNode): TreeItemSlotProps {\n  return {\n    item: node.item,\n    level: node.level,\n    expanded: expandedSet.value.has(node.item.value) && !isPending(node.item),\n  }\n}\n\nfunction ariaExpanded(item: TreeItem) {\n  return isBranch(item) ? String(expandedSet.value.has(item.value)) : undefined\n}\n\nfunction ariaCurrent(item: TreeItem) {\n  if (!item.current) return undefined\n  return item.href !== undefined ? 'page' : 'true'\n}\n\n// The root is a wrapper holding the live region, which a tree may not contain: these two reach\n// the tree itself.\ndefineExpose({\n  /** Moves the focus to the tree's tab stop: the last focused node, else the selected or current one. */\n  focus: (options?: FocusOptions) =>\n    tabStop.value !== undefined && rowEls.get(tabStop.value)?.focus(options),\n  /** The `role=\"tree\"` element, which also receives the consumer's attributes. */\n  el: treeEl,\n})\n</script>\n\n<template>\n  <div class=\"v-tree-view\" :class=\"rootClass\" :style=\"rootStyle\">\n    <ul\n      ref=\"treeEl\"\n      class=\"v-tree v-control\"\n      role=\"tree\"\n      :data-size=\"size\"\n      :aria-multiselectable=\"selectionMode === 'multiple' || undefined\"\n      v-bind=\"forwardedAttrs\"\n      :aria-label=\"ariaLabel\"\n      @keydown=\"onKeydown\"\n      @focusin=\"onFocusin\"\n    >\n      <li v-for=\"node in visible\" :key=\"node.item.value\" class=\"v-tree-node\" role=\"none\">\n        <component\n          :is=\"node.item.href !== undefined ? 'a' : 'div'\"\n          :ref=\"(el: Element | ComponentPublicInstance | null) => bindRow(node.item.value, el)\"\n          class=\"v-tree-row\"\n          role=\"treeitem\"\n          :style=\"{ '--tree-level': node.level - 1 }\"\n          :href=\"node.item.disabled ? undefined : node.item.href\"\n          :tabindex=\"tabStop === node.item.value ? 0 : -1\"\n          :aria-level=\"node.level\"\n          :aria-setsize=\"node.setsize\"\n          :aria-posinset=\"node.posinset\"\n          :aria-expanded=\"ariaExpanded(node.item)\"\n          :aria-selected=\"selectionMode === 'single' ? String(isSelected(node.item)) : undefined\"\n          :aria-checked=\"\n            selectionMode === 'multiple' ? checkStates.get(node.item.value) : undefined\n          \"\n          :aria-current=\"ariaCurrent(node.item)\"\n          :aria-disabled=\"node.item.disabled || undefined\"\n          :aria-busy=\"loading.has(node.item.value) || undefined\"\n          :data-current=\"node.item.current ? '' : undefined\"\n          @click=\"onRowClick(node, $event)\"\n        >\n          <!-- Decorative: the row is the control, and the arrows fold it. -->\n          <span class=\"v-tree-toggle\" aria-hidden=\"true\" @click=\"onChevronClick(node, $event)\">\n            <VSpinner v-if=\"loading.has(node.item.value)\" />\n            <VIcon\n              v-else-if=\"isBranch(node.item)\"\n              class=\"v-tree-chevron\"\n              :name=\"chevronRightIcon\"\n              mirrored\n            />\n          </span>\n          <VCheckMark v-if=\"selectionMode === 'multiple'\" />\n          <slot name=\"icon\" v-bind=\"slotProps(node)\">\n            <VIcon v-if=\"node.item.icon\" class=\"v-tree-icon\" v-bind=\"iconProps(node.item.icon)\" />\n          </slot>\n          <span class=\"v-tree-label\"\n            ><slot name=\"label\" v-bind=\"slotProps(node)\">{{ node.item.label }}</slot></span\n          >\n          <template v-if=\"failed.has(node.item.value)\">\n            <VIcon class=\"v-tree-error\" :name=\"errorIcon\" />\n            <span class=\"v-visually-hidden\">{{ m.treeView.loadFailed }}</span>\n          </template>\n          <span v-if=\"$slots.end\" class=\"v-tree-end\"\n            ><slot name=\"end\" v-bind=\"slotProps(node)\"\n          /></span>\n        </component>\n      </li>\n    </ul>\n    <div class=\"v-visually-hidden\" role=\"status\" aria-live=\"polite\">{{ announcement }}</div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-tree {\n    /* One level of indentation puts a child's chevron under its parent's icon. */\n    --tree-indent: calc(var(--vectis-icon-size) + var(--control-gap));\n\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-tree-row {\n    /* See VSideNavigation: the radius cannot exceed half the height of a single row. */\n    --tree-row-radius: min(var(--vectis-radius-interactive), calc(var(--control-height) / 2));\n\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    min-block-size: var(--control-height);\n    padding-block: var(--vectis-space-1);\n    padding-inline: calc(var(--vectis-space-2) + var(--tree-level, 0) * var(--tree-indent))\n      var(--vectis-space-2);\n    border-radius: var(--tree-row-radius);\n    color: var(--vectis-color-text);\n    font-size: var(--control-font-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .v-tree-row:hover:not([aria-disabled='true']) {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  /* Drawn inwards, so that neighbouring rows cannot cover it. */\n  .v-tree-row:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-tree-row:is([aria-selected='true'], [data-current]) {\n    background: var(--vectis-color-accent-surface);\n    color: var(--vectis-color-accent-text);\n  }\n\n  /* The selected row is already tinted, so its hover deepens that tint; the VMenuItem idiom. */\n  .v-tree-row:is([aria-selected='true'], [data-current]):hover:not([aria-disabled='true']) {\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-accent-surface),\n      var(--vectis-color-accent-text) 8%\n    );\n  }\n\n  .v-tree-row:is([aria-selected='true'], [data-current]) :is(.v-tree-icon, .v-tree-toggle) {\n    color: inherit;\n  }\n\n  .v-tree-row[data-current] .v-tree-label {\n    font-weight: var(--vectis-text-label-weight);\n  }\n\n  .v-tree-toggle {\n    display: inline-grid;\n    flex: none;\n    place-items: center;\n    inline-size: var(--vectis-icon-size);\n    block-size: var(--vectis-icon-size);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-tree-chevron {\n    transition: rotate var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-tree-row[aria-expanded='true'] .v-tree-chevron {\n    rotate: 90deg;\n  }\n\n  /* The mirrored chevron points left, and turns the other way to point down. */\n  .v-tree-row[aria-expanded='true'] .v-tree-chevron:dir(rtl) {\n    rotate: -90deg;\n  }\n\n  .v-tree-icon {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-tree-label {\n    flex: 1;\n    min-inline-size: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-tree-end {\n    flex: none;\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-tree-error {\n    flex: none;\n    color: var(--vectis-color-danger-text);\n  }\n\n  .v-tree-row:is([aria-checked='true'], [aria-checked='mixed']) .v-check-mark {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-tree-row[aria-checked='true'] .v-check-mark-tick,\n  .v-tree-row[aria-checked='mixed'] .v-check-mark-dash {\n    opacity: 1;\n  }\n\n  /* Last of the colour rules, so that a disabled node reads as such whatever its state. */\n  .v-tree-row[aria-disabled='true'] {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-tree-row[aria-disabled='true'] :is(.v-tree-icon, .v-tree-toggle, .v-tree-end) {\n    color: inherit;\n  }\n\n  .v-tree-row[aria-disabled='true'] .v-check-mark {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * Forced colours flatten the tint of the selected row: it takes the system selection pair,\n   * repeated to (0,4,0) above its own hover.\n   */\n  @media (forced-colors: active) {\n    .v-tree-row.v-tree-row:is([aria-selected='true'], [data-current]):not([aria-disabled='true']) {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n\n    .v-tree-row:is([aria-checked='true'], [aria-checked='mixed']):not([aria-disabled='true'])\n      .v-check-mark {\n      forced-color-adjust: none;\n      background: Highlight;\n      border-color: Highlight;\n      color: HighlightText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-tree-chevron {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyGA,IAAM,IAAQ,GAYR,IAAQ,GAA+B,GAAA,YAAkB,GAGzD,IAAW,GAAwB,GAAC,UAAiC,GAErE,KAAO,IAqBP,EAAE,eAAW,eAAW,uBAAmB,EAAa,GACxD,IAAI,EAAY,GAChB,KAAY,QAAmB,EAAM,SAAS,EAAE,MAAM,SAAS,KAAK,GACpE,EAAE,QAAQ,IAAc,iBAAa,GAAiB,GAEtD,IAAS,kBAAgB,IAAI,IAA2B,CAAC,GACzD,IAAU,kBAAgB,IAAI,IAAe,CAAC,GAC9C,IAAS,kBAAgB,IAAI,IAAe,CAAC;EAEnD,SAAS,EAAW,GAAwC;GAC1D,OAAO,EAAK,YAAY,EAAO,IAAI,EAAK,KAAK;EAC/C;EAEA,SAAS,EAAU,GAAyB;GAC1C,OAAO,CAAC,CAAC,EAAM,gBAAgB,CAAC,CAAC,EAAK,QAAQ,CAAC,EAAK,YAAY,CAAC,EAAO,IAAI,EAAK,KAAK;EACxF;EAEA,SAAS,EAAS,GAAyB;GACzC,OAAO,CAAC,CAAC,EAAW,CAAI,CAAC,EAAE,UAAU,EAAU,CAAI;EACrD;EAEA,IAAM,IAAc,QAAe,IAAI,IAAI,EAAS,KAAK,CAAC,GAGpD,IAAU,QAAe;GAC7B,IAAM,IAAmB,CAAC,GACpB,KAAQ,GAAmB,GAAe,MAA4B;IAC1E,EAAM,SAAS,GAAM,MAAU;KAC7B,IAAM,IAAO;MAAE;MAAM;MAAO;MAAQ,UAAU,IAAQ;MAAG,SAAS,EAAM;KAAO;KAC/E,EAAK,KAAK,CAAI;KACd,IAAM,IAAW,EAAW,CAAI;KAChC,AAAI,KAAY,EAAY,MAAM,IAAI,EAAK,KAAK,KAAG,EAAK,GAAU,IAAQ,GAAG,CAAI;IACnF,CAAC;GACH;GAEA,OADA,EAAK,EAAM,OAAO,GAAG,IAAI,GAClB;EACT,CAAC;EAED,SAAS,EAAY,GAAgB,GAAe;GAC9C,MAAS,EAAY,MAAM,IAAI,EAAK,KAAK,MAC7C,EAAS,QAAQ,IACb,CAAC,GAAG,EAAS,OAAO,EAAK,KAAK,IAC9B,EAAS,MAAM,QAAQ,MAAU,MAAU,EAAK,KAAK;EAC3D;EASA,SAAS,EAAkB,GAAoD;GAC7E,IAAM,oBAAS,IAAI,IAA2B,GACxC,KAAS,GAAgB,MAAmC;IAChE,EAAO,IAAI,EAAK,OAAO,OAAO;IAC9B,IAAM,IAAM,KAAa,EAAO,IAAI,EAAK,KAAK,GACxC,IAAW,EAAW,CAAI,GAC5B,IAAoB,IAAM,SAAS;IACvC,IAAI,GAAU,QAAQ;KACpB,IAAM,IAAc,EAAS,KAAK,MAAU,EAAM,GAAO,CAAG,CAAC;KAC7D,IAAQ,EAAY,OAAO,MAAM,MAAM,MAAM,IACzC,SACA,EAAY,OAAO,MAAM,MAAM,OAAO,IACpC,UACA;IACR;IAEA,OADA,EAAO,IAAI,EAAK,OAAO,CAAK,GACrB;GACT;GAEA,OADA,EAAM,MAAM,SAAS,MAAS,EAAM,GAAM,EAAK,CAAC,GACzC;EACT;EAEA,IAAM,IAAe,QAA4B;GAC/C,IAAM,IAAQ,EAAM;GAEpB,OADI,EAAM,kBAAkB,aAAmB,MAAM,QAAQ,CAAK,IAAI,IAAQ,CAAC,IACxE,MAAU,QAAQ,MAAM,QAAQ,CAAK,IAAI,CAAC,IAAI,CAAC,CAAK;EAC7D,CAAC,GAEK,IAAc,QAClB,EAAM,kBAAkB,aACpB,EAAkB,IAAI,IAAI,EAAa,KAAK,CAAC,oBAC7C,IAAI,IAA2B,CACrC;EAGA,SAAS,EAAY,GAAgB,GAA8B;GAEjE,AADA,EAAG,CAAI,GACP,EAAW,CAAI,CAAC,EAAE,SAAS,MAAU;IACnC,AAAK,EAAM,YAAU,EAAY,GAAO,CAAE;GAC5C,CAAC;EACH;EASA,SAAS,GAAY,GAAgB;GACnC,IAAM,IAAS,EAAY,OACrB,oBAAS,IAAI,IAAe;GAClC,EAAO,SAAS,GAAO,MAAU;IAC/B,AAAI,MAAU,UAAQ,EAAO,IAAI,CAAK;GACxC,CAAC;GACD,IAAM,IAAU,EAAa,MAAM,QAAQ,MAAU,CAAC,EAAO,IAAI,CAAK,CAAC,GAEnE,IAAQ;GASZ,IARA,EAAY,EAAK,OAAO,MAAS;IAC/B,AAAI,CAAC,EAAW,CAAI,CAAC,EAAE,UAAU,EAAO,IAAI,EAAK,KAAK,MAAM,WAAQ,IAAQ;GAC9E,CAAC,GAED,EAAY,EAAK,OAAO,MAAS;IAC/B,AAAK,IACK,EAAW,CAAI,CAAC,EAAE,UAAQ,EAAO,IAAI,EAAK,KAAK,IAD7C,EAAO,OAAO,EAAK,KAAK;GAEtC,CAAC,GACG,CAAC,GAAO,KAAK,IAAI,IAAI,EAAK,QAAQ,GAAG,IAAI,EAAE,QAAQ,EAAO,OAAO,EAAE,KAAK,KAAK;GAEjF,IAAM,IAAoB,CAAC;GAI3B,AAHA,EAAkB,CAAM,CAAC,CAAC,SAAS,GAAO,MAAU;IAClD,AAAI,MAAU,UAAQ,EAAK,KAAK,CAAK;GACvC,CAAC,GACD,EAAM,QAAQ,CAAC,GAAG,GAAM,GAAG,CAAO;EACpC;EAEA,SAAS,EAAW,GAAyB;GAC3C,OAAO,EAAM,kBAAkB,YAAY,EAAa,MAAM,OAAO,EAAK;EAC5E;EAIA,SAAS,EAAa,GAAgB;GACpC,IAAM,EAAE,YAAS;GACjB,AAAI,EAAM,kBAAkB,WAAU,EAAM,QAAQ,EAAK,QAChD,EAAM,kBAAkB,aAAY,GAAY,CAAI,IACpD,EAAK,SAAS,KAAA,KAAa,EAAS,CAAI,KAC/C,EAAY,GAAM,CAAC,EAAY,MAAM,IAAI,EAAK,KAAK,CAAC;EACxD;EAEA,SAAS,EAAS,GAAgB,GAAmC;GAEnE,AADA,EAAa,CAAI,GACjB,GAAK,YAAY,EAAK,MAAM,CAAK;EACnC;EAEA,eAAe,GAAK,GAAgB;GAClC,IAAM,IAAS,EAAM;GAChB,OAEL;IADA,EAAQ,IAAI,EAAK,KAAK,GACtB,EAAO,OAAO,EAAK,KAAK;IACxB,IAAI;KACF,EAAO,IAAI,EAAK,OAAO,MAAM,EAAO,CAAI,CAAC;IAC3C,QAAQ;KAGN,AAFA,EAAO,IAAI,EAAK,KAAK,GACrB,EAAY,GAAM,EAAK,GACvB,GAAS,EAAE,MAAM,SAAS,UAAU,EAAK,KAAK,GAAG,EAAK;IACxD,UAAU;KACR,EAAQ,OAAO,EAAK,KAAK;IAC3B;GATwB;EAU1B;EAIA,SAAgB;GAGd,GACE,CAAC,GAAS,CAAW,IACpB,CAAC,GAAM,OAAU;IAChB,KAAK,IAAM,EAAE,aAAU,GACrB,AAAI,EAAK,IAAI,EAAK,KAAK,KAAK,EAAU,CAAI,KAAK,CAAC,EAAQ,IAAI,EAAK,KAAK,KAAG,GAAU,CAAI;GAC3F,GACA,EAAE,WAAW,GAAK,CACpB;EACF,CAAC;EAED,IAAM,IAAS,EAAwB,IAAI,GACrC,oBAAS,IAAI,IAA4B,GACzC,oBAAY,IAAI,QAA4B;EAElD,SAAS,GAAQ,GAAkB,GAA8C;GAC/E,AAAI,aAAc,eAChB,EAAO,IAAI,GAAO,CAAE,GACpB,EAAU,IAAI,GAAI,CAAK,KAClB,EAAO,OAAO,CAAK;EAC5B;EAQA,IAAM,KAAS,EAAqB,IAAI,GAClC,IAAU,QAAsC;GACpD,IAAM,IAAO,EAAQ,OACf,IAAQ,IAAI,IAAI,EAAK,KAAK,MAAS,EAAK,KAAK,KAAK,CAAC;GACzD,KAAK,IAAI,IAAO,GAAO,OAAO,GAAM,IAAO,EAAK,QAC9C,IAAI,EAAM,IAAI,EAAK,KAAK,KAAK,GAAG,OAAO,EAAK,KAAK;GAKnD,SAHE,EAAM,kBAAkB,aACpB,EAAK,MAAM,MAAS,EAAY,MAAM,IAAI,EAAK,KAAK,KAAK,MAAM,MAAM,IACrE,EAAK,MAAM,MAAS,EAAW,EAAK,IAAI,CAAC,MAC3B,EAAK,MAAM,MAAS,EAAK,KAAK,OAAO,KAAK,EAAK,GAAA,EAAK,KAAK;EAC/E,CAAC;EAED,SAAS,GAAU,GAAmB;GACpC,IAAM,IAAQ,EAAU,IAAI,EAAM,MAAiB;GAC/C,MAAU,KAAA,MACd,GAAO,QAAQ,EAAQ,MAAM,MAAM,MAAS,EAAK,KAAK,UAAU,CAAK,KAAK;EAC5E;EAEA,SAAS,EAAS,GAA4B;GAC5C,AAAI,KAAM,EAAO,IAAI,EAAK,KAAK,KAAK,CAAC,EAAE,MAAM;EAC/C;EAEA,IAAM,KAAY,GAAS,GACvB,IAAQ;EAOZ,SAAS,GAAO,GAAc,GAAe;GAE3C,AADA,KAAS,EAAc,CAAI,GAC3B,GAAU,YAAa,IAAQ,IAAK,GAAG;GACvC,IAAM,IAAO,EAAQ,OACf,IAAS,CAAC,GAAG,CAAK,CAAC,CAAC,OAAO,MAAM,MAAM,EAAM,EAAE,IAAI,EAAM,KAAM,GAC/D,IAAQ,EAAO,WAAW,IAAI,IAAQ,IAAI;GAChD,KAAK,IAAI,IAAI,GAAG,IAAI,EAAK,QAAQ,KAAK;IACpC,IAAM,IAAO,GAAM,IAAQ,KAAK,EAAK;IACrC,IAAI,EAAc,EAAK,KAAK,KAAK,CAAC,CAAC,WAAW,CAAM,GAAG,OAAO,EAAS,CAAI;GAC7E;EACF;EAGA,SAAS,GAAU,GAAsB;GACvC,IAAM,IAAO,EAAO,OACd,IAAQ,EAAU,IAAI,EAAM,MAAiB;GACnD,IAAI,CAAC,KAAQ,MAAU,KAAA,KAAa,EAAM,UAAU,EAAM,WAAW,EAAM,SAAS;GACpF,IAAM,IAAO,EAAQ,OACf,IAAQ,EAAK,WAAW,MAAS,EAAK,KAAK,UAAU,CAAK,GAC1D,IAAO,EAAK;GAClB,IAAI,CAAC,GAAM;GACX,IAAM,EAAE,YAAS,GACX,IAAS,EAAY,MAAM,IAAI,EAAK,KAAK,GACzC,IAAU,EAAM,CAAI,IAAI,cAAc,cACtC,KAAO,EAAM,CAAI,IAAI,eAAe;GAE1C,QAAQ,EAAM,KAAd;IACE,KAAK;KACH,EAAS,EAAK,IAAQ,EAAE;KACxB;IACF,KAAK;KACH,EAAS,EAAK,IAAQ,EAAE;KACxB;IACF,KAAK;KACH,EAAS,EAAK,EAAE;KAChB;IACF,KAAK;KACH,EAAS,EAAK,GAAG,EAAE,CAAC;KACpB;IACF,KAAK;KACH,IAAI,CAAC,EAAS,CAAI,GAAG;KACrB,AAAK,IAEM,EAAK,IAAQ,EAAE,EAAE,QAAQ,SAAS,KAAM,EAAS,EAAK,IAAQ,EAAE,IADpE,EAAK,YAAU,EAAY,GAAM,EAAI;KAE5C;IACF,KAAK;KACH,AAAI,EAAS,CAAI,KAAK,KAAU,CAAC,EAAK,WAAU,EAAY,GAAM,EAAK,IAClE,EAAS,EAAK,UAAU,KAAA,CAAS;KACtC;IACF,KAAK;KAEH,IAAI,EAAK,SAAS,KAAA,GAAW;KAC7B,AAAK,EAAK,YAAU,EAAS,GAAM,CAAK;KACxC;IACF,KAAK;KAEH,IAAI,EAAK,UAAU;KACnB,AAAI,EAAK,SAAS,KAAA,IACb,EAAS,GAAM,CAAK,IADI,EAAa,CAAI;KAE9C;IACF,KAAK,KAAK;KAER,IAAM,KADW,EAAK,SAAS,EAAW,EAAK,OAAO,IAAI,IAAK,EAAM,MAAA,CAElE,QAAQ,MAAY,CAAC,EAAQ,YAAY,EAAS,CAAO,CAAC,CAAA,CAC1D,KAAK,MAAY,EAAQ,KAAK,CAAA,CAC9B,QAAQ,MAAY,CAAC,EAAY,MAAM,IAAI,CAAO,CAAC;KACtD,AAAI,EAAO,WAAQ,EAAS,QAAQ,CAAC,GAAG,EAAS,OAAO,GAAG,CAAM;KACjE;IACF;IACA;KACE,IAAI,EAAM,IAAI,WAAW,KAAK,EAAM,QAAQ,KAAK;KACjD,GAAO,EAAM,KAAK,CAAK;GAC3B;GACA,EAAM,eAAe;EACvB;EAEA,SAAS,GAAW,GAAgB,GAAmB;GAErD,IAAI,EAAK,KAAK,UAAU;IACtB,EAAM,eAAe;IACrB;GACF;GACA,EAAS,GAAM,CAAK;EACtB;EAGA,SAAS,GAAe,GAAgB,GAAmB;GAGzD,AAFA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GAClB,CAAC,EAAK,KAAK,YAAY,EAAS,EAAK,IAAI,KAC3C,EAAY,EAAK,MAAM,CAAC,EAAY,MAAM,IAAI,EAAK,KAAK,KAAK,CAAC;EAClE;EAEA,SAAS,EAAU,GAAmC;GACpD,OAAO;IACL,MAAM,EAAK;IACX,OAAO,EAAK;IACZ,UAAU,EAAY,MAAM,IAAI,EAAK,KAAK,KAAK,KAAK,CAAC,EAAU,EAAK,IAAI;GAC1E;EACF;EAEA,SAAS,GAAa,GAAgB;GACpC,OAAO,EAAS,CAAI,IAAI,OAAO,EAAY,MAAM,IAAI,EAAK,KAAK,CAAC,IAAI,KAAA;EACtE;EAEA,SAAS,GAAY,GAAgB;GAC9B,MAAK,SACV,OAAO,EAAK,SAAS,KAAA,IAAqB,SAAT;EACnC;SAIA,EAAa;GAEX,QAAQ,MACN,EAAQ,UAAU,KAAA,KAAa,EAAO,IAAI,EAAQ,KAAK,CAAC,EAAE,MAAM,CAAO;GAEzE,IAAI;EACN,CAAC,mBAIC,EA+DM,OAAA;GA/DD,OAAK,GAAA,CAAC,eAAsB,EAAA,EAAA,CAAS,CAAA;GAAG,OAAK,EAAE,EAAA,EAAA,CAAS;MAC3D,EA4DK,MA5DL,EA4DK;YA3DC;GAAJ,KAAI;GACJ,OAAM;GACN,MAAK;GACJ,aAAW,EAAA;GACX,wBAAsB,EAAA,kBAAa,cAAmB,KAAA;KAC/C,EAAA,EAAA,GAAc;GACrB,cAAY,EAAA,EAAA;GACH;GACA;eAEV,EAgDK,GAAA,MAAA,GAhDc,EAAA,QAAR,YAAX,EAgDK,MAAA;GAhDwB,KAAK,EAAK,KAAK;GAAO,OAAM;GAAc,MAAK;YAC1E,EA8CY,GA7CL,EAAK,KAAK,SAAS,KAAA,IAAS,QAAA,GAAA,GAAA;;GAChC,MAAM,MAAiD,GAAQ,EAAK,KAAK,OAAO,CAAE;GACnF,OAAM;GACN,MAAK;GACJ,OAAK,EAAA,EAAA,gBAAoB,EAAK,QAAK,EAAA,CAAA;GACnC,MAAM,EAAK,KAAK,WAAW,KAAA,IAAY,EAAK,KAAK;GACjD,UAAU,EAAA,UAAY,EAAK,KAAK,QAAK,IAAA;GACrC,cAAY,EAAK;GACjB,gBAAc,EAAK;GACnB,iBAAe,EAAK;GACpB,iBAAe,GAAa,EAAK,IAAI;GACrC,iBAAe,EAAA,kBAAa,WAAgB,OAAO,EAAW,EAAK,IAAI,CAAA,IAAK,KAAA;GAC5E,gBAA2B,EAAA,kBAAa,aAAkB,EAAA,MAAY,IAAI,EAAK,KAAK,KAAK,IAAI,KAAA;GAG7F,gBAAc,GAAY,EAAK,IAAI;GACnC,iBAAe,EAAK,KAAK,YAAY,KAAA;GACrC,aAAW,EAAA,CAAA,CAAO,CAAC,IAAI,EAAK,KAAK,KAAK,KAAK,KAAA;GAC3C,gBAAc,EAAK,KAAK,UAAO,KAAQ,KAAA;GACvC,UAAK,MAAE,GAAW,GAAM,CAAM;;qBAWxB;IARP,EAQO,QAAA;KARD,OAAM;KAAgB,eAAY;KAAQ,UAAK,MAAE,GAAe,GAAM,CAAM;QAChE,EAAA,CAAA,CAAO,CAAC,IAAI,EAAK,KAAK,KAAK,KAAA,EAAA,GAA3C,EAAgD,GAAA,EAAA,KAAA,EAAA,CAAA,KAEnC,EAAS,EAAK,IAAI,KAAA,EAAA,GAD/B,EAKE,GAAA;;KAHA,OAAM;KACL,MAAM,EAAA,CAAA;KACP,UAAA;;IAGc,EAAA,kBAAa,cAAA,EAAA,GAA/B,EAAkD,GAAA,EAAA,KAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAClD,EAEO,EAAA,QAAA,QAFP,EAEO,EAAA,SAAA,GAAA,GAFmB,EAAU,CAAI,CAAA,SAEjC,CADQ,EAAK,KAAK,QAAA,EAAA,GAAvB,EAAsF,GAAtF,EAAsF;;KAAzD,OAAM;wBAAsB,EAAA,CAAA,CAAS,CAAC,EAAK,KAAK,IAAI,CAAA,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA;IAEnF,EAEC,QAFD,IAEC,CADE,EAAwE,EAAA,QAAA,SAAxE,EAAwE,EAAA,SAAA,GAAA,GAA7C,EAAU,CAAI,CAAA,SAA+B,CAAA,GAAA,EAAzB,EAAK,KAAK,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;IAEjD,EAAA,CAAA,CAAM,CAAC,IAAI,EAAK,KAAK,KAAK,KAAA,EAAA,GAA1C,EAGW,GAAA,EAAA,KAAA,EAAA,GAAA,CAFT,GAAgD,GAAA;KAAzC,OAAM;KAAgB,MAAM,EAAA,CAAA;2BACnC,EAAkE,QAAlE,IAAkE,EAA/B,EAAA,CAAA,CAAC,CAAC,SAAS,UAAU,GAAA,CAAA,CAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA;IAE9CA,EAAAA,OAAO,OAAA,EAAA,GAAnB,EAES,QAFT,IAES,CADN,EACD,EAAA,QAAA,OADC,EACD,EAAA,SAAA,GAAA,GAD0B,EAAU,CAAI,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;;;;;;;;;;;;;;;;;;4BAKhD,EAAwF,OAAxF,IAAwF,EAArB,EAAA,EAAA,CAAY,GAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/components/VTypography/VTypography.d.ts

@@ -30,8 +30,8 @@ type __VLS_Slots = {
 };
 declare const __VLS_base: import('vue').DefineComponent<TypographyProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TypographyProps> & Readonly<{}>, {
     variant: TypographyVariant;
-    as: string;
     tone: TypographyTone;
+    as: string;
     truncate: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/VVirtualList/VVirtualList.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-virtual-list{overflow-anchor:none;border-radius:var(--vectis-radius-xs);display:block;position:relative;overflow-y:auto}.v-virtual-list:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-virtual-list-item{display:flow-root}.v-virtual-list-more{justify-content:center;align-items:center;gap:var(--vectis-space-2);min-block-size:var(--vectis-control-height-md);padding:var(--vectis-space-2);font-size:var(--vectis-text-body-sm-size);font-weight:var(--vectis-text-body-sm-weight);line-height:var(--vectis-text-body-sm-leading);color:var(--vectis-color-text-muted);display:flex}}

package/dist/components/VVirtualList/VVirtualList.d.ts

@@ -0,0 +1,78 @@
+/** Where `scrollToIndex` brings the row: to the top, the middle, the bottom, or barely in view. */
+export type VirtualListAlign = ScrollLogicalPosition;
+/** What the default slot receives for each rendered row. */
+export interface VirtualListItemSlotProps<T> {
+    item: T;
+    index: number;
+}
+/** The props of VVirtualList, for a row type `T`. */
+export interface VirtualListProps<T> {
+    /** The rows of the list, all of them: only those near the viewport are rendered. */
+    items: T[];
+    /**
+     * The field identifying a row, under which its measured height is remembered. Without it a
+     * row is identified by its position, which suits a list that only grows at the end.
+     */
+    itemKey?: string;
+    /**
+     * The height assumed for a row not rendered yet, in pixels. Each row is measured once it
+     * renders, so this is only an estimate; the closer it is, the steadier the scrollbar.
+     */
+    itemSize?: number;
+    /** How many rows to render beyond each edge of the viewport, so a fast scroll shows no gap. */
+    overscan?: number;
+    /**
+     * How many rows to render before the list can measure its viewport: on the server and until
+     * the page is hydrated.
+     */
+    initialCount?: number;
+    /**
+     * The height of the list: a number of pixels or any CSS length. Without it, give the list a
+     * bounded height in your own CSS; a list that grows with its content renders every row.
+     */
+    height?: number | string;
+    /** The accessible name of the list. */
+    label?: string;
+    /** Says that rows are being loaded: a row with a spinner ends the list. */
+    loading?: boolean;
+    /** What that row says, and what the spinner is announced as. */
+    loadingText?: string;
+    /**
+     * Says that there are more rows to come, which makes the list ask for them as its end comes
+     * into view. The total is then announced as unknown.
+     */
+    hasMore?: boolean;
+}
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<VirtualListProps<T> & {
+        "onLoad-more"?: (() => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import('vue').ShallowUnwrapRef<{
+        /**
+         * Scrolls the list until a row is in view, rendering it first if needed. `align` places it at
+         * the top, the middle or the bottom; by default it moves as little as possible.
+         */
+        scrollToIndex: (index: number, align?: VirtualListAlign) => Promise<void>;
+        /** The scrolling element, which carries the list role. */
+        el: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    }>) => void;
+    attrs: any;
+    slots: {
+        /** One row of the list. */
+        default(props: VirtualListItemSlotProps<T>): unknown;
+        /** Replaces the spinner and the text of the loading row. */
+        loading?(): unknown;
+    };
+    emit: (evt: "load-more") => void;
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/VVirtualList/VVirtualList.js

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

package/dist/components/VVirtualList/VVirtualList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VVirtualList.js","names":[],"sources":["../../../src/components/VVirtualList/VVirtualList.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\n// @a11y @ssr @core\n/**\n * A list too long to render whole: only the rows near its viewport exist in the page. It is its\n * own scroll container, focusable so the keyboard can scroll it, and each row says where it\n * stands in the whole list. Rows are measured as they render, so they may differ in height.\n */\nimport { computed, ref, toRaw, watch } from 'vue'\n\nimport VSpinner from '../VSpinner/VSpinner.vue'\nimport { useInfiniteScroll } from '../../composables/useInfiniteScroll'\nimport { useVirtualList } from '../../composables/useVirtualList'\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\nimport { isDev } from '../../utils/env'\n\n/** Where `scrollToIndex` brings the row: to the top, the middle, the bottom, or barely in view. */\nexport type VirtualListAlign = ScrollLogicalPosition\n\n/** What the default slot receives for each rendered row. */\nexport interface VirtualListItemSlotProps<T> {\n  item: T\n  index: number\n}\n\n/** The props of VVirtualList, for a row type `T`. */\nexport interface VirtualListProps<T> {\n  /** The rows of the list, all of them: only those near the viewport are rendered. */\n  items: T[]\n  /**\n   * The field identifying a row, under which its measured height is remembered. Without it a\n   * row is identified by its position, which suits a list that only grows at the end.\n   */\n  itemKey?: string\n  /**\n   * The height assumed for a row not rendered yet, in pixels. Each row is measured once it\n   * renders, so this is only an estimate; the closer it is, the steadier the scrollbar.\n   */\n  itemSize?: number\n  /** How many rows to render beyond each edge of the viewport, so a fast scroll shows no gap. */\n  overscan?: number\n  /**\n   * How many rows to render before the list can measure its viewport: on the server and until\n   * the page is hydrated.\n   */\n  initialCount?: number\n  /**\n   * The height of the list: a number of pixels or any CSS length. Without it, give the list a\n   * bounded height in your own CSS; a list that grows with its content renders every row.\n   */\n  height?: number | string\n  /** The accessible name of the list. */\n  label?: string\n  /** Says that rows are being loaded: a row with a spinner ends the list. */\n  loading?: boolean\n  /** What that row says, and what the spinner is announced as. */\n  loadingText?: string\n  /**\n   * Says that there are more rows to come, which makes the list ask for them as its end comes\n   * into view. The total is then announced as unknown.\n   */\n  hasMore?: boolean\n}\n\nconst props = withDefaults(defineProps<VirtualListProps<T>>(), {\n  itemKey: undefined,\n  itemSize: 40,\n  overscan: 5,\n  initialCount: 10,\n  height: undefined,\n  label: undefined,\n  loading: false,\n  loadingText: undefined,\n  hasMore: false,\n})\n\nconst emit = defineEmits<{\n  /** The end of the list has come into view: send the next rows. */\n  'load-more': []\n}>()\n\ndefineSlots<{\n  /** One row of the list. */\n  default(props: VirtualListItemSlotProps<T>): unknown\n  /** Replaces the spinner and the text of the loading row. */\n  loading?(): unknown\n}>()\n\nconst m = useMessages()\nconst resolvedLoadingText = computed(() => props.loadingText ?? m.value.common.loading)\n\nconst listEl = ref<HTMLElement | null>(null)\nconst sentinelEl = ref<HTMLElement | null>(null)\n\n// Read through the raw array: computing the offsets visits every row's key, and a reactive read\n// for each of a hundred thousand rows is what would make scrolling stutter. The length is still\n// read reactively, so rows pushed in place are seen.\nfunction keyOf(index: number): unknown {\n  if (!props.itemKey) return index\n  const item = toRaw(props.items)[index] as Record<string, unknown> | undefined\n  return item?.[props.itemKey]\n}\n\n// @a11y\n// The row holding the focus stays rendered while the list scrolls away from it: dropping it\n// would send the focus back to the page.\nconst focusedIndex = ref(-1)\n\nconst virtualList = useVirtualList({\n  scrollEl: listEl,\n  count: () => props.items.length,\n  key: keyOf,\n  itemSize: () => props.itemSize,\n  overscan: () => props.overscan,\n  initialCount: () => props.initialCount,\n  pinned: () => (focusedIndex.value >= 0 ? [focusedIndex.value] : []),\n})\nconst { segments, measure } = virtualList\n\nfunction rowOf(target: EventTarget | null) {\n  if (!(target instanceof Element)) return -1\n  const row = target.closest('.v-virtual-list-item')\n  if (!row || row.parentElement !== listEl.value) return -1\n  return Number((row as HTMLElement).dataset.index)\n}\n\nfunction onFocusin(event: FocusEvent) {\n  focusedIndex.value = rowOf(event.target)\n}\n\nfunction onFocusout(event: FocusEvent) {\n  focusedIndex.value = rowOf(event.relatedTarget)\n}\n\nuseInfiniteScroll({\n  sentinelEl,\n  root: () => listEl.value,\n  canLoad: () => props.hasMore && !props.loading,\n  loaded: () => props.items,\n  onLoadMore: () => emit('load-more'),\n})\n\n// @devwarn\n// A list without a bounded height grows with its content, so every row is in view and\n// rendered: the symptom is a long list that never scrolls.\nif (isDev) {\n  watch(\n    segments,\n    (list) => {\n      const el = listEl.value\n      if (!el || props.items.length < 100 || el.scrollHeight > el.clientHeight) return\n      if (list.some((segment) => segment.type === 'spacer')) return\n      console.warn(\n        '[VVirtualList] Every row is rendered because the list does not scroll: give it a `height` or a bounded height in CSS.',\n      )\n    },\n    { flush: 'post', once: true },\n  )\n}\n\ndefineExpose({\n  /**\n   * Scrolls the list until a row is in view, rendering it first if needed. `align` places it at\n   * the top, the middle or the bottom; by default it moves as little as possible.\n   */\n  scrollToIndex: (index: number, align?: VirtualListAlign) =>\n    virtualList.scrollToIndex(index, align),\n  /** The scrolling element, which carries the list role. */\n  el: listEl,\n})\n</script>\n\n<template>\n  <div\n    ref=\"listEl\"\n    class=\"v-virtual-list\"\n    role=\"list\"\n    tabindex=\"0\"\n    :aria-label=\"label\"\n    :aria-busy=\"loading ? 'true' : undefined\"\n    :style=\"{ blockSize: cssSize(height) }\"\n    @focusin=\"onFocusin\"\n    @focusout=\"onFocusout\"\n  >\n    <template\n      v-for=\"segment in segments\"\n      :key=\"segment.type === 'row' ? `row:${String(keyOf(segment.index))}` : segment.key\"\n    >\n      <div\n        v-if=\"segment.type === 'spacer'\"\n        class=\"v-virtual-list-spacer\"\n        aria-hidden=\"true\"\n        :style=\"{ blockSize: `${segment.size}px` }\"\n      />\n      <div\n        v-else\n        :ref=\"(el) => measure(el as Element | null, segment.index)\"\n        role=\"listitem\"\n        class=\"v-virtual-list-item\"\n        :aria-setsize=\"hasMore ? -1 : items.length\"\n        :aria-posinset=\"segment.index + 1\"\n        :data-index=\"segment.index\"\n      >\n        <slot :item=\"items[segment.index]!\" :index=\"segment.index\" />\n      </div>\n    </template>\n\n    <!--\n      A single element for as long as more rows may come: replacing it would cancel the\n      observation, and no further rows would be asked for. Hidden from assistive technology,\n      which hears `aria-busy` on the list instead.\n    -->\n    <div v-if=\"hasMore || loading\" ref=\"sentinelEl\" class=\"v-virtual-list-more\" aria-hidden=\"true\">\n      <slot v-if=\"loading\" name=\"loading\">\n        <VSpinner :label=\"resolvedLoadingText\" />\n        <span>{{ resolvedLoadingText }}</span>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The list corrects its scroll itself when a row above the view changes height; the browser's\n   * own anchoring would apply the same correction a second time. Positioned, so it contains the\n   * absolutely positioned parts of the rows: positioned against an ancestor beyond it, they\n   * escape its clip and stretch the page.\n   */\n  .v-virtual-list {\n    position: relative;\n    display: block;\n    overflow-y: auto;\n    overflow-anchor: none;\n    border-radius: var(--vectis-radius-xs);\n  }\n\n  .v-virtual-list:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /*\n   * A row contains the margins of its content: collapsing through it, they would sit between\n   * rows where no measurement sees them.\n   */\n  .v-virtual-list-item {\n    display: flow-root;\n  }\n\n  .v-virtual-list-more {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--vectis-space-2);\n    min-block-size: var(--vectis-control-height-md);\n    padding: var(--vectis-space-2);\n    font-size: var(--vectis-text-body-sm-size);\n    font-weight: var(--vectis-text-body-sm-weight);\n    line-height: var(--vectis-text-body-sm-leading);\n    color: var(--vectis-color-text-muted);\n  }\n}\n</style>\n"],"mappings":""}