vectis-ui 0.8.1 → 0.9.0

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

@@ -1 +1 @@
-{"version":3,"file":"VSeparator.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VSeparator/VSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y — no behavioural JS at all. Choosing an `<hr>` as the root IS the\n// accessibility decision: the `separator` role comes with it, and\n// `aria-orientation` is emitted for the vertical case alone.\n/**\n * A one-pixel rule drawn between two blocks. It renders an `<hr>`, so assistive\n * technology already knows it is a separator, and the element takes no focus and\n * appears in no keyboard navigation.\n *\n * It carries no content slot and no spacing prop, on purpose. A divider with a label\n * in the middle is really a heading that happens to have a rule, and the space\n * around a rule belongs to the layout placing it — the same rule VTypography\n * follows.\n */\n/** Which way the rule runs. */\nexport type SeparatorOrientation = 'horizontal' | 'vertical'\n\ninterface SeparatorProps {\n  /**\n   * The direction the rule runs in: across by default, or down the page under\n   * `vertical`. A vertical rule needs a height to show: as a flex or grid item it\n   * takes the one of its line, but in ordinary flow the consumer has to set one.\n   */\n  orientation?: SeparatorOrientation\n}\n\nwithDefaults(defineProps<SeparatorProps>(), {\n  orientation: 'horizontal',\n})\n</script>\n\n<template>\n  <!-- aria-orientation is emitted only when it CONTRADICTS what the role already\n       implies: a separator is horizontal by default, so stating it would merely\n       restate the role. This is the same convention the VTabs tablist follows. -->\n  <hr\n    class=\"v-separator\"\n    :data-orientation=\"orientation\"\n    :aria-orientation=\"orientation === 'vertical' ? 'vertical' : undefined\"\n  />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-separator {\n    flex: none;\n    /* The rule is painted with a BORDER and not a background. Under Windows forced\n       colours a background is forced to Canvas, where a rule drawn that way simply\n       vanishes, while a border colour is forced to CanvasText and survives — the\n       same argument that made the icon registry ship SVG paths. Everywhere else the\n       two paints are pixel-identical, `box-sizing: border-box` keeping the box at\n       one pixel in total either way.\n\n       The user agent gives an <hr> a 0.5em block margin, an automatic inline one and\n       an inset border. All three are cancelled here rather than in the reset: the\n       reset sits in a weaker layer, so the margin below would win only by accident.\n\n       TRAP — `.v-menu-separator` and `.v-combobox-separator` override that margin\n       from THEIR OWN sheet, and which of the two sheets the consumer's bundler puts\n       last is not ours to decide. Both are therefore written as the compound\n       `.v-separator.v-x-separator`, and every declaration added here falls under the\n       same obligation. */\n    margin: 0;\n    border: 0 solid var(--vectis-color-border);\n  }\n\n  .v-separator[data-orientation='horizontal'] {\n    border-block-start-width: 1px;\n  }\n\n  /* `align-self: stretch` IS the contract of a vertical rule. An <hr> has no height\n     of its own, so the rule only appears when it is a flex or grid item, where this\n     makes it take the full cross size of its line whatever the container's\n     align-items says. In ordinary flow it collapses to nothing, silently and with no\n     error — there it is up to the consumer to give it a block-size. */\n  .v-separator[data-orientation='vertical'] {\n    align-self: stretch;\n    border-inline-start-width: 1px;\n  }\n}\n</style>\n"],"mappings":";;;;;;yBAmCE,EAIE,MAAA;GAHA,OAAM;GACL,oBAAkB,EAAA;GAClB,oBAAkB,EAAA,gBAAW,aAAA,aAA+B,KAAA"}
+{"version":3,"file":"VSeparator.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VSeparator/VSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// No behavioural JS at all. Choosing an `<hr>` as the root IS the\n// accessibility decision: the `separator` role comes with it, and\n// `aria-orientation` is emitted for the vertical case alone.\n/**\n * A one-pixel rule drawn between two blocks. It renders an `<hr>`, so assistive\n * technology already knows it is a separator, and the element takes no focus and\n * appears in no keyboard navigation.\n *\n * It carries no content slot and no spacing prop, on purpose. A divider with a label\n * in the middle is really a heading that happens to have a rule, and the space\n * around a rule belongs to the layout placing it: the same rule VTypography\n * follows.\n */\n/** Which way the rule runs. */\nexport type SeparatorOrientation = 'horizontal' | 'vertical'\n\ninterface SeparatorProps {\n  /**\n   * The direction the rule runs in: across by default, or down the page under\n   * `vertical`. A vertical rule needs a height to show: as a flex or grid item it\n   * takes the one of its line, but in ordinary flow the consumer has to set one.\n   */\n  orientation?: SeparatorOrientation\n}\n\nwithDefaults(defineProps<SeparatorProps>(), {\n  orientation: 'horizontal',\n})\n</script>\n\n<template>\n  <!-- aria-orientation is emitted only when it CONTRADICTS what the role already\n       implies: a separator is horizontal by default, so stating it would merely\n       restate the role. This is the same convention the VTabs tablist follows. -->\n  <hr\n    class=\"v-separator\"\n    :data-orientation=\"orientation\"\n    :aria-orientation=\"orientation === 'vertical' ? 'vertical' : undefined\"\n  />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-separator {\n    flex: none;\n    /* The rule is painted with a BORDER and not a background. Under Windows forced\n       colours a background is forced to Canvas, where a rule drawn that way simply\n       vanishes, while a border colour is forced to CanvasText and survives — the\n       same argument that made the icon registry ship SVG paths. Everywhere else the\n       two paints are pixel-identical, `box-sizing: border-box` keeping the box at\n       one pixel in total either way.\n\n       The user agent gives an <hr> a 0.5em block margin, an automatic inline one and\n       an inset border. All three are cancelled here rather than in the reset: the\n       reset sits in a weaker layer, so the margin below would win only by accident.\n\n       TRAP — `.v-menu-separator` and `.v-combobox-separator` override that margin\n       from THEIR OWN sheet, and which of the two sheets the consumer's bundler puts\n       last is not ours to decide. Both are therefore written as the compound\n       `.v-separator.v-x-separator`, and every declaration added here falls under the\n       same obligation. */\n    margin: 0;\n    border: 0 solid var(--vectis-color-border);\n  }\n\n  .v-separator[data-orientation='horizontal'] {\n    border-block-start-width: 1px;\n  }\n\n  /* `align-self: stretch` IS the contract of a vertical rule. An <hr> has no height\n     of its own, so the rule only appears when it is a flex or grid item, where this\n     makes it take the full cross size of its line whatever the container's\n     align-items says. In ordinary flow it collapses to nothing, silently and with no\n     error — there it is up to the consumer to give it a block-size. */\n  .v-separator[data-orientation='vertical'] {\n    align-self: stretch;\n    border-inline-start-width: 1px;\n  }\n}\n</style>\n"],"mappings":";;;;;;yBAmCE,EAIE,MAAA;GAHA,OAAM;GACL,oBAAkB,EAAA;GAClB,oBAAkB,EAAA,gBAAW,aAAA,aAA+B,KAAA"}

package/dist/components/VSideNavigation/VSideNavigation.d.ts

