vectis-ui 0.14.0 → 0.16.0

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

@@ -5,19 +5,11 @@ import { arrowNavigate as r } from "../../utils/arrowNav.js";
 import { sideNavigationKey as i } from "./context.js";
 import { createElementBlock as a, createElementVNode as o, defineComponent as s, openBlock as c, provide as l, ref as u, renderSlot as d, unref as f, useId as p } from "vue";
 //#region src/components/VSideNavigation/VSideNavigation.vue?vue&type=script&setup=true&lang.ts
-var m = [
-	"data-size",
-	"data-compact",
-	"aria-label"
-], h = { class: "v-side-nav-list" }, g = ":is(summary, .v-side-nav-action):not(:disabled):not([aria-disabled=\"true\"])", _ = /*@__PURE__*/ s({
+var m = ["data-size", "aria-label"], h = { class: "v-side-nav-list" }, g = ":is(summary, .v-side-nav-action):not(:disabled):not([aria-disabled=\"true\"])", _ = /*@__PURE__*/ s({
 	__name: "VSideNavigation",
 	props: {
 		label: { default: void 0 },
 		size: { default: "md" },
-		compact: {
-			type: Boolean,
-			default: !1
-		},
 		exclusive: {
 			type: Boolean,
 			default: !1
@@ -48,14 +40,13 @@ var m = [
 		}
 		function S(e) {
 			let t = b.value;
-			!t || e.defaultPrevented || e.target?.matches(g) && r(e, t, () => [...t.querySelectorAll(g)].filter((e) => x(e, t)), { vertical: !0 });
+			t && !e.defaultPrevented && e.target?.matches(g) && r(e, t, () => [...t.querySelectorAll(g)].filter((e) => x(e, t)), { vertical: !0 });
 		}
 		return (e, t) => (c(), a("nav", {
 			ref_key: "rootEl",
 			ref: b,
 			class: "v-side-nav v-control",
 			"data-size": n.size,
-			"data-compact": n.compact ? "" : void 0,
 			"aria-label": f(v),
 			onKeydown: S
 		}, [o("ul", h, [d(e.$slots, "default")])], 40, m));

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 * Native details folds branches; JavaScript bridges open models and adds arrow navigation\n * without replacing native links or buttons.\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 children,\n// which 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. Both forms\n * of disabling have to be excluded, since `:disabled` only ever matches a button; an inert link\n * and a disabled branch header are marked with `aria-disabled` instead, exactly as in VMenu's\n * panel.\n */\nconst ROW_SELECTOR = ':is(summary, .v-side-nav-action):not(:disabled):not([aria-disabled=\"true\"])'\n\n// @keyboard @a11y\n/**\n * This cannot be left to the shared helper, which skips whatever is not displayed. The content\n * of a closed disclosure element is not hidden that way: the browser passes over it by a rule\n * of its own, and it still reports itself as displayed.\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 moves the\n * focus from one link to the next. It follows the design system's contract: the arrows MOVE the\n * focus and never activate anything.\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 too,\n  // 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    /* Every level inherits it. */\n    --side-nav-indent: calc(var(--vectis-icon-size) + var(--control-gap));\n\n    font-family: var(--vectis-text-family);\n  }\n\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 closed, and\n   * 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":";;;;;;;;;;;qCA6FM,IAAe;;;;;;;;;;;;;;;;;EA7CrB,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;EAiB3C,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;EAQA,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"}
+{"version":3,"file":"VSideNavigation.vue_vue_type_script_setup_true_lang.js","names":["expandMoreIcon","_openBlock","_createElementBlock","_unref","_createElementVNode","_renderSlot","_hoisted_1","_hoisted_2","ROW_SELECTOR","VSideNavigation_vue_vue_type_script_setup_true_lang_default","expand_more","props","__props","m","useMessages","ariaLabel","useAriaLabel","rootName","useId","sideNavigationKey","rootEl","ref","reachable","child","el","parent","root","onKeydown","event","arrowNavigate","openBlock","createElementBlock","unref","createElementVNode","renderSlot","_ctx"],"sources":["../../../src/components/VSideNavigation/VSideNavigation.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @core\n/**\n * Native details folds branches; JavaScript bridges open models and adds arrow navigation\n * without replacing native links or buttons.\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   * 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  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 children,\n// which 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. Both forms\n * of disabling have to be excluded, since `:disabled` only ever matches a button; an inert link\n * and a disabled branch header are marked with `aria-disabled` instead, exactly as in VMenu's\n * panel.\n */\nconst ROW_SELECTOR = ':is(summary, .v-side-nav-action):not(:disabled):not([aria-disabled=\"true\"])'\n\n// @keyboard @a11y\n/**\n * This cannot be left to the shared helper, which skips whatever is not displayed. The content\n * of a closed disclosure element is not hidden that way: the browser passes over it by a rule\n * of its own, and it still reports itself as displayed.\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 moves the\n * focus from one link to the next. It follows the design system's contract: the arrows MOVE the\n * focus and never activate anything.\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 too,\n  // 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    :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    /* Every level inherits it. */\n    --side-nav-indent: calc(var(--vectis-icon-size) + var(--control-gap));\n\n    font-family: var(--vectis-text-family);\n  }\n\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 closed, and\n   * 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":";;;;;;;uEAuFMQ,IAAe;;;;;;;;;;;;;EA5CrB,IAAMG,IAAQC,GAaRC,IAAIC,EAAY,GAChBC,IAAYC,QAAmBL,EAAM,SAASE,EAAE,MAAM,eAAe,KAAK,GAI1EI,IAAWC,EAAM;EAEvB,EAAQC,GAAmB;GACzB,IAAI,OAAO;IACT,OAAOR,EAAM,YAAYM,IAAW,KAAA;GACtC;GACA,IAAI,YAAY;IACd,OAAON,EAAM;GACf;GACA,IAAI,aAAa;IACf,OAAOA,EAAM;GACf;GACA,IAAI,eAAe;IACjB,OAAOA,EAAM;GACf;EACF,CAAC;EAED,IAAMS,IAASC,EAAwB,IAAI;EAiB3C,SAASC,EAAU,GAAiB,GAA4B;GAC9D,KACE,IAAIC,IAAqBC,GAAIC,IAASD,EAAG,eACzCC,KAAUF,MAAUG,GACpB,IAAQD,GAAQ,IAASA,EAAO,eAEhC,IAAIA,EAAO,YAAY,aAAa,CAAEA,EAA8B,QAC9DF,EAAM,YAAY,WAAW,OAAO;GAG5C,OAAO;EACT;EAQA,SAASI,EAAU,GAAsB;GACvC,IAAMD,IAAON,EAAO;GACpB,AAAKM,KAAQ,GAAM,oBAGbE,EAAM,QAA2B,QAAQpB,CAAY,KAC3DqB,EACED,GACAF,SACM,CAAC,GAAGA,EAAK,iBAA8BlB,CAAY,CAAC,CAAC,CAAC,QAAQ,MAAOc,EAAUE,GAAIE,CAAI,CAAC,GAC9F,EAAE,UAAU,GAAK,CACnB;EACF;oBAIEzB,EAAA,GAAAC,EAUM,OAAA;GATA,SAAA;GAAJ,KAAIkB;GACJ,OAAM;GACL,aAAWR,EAAA;GACX,cAAYT,EAAAY,CAAA;GACH;EAEVX,GAAAA,CAAAA,EAEK,MAFLG,GAEK,CADHF,EAAQ8B,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,IAAA7B,CAAA"}

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\">\nimport { useId } from 'vue'\n\ninterface SideNavigationGroupProps {\n  /** The name of the section, replaced by the `#label` slot. */\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   * The indent repeats the rows' computation rather than sharing a variable with them: a custom\n   * 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":""}
+{"version":3,"file":"VSideNavigationGroup.js","names":["_sfc_main","VSideNavigationGroup_vue_vue_type_script_setup_true_lang_default","VSideNavigationGroup_default"],"sources":["../../../src/components/VSideNavigation/VSideNavigationGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\ninterface SideNavigationGroupProps {\n  /** The name of the section, replaced by the `#label` slot. */\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   * The indent repeats the rows' computation rather than sharing a variable with them: a custom\n   * 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.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\">\nimport { useId } from 'vue'\n\ninterface SideNavigationGroupProps {\n  /** The name of the section, replaced by the `#label` slot. */\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   * The indent repeats the rows' computation rather than sharing a variable with them: a custom\n   * 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":";;;;;;EAmBA,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":["_openBlock","_createElementBlock","_createElementVNode","_unref","_renderSlot","_createTextVNode","_toDisplayString","_hoisted_1","_hoisted_2","_hoisted_3","VSideNavigationGroup_vue_vue_type_script_setup_true_lang_default","labelId","useId","openBlock","createElementBlock","createElementVNode","unref","renderSlot","_ctx","createTextVNode","toDisplayString","__props"],"sources":["../../../src/components/VSideNavigation/VSideNavigationGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\ninterface SideNavigationGroupProps {\n  /** The name of the section, replaced by the `#label` slot. */\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   * The indent repeats the rows' computation rather than sharing a variable with them: a custom\n   * 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":";;;;;;EAmBA,IAAMW,IAAUC,EAAM;oBAIpBZ,EAAA,GAAAC,EAOK,MAPLM,GAOK,CANHL,EAEC,QAAA;GAFM,IAAIC,EAAAQ,CAAA;GAAS,OAAM;EACvBP,GAAAA,CAAAA,EAAqCc,EAAA,QAAA,SAAA,CAAA,SAAA,CAAfb,EAAAC,EAAAe,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,GAAAb,CAAA,GAE9BN,EAEK,MAAA;GAFD,OAAM;GAAyB,mBAAiBC,EAAAQ,CAAA;EAClDP,GAAAA,CAAAA,EAAQc,EAAA,QAAA,SAAA,CAAA,GAAA,GAAAT,CAAA,CAAA,CAAA"}

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 * Branches use native details and leaves use links or buttons. JavaScript synchronizes open\n * state, disables summaries and makes disabled links inert.\n */\n\nimport { computed, inject, provide, ref, 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  /** Renders a branch already open. Bind `v-model:open` to drive it instead. */\n  defaultOpen?: boolean\n}\n\n// Without 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// \"not bound\" is written as `null` and not `undefined`. A model typed as a plain boolean is\n// declared as such at runtime, and Vue casts an ABSENT boolean prop to `false`, which would\n// silently overwrite `defaultOpen` on every branch.\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  // Never declare a `click` emit alongside it. Vue removes a declared event from the forwarded\n  // attributes, and a consumer's own `@click` would then stop reaching the 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()\nconst tag = computed(() => (props.href !== undefined ? 'a' : 'button'))\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\n// Each level owns its exclusive group, including children supplied after the first render.\nconst childrenName = useId()\nprovide(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\nconst { openAttr, onToggle, onSummaryClick } = useDetailsOpen(open, {\n  defaultOpen: () => props.defaultOpen,\n  disabled: () => props.disabled,\n})\n\n/*\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. The\n * exception is a click that already landed on something activable.\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 = () => (slots.children ? 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  /** The row, 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=\"$slots.children\"\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=\"current ? 'true' : undefined\"\n        :aria-disabled=\"disabled || undefined\"\n        :tabindex=\"disabled ? -1 : undefined\"\n        v-bind=\"forwardedAttrs\"\n        @click=\"onSummaryClick\"\n      >\n        <slot name=\"icon\">\n          <VIcon v-if=\"icon\" class=\"v-side-nav-icon\" v-bind=\"iconProps(icon)\" />\n        </slot>\n        <span class=\"v-side-nav-content\">\n          <span class=\"v-side-nav-label\"\n            ><slot>{{ label }}</slot></span\n          >\n          <span v-if=\"sublabel !== undefined || $slots.sublabel\" class=\"v-side-nav-sublabel\">\n            <slot name=\"sublabel\">{{ sublabel }}</slot>\n          </span>\n        </span>\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        <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=\"current ? (tag === 'a' ? 'page' : 'true') : undefined\"\n        v-bind=\"link.attrs.value\"\n        :href=\"link.linkHref.value\"\n        @click=\"onActionClick\"\n      >\n        <slot name=\"icon\">\n          <VIcon v-if=\"icon\" class=\"v-side-nav-icon\" v-bind=\"iconProps(icon)\" />\n        </slot>\n        <span class=\"v-side-nav-content\">\n          <span class=\"v-side-nav-label\"\n            ><slot>{{ label }}</slot></span\n          >\n          <span v-if=\"sublabel !== undefined || $slots.sublabel\" class=\"v-side-nav-sublabel\">\n            <slot name=\"sublabel\">{{ sublabel }}</slot>\n          </span>\n        </span>\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   * The obvious one-name form, incrementing a variable by reading itself, is a CYCLE as far as\n   * CSS is concerned, even though the value being read is the inherited one. The property then\n   * falls to invalid, every read falls back to zero, and the whole tree renders FLAT; with\n   * nothing in the console to say why.\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     * The indent is computed here and not stored in a variable set higher up. A custom property\n     * is substituted on the element that DECLARES it, so a padding computed on the nav would be\n     * frozen at level zero for the whole tree.\n     */\n\n    /*\n     * The cap has to stay derived from --control-height. A browser scales down any radius it\n     * cannot fit, so a row exactly one control tall already paints half that height under a\n     * pill override; min() applies the same reduction to a row that grew past it.\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 slot\n   * inside it. It is an invisible box, positioned, so it is painted above the chevron; which is\n   * not positioned; while passing UNDER the end slot, which is positioned too and comes later\n   * in the document.\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  .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    /*\n     * The current row is already tinted, so its hover deepens that tint rather than replacing\n     * it with the neutral highlight; the VMenuItem idiom.\n     */\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":""}
+{"version":3,"file":"VSideNavigationItem.js","names":["_sfc_main","VSideNavigationItem_vue_vue_type_script_setup_true_lang_default","VSideNavigationItem_default"],"sources":["../../../src/components/VSideNavigation/VSideNavigationItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Branches use native details and leaves use links or buttons. JavaScript synchronizes open\n * state, disables summaries and makes disabled links inert.\n */\n\nimport { computed, inject, provide, ref, 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  /** Renders a branch already open. Bind `v-model:open` to drive it instead. */\n  defaultOpen?: boolean\n}\n\n// Without 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// \"not bound\" is written as `null` and not `undefined`. A model typed as a plain boolean is\n// declared as such at runtime, and Vue casts an ABSENT boolean prop to `false`, which would\n// silently overwrite `defaultOpen` on every branch.\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  // Never declare a `click` emit alongside it. Vue removes a declared event from the forwarded\n  // attributes, and a consumer's own `@click` would then stop reaching the 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()\nconst tag = computed(() => (props.href !== undefined ? 'a' : 'button'))\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\n// Each level owns its exclusive group, including children supplied after the first render.\nconst childrenName = useId()\nprovide(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\nconst { openAttr, onToggle, onSummaryClick } = useDetailsOpen(open, {\n  defaultOpen: () => props.defaultOpen,\n  disabled: () => props.disabled,\n})\n\n/*\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. The\n * exception is a click that already landed on something activable.\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 = () => (slots.children ? 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  /** The row, 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=\"$slots.children\"\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=\"current ? 'true' : undefined\"\n        :aria-disabled=\"disabled || undefined\"\n        :tabindex=\"disabled ? -1 : undefined\"\n        v-bind=\"forwardedAttrs\"\n        @click=\"onSummaryClick\"\n      >\n        <slot name=\"icon\">\n          <VIcon v-if=\"icon\" class=\"v-side-nav-icon\" v-bind=\"iconProps(icon)\" />\n        </slot>\n        <span class=\"v-side-nav-content\">\n          <span class=\"v-side-nav-label\"\n            ><slot>{{ label }}</slot></span\n          >\n          <span v-if=\"sublabel !== undefined || $slots.sublabel\" class=\"v-side-nav-sublabel\">\n            <slot name=\"sublabel\">{{ sublabel }}</slot>\n          </span>\n        </span>\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        <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=\"current ? (tag === 'a' ? 'page' : 'true') : undefined\"\n        v-bind=\"link.attrs.value\"\n        :href=\"link.linkHref.value\"\n        @click=\"onActionClick\"\n      >\n        <slot name=\"icon\">\n          <VIcon v-if=\"icon\" class=\"v-side-nav-icon\" v-bind=\"iconProps(icon)\" />\n        </slot>\n        <span class=\"v-side-nav-content\">\n          <span class=\"v-side-nav-label\"\n            ><slot>{{ label }}</slot></span\n          >\n          <span v-if=\"sublabel !== undefined || $slots.sublabel\" class=\"v-side-nav-sublabel\">\n            <slot name=\"sublabel\">{{ sublabel }}</slot>\n          </span>\n        </span>\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   * The obvious one-name form, incrementing a variable by reading itself, is a CYCLE as far as\n   * CSS is concerned, even though the value being read is the inherited one. The property then\n   * falls to invalid, every read falls back to zero, and the whole tree renders FLAT; with\n   * nothing in the console to say why.\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     * The indent is computed here and not stored in a variable set higher up. A custom property\n     * is substituted on the element that DECLARES it, so a padding computed on the nav would be\n     * frozen at level zero for the whole tree.\n     */\n\n    /*\n     * The cap has to stay derived from --control-height. A browser scales down any radius it\n     * cannot fit, so a row exactly one control tall already paints half that height under a\n     * pill override; min() applies the same reduction to a row that grew past it.\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 slot\n   * inside it. It is an invisible box, positioned, so it is painted above the chevron; which is\n   * not positioned; while passing UNDER the end slot, which is positioned too and comes later\n   * in the document.\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  .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    /*\n     * The current row is already tinted, so its hover deepens that tint rather than replacing\n     * it with the neutral highlight; the VMenuItem idiom.\n     */\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

@@ -90,11 +90,7 @@ var ie = [
 			attrs: () => V.value
 		});
 		function le(e) {
-			if (I.disabled) {
-				e.preventDefault();
-				return;
-			}
-			R("select");
+			I.disabled ? e.preventDefault() : R("select");
 		}
 		return (n, r) => (y(), l("li", {
 			class: _(["v-side-nav-item", w(z)]),

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

@@ -1 +1 @@
-{"version":3,"file":"VSideNavigationItem.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VSideNavigation/VSideNavigationItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Branches use native details and leaves use links or buttons. JavaScript synchronizes open\n * state, disables summaries and makes disabled links inert.\n */\n\nimport { computed, inject, provide, ref, 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  /** Renders a branch already open. Bind `v-model:open` to drive it instead. */\n  defaultOpen?: boolean\n}\n\n// Without 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// \"not bound\" is written as `null` and not `undefined`. A model typed as a plain boolean is\n// declared as such at runtime, and Vue casts an ABSENT boolean prop to `false`, which would\n// silently overwrite `defaultOpen` on every branch.\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  // Never declare a `click` emit alongside it. Vue removes a declared event from the forwarded\n  // attributes, and a consumer's own `@click` would then stop reaching the 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()\nconst tag = computed(() => (props.href !== undefined ? 'a' : 'button'))\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\n// Each level owns its exclusive group, including children supplied after the first render.\nconst childrenName = useId()\nprovide(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\nconst { openAttr, onToggle, onSummaryClick } = useDetailsOpen(open, {\n  defaultOpen: () => props.defaultOpen,\n  disabled: () => props.disabled,\n})\n\n/*\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. The\n * exception is a click that already landed on something activable.\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 = () => (slots.children ? 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  /** The row, 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=\"$slots.children\"\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=\"current ? 'true' : undefined\"\n        :aria-disabled=\"disabled || undefined\"\n        :tabindex=\"disabled ? -1 : undefined\"\n        v-bind=\"forwardedAttrs\"\n        @click=\"onSummaryClick\"\n      >\n        <slot name=\"icon\">\n          <VIcon v-if=\"icon\" class=\"v-side-nav-icon\" v-bind=\"iconProps(icon)\" />\n        </slot>\n        <span class=\"v-side-nav-content\">\n          <span class=\"v-side-nav-label\"\n            ><slot>{{ label }}</slot></span\n          >\n          <span v-if=\"sublabel !== undefined || $slots.sublabel\" class=\"v-side-nav-sublabel\">\n            <slot name=\"sublabel\">{{ sublabel }}</slot>\n          </span>\n        </span>\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        <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=\"current ? (tag === 'a' ? 'page' : 'true') : undefined\"\n        v-bind=\"link.attrs.value\"\n        :href=\"link.linkHref.value\"\n        @click=\"onActionClick\"\n      >\n        <slot name=\"icon\">\n          <VIcon v-if=\"icon\" class=\"v-side-nav-icon\" v-bind=\"iconProps(icon)\" />\n        </slot>\n        <span class=\"v-side-nav-content\">\n          <span class=\"v-side-nav-label\"\n            ><slot>{{ label }}</slot></span\n          >\n          <span v-if=\"sublabel !== undefined || $slots.sublabel\" class=\"v-side-nav-sublabel\">\n            <slot name=\"sublabel\">{{ sublabel }}</slot>\n          </span>\n        </span>\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   * The obvious one-name form, incrementing a variable by reading itself, is a CYCLE as far as\n   * CSS is concerned, even though the value being read is the inherited one. The property then\n   * falls to invalid, every read falls back to zero, and the whole tree renders FLAT; with\n   * nothing in the console to say why.\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     * The indent is computed here and not stored in a variable set higher up. A custom property\n     * is substituted on the element that DECLARES it, so a padding computed on the nav would be\n     * frozen at level zero for the whole tree.\n     */\n\n    /*\n     * The cap has to stay derived from --control-height. A browser scales down any radius it\n     * cannot fit, so a row exactly one control tall already paints half that height under a\n     * pill override; min() applies the same reduction to a row that grew past it.\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 slot\n   * inside it. It is an invisible box, positioned, so it is painted above the chevron; which is\n   * not positioned; while passing UNDER the end slot, which is positioned too and comes later\n   * in the document.\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  .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    /*\n     * The current row is already tinted, so its hover deepens that tint rather than replacing\n     * it with the neutral highlight; the VMenuItem idiom.\n     */\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":"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"}
+{"version":3,"file":"VSideNavigationItem.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","expandMoreIcon","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createElementVNode","_mergeProps","_renderSlot","_createBlock","VIcon","_createCommentVNode","_createTextVNode","_toDisplayString","_createVNode","_resolveDynamicComponent","_withCtx","VIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","VSideNavigationItem_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__expose","__emit","props","__props","open","useModel","emit","useRootAttrs","slots","useSlots","tag","computed","parent","inject","sideNavigationKey","expandIcon","expand_more","collapseIcon","childrenName","useId","useDetailsOpen","onEndClick","event","rowEl","ref","actionEl","control","options","link","useInertLink","forwardedAttrs","onActionClick","openBlock","createElementBlock","normalizeClass","unref","rootClass","normalizeStyle","rootStyle","_ctx","openAttr","_cache","args","onToggle","createElementVNode","mergeProps","onSummaryClick","renderSlot","createBlock","iconProps","createCommentVNode","createTextVNode","toDisplayString","createVNode","resolveDynamicComponent","withCtx"],"sources":["../../../src/components/VSideNavigation/VSideNavigationItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Branches use native details and leaves use links or buttons. JavaScript synchronizes open\n * state, disables summaries and makes disabled links inert.\n */\n\nimport { computed, inject, provide, ref, 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  /** Renders a branch already open. Bind `v-model:open` to drive it instead. */\n  defaultOpen?: boolean\n}\n\n// Without 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// \"not bound\" is written as `null` and not `undefined`. A model typed as a plain boolean is\n// declared as such at runtime, and Vue casts an ABSENT boolean prop to `false`, which would\n// silently overwrite `defaultOpen` on every branch.\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  // Never declare a `click` emit alongside it. Vue removes a declared event from the forwarded\n  // attributes, and a consumer's own `@click` would then stop reaching the 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()\nconst tag = computed(() => (props.href !== undefined ? 'a' : 'button'))\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\n// Each level owns its exclusive group, including children supplied after the first render.\nconst childrenName = useId()\nprovide(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\nconst { openAttr, onToggle, onSummaryClick } = useDetailsOpen(open, {\n  defaultOpen: () => props.defaultOpen,\n  disabled: () => props.disabled,\n})\n\n/*\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. The\n * exception is a click that already landed on something activable.\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 = () => (slots.children ? 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  /** The row, 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=\"$slots.children\"\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=\"current ? 'true' : undefined\"\n        :aria-disabled=\"disabled || undefined\"\n        :tabindex=\"disabled ? -1 : undefined\"\n        v-bind=\"forwardedAttrs\"\n        @click=\"onSummaryClick\"\n      >\n        <slot name=\"icon\">\n          <VIcon v-if=\"icon\" class=\"v-side-nav-icon\" v-bind=\"iconProps(icon)\" />\n        </slot>\n        <span class=\"v-side-nav-content\">\n          <span class=\"v-side-nav-label\"\n            ><slot>{{ label }}</slot></span\n          >\n          <span v-if=\"sublabel !== undefined || $slots.sublabel\" class=\"v-side-nav-sublabel\">\n            <slot name=\"sublabel\">{{ sublabel }}</slot>\n          </span>\n        </span>\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        <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=\"current ? (tag === 'a' ? 'page' : 'true') : undefined\"\n        v-bind=\"link.attrs.value\"\n        :href=\"link.linkHref.value\"\n        @click=\"onActionClick\"\n      >\n        <slot name=\"icon\">\n          <VIcon v-if=\"icon\" class=\"v-side-nav-icon\" v-bind=\"iconProps(icon)\" />\n        </slot>\n        <span class=\"v-side-nav-content\">\n          <span class=\"v-side-nav-label\"\n            ><slot>{{ label }}</slot></span\n          >\n          <span v-if=\"sublabel !== undefined || $slots.sublabel\" class=\"v-side-nav-sublabel\">\n            <slot name=\"sublabel\">{{ sublabel }}</slot>\n          </span>\n        </span>\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   * The obvious one-name form, incrementing a variable by reading itself, is a CYCLE as far as\n   * CSS is concerned, even though the value being read is the inherited one. The property then\n   * falls to invalid, every read falls back to zero, and the whole tree renders FLAT; with\n   * nothing in the console to say why.\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     * The indent is computed here and not stored in a variable set higher up. A custom property\n     * is substituted on the element that DECLARES it, so a padding computed on the nav would be\n     * frozen at level zero for the whole tree.\n     */\n\n    /*\n     * The cap has to stay derived from --control-height. A browser scales down any radius it\n     * cannot fit, so a row exactly one control tall already paints half that height under a\n     * pill override; min() applies the same reduction to a row that grew past it.\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 slot\n   * inside it. It is an invisible box, positioned, so it is painted above the chevron; which is\n   * not positioned; while passing UNDER the end slot, which is positioned too and comes later\n   * in the document.\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  .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    /*\n     * The current row is already tinted, so its hover deepens that tint rather than replacing\n     * it with the neutral highlight; the VMenuItem idiom.\n     */\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":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"VSideNavigationSeparator.js","names":[],"sources":["../../../src/components/VSideNavigation/VSideNavigationSeparator.vue"],"sourcesContent":["<template>\n  <!--\n    A list item and not a horizontal rule, because a list may own nothing but list items; and\n    ARIA is stricter still, admitting only list items, so even giving this one a separator role\n    would be rejected. So it is a plain list item, and a DECORATIVE one: the line is a visual\n    break between sections, where real grouping is what VSideNavigationGroup provides.\n  -->\n  <li class=\"v-side-nav-separator\" aria-hidden=\"true\" />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-side-nav-separator {\n    flex: none;\n    /* The depth indent deliberately does not apply here: a rule separates sections,\n       and has no reason to line up with the hierarchy of the rows around it. */\n    margin-block: var(--vectis-space-2);\n    margin-inline: var(--control-padding-inline);\n    /* Painted with a border and not a background, exactly as VSeparator is: under\n       Windows forced colours a background is forced to Canvas, where the line\n       vanishes, while a border colour is forced to CanvasText and survives. */\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n}\n</style>\n"],"mappings":";;;;;CAOM,OAAM;CAAuB,eAAY;;;aAA7C,EAAsD,MAAtD,CAAsD"}
+{"version":3,"file":"VSideNavigationSeparator.js","names":["_openBlock","_createElementBlock","_plugin_vue_export_helper_default","_sfc_main","_hoisted_1","_sfc_render","openBlock","createElementBlock","VSideNavigationSeparator_default"],"sources":["../../../src/components/VSideNavigation/VSideNavigationSeparator.vue"],"sourcesContent":["<template>\n  <!--\n    A list item and not a horizontal rule, because a list may own nothing but list items; and\n    ARIA is stricter still, admitting only list items, so even giving this one a separator role\n    would be rejected. So it is a plain list item, and a DECORATIVE one: the line is a visual\n    break between sections, where real grouping is what VSideNavigationGroup provides.\n  -->\n  <li class=\"v-side-nav-separator\" aria-hidden=\"true\" />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-side-nav-separator {\n    flex: none;\n    /* The depth indent deliberately does not apply here: a rule separates sections,\n       and has no reason to line up with the hierarchy of the rows around it. */\n    margin-block: var(--vectis-space-2);\n    margin-inline: var(--control-padding-inline);\n    /* Painted with a border and not a background, exactly as VSeparator is: under\n       Windows forced colours a background is forced to Canvas, where the line\n       vanishes, while a border colour is forced to CanvasText and survives. */\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n}\n</style>\n"],"mappings":";;;;;CAOM,OAAM;CAAuB,eAAY;;;CAA7C,OAAAA,EAAA,GAAAC,EAAsD,MAAtDG,CAAsD"}

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/VSideNavigation/context.ts"],"sourcesContent":["/** Share navigation behaviour only; CSS inheritance carries size, compact and branch depth. */\n\nimport type { InjectionKey } from 'vue'\n\nimport type { IconSource } from '../VIcon/types'\n\nexport interface SideNavigationContext {\n  /**\n   * The name shared by the collapsible sections of this level. Sections that share one\n   * close each other, which the browser does entirely on its own. Nothing here means\n   * several may stay open at once.\n   */\n  name: string | undefined\n  /**\n   * Whether the sidebar was asked for one-at-a-time behaviour. It is passed down so\n   * that each level can mint a name of its own.\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. Nothing here means the closed one is simply\n   * rotated.\n   */\n  collapseIcon: IconSource | undefined\n}\n\nexport const sideNavigationKey: InjectionKey<SideNavigationContext> = Symbol('v-side-navigation')\n"],"mappings":";AA2BA,IAAa,IAAyD,OAAO,mBAAmB"}
+{"version":3,"file":"context.js","names":["sideNavigationKey"],"sources":["../../../src/components/VSideNavigation/context.ts"],"sourcesContent":["/** Share navigation behaviour only; CSS inheritance carries size, density and branch depth. */\n\nimport type { InjectionKey } from 'vue'\n\nimport type { IconSource } from '../VIcon/types'\n\nexport interface SideNavigationContext {\n  /**\n   * The name shared by the collapsible sections of this level. Sections that share one\n   * close each other, which the browser does entirely on its own. Nothing here means\n   * several may stay open at once.\n   */\n  name: string | undefined\n  /**\n   * Whether the sidebar was asked for one-at-a-time behaviour. It is passed down so\n   * that each level can mint a name of its own.\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. Nothing here means the closed one is simply\n   * rotated.\n   */\n  collapseIcon: IconSource | undefined\n}\n\nexport const sideNavigationKey: InjectionKey<SideNavigationContext> = Symbol('v-side-navigation')\n"],"mappings":";AA2BA,IAAaA,IAAyD,OAAO,mBAAmB"}

package/dist/components/VSkeletonLoader/VSkeletonLoader.d.ts

@@ -13,8 +13,6 @@ interface SkeletonLoaderProps {
      * has its own height.
      */
     size?: SkeletonLoaderSize;
-    /** Takes 4px off the height, as everywhere else in the design system. */
-    compact?: boolean;
     /**
      * The width: a number is read as pixels, and anything else as a CSS length of your
      * own, such as `'100%'` or `'12ch'`. Left out, the silhouette takes all the width available.
@@ -54,7 +52,6 @@ declare const __VLS_export: import('vue').DefineComponent<SkeletonLoaderProps, {
     size: SkeletonLoaderSize;
     color: string;
     shape: SkeletonLoaderShape;
-    compact: boolean;
     width: number | string;
     height: number | string;
     announce: boolean;

package/dist/components/VSkeletonLoader/VSkeletonLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"VSkeletonLoader.js","names":[],"sources":["../../../src/components/VSkeletonLoader/VSkeletonLoader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * CSS animates placeholders. JavaScript supplies accessible loading text and normalizes\n * dimensions; decorative loaders remain hidden from assistive technology.\n */\nimport { computed } from 'vue'\n\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\n/** What the silhouette stands for, which sets its corners and how it is sized. */\nexport type SkeletonLoaderShape = 'text' | 'control' | 'pill' | 'circle' | 'surface'\n/** How the silhouette says it is loading: a sweep, a slow pulse, or nothing. */\nexport type SkeletonLoaderAnimation = 'wave' | 'pulse' | 'none'\n/** The step of the control size scale a control-shaped silhouette takes. */\nexport type SkeletonLoaderSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\ninterface SkeletonLoaderProps {\n  /** What the silhouette stands for. */\n  shape?: SkeletonLoaderShape\n  /**\n   * The size on the scale shared by every control. It only means something for the\n   * shapes sized like a control: text follows the typography around it, and a surface\n   * has its own height.\n   */\n  size?: SkeletonLoaderSize\n  /** Takes 4px off the height, as everywhere else in the design system. */\n  compact?: boolean\n  /**\n   * The width: a number is read as pixels, and anything else as a CSS length of your\n   * own, such as `'100%'` or `'12ch'`. Left out, the silhouette takes all the width available.\n   */\n  width?: number | string\n  /** The height, read the same way. It wins over the shape and the size. */\n  height?: number | string\n  /**\n   * How many silhouettes to stack. In the text shape the last one is drawn shorter than the\n   * others, and that single detail is what reads as a paragraph rather than as a table.\n   */\n  lines?: number\n  /**\n   * How the silhouette shows that something is happening. Turning it off freezes it,\n   * which suits printing, a screenshot, or a parent already animating.\n   */\n  animation?: SkeletonLoaderAnimation\n  /**\n   * A background colour of your own, replacing the token. The wave's highlight is\n   * DERIVED from it, so it stays correct with nothing else to set.\n   */\n  color?: string\n  /**\n   * Announces the loading to screen readers. It is OFF by default, because a skeleton is\n   * decorative: a page holds a dozen of them, and a dozen competing announcements are\n   * unreadable.\n   */\n  announce?: boolean\n  /**\n   * What is announced, which also IMPLIES announcing. Prefer something situated, such as\n   * \"Loading the results\", since a generic word is the reason the default is silence.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<SkeletonLoaderProps>(), {\n  shape: 'text',\n  size: 'md',\n  compact: false,\n  width: undefined,\n  height: undefined,\n  lines: 1,\n  animation: 'wave',\n  color: undefined,\n  announce: false,\n  label: undefined,\n})\n\n// A guard against two silent bugs: asked for zero lines the component would render NOTHING at\n// all; an invisible skeleton nobody notices is missing; and a fractional count would produce a\n// surprising number of them.\nconst count = computed(() =>\n  Number.isFinite(props.lines) ? Math.max(1, Math.trunc(props.lines)) : 1,\n)\n\n// @a11y\n// Supplying a label counts as asking to be announced, otherwise that prop would sit there doing\n// nothing. An empty label is no label: it would otherwise open a live region with nothing in\n// it.\nconst announced = computed(() => props.announce || Boolean(props.label))\n\nconst m = useMessages()\n// The dictionary must never be read directly in the body of `setup`: the value would be\n// captured once and would stop following a later change of language.\nconst resolvedLabel = computed(() => props.label || m.value.common.loading)\n</script>\n\n<template>\n  <span\n    class=\"v-skeleton-loader v-control\"\n    :data-shape=\"shape\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-animation=\"animation\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :role=\"announced ? 'status' : undefined\"\n    :aria-hidden=\"announced ? undefined : 'true'\"\n    :style=\"{\n      '--custom-color': color,\n      '--skeleton-loader-w': cssSize(width),\n      '--skeleton-loader-h': cssSize(height),\n    }\"\n  >\n    <!--\n      The label is rendered before the silhouettes, and that order is structural. The rule\n      shortening the last line of a paragraph asks for the last CHILD, so a label rendered after\n      them would quietly take that place and no line would be shortened.\n    -->\n    <span v-if=\"announced\" class=\"v-visually-hidden\">{{ resolvedLabel }}</span>\n    <span v-for=\"n in count\" :key=\"n\" class=\"v-skeleton-loader-item\" />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The shape table below sets them, and the dimension props overwrite them inline; which\n   * always wins over a rule targeting the same element, so no specificity contest is possible.\n   */\n  .v-skeleton-loader {\n    /*\n     * The grey has a token of its own. No existing colour role holds the right value in both\n     * themes: the muted surface is too pale in the light one for the pulse to be visible at\n     * all, and the border colour has the right tone but the wrong meaning.\n     */\n    --skeleton-loader-base: var(--vectis-color-surface-skeleton);\n    /*\n     * The highlight is DERIVED from the grey rather than named: the same colour, a little\n     * lighter. A lightness STEP is what makes one declaration correct in both themes, where a\n     * `color-mix()` towards a target would not; the silhouette is darker than the page in light\n     * and LIGHTER than it in dark, so a fixed target would lighten in one and darken in the\n     * other.\n     */\n    --skeleton-loader-highlight: oklch(from var(--skeleton-loader-base) calc(l + 0.06) c h);\n    --skeleton-loader-h: var(--control-height);\n    /*\n     * The cap is not calc(var(--skeleton-loader-h) / 2), which looks like the closer unit and\n     * is the wrong one twice over: --skeleton-loader-h is a flex BASIS on an item that grows to\n     * fill a taller parent (see below), and the `height` prop overwrites it inline. Two equally\n     * tall silhouettes would then round differently depending on how they got there.\n     */\n    --skeleton-loader-radius: min(\n      var(--vectis-radius-interactive),\n      calc(var(--control-height) / 2)\n    );\n    --skeleton-loader-gap: var(--vectis-space-2);\n    display: flex;\n    flex-direction: column;\n    gap: var(--skeleton-loader-gap);\n  }\n\n  /* A custom colour wins by specificity rather than by order, being one step more\n     specific than the rule above. */\n  .v-skeleton-loader[data-custom] {\n    --skeleton-loader-base: var(--custom-color);\n  }\n\n  .v-skeleton-loader-item {\n    position: relative;\n    /*\n     * The height from the shape table is a default: inside a parent that has a height of its\n     * own, the silhouette grows to fill it; a card fills its slot.\n     */\n    flex: 1 1 auto;\n    inline-size: var(--skeleton-loader-w, 100%);\n    block-size: var(--skeleton-loader-h);\n    /* Clipped rather than hidden: hiding the overflow would turn every silhouette into\n       a scroll container, for nothing. */\n    overflow: clip;\n    border-radius: var(--skeleton-loader-radius);\n    background: var(--skeleton-loader-base);\n  }\n\n  /*\n   * A line of text is one em tall, which means it follows the typography it INHERITS, and it is\n   * centred in the line box the same way a line of text would be. The gap between lines and the\n   * padding around them are derived from that same line height, so that N silhouettes occupy\n   * exactly N lines of text: replacing them with the real content shifts nothing on the page.\n   */\n  .v-skeleton-loader[data-shape='text'] {\n    --skeleton-loader-h: 1em;\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n    --skeleton-loader-gap: max(0px, calc(1lh - 1em));\n    padding-block: calc(var(--skeleton-loader-gap) / 2);\n  }\n\n  /* A line of text keeps the height its typography gives it: unlike the other shapes it\n     neither stretches in a tall parent nor squashes in a short one. */\n  .v-skeleton-loader[data-shape='text'] .v-skeleton-loader-item {\n    flex: none;\n  }\n\n  /*\n   * The shortened last line, the one detail that makes a stack of bars read as a paragraph.\n   * Asking for a line PRECEDED by another is what guarantees it only applies from two lines up;\n   * a single line is not a paragraph; and the proportion is taken from the EFFECTIVE width, so\n   * it still works under a `width` prop.\n   */\n  .v-skeleton-loader[data-shape='text']\n    .v-skeleton-loader-item\n    + .v-skeleton-loader-item:last-child {\n    --skeleton-loader-last-line: 0.6;\n    inline-size: calc(var(--skeleton-loader-w, 100%) * var(--skeleton-loader-last-line));\n  }\n\n  .v-skeleton-loader[data-shape='pill'] {\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n  }\n\n  /*\n   * A circle takes its width FROM its height through the ratio, so changing the size alone\n   * changes the diameter and nothing has to be kept in step. The container sits inline, like\n   * the avatar it replaces, rather than spanning the whole width, and aligning to the start\n   * stops the silhouette from being stretched sideways; which keeps the circle round.\n   */\n  .v-skeleton-loader[data-shape='circle'] {\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n    display: inline-flex;\n    align-items: start;\n  }\n\n  .v-skeleton-loader[data-shape='circle'] .v-skeleton-loader-item {\n    /* Left to the content rather than set to the full width, so that the ratio is what\n       decides. An explicit `width` still takes over, and then knowingly gives an\n       oval. */\n    inline-size: var(--skeleton-loader-w, auto);\n    aspect-ratio: 1;\n  }\n\n  /*\n   * A surface; a card, an image, a block; has no height anyone could guess without measuring\n   * the page, which this component deliberately never does. It takes a default from a token,\n   * which the `height` prop overrides, as does any consumer style (theirs sits outside our\n   * layers and therefore wins).\n   */\n  .v-skeleton-loader[data-shape='surface'] {\n    --skeleton-loader-h: var(--vectis-control-size-skeleton-surface);\n    --skeleton-loader-radius: var(--vectis-radius-surface);\n  }\n\n  .v-skeleton-loader:is([data-animation='wave'], [data-animation='pulse'])\n    .v-skeleton-loader-item::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n  }\n\n  /*\n   * The pulse: a flat sheet of the lighter shade fades in and out OVER the silhouette. Fading\n   * the silhouette itself would be shorter to write, and wrong: it would fade towards the PAGE,\n   * which means lightening in the light theme and DARKENING in the dark one; the opposite of\n   * what the wave does.\n   */\n  .v-skeleton-loader[data-animation='pulse'] .v-skeleton-loader-item::after {\n    background-color: var(--skeleton-loader-highlight);\n    animation: v-skeleton-loader-pulse var(--vectis-duration-1500) var(--vectis-ease-in-out)\n      infinite;\n  }\n\n  /*\n   * The wave: a band of light crossing the silhouette. The gradient is SYMMETRIC; transparent,\n   * light, transparent; so its physical angle makes no observable difference and there is\n   * nothing to mirror in RTL.\n   */\n  .v-skeleton-loader[data-animation='wave'] .v-skeleton-loader-item::after {\n    background-image: linear-gradient(\n      90deg,\n      transparent,\n      var(--skeleton-loader-highlight),\n      transparent\n    );\n    animation: v-skeleton-loader-wave var(--vectis-duration-1500) linear infinite;\n  }\n\n  /* Scoped to the wave: the pulse uses the same overlay, but its run is symmetric in\n     time, so reversing it would change nothing at all. */\n  .v-skeleton-loader[data-animation='wave']:dir(rtl) .v-skeleton-loader-item::after {\n    animation-direction: reverse;\n  }\n\n  @keyframes v-skeleton-loader-pulse {\n    from,\n    to {\n      opacity: 0;\n    }\n\n    50% {\n      opacity: 1;\n    }\n  }\n\n  @keyframes v-skeleton-loader-wave {\n    from {\n      translate: -100% 0;\n    }\n\n    to {\n      translate: 100% 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    /*\n     * This has exactly the specificity of the two rules it overrides, so its position at the\n     * END of the sheet is the whole of what makes it win.\n     */\n    .v-skeleton-loader:is([data-animation='wave'], [data-animation='pulse'])\n      .v-skeleton-loader-item::after {\n      background-image: none;\n      background-color: var(--skeleton-loader-highlight);\n      animation: v-skeleton-loader-pulse var(--vectis-duration-5000) var(--vectis-ease-in-out)\n        infinite;\n    }\n  }\n\n  /* Forced colours repaint the silhouette as Canvas, the page itself: the placeholder\n     vanishes. It is drawn in GrayText, and the pulse or the wave in Canvas over it, so the\n     loading cue survives as well as the shape. */\n  @media (forced-colors: active) {\n    .v-skeleton-loader-item {\n      --skeleton-loader-highlight: Canvas;\n      forced-color-adjust: none;\n      background: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VSkeletonLoader.js","names":["_sfc_main","VSkeletonLoader_vue_vue_type_script_setup_true_lang_default","VSkeletonLoader_default"],"sources":["../../../src/components/VSkeletonLoader/VSkeletonLoader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * CSS animates placeholders. JavaScript supplies accessible loading text and normalizes\n * dimensions; decorative loaders remain hidden from assistive technology.\n */\nimport { computed } from 'vue'\n\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\n/** What the silhouette stands for, which sets its corners and how it is sized. */\nexport type SkeletonLoaderShape = 'text' | 'control' | 'pill' | 'circle' | 'surface'\n/** How the silhouette says it is loading: a sweep, a slow pulse, or nothing. */\nexport type SkeletonLoaderAnimation = 'wave' | 'pulse' | 'none'\n/** The step of the control size scale a control-shaped silhouette takes. */\nexport type SkeletonLoaderSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\ninterface SkeletonLoaderProps {\n  /** What the silhouette stands for. */\n  shape?: SkeletonLoaderShape\n  /**\n   * The size on the scale shared by every control. It only means something for the\n   * shapes sized like a control: text follows the typography around it, and a surface\n   * has its own height.\n   */\n  size?: SkeletonLoaderSize\n  /**\n   * The width: a number is read as pixels, and anything else as a CSS length of your\n   * own, such as `'100%'` or `'12ch'`. Left out, the silhouette takes all the width available.\n   */\n  width?: number | string\n  /** The height, read the same way. It wins over the shape and the size. */\n  height?: number | string\n  /**\n   * How many silhouettes to stack. In the text shape the last one is drawn shorter than the\n   * others, and that single detail is what reads as a paragraph rather than as a table.\n   */\n  lines?: number\n  /**\n   * How the silhouette shows that something is happening. Turning it off freezes it,\n   * which suits printing, a screenshot, or a parent already animating.\n   */\n  animation?: SkeletonLoaderAnimation\n  /**\n   * A background colour of your own, replacing the token. The wave's highlight is\n   * DERIVED from it, so it stays correct with nothing else to set.\n   */\n  color?: string\n  /**\n   * Announces the loading to screen readers. It is OFF by default, because a skeleton is\n   * decorative: a page holds a dozen of them, and a dozen competing announcements are\n   * unreadable.\n   */\n  announce?: boolean\n  /**\n   * What is announced, which also IMPLIES announcing. Prefer something situated, such as\n   * \"Loading the results\", since a generic word is the reason the default is silence.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<SkeletonLoaderProps>(), {\n  shape: 'text',\n  size: 'md',\n  width: undefined,\n  height: undefined,\n  lines: 1,\n  animation: 'wave',\n  color: undefined,\n  announce: false,\n  label: undefined,\n})\n\n// A guard against two silent bugs: asked for zero lines the component would render NOTHING at\n// all; an invisible skeleton nobody notices is missing; and a fractional count would produce a\n// surprising number of them.\nconst count = computed(() =>\n  Number.isFinite(props.lines) ? Math.max(1, Math.trunc(props.lines)) : 1,\n)\n\n// @a11y\n// Supplying a label counts as asking to be announced, otherwise that prop would sit there doing\n// nothing. An empty label is no label: it would otherwise open a live region with nothing in\n// it.\nconst announced = computed(() => props.announce || Boolean(props.label))\n\nconst m = useMessages()\n// The dictionary must never be read directly in the body of `setup`: the value would be\n// captured once and would stop following a later change of language.\nconst resolvedLabel = computed(() => props.label || m.value.common.loading)\n</script>\n\n<template>\n  <span\n    class=\"v-skeleton-loader v-control\"\n    :data-shape=\"shape\"\n    :data-size=\"size\"\n    :data-animation=\"animation\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :role=\"announced ? 'status' : undefined\"\n    :aria-hidden=\"announced ? undefined : 'true'\"\n    :style=\"{\n      '--custom-color': color,\n      '--skeleton-loader-w': cssSize(width),\n      '--skeleton-loader-h': cssSize(height),\n    }\"\n  >\n    <!--\n      The label is rendered before the silhouettes, and that order is structural. The rule\n      shortening the last line of a paragraph asks for the last CHILD, so a label rendered after\n      them would quietly take that place and no line would be shortened.\n    -->\n    <span v-if=\"announced\" class=\"v-visually-hidden\">{{ resolvedLabel }}</span>\n    <span v-for=\"n in count\" :key=\"n\" class=\"v-skeleton-loader-item\" />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The shape table below sets them, and the dimension props overwrite them inline; which\n   * always wins over a rule targeting the same element, so no specificity contest is possible.\n   */\n  .v-skeleton-loader {\n    /*\n     * The grey has a token of its own. No existing colour role holds the right value in both\n     * themes: the muted surface is too pale in the light one for the pulse to be visible at\n     * all, and the border colour has the right tone but the wrong meaning.\n     */\n    --skeleton-loader-base: var(--vectis-color-surface-skeleton);\n    /*\n     * The highlight is DERIVED from the grey rather than named: the same colour, a little\n     * lighter. A lightness STEP is what makes one declaration correct in both themes, where a\n     * `color-mix()` towards a target would not; the silhouette is darker than the page in light\n     * and LIGHTER than it in dark, so a fixed target would lighten in one and darken in the\n     * other.\n     */\n    --skeleton-loader-highlight: oklch(from var(--skeleton-loader-base) calc(l + 0.06) c h);\n    --skeleton-loader-h: var(--control-height);\n    /*\n     * The cap is not calc(var(--skeleton-loader-h) / 2), which looks like the closer unit and\n     * is the wrong one twice over: --skeleton-loader-h is a flex BASIS on an item that grows to\n     * fill a taller parent (see below), and the `height` prop overwrites it inline. Two equally\n     * tall silhouettes would then round differently depending on how they got there.\n     */\n    --skeleton-loader-radius: min(\n      var(--vectis-radius-interactive),\n      calc(var(--control-height) / 2)\n    );\n    --skeleton-loader-gap: var(--vectis-space-2);\n    display: flex;\n    flex-direction: column;\n    gap: var(--skeleton-loader-gap);\n  }\n\n  /* A custom colour wins by specificity rather than by order, being one step more\n     specific than the rule above. */\n  .v-skeleton-loader[data-custom] {\n    --skeleton-loader-base: var(--custom-color);\n  }\n\n  .v-skeleton-loader-item {\n    position: relative;\n    /*\n     * The height from the shape table is a default: inside a parent that has a height of its\n     * own, the silhouette grows to fill it; a card fills its slot.\n     */\n    flex: 1 1 auto;\n    inline-size: var(--skeleton-loader-w, 100%);\n    block-size: var(--skeleton-loader-h);\n    /* Clipped rather than hidden: hiding the overflow would turn every silhouette into\n       a scroll container, for nothing. */\n    overflow: clip;\n    border-radius: var(--skeleton-loader-radius);\n    background: var(--skeleton-loader-base);\n  }\n\n  /*\n   * A line of text is one em tall, which means it follows the typography it INHERITS, and it is\n   * centred in the line box the same way a line of text would be. The gap between lines and the\n   * padding around them are derived from that same line height, so that N silhouettes occupy\n   * exactly N lines of text: replacing them with the real content shifts nothing on the page.\n   */\n  .v-skeleton-loader[data-shape='text'] {\n    --skeleton-loader-h: 1em;\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n    --skeleton-loader-gap: max(0px, calc(1lh - 1em));\n    padding-block: calc(var(--skeleton-loader-gap) / 2);\n  }\n\n  /* A line of text keeps the height its typography gives it: unlike the other shapes it\n     neither stretches in a tall parent nor squashes in a short one. */\n  .v-skeleton-loader[data-shape='text'] .v-skeleton-loader-item {\n    flex: none;\n  }\n\n  /*\n   * The shortened last line, the one detail that makes a stack of bars read as a paragraph.\n   * Asking for a line PRECEDED by another is what guarantees it only applies from two lines up;\n   * a single line is not a paragraph; and the proportion is taken from the EFFECTIVE width, so\n   * it still works under a `width` prop.\n   */\n  .v-skeleton-loader[data-shape='text']\n    .v-skeleton-loader-item\n    + .v-skeleton-loader-item:last-child {\n    --skeleton-loader-last-line: 0.6;\n    inline-size: calc(var(--skeleton-loader-w, 100%) * var(--skeleton-loader-last-line));\n  }\n\n  .v-skeleton-loader[data-shape='pill'] {\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n  }\n\n  /*\n   * A circle takes its width FROM its height through the ratio, so changing the size alone\n   * changes the diameter and nothing has to be kept in step. The container sits inline, like\n   * the avatar it replaces, rather than spanning the whole width, and aligning to the start\n   * stops the silhouette from being stretched sideways; which keeps the circle round.\n   */\n  .v-skeleton-loader[data-shape='circle'] {\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n    display: inline-flex;\n    align-items: start;\n  }\n\n  .v-skeleton-loader[data-shape='circle'] .v-skeleton-loader-item {\n    /* Left to the content rather than set to the full width, so that the ratio is what\n       decides. An explicit `width` still takes over, and then knowingly gives an\n       oval. */\n    inline-size: var(--skeleton-loader-w, auto);\n    aspect-ratio: 1;\n  }\n\n  /*\n   * A surface; a card, an image, a block; has no height anyone could guess without measuring\n   * the page, which this component deliberately never does. It takes a default from a token,\n   * which the `height` prop overrides, as does any consumer style (theirs sits outside our\n   * layers and therefore wins).\n   */\n  .v-skeleton-loader[data-shape='surface'] {\n    --skeleton-loader-h: var(--vectis-control-size-skeleton-surface);\n    --skeleton-loader-radius: var(--vectis-radius-surface);\n  }\n\n  .v-skeleton-loader:is([data-animation='wave'], [data-animation='pulse'])\n    .v-skeleton-loader-item::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n  }\n\n  /*\n   * The pulse: a flat sheet of the lighter shade fades in and out OVER the silhouette. Fading\n   * the silhouette itself would be shorter to write, and wrong: it would fade towards the PAGE,\n   * which means lightening in the light theme and DARKENING in the dark one; the opposite of\n   * what the wave does.\n   */\n  .v-skeleton-loader[data-animation='pulse'] .v-skeleton-loader-item::after {\n    background-color: var(--skeleton-loader-highlight);\n    animation: v-skeleton-loader-pulse var(--vectis-duration-1500) var(--vectis-ease-in-out)\n      infinite;\n  }\n\n  /*\n   * The wave: a band of light crossing the silhouette. The gradient is SYMMETRIC; transparent,\n   * light, transparent; so its physical angle makes no observable difference and there is\n   * nothing to mirror in RTL.\n   */\n  .v-skeleton-loader[data-animation='wave'] .v-skeleton-loader-item::after {\n    background-image: linear-gradient(\n      90deg,\n      transparent,\n      var(--skeleton-loader-highlight),\n      transparent\n    );\n    animation: v-skeleton-loader-wave var(--vectis-duration-1500) linear infinite;\n  }\n\n  /* Scoped to the wave: the pulse uses the same overlay, but its run is symmetric in\n     time, so reversing it would change nothing at all. */\n  .v-skeleton-loader[data-animation='wave']:dir(rtl) .v-skeleton-loader-item::after {\n    animation-direction: reverse;\n  }\n\n  @keyframes v-skeleton-loader-pulse {\n    from,\n    to {\n      opacity: 0;\n    }\n\n    50% {\n      opacity: 1;\n    }\n  }\n\n  @keyframes v-skeleton-loader-wave {\n    from {\n      translate: -100% 0;\n    }\n\n    to {\n      translate: 100% 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    /*\n     * This has exactly the specificity of the two rules it overrides, so its position at the\n     * END of the sheet is the whole of what makes it win.\n     */\n    .v-skeleton-loader:is([data-animation='wave'], [data-animation='pulse'])\n      .v-skeleton-loader-item::after {\n      background-image: none;\n      background-color: var(--skeleton-loader-highlight);\n      animation: v-skeleton-loader-pulse var(--vectis-duration-5000) var(--vectis-ease-in-out)\n        infinite;\n    }\n  }\n\n  /* Forced colours repaint the silhouette as Canvas, the page itself: the placeholder\n     vanishes. It is drawn in GrayText, and the pulse or the wave in Canvas over it, so the\n     loading cue survives as well as the shape. */\n  @media (forced-colors: active) {\n    .v-skeleton-loader-item {\n      --skeleton-loader-highlight: Canvas;\n      forced-color-adjust: none;\n      background: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VSkeletonLoader/VSkeletonLoader.vue_vue_type_script_setup_true_lang.js

@@ -5,7 +5,6 @@ import { Fragment as n, computed as r, createCommentVNode as i, createElementBlo
 var f = [
 	"data-shape",
 	"data-size",
-	"data-compact",
 	"data-animation",
 	"data-custom",
 	"role",
@@ -18,10 +17,6 @@ var f = [
 	props: {
 		shape: { default: "text" },
 		size: { default: "md" },
-		compact: {
-			type: Boolean,
-			default: !1
-		},
 		width: { default: void 0 },
 		height: { default: void 0 },
 		lines: { default: 1 },
@@ -39,7 +34,6 @@ var f = [
 			class: "v-skeleton-loader v-control",
 			"data-shape": o.shape,
 			"data-size": o.size,
-			"data-compact": o.compact ? "" : void 0,
 			"data-animation": o.animation,
 			"data-custom": o.color === void 0 ? void 0 : "",
 			role: g.value ? "status" : void 0,

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

@@ -1 +1 @@
-{"version":3,"file":"VSkeletonLoader.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VSkeletonLoader/VSkeletonLoader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * CSS animates placeholders. JavaScript supplies accessible loading text and normalizes\n * dimensions; decorative loaders remain hidden from assistive technology.\n */\nimport { computed } from 'vue'\n\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\n/** What the silhouette stands for, which sets its corners and how it is sized. */\nexport type SkeletonLoaderShape = 'text' | 'control' | 'pill' | 'circle' | 'surface'\n/** How the silhouette says it is loading: a sweep, a slow pulse, or nothing. */\nexport type SkeletonLoaderAnimation = 'wave' | 'pulse' | 'none'\n/** The step of the control size scale a control-shaped silhouette takes. */\nexport type SkeletonLoaderSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\ninterface SkeletonLoaderProps {\n  /** What the silhouette stands for. */\n  shape?: SkeletonLoaderShape\n  /**\n   * The size on the scale shared by every control. It only means something for the\n   * shapes sized like a control: text follows the typography around it, and a surface\n   * has its own height.\n   */\n  size?: SkeletonLoaderSize\n  /** Takes 4px off the height, as everywhere else in the design system. */\n  compact?: boolean\n  /**\n   * The width: a number is read as pixels, and anything else as a CSS length of your\n   * own, such as `'100%'` or `'12ch'`. Left out, the silhouette takes all the width available.\n   */\n  width?: number | string\n  /** The height, read the same way. It wins over the shape and the size. */\n  height?: number | string\n  /**\n   * How many silhouettes to stack. In the text shape the last one is drawn shorter than the\n   * others, and that single detail is what reads as a paragraph rather than as a table.\n   */\n  lines?: number\n  /**\n   * How the silhouette shows that something is happening. Turning it off freezes it,\n   * which suits printing, a screenshot, or a parent already animating.\n   */\n  animation?: SkeletonLoaderAnimation\n  /**\n   * A background colour of your own, replacing the token. The wave's highlight is\n   * DERIVED from it, so it stays correct with nothing else to set.\n   */\n  color?: string\n  /**\n   * Announces the loading to screen readers. It is OFF by default, because a skeleton is\n   * decorative: a page holds a dozen of them, and a dozen competing announcements are\n   * unreadable.\n   */\n  announce?: boolean\n  /**\n   * What is announced, which also IMPLIES announcing. Prefer something situated, such as\n   * \"Loading the results\", since a generic word is the reason the default is silence.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<SkeletonLoaderProps>(), {\n  shape: 'text',\n  size: 'md',\n  compact: false,\n  width: undefined,\n  height: undefined,\n  lines: 1,\n  animation: 'wave',\n  color: undefined,\n  announce: false,\n  label: undefined,\n})\n\n// A guard against two silent bugs: asked for zero lines the component would render NOTHING at\n// all; an invisible skeleton nobody notices is missing; and a fractional count would produce a\n// surprising number of them.\nconst count = computed(() =>\n  Number.isFinite(props.lines) ? Math.max(1, Math.trunc(props.lines)) : 1,\n)\n\n// @a11y\n// Supplying a label counts as asking to be announced, otherwise that prop would sit there doing\n// nothing. An empty label is no label: it would otherwise open a live region with nothing in\n// it.\nconst announced = computed(() => props.announce || Boolean(props.label))\n\nconst m = useMessages()\n// The dictionary must never be read directly in the body of `setup`: the value would be\n// captured once and would stop following a later change of language.\nconst resolvedLabel = computed(() => props.label || m.value.common.loading)\n</script>\n\n<template>\n  <span\n    class=\"v-skeleton-loader v-control\"\n    :data-shape=\"shape\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-animation=\"animation\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :role=\"announced ? 'status' : undefined\"\n    :aria-hidden=\"announced ? undefined : 'true'\"\n    :style=\"{\n      '--custom-color': color,\n      '--skeleton-loader-w': cssSize(width),\n      '--skeleton-loader-h': cssSize(height),\n    }\"\n  >\n    <!--\n      The label is rendered before the silhouettes, and that order is structural. The rule\n      shortening the last line of a paragraph asks for the last CHILD, so a label rendered after\n      them would quietly take that place and no line would be shortened.\n    -->\n    <span v-if=\"announced\" class=\"v-visually-hidden\">{{ resolvedLabel }}</span>\n    <span v-for=\"n in count\" :key=\"n\" class=\"v-skeleton-loader-item\" />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The shape table below sets them, and the dimension props overwrite them inline; which\n   * always wins over a rule targeting the same element, so no specificity contest is possible.\n   */\n  .v-skeleton-loader {\n    /*\n     * The grey has a token of its own. No existing colour role holds the right value in both\n     * themes: the muted surface is too pale in the light one for the pulse to be visible at\n     * all, and the border colour has the right tone but the wrong meaning.\n     */\n    --skeleton-loader-base: var(--vectis-color-surface-skeleton);\n    /*\n     * The highlight is DERIVED from the grey rather than named: the same colour, a little\n     * lighter. A lightness STEP is what makes one declaration correct in both themes, where a\n     * `color-mix()` towards a target would not; the silhouette is darker than the page in light\n     * and LIGHTER than it in dark, so a fixed target would lighten in one and darken in the\n     * other.\n     */\n    --skeleton-loader-highlight: oklch(from var(--skeleton-loader-base) calc(l + 0.06) c h);\n    --skeleton-loader-h: var(--control-height);\n    /*\n     * The cap is not calc(var(--skeleton-loader-h) / 2), which looks like the closer unit and\n     * is the wrong one twice over: --skeleton-loader-h is a flex BASIS on an item that grows to\n     * fill a taller parent (see below), and the `height` prop overwrites it inline. Two equally\n     * tall silhouettes would then round differently depending on how they got there.\n     */\n    --skeleton-loader-radius: min(\n      var(--vectis-radius-interactive),\n      calc(var(--control-height) / 2)\n    );\n    --skeleton-loader-gap: var(--vectis-space-2);\n    display: flex;\n    flex-direction: column;\n    gap: var(--skeleton-loader-gap);\n  }\n\n  /* A custom colour wins by specificity rather than by order, being one step more\n     specific than the rule above. */\n  .v-skeleton-loader[data-custom] {\n    --skeleton-loader-base: var(--custom-color);\n  }\n\n  .v-skeleton-loader-item {\n    position: relative;\n    /*\n     * The height from the shape table is a default: inside a parent that has a height of its\n     * own, the silhouette grows to fill it; a card fills its slot.\n     */\n    flex: 1 1 auto;\n    inline-size: var(--skeleton-loader-w, 100%);\n    block-size: var(--skeleton-loader-h);\n    /* Clipped rather than hidden: hiding the overflow would turn every silhouette into\n       a scroll container, for nothing. */\n    overflow: clip;\n    border-radius: var(--skeleton-loader-radius);\n    background: var(--skeleton-loader-base);\n  }\n\n  /*\n   * A line of text is one em tall, which means it follows the typography it INHERITS, and it is\n   * centred in the line box the same way a line of text would be. The gap between lines and the\n   * padding around them are derived from that same line height, so that N silhouettes occupy\n   * exactly N lines of text: replacing them with the real content shifts nothing on the page.\n   */\n  .v-skeleton-loader[data-shape='text'] {\n    --skeleton-loader-h: 1em;\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n    --skeleton-loader-gap: max(0px, calc(1lh - 1em));\n    padding-block: calc(var(--skeleton-loader-gap) / 2);\n  }\n\n  /* A line of text keeps the height its typography gives it: unlike the other shapes it\n     neither stretches in a tall parent nor squashes in a short one. */\n  .v-skeleton-loader[data-shape='text'] .v-skeleton-loader-item {\n    flex: none;\n  }\n\n  /*\n   * The shortened last line, the one detail that makes a stack of bars read as a paragraph.\n   * Asking for a line PRECEDED by another is what guarantees it only applies from two lines up;\n   * a single line is not a paragraph; and the proportion is taken from the EFFECTIVE width, so\n   * it still works under a `width` prop.\n   */\n  .v-skeleton-loader[data-shape='text']\n    .v-skeleton-loader-item\n    + .v-skeleton-loader-item:last-child {\n    --skeleton-loader-last-line: 0.6;\n    inline-size: calc(var(--skeleton-loader-w, 100%) * var(--skeleton-loader-last-line));\n  }\n\n  .v-skeleton-loader[data-shape='pill'] {\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n  }\n\n  /*\n   * A circle takes its width FROM its height through the ratio, so changing the size alone\n   * changes the diameter and nothing has to be kept in step. The container sits inline, like\n   * the avatar it replaces, rather than spanning the whole width, and aligning to the start\n   * stops the silhouette from being stretched sideways; which keeps the circle round.\n   */\n  .v-skeleton-loader[data-shape='circle'] {\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n    display: inline-flex;\n    align-items: start;\n  }\n\n  .v-skeleton-loader[data-shape='circle'] .v-skeleton-loader-item {\n    /* Left to the content rather than set to the full width, so that the ratio is what\n       decides. An explicit `width` still takes over, and then knowingly gives an\n       oval. */\n    inline-size: var(--skeleton-loader-w, auto);\n    aspect-ratio: 1;\n  }\n\n  /*\n   * A surface; a card, an image, a block; has no height anyone could guess without measuring\n   * the page, which this component deliberately never does. It takes a default from a token,\n   * which the `height` prop overrides, as does any consumer style (theirs sits outside our\n   * layers and therefore wins).\n   */\n  .v-skeleton-loader[data-shape='surface'] {\n    --skeleton-loader-h: var(--vectis-control-size-skeleton-surface);\n    --skeleton-loader-radius: var(--vectis-radius-surface);\n  }\n\n  .v-skeleton-loader:is([data-animation='wave'], [data-animation='pulse'])\n    .v-skeleton-loader-item::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n  }\n\n  /*\n   * The pulse: a flat sheet of the lighter shade fades in and out OVER the silhouette. Fading\n   * the silhouette itself would be shorter to write, and wrong: it would fade towards the PAGE,\n   * which means lightening in the light theme and DARKENING in the dark one; the opposite of\n   * what the wave does.\n   */\n  .v-skeleton-loader[data-animation='pulse'] .v-skeleton-loader-item::after {\n    background-color: var(--skeleton-loader-highlight);\n    animation: v-skeleton-loader-pulse var(--vectis-duration-1500) var(--vectis-ease-in-out)\n      infinite;\n  }\n\n  /*\n   * The wave: a band of light crossing the silhouette. The gradient is SYMMETRIC; transparent,\n   * light, transparent; so its physical angle makes no observable difference and there is\n   * nothing to mirror in RTL.\n   */\n  .v-skeleton-loader[data-animation='wave'] .v-skeleton-loader-item::after {\n    background-image: linear-gradient(\n      90deg,\n      transparent,\n      var(--skeleton-loader-highlight),\n      transparent\n    );\n    animation: v-skeleton-loader-wave var(--vectis-duration-1500) linear infinite;\n  }\n\n  /* Scoped to the wave: the pulse uses the same overlay, but its run is symmetric in\n     time, so reversing it would change nothing at all. */\n  .v-skeleton-loader[data-animation='wave']:dir(rtl) .v-skeleton-loader-item::after {\n    animation-direction: reverse;\n  }\n\n  @keyframes v-skeleton-loader-pulse {\n    from,\n    to {\n      opacity: 0;\n    }\n\n    50% {\n      opacity: 1;\n    }\n  }\n\n  @keyframes v-skeleton-loader-wave {\n    from {\n      translate: -100% 0;\n    }\n\n    to {\n      translate: 100% 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    /*\n     * This has exactly the specificity of the two rules it overrides, so its position at the\n     * END of the sheet is the whole of what makes it win.\n     */\n    .v-skeleton-loader:is([data-animation='wave'], [data-animation='pulse'])\n      .v-skeleton-loader-item::after {\n      background-image: none;\n      background-color: var(--skeleton-loader-highlight);\n      animation: v-skeleton-loader-pulse var(--vectis-duration-5000) var(--vectis-ease-in-out)\n        infinite;\n    }\n  }\n\n  /* Forced colours repaint the silhouette as Canvas, the page itself: the placeholder\n     vanishes. It is drawn in GrayText, and the pulse or the wave in Canvas over it, so the\n     loading cue survives as well as the shape. */\n  @media (forced-colors: active) {\n    .v-skeleton-loader-item {\n      --skeleton-loader-highlight: Canvas;\n      forced-color-adjust: none;\n      background: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+DA,IAAM,IAAQ,GAgBR,IAAQ,QACZ,OAAO,SAAS,EAAM,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,EAAM,KAAK,CAAC,IAAI,CACxE,GAMM,IAAY,QAAe,EAAM,YAAY,EAAQ,EAAM,KAAM,GAEjE,IAAI,EAAY,GAGhB,IAAgB,QAAe,EAAM,SAAS,EAAE,MAAM,OAAO,OAAO;yBAIxE,EAsBO,QAAA;GArBL,OAAM;GACL,cAAY,EAAA;GACZ,aAAW,EAAA;GACX,gBAAc,EAAA,UAAO,KAAQ,KAAA;GAC7B,kBAAgB,EAAA;GAChB,eAAa,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,MAAM,EAAA,QAAS,WAAc,KAAA;GAC7B,eAAa,EAAA,QAAY,KAAA,IAAS;GAClC,OAAK,EAAA;sBAA4B,EAAA;2BAAoC,EAAA,CAAA,CAAO,CAAC,EAAA,KAAK;2BAAgC,EAAA,CAAA,CAAO,CAAC,EAAA,MAAM;;MAWrH,EAAA,SAAA,EAAA,GAAZ,EAA2E,QAA3E,GAA2E,EAAvB,EAAA,KAAa,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,IAAA,EAAA,EAAA,GACjE,EAAmE,GAAA,MAAA,EAAjD,EAAA,QAAL,YAAb,EAAmE,QAAA;GAAzC,KAAK;GAAG,OAAM"}
+{"version":3,"file":"VSkeletonLoader.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeStyle","_unref","_toDisplayString","_createCommentVNode","_Fragment","_renderList","_hoisted_1","_hoisted_2","VSkeletonLoader_vue_vue_type_script_setup_true_lang_default","props","__props","count","computed","announced","m","useMessages","resolvedLabel","openBlock","createElementBlock","normalizeStyle","unref","cssSize","toDisplayString","createCommentVNode","Fragment","renderList","n"],"sources":["../../../src/components/VSkeletonLoader/VSkeletonLoader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * CSS animates placeholders. JavaScript supplies accessible loading text and normalizes\n * dimensions; decorative loaders remain hidden from assistive technology.\n */\nimport { computed } from 'vue'\n\nimport { useMessages } from '../../i18n/state'\nimport { cssSize } from '../../utils/css'\n\n/** What the silhouette stands for, which sets its corners and how it is sized. */\nexport type SkeletonLoaderShape = 'text' | 'control' | 'pill' | 'circle' | 'surface'\n/** How the silhouette says it is loading: a sweep, a slow pulse, or nothing. */\nexport type SkeletonLoaderAnimation = 'wave' | 'pulse' | 'none'\n/** The step of the control size scale a control-shaped silhouette takes. */\nexport type SkeletonLoaderSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\ninterface SkeletonLoaderProps {\n  /** What the silhouette stands for. */\n  shape?: SkeletonLoaderShape\n  /**\n   * The size on the scale shared by every control. It only means something for the\n   * shapes sized like a control: text follows the typography around it, and a surface\n   * has its own height.\n   */\n  size?: SkeletonLoaderSize\n  /**\n   * The width: a number is read as pixels, and anything else as a CSS length of your\n   * own, such as `'100%'` or `'12ch'`. Left out, the silhouette takes all the width available.\n   */\n  width?: number | string\n  /** The height, read the same way. It wins over the shape and the size. */\n  height?: number | string\n  /**\n   * How many silhouettes to stack. In the text shape the last one is drawn shorter than the\n   * others, and that single detail is what reads as a paragraph rather than as a table.\n   */\n  lines?: number\n  /**\n   * How the silhouette shows that something is happening. Turning it off freezes it,\n   * which suits printing, a screenshot, or a parent already animating.\n   */\n  animation?: SkeletonLoaderAnimation\n  /**\n   * A background colour of your own, replacing the token. The wave's highlight is\n   * DERIVED from it, so it stays correct with nothing else to set.\n   */\n  color?: string\n  /**\n   * Announces the loading to screen readers. It is OFF by default, because a skeleton is\n   * decorative: a page holds a dozen of them, and a dozen competing announcements are\n   * unreadable.\n   */\n  announce?: boolean\n  /**\n   * What is announced, which also IMPLIES announcing. Prefer something situated, such as\n   * \"Loading the results\", since a generic word is the reason the default is silence.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<SkeletonLoaderProps>(), {\n  shape: 'text',\n  size: 'md',\n  width: undefined,\n  height: undefined,\n  lines: 1,\n  animation: 'wave',\n  color: undefined,\n  announce: false,\n  label: undefined,\n})\n\n// A guard against two silent bugs: asked for zero lines the component would render NOTHING at\n// all; an invisible skeleton nobody notices is missing; and a fractional count would produce a\n// surprising number of them.\nconst count = computed(() =>\n  Number.isFinite(props.lines) ? Math.max(1, Math.trunc(props.lines)) : 1,\n)\n\n// @a11y\n// Supplying a label counts as asking to be announced, otherwise that prop would sit there doing\n// nothing. An empty label is no label: it would otherwise open a live region with nothing in\n// it.\nconst announced = computed(() => props.announce || Boolean(props.label))\n\nconst m = useMessages()\n// The dictionary must never be read directly in the body of `setup`: the value would be\n// captured once and would stop following a later change of language.\nconst resolvedLabel = computed(() => props.label || m.value.common.loading)\n</script>\n\n<template>\n  <span\n    class=\"v-skeleton-loader v-control\"\n    :data-shape=\"shape\"\n    :data-size=\"size\"\n    :data-animation=\"animation\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :role=\"announced ? 'status' : undefined\"\n    :aria-hidden=\"announced ? undefined : 'true'\"\n    :style=\"{\n      '--custom-color': color,\n      '--skeleton-loader-w': cssSize(width),\n      '--skeleton-loader-h': cssSize(height),\n    }\"\n  >\n    <!--\n      The label is rendered before the silhouettes, and that order is structural. The rule\n      shortening the last line of a paragraph asks for the last CHILD, so a label rendered after\n      them would quietly take that place and no line would be shortened.\n    -->\n    <span v-if=\"announced\" class=\"v-visually-hidden\">{{ resolvedLabel }}</span>\n    <span v-for=\"n in count\" :key=\"n\" class=\"v-skeleton-loader-item\" />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The shape table below sets them, and the dimension props overwrite them inline; which\n   * always wins over a rule targeting the same element, so no specificity contest is possible.\n   */\n  .v-skeleton-loader {\n    /*\n     * The grey has a token of its own. No existing colour role holds the right value in both\n     * themes: the muted surface is too pale in the light one for the pulse to be visible at\n     * all, and the border colour has the right tone but the wrong meaning.\n     */\n    --skeleton-loader-base: var(--vectis-color-surface-skeleton);\n    /*\n     * The highlight is DERIVED from the grey rather than named: the same colour, a little\n     * lighter. A lightness STEP is what makes one declaration correct in both themes, where a\n     * `color-mix()` towards a target would not; the silhouette is darker than the page in light\n     * and LIGHTER than it in dark, so a fixed target would lighten in one and darken in the\n     * other.\n     */\n    --skeleton-loader-highlight: oklch(from var(--skeleton-loader-base) calc(l + 0.06) c h);\n    --skeleton-loader-h: var(--control-height);\n    /*\n     * The cap is not calc(var(--skeleton-loader-h) / 2), which looks like the closer unit and\n     * is the wrong one twice over: --skeleton-loader-h is a flex BASIS on an item that grows to\n     * fill a taller parent (see below), and the `height` prop overwrites it inline. Two equally\n     * tall silhouettes would then round differently depending on how they got there.\n     */\n    --skeleton-loader-radius: min(\n      var(--vectis-radius-interactive),\n      calc(var(--control-height) / 2)\n    );\n    --skeleton-loader-gap: var(--vectis-space-2);\n    display: flex;\n    flex-direction: column;\n    gap: var(--skeleton-loader-gap);\n  }\n\n  /* A custom colour wins by specificity rather than by order, being one step more\n     specific than the rule above. */\n  .v-skeleton-loader[data-custom] {\n    --skeleton-loader-base: var(--custom-color);\n  }\n\n  .v-skeleton-loader-item {\n    position: relative;\n    /*\n     * The height from the shape table is a default: inside a parent that has a height of its\n     * own, the silhouette grows to fill it; a card fills its slot.\n     */\n    flex: 1 1 auto;\n    inline-size: var(--skeleton-loader-w, 100%);\n    block-size: var(--skeleton-loader-h);\n    /* Clipped rather than hidden: hiding the overflow would turn every silhouette into\n       a scroll container, for nothing. */\n    overflow: clip;\n    border-radius: var(--skeleton-loader-radius);\n    background: var(--skeleton-loader-base);\n  }\n\n  /*\n   * A line of text is one em tall, which means it follows the typography it INHERITS, and it is\n   * centred in the line box the same way a line of text would be. The gap between lines and the\n   * padding around them are derived from that same line height, so that N silhouettes occupy\n   * exactly N lines of text: replacing them with the real content shifts nothing on the page.\n   */\n  .v-skeleton-loader[data-shape='text'] {\n    --skeleton-loader-h: 1em;\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n    --skeleton-loader-gap: max(0px, calc(1lh - 1em));\n    padding-block: calc(var(--skeleton-loader-gap) / 2);\n  }\n\n  /* A line of text keeps the height its typography gives it: unlike the other shapes it\n     neither stretches in a tall parent nor squashes in a short one. */\n  .v-skeleton-loader[data-shape='text'] .v-skeleton-loader-item {\n    flex: none;\n  }\n\n  /*\n   * The shortened last line, the one detail that makes a stack of bars read as a paragraph.\n   * Asking for a line PRECEDED by another is what guarantees it only applies from two lines up;\n   * a single line is not a paragraph; and the proportion is taken from the EFFECTIVE width, so\n   * it still works under a `width` prop.\n   */\n  .v-skeleton-loader[data-shape='text']\n    .v-skeleton-loader-item\n    + .v-skeleton-loader-item:last-child {\n    --skeleton-loader-last-line: 0.6;\n    inline-size: calc(var(--skeleton-loader-w, 100%) * var(--skeleton-loader-last-line));\n  }\n\n  .v-skeleton-loader[data-shape='pill'] {\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n  }\n\n  /*\n   * A circle takes its width FROM its height through the ratio, so changing the size alone\n   * changes the diameter and nothing has to be kept in step. The container sits inline, like\n   * the avatar it replaces, rather than spanning the whole width, and aligning to the start\n   * stops the silhouette from being stretched sideways; which keeps the circle round.\n   */\n  .v-skeleton-loader[data-shape='circle'] {\n    --skeleton-loader-radius: var(--vectis-radius-pill);\n    display: inline-flex;\n    align-items: start;\n  }\n\n  .v-skeleton-loader[data-shape='circle'] .v-skeleton-loader-item {\n    /* Left to the content rather than set to the full width, so that the ratio is what\n       decides. An explicit `width` still takes over, and then knowingly gives an\n       oval. */\n    inline-size: var(--skeleton-loader-w, auto);\n    aspect-ratio: 1;\n  }\n\n  /*\n   * A surface; a card, an image, a block; has no height anyone could guess without measuring\n   * the page, which this component deliberately never does. It takes a default from a token,\n   * which the `height` prop overrides, as does any consumer style (theirs sits outside our\n   * layers and therefore wins).\n   */\n  .v-skeleton-loader[data-shape='surface'] {\n    --skeleton-loader-h: var(--vectis-control-size-skeleton-surface);\n    --skeleton-loader-radius: var(--vectis-radius-surface);\n  }\n\n  .v-skeleton-loader:is([data-animation='wave'], [data-animation='pulse'])\n    .v-skeleton-loader-item::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n  }\n\n  /*\n   * The pulse: a flat sheet of the lighter shade fades in and out OVER the silhouette. Fading\n   * the silhouette itself would be shorter to write, and wrong: it would fade towards the PAGE,\n   * which means lightening in the light theme and DARKENING in the dark one; the opposite of\n   * what the wave does.\n   */\n  .v-skeleton-loader[data-animation='pulse'] .v-skeleton-loader-item::after {\n    background-color: var(--skeleton-loader-highlight);\n    animation: v-skeleton-loader-pulse var(--vectis-duration-1500) var(--vectis-ease-in-out)\n      infinite;\n  }\n\n  /*\n   * The wave: a band of light crossing the silhouette. The gradient is SYMMETRIC; transparent,\n   * light, transparent; so its physical angle makes no observable difference and there is\n   * nothing to mirror in RTL.\n   */\n  .v-skeleton-loader[data-animation='wave'] .v-skeleton-loader-item::after {\n    background-image: linear-gradient(\n      90deg,\n      transparent,\n      var(--skeleton-loader-highlight),\n      transparent\n    );\n    animation: v-skeleton-loader-wave var(--vectis-duration-1500) linear infinite;\n  }\n\n  /* Scoped to the wave: the pulse uses the same overlay, but its run is symmetric in\n     time, so reversing it would change nothing at all. */\n  .v-skeleton-loader[data-animation='wave']:dir(rtl) .v-skeleton-loader-item::after {\n    animation-direction: reverse;\n  }\n\n  @keyframes v-skeleton-loader-pulse {\n    from,\n    to {\n      opacity: 0;\n    }\n\n    50% {\n      opacity: 1;\n    }\n  }\n\n  @keyframes v-skeleton-loader-wave {\n    from {\n      translate: -100% 0;\n    }\n\n    to {\n      translate: 100% 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    /*\n     * This has exactly the specificity of the two rules it overrides, so its position at the\n     * END of the sheet is the whole of what makes it win.\n     */\n    .v-skeleton-loader:is([data-animation='wave'], [data-animation='pulse'])\n      .v-skeleton-loader-item::after {\n      background-image: none;\n      background-color: var(--skeleton-loader-highlight);\n      animation: v-skeleton-loader-pulse var(--vectis-duration-5000) var(--vectis-ease-in-out)\n        infinite;\n    }\n  }\n\n  /* Forced colours repaint the silhouette as Canvas, the page itself: the placeholder\n     vanishes. It is drawn in GrayText, and the pulse or the wave in Canvas over it, so the\n     loading cue survives as well as the shape. */\n  @media (forced-colors: active) {\n    .v-skeleton-loader-item {\n      --skeleton-loader-highlight: Canvas;\n      forced-color-adjust: none;\n      background: GrayText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6DA,IAAMW,IAAQC,GAeRC,IAAQC,QACZ,OAAO,SAASH,EAAM,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,MAAMA,EAAM,KAAK,CAAC,IAAI,CACxE,GAMMI,IAAYD,QAAeH,EAAM,YAAY,EAAQA,EAAM,KAAM,GAEjEK,IAAIC,EAAY,GAGhBC,IAAgBJ,QAAeH,EAAM,SAASK,EAAE,MAAM,OAAO,OAAO;oBAIxEhB,EAAA,GAAAC,EAqBO,QAAA;GApBL,OAAM;GACL,cAAYW,EAAA;GACZ,aAAWA,EAAA;GACX,kBAAgBA,EAAA;GAChB,eAAaA,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,MAAMG,EAAA,QAAS,WAAc,KAAA;GAC7B,eAAaA,EAAA,QAAY,KAAA,IAAS;GAClC,OAAKb,EAAA;IAA4B,kBAAAU,EAAA;IAAoC,uBAAAT,EAAAoB,CAAA,CAAO,CAACX,EAAA,KAAK;IAAgC,uBAAAT,EAAAoB,CAAA,CAAO,CAACX,EAAA,MAAM;;EAWrH,GAAA,CAAAG,EAAA,SAAZf,EAAA,GAAAC,EAA2E,QAA3EQ,GAA2EL,EAAvBc,EAAA,KAAa,GAAA,CAAA,KAAAO,EAAA,IAAA,EAAA,IACjEzB,EAAA,EAAA,GAAAC,EAAmEK,GAAA,MAAAC,EAAjDM,EAAA,QAAL,OAAbb,EAAA,GAAAC,EAAmE,QAAA;GAAzC,KAAK2B;GAAG,OAAM"}