vectis-ui 0.14.0 → 0.16.0

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

@@ -1 +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 { useTypeahead } from '../../composables/useTypeahead'\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 { find: findTyped } = useTypeahead()\n\n// @keyboard\n// Moves to the row whose label starts with what was typed. Disabled rows stay focusable in a\n// tree, so they are matched too.\nfunction typeTo(char: string, index: number) {\n  const rows = visible.value\n  focusRow(rows[findTyped(char, rows.length, index, (i) => normalizeText(rows[i]!.item.label))])\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":""}
+{"version":3,"file":"VTreeView.js","names":["_sfc_main","VTreeView_vue_vue_type_script_setup_true_lang_default","VTreeView_default"],"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 { useTypeahead } from '../../composables/useTypeahead'\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 { find: findTyped } = useTypeahead()\n\n// @keyboard\n// Moves to the row whose label starts with what was typed. Disabled rows stay focusable in a\n// tree, so they are matched too.\nfunction typeTo(char: string, index: number) {\n  const rows = visible.value\n  focusRow(rows[findTyped(char, rows.length, index, (i) => normalizeText(rows[i]!.item.label))])\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

@@ -206,11 +206,7 @@ var de = [
 			e.preventDefault();
 		}
 		function Me(e, t) {
-			if (e.item.disabled) {
-				t.preventDefault();
-				return;
-			}
-			q(e, t);
+			e.item.disabled ? t.preventDefault() : q(e, t);
 		}
 		function Ne(e, t) {
 			t.preventDefault(), t.stopPropagation(), !e.item.disabled && L(e.item) && B(e.item, !R.value.has(e.item.value));

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

@@ -1 +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 { useTypeahead } from '../../composables/useTypeahead'\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 { find: findTyped } = useTypeahead()\n\n// @keyboard\n// Moves to the row whose label starts with what was typed. Disabled rows stay focusable in a\n// tree, so they are matched too.\nfunction typeTo(char: string, index: number) {\n  const rows = visible.value\n  focusRow(rows[findTyped(char, rows.length, index, (i) => normalizeText(rows[i]!.item.label))])\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,EAA+B,GAAA,YAAkB,GAGzD,IAAW,EAAwB,GAAC,UAAiC,GAErE,KAAO,GAqBP,EAAE,eAAW,eAAW,uBAAmB,EAAa,GACxD,IAAI,EAAY,GAChB,KAAY,QAAmB,EAAM,SAAS,EAAE,MAAM,SAAS,KAAK,GACpE,EAAE,QAAQ,IAAc,iBAAa,EAAiB,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,EAAE,MAAM,OAAc,GAAa;EAKzC,SAAS,GAAO,GAAc,GAAe;GAC3C,IAAM,IAAO,EAAQ;GACrB,EAAS,EAAK,GAAU,GAAM,EAAK,QAAQ,IAAQ,MAAM,GAAc,EAAK,EAAE,CAAE,KAAK,KAAK,CAAC,EAAE;EAC/F;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,IAAO,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,GAAE,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,GAAA,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"}
+{"version":3,"file":"VTreeView.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createElementVNode","_mergeProps","_Fragment","_renderList","_createBlock","_resolveDynamicComponent","_withCtx","VSpinner","VIcon","chevronRightIcon","_createCommentVNode","VCheckMark","_renderSlot","_createTextVNode","_toDisplayString","_createVNode","errorIcon","VIcon_default","VSpinner_default","VCheckMark_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","VTreeView_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","\"expanded\"","\"expandedModifiers\"","__expose","__emit","props","__props","model","useModel","expanded","emit","useRootAttrs","m","useMessages","ariaLabel","useAriaLabel","announcement","useLiveAnnouncer","loaded","shallowReactive","loading","failed","childrenOf","item","isPending","isBranch","expandedSet","computed","visible","rows","walk","node","index","items","children","level","setExpanded","open","value","deriveCheckStates","states","visit","own","inherited","chosen","state","childStates","child","s","chosenValues","checkStates","eachEnabled","fn","toggleCheck","unknown","check","p","next","isSelected","applyDefault","activate","event","load","loader","announce","treeEl","ref","rowEls","rowValues","bindRow","el","active","tabStop","shown","onFocusin","focusRow","findTyped","useTypeahead","typeTo","char","normalizeText","i","onKeydown","tree","isOpen","forward","isRtl","back","closed","sibling","onRowClick","onChevronClick","slotProps","ariaExpanded","ariaCurrent","options","openBlock","createElementBlock","normalizeClass","unref","rootClass","normalizeStyle","rootStyle","createElementVNode","mergeProps","forwardedAttrs","Fragment","renderList","createBlock","resolveDynamicComponent","$event","withCtx","chevron_right","createCommentVNode","renderSlot","_ctx","iconProps","createTextVNode","toDisplayString","createVNode","error"],"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 { useTypeahead } from '../../composables/useTypeahead'\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 { find: findTyped } = useTypeahead()\n\n// @keyboard\n// Moves to the row whose label starts with what was typed. Disabled rows stay focusable in a\n// tree, so they are matched too.\nfunction typeTo(char: string, index: number) {\n  const rows = visible.value\n  focusRow(rows[findTyped(char, rows.length, index, (i) => normalizeText(rows[i]!.item.label))])\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":"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"}

package/dist/components/VTypography/VTypography.js.map

@@ -1 +1 @@
-{"version":3,"file":"VTypography.js","names":[],"sources":["../../../src/components/VTypography/VTypography.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Apply complete semantic typography recipes by role; choose native heading levels unless as\n * explicitly overrides the element.\n */\nimport { computed } from 'vue'\n\n/** The role a text plays, each with its complete typographic recipe. */\nexport type TypographyVariant =\n  | 'display'\n  | 'heading-1'\n  | 'heading-2'\n  | 'heading-3'\n  | 'heading-4'\n  | 'subtitle'\n  | 'body-xl'\n  | 'body-lg'\n  | 'body-md'\n  | 'body-sm'\n  | 'label'\n  | 'caption'\n  | 'overline'\n  | 'code'\n\n/** The colour of a text; `default` sets none and inherits. */\nexport type TypographyTone =\n  'default' | 'muted' | 'subtle' | 'accent' | 'danger' | 'success' | 'warning' | 'on-inverse'\n\ninterface TypographyProps {\n  /**\n   * The role this text plays, which selects a complete recipe of typographic\n   * tokens: size, weight, line height and, where the role calls for it, letter\n   * spacing and a monospaced family.\n   */\n  variant?: TypographyVariant\n  /**\n   * The HTML tag to render. Each variant already has a sensible default (h1 to h4,\n   * p, span, code), so this is for the cases where the meaning and the look differ:\n   * a subtitle that is really an `h2`, or a label attached to a field.\n   */\n  as?: string\n  /**\n   * The colour of the text. `default` sets none at all, so the text inherits from whatever\n   * surrounds it, which lets the same component be used on an inverted surface or inside a\n   * coloured toast.\n   */\n  tone?: TypographyTone\n  /** Cuts the text to one line and ends it with an ellipsis. */\n  truncate?: boolean\n}\n\nconst props = withDefaults(defineProps<TypographyProps>(), {\n  variant: 'body-md',\n  as: undefined,\n  tone: 'default',\n  truncate: false,\n})\n\ndefineSlots<{\n  /** Text content. */\n  default(): unknown\n}>()\n\n/** The tag each variant renders when `as` says nothing; the one whose meaning matches the role. */\nconst DEFAULT_TAGS: Record<TypographyVariant, string> = {\n  display: 'p',\n  'heading-1': 'h1',\n  'heading-2': 'h2',\n  'heading-3': 'h3',\n  'heading-4': 'h4',\n  subtitle: 'p',\n  'body-xl': 'p',\n  'body-lg': 'p',\n  'body-md': 'p',\n  'body-sm': 'p',\n  label: 'span',\n  caption: 'p',\n  overline: 'span',\n  code: 'code',\n}\n\nconst tag = computed(() => props.as ?? DEFAULT_TAGS[props.variant])\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    class=\"v-typography\"\n    :data-variant=\"variant\"\n    :data-tone=\"tone === 'default' ? undefined : tone\"\n    :data-truncate=\"truncate ? '' : undefined\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-typography {\n    /*\n     * These two defaults are re-declared on every instance because custom properties INHERIT:\n     * nested inside a variant that sets letter spacing, or inside a `code`, a VTypography would\n     * otherwise pick up its ancestor's tracking and monospaced family. The [data-variant]\n     * blocks below, being more specific, still win.\n     */\n    --typography-family: var(--vectis-text-family);\n    --typography-tracking: normal;\n\n    margin: 0;\n    font-family: var(--typography-family);\n    font-size: var(--typography-size);\n    font-weight: var(--typography-weight);\n    line-height: var(--typography-leading);\n    letter-spacing: var(--typography-tracking);\n    /*\n     * With the `default` tone no colour variable is set, and the fallback makes the text\n     * inherit; which allows the component to be dropped inside an already coloured context, an\n     * inverted surface or a tinted toast.\n     */\n    color: var(--typography-color, inherit);\n    overflow-wrap: break-word;\n  }\n\n  /*\n   * The colour variable inherits like any other, so without this reset a `default` VTypography\n   * nested in a toned one took the OUTER tone's colour instead of the colour of whatever sits\n   * between them. `initial` makes it guaranteed-invalid, which lets the fallback above apply.\n   */\n  :where(.v-typography) {\n    --typography-color: initial;\n  }\n\n  .v-typography[data-variant='display'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-display-size);\n    --typography-weight: var(--vectis-text-display-weight);\n    --typography-leading: var(--vectis-text-display-leading);\n    --typography-tracking: var(--vectis-text-display-tracking);\n  }\n\n  .v-typography[data-variant='heading-1'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-1-size);\n    --typography-weight: var(--vectis-text-heading-1-weight);\n    --typography-leading: var(--vectis-text-heading-1-leading);\n    --typography-tracking: var(--vectis-text-heading-1-tracking);\n  }\n\n  .v-typography[data-variant='heading-2'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-2-size);\n    --typography-weight: var(--vectis-text-heading-2-weight);\n    --typography-leading: var(--vectis-text-heading-2-leading);\n    --typography-tracking: var(--vectis-text-heading-2-tracking);\n  }\n\n  .v-typography[data-variant='heading-3'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-3-size);\n    --typography-weight: var(--vectis-text-heading-3-weight);\n    --typography-leading: var(--vectis-text-heading-3-leading);\n  }\n\n  .v-typography[data-variant='heading-4'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-4-size);\n    --typography-weight: var(--vectis-text-heading-4-weight);\n    --typography-leading: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-typography[data-variant='subtitle'] {\n    --typography-size: var(--vectis-text-subtitle-size);\n    --typography-weight: var(--vectis-text-subtitle-weight);\n    --typography-leading: var(--vectis-text-subtitle-leading);\n  }\n\n  .v-typography[data-variant='body-xl'] {\n    --typography-size: var(--vectis-text-body-xl-size);\n    --typography-weight: var(--vectis-text-body-xl-weight);\n    --typography-leading: var(--vectis-text-body-xl-leading);\n  }\n\n  .v-typography[data-variant='body-lg'] {\n    --typography-size: var(--vectis-text-body-lg-size);\n    --typography-weight: var(--vectis-text-body-lg-weight);\n    --typography-leading: var(--vectis-text-body-lg-leading);\n  }\n\n  .v-typography[data-variant='body-md'] {\n    --typography-size: var(--vectis-text-body-md-size);\n    --typography-weight: var(--vectis-text-body-md-weight);\n    --typography-leading: var(--vectis-text-body-md-leading);\n  }\n\n  .v-typography[data-variant='body-sm'] {\n    --typography-size: var(--vectis-text-body-sm-size);\n    --typography-weight: var(--vectis-text-body-sm-weight);\n    --typography-leading: var(--vectis-text-body-sm-leading);\n  }\n\n  .v-typography[data-variant='label'] {\n    --typography-size: var(--vectis-text-label-size);\n    --typography-weight: var(--vectis-text-label-weight);\n    --typography-leading: var(--vectis-text-label-leading);\n  }\n\n  .v-typography[data-variant='caption'] {\n    --typography-size: var(--vectis-text-caption-size);\n    --typography-weight: var(--vectis-text-caption-weight);\n    --typography-leading: var(--vectis-text-caption-leading);\n  }\n\n  .v-typography[data-variant='overline'] {\n    --typography-size: var(--vectis-text-overline-size);\n    --typography-weight: var(--vectis-text-overline-weight);\n    --typography-leading: var(--vectis-text-overline-leading);\n    --typography-tracking: var(--vectis-text-overline-tracking);\n\n    text-transform: uppercase;\n  }\n\n  .v-typography[data-variant='code'] {\n    --typography-family: var(--vectis-text-family-code);\n    --typography-size: var(--vectis-text-code-size);\n    --typography-weight: var(--vectis-text-code-weight);\n    --typography-leading: var(--vectis-text-code-leading);\n  }\n\n  /* There is deliberately no block for the `default` tone: leaving the colour\n     variable unset is precisely what makes the text inherit. */\n  .v-typography[data-tone='muted'] {\n    --typography-color: var(--vectis-color-text-muted);\n  }\n\n  .v-typography[data-tone='subtle'] {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  .v-typography[data-tone='accent'] {\n    --typography-color: var(--vectis-color-accent-text);\n  }\n\n  .v-typography[data-tone='danger'] {\n    --typography-color: var(--vectis-color-danger-text);\n  }\n\n  .v-typography[data-tone='success'] {\n    --typography-color: var(--vectis-color-success-text);\n  }\n\n  .v-typography[data-tone='warning'] {\n    --typography-color: var(--vectis-color-warning-text);\n  }\n\n  .v-typography[data-tone='on-inverse'] {\n    --typography-color: var(--vectis-color-text-on-inverse);\n  }\n\n  .v-typography[data-truncate] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VTypography.js","names":["_sfc_main","VTypography_vue_vue_type_script_setup_true_lang_default","VTypography_default"],"sources":["../../../src/components/VTypography/VTypography.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Apply complete semantic typography recipes by role; choose native heading levels unless as\n * explicitly overrides the element.\n */\nimport { computed } from 'vue'\n\n/** The role a text plays, each with its complete typographic recipe. */\nexport type TypographyVariant =\n  | 'display'\n  | 'heading-1'\n  | 'heading-2'\n  | 'heading-3'\n  | 'heading-4'\n  | 'subtitle'\n  | 'body-xl'\n  | 'body-lg'\n  | 'body-md'\n  | 'body-sm'\n  | 'label'\n  | 'caption'\n  | 'overline'\n  | 'code'\n\n/** The colour of a text; `default` sets none and inherits. */\nexport type TypographyTone =\n  | 'default'\n  | 'muted'\n  | 'subtle'\n  | 'accent'\n  | 'danger'\n  | 'success'\n  | 'warning'\n  | 'on-inverse'\n\ninterface TypographyProps {\n  /**\n   * The role this text plays, which selects a complete recipe of typographic\n   * tokens: size, weight, line height and, where the role calls for it, letter\n   * spacing and a monospaced family.\n   */\n  variant?: TypographyVariant\n  /**\n   * The HTML tag to render. Each variant already has a sensible default (h1 to h4,\n   * p, span, code), so this is for the cases where the meaning and the look differ:\n   * a subtitle that is really an `h2`, or a label attached to a field.\n   */\n  as?: string\n  /**\n   * The colour of the text. `default` sets none at all, so the text inherits from whatever\n   * surrounds it, which lets the same component be used on an inverted surface or inside a\n   * coloured toast.\n   */\n  tone?: TypographyTone\n  /** Cuts the text to one line and ends it with an ellipsis. */\n  truncate?: boolean\n}\n\nconst props = withDefaults(defineProps<TypographyProps>(), {\n  variant: 'body-md',\n  as: undefined,\n  tone: 'default',\n  truncate: false,\n})\n\ndefineSlots<{\n  /** Text content. */\n  default(): unknown\n}>()\n\n/** The tag each variant renders when `as` says nothing; the one whose meaning matches the role. */\nconst DEFAULT_TAGS: Record<TypographyVariant, string> = {\n  display: 'p',\n  'heading-1': 'h1',\n  'heading-2': 'h2',\n  'heading-3': 'h3',\n  'heading-4': 'h4',\n  subtitle: 'p',\n  'body-xl': 'p',\n  'body-lg': 'p',\n  'body-md': 'p',\n  'body-sm': 'p',\n  label: 'span',\n  caption: 'p',\n  overline: 'span',\n  code: 'code',\n}\n\nconst tag = computed(() => props.as ?? DEFAULT_TAGS[props.variant])\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    class=\"v-typography\"\n    :data-variant=\"variant\"\n    :data-tone=\"tone === 'default' ? undefined : tone\"\n    :data-truncate=\"truncate ? '' : undefined\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-typography {\n    /*\n     * These two defaults are re-declared on every instance because custom properties INHERIT:\n     * nested inside a variant that sets letter spacing, or inside a `code`, a VTypography would\n     * otherwise pick up its ancestor's tracking and monospaced family. The [data-variant]\n     * blocks below, being more specific, still win.\n     */\n    --typography-family: var(--vectis-text-family);\n    --typography-tracking: normal;\n\n    margin: 0;\n    font-family: var(--typography-family);\n    font-size: var(--typography-size);\n    font-weight: var(--typography-weight);\n    line-height: var(--typography-leading);\n    letter-spacing: var(--typography-tracking);\n    /*\n     * With the `default` tone no colour variable is set, and the fallback makes the text\n     * inherit; which allows the component to be dropped inside an already coloured context, an\n     * inverted surface or a tinted toast.\n     */\n    color: var(--typography-color, inherit);\n    overflow-wrap: break-word;\n  }\n\n  /*\n   * The colour variable inherits like any other, so without this reset a `default` VTypography\n   * nested in a toned one took the OUTER tone's colour instead of the colour of whatever sits\n   * between them. `initial` makes it guaranteed-invalid, which lets the fallback above apply.\n   */\n  :where(.v-typography) {\n    --typography-color: initial;\n  }\n\n  .v-typography[data-variant='display'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-display-size);\n    --typography-weight: var(--vectis-text-display-weight);\n    --typography-leading: var(--vectis-text-display-leading);\n    --typography-tracking: var(--vectis-text-display-tracking);\n  }\n\n  .v-typography[data-variant='heading-1'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-1-size);\n    --typography-weight: var(--vectis-text-heading-1-weight);\n    --typography-leading: var(--vectis-text-heading-1-leading);\n    --typography-tracking: var(--vectis-text-heading-1-tracking);\n  }\n\n  .v-typography[data-variant='heading-2'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-2-size);\n    --typography-weight: var(--vectis-text-heading-2-weight);\n    --typography-leading: var(--vectis-text-heading-2-leading);\n    --typography-tracking: var(--vectis-text-heading-2-tracking);\n  }\n\n  .v-typography[data-variant='heading-3'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-3-size);\n    --typography-weight: var(--vectis-text-heading-3-weight);\n    --typography-leading: var(--vectis-text-heading-3-leading);\n  }\n\n  .v-typography[data-variant='heading-4'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-4-size);\n    --typography-weight: var(--vectis-text-heading-4-weight);\n    --typography-leading: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-typography[data-variant='subtitle'] {\n    --typography-size: var(--vectis-text-subtitle-size);\n    --typography-weight: var(--vectis-text-subtitle-weight);\n    --typography-leading: var(--vectis-text-subtitle-leading);\n  }\n\n  .v-typography[data-variant='body-xl'] {\n    --typography-size: var(--vectis-text-body-xl-size);\n    --typography-weight: var(--vectis-text-body-xl-weight);\n    --typography-leading: var(--vectis-text-body-xl-leading);\n  }\n\n  .v-typography[data-variant='body-lg'] {\n    --typography-size: var(--vectis-text-body-lg-size);\n    --typography-weight: var(--vectis-text-body-lg-weight);\n    --typography-leading: var(--vectis-text-body-lg-leading);\n  }\n\n  .v-typography[data-variant='body-md'] {\n    --typography-size: var(--vectis-text-body-md-size);\n    --typography-weight: var(--vectis-text-body-md-weight);\n    --typography-leading: var(--vectis-text-body-md-leading);\n  }\n\n  .v-typography[data-variant='body-sm'] {\n    --typography-size: var(--vectis-text-body-sm-size);\n    --typography-weight: var(--vectis-text-body-sm-weight);\n    --typography-leading: var(--vectis-text-body-sm-leading);\n  }\n\n  .v-typography[data-variant='label'] {\n    --typography-size: var(--vectis-text-label-size);\n    --typography-weight: var(--vectis-text-label-weight);\n    --typography-leading: var(--vectis-text-label-leading);\n  }\n\n  .v-typography[data-variant='caption'] {\n    --typography-size: var(--vectis-text-caption-size);\n    --typography-weight: var(--vectis-text-caption-weight);\n    --typography-leading: var(--vectis-text-caption-leading);\n  }\n\n  .v-typography[data-variant='overline'] {\n    --typography-size: var(--vectis-text-overline-size);\n    --typography-weight: var(--vectis-text-overline-weight);\n    --typography-leading: var(--vectis-text-overline-leading);\n    --typography-tracking: var(--vectis-text-overline-tracking);\n\n    text-transform: uppercase;\n  }\n\n  .v-typography[data-variant='code'] {\n    --typography-family: var(--vectis-text-family-code);\n    --typography-size: var(--vectis-text-code-size);\n    --typography-weight: var(--vectis-text-code-weight);\n    --typography-leading: var(--vectis-text-code-leading);\n  }\n\n  /* There is deliberately no block for the `default` tone: leaving the colour\n     variable unset is precisely what makes the text inherit. */\n  .v-typography[data-tone='muted'] {\n    --typography-color: var(--vectis-color-text-muted);\n  }\n\n  .v-typography[data-tone='subtle'] {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  .v-typography[data-tone='accent'] {\n    --typography-color: var(--vectis-color-accent-text);\n  }\n\n  .v-typography[data-tone='danger'] {\n    --typography-color: var(--vectis-color-danger-text);\n  }\n\n  .v-typography[data-tone='success'] {\n    --typography-color: var(--vectis-color-success-text);\n  }\n\n  .v-typography[data-tone='warning'] {\n    --typography-color: var(--vectis-color-warning-text);\n  }\n\n  .v-typography[data-tone='on-inverse'] {\n    --typography-color: var(--vectis-color-text-on-inverse);\n  }\n\n  .v-typography[data-truncate] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VTypography.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VTypography/VTypography.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Apply complete semantic typography recipes by role; choose native heading levels unless as\n * explicitly overrides the element.\n */\nimport { computed } from 'vue'\n\n/** The role a text plays, each with its complete typographic recipe. */\nexport type TypographyVariant =\n  | 'display'\n  | 'heading-1'\n  | 'heading-2'\n  | 'heading-3'\n  | 'heading-4'\n  | 'subtitle'\n  | 'body-xl'\n  | 'body-lg'\n  | 'body-md'\n  | 'body-sm'\n  | 'label'\n  | 'caption'\n  | 'overline'\n  | 'code'\n\n/** The colour of a text; `default` sets none and inherits. */\nexport type TypographyTone =\n  'default' | 'muted' | 'subtle' | 'accent' | 'danger' | 'success' | 'warning' | 'on-inverse'\n\ninterface TypographyProps {\n  /**\n   * The role this text plays, which selects a complete recipe of typographic\n   * tokens: size, weight, line height and, where the role calls for it, letter\n   * spacing and a monospaced family.\n   */\n  variant?: TypographyVariant\n  /**\n   * The HTML tag to render. Each variant already has a sensible default (h1 to h4,\n   * p, span, code), so this is for the cases where the meaning and the look differ:\n   * a subtitle that is really an `h2`, or a label attached to a field.\n   */\n  as?: string\n  /**\n   * The colour of the text. `default` sets none at all, so the text inherits from whatever\n   * surrounds it, which lets the same component be used on an inverted surface or inside a\n   * coloured toast.\n   */\n  tone?: TypographyTone\n  /** Cuts the text to one line and ends it with an ellipsis. */\n  truncate?: boolean\n}\n\nconst props = withDefaults(defineProps<TypographyProps>(), {\n  variant: 'body-md',\n  as: undefined,\n  tone: 'default',\n  truncate: false,\n})\n\ndefineSlots<{\n  /** Text content. */\n  default(): unknown\n}>()\n\n/** The tag each variant renders when `as` says nothing; the one whose meaning matches the role. */\nconst DEFAULT_TAGS: Record<TypographyVariant, string> = {\n  display: 'p',\n  'heading-1': 'h1',\n  'heading-2': 'h2',\n  'heading-3': 'h3',\n  'heading-4': 'h4',\n  subtitle: 'p',\n  'body-xl': 'p',\n  'body-lg': 'p',\n  'body-md': 'p',\n  'body-sm': 'p',\n  label: 'span',\n  caption: 'p',\n  overline: 'span',\n  code: 'code',\n}\n\nconst tag = computed(() => props.as ?? DEFAULT_TAGS[props.variant])\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    class=\"v-typography\"\n    :data-variant=\"variant\"\n    :data-tone=\"tone === 'default' ? undefined : tone\"\n    :data-truncate=\"truncate ? '' : undefined\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-typography {\n    /*\n     * These two defaults are re-declared on every instance because custom properties INHERIT:\n     * nested inside a variant that sets letter spacing, or inside a `code`, a VTypography would\n     * otherwise pick up its ancestor's tracking and monospaced family. The [data-variant]\n     * blocks below, being more specific, still win.\n     */\n    --typography-family: var(--vectis-text-family);\n    --typography-tracking: normal;\n\n    margin: 0;\n    font-family: var(--typography-family);\n    font-size: var(--typography-size);\n    font-weight: var(--typography-weight);\n    line-height: var(--typography-leading);\n    letter-spacing: var(--typography-tracking);\n    /*\n     * With the `default` tone no colour variable is set, and the fallback makes the text\n     * inherit; which allows the component to be dropped inside an already coloured context, an\n     * inverted surface or a tinted toast.\n     */\n    color: var(--typography-color, inherit);\n    overflow-wrap: break-word;\n  }\n\n  /*\n   * The colour variable inherits like any other, so without this reset a `default` VTypography\n   * nested in a toned one took the OUTER tone's colour instead of the colour of whatever sits\n   * between them. `initial` makes it guaranteed-invalid, which lets the fallback above apply.\n   */\n  :where(.v-typography) {\n    --typography-color: initial;\n  }\n\n  .v-typography[data-variant='display'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-display-size);\n    --typography-weight: var(--vectis-text-display-weight);\n    --typography-leading: var(--vectis-text-display-leading);\n    --typography-tracking: var(--vectis-text-display-tracking);\n  }\n\n  .v-typography[data-variant='heading-1'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-1-size);\n    --typography-weight: var(--vectis-text-heading-1-weight);\n    --typography-leading: var(--vectis-text-heading-1-leading);\n    --typography-tracking: var(--vectis-text-heading-1-tracking);\n  }\n\n  .v-typography[data-variant='heading-2'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-2-size);\n    --typography-weight: var(--vectis-text-heading-2-weight);\n    --typography-leading: var(--vectis-text-heading-2-leading);\n    --typography-tracking: var(--vectis-text-heading-2-tracking);\n  }\n\n  .v-typography[data-variant='heading-3'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-3-size);\n    --typography-weight: var(--vectis-text-heading-3-weight);\n    --typography-leading: var(--vectis-text-heading-3-leading);\n  }\n\n  .v-typography[data-variant='heading-4'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-4-size);\n    --typography-weight: var(--vectis-text-heading-4-weight);\n    --typography-leading: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-typography[data-variant='subtitle'] {\n    --typography-size: var(--vectis-text-subtitle-size);\n    --typography-weight: var(--vectis-text-subtitle-weight);\n    --typography-leading: var(--vectis-text-subtitle-leading);\n  }\n\n  .v-typography[data-variant='body-xl'] {\n    --typography-size: var(--vectis-text-body-xl-size);\n    --typography-weight: var(--vectis-text-body-xl-weight);\n    --typography-leading: var(--vectis-text-body-xl-leading);\n  }\n\n  .v-typography[data-variant='body-lg'] {\n    --typography-size: var(--vectis-text-body-lg-size);\n    --typography-weight: var(--vectis-text-body-lg-weight);\n    --typography-leading: var(--vectis-text-body-lg-leading);\n  }\n\n  .v-typography[data-variant='body-md'] {\n    --typography-size: var(--vectis-text-body-md-size);\n    --typography-weight: var(--vectis-text-body-md-weight);\n    --typography-leading: var(--vectis-text-body-md-leading);\n  }\n\n  .v-typography[data-variant='body-sm'] {\n    --typography-size: var(--vectis-text-body-sm-size);\n    --typography-weight: var(--vectis-text-body-sm-weight);\n    --typography-leading: var(--vectis-text-body-sm-leading);\n  }\n\n  .v-typography[data-variant='label'] {\n    --typography-size: var(--vectis-text-label-size);\n    --typography-weight: var(--vectis-text-label-weight);\n    --typography-leading: var(--vectis-text-label-leading);\n  }\n\n  .v-typography[data-variant='caption'] {\n    --typography-size: var(--vectis-text-caption-size);\n    --typography-weight: var(--vectis-text-caption-weight);\n    --typography-leading: var(--vectis-text-caption-leading);\n  }\n\n  .v-typography[data-variant='overline'] {\n    --typography-size: var(--vectis-text-overline-size);\n    --typography-weight: var(--vectis-text-overline-weight);\n    --typography-leading: var(--vectis-text-overline-leading);\n    --typography-tracking: var(--vectis-text-overline-tracking);\n\n    text-transform: uppercase;\n  }\n\n  .v-typography[data-variant='code'] {\n    --typography-family: var(--vectis-text-family-code);\n    --typography-size: var(--vectis-text-code-size);\n    --typography-weight: var(--vectis-text-code-weight);\n    --typography-leading: var(--vectis-text-code-leading);\n  }\n\n  /* There is deliberately no block for the `default` tone: leaving the colour\n     variable unset is precisely what makes the text inherit. */\n  .v-typography[data-tone='muted'] {\n    --typography-color: var(--vectis-color-text-muted);\n  }\n\n  .v-typography[data-tone='subtle'] {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  .v-typography[data-tone='accent'] {\n    --typography-color: var(--vectis-color-accent-text);\n  }\n\n  .v-typography[data-tone='danger'] {\n    --typography-color: var(--vectis-color-danger-text);\n  }\n\n  .v-typography[data-tone='success'] {\n    --typography-color: var(--vectis-color-success-text);\n  }\n\n  .v-typography[data-tone='warning'] {\n    --typography-color: var(--vectis-color-warning-text);\n  }\n\n  .v-typography[data-tone='on-inverse'] {\n    --typography-color: var(--vectis-color-text-on-inverse);\n  }\n\n  .v-typography[data-truncate] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;EAmDA,IAAM,IAAQ,GAaR,IAAkD;GACtD,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,aAAa;GACb,UAAU;GACV,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,OAAO;GACP,SAAS;GACT,UAAU;GACV,MAAM;EACR,GAEM,IAAM,QAAe,EAAM,MAAM,EAAa,EAAM,QAAQ;yBAIhE,EAQY,EAPL,EAAA,KAAG,GAAA;GACR,OAAM;GACL,gBAAc,EAAA;GACd,aAAW,EAAA,SAAI,YAAiB,KAAA,IAAY,EAAA;GAC5C,iBAAe,EAAA,WAAQ,KAAQ,KAAA;;oBAExB,CAAR,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"VTypography.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_withCtx","_renderSlot","VTypography_vue_vue_type_script_setup_true_lang_default","props","__props","DEFAULT_TAGS","tag","computed","openBlock","createBlock","resolveDynamicComponent","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/VTypography/VTypography.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Apply complete semantic typography recipes by role; choose native heading levels unless as\n * explicitly overrides the element.\n */\nimport { computed } from 'vue'\n\n/** The role a text plays, each with its complete typographic recipe. */\nexport type TypographyVariant =\n  | 'display'\n  | 'heading-1'\n  | 'heading-2'\n  | 'heading-3'\n  | 'heading-4'\n  | 'subtitle'\n  | 'body-xl'\n  | 'body-lg'\n  | 'body-md'\n  | 'body-sm'\n  | 'label'\n  | 'caption'\n  | 'overline'\n  | 'code'\n\n/** The colour of a text; `default` sets none and inherits. */\nexport type TypographyTone =\n  | 'default'\n  | 'muted'\n  | 'subtle'\n  | 'accent'\n  | 'danger'\n  | 'success'\n  | 'warning'\n  | 'on-inverse'\n\ninterface TypographyProps {\n  /**\n   * The role this text plays, which selects a complete recipe of typographic\n   * tokens: size, weight, line height and, where the role calls for it, letter\n   * spacing and a monospaced family.\n   */\n  variant?: TypographyVariant\n  /**\n   * The HTML tag to render. Each variant already has a sensible default (h1 to h4,\n   * p, span, code), so this is for the cases where the meaning and the look differ:\n   * a subtitle that is really an `h2`, or a label attached to a field.\n   */\n  as?: string\n  /**\n   * The colour of the text. `default` sets none at all, so the text inherits from whatever\n   * surrounds it, which lets the same component be used on an inverted surface or inside a\n   * coloured toast.\n   */\n  tone?: TypographyTone\n  /** Cuts the text to one line and ends it with an ellipsis. */\n  truncate?: boolean\n}\n\nconst props = withDefaults(defineProps<TypographyProps>(), {\n  variant: 'body-md',\n  as: undefined,\n  tone: 'default',\n  truncate: false,\n})\n\ndefineSlots<{\n  /** Text content. */\n  default(): unknown\n}>()\n\n/** The tag each variant renders when `as` says nothing; the one whose meaning matches the role. */\nconst DEFAULT_TAGS: Record<TypographyVariant, string> = {\n  display: 'p',\n  'heading-1': 'h1',\n  'heading-2': 'h2',\n  'heading-3': 'h3',\n  'heading-4': 'h4',\n  subtitle: 'p',\n  'body-xl': 'p',\n  'body-lg': 'p',\n  'body-md': 'p',\n  'body-sm': 'p',\n  label: 'span',\n  caption: 'p',\n  overline: 'span',\n  code: 'code',\n}\n\nconst tag = computed(() => props.as ?? DEFAULT_TAGS[props.variant])\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    class=\"v-typography\"\n    :data-variant=\"variant\"\n    :data-tone=\"tone === 'default' ? undefined : tone\"\n    :data-truncate=\"truncate ? '' : undefined\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-typography {\n    /*\n     * These two defaults are re-declared on every instance because custom properties INHERIT:\n     * nested inside a variant that sets letter spacing, or inside a `code`, a VTypography would\n     * otherwise pick up its ancestor's tracking and monospaced family. The [data-variant]\n     * blocks below, being more specific, still win.\n     */\n    --typography-family: var(--vectis-text-family);\n    --typography-tracking: normal;\n\n    margin: 0;\n    font-family: var(--typography-family);\n    font-size: var(--typography-size);\n    font-weight: var(--typography-weight);\n    line-height: var(--typography-leading);\n    letter-spacing: var(--typography-tracking);\n    /*\n     * With the `default` tone no colour variable is set, and the fallback makes the text\n     * inherit; which allows the component to be dropped inside an already coloured context, an\n     * inverted surface or a tinted toast.\n     */\n    color: var(--typography-color, inherit);\n    overflow-wrap: break-word;\n  }\n\n  /*\n   * The colour variable inherits like any other, so without this reset a `default` VTypography\n   * nested in a toned one took the OUTER tone's colour instead of the colour of whatever sits\n   * between them. `initial` makes it guaranteed-invalid, which lets the fallback above apply.\n   */\n  :where(.v-typography) {\n    --typography-color: initial;\n  }\n\n  .v-typography[data-variant='display'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-display-size);\n    --typography-weight: var(--vectis-text-display-weight);\n    --typography-leading: var(--vectis-text-display-leading);\n    --typography-tracking: var(--vectis-text-display-tracking);\n  }\n\n  .v-typography[data-variant='heading-1'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-1-size);\n    --typography-weight: var(--vectis-text-heading-1-weight);\n    --typography-leading: var(--vectis-text-heading-1-leading);\n    --typography-tracking: var(--vectis-text-heading-1-tracking);\n  }\n\n  .v-typography[data-variant='heading-2'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-2-size);\n    --typography-weight: var(--vectis-text-heading-2-weight);\n    --typography-leading: var(--vectis-text-heading-2-leading);\n    --typography-tracking: var(--vectis-text-heading-2-tracking);\n  }\n\n  .v-typography[data-variant='heading-3'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-3-size);\n    --typography-weight: var(--vectis-text-heading-3-weight);\n    --typography-leading: var(--vectis-text-heading-3-leading);\n  }\n\n  .v-typography[data-variant='heading-4'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-4-size);\n    --typography-weight: var(--vectis-text-heading-4-weight);\n    --typography-leading: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-typography[data-variant='subtitle'] {\n    --typography-size: var(--vectis-text-subtitle-size);\n    --typography-weight: var(--vectis-text-subtitle-weight);\n    --typography-leading: var(--vectis-text-subtitle-leading);\n  }\n\n  .v-typography[data-variant='body-xl'] {\n    --typography-size: var(--vectis-text-body-xl-size);\n    --typography-weight: var(--vectis-text-body-xl-weight);\n    --typography-leading: var(--vectis-text-body-xl-leading);\n  }\n\n  .v-typography[data-variant='body-lg'] {\n    --typography-size: var(--vectis-text-body-lg-size);\n    --typography-weight: var(--vectis-text-body-lg-weight);\n    --typography-leading: var(--vectis-text-body-lg-leading);\n  }\n\n  .v-typography[data-variant='body-md'] {\n    --typography-size: var(--vectis-text-body-md-size);\n    --typography-weight: var(--vectis-text-body-md-weight);\n    --typography-leading: var(--vectis-text-body-md-leading);\n  }\n\n  .v-typography[data-variant='body-sm'] {\n    --typography-size: var(--vectis-text-body-sm-size);\n    --typography-weight: var(--vectis-text-body-sm-weight);\n    --typography-leading: var(--vectis-text-body-sm-leading);\n  }\n\n  .v-typography[data-variant='label'] {\n    --typography-size: var(--vectis-text-label-size);\n    --typography-weight: var(--vectis-text-label-weight);\n    --typography-leading: var(--vectis-text-label-leading);\n  }\n\n  .v-typography[data-variant='caption'] {\n    --typography-size: var(--vectis-text-caption-size);\n    --typography-weight: var(--vectis-text-caption-weight);\n    --typography-leading: var(--vectis-text-caption-leading);\n  }\n\n  .v-typography[data-variant='overline'] {\n    --typography-size: var(--vectis-text-overline-size);\n    --typography-weight: var(--vectis-text-overline-weight);\n    --typography-leading: var(--vectis-text-overline-leading);\n    --typography-tracking: var(--vectis-text-overline-tracking);\n\n    text-transform: uppercase;\n  }\n\n  .v-typography[data-variant='code'] {\n    --typography-family: var(--vectis-text-family-code);\n    --typography-size: var(--vectis-text-code-size);\n    --typography-weight: var(--vectis-text-code-weight);\n    --typography-leading: var(--vectis-text-code-leading);\n  }\n\n  /* There is deliberately no block for the `default` tone: leaving the colour\n     variable unset is precisely what makes the text inherit. */\n  .v-typography[data-tone='muted'] {\n    --typography-color: var(--vectis-color-text-muted);\n  }\n\n  .v-typography[data-tone='subtle'] {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  .v-typography[data-tone='accent'] {\n    --typography-color: var(--vectis-color-accent-text);\n  }\n\n  .v-typography[data-tone='danger'] {\n    --typography-color: var(--vectis-color-danger-text);\n  }\n\n  .v-typography[data-tone='success'] {\n    --typography-color: var(--vectis-color-success-text);\n  }\n\n  .v-typography[data-tone='warning'] {\n    --typography-color: var(--vectis-color-warning-text);\n  }\n\n  .v-typography[data-tone='on-inverse'] {\n    --typography-color: var(--vectis-color-text-on-inverse);\n  }\n\n  .v-typography[data-truncate] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;EA0DA,IAAMM,IAAQC,GAaRC,IAAkD;GACtD,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,aAAa;GACb,UAAU;GACV,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,OAAO;GACP,SAAS;GACT,UAAU;GACV,MAAM;EACR,GAEMC,IAAMC,QAAeJ,EAAM,MAAME,EAAaF,EAAM,QAAQ;oBAIhEN,EAAA,GAAAC,EAQYC,EAPLO,EAAA,KAAG,GAAA;GACR,OAAM;GACL,gBAAcF,EAAA;GACd,aAAWA,EAAA,SAAI,YAAiB,KAAA,IAAYA,EAAA;GAC5C,iBAAeA,EAAA,WAAQ,KAAQ,KAAA;;GAEhC,SAAAJ,QAAQ,CAARC,EAAQY,EAAA,QAAA,SAAA,CAAA,CAAA"}

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

@@ -1 +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":""}
+{"version":3,"file":"VVirtualList.js","names":["_sfc_main","VVirtualList_vue_vue_type_script_setup_true_lang_default","VVirtualList_default"],"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":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VVirtualList.vue_vue_type_script_setup_true_lang.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":"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"}
+{"version":3,"file":"VVirtualList.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeStyle","_unref","_Fragment","_renderList","_renderSlot","_createVNode","VSpinner","_createElementVNode","_toDisplayString","_createCommentVNode","VSpinner_default","_hoisted_1","_hoisted_2","VVirtualList_vue_vue_type_script_setup_true_lang_default","__expose","__emit","props","__props","emit","m","useMessages","resolvedLoadingText","computed","listEl","ref","sentinelEl","keyOf","toRaw","index","focusedIndex","virtualList","useVirtualList","rowOf","target","row","onFocusin","event","onFocusout","useInfiniteScroll","isDev","watch","segments","el","list","segment","align","openBlock","createElementBlock","normalizeStyle","unref","cssSize","Fragment","renderList","measure","renderSlot","_ctx","createVNode","createElementVNode","toDisplayString","createCommentVNode"],"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":"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"}

package/dist/composables/useAriaLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAriaLabel.js","names":[],"sources":["../../src/composables/useAriaLabel.ts"],"sourcesContent":["// @a11y\n/**\n * Resolve accessible names in order: aria-labelledby, consumer aria-label, label fallback.\n * Suppress aria-label when aria-labelledby names the element.\n */\n\nimport { computed, useAttrs, type ComputedRef } from 'vue'\n\nexport function useAriaLabel(label: () => string | undefined): ComputedRef<string | undefined> {\n  const attrs = useAttrs()\n  return computed(() =>\n    attrs['aria-labelledby'] != null\n      ? undefined\n      : ((attrs['aria-label'] as string | undefined) ?? label()),\n  )\n}\n"],"mappings":";;AAQA,SAAgB,EAAa,GAAkE;CAC7F,IAAM,IAAQ,EAAS;CACvB,OAAO,QACL,EAAM,sBAAsB,OAEtB,EAAM,iBAAwC,EAAM,IADtD,KAAA,CAEN;AACF"}
+{"version":3,"file":"useAriaLabel.js","names":["useAriaLabel","attrs","useAttrs","computed","label"],"sources":["../../src/composables/useAriaLabel.ts"],"sourcesContent":["// @a11y\n/**\n * Resolve accessible names in order: aria-labelledby, consumer aria-label, label fallback.\n * Suppress aria-label when aria-labelledby names the element.\n */\n\nimport { computed, useAttrs, type ComputedRef } from 'vue'\n\nexport function useAriaLabel(label: () => string | undefined): ComputedRef<string | undefined> {\n  const attrs = useAttrs()\n  return computed(() =>\n    attrs['aria-labelledby'] != null\n      ? undefined\n      : ((attrs['aria-label'] as string | undefined) ?? label()),\n  )\n}\n"],"mappings":";;AAQA,SAAgBA,EAAa,GAAkE;CAC7F,IAAMC,IAAQC,EAAS;CACvB,OAAOC,QACLF,EAAM,sBAAsB,OAEtBA,EAAM,iBAAwCG,EAAM,IADtD,KAAA,CAEN;AACF"}

package/dist/composables/useChoice.js.map

@@ -1 +1 @@
-{"version":3,"file":"useChoice.js","names":[],"sources":["../../src/composables/useChoice.ts"],"sourcesContent":["import { ref } from 'vue'\n\nimport { useFieldIds } from './useFieldIds'\nimport { useRootAttrs } from './useRootAttrs'\n\n// @a11y @core\n/**\n * The wiring VCheckbox, VRadio and VSwitch share. Their root is a layout box, so every attribute\n * but `class` and `style` goes to the native input, where `name`, `required` and the aria-*\n * take part in the form and the accessibility tree. The hint and the error are referenced from\n * the input rather than nested in its label, so they are read after the name. The component\n * declares `inheritAttrs: false` itself.\n */\nexport function useChoice(props: { hint?: string; error?: string; readonly: boolean }) {\n  const { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n  const { hintId, errorId, describedBy } = useFieldIds(\n    attrs,\n    () => !!props.hint && !props.error,\n    undefined,\n    () => !!props.error,\n  )\n\n  const inputEl = ref<HTMLInputElement | null>(null)\n\n  /**\n   * The native `readonly` attribute does nothing on a checkbox or a radio. Cancelling the click\n   * refuses the change: the browser puts the previous state back and fires no `change`, so the\n   * model never hears of it.\n   */\n  function refuseWhenReadonly(event: MouseEvent) {\n    if (props.readonly) event.preventDefault()\n  }\n\n  return {\n    rootClass,\n    rootStyle,\n    forwardedAttrs,\n    hintId,\n    errorId,\n    describedBy,\n    inputEl,\n    refuseWhenReadonly,\n    /** What the component exposes: its root is a layout box, so these reach the real input. */\n    exposed: {\n      /** Moves the focus to the native input. */\n      focus: (options?: FocusOptions) => inputEl.value?.focus(options),\n      /** The native input, for what `focus` does not cover. */\n      el: inputEl,\n    },\n  }\n}\n"],"mappings":";;;;AAaA,SAAgB,EAAU,GAA6D;CACrF,IAAM,EAAE,UAAO,cAAW,cAAW,sBAAmB,EAAa,GAC/D,EAAE,WAAQ,YAAS,mBAAgB,EACvC,SACM,CAAC,CAAC,EAAM,QAAQ,CAAC,EAAM,OAC7B,KAAA,SACM,CAAC,CAAC,EAAM,KAChB,GAEM,IAAU,EAA6B,IAAI;CAOjD,SAAS,EAAmB,GAAmB;EAC7C,AAAI,EAAM,YAAU,EAAM,eAAe;CAC3C;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA,SAAS;GAEP,QAAQ,MAA2B,EAAQ,OAAO,MAAM,CAAO;GAE/D,IAAI;EACN;CACF;AACF"}
+{"version":3,"file":"useChoice.js","names":["useChoice","useRootAttrs","useFieldIds","attrs","props","inputEl","ref","refuseWhenReadonly","event","options"],"sources":["../../src/composables/useChoice.ts"],"sourcesContent":["import { ref } from 'vue'\n\nimport { useFieldIds } from './useFieldIds'\nimport { useRootAttrs } from './useRootAttrs'\n\n// @a11y @core\n/**\n * The wiring VCheckbox, VRadio and VSwitch share. Their root is a layout box, so every attribute\n * but `class` and `style` goes to the native input, where `name`, `required` and the aria-*\n * take part in the form and the accessibility tree. The hint and the error are referenced from\n * the input rather than nested in its label, so they are read after the name. The component\n * declares `inheritAttrs: false` itself.\n */\nexport function useChoice(props: { hint?: string; error?: string; readonly: boolean }) {\n  const { attrs, rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n  const { hintId, errorId, describedBy } = useFieldIds(\n    attrs,\n    () => !!props.hint && !props.error,\n    undefined,\n    () => !!props.error,\n  )\n\n  const inputEl = ref<HTMLInputElement | null>(null)\n\n  /**\n   * The native `readonly` attribute does nothing on a checkbox or a radio. Cancelling the click\n   * refuses the change: the browser puts the previous state back and fires no `change`, so the\n   * model never hears of it.\n   */\n  function refuseWhenReadonly(event: MouseEvent) {\n    if (props.readonly) event.preventDefault()\n  }\n\n  return {\n    rootClass,\n    rootStyle,\n    forwardedAttrs,\n    hintId,\n    errorId,\n    describedBy,\n    inputEl,\n    refuseWhenReadonly,\n    /** What the component exposes: its root is a layout box, so these reach the real input. */\n    exposed: {\n      /** Moves the focus to the native input. */\n      focus: (options?: FocusOptions) => inputEl.value?.focus(options),\n      /** The native input, for what `focus` does not cover. */\n      el: inputEl,\n    },\n  }\n}\n"],"mappings":";;;;AAaA,SAAgBA,EAAU,GAA6D;CACrF,IAAM,EAAE,UAAO,cAAW,cAAW,sBAAmBC,EAAa,GAC/D,EAAE,WAAQ,YAAS,mBAAgBC,EACvCC,SACM,CAAC,CAACC,EAAM,QAAQ,CAACA,EAAM,OAC7B,KAAA,SACM,CAAC,CAACA,EAAM,KAChB,GAEMC,IAAUC,EAA6B,IAAI;CAOjD,SAASC,EAAmB,GAAmB;EAC7C,AAAIH,EAAM,YAAUI,EAAM,eAAe;CAC3C;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA,SAAS;GAEP,QAAQ,MAA2BH,EAAQ,OAAO,MAAMI,CAAO;GAE/D,IAAIJ;EACN;CACF;AACF"}