@@ -3,8 +3,8 @@ import { IconSource } from '../VIcon/types.js';
 export type SideNavigationSize = 'sm' | 'md';
 interface SideNavigationProps {
     /**
-     * What screen readers announce for this navigation. A page often has several — a
-     * main one, a sidebar, a footer — and this is what tells them apart. It falls back
+     * What screen readers announce for this navigation. A page often has several (a
+     * main one, a sidebar, a footer) and this is what tells them apart. It falls back
      * to the design system dictionary.
      */
     label?: string;

package/dist/components/VSideNavigation/VSideNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"VSideNavigation.js","names":[],"sources":["../../../src/components/VSideNavigation/VSideNavigation.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @core\n/**\n * A sidebar's navigation: a tree of links shown in place rather than in a panel, its\n * branches foldable. Written out level by level with its subcomponents, never from an\n * `items` prop.\n *\n * Real `<ul>`/`<li>` markup, where VMenu uses plain containers, and the difference is\n * meaningful: the ARIA menu pattern forbids lists, admitting only `menuitem` and `group`,\n * whereas in a navigation the counting and the nesting ARE the information. \"List of 4\n * items, item 2, itself a list of 3\" is a screen reader describing the site's structure.\n *\n * The folding is native `<details>`: state, keyboard, exclusivity between neighbouring\n * sections and animation all come from the browser. The only behavioural JS is arrow-key\n * focus movement.\n */\n\nimport { provide, ref, useId } from 'vue'\n\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport { sideNavigationKey } from './context'\n\nimport { arrowNavigate } from '../../utils/arrowNav'\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\n/** The height of the rows: 32 or 40 pixels. */\nexport type SideNavigationSize = 'sm' | 'md'\n\ninterface SideNavigationProps {\n  /**\n   * What screen readers announce for this navigation. A page often has several — a\n   * main one, a sidebar, a footer — and this is what tells them apart. It falls back\n   * to the design system dictionary.\n   */\n  label?: string\n  /** The height of the rows, 32 or 40 pixels, inherited by every level. */\n  size?: SideNavigationSize\n  /**\n   * Takes 4px off the height of every row. It is a density setting and NOT a collapsed\n   * icon-only rail, which this component does not offer.\n   */\n  compact?: boolean\n  /**\n   * Keeps a single section open at a time WITHIN EACH LEVEL, which the browser does on\n   * its own. It is off by default: a sidebar normally lets several sections stay open.\n   */\n  exclusive?: boolean\n  /** The chevron of a closed section: an icon name, or an explicit render. */\n  expandIcon?: IconSource\n  /**\n   * The chevron of an open section. Leave it out and the closed one is simply rotated\n   * by 180°.\n   */\n  collapseIcon?: IconSource\n}\n\nconst props = withDefaults(defineProps<SideNavigationProps>(), {\n  label: undefined,\n  size: 'md',\n  compact: false,\n  exclusive: false,\n  expandIcon: () => expandMoreIcon,\n  collapseIcon: undefined,\n})\n\ndefineSlots<{\n  /** The first level of the tree: items, groups and separators. */\n  default(): unknown\n}>()\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.sideNavigation.label)\n\n// The name shared by the first level's sections. Each item mints another for its own\n// children, which is what keeps the exclusivity local to a level (see context.ts).\nconst rootName = useId()\n\nprovide(sideNavigationKey, {\n  get name() {\n    return props.exclusive ? rootName : undefined\n  },\n  get exclusive() {\n    return props.exclusive\n  },\n  get expandIcon() {\n    return props.expandIcon\n  },\n  get collapseIcon() {\n    return props.collapseIcon\n  },\n})\n\nconst rootEl = ref<HTMLElement | null>(null)\n\n// @keyboard @a11y\n/**\n * What the arrow keys may move to: the header of a branch, and the link of a leaf.\n *\n * Both forms of disabling have to be excluded, since `:disabled` only ever matches a\n * button — an inert link and a disabled branch header are marked with `aria-disabled`\n * instead, exactly as in VMenu's panel.\n */\nconst ROW_SELECTOR = ':is(summary, .v-side-nav-action):not(:disabled):not([aria-disabled=\"true\"])'\n\n// @keyboard @a11y\n/**\n * Whether a row can actually be reached: everything inside a CLOSED branch is skipped,\n * except that branch's own header, which stays focusable.\n *\n * TRAP — this cannot be left to the shared helper, which skips whatever is not\n * displayed. The content of a closed disclosure element is not hidden that way: the\n * browser passes over it by a rule of its own, and it still reports itself as\n * displayed. Walking the ancestors is the only reliable answer, and it also spares one\n * style computation per row.\n */\nfunction reachable(el: HTMLElement, root: HTMLElement): boolean {\n  for (\n    let child: HTMLElement = el, parent = el.parentElement;\n    parent && child !== root;\n    child = parent, parent = parent.parentElement\n  ) {\n    if (parent.tagName === 'DETAILS' && !(parent as HTMLDetailsElement).open) {\n      if (child.tagName !== 'SUMMARY') return false\n    }\n  }\n  return true\n}\n\n// @keyboard @a11y\n/*\n * The component's only behavioural JavaScript, and it exists because nothing native\n * moves the focus from one link to the next.\n *\n * It follows the design system's contract: the arrows MOVE the focus and never\n * activate anything. Every visible row also stays a stop in the tab order — the\n * VToggle model — which is what the disclosure navigation pattern calls for.\n */\nfunction onKeydown(event: KeyboardEvent) {\n  const root = rootEl.value\n  if (!root) return\n  arrowNavigate(\n    event,\n    root,\n    () => [...root.querySelectorAll<HTMLElement>(ROW_SELECTOR)].filter((el) => reachable(el, root)),\n    { vertical: true },\n  )\n}\n</script>\n\n<template>\n  <nav\n    ref=\"rootEl\"\n    class=\"v-side-nav v-control\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :aria-label=\"ariaLabel\"\n    @keydown=\"onKeydown\"\n  >\n    <ul class=\"v-side-nav-list\">\n      <slot />\n    </ul>\n  </nav>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-side-nav {\n    /*\n     * How much one level of the tree is indented by: exactly the room a leading icon\n     * occupies, the icon plus the gap after it. That is what makes a subitem's label\n     * start on the SAME VERTICAL as its parent's, whether or not the parent has an\n     * icon.\n     *\n     * Both measurements come from the shared size class set on this very element, so\n     * the indent follows the size scale with no table of its own, and a consumer who\n     * changes the icon size sees it follow. Every level inherits it.\n     */\n    --side-nav-indent: calc(var(--vectis-icon-size) + var(--control-gap));\n\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * The three lists of the tree are stripped of their bullets and their padding here,\n   * once, rather than in each of the three components that render one. Nothing can be\n   * arbitrated wrongly by doing so: these classes exist nowhere else in the design\n   * system.\n   *\n   * They are laid out as flex columns and not as ordinary blocks, which removes margin\n   * collapsing entirely — otherwise a group's margin could escape a branch that is\n   * closed, and therefore of zero height, and push the rows apart under it.\n   */\n  .v-side-nav-list,\n  .v-side-nav-children,\n  .v-side-nav-group-list {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VSideNavigation.js","names":[],"sources":["../../../src/components/VSideNavigation/VSideNavigation.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @core\n/**\n * A sidebar's navigation: a tree of links shown in place rather than in a panel, its\n * branches foldable. Written out level by level with its subcomponents, never from an\n * `items` prop.\n *\n * Real `<ul>`/`<li>` markup, where VMenu uses plain containers, and the difference is\n * meaningful: the ARIA menu pattern forbids lists, admitting only `menuitem` and `group`,\n * whereas in a navigation the counting and the nesting ARE the information. \"List of 4\n * items, item 2, itself a list of 3\" is a screen reader describing the site's structure.\n *\n * The folding is native `<details>`: state, keyboard, exclusivity between neighbouring\n * sections and animation all come from the browser. The only behavioural JS is arrow-key\n * focus movement.\n */\n\nimport { provide, ref, useId } from 'vue'\n\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport { sideNavigationKey } from './context'\n\nimport { arrowNavigate } from '../../utils/arrowNav'\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\n/** The height of the rows: 32 or 40 pixels. */\nexport type SideNavigationSize = 'sm' | 'md'\n\ninterface SideNavigationProps {\n  /**\n   * What screen readers announce for this navigation. A page often has several (a\n   * main one, a sidebar, a footer) and this is what tells them apart. It falls back\n   * to the design system dictionary.\n   */\n  label?: string\n  /** The height of the rows, 32 or 40 pixels, inherited by every level. */\n  size?: SideNavigationSize\n  /**\n   * Takes 4px off the height of every row. It is a density setting and NOT a collapsed\n   * icon-only rail, which this component does not offer.\n   */\n  compact?: boolean\n  /**\n   * Keeps a single section open at a time WITHIN EACH LEVEL, which the browser does on\n   * its own. It is off by default: a sidebar normally lets several sections stay open.\n   */\n  exclusive?: boolean\n  /** The chevron of a closed section: an icon name, or an explicit render. */\n  expandIcon?: IconSource\n  /**\n   * The chevron of an open section. Leave it out and the closed one is simply rotated\n   * by 180°.\n   */\n  collapseIcon?: IconSource\n}\n\nconst props = withDefaults(defineProps<SideNavigationProps>(), {\n  label: undefined,\n  size: 'md',\n  compact: false,\n  exclusive: false,\n  expandIcon: () => expandMoreIcon,\n  collapseIcon: undefined,\n})\n\ndefineSlots<{\n  /** The first level of the tree: items, groups and separators. */\n  default(): unknown\n}>()\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.sideNavigation.label)\n\n// The name shared by the first level's sections. Each item mints another for its own\n// children, which is what keeps the exclusivity local to a level (see context.ts).\nconst rootName = useId()\n\nprovide(sideNavigationKey, {\n  get name() {\n    return props.exclusive ? rootName : undefined\n  },\n  get exclusive() {\n    return props.exclusive\n  },\n  get expandIcon() {\n    return props.expandIcon\n  },\n  get collapseIcon() {\n    return props.collapseIcon\n  },\n})\n\nconst rootEl = ref<HTMLElement | null>(null)\n\n// @keyboard @a11y\n/**\n * What the arrow keys may move to: the header of a branch, and the link of a leaf.\n *\n * Both forms of disabling have to be excluded, since `:disabled` only ever matches a\n * button — an inert link and a disabled branch header are marked with `aria-disabled`\n * instead, exactly as in VMenu's panel.\n */\nconst ROW_SELECTOR = ':is(summary, .v-side-nav-action):not(:disabled):not([aria-disabled=\"true\"])'\n\n// @keyboard @a11y\n/**\n * Whether a row can actually be reached: everything inside a CLOSED branch is skipped,\n * except that branch's own header, which stays focusable.\n *\n * TRAP — this cannot be left to the shared helper, which skips whatever is not\n * displayed. The content of a closed disclosure element is not hidden that way: the\n * browser passes over it by a rule of its own, and it still reports itself as\n * displayed. Walking the ancestors is the only reliable answer, and it also spares one\n * style computation per row.\n */\nfunction reachable(el: HTMLElement, root: HTMLElement): boolean {\n  for (\n    let child: HTMLElement = el, parent = el.parentElement;\n    parent && child !== root;\n    child = parent, parent = parent.parentElement\n  ) {\n    if (parent.tagName === 'DETAILS' && !(parent as HTMLDetailsElement).open) {\n      if (child.tagName !== 'SUMMARY') return false\n    }\n  }\n  return true\n}\n\n// @keyboard @a11y\n/*\n * The component's only behavioural JavaScript, and it exists because nothing native\n * moves the focus from one link to the next.\n *\n * It follows the design system's contract: the arrows MOVE the focus and never\n * activate anything. Every visible row also stays a stop in the tab order — the\n * VToggle model — which is what the disclosure navigation pattern calls for.\n */\nfunction onKeydown(event: KeyboardEvent) {\n  const root = rootEl.value\n  if (!root || event.defaultPrevented) return\n  // Only a key pressed ON a row: a field or a menu in a row's `#end` slot is a descendant\n  // too, and its caret or its own list must keep the arrows and Home/End.\n  if (!(event.target as Element | null)?.matches(ROW_SELECTOR)) return\n  arrowNavigate(\n    event,\n    root,\n    () => [...root.querySelectorAll<HTMLElement>(ROW_SELECTOR)].filter((el) => reachable(el, root)),\n    { vertical: true },\n  )\n}\n</script>\n\n<template>\n  <nav\n    ref=\"rootEl\"\n    class=\"v-side-nav v-control\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :aria-label=\"ariaLabel\"\n    @keydown=\"onKeydown\"\n  >\n    <ul class=\"v-side-nav-list\">\n      <slot />\n    </ul>\n  </nav>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-side-nav {\n    /*\n     * How much one level of the tree is indented by: exactly the room a leading icon\n     * occupies, the icon plus the gap after it. That is what makes a subitem's label\n     * start on the SAME VERTICAL as its parent's, whether or not the parent has an\n     * icon.\n     *\n     * Both measurements come from the shared size class set on this very element, so\n     * the indent follows the size scale with no table of its own, and a consumer who\n     * changes the icon size sees it follow. Every level inherits it.\n     */\n    --side-nav-indent: calc(var(--vectis-icon-size) + var(--control-gap));\n\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * The three lists of the tree are stripped of their bullets and their padding here,\n   * once, rather than in each of the three components that render one. Nothing can be\n   * arbitrated wrongly by doing so: these classes exist nowhere else in the design\n   * system.\n   *\n   * They are laid out as flex columns and not as ordinary blocks, which removes margin\n   * collapsing entirely — otherwise a group's margin could escape a branch that is\n   * closed, and therefore of zero height, and push the rows apart under it.\n   */\n  .v-side-nav-list,\n  .v-side-nav-children,\n  .v-side-nav-group-list {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VSideNavigation/VSideNavigation.vue_vue_type_script_setup_true_lang.js

@@ -48,7 +48,7 @@ var m = [
 		}
 		function S(e) {
 			let t = b.value;
-			t && n(e, t, () => [...t.querySelectorAll(g)].filter((e) => x(e, t)), { vertical: !0 });
+			!t || e.defaultPrevented || e.target?.matches(g) && n(e, t, () => [...t.querySelectorAll(g)].filter((e) => x(e, t)), { vertical: !0 });
 		}
 		return (e, t) => (c(), a("nav", {
 			ref_key: "rootEl",

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

@@ -1 +1 @@
-{"version":3,"file":"VSideNavigation.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VSideNavigation/VSideNavigation.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @core\n/**\n * A sidebar's navigation: a tree of links shown in place rather than in a panel, its\n * branches foldable. Written out level by level with its subcomponents, never from an\n * `items` prop.\n *\n * Real `<ul>`/`<li>` markup, where VMenu uses plain containers, and the difference is\n * meaningful: the ARIA menu pattern forbids lists, admitting only `menuitem` and `group`,\n * whereas in a navigation the counting and the nesting ARE the information. \"List of 4\n * items, item 2, itself a list of 3\" is a screen reader describing the site's structure.\n *\n * The folding is native `<details>`: state, keyboard, exclusivity between neighbouring\n * sections and animation all come from the browser. The only behavioural JS is arrow-key\n * focus movement.\n */\n\nimport { provide, ref, useId } from 'vue'\n\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport { sideNavigationKey } from './context'\n\nimport { arrowNavigate } from '../../utils/arrowNav'\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\n/** The height of the rows: 32 or 40 pixels. */\nexport type SideNavigationSize = 'sm' | 'md'\n\ninterface SideNavigationProps {\n  /**\n   * What screen readers announce for this navigation. A page often has several — a\n   * main one, a sidebar, a footer — and this is what tells them apart. It falls back\n   * to the design system dictionary.\n   */\n  label?: string\n  /** The height of the rows, 32 or 40 pixels, inherited by every level. */\n  size?: SideNavigationSize\n  /**\n   * Takes 4px off the height of every row. It is a density setting and NOT a collapsed\n   * icon-only rail, which this component does not offer.\n   */\n  compact?: boolean\n  /**\n   * Keeps a single section open at a time WITHIN EACH LEVEL, which the browser does on\n   * its own. It is off by default: a sidebar normally lets several sections stay open.\n   */\n  exclusive?: boolean\n  /** The chevron of a closed section: an icon name, or an explicit render. */\n  expandIcon?: IconSource\n  /**\n   * The chevron of an open section. Leave it out and the closed one is simply rotated\n   * by 180°.\n   */\n  collapseIcon?: IconSource\n}\n\nconst props = withDefaults(defineProps<SideNavigationProps>(), {\n  label: undefined,\n  size: 'md',\n  compact: false,\n  exclusive: false,\n  expandIcon: () => expandMoreIcon,\n  collapseIcon: undefined,\n})\n\ndefineSlots<{\n  /** The first level of the tree: items, groups and separators. */\n  default(): unknown\n}>()\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.sideNavigation.label)\n\n// The name shared by the first level's sections. Each item mints another for its own\n// children, which is what keeps the exclusivity local to a level (see context.ts).\nconst rootName = useId()\n\nprovide(sideNavigationKey, {\n  get name() {\n    return props.exclusive ? rootName : undefined\n  },\n  get exclusive() {\n    return props.exclusive\n  },\n  get expandIcon() {\n    return props.expandIcon\n  },\n  get collapseIcon() {\n    return props.collapseIcon\n  },\n})\n\nconst rootEl = ref<HTMLElement | null>(null)\n\n// @keyboard @a11y\n/**\n * What the arrow keys may move to: the header of a branch, and the link of a leaf.\n *\n * Both forms of disabling have to be excluded, since `:disabled` only ever matches a\n * button — an inert link and a disabled branch header are marked with `aria-disabled`\n * instead, exactly as in VMenu's panel.\n */\nconst ROW_SELECTOR = ':is(summary, .v-side-nav-action):not(:disabled):not([aria-disabled=\"true\"])'\n\n// @keyboard @a11y\n/**\n * Whether a row can actually be reached: everything inside a CLOSED branch is skipped,\n * except that branch's own header, which stays focusable.\n *\n * TRAP — this cannot be left to the shared helper, which skips whatever is not\n * displayed. The content of a closed disclosure element is not hidden that way: the\n * browser passes over it by a rule of its own, and it still reports itself as\n * displayed. Walking the ancestors is the only reliable answer, and it also spares one\n * style computation per row.\n */\nfunction reachable(el: HTMLElement, root: HTMLElement): boolean {\n  for (\n    let child: HTMLElement = el, parent = el.parentElement;\n    parent && child !== root;\n    child = parent, parent = parent.parentElement\n  ) {\n    if (parent.tagName === 'DETAILS' && !(parent as HTMLDetailsElement).open) {\n      if (child.tagName !== 'SUMMARY') return false\n    }\n  }\n  return true\n}\n\n// @keyboard @a11y\n/*\n * The component's only behavioural JavaScript, and it exists because nothing native\n * moves the focus from one link to the next.\n *\n * It follows the design system's contract: the arrows MOVE the focus and never\n * activate anything. Every visible row also stays a stop in the tab order — the\n * VToggle model — which is what the disclosure navigation pattern calls for.\n */\nfunction onKeydown(event: KeyboardEvent) {\n  const root = rootEl.value\n  if (!root) return\n  arrowNavigate(\n    event,\n    root,\n    () => [...root.querySelectorAll<HTMLElement>(ROW_SELECTOR)].filter((el) => reachable(el, root)),\n    { vertical: true },\n  )\n}\n</script>\n\n<template>\n  <nav\n    ref=\"rootEl\"\n    class=\"v-side-nav v-control\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :aria-label=\"ariaLabel\"\n    @keydown=\"onKeydown\"\n  >\n    <ul class=\"v-side-nav-list\">\n      <slot />\n    </ul>\n  </nav>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-side-nav {\n    /*\n     * How much one level of the tree is indented by: exactly the room a leading icon\n     * occupies, the icon plus the gap after it. That is what makes a subitem's label\n     * start on the SAME VERTICAL as its parent's, whether or not the parent has an\n     * icon.\n     *\n     * Both measurements come from the shared size class set on this very element, so\n     * the indent follows the size scale with no table of its own, and a consumer who\n     * changes the icon size sees it follow. Every level inherits it.\n     */\n    --side-nav-indent: calc(var(--vectis-icon-size) + var(--control-gap));\n\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * The three lists of the tree are stripped of their bullets and their padding here,\n   * once, rather than in each of the three components that render one. Nothing can be\n   * arbitrated wrongly by doing so: these classes exist nowhere else in the design\n   * system.\n   *\n   * They are laid out as flex columns and not as ordinary blocks, which removes margin\n   * collapsing entirely — otherwise a group's margin could escape a branch that is\n   * closed, and therefore of zero height, and push the rows apart under it.\n   */\n  .v-side-nav-list,\n  .v-side-nav-children,\n  .v-side-nav-group-list {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;qCAwGM,IAAe;;;;;;;;;;;;;;;;;EA9CrB,IAAM,IAAQ,GAcR,IAAI,EAAY,GAChB,IAAY,QAAmB,EAAM,SAAS,EAAE,MAAM,eAAe,KAAK,GAI1E,IAAW,EAAM;EAEvB,EAAQ,GAAmB;GACzB,IAAI,OAAO;IACT,OAAO,EAAM,YAAY,IAAW,KAAA;GACtC;GACA,IAAI,YAAY;IACd,OAAO,EAAM;GACf;GACA,IAAI,aAAa;IACf,OAAO,EAAM;GACf;GACA,IAAI,eAAe;IACjB,OAAO,EAAM;GACf;EACF,CAAC;EAED,IAAM,IAAS,EAAwB,IAAI;EAuB3C,SAAS,EAAU,GAAiB,GAA4B;GAC9D,KACE,IAAI,IAAqB,GAAI,IAAS,EAAG,eACzC,KAAU,MAAU,GACpB,IAAQ,GAAQ,IAAS,EAAO,eAEhC,IAAI,EAAO,YAAY,aAAa,CAAE,EAA8B,QAC9D,EAAM,YAAY,WAAW,OAAO;GAG5C,OAAO;EACT;EAWA,SAAS,EAAU,GAAsB;GACvC,IAAM,IAAO,EAAO;GACf,KACL,EACE,GACA,SACM,CAAC,GAAG,EAAK,iBAA8B,CAAY,CAAC,CAAC,CAAC,QAAQ,MAAO,EAAU,GAAI,CAAI,CAAC,GAC9F,EAAE,UAAU,GAAK,CACnB;EACF;yBAIE,EAWM,OAAA;YAVA;GAAJ,KAAI;GACJ,OAAM;GACL,aAAW,EAAA;GACX,gBAAc,EAAA,UAAO,KAAQ,KAAA;GAC7B,cAAY,EAAA,CAAA;GACH;MAEV,EAEK,MAFL,GAEK,CADH,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}
+{"version":3,"file":"VSideNavigation.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VSideNavigation/VSideNavigation.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @core\n/**\n * A sidebar's navigation: a tree of links shown in place rather than in a panel, its\n * branches foldable. Written out level by level with its subcomponents, never from an\n * `items` prop.\n *\n * Real `<ul>`/`<li>` markup, where VMenu uses plain containers, and the difference is\n * meaningful: the ARIA menu pattern forbids lists, admitting only `menuitem` and `group`,\n * whereas in a navigation the counting and the nesting ARE the information. \"List of 4\n * items, item 2, itself a list of 3\" is a screen reader describing the site's structure.\n *\n * The folding is native `<details>`: state, keyboard, exclusivity between neighbouring\n * sections and animation all come from the browser. The only behavioural JS is arrow-key\n * focus movement.\n */\n\nimport { provide, ref, useId } from 'vue'\n\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport { sideNavigationKey } from './context'\n\nimport { arrowNavigate } from '../../utils/arrowNav'\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\n/** The height of the rows: 32 or 40 pixels. */\nexport type SideNavigationSize = 'sm' | 'md'\n\ninterface SideNavigationProps {\n  /**\n   * What screen readers announce for this navigation. A page often has several (a\n   * main one, a sidebar, a footer) and this is what tells them apart. It falls back\n   * to the design system dictionary.\n   */\n  label?: string\n  /** The height of the rows, 32 or 40 pixels, inherited by every level. */\n  size?: SideNavigationSize\n  /**\n   * Takes 4px off the height of every row. It is a density setting and NOT a collapsed\n   * icon-only rail, which this component does not offer.\n   */\n  compact?: boolean\n  /**\n   * Keeps a single section open at a time WITHIN EACH LEVEL, which the browser does on\n   * its own. It is off by default: a sidebar normally lets several sections stay open.\n   */\n  exclusive?: boolean\n  /** The chevron of a closed section: an icon name, or an explicit render. */\n  expandIcon?: IconSource\n  /**\n   * The chevron of an open section. Leave it out and the closed one is simply rotated\n   * by 180°.\n   */\n  collapseIcon?: IconSource\n}\n\nconst props = withDefaults(defineProps<SideNavigationProps>(), {\n  label: undefined,\n  size: 'md',\n  compact: false,\n  exclusive: false,\n  expandIcon: () => expandMoreIcon,\n  collapseIcon: undefined,\n})\n\ndefineSlots<{\n  /** The first level of the tree: items, groups and separators. */\n  default(): unknown\n}>()\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.sideNavigation.label)\n\n// The name shared by the first level's sections. Each item mints another for its own\n// children, which is what keeps the exclusivity local to a level (see context.ts).\nconst rootName = useId()\n\nprovide(sideNavigationKey, {\n  get name() {\n    return props.exclusive ? rootName : undefined\n  },\n  get exclusive() {\n    return props.exclusive\n  },\n  get expandIcon() {\n    return props.expandIcon\n  },\n  get collapseIcon() {\n    return props.collapseIcon\n  },\n})\n\nconst rootEl = ref<HTMLElement | null>(null)\n\n// @keyboard @a11y\n/**\n * What the arrow keys may move to: the header of a branch, and the link of a leaf.\n *\n * Both forms of disabling have to be excluded, since `:disabled` only ever matches a\n * button — an inert link and a disabled branch header are marked with `aria-disabled`\n * instead, exactly as in VMenu's panel.\n */\nconst ROW_SELECTOR = ':is(summary, .v-side-nav-action):not(:disabled):not([aria-disabled=\"true\"])'\n\n// @keyboard @a11y\n/**\n * Whether a row can actually be reached: everything inside a CLOSED branch is skipped,\n * except that branch's own header, which stays focusable.\n *\n * TRAP — this cannot be left to the shared helper, which skips whatever is not\n * displayed. The content of a closed disclosure element is not hidden that way: the\n * browser passes over it by a rule of its own, and it still reports itself as\n * displayed. Walking the ancestors is the only reliable answer, and it also spares one\n * style computation per row.\n */\nfunction reachable(el: HTMLElement, root: HTMLElement): boolean {\n  for (\n    let child: HTMLElement = el, parent = el.parentElement;\n    parent && child !== root;\n    child = parent, parent = parent.parentElement\n  ) {\n    if (parent.tagName === 'DETAILS' && !(parent as HTMLDetailsElement).open) {\n      if (child.tagName !== 'SUMMARY') return false\n    }\n  }\n  return true\n}\n\n// @keyboard @a11y\n/*\n * The component's only behavioural JavaScript, and it exists because nothing native\n * moves the focus from one link to the next.\n *\n * It follows the design system's contract: the arrows MOVE the focus and never\n * activate anything. Every visible row also stays a stop in the tab order — the\n * VToggle model — which is what the disclosure navigation pattern calls for.\n */\nfunction onKeydown(event: KeyboardEvent) {\n  const root = rootEl.value\n  if (!root || event.defaultPrevented) return\n  // Only a key pressed ON a row: a field or a menu in a row's `#end` slot is a descendant\n  // too, and its caret or its own list must keep the arrows and Home/End.\n  if (!(event.target as Element | null)?.matches(ROW_SELECTOR)) return\n  arrowNavigate(\n    event,\n    root,\n    () => [...root.querySelectorAll<HTMLElement>(ROW_SELECTOR)].filter((el) => reachable(el, root)),\n    { vertical: true },\n  )\n}\n</script>\n\n<template>\n  <nav\n    ref=\"rootEl\"\n    class=\"v-side-nav v-control\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :aria-label=\"ariaLabel\"\n    @keydown=\"onKeydown\"\n  >\n    <ul class=\"v-side-nav-list\">\n      <slot />\n    </ul>\n  </nav>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-side-nav {\n    /*\n     * How much one level of the tree is indented by: exactly the room a leading icon\n     * occupies, the icon plus the gap after it. That is what makes a subitem's label\n     * start on the SAME VERTICAL as its parent's, whether or not the parent has an\n     * icon.\n     *\n     * Both measurements come from the shared size class set on this very element, so\n     * the indent follows the size scale with no table of its own, and a consumer who\n     * changes the icon size sees it follow. Every level inherits it.\n     */\n    --side-nav-indent: calc(var(--vectis-icon-size) + var(--control-gap));\n\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * The three lists of the tree are stripped of their bullets and their padding here,\n   * once, rather than in each of the three components that render one. Nothing can be\n   * arbitrated wrongly by doing so: these classes exist nowhere else in the design\n   * system.\n   *\n   * They are laid out as flex columns and not as ordinary blocks, which removes margin\n   * collapsing entirely — otherwise a group's margin could escape a branch that is\n   * closed, and therefore of zero height, and push the rows apart under it.\n   */\n  .v-side-nav-list,\n  .v-side-nav-children,\n  .v-side-nav-group-list {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;qCAwGM,IAAe;;;;;;;;;;;;;;;;;EA9CrB,IAAM,IAAQ,GAcR,IAAI,EAAY,GAChB,IAAY,QAAmB,EAAM,SAAS,EAAE,MAAM,eAAe,KAAK,GAI1E,IAAW,EAAM;EAEvB,EAAQ,GAAmB;GACzB,IAAI,OAAO;IACT,OAAO,EAAM,YAAY,IAAW,KAAA;GACtC;GACA,IAAI,YAAY;IACd,OAAO,EAAM;GACf;GACA,IAAI,aAAa;IACf,OAAO,EAAM;GACf;GACA,IAAI,eAAe;IACjB,OAAO,EAAM;GACf;EACF,CAAC;EAED,IAAM,IAAS,EAAwB,IAAI;EAuB3C,SAAS,EAAU,GAAiB,GAA4B;GAC9D,KACE,IAAI,IAAqB,GAAI,IAAS,EAAG,eACzC,KAAU,MAAU,GACpB,IAAQ,GAAQ,IAAS,EAAO,eAEhC,IAAI,EAAO,YAAY,aAAa,CAAE,EAA8B,QAC9D,EAAM,YAAY,WAAW,OAAO;GAG5C,OAAO;EACT;EAWA,SAAS,EAAU,GAAsB;GACvC,IAAM,IAAO,EAAO;GAChB,CAAC,KAAQ,EAAM,oBAGb,EAAM,QAA2B,QAAQ,CAAY,KAC3D,EACE,GACA,SACM,CAAC,GAAG,EAAK,iBAA8B,CAAY,CAAC,CAAC,CAAC,QAAQ,MAAO,EAAU,GAAI,CAAI,CAAC,GAC9F,EAAE,UAAU,GAAK,CACnB;EACF;yBAIE,EAWM,OAAA;YAVA;GAAJ,KAAI;GACJ,OAAM;GACL,aAAW,EAAA;GACX,gBAAc,EAAA,UAAO,KAAQ,KAAA;GAC7B,cAAY,EAAA,CAAA;GACH;MAEV,EAEK,MAFL,GAEK,CADH,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}

package/dist/components/VSideNavigation/VSideNavigationGroup.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-side-nav-group+.v-side-nav-group,.v-side-nav-item+.v-side-nav-group{margin-block-start:var(--vectis-space-3)}.v-group-label.v-side-nav-group-label{padding-inline:calc(var(--control-padding-inline) + var(--side-nav-level,0) * var(--side-nav-indent)) var(--control-padding-inline)}}
+@layer vectis.components{.v-side-nav-group+.v-side-nav-group,.v-side-nav-item+.v-side-nav-group{margin-block-start:var(--vectis-space-3)}.v-side-nav-group-label{min-block-size:var(--control-height);padding-block:var(--vectis-space-1);padding-inline:calc(var(--control-padding-inline) + var(--side-nav-level,0) * var(--side-nav-indent)) var(--control-padding-inline);font-size:var(--vectis-text-overline-size);font-weight:var(--vectis-text-overline-weight);letter-spacing:var(--vectis-text-overline-tracking);color:var(--vectis-color-text-muted);align-items:center;display:flex}}

package/dist/components/VSideNavigation/VSideNavigationGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"VSideNavigationGroup.js","names":[],"sources":["../../../src/components/VSideNavigation/VSideNavigationGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A named section of the navigation — \"Workspace\", \"Settings\". The name is plain text:\n * it cannot be focused or clicked, and it names the sublist under it for assistive\n * technology.\n *\n * Unlike a menu group, it does NOT claim to be a group in ARIA terms. Such a role\n * cannot be a direct child of a list without breaking what that list is allowed to\n * contain. A NAMED sublist says exactly the same thing in strictly valid HTML — and it\n * gives a group the same shape as a branch, which is what keeps the styling uniform.\n *\n * A group is NOT a level of the hierarchy: it declares neither of the two variables\n * counting the depth, so that count passes through it untouched and the items inside\n * are indented as if the group were not there.\n */\n\nimport { useId } from 'vue'\n\ninterface SideNavigationGroupProps {\n  /**\n   * The name of the section, replaced by the `#label` slot. One of the two is\n   * REQUIRED: it is what names the sublist under it, and a section named by neither\n   * points its `aria-labelledby` at an empty element.\n   */\n  label?: string\n}\n\nwithDefaults(defineProps<SideNavigationGroupProps>(), {\n  label: undefined,\n})\n\ndefineSlots<{\n  /** The items belonging to this section. */\n  default(): unknown\n  /** A name made of markup, replacing the `label` prop. */\n  label?(): unknown\n}>()\n\nconst labelId = useId()\n</script>\n\n<template>\n  <li class=\"v-side-nav-group\">\n    <span :id=\"labelId\" class=\"v-side-nav-group-label v-group-label\"\n      ><slot name=\"label\">{{ label }}</slot></span\n    >\n    <ul class=\"v-side-nav-group-list\" :aria-labelledby=\"labelId\">\n      <slot />\n    </ul>\n  </li>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-side-nav-group + .v-side-nav-group,\n  .v-side-nav-item + .v-side-nav-group {\n    margin-block-start: var(--vectis-space-3);\n  }\n\n  /*\n   * The whole recipe comes from `.v-group-label` (styles/group-label.css). The one thing\n   * this level changes is where the heading starts, since a section sits at the depth of\n   * the rows it names.\n   *\n   * TRAP — the indent repeats the rows' computation rather than sharing a variable with\n   * them, and it has to: a custom property is substituted on the element that DECLARES it,\n   * so a shared one set higher up would be frozen at level zero.\n   *\n   * The selector COMPOUNDS the two classes: on its own it would sit at equal specificity\n   * with the shared rule in another sheet, and which one a consumer's bundler puts last is\n   * not ours to decide.\n   */\n  .v-group-label.v-side-nav-group-label {\n    padding-inline: calc(\n        var(--control-padding-inline) + var(--side-nav-level, 0) * var(--side-nav-indent)\n      )\n      var(--control-padding-inline);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VSideNavigationGroup.js","names":[],"sources":["../../../src/components/VSideNavigation/VSideNavigationGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A named section of the navigation — \"Workspace\", \"Settings\". The name is plain text:\n * it cannot be focused or clicked, and it names the sublist under it for assistive\n * technology.\n *\n * Unlike a menu group, it does NOT claim to be a group in ARIA terms. Such a role\n * cannot be a direct child of a list without breaking what that list is allowed to\n * contain. A NAMED sublist says exactly the same thing in strictly valid HTML — and it\n * gives a group the same shape as a branch, which is what keeps the styling uniform.\n *\n * A group is NOT a level of the hierarchy: it declares neither of the two variables\n * counting the depth, so that count passes through it untouched and the items inside\n * are indented as if the group were not there.\n */\n\nimport { useId } from 'vue'\n\ninterface SideNavigationGroupProps {\n  /**\n   * The name of the section, replaced by the `#label` slot. One of the two is\n   * REQUIRED: it is what names the sublist under it, and a section named by neither\n   * points its `aria-labelledby` at an empty element.\n   */\n  label?: string\n}\n\nwithDefaults(defineProps<SideNavigationGroupProps>(), {\n  label: undefined,\n})\n\ndefineSlots<{\n  /** The items belonging to this section. */\n  default(): unknown\n  /** A name made of markup, replacing the `label` prop. */\n  label?(): unknown\n}>()\n\nconst labelId = useId()\n</script>\n\n<template>\n  <li class=\"v-side-nav-group\">\n    <span :id=\"labelId\" class=\"v-side-nav-group-label\"\n      ><slot name=\"label\">{{ label }}</slot></span\n    >\n    <ul class=\"v-side-nav-group-list\" :aria-labelledby=\"labelId\">\n      <slot />\n    </ul>\n  </li>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-side-nav-group + .v-side-nav-group,\n  .v-side-nav-item + .v-side-nav-group {\n    margin-block-start: var(--vectis-space-3);\n  }\n\n  /*\n   * TRAP — the indent repeats the rows' computation rather than sharing a variable with\n   * them: a custom property set higher up would be frozen at level zero when substituted.\n   */\n  .v-side-nav-group-label {\n    display: flex;\n    align-items: center;\n    min-block-size: var(--control-height);\n    padding-block: var(--vectis-space-1);\n    padding-inline: calc(\n        var(--control-padding-inline) + var(--side-nav-level, 0) * var(--side-nav-indent)\n      )\n      var(--control-padding-inline);\n    font-size: var(--vectis-text-overline-size);\n    font-weight: var(--vectis-text-overline-weight);\n    letter-spacing: var(--vectis-text-overline-tracking);\n    color: var(--vectis-color-text-muted);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VSideNavigation/VSideNavigationGroup.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ var l = { class: "v-side-nav-group" }, u = ["id"], d = ["aria-labelledby"], f =
 		let f = c();
 		return (c, p) => (i(), e("li", l, [t("span", {
 			id: s(f),
-			class: "v-side-nav-group-label v-group-label"
+			class: "v-side-nav-group-label"
 		}, [a(c.$slots, "label", {}, () => [n(o(r.label), 1)])], 8, u), t("ul", {
 			class: "v-side-nav-group-list",
 			"aria-labelledby": s(f)

package/dist/components/VSideNavigation/VSideNavigationGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"VSideNavigationGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VSideNavigation/VSideNavigationGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A named section of the navigation — \"Workspace\", \"Settings\". The name is plain text:\n * it cannot be focused or clicked, and it names the sublist under it for assistive\n * technology.\n *\n * Unlike a menu group, it does NOT claim to be a group in ARIA terms. Such a role\n * cannot be a direct child of a list without breaking what that list is allowed to\n * contain. A NAMED sublist says exactly the same thing in strictly valid HTML — and it\n * gives a group the same shape as a branch, which is what keeps the styling uniform.\n *\n * A group is NOT a level of the hierarchy: it declares neither of the two variables\n * counting the depth, so that count passes through it untouched and the items inside\n * are indented as if the group were not there.\n */\n\nimport { useId } from 'vue'\n\ninterface SideNavigationGroupProps {\n  /**\n   * The name of the section, replaced by the `#label` slot. One of the two is\n   * REQUIRED: it is what names the sublist under it, and a section named by neither\n   * points its `aria-labelledby` at an empty element.\n   */\n  label?: string\n}\n\nwithDefaults(defineProps<SideNavigationGroupProps>(), {\n  label: undefined,\n})\n\ndefineSlots<{\n  /** The items belonging to this section. */\n  default(): unknown\n  /** A name made of markup, replacing the `label` prop. */\n  label?(): unknown\n}>()\n\nconst labelId = useId()\n</script>\n\n<template>\n  <li class=\"v-side-nav-group\">\n    <span :id=\"labelId\" class=\"v-side-nav-group-label v-group-label\"\n      ><slot name=\"label\">{{ label }}</slot></span\n    >\n    <ul class=\"v-side-nav-group-list\" :aria-labelledby=\"labelId\">\n      <slot />\n    </ul>\n  </li>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-side-nav-group + .v-side-nav-group,\n  .v-side-nav-item + .v-side-nav-group {\n    margin-block-start: var(--vectis-space-3);\n  }\n\n  /*\n   * The whole recipe comes from `.v-group-label` (styles/group-label.css). The one thing\n   * this level changes is where the heading starts, since a section sits at the depth of\n   * the rows it names.\n   *\n   * TRAP — the indent repeats the rows' computation rather than sharing a variable with\n   * them, and it has to: a custom property is substituted on the element that DECLARES it,\n   * so a shared one set higher up would be frozen at level zero.\n   *\n   * The selector COMPOUNDS the two classes: on its own it would sit at equal specificity\n   * with the shared rule in another sheet, and which one a consumer's bundler puts last is\n   * not ours to decide.\n   */\n  .v-group-label.v-side-nav-group-label {\n    padding-inline: calc(\n        var(--control-padding-inline) + var(--side-nav-level, 0) * var(--side-nav-indent)\n      )\n      var(--control-padding-inline);\n  }\n}\n</style>\n"],"mappings":";;;;;;EAsCA,IAAM,IAAU,EAAM;yBAIpB,EAOK,MAPL,GAOK,CANH,EAEC,QAAA;GAFM,IAAI,EAAA,CAAA;GAAS,OAAM;MACvB,EAAqC,EAAA,QAAA,SAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,GAAA,CAAA,GAE9B,EAEK,MAAA;GAFD,OAAM;GAAyB,mBAAiB,EAAA,CAAA;MAClD,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"VSideNavigationGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VSideNavigation/VSideNavigationGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A named section of the navigation — \"Workspace\", \"Settings\". The name is plain text:\n * it cannot be focused or clicked, and it names the sublist under it for assistive\n * technology.\n *\n * Unlike a menu group, it does NOT claim to be a group in ARIA terms. Such a role\n * cannot be a direct child of a list without breaking what that list is allowed to\n * contain. A NAMED sublist says exactly the same thing in strictly valid HTML — and it\n * gives a group the same shape as a branch, which is what keeps the styling uniform.\n *\n * A group is NOT a level of the hierarchy: it declares neither of the two variables\n * counting the depth, so that count passes through it untouched and the items inside\n * are indented as if the group were not there.\n */\n\nimport { useId } from 'vue'\n\ninterface SideNavigationGroupProps {\n  /**\n   * The name of the section, replaced by the `#label` slot. One of the two is\n   * REQUIRED: it is what names the sublist under it, and a section named by neither\n   * points its `aria-labelledby` at an empty element.\n   */\n  label?: string\n}\n\nwithDefaults(defineProps<SideNavigationGroupProps>(), {\n  label: undefined,\n})\n\ndefineSlots<{\n  /** The items belonging to this section. */\n  default(): unknown\n  /** A name made of markup, replacing the `label` prop. */\n  label?(): unknown\n}>()\n\nconst labelId = useId()\n</script>\n\n<template>\n  <li class=\"v-side-nav-group\">\n    <span :id=\"labelId\" class=\"v-side-nav-group-label\"\n      ><slot name=\"label\">{{ label }}</slot></span\n    >\n    <ul class=\"v-side-nav-group-list\" :aria-labelledby=\"labelId\">\n      <slot />\n    </ul>\n  </li>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-side-nav-group + .v-side-nav-group,\n  .v-side-nav-item + .v-side-nav-group {\n    margin-block-start: var(--vectis-space-3);\n  }\n\n  /*\n   * TRAP — the indent repeats the rows' computation rather than sharing a variable with\n   * them: a custom property set higher up would be frozen at level zero when substituted.\n   */\n  .v-side-nav-group-label {\n    display: flex;\n    align-items: center;\n    min-block-size: var(--control-height);\n    padding-block: var(--vectis-space-1);\n    padding-inline: calc(\n        var(--control-padding-inline) + var(--side-nav-level, 0) * var(--side-nav-indent)\n      )\n      var(--control-padding-inline);\n    font-size: var(--vectis-text-overline-size);\n    font-weight: var(--vectis-text-overline-weight);\n    letter-spacing: var(--vectis-text-overline-tracking);\n    color: var(--vectis-color-text-muted);\n  }\n}\n</style>\n"],"mappings":";;;;;;EAsCA,IAAM,IAAU,EAAM;yBAIpB,EAOK,MAPL,GAOK,CANH,EAEC,QAAA;GAFM,IAAI,EAAA,CAAA;GAAS,OAAM;MACvB,EAAqC,EAAA,QAAA,SAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,GAAA,CAAA,GAE9B,EAEK,MAAA;GAFD,OAAM;GAAyB,mBAAiB,EAAA,CAAA;MAClD,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/VSideNavigation/VSideNavigationItem.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-side-nav-item{--side-nav-parent-level:var(--side-nav-level,0)}.v-side-nav-children{--side-nav-level:calc(var(--side-nav-parent-level) + 1)}.v-side-nav-row{--side-nav-row-radius:min(var(--vectis-radius-interactive), calc(var(--control-height) / 2));align-items:center;gap:var(--control-gap);min-block-size:var(--control-height);padding-block:var(--vectis-space-1);padding-inline:calc(var(--control-padding-inline) + var(--side-nav-level,0) * var(--side-nav-indent)) var(--control-padding-inline);border-radius:var(--side-nav-row-radius);color:var(--vectis-color-text);font-size:var(--control-font-size);line-height:var(--vectis-text-body-md-leading);cursor:pointer;display:flex;position:relative}.v-side-nav-action{align-items:center;gap:var(--control-gap);min-inline-size:0;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;text-align:start;cursor:inherit;background:0 0;border:none;flex:1;padding:0;text-decoration:none;display:flex}.v-side-nav-action:after{content:"";border-radius:var(--side-nav-row-radius);position:absolute;inset:0}.v-side-nav-content{flex-direction:column;flex:1;min-inline-size:0;display:flex}.v-side-nav-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.v-side-nav-sublabel{font-size:var(--vectis-text-caption-size);color:var(--vectis-color-text-muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.v-side-nav-icon{color:var(--vectis-color-text-muted);flex:none}.v-side-nav-end{align-items:center;gap:var(--vectis-space-1);flex:none;display:flex;position:relative}.v-side-nav-row:hover:not([data-disabled]){background:var(--vectis-color-surface-muted)}.v-side-nav-row:focus-visible,.v-side-nav-action:focus-visible:after{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:calc(-1 * var(--vectis-focus-ring-width))}.v-side-nav-action:focus-visible{outline:none}.v-side-nav-row[data-current]{background:var(--vectis-color-accent-surface);color:var(--vectis-color-accent-text)}.v-side-nav-row[data-current] .v-side-nav-label{font-weight:var(--vectis-text-label-weight)}.v-side-nav-row[data-current] .v-side-nav-icon,.v-side-nav-row[data-current] .v-side-nav-sublabel,.v-side-nav-row[data-current] .v-side-nav-chevron{color:inherit}.v-side-nav-row[data-current]:hover{background:color-mix(in oklab, var(--vectis-color-accent-surface), var(--vectis-color-accent-text) 8%)}.v-side-nav-branch:not([open]):has(.v-side-nav-children [aria-current])>.v-side-nav-row:not([data-current]){color:var(--vectis-color-accent-text)}.v-side-nav-row[data-disabled]{color:var(--vectis-color-text-subtle);cursor:not-allowed}.v-side-nav-row[data-disabled] .v-side-nav-icon,.v-side-nav-row[data-disabled] .v-side-nav-sublabel{color:inherit}}
+@layer vectis.components{.v-side-nav-item{--side-nav-parent-level:var(--side-nav-level,0)}.v-side-nav-children{--side-nav-level:calc(var(--side-nav-parent-level) + 1)}.v-side-nav-row{--side-nav-row-radius:min(var(--vectis-radius-interactive), calc(var(--control-height) / 2));align-items:center;gap:var(--control-gap);min-block-size:var(--control-height);padding-block:var(--vectis-space-1);padding-inline:calc(var(--control-padding-inline) + var(--side-nav-level,0) * var(--side-nav-indent)) var(--control-padding-inline);border-radius:var(--side-nav-row-radius);color:var(--vectis-color-text);font-size:var(--control-font-size);line-height:var(--vectis-text-body-md-leading);cursor:pointer;display:flex;position:relative}.v-side-nav-action{align-items:center;gap:var(--control-gap);min-inline-size:0;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;text-align:start;cursor:inherit;background:0 0;border:none;flex:1;padding:0;text-decoration:none;display:flex}.v-side-nav-action:after{content:"";border-radius:var(--side-nav-row-radius);position:absolute;inset:0}.v-side-nav-content{flex-direction:column;flex:1;min-inline-size:0;display:flex}.v-side-nav-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.v-side-nav-sublabel{font-size:var(--vectis-text-caption-size);color:var(--vectis-color-text-muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.v-side-nav-icon{color:var(--vectis-color-text-muted);flex:none}.v-side-nav-end{align-items:center;gap:var(--vectis-space-1);flex:none;display:flex;position:relative}.v-side-nav-row:hover:not([data-disabled]){background:var(--vectis-color-surface-muted)}.v-side-nav-row:focus-visible,.v-side-nav-action:focus-visible:after{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:calc(-1 * var(--vectis-focus-ring-width))}.v-side-nav-action:focus-visible{outline:none}.v-side-nav-row[data-current]{background:var(--vectis-color-accent-surface);color:var(--vectis-color-accent-text)}.v-side-nav-row[data-current] .v-side-nav-label{font-weight:var(--vectis-text-label-weight)}.v-side-nav-row[data-current] .v-side-nav-icon,.v-side-nav-row[data-current] .v-side-nav-sublabel,.v-side-nav-row[data-current] .v-side-nav-chevron{color:inherit}.v-side-nav-row[data-current]:not([data-disabled]):hover{background:color-mix(in oklab, var(--vectis-color-accent-surface), var(--vectis-color-accent-text) 8%)}.v-side-nav-branch:not([open]):has(.v-side-nav-children [aria-current])>.v-side-nav-row:not([data-current],[data-disabled]){color:var(--vectis-color-accent-text)}.v-side-nav-row[data-disabled]{color:var(--vectis-color-text-subtle);cursor:not-allowed}.v-side-nav-row[data-disabled] .v-side-nav-icon,.v-side-nav-row[data-disabled] .v-side-nav-sublabel{color:inherit}@media (forced-colors:active){.v-side-nav-row.v-side-nav-row.v-side-nav-row[data-current]{forced-color-adjust:none;color:highlighttext;background:highlight}.v-side-nav-row.v-side-nav-row.v-side-nav-row[data-current][data-disabled]{color:graytext;background:canvas}.v-side-nav-branch:not([open]):has(.v-side-nav-children [aria-current])>.v-side-nav-row:not([data-current],[data-disabled]) .v-side-nav-label{text-decoration:underline}}}

package/dist/components/VSideNavigation/VSideNavigationItem.d.ts

@@ -43,8 +43,9 @@ type __VLS_Slots = {
     /** Free content before the label, which takes the place of `icon`. */
     icon?(): unknown;
     /**
-     * Free content at the end of the row, before the chevron — a counter, a badge. On a
-     * BRANCH it must not be focusable (see the introduction).
+     * Free content at the end of the row, before the chevron: a counter, a badge. On a
+     * BRANCH it must not be focusable, a control inside the header being a control nested
+     * inside another.
      */
     end?(): unknown;
     /**
@@ -56,21 +57,19 @@ type __VLS_Slots = {
 };
 type __VLS_ModelProps = {
     /**
-     * Whether the branch is open, when the consumer wants to drive or observe it.
-     *
-     * Left unbound, the browser keeps that state entirely to itself, `defaultOpen` giving
-     * only the initial value: the bound value never changes, so Vue never patches the
-     * element back, and the native toggling stays sovereign.
-     *
-     * TRAP — "not bound" is written as `null` and not `undefined`. A model typed as a
-     * plain boolean is declared as such at runtime, and Vue casts an ABSENT boolean prop
-     * to `false`, which would silently overwrite `defaultOpen` on every branch. Giving it
-     * an explicit default disarms that cast.
+     * Whether the branch is open, when the consumer wants to drive or observe it. Left
+     * unbound, the browser keeps that state to itself, `defaultOpen` giving only the initial
+     * value. `null` means unbound.
      */
     'open'?: boolean | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    /** Moves the focus to the row: the branch header, or the leaf's link or button. */
+    focus: (options?: FocusOptions) => void | undefined;
+    /** That element, which is also where the consumer's attributes land. */
+    readonly el: HTMLElement | null;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: () => any;
     "update:open": (value: boolean | null) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{

package/dist/components/VSideNavigation/VSideNavigationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"VSideNavigationItem.js","names":[],"sources":["../../../src/components/VSideNavigation/VSideNavigationItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * One row of a sidebar navigation, in one of two shapes depending on whether it was given\n * subitems — and the difference runs deeper than it looks.\n *\n * A BRANCH is a `<details>`, so its open state, the toggle keyboard, the exclusivity with a\n * neighbouring section and the animation all come from the browser. Its row IS the\n * `<summary>`, which must contain the whole line, `#end` included — hence the click handler\n * there, or anything put in it would fold the branch. The documented consequence is that\n * only NON-focusable content belongs in it: a control would be nested inside a control (WCAG\n * 4.1.2, axe `nested-interactive`), and a `<summary>`'s subtree also serves as its\n * accessible name, which some screen readers flatten.\n *\n * A LEAF is the opposite: the row is a plain container with the action stretched over it by\n * an absolute `::after`, so the whole row is clickable while `#end` stays a SIBLING of the\n * action rather than inside it — which is what keeps a real control there legitimate.\n *\n * The branch's open state and its disabled summary go through `useDetailsOpen`, shared with\n * VAccordionItem.\n */\n\nimport { computed, h, inject, provide, renderSlot, useId, useSlots } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport { sideNavigationKey } from './context'\n\nimport { useDetailsOpen } from '../../composables/useDetailsOpen'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\ninterface SideNavigationItemProps {\n  /** What the row says, and where it goes. The default slot replaces it. */\n  label?: string\n  /** A second line under the label, for a status or a short explanation. */\n  sublabel?: string\n  /**\n   * An icon before the label: an icon name, or an explicit render. The `#icon` slot\n   * replaces it.\n   */\n  icon?: IconSource\n  /**\n   * Where this row leads, which makes it a link. It is IGNORED on a row that has\n   * subitems: such a row opens and closes rather than navigating.\n   */\n  href?: string\n  /**\n   * Marks this row as the page currently being viewed. It is highlighted, and\n   * announced as the current page (`aria-current`).\n   */\n  current?: boolean\n  /**\n   * Makes the row unusable: it greys out through the colour tokens and leaves the\n   * keyboard path.\n   */\n  disabled?: boolean\n  /**\n   * Renders a branch already open. Only its initial value is read: the browser owns the\n   * state from then on, so changing this prop later will not fold a branch the reader\n   * has opened. Bind `v-model:open` to drive it instead.\n   */\n  defaultOpen?: boolean\n}\n\n// The root element is a list item, which is structure and not the control. Without\n// redirecting them, `target`, `rel`, `download` and the aria-* would land on that list\n// item instead of on the link or the branch header.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<SideNavigationItemProps>(), {\n  label: undefined,\n  sublabel: undefined,\n  icon: undefined,\n  href: undefined,\n  current: false,\n  disabled: false,\n  defaultOpen: false,\n})\n\n/**\n * Whether the branch is open, when the consumer wants to drive or observe it.\n *\n * Left unbound, the browser keeps that state entirely to itself, `defaultOpen` giving\n * only the initial value: the bound value never changes, so Vue never patches the\n * element back, and the native toggling stays sovereign.\n *\n * TRAP — \"not bound\" is written as `null` and not `undefined`. A model typed as a\n * plain boolean is declared as such at runtime, and Vue casts an ABSENT boolean prop\n * to `false`, which would silently overwrite `defaultOpen` on every branch. Giving it\n * an explicit default disarms that cast.\n */\nconst open = defineModel<boolean | null>('open', { default: null })\n\nconst emit = defineEmits<{\n  /**\n   * A row WITHOUT subitems was activated, by click or by keyboard.\n   *\n   * TRAP — never declare a `click` emit alongside it. Vue removes a declared event\n   * from the forwarded attributes, and a consumer's own `@click` would then stop\n   * reaching the link entirely.\n   */\n  select: []\n}>()\n\ndefineSlots<{\n  /**\n   * The label of the row, replacing the `label` prop. One of the two is REQUIRED: a\n   * navigation row must say where it goes.\n   */\n  default?(): unknown\n  /** A second line made of markup, replacing the `sublabel` prop. */\n  sublabel?(): unknown\n  /** Free content before the label, which takes the place of `icon`. */\n  icon?(): unknown\n  /**\n   * Free content at the end of the row, before the chevron — a counter, a badge. On a\n   * BRANCH it must not be focusable (see the introduction).\n   */\n  end?(): unknown\n  /**\n   * The subitems, which turn this row into a branch. Nesting is not limited. The slot\n   * must be statically present or absent: whether a row is a branch is decided when it\n   * is created.\n   */\n  children?(): unknown\n}>()\n\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst slots = useSlots()\n/**\n * Whether this row has subitems, read from the mere PRESENCE of the slot — the same\n * device VMenuItem and VTabs use. The answer is the same on the server and in the\n * browser, so there is no registry to fill in and no hydration mismatch.\n *\n * The trade-off is that a slot present but empty still makes the row a branch, chevron\n * included, over an empty list.\n */\nconst hasChildren = computed(() => !!slots.children)\nconst tag = computed(() =>\n  !hasChildren.value && props.href !== undefined ? ('a' as const) : ('button' as const),\n)\n\nconst parent = inject(sideNavigationKey, null)\n\n/**\n * Both chevrons are chosen on the navigation as a whole. The fallback is what keeps an\n * item rendering correctly when it is used outside one.\n */\nconst expandIcon = computed(() => parent?.expandIcon ?? expandMoreIcon)\nconst collapseIcon = computed(() => parent?.collapseIcon)\n\n// @ssr @core\n// Only a BRANCH has children to hand a context to, so a leaf — most rows of a sidebar —\n// mints no id and provides nothing. The test runs once, at setup: the server and the\n// client take the same path because they see the same slot, which is what keeps `useId`\n// in step across hydration, and also why the slot must not come and go later.\nif (slots.children) {\n  // The name shared by THIS row's children. It is minted afresh at every level, and that\n  // is what keeps \"one section open at a time\" local to a level instead of applying\n  // across the whole document.\n  const childrenName = useId()\n\n  provide(sideNavigationKey, {\n    get name() {\n      return parent?.exclusive ? childrenName : undefined\n    },\n    get exclusive() {\n      return parent?.exclusive ?? false\n    },\n    get expandIcon() {\n      return expandIcon.value\n    },\n    get collapseIcon() {\n      return collapseIcon.value\n    },\n  })\n}\n\nconst { openAttr, onToggle, onSummaryClick } = useDetailsOpen(open, {\n  defaultOpen: () => props.defaultOpen,\n  disabled: () => props.disabled,\n})\n\n// A link says \"page\"; a button, a branch header included, can only say \"true\".\nconst ariaCurrent = computed(() =>\n  props.current ? (tag.value === 'a' ? 'page' : 'true') : undefined,\n)\n\n/*\n * The icon and the label column, identical in both row shapes. A functional component\n * rather than two copies of the markup, a Vue template having no reusable fragment.\n * `renderSlot` is what a compiled `<slot>` calls, so each fallback behaves exactly as it\n * would in the template.\n */\nconst RowBody = () => [\n  renderSlot(slots, 'icon', {}, () =>\n    props.icon ? [h(VIcon, { class: 'v-side-nav-icon', ...iconProps(props.icon) })] : [],\n  ),\n  h('span', { class: 'v-side-nav-content' }, [\n    h('span', { class: 'v-side-nav-label' }, [\n      renderSlot(slots, 'default', {}, () => [props.label]),\n    ]),\n    props.sublabel !== undefined || slots.sublabel\n      ? h('span', { class: 'v-side-nav-sublabel' }, [\n          renderSlot(slots, 'sublabel', {}, () => [props.sublabel]),\n        ])\n      : null,\n  ]),\n]\n\n/*\n * A branch's end slot sits INSIDE the header, so a click there would fold the branch.\n * Stopping the event from travelling would not help: folding is not a listener anyone\n * registered, it is the click's DEFAULT action, and only cancelling that prevents it.\n *\n * The exception is a click that already landed on something activable. There the click\n * belongs to that control, the branch is not concerned, and cancelling the default\n * would break its own behaviour — a link would stop navigating. The same filter as in\n * `useFieldPanel`, for the same reason.\n */\nfunction onEndClick(event: MouseEvent) {\n  const target = event.target as Element | null\n  if (!target?.closest('button, a, input, select, textarea, [tabindex]')) event.preventDefault()\n}\n\nfunction onActionClick(event: MouseEvent) {\n  // A disabled button never receives the click at all; a link made inert by hand does,\n  // so it is cancelled here.\n  if (props.disabled) {\n    event.preventDefault()\n    return\n  }\n  emit('select')\n}\n</script>\n\n<template>\n  <li class=\"v-side-nav-item\" :class=\"rootClass\" :style=\"rootStyle\">\n    <details\n      v-if=\"hasChildren\"\n      class=\"v-side-nav-branch v-disclosure\"\n      :name=\"parent?.name\"\n      :open=\"openAttr\"\n      :data-swap=\"collapseIcon ? '' : undefined\"\n      @toggle=\"onToggle\"\n    >\n      <summary\n        v-bind=\"forwardedAttrs\"\n        class=\"v-side-nav-row\"\n        :data-current=\"current ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        :aria-current=\"ariaCurrent\"\n        :aria-disabled=\"disabled || undefined\"\n        :tabindex=\"disabled ? -1 : undefined\"\n        @click=\"onSummaryClick\"\n      >\n        <RowBody />\n        <!-- This slot sits INSIDE the branch header, where ANY click folds the\n             branch: without the handler, clicking a badge would close the section\n             under it -->\n        <span v-if=\"$slots.end\" class=\"v-side-nav-end\" @click=\"onEndClick\"\n          ><slot name=\"end\"\n        /></span>\n        <VIcon class=\"v-side-nav-chevron v-disclosure-chevron\" v-bind=\"iconProps(expandIcon)\" />\n        <!-- Both chevrons are always in the DOM; the open state decides which one\n             shows, in CSS alone -->\n        <VIcon\n          v-if=\"collapseIcon\"\n          class=\"v-side-nav-chevron v-side-nav-chevron-open v-disclosure-chevron v-disclosure-chevron-open\"\n          v-bind=\"iconProps(collapseIcon)\"\n        />\n      </summary>\n      <ul class=\"v-side-nav-children\">\n        <slot name=\"children\" />\n      </ul>\n    </details>\n\n    <div\n      v-else\n      class=\"v-side-nav-row\"\n      :data-current=\"current ? '' : undefined\"\n      :data-disabled=\"disabled ? '' : undefined\"\n    >\n      <component\n        :is=\"tag\"\n        v-bind=\"forwardedAttrs\"\n        class=\"v-side-nav-action\"\n        :type=\"tag === 'button' ? 'button' : undefined\"\n        :disabled=\"tag === 'button' ? disabled : undefined\"\n        :href=\"tag === 'a' && !disabled ? href : undefined\"\n        :aria-disabled=\"tag === 'a' && disabled ? 'true' : undefined\"\n        :aria-current=\"ariaCurrent\"\n        @click=\"onActionClick\"\n      >\n        <RowBody />\n      </component>\n      <span v-if=\"$slots.end\" class=\"v-side-nav-end\"><slot name=\"end\" /></span>\n    </div>\n  </li>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * How deep an item sits, counted entirely in CSS: no registry, nothing provided down\n   * the tree, no inline style, and no `level` prop for the consumer to keep track of.\n   * The markup gives two elements per level — the item, then the list of its children —\n   * and each of them reads a name the other DECLARES.\n   *\n   * TRAP — the obvious one-name form, incrementing a variable by reading itself, is a\n   * CYCLE as far as CSS is concerned, even though the value being read is the inherited\n   * one. The property then falls to invalid, every read falls back to zero, and the\n   * whole tree renders FLAT — with nothing in the console to say why. The two\n   * alternating names are what avoid it.\n   */\n  .v-side-nav-item {\n    --side-nav-parent-level: var(--side-nav-level, 0);\n  }\n\n  .v-side-nav-children {\n    --side-nav-level: calc(var(--side-nav-parent-level) + 1);\n  }\n\n  .v-side-nav-row {\n    /*\n     * Every dimension comes from the variables the nav sets and this row inherits — it\n     * is the only element carrying the shared size class. The icons follow with nothing\n     * written for them, their own variables belonging to that same block.\n     *\n     * The type is composite, as in a menu row: the SIZE comes from the scale, but the\n     * line height stays that of body text — a unitless ratio, so it still follows the\n     * size — and the weight stays regular. The full `control` type role would set its\n     * lines tight against each other, and a row may carry a second line under the label.\n     *\n     * The label and that second line TRUNCATE rather than wrap: a sidebar has a fixed\n     * width, and a row that grew a line would break the rhythm of the list. VMenuItem\n     * follows the same recipe.\n     *\n     * TRAP — the indent is computed HERE and not stored in a variable set higher up. A\n     * custom property is substituted on the element that DECLARES it, so a padding\n     * computed on the nav would be frozen at level zero for the whole tree.\n     */\n\n    /*\n     * The corner takes the role every clickable box in the DS takes, so a brand that\n     * squares its controls or rounds them into pills carries the sidebar along in the\n     * one override.\n     *\n     * TRAP — the cap has to stay derived from --control-height. A browser scales down\n     * any radius it cannot fit, so a row exactly one control tall already paints half\n     * that height under a pill override; min() applies the same reduction to a row that\n     * grew past it. Written bare, a row carrying a second line paints half of ITS OWN\n     * height instead, and two rows of the same list come out with different corners. At\n     * the shipped 6px this resolves to 6px on both sizes and under compact, so nothing\n     * at the default value can see the line go — only the PillRadius play function can.\n     *\n     * The variable is what keeps the row and the stretched overlay below in step: that\n     * overlay is positioned against this element, so the two are the same box, and its\n     * ring is drawn on the radius found here.\n     */\n    --side-nav-row-radius: min(var(--vectis-radius-interactive), calc(var(--control-height) / 2));\n\n    position: relative;\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(\n        var(--control-padding-inline) + var(--side-nav-level, 0) * var(--side-nav-indent)\n      )\n      var(--control-padding-inline);\n    border-radius: var(--side-nav-row-radius);\n    color: var(--vectis-color-text);\n    font-size: var(--control-font-size);\n    line-height: var(--vectis-text-body-md-leading);\n    cursor: pointer;\n  }\n\n  .v-side-nav-action {\n    /* On a leaf the link is a CHILD of the row, and the indent deliberately stays on\n       the row itself: what has to run the full width is the hover background, not the\n       link inside it. */\n    flex: 1;\n    min-inline-size: 0;\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: inherit;\n    font-family: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    text-align: start;\n    text-decoration: none;\n    cursor: inherit;\n  }\n\n  /*\n   * This is what stretches the link over the WHOLE row without having to wrap the end\n   * slot inside it. It is an invisible box, positioned, so it is painted above the\n   * chevron — which is not positioned — while passing UNDER the end slot, which is\n   * positioned too and comes later in the document. That layering is exactly what\n   * makes the whole row clickable while leaving a control in the end slot usable.\n   */\n  .v-side-nav-action::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: var(--side-nav-row-radius);\n  }\n\n  .v-side-nav-content {\n    flex: 1;\n    min-inline-size: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .v-side-nav-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-side-nav-sublabel {\n    overflow: hidden;\n    font-size: var(--vectis-text-caption-size);\n    color: var(--vectis-color-text-muted);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-side-nav-icon {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* Positioned on purpose: that is what paints it above the stretched link, and\n     therefore what keeps whatever it holds clickable. */\n  .v-side-nav-end {\n    position: relative;\n    flex: none;\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n  }\n\n  .v-side-nav-row:hover:not([data-disabled]) {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  /*\n   * A branch header takes focus itself; a leaf only takes it through its link, and the\n   * ring is then drawn on the stretched box so that it frames the whole row rather than\n   * just the text.\n   *\n   * The ring is pulled INWARDS in both cases: the content of a branch is clipped so it\n   * can be animated open, and a ring drawn outside the row would be cut off there.\n   */\n  .v-side-nav-row:focus-visible,\n  .v-side-nav-action:focus-visible::after {\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-side-nav-action:focus-visible {\n    outline: none;\n  }\n\n  /* The row of the page currently being viewed. */\n  .v-side-nav-row[data-current] {\n    background: var(--vectis-color-accent-surface);\n    color: var(--vectis-color-accent-text);\n  }\n\n  .v-side-nav-row[data-current] .v-side-nav-label {\n    font-weight: var(--vectis-text-label-weight);\n  }\n\n  .v-side-nav-row[data-current] .v-side-nav-icon,\n  .v-side-nav-row[data-current] .v-side-nav-sublabel,\n  .v-side-nav-row[data-current] .v-side-nav-chevron {\n    color: inherit;\n  }\n\n  .v-side-nav-row[data-current]:hover {\n    /* The current row is already tinted, so its hover deepens that tint rather than\n       replacing it with the neutral highlight — the VMenuItem idiom. */\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-accent-surface),\n      var(--vectis-color-accent-text) 8%\n    );\n  }\n\n  /* A CLOSED branch holding the current page keeps a mark of it, so the reader can see\n     where they are without opening every section. The lookup is deliberately a\n     descendant one: the page may be several levels down. */\n  .v-side-nav-branch:not([open]):has(.v-side-nav-children [aria-current])\n    > .v-side-nav-row:not([data-current]) {\n    color: var(--vectis-color-accent-text);\n  }\n\n  /* A disabled row greys out through the colour tokens, never through opacity. */\n  .v-side-nav-row[data-disabled] {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  /* The icon and the second line default to a colour DARKER than the one a disabled\n     label takes: left alone they would come out stronger than the label itself, so they\n     inherit it instead. The chevron gets the same treatment from `styles/disclosure.css`. */\n  .v-side-nav-row[data-disabled] .v-side-nav-icon,\n  .v-side-nav-row[data-disabled] .v-side-nav-sublabel {\n    color: inherit;\n  }\n\n  /* The disclosure animation, the chevron's rotation or swap and the WebKit marker come\n     from `styles/disclosure.css`, reduced-motion block included. */\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VSideNavigationItem.js","names":[],"sources":["../../../src/components/VSideNavigation/VSideNavigationItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * One row of a sidebar navigation, in one of two shapes depending on whether it was given\n * subitems — and the difference runs deeper than it looks.\n *\n * A BRANCH is a `<details>`, so its open state, the toggle keyboard, the exclusivity with a\n * neighbouring section and the animation all come from the browser. Its row IS the\n * `<summary>`, which must contain the whole line, `#end` included — hence the click handler\n * there, or anything put in it would fold the branch. The documented consequence is that\n * only NON-focusable content belongs in it: a control would be nested inside a control (WCAG\n * 4.1.2, axe `nested-interactive`), and a `<summary>`'s subtree also serves as its\n * accessible name, which some screen readers flatten.\n *\n * A LEAF is the opposite: the row is a plain container with the action stretched over it by\n * an absolute `::after`, so the whole row is clickable while `#end` stays a SIBLING of the\n * action rather than inside it — which is what keeps a real control there legitimate.\n *\n * The branch's open state and its disabled summary go through `useDetailsOpen`, shared with\n * VAccordionItem.\n */\n\nimport { computed, h, inject, onBeforeUpdate, provide, ref, renderSlot, useId, useSlots } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport { sideNavigationKey } from './context'\n\nimport { useDetailsOpen } from '../../composables/useDetailsOpen'\nimport { useInertLink } from '../../composables/useInertLink'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\n\ninterface SideNavigationItemProps {\n  /** What the row says, and where it goes. The default slot replaces it. */\n  label?: string\n  /** A second line under the label, for a status or a short explanation. */\n  sublabel?: string\n  /**\n   * An icon before the label: an icon name, or an explicit render. The `#icon` slot\n   * replaces it.\n   */\n  icon?: IconSource\n  /**\n   * Where this row leads, which makes it a link. It is IGNORED on a row that has\n   * subitems: such a row opens and closes rather than navigating.\n   */\n  href?: string\n  /**\n   * Marks this row as the page currently being viewed. It is highlighted, and\n   * announced as the current page (`aria-current`).\n   */\n  current?: boolean\n  /**\n   * Makes the row unusable: it greys out through the colour tokens and leaves the\n   * keyboard path.\n   */\n  disabled?: boolean\n  /**\n   * Renders a branch already open. Only its initial value is read: the browser owns the\n   * state from then on, so changing this prop later will not fold a branch the reader\n   * has opened. Bind `v-model:open` to drive it instead.\n   */\n  defaultOpen?: boolean\n}\n\n// The root element is a list item, which is structure and not the control. Without\n// redirecting them, `target`, `rel`, `download` and the aria-* would land on that list\n// item instead of on the link or the branch header.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<SideNavigationItemProps>(), {\n  label: undefined,\n  sublabel: undefined,\n  icon: undefined,\n  href: undefined,\n  current: false,\n  disabled: false,\n  defaultOpen: false,\n})\n\n// TRAP — \"not bound\" is written as `null` and not `undefined`. A model typed as a plain\n// boolean is declared as such at runtime, and Vue casts an ABSENT boolean prop to `false`,\n// which would silently overwrite `defaultOpen` on every branch. The explicit default disarms that cast.\n/**\n * Whether the branch is open, when the consumer wants to drive or observe it. Left\n * unbound, the browser keeps that state to itself, `defaultOpen` giving only the initial\n * value. `null` means unbound.\n */\nconst open = defineModel<boolean | null>('open', { default: null })\n\nconst emit = defineEmits<{\n  // TRAP — never declare a `click` emit alongside it. Vue removes a declared event from\n  // the forwarded attributes, and a consumer's own `@click` would then stop reaching the\n  // link entirely.\n  /** A row WITHOUT subitems was activated, by click or by keyboard. */\n  select: []\n}>()\n\ndefineSlots<{\n  /**\n   * The label of the row, replacing the `label` prop. One of the two is REQUIRED: a\n   * navigation row must say where it goes.\n   */\n  default?(): unknown\n  /** A second line made of markup, replacing the `sublabel` prop. */\n  sublabel?(): unknown\n  /** Free content before the label, which takes the place of `icon`. */\n  icon?(): unknown\n  /**\n   * Free content at the end of the row, before the chevron: a counter, a badge. On a\n   * BRANCH it must not be focusable, a control inside the header being a control nested\n   * inside another.\n   */\n  end?(): unknown\n  /**\n   * The subitems, which turn this row into a branch. Nesting is not limited. The slot\n   * must be statically present or absent: whether a row is a branch is decided when it\n   * is created.\n   */\n  children?(): unknown\n}>()\n\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst slots = useSlots()\n/**\n * Whether this row has subitems, read from the mere PRESENCE of the slot — the same\n * device VMenuItem and VTabs use. The answer is the same on the server and in the\n * browser, so there is no registry to fill in and no hydration mismatch.\n *\n * The trade-off is that a slot present but empty still makes the row a branch, chevron\n * included, over an empty list.\n */\nconst hasChildren = computed(() => !!slots.children)\nconst tag = computed(() =>\n  !hasChildren.value && props.href !== undefined ? ('a' as const) : ('button' as const),\n)\n\nconst parent = inject(sideNavigationKey, null)\n\n/**\n * Both chevrons are chosen on the navigation as a whole. The fallback is what keeps an\n * item rendering correctly when it is used outside one.\n */\nconst expandIcon = computed(() => parent?.expandIcon ?? expandMoreIcon)\nconst collapseIcon = computed(() => parent?.collapseIcon)\n\n// @ssr @core\n// Only a BRANCH has children to hand a context to, so a leaf — most rows of a sidebar —\n// mints no id and provides nothing. The test runs once, at setup: the server and the\n// client take the same path because they see the same slot, which is what keeps `useId`\n// in step across hydration, and also why the slot must not come and go later.\nif (slots.children) {\n  // The name shared by THIS row's children. It is minted afresh at every level, and that\n  // is what keeps \"one section open at a time\" local to a level instead of applying\n  // across the whole document.\n  const childrenName = useId()\n\n  provide(sideNavigationKey, {\n    get name() {\n      return parent?.exclusive ? childrenName : undefined\n    },\n    get exclusive() {\n      return parent?.exclusive ?? false\n    },\n    get expandIcon() {\n      return expandIcon.value\n    },\n    get collapseIcon() {\n      return collapseIcon.value\n    },\n  })\n}\n\nconst { openAttr, onToggle, onSummaryClick } = useDetailsOpen(open, {\n  defaultOpen: () => props.defaultOpen,\n  disabled: () => props.disabled,\n})\n\n// A link says \"page\"; a button, a branch header included, can only say \"true\".\nconst ariaCurrent = computed(() =>\n  props.current ? (tag.value === 'a' ? 'page' : 'true') : undefined,\n)\n\n/*\n * The icon and the label column, identical in both row shapes. A functional component\n * rather than two copies of the markup, a Vue template having no reusable fragment.\n * `renderSlot` is what a compiled `<slot>` calls, so each fallback behaves exactly as it\n * would in the template.\n */\n// @core\n/*\n * TRAP — the tick is what makes RowBody follow the slots at all. A functional component\n * declaring no props is never updated by its parent's re-render, and `slots` is not\n * reactive, so a sublabel added behind a `v-if` or a label captured by a render function\n * stayed as first drawn. Every re-render of the item (which is what a new slot causes)\n * bumps it, and reading it is what re-renders RowBody: the `useSlotNodes` device.\n */\nconst slotTick = ref(0)\nonBeforeUpdate(() => slotTick.value++)\n\nconst RowBody = () => (\n  void slotTick.value,\n  [\n    renderSlot(slots, 'icon', {}, () =>\n      props.icon ? [h(VIcon, { class: 'v-side-nav-icon', ...iconProps(props.icon) })] : [],\n    ),\n    h('span', { class: 'v-side-nav-content' }, [\n      h('span', { class: 'v-side-nav-label' }, [\n        renderSlot(slots, 'default', {}, () => [props.label]),\n      ]),\n      props.sublabel !== undefined || slots.sublabel\n        ? h('span', { class: 'v-side-nav-sublabel' }, [\n            renderSlot(slots, 'sublabel', {}, () => [props.sublabel]),\n          ])\n        : null,\n    ]),\n  ]\n)\n\n/*\n * A branch's end slot sits INSIDE the header, so a click there would fold the branch.\n * Stopping the event from travelling would not help: folding is not a listener anyone\n * registered, it is the click's DEFAULT action, and only cancelling that prevents it.\n *\n * The exception is a click that already landed on something activable. There the click\n * belongs to that control, the branch is not concerned, and cancelling the default\n * would break its own behaviour — a link would stop navigating. The same filter as in\n * `useFieldPanel`, for the same reason.\n */\n// @core\nfunction onEndClick(event: MouseEvent) {\n  const target = event.target as Element | null\n  if (!target?.closest('button, a, input, select, textarea, [tabindex]')) event.preventDefault()\n}\n\n// A template ref on the item reaches the list item, a layout box; what is focused and\n// named is its row: the branch header, or the leaf's link or button.\nconst rowEl = ref<HTMLElement | null>(null)\nconst actionEl = ref<HTMLElement | null>(null)\nconst control = () => (hasChildren.value ? rowEl.value : actionEl.value)\ndefineExpose({\n  /** Moves the focus to the row: the branch header, or the leaf's link or button. */\n  focus: (options?: FocusOptions) => control()?.focus(options),\n  /** That element, which is also where the consumer's attributes land. */\n  get el() {\n    return control()\n  },\n})\n\n// @a11y\n// A leaf link has no `disabled`: the address, the consumer's click listeners and the\n// generic role of an `<a>` without `href` are handled by the shared inert link.\nconst link = useInertLink({\n  href: () => (tag.value === 'a' ? props.href : undefined),\n  inert: () => props.disabled,\n  attrs: () => forwardedAttrs.value,\n})\n\n// @core\nfunction onActionClick(event: MouseEvent) {\n  // A disabled button never receives the click at all; an inert link does, so it is\n  // cancelled here.\n  if (props.disabled) {\n    event.preventDefault()\n    return\n  }\n  emit('select')\n}\n</script>\n\n<template>\n  <li class=\"v-side-nav-item\" :class=\"rootClass\" :style=\"rootStyle\">\n    <details\n      v-if=\"hasChildren\"\n      class=\"v-side-nav-branch v-disclosure\"\n      :name=\"parent?.name\"\n      :open=\"openAttr\"\n      :data-swap=\"collapseIcon ? '' : undefined\"\n      @toggle=\"onToggle\"\n    >\n      <summary\n        ref=\"rowEl\"\n        class=\"v-side-nav-row\"\n        :data-current=\"current ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        :aria-current=\"ariaCurrent\"\n        :aria-disabled=\"disabled || undefined\"\n        :tabindex=\"disabled ? -1 : undefined\"\n        v-bind=\"forwardedAttrs\"\n        @click=\"onSummaryClick\"\n      >\n        <RowBody />\n        <!-- This slot sits INSIDE the branch header, where ANY click folds the\n             branch: without the handler, clicking a badge would close the section\n             under it -->\n        <span v-if=\"$slots.end\" class=\"v-side-nav-end\" @click=\"onEndClick\"\n          ><slot name=\"end\"\n        /></span>\n        <VIcon class=\"v-side-nav-chevron v-disclosure-chevron\" v-bind=\"iconProps(expandIcon)\" />\n        <!-- Both chevrons are always in the DOM; the open state decides which one\n             shows, in CSS alone -->\n        <VIcon\n          v-if=\"collapseIcon\"\n          class=\"v-side-nav-chevron v-side-nav-chevron-open v-disclosure-chevron v-disclosure-chevron-open\"\n          v-bind=\"iconProps(collapseIcon)\"\n        />\n      </summary>\n      <ul class=\"v-side-nav-children\">\n        <slot name=\"children\" />\n      </ul>\n    </details>\n\n    <div\n      v-else\n      class=\"v-side-nav-row\"\n      :data-current=\"current ? '' : undefined\"\n      :data-disabled=\"disabled ? '' : undefined\"\n    >\n      <component\n        :is=\"tag\"\n        ref=\"actionEl\"\n        class=\"v-side-nav-action\"\n        :type=\"tag === 'button' ? 'button' : undefined\"\n        :disabled=\"tag === 'button' ? disabled : undefined\"\n        :aria-disabled=\"link.isInertLink.value ? 'true' : undefined\"\n        :aria-current=\"ariaCurrent\"\n        v-bind=\"link.attrs.value\"\n        :href=\"link.linkHref.value\"\n        @click=\"onActionClick\"\n      >\n        <RowBody />\n      </component>\n      <span v-if=\"$slots.end\" class=\"v-side-nav-end\"><slot name=\"end\" /></span>\n    </div>\n  </li>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * How deep an item sits, counted entirely in CSS: no registry, nothing provided down\n   * the tree, no inline style, and no `level` prop for the consumer to keep track of.\n   * The markup gives two elements per level — the item, then the list of its children —\n   * and each of them reads a name the other DECLARES.\n   *\n   * TRAP — the obvious one-name form, incrementing a variable by reading itself, is a\n   * CYCLE as far as CSS is concerned, even though the value being read is the inherited\n   * one. The property then falls to invalid, every read falls back to zero, and the\n   * whole tree renders FLAT — with nothing in the console to say why. The two\n   * alternating names are what avoid it.\n   */\n  .v-side-nav-item {\n    --side-nav-parent-level: var(--side-nav-level, 0);\n  }\n\n  .v-side-nav-children {\n    --side-nav-level: calc(var(--side-nav-parent-level) + 1);\n  }\n\n  .v-side-nav-row {\n    /*\n     * Every dimension comes from the variables the nav sets and this row inherits — it\n     * is the only element carrying the shared size class. The icons follow with nothing\n     * written for them, their own variables belonging to that same block.\n     *\n     * The type is composite, as in a menu row: the SIZE comes from the scale, but the\n     * line height stays that of body text — a unitless ratio, so it still follows the\n     * size — and the weight stays regular. The full `control` type role would set its\n     * lines tight against each other, and a row may carry a second line under the label.\n     *\n     * The label and that second line TRUNCATE rather than wrap: a sidebar has a fixed\n     * width, and a row that grew a line would break the rhythm of the list. VMenuItem\n     * follows the same recipe.\n     *\n     * TRAP — the indent is computed HERE and not stored in a variable set higher up. A\n     * custom property is substituted on the element that DECLARES it, so a padding\n     * computed on the nav would be frozen at level zero for the whole tree.\n     */\n\n    /*\n     * The corner takes the role every clickable box in the DS takes, so a brand that\n     * squares its controls or rounds them into pills carries the sidebar along in the\n     * one override.\n     *\n     * TRAP — the cap has to stay derived from --control-height. A browser scales down\n     * any radius it cannot fit, so a row exactly one control tall already paints half\n     * that height under a pill override; min() applies the same reduction to a row that\n     * grew past it. Written bare, a row carrying a second line paints half of ITS OWN\n     * height instead, and two rows of the same list come out with different corners. At\n     * the shipped 6px this resolves to 6px on both sizes and under compact, so nothing\n     * at the default value can see the line go — only the PillRadius play function can.\n     *\n     * The variable is what keeps the row and the stretched overlay below in step: that\n     * overlay is positioned against this element, so the two are the same box, and its\n     * ring is drawn on the radius found here.\n     */\n    --side-nav-row-radius: min(var(--vectis-radius-interactive), calc(var(--control-height) / 2));\n\n    position: relative;\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(\n        var(--control-padding-inline) + var(--side-nav-level, 0) * var(--side-nav-indent)\n      )\n      var(--control-padding-inline);\n    border-radius: var(--side-nav-row-radius);\n    color: var(--vectis-color-text);\n    font-size: var(--control-font-size);\n    line-height: var(--vectis-text-body-md-leading);\n    cursor: pointer;\n  }\n\n  .v-side-nav-action {\n    /* On a leaf the link is a CHILD of the row, and the indent deliberately stays on\n       the row itself: what has to run the full width is the hover background, not the\n       link inside it. */\n    flex: 1;\n    min-inline-size: 0;\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: inherit;\n    font-family: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    text-align: start;\n    text-decoration: none;\n    cursor: inherit;\n  }\n\n  /*\n   * This is what stretches the link over the WHOLE row without having to wrap the end\n   * slot inside it. It is an invisible box, positioned, so it is painted above the\n   * chevron — which is not positioned — while passing UNDER the end slot, which is\n   * positioned too and comes later in the document. That layering is exactly what\n   * makes the whole row clickable while leaving a control in the end slot usable.\n   */\n  .v-side-nav-action::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: var(--side-nav-row-radius);\n  }\n\n  .v-side-nav-content {\n    flex: 1;\n    min-inline-size: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .v-side-nav-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-side-nav-sublabel {\n    overflow: hidden;\n    font-size: var(--vectis-text-caption-size);\n    color: var(--vectis-color-text-muted);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-side-nav-icon {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* Positioned on purpose: that is what paints it above the stretched link, and\n     therefore what keeps whatever it holds clickable. */\n  .v-side-nav-end {\n    position: relative;\n    flex: none;\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n  }\n\n  .v-side-nav-row:hover:not([data-disabled]) {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  /*\n   * A branch header takes focus itself; a leaf only takes it through its link, and the\n   * ring is then drawn on the stretched box so that it frames the whole row rather than\n   * just the text.\n   *\n   * The ring is pulled INWARDS in both cases: the content of a branch is clipped so it\n   * can be animated open, and a ring drawn outside the row would be cut off there.\n   */\n  .v-side-nav-row:focus-visible,\n  .v-side-nav-action:focus-visible::after {\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-side-nav-action:focus-visible {\n    outline: none;\n  }\n\n  /* The row of the page currently being viewed. */\n  .v-side-nav-row[data-current] {\n    background: var(--vectis-color-accent-surface);\n    color: var(--vectis-color-accent-text);\n  }\n\n  .v-side-nav-row[data-current] .v-side-nav-label {\n    font-weight: var(--vectis-text-label-weight);\n  }\n\n  .v-side-nav-row[data-current] .v-side-nav-icon,\n  .v-side-nav-row[data-current] .v-side-nav-sublabel,\n  .v-side-nav-row[data-current] .v-side-nav-chevron {\n    color: inherit;\n  }\n\n  .v-side-nav-row[data-current]:not([data-disabled]):hover {\n    /* The current row is already tinted, so its hover deepens that tint rather than\n       replacing it with the neutral highlight — the VMenuItem idiom. */\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-accent-surface),\n      var(--vectis-color-accent-text) 8%\n    );\n  }\n\n  /* A CLOSED branch holding the current page keeps a mark of it, so the reader can see\n     where they are without opening every section. The lookup is deliberately a\n     descendant one: the page may be several levels down. */\n  .v-side-nav-branch:not([open]):has(.v-side-nav-children [aria-current])\n    > .v-side-nav-row:not([data-current], [data-disabled]) {\n    color: var(--vectis-color-accent-text);\n  }\n\n  /* A disabled row greys out through the colour tokens, never through opacity. */\n  .v-side-nav-row[data-disabled] {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  /* The icon and the second line default to a colour DARKER than the one a disabled\n     label takes: left alone they would come out stronger than the label itself, so they\n     inherit it instead. The chevron gets the same treatment from `styles/disclosure.css`. */\n  .v-side-nav-row[data-disabled] .v-side-nav-icon,\n  .v-side-nav-row[data-disabled] .v-side-nav-sublabel {\n    color: inherit;\n  }\n\n  /* Forced colours flatten the current row's tint to `Canvas` and its accent text to\n     `CanvasText`, leaving a slightly bolder label as the only cue, and the mark on a closed\n     branch is a colour alone. The current row takes the system selection pair, repeated to\n     (0,4,0) above its own hover, and the closed branch underlines its label, a decoration\n     the mode keeps. */\n  @media (forced-colors: active) {\n    .v-side-nav-row.v-side-nav-row.v-side-nav-row[data-current] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n\n    .v-side-nav-row.v-side-nav-row.v-side-nav-row[data-current][data-disabled] {\n      background: Canvas;\n      color: GrayText;\n    }\n\n    .v-side-nav-branch:not([open]):has(.v-side-nav-children [aria-current])\n      > .v-side-nav-row:not([data-current], [data-disabled])\n      .v-side-nav-label {\n      text-decoration: underline;\n    }\n  }\n\n  /* The disclosure animation, the chevron's rotation or swap and the WebKit marker come\n     from `styles/disclosure.css`, reduced-motion block included. */\n}\n</style>\n"],"mappings":""}

package/dist/components/VSideNavigation/VSideNavigationItem.vue_vue_type_script_setup_true_lang.js

@@ -1,28 +1,29 @@
 import { iconProps as e } from "../VIcon/iconProps.js";
 import t from "../VIcon/VIcon.js";
-import { expand_more as n } from "../VIcon/icons/expand_more.js";
-import { useRootAttrs as r } from "../../composables/useRootAttrs.js";
-import { useDetailsOpen as i } from "../../composables/useDetailsOpen.js";
-import { sideNavigationKey as a } from "./context.js";
-import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, h as p, inject as m, mergeModels as h, mergeProps as g, normalizeClass as _, normalizeStyle as v, openBlock as y, provide as b, renderSlot as x, resolveDynamicComponent as S, unref as C, useId as w, useModel as T, useSlots as E, withCtx as D } from "vue";
+import { useInertLink as n } from "../../composables/useInertLink.js";
+import { expand_more as r } from "../VIcon/icons/expand_more.js";
+import { useRootAttrs as i } from "../../composables/useRootAttrs.js";
+import { useDetailsOpen as a } from "../../composables/useDetailsOpen.js";
+import { sideNavigationKey as o } from "./context.js";
+import { computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, h as m, inject as h, mergeModels as g, mergeProps as _, normalizeClass as v, normalizeStyle as ee, onBeforeUpdate as te, openBlock as y, provide as b, ref as x, renderSlot as S, resolveDynamicComponent as C, unref as w, useId as T, useModel as E, useSlots as D, withCtx as O } from "vue";
 //#region src/components/VSideNavigation/VSideNavigationItem.vue?vue&type=script&setup=true&lang.ts
-var O = [
+var k = [
 	"name",
 	"open",
 	"data-swap"
-], k = [
+], A = [
 	"data-current",
 	"data-disabled",
 	"aria-current",
 	"aria-disabled",
 	"tabindex"
-], A = { class: "v-side-nav-children" }, j = ["data-current", "data-disabled"], M = {
+], ne = { class: "v-side-nav-children" }, re = ["data-current", "data-disabled"], ie = {
 	key: 0,
 	class: "v-side-nav-end"
-}, N = /*@__PURE__*/ f({
+}, j = /*@__PURE__*/ p({
 	inheritAttrs: !1,
 	__name: "VSideNavigationItem",
-	props: /*@__PURE__*/ h({
+	props: /*@__PURE__*/ g({
 		label: { default: void 0 },
 		sublabel: { default: void 0 },
 		icon: { default: void 0 },
@@ -46,99 +47,117 @@ var O = [
 		},
 		openModifiers: {}
 	}),
-	emits: /*@__PURE__*/ h(["select"], ["update:open"]),
-	setup(f, { emit: h }) {
-		let N = f, P = T(f, "open"), F = h, { rootClass: I, rootStyle: L, forwardedAttrs: R } = r(), z = E(), B = o(() => !!z.children), V = o(() => !B.value && N.href !== void 0 ? "a" : "button"), H = m(a, null), U = o(() => H?.expandIcon ?? n), W = o(() => H?.collapseIcon);
-		if (z.children) {
-			let e = w();
-			b(a, {
+	emits: /*@__PURE__*/ g(["select"], ["update:open"]),
+	setup(p, { expose: g, emit: j }) {
+		let M = p, N = E(p, "open"), P = j, { rootClass: F, rootStyle: I, forwardedAttrs: L } = i(), R = D(), z = s(() => !!R.children), B = s(() => !z.value && M.href !== void 0 ? "a" : "button"), V = h(o, null), H = s(() => V?.expandIcon ?? r), U = s(() => V?.collapseIcon);
+		if (R.children) {
+			let e = T();
+			b(o, {
 				get name() {
-					return H?.exclusive ? e : void 0;
+					return V?.exclusive ? e : void 0;
 				},
 				get exclusive() {
-					return H?.exclusive ?? !1;
+					return V?.exclusive ?? !1;
 				},
 				get expandIcon() {
-					return U.value;
+					return H.value;
 				},
 				get collapseIcon() {
-					return W.value;
+					return U.value;
 				}
 			});
 		}
-		let { openAttr: G, onToggle: K, onSummaryClick: q } = i(P, {
-			defaultOpen: () => N.defaultOpen,
-			disabled: () => N.disabled
-		}), J = o(() => N.current ? V.value === "a" ? "page" : "true" : void 0), Y = () => [x(z, "icon", {}, () => N.icon ? [p(t, {
+		let { openAttr: W, onToggle: G, onSummaryClick: K } = a(N, {
+			defaultOpen: () => M.defaultOpen,
+			disabled: () => M.disabled
+		}), q = s(() => M.current ? B.value === "a" ? "page" : "true" : void 0), J = x(0);
+		te(() => J.value++);
+		let Y = () => (J.value, [S(R, "icon", {}, () => M.icon ? [m(t, {
 			class: "v-side-nav-icon",
-			...e(N.icon)
-		})] : []), p("span", { class: "v-side-nav-content" }, [p("span", { class: "v-side-nav-label" }, [x(z, "default", {}, () => [N.label])]), N.sublabel !== void 0 || z.sublabel ? p("span", { class: "v-side-nav-sublabel" }, [x(z, "sublabel", {}, () => [N.sublabel])]) : null])];
-		function X(e) {
+			...e(M.icon)
+		})] : []), m("span", { class: "v-side-nav-content" }, [m("span", { class: "v-side-nav-label" }, [S(R, "default", {}, () => [M.label])]), M.sublabel !== void 0 || R.sublabel ? m("span", { class: "v-side-nav-sublabel" }, [S(R, "sublabel", {}, () => [M.sublabel])]) : null])]);
+		function ae(e) {
 			e.target?.closest("button, a, input, select, textarea, [tabindex]") || e.preventDefault();
 		}
-		function Z(e) {
-			if (N.disabled) {
+		let X = x(null), Z = x(null), Q = () => z.value ? X.value : Z.value;
+		g({
+			focus: (e) => Q()?.focus(e),
+			get el() {
+				return Q();
+			}
+		});
+		let $ = n({
+			href: () => B.value === "a" ? M.href : void 0,
+			inert: () => M.disabled,
+			attrs: () => L.value
+		});
+		function oe(e) {
+			if (M.disabled) {
 				e.preventDefault();
 				return;
 			}
-			F("select");
+			P("select");
 		}
-		return (n, r) => (y(), l("li", {
-			class: _(["v-side-nav-item", C(I)]),
-			style: v(C(L))
-		}, [B.value ? (y(), l("details", {
+		return (n, r) => (y(), u("li", {
+			class: v(["v-side-nav-item", w(F)]),
+			style: ee(w(I))
+		}, [z.value ? (y(), u("details", {
 			key: 0,
 			class: "v-side-nav-branch v-disclosure",
-			name: C(H)?.name,
-			open: C(G),
-			"data-swap": W.value ? "" : void 0,
-			onToggle: r[1] ||= (...e) => C(K) && C(K)(...e)
-		}, [u("summary", g(C(R), {
+			name: w(V)?.name,
+			open: w(W),
+			"data-swap": U.value ? "" : void 0,
+			onToggle: r[1] ||= (...e) => w(G) && w(G)(...e)
+		}, [d("summary", _({
+			ref_key: "rowEl",
+			ref: X,
 			class: "v-side-nav-row",
-			"data-current": f.current ? "" : void 0,
-			"data-disabled": f.disabled ? "" : void 0,
-			"aria-current": J.value,
-			"aria-disabled": f.disabled || void 0,
-			tabindex: f.disabled ? -1 : void 0,
-			onClick: r[0] ||= (...e) => C(q) && C(q)(...e)
-		}), [
-			d(Y),
-			n.$slots.end ? (y(), l("span", {
+			"data-current": p.current ? "" : void 0,
+			"data-disabled": p.disabled ? "" : void 0,
+			"aria-current": q.value,
+			"aria-disabled": p.disabled || void 0,
+			tabindex: p.disabled ? -1 : void 0
+		}, w(L), { onClick: r[0] ||= (...e) => w(K) && w(K)(...e) }), [
+			f(Y),
+			n.$slots.end ? (y(), u("span", {
 				key: 0,
 				class: "v-side-nav-end",
-				onClick: X
-			}, [x(n.$slots, "end")])) : c("", !0),
-			d(t, g({ class: "v-side-nav-chevron v-disclosure-chevron" }, C(e)(U.value)), null, 16),
-			W.value ? (y(), s(t, g({
+				onClick: ae
+			}, [S(n.$slots, "end")])) : l("", !0),
+			f(t, _({ class: "v-side-nav-chevron v-disclosure-chevron" }, w(e)(H.value)), null, 16),
+			U.value ? (y(), c(t, _({
 				key: 1,
 				class: "v-side-nav-chevron v-side-nav-chevron-open v-disclosure-chevron v-disclosure-chevron-open"
-			}, C(e)(W.value)), null, 16)) : c("", !0)
-		], 16, k), u("ul", A, [x(n.$slots, "children")])], 40, O)) : (y(), l("div", {
+			}, w(e)(U.value)), null, 16)) : l("", !0)
+		], 16, A), d("ul", ne, [S(n.$slots, "children")])], 40, k)) : (y(), u("div", {
 			key: 1,
 			class: "v-side-nav-row",
-			"data-current": f.current ? "" : void 0,
-			"data-disabled": f.disabled ? "" : void 0
-		}, [(y(), s(S(V.value), g(C(R), {
+			"data-current": p.current ? "" : void 0,
+			"data-disabled": p.disabled ? "" : void 0
+		}, [(y(), c(C(B.value), _({
+			ref_key: "actionEl",
+			ref: Z,
 			class: "v-side-nav-action",
-			type: V.value === "button" ? "button" : void 0,
-			disabled: V.value === "button" ? f.disabled : void 0,
-			href: V.value === "a" && !f.disabled ? f.href : void 0,
-			"aria-disabled": V.value === "a" && f.disabled ? "true" : void 0,
-			"aria-current": J.value,
-			onClick: Z
+			type: B.value === "button" ? "button" : void 0,
+			disabled: B.value === "button" ? p.disabled : void 0,
+			"aria-disabled": w($).isInertLink.value ? "true" : void 0,
+			"aria-current": q.value
+		}, w($).attrs.value, {
+			href: w($).linkHref.value,
+			onClick: oe
 		}), {
-			default: D(() => [d(Y)]),
+			default: O(() => [f(Y)]),
 			_: 1
 		}, 16, [
 			"type",
 			"disabled",
-			"href",
 			"aria-disabled",
-			"aria-current"
-		])), n.$slots.end ? (y(), l("span", M, [x(n.$slots, "end")])) : c("", !0)], 8, j))], 6));
+			"aria-current",
+			"href"
+		])), n.$slots.end ? (y(), u("span", ie, [S(n.$slots, "end")])) : l("", !0)], 8, re))], 6));
 	}
 });
 //#endregion
-export { N as default };
+export { j as default };
 
 //# sourceMappingURL=VSideNavigationItem.vue_vue_type_script_setup_true_lang.js.map