vectis-ui 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"VSideNavigationGroup.js","names":[],"sources":["../../../src/components/VSideNavigation/VSideNavigationGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\n/**\n * A named section of the navigation — \"Workspace\", \"Settings\". The name is plain text:\n * it cannot be focused or clicked, and it names the sublist under it for assistive\n * technology.\n *\n * Unlike a menu group, it does NOT claim to be a group in ARIA terms. Such a role\n * cannot be a direct child of a list without breaking what that list is allowed to\n * contain. A NAMED sublist says exactly the same thing in strictly valid HTML — and it\n * gives a group the same shape as a branch, which is what keeps the styling uniform.\n *\n * A group is NOT a level of the hierarchy: it declares neither of the two variables\n * counting the depth, so that count passes through it untouched and the items inside\n * are indented as if the group were not there.\n */\ninterface SideNavigationGroupProps {\n  /** The name of the section. The `#label` slot replaces it. */\n  label: string\n}\n\ndefineProps<SideNavigationGroupProps>()\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 section heading takes the overline type role, without forcing capitals: how\n   * the label is written is the consumer's decision.\n   *\n   * Its indent and its height are the rows' own recipe, so a heading occupies exactly\n   * the height of a row — compact included — and the vertical rhythm of the list is\n   * not broken by it. The type is the one thing staying outside that scale, which is\n   * why the text has to be centred vertically by hand.\n   *\n   * TRAP — the indent repeats the rows' computation rather than sharing a variable\n   * with them, and it has to: a custom property is substituted on the element that\n   * DECLARES it, so a shared one set higher up would be frozen at level zero.\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

@@ -0,0 +1,20 @@
+import { createElementBlock as e, createElementVNode as t, createTextVNode as n, defineComponent as r, openBlock as i, renderSlot as a, toDisplayString as o, unref as s, useId as c } from "vue";
+//#region src/components/VSideNavigation/VSideNavigationGroup.vue?vue&type=script&setup=true&lang.ts
+var l = { class: "v-side-nav-group" }, u = ["id"], d = ["aria-labelledby"], f = /*@__PURE__*/ r({
+	__name: "VSideNavigationGroup",
+	props: { label: {} },
+	setup(r) {
+		let f = c();
+		return (c, p) => (i(), e("li", l, [t("span", {
+			id: s(f),
+			class: "v-side-nav-group-label"
+		}, [a(c.$slots, "label", {}, () => [n(o(r.label), 1)])], 8, u), t("ul", {
+			class: "v-side-nav-group-list",
+			"aria-labelledby": s(f)
+		}, [a(c.$slots, "default")], 8, d)]));
+	}
+});
+//#endregion
+export { f as default };
+
+//# sourceMappingURL=VSideNavigationGroup.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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\n/**\n * A named section of the navigation — \"Workspace\", \"Settings\". The name is plain text:\n * it cannot be focused or clicked, and it names the sublist under it for assistive\n * technology.\n *\n * Unlike a menu group, it does NOT claim to be a group in ARIA terms. Such a role\n * cannot be a direct child of a list without breaking what that list is allowed to\n * contain. A NAMED sublist says exactly the same thing in strictly valid HTML — and it\n * gives a group the same shape as a branch, which is what keeps the styling uniform.\n *\n * A group is NOT a level of the hierarchy: it declares neither of the two variables\n * counting the depth, so that count passes through it untouched and the items inside\n * are indented as if the group were not there.\n */\ninterface SideNavigationGroupProps {\n  /** The name of the section. The `#label` slot replaces it. */\n  label: string\n}\n\ndefineProps<SideNavigationGroupProps>()\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 section heading takes the overline type role, without forcing capitals: how\n   * the label is written is the consumer's decision.\n   *\n   * Its indent and its height are the rows' own recipe, so a heading occupies exactly\n   * the height of a row — compact included — and the vertical rhythm of the list is\n   * not broken by it. The type is the one thing staying outside that scale, which is\n   * why the text has to be centred vertically by hand.\n   *\n   * TRAP — the indent repeats the rows' computation rather than sharing a variable\n   * with them, and it has to: a custom property is substituted on the element that\n   * DECLARES it, so a shared one set higher up would be frozen at level zero.\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":";;;;;;EA+BA,IAAM,IAAU,EAAM;yBAIpB,EAOK,MAPL,GAOK,CANH,EAEC,QAAA;GAFM,IAAI,EAAA,CAAA;GAAS,OAAM;MACvB,EAAqC,EAAA,QAAA,SAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,GAAA,CAAA,GAE9B,EAEK,MAAA;GAFD,OAAM;GAAyB,mBAAiB,EAAA,CAAA;MAClD,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/VSideNavigation/VSideNavigationItem.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-side-nav-item{--side-nav-parent-level:var(--side-nav-level,0)}.v-side-nav-children{--side-nav-level:calc(var(--side-nav-parent-level) + 1)}.v-side-nav-branch{min-inline-size:0}.v-side-nav-row{align-items:center;gap:var(--control-gap);min-block-size:var(--control-height);padding-block:var(--vectis-space-1);padding-inline:calc(var(--control-padding-inline) + var(--side-nav-level,0) * var(--side-nav-indent)) var(--control-padding-inline);border-radius:var(--vectis-radius-sm);color:var(--vectis-color-text);font-size:var(--control-font-size);line-height:var(--vectis-text-body-md-leading);cursor:pointer;list-style:none;display:flex;position:relative}.v-side-nav-row::-webkit-details-marker{display:none}.v-side-nav-action{align-items:center;gap:var(--control-gap);min-inline-size:0;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;text-align:start;cursor:inherit;background:0 0;border:none;flex:1;padding:0;text-decoration:none;display:flex}.v-side-nav-action:after{content:"";border-radius:var(--vectis-radius-sm);position:absolute;inset:0}.v-side-nav-content{flex-direction:column;flex:1;min-inline-size:0;display:flex}.v-side-nav-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.v-side-nav-sublabel{font-size:var(--vectis-text-caption-size);color:var(--vectis-color-text-muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.v-side-nav-icon{color:var(--vectis-color-text-muted);flex:none}.v-side-nav-end{align-items:center;gap:var(--vectis-space-1);flex:none;display:flex;position:relative}.v-side-nav-chevron{color:var(--vectis-color-text-muted);transition:rotate var(--vectis-duration-base) var(--vectis-ease-default);flex:none}.v-side-nav-branch[open]:not([data-swap])>.v-side-nav-row>.v-side-nav-chevron{rotate:180deg}.v-side-nav-branch[data-swap][open]>.v-side-nav-row>.v-side-nav-chevron:not(.v-side-nav-chevron-open),.v-side-nav-branch[data-swap]:not([open])>.v-side-nav-row>.v-side-nav-chevron-open{display:none}.v-side-nav-row:hover:not([data-disabled]){background:var(--vectis-color-surface-muted)}.v-side-nav-row:focus-visible,.v-side-nav-action:focus-visible:after{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:calc(var(--vectis-focus-ring-offset) * -1)}.v-side-nav-action:focus-visible{outline:none}.v-side-nav-row[data-active]{background:var(--vectis-color-accent-surface);color:var(--vectis-color-accent-text)}.v-side-nav-row[data-active] .v-side-nav-label{font-weight:var(--vectis-text-label-weight)}.v-side-nav-row[data-active] .v-side-nav-icon,.v-side-nav-row[data-active] .v-side-nav-sublabel,.v-side-nav-row[data-active] .v-side-nav-chevron{color:inherit}.v-side-nav-row[data-active]:hover{background:color-mix(in oklab, var(--vectis-color-accent-surface), var(--vectis-color-accent-text) 8%)}.v-side-nav-branch:not([open]):has(.v-side-nav-children [aria-current])>.v-side-nav-row:not([data-active]){color:var(--vectis-color-accent-text)}.v-side-nav-row[data-disabled]{color:var(--vectis-color-text-subtle);cursor:not-allowed}.v-side-nav-row[data-disabled] .v-side-nav-icon,.v-side-nav-row[data-disabled] .v-side-nav-sublabel,.v-side-nav-row[data-disabled] .v-side-nav-chevron{color:inherit}.v-side-nav-branch::details-content{block-size:0;transition:block-size var(--vectis-duration-base) var(--vectis-ease-default), content-visibility var(--vectis-duration-base) allow-discrete;overflow:clip}.v-side-nav-branch[open]::details-content{block-size:auto}@media (prefers-reduced-motion:reduce){.v-side-nav-chevron{transition:none}.v-side-nav-branch::details-content{transition:none}}}

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

@@ -0,0 +1,103 @@
+import { IconSource } from '../VIcon/types.js';
+/**
+ * One row of a sidebar navigation. It takes one of two shapes, depending on whether it
+ * was given subitems, and the difference runs deeper than it looks.
+ *
+ * A BRANCH is a native disclosure element, so its open state, the keyboard that
+ * toggles it, the closing of a neighbouring section and the animation all come from
+ * the browser. Its row IS the header of that element, which must contain everything
+ * shown on the line — the `#end` slot included, which is why a click there has to be
+ * cancelled: otherwise anything put in it would fold the branch. The consequence,
+ * documented for integrators, is that only NON-focusable content belongs there — a
+ * badge, a counter. A control inside would be a control nested inside another, and the
+ * header's whole subtree also serves as its name for assistive technology, which some
+ * screen readers flatten into one string.
+ *
+ * A LEAF is the opposite arrangement: the row is a plain container, and the link is
+ * stretched over it invisibly so the entire row is clickable. The `#end` slot then
+ * stays a SIBLING of that link rather than sitting inside it, which keeps a real
+ * control there legitimate.
+ */
+interface SideNavigationItemProps {
+    /** A second line under the label, for a status or a short explanation. */
+    sublabel?: string;
+    /**
+     * An icon before the label: an icon name, or an explicit render. The `#start` slot
+     * replaces it.
+     */
+    icon?: IconSource;
+    /**
+     * Where this row leads, which makes it a link. It is IGNORED on a row that has
+     * subitems: such a row opens and closes rather than navigating.
+     */
+    href?: string;
+    /**
+     * Marks this row as the page currently being viewed. It is highlighted, and
+     * announced as the current page.
+     */
+    active?: boolean;
+    /**
+     * Makes the row unusable: it greys out through the colour tokens and leaves the
+     * keyboard path.
+     */
+    disabled?: boolean;
+    /**
+     * Renders a branch already open. It sets the initial state only; the browser owns it
+     * from then on.
+     */
+    defaultOpen?: boolean;
+}
+type __VLS_Props = SideNavigationItemProps;
+type __VLS_Slots = {
+    /** The label of the row. It is REQUIRED: a navigation row must say where it goes. */
+    default(): unknown;
+    /** A second line made of markup, replacing the `sublabel` prop. */
+    sublabel?(): unknown;
+    /** Free content before the label, which takes the place of `icon`. */
+    start?(): unknown;
+    /**
+     * Free content at the end of the row, before the chevron — a counter, a badge. On a
+     * BRANCH it must not be focusable (see the introduction).
+     */
+    end?(): unknown;
+    /** The subitems, which turn this row into a branch. Nesting is not limited. */
+    items?(): unknown;
+};
+type __VLS_ModelProps = {
+    /**
+     * Whether the branch is open, when the consumer wants to drive or observe it.
+     *
+     * Left unbound, the browser keeps that state entirely to itself, `defaultOpen` giving
+     * only the initial value: the bound value never changes, so Vue never patches the
+     * element back, and the native toggling stays sovereign.
+     *
+     * TRAP — "not bound" is written as `null` and not `undefined`. A model typed as a
+     * plain boolean is declared as such at runtime, and Vue casts an ABSENT boolean prop
+     * to `false`, which would silently overwrite `defaultOpen` on every branch. Giving it
+     * an explicit default disarms that cast.
+     */
+    'open'?: boolean | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: () => any;
+    "update:open": (value: boolean | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean | null) => any) | undefined;
+}>, {
+    href: string;
+    disabled: boolean;
+    icon: IconSource;
+    sublabel: string;
+    defaultOpen: boolean;
+    active: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VSideNavigation/VSideNavigationItem.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"VSideNavigationItem.js","names":[],"sources":["../../../src/components/VSideNavigation/VSideNavigationItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, provide, 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 { useRootAttrs } from '../../composables/useRootAttrs'\n\n/**\n * One row of a sidebar navigation. It takes one of two shapes, depending on whether it\n * was given subitems, and the difference runs deeper than it looks.\n *\n * A BRANCH is a native disclosure element, so its open state, the keyboard that\n * toggles it, the closing of a neighbouring section and the animation all come from\n * the browser. Its row IS the header of that element, which must contain everything\n * shown on the line — the `#end` slot included, which is why a click there has to be\n * cancelled: otherwise anything put in it would fold the branch. The consequence,\n * documented for integrators, is that only NON-focusable content belongs there — a\n * badge, a counter. A control inside would be a control nested inside another, and the\n * header's whole subtree also serves as its name for assistive technology, which some\n * screen readers flatten into one string.\n *\n * A LEAF is the opposite arrangement: the row is a plain container, and the link is\n * stretched over it invisibly so the entire row is clickable. The `#end` slot then\n * stays a SIBLING of that link rather than sitting inside it, which keeps a real\n * control there legitimate.\n */\ninterface SideNavigationItemProps {\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 `#start` 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.\n   */\n  active?: boolean\n  /**\n   * Makes the row unusable: it greys out through the colour tokens and leaves the\n   * keyboard path.\n   */\n  disabled?: boolean\n  /**\n   * Renders a branch already open. It sets the initial state only; the browser owns it\n   * from then on.\n   */\n  defaultOpen?: boolean\n}\n\n// The root element is a list item, which is structure and not the control. Without\n// redirecting them, `target`, `rel`, `download` and the aria-* would land on that list\n// item instead of on the link or the branch header.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<SideNavigationItemProps>(), {\n  sublabel: undefined,\n  icon: undefined,\n  href: undefined,\n  active: false,\n  disabled: false,\n  defaultOpen: false,\n})\n\n/**\n * Whether the branch is open, when the consumer wants to drive or observe it.\n *\n * Left unbound, the browser keeps that state entirely to itself, `defaultOpen` giving\n * only the initial value: the bound value never changes, so Vue never patches the\n * element back, and the native toggling stays sovereign.\n *\n * TRAP — \"not bound\" is written as `null` and not `undefined`. A model typed as a\n * plain boolean is declared as such at runtime, and Vue casts an ABSENT boolean prop\n * to `false`, which would silently overwrite `defaultOpen` on every branch. Giving it\n * an explicit default disarms that cast.\n */\nconst open = defineModel<boolean | null>('open', { default: null })\n\nconst emit = defineEmits<{\n  /**\n   * A row WITHOUT subitems was activated, by click or by keyboard.\n   *\n   * TRAP — never declare a `click` emit alongside it. Vue removes a declared event\n   * from the forwarded attributes, and a consumer's own `@click` would then stop\n   * reaching the link entirely.\n   */\n  select: []\n}>()\n\ndefineSlots<{\n  /** The label of the row. It is REQUIRED: a navigation row must say where it goes. */\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  start?(): unknown\n  /**\n   * Free content at the end of the row, before the chevron — a counter, a badge. On a\n   * BRANCH it must not be focusable (see the introduction).\n   */\n  end?(): unknown\n  /** The subitems, which turn this row into a branch. Nesting is not limited. */\n  items?(): unknown\n}>()\n\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst slots = useSlots()\n/**\n * Whether this row has subitems, read from the mere PRESENCE of the slot — the same\n * device VMenuItem and VTabs use. The answer is the same on the server and in the\n * browser, so there is no registry to fill in and no hydration mismatch.\n *\n * The trade-off is that a slot present but empty still makes the row a branch, chevron\n * included, over an empty list.\n */\nconst hasChildren = computed(() => !!slots.items)\nconst tag = computed(() =>\n  !hasChildren.value && props.href !== undefined ? ('a' as const) : ('button' as const),\n)\n\nconst parent = inject(sideNavigationKey, null)\n\n/**\n * Both chevrons are chosen on the navigation as a whole. The fallback is what keeps an\n * item rendering correctly when it is used outside one.\n */\nconst expandIcon = computed(() => parent?.expandIcon ?? expandMoreIcon)\nconst collapseIcon = computed(() => parent?.collapseIcon)\n\n// The name shared by THIS row's children. It is minted afresh at every level, and that\n// is what keeps \"one section open at a time\" local to a level instead of applying\n// across the whole document.\nconst childrenName = useId()\n\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 = computed(() => (open.value ?? props.defaultOpen) || undefined)\n\n// The element is the source of truth and the model is fed BY it, never the other way\n// round. The event it fires does not bubble, which is convenient here: listening on\n// the element itself cannot pick up a nested branch opening inside it.\nfunction onToggle(event: Event) {\n  const value = (event.target as HTMLDetailsElement).open\n  if (open.value !== value) open.value = value\n}\n\nconst ariaCurrent = computed(() =>\n  props.active ? (tag.value === 'a' && !hasChildren.value ? 'page' : 'true') : undefined,\n)\n\n/*\n * A branch header has no `disabled` attribute of its own, so cancelling the click is\n * the only way to stop it from folding. The keyboard needs nothing here: taking the\n * header out of the tab order already covers it.\n *\n * The same solution as VAccordionItem, and deliberately not `pointer-events: none`,\n * which would also remove the forbidden cursor telling the reader why nothing happens.\n */\nfunction onSummaryClick(event: MouseEvent) {\n  if (props.disabled) event.preventDefault()\n}\n\n/*\n * A branch's end slot sits INSIDE the header, so a click there would fold the branch.\n * Stopping the event from travelling would not help: folding is not a listener anyone\n * registered, it is the click's DEFAULT action, and only cancelling that prevents it.\n *\n * The exception is a click that already landed on something activable. There the click\n * belongs to that control, the branch is not concerned, and cancelling the default\n * would break its own behaviour — a link would stop navigating. The same filter as in\n * `useFieldPanel`, for the same reason.\n */\nfunction onEndClick(event: MouseEvent) {\n  const target = event.target as Element | null\n  if (!target?.closest('button, a, input, select, textarea, [tabindex]')) event.preventDefault()\n}\n\nfunction onActionClick(event: MouseEvent) {\n  // A disabled button never receives the click at all; a link made inert by hand does,\n  // so it is cancelled here.\n  if (props.disabled) {\n    event.preventDefault()\n    return\n  }\n  emit('select')\n}\n</script>\n\n<template>\n  <li class=\"v-side-nav-item\" :class=\"rootClass\" :style=\"rootStyle\">\n    <details\n      v-if=\"hasChildren\"\n      class=\"v-side-nav-branch\"\n      :name=\"parent?.name\"\n      :open=\"openAttr\"\n      :data-swap=\"collapseIcon ? '' : undefined\"\n      @toggle=\"onToggle\"\n    >\n      <summary\n        v-bind=\"forwardedAttrs\"\n        class=\"v-side-nav-row\"\n        :data-active=\"active ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        :aria-current=\"ariaCurrent\"\n        :aria-disabled=\"disabled || undefined\"\n        :tabindex=\"disabled ? -1 : undefined\"\n        @click=\"onSummaryClick\"\n      >\n        <slot name=\"start\">\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\"><slot /></span>\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-bind=\"iconProps(expandIcon)\" />\n        <!-- Both chevrons are always in the DOM; the open state decides which one\n             shows, in CSS alone — the VAccordion idiom -->\n        <VIcon\n          v-if=\"collapseIcon\"\n          class=\"v-side-nav-chevron v-side-nav-chevron-open\"\n          v-bind=\"iconProps(collapseIcon)\"\n        />\n      </summary>\n      <ul class=\"v-side-nav-children\">\n        <slot name=\"items\" />\n      </ul>\n    </details>\n\n    <div\n      v-else\n      class=\"v-side-nav-row\"\n      :data-active=\"active ? '' : undefined\"\n      :data-disabled=\"disabled ? '' : undefined\"\n    >\n      <component\n        :is=\"tag\"\n        v-bind=\"forwardedAttrs\"\n        class=\"v-side-nav-action\"\n        :type=\"tag === 'button' ? 'button' : undefined\"\n        :disabled=\"tag === 'button' ? disabled : undefined\"\n        :href=\"tag === 'a' && !disabled ? href : undefined\"\n        :aria-disabled=\"tag === 'a' && disabled ? 'true' : undefined\"\n        :aria-current=\"ariaCurrent\"\n        @click=\"onActionClick\"\n      >\n        <slot name=\"start\">\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\"><slot /></span>\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   * How deep an item sits, counted entirely in CSS: no registry, nothing provided down\n   * the tree, no inline style, and no `level` prop for the consumer to keep track of.\n   * The markup gives two elements per level — the item, then the list of its children —\n   * and each of them reads a name the other DECLARES.\n   *\n   * TRAP — the obvious one-name form, incrementing a variable by reading itself, is a\n   * CYCLE as far as CSS is concerned, even though the value being read is the inherited\n   * one. The property then falls to invalid, every read falls back to zero, and the\n   * whole tree renders FLAT — with nothing in the console to say why. The two\n   * alternating names are what avoid it.\n   */\n  .v-side-nav-item {\n    --side-nav-parent-level: var(--side-nav-level, 0);\n  }\n\n  .v-side-nav-children {\n    --side-nav-level: calc(var(--side-nav-parent-level) + 1);\n  }\n\n  .v-side-nav-branch {\n    /* Lets a long label wrap rather than widening the whole sidebar. The folding\n       animation itself is further down. */\n    min-inline-size: 0;\n  }\n\n  .v-side-nav-row {\n    /*\n     * Every dimension comes from the variables the nav sets and this row inherits — it\n     * is the only element carrying the shared size class. The icons follow with nothing\n     * written for them, their own variables belonging to that same block.\n     *\n     * The type is composite, as in a menu row: the SIZE comes from the scale, but the\n     * line height stays that of body text — a unitless ratio, so it still follows the\n     * size — and the weight stays regular. The full `control` type role would suit a\n     * single-line label, and a navigation row may wrap and carry a second line.\n     *\n     * TRAP — the indent is computed HERE and not stored in a variable set higher up. A\n     * custom property is substituted on the element that DECLARES it, so a padding\n     * computed on the nav would be frozen at level zero for the whole tree.\n     */\n    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(--vectis-radius-sm);\n    color: var(--vectis-color-text);\n    font-size: var(--control-font-size);\n    line-height: var(--vectis-text-body-md-leading);\n    list-style: none;\n    cursor: pointer;\n  }\n\n  /* Removing the browser's own disclosure triangle: setting the list style is not\n     enough in WebKit, which draws it through this pseudo-element. */\n  .v-side-nav-row::-webkit-details-marker {\n    display: none;\n  }\n\n  .v-side-nav-action {\n    /* On a leaf the link is a CHILD of the row, and the indent deliberately stays on\n       the row itself: what has to run the full width is the hover background, not the\n       link inside it. */\n    flex: 1;\n    min-inline-size: 0;\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: inherit;\n    font-family: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    text-align: start;\n    text-decoration: none;\n    cursor: inherit;\n  }\n\n  /*\n   * This is what stretches the link over the WHOLE row without having to wrap the end\n   * slot inside it. It is an invisible box, positioned, so it is painted above the\n   * chevron — which is not positioned — while passing UNDER the end slot, which is\n   * positioned too and comes later in the document. That layering is exactly what\n   * makes the whole row clickable while leaving a control in the end slot usable.\n   */\n  .v-side-nav-action::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: var(--vectis-radius-sm);\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  /* The chevron points down when the branch is closed and flips when it opens. It\n     turns around a horizontal axis, so unlike VMenu's sideways chevron it needs no\n     mirroring in a right-to-left page. */\n  .v-side-nav-chevron {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n    transition: rotate var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-side-nav-branch[open]:not([data-swap]) > .v-side-nav-row > .v-side-nav-chevron {\n    rotate: 180deg;\n  }\n\n  /* When the navigation supplied a second chevron, each state hides one of the two\n     rendered icons instead of rotating a single one. */\n  .v-side-nav-branch[data-swap][open]\n    > .v-side-nav-row\n    > .v-side-nav-chevron:not(.v-side-nav-chevron-open),\n  .v-side-nav-branch[data-swap]:not([open]) > .v-side-nav-row > .v-side-nav-chevron-open {\n    display: none;\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(var(--vectis-focus-ring-offset) * -1);\n  }\n\n  .v-side-nav-action:focus-visible {\n    outline: none;\n  }\n\n  /* The row of the page currently being viewed. */\n  .v-side-nav-row[data-active] {\n    background: var(--vectis-color-accent-surface);\n    color: var(--vectis-color-accent-text);\n  }\n\n  .v-side-nav-row[data-active] .v-side-nav-label {\n    font-weight: var(--vectis-text-label-weight);\n  }\n\n  .v-side-nav-row[data-active] .v-side-nav-icon,\n  .v-side-nav-row[data-active] .v-side-nav-sublabel,\n  .v-side-nav-row[data-active] .v-side-nav-chevron {\n    color: inherit;\n  }\n\n  .v-side-nav-row[data-active]:hover {\n    /* The current row is already tinted, so its hover deepens that tint rather than\n       replacing it with the neutral highlight — the VMenuItem idiom. */\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-accent-surface),\n      var(--vectis-color-accent-text) 8%\n    );\n  }\n\n  /* A CLOSED branch holding the current page keeps a mark of it, so the reader can see\n     where they are without opening every section. The lookup is deliberately a\n     descendant one: the page may be several levels down. */\n  .v-side-nav-branch:not([open]):has(.v-side-nav-children [aria-current])\n    > .v-side-nav-row:not([data-active]) {\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, the second line and the chevron default to a colour DARKER than the one\n     a disabled label takes: left alone they would come out stronger than the label\n     itself, so they inherit it instead. */\n  .v-side-nav-row[data-disabled] .v-side-nav-icon,\n  .v-side-nav-row[data-disabled] .v-side-nav-sublabel,\n  .v-side-nav-row[data-disabled] .v-side-nav-chevron {\n    color: inherit;\n  }\n\n  /* The opening animates in pure CSS, on the box the browser wraps a branch's content\n     in. A browser without support opens the branch instantly, which is the intended\n     fallback. */\n  .v-side-nav-branch::details-content {\n    block-size: 0;\n    overflow: clip;\n    transition:\n      block-size var(--vectis-duration-base) var(--vectis-ease-default),\n      content-visibility var(--vectis-duration-base) allow-discrete;\n  }\n\n  .v-side-nav-branch[open]::details-content {\n    block-size: auto;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-side-nav-chevron,\n    .v-side-nav-branch::details-content {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

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

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

@@ -0,0 +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\">\nimport { computed, inject, provide, 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 { useRootAttrs } from '../../composables/useRootAttrs'\n\n/**\n * One row of a sidebar navigation. It takes one of two shapes, depending on whether it\n * was given subitems, and the difference runs deeper than it looks.\n *\n * A BRANCH is a native disclosure element, so its open state, the keyboard that\n * toggles it, the closing of a neighbouring section and the animation all come from\n * the browser. Its row IS the header of that element, which must contain everything\n * shown on the line — the `#end` slot included, which is why a click there has to be\n * cancelled: otherwise anything put in it would fold the branch. The consequence,\n * documented for integrators, is that only NON-focusable content belongs there — a\n * badge, a counter. A control inside would be a control nested inside another, and the\n * header's whole subtree also serves as its name for assistive technology, which some\n * screen readers flatten into one string.\n *\n * A LEAF is the opposite arrangement: the row is a plain container, and the link is\n * stretched over it invisibly so the entire row is clickable. The `#end` slot then\n * stays a SIBLING of that link rather than sitting inside it, which keeps a real\n * control there legitimate.\n */\ninterface SideNavigationItemProps {\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 `#start` 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.\n   */\n  active?: boolean\n  /**\n   * Makes the row unusable: it greys out through the colour tokens and leaves the\n   * keyboard path.\n   */\n  disabled?: boolean\n  /**\n   * Renders a branch already open. It sets the initial state only; the browser owns it\n   * from then on.\n   */\n  defaultOpen?: boolean\n}\n\n// The root element is a list item, which is structure and not the control. Without\n// redirecting them, `target`, `rel`, `download` and the aria-* would land on that list\n// item instead of on the link or the branch header.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<SideNavigationItemProps>(), {\n  sublabel: undefined,\n  icon: undefined,\n  href: undefined,\n  active: false,\n  disabled: false,\n  defaultOpen: false,\n})\n\n/**\n * Whether the branch is open, when the consumer wants to drive or observe it.\n *\n * Left unbound, the browser keeps that state entirely to itself, `defaultOpen` giving\n * only the initial value: the bound value never changes, so Vue never patches the\n * element back, and the native toggling stays sovereign.\n *\n * TRAP — \"not bound\" is written as `null` and not `undefined`. A model typed as a\n * plain boolean is declared as such at runtime, and Vue casts an ABSENT boolean prop\n * to `false`, which would silently overwrite `defaultOpen` on every branch. Giving it\n * an explicit default disarms that cast.\n */\nconst open = defineModel<boolean | null>('open', { default: null })\n\nconst emit = defineEmits<{\n  /**\n   * A row WITHOUT subitems was activated, by click or by keyboard.\n   *\n   * TRAP — never declare a `click` emit alongside it. Vue removes a declared event\n   * from the forwarded attributes, and a consumer's own `@click` would then stop\n   * reaching the link entirely.\n   */\n  select: []\n}>()\n\ndefineSlots<{\n  /** The label of the row. It is REQUIRED: a navigation row must say where it goes. */\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  start?(): unknown\n  /**\n   * Free content at the end of the row, before the chevron — a counter, a badge. On a\n   * BRANCH it must not be focusable (see the introduction).\n   */\n  end?(): unknown\n  /** The subitems, which turn this row into a branch. Nesting is not limited. */\n  items?(): unknown\n}>()\n\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst slots = useSlots()\n/**\n * Whether this row has subitems, read from the mere PRESENCE of the slot — the same\n * device VMenuItem and VTabs use. The answer is the same on the server and in the\n * browser, so there is no registry to fill in and no hydration mismatch.\n *\n * The trade-off is that a slot present but empty still makes the row a branch, chevron\n * included, over an empty list.\n */\nconst hasChildren = computed(() => !!slots.items)\nconst tag = computed(() =>\n  !hasChildren.value && props.href !== undefined ? ('a' as const) : ('button' as const),\n)\n\nconst parent = inject(sideNavigationKey, null)\n\n/**\n * Both chevrons are chosen on the navigation as a whole. The fallback is what keeps an\n * item rendering correctly when it is used outside one.\n */\nconst expandIcon = computed(() => parent?.expandIcon ?? expandMoreIcon)\nconst collapseIcon = computed(() => parent?.collapseIcon)\n\n// The name shared by THIS row's children. It is minted afresh at every level, and that\n// is what keeps \"one section open at a time\" local to a level instead of applying\n// across the whole document.\nconst childrenName = useId()\n\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 = computed(() => (open.value ?? props.defaultOpen) || undefined)\n\n// The element is the source of truth and the model is fed BY it, never the other way\n// round. The event it fires does not bubble, which is convenient here: listening on\n// the element itself cannot pick up a nested branch opening inside it.\nfunction onToggle(event: Event) {\n  const value = (event.target as HTMLDetailsElement).open\n  if (open.value !== value) open.value = value\n}\n\nconst ariaCurrent = computed(() =>\n  props.active ? (tag.value === 'a' && !hasChildren.value ? 'page' : 'true') : undefined,\n)\n\n/*\n * A branch header has no `disabled` attribute of its own, so cancelling the click is\n * the only way to stop it from folding. The keyboard needs nothing here: taking the\n * header out of the tab order already covers it.\n *\n * The same solution as VAccordionItem, and deliberately not `pointer-events: none`,\n * which would also remove the forbidden cursor telling the reader why nothing happens.\n */\nfunction onSummaryClick(event: MouseEvent) {\n  if (props.disabled) event.preventDefault()\n}\n\n/*\n * A branch's end slot sits INSIDE the header, so a click there would fold the branch.\n * Stopping the event from travelling would not help: folding is not a listener anyone\n * registered, it is the click's DEFAULT action, and only cancelling that prevents it.\n *\n * The exception is a click that already landed on something activable. There the click\n * belongs to that control, the branch is not concerned, and cancelling the default\n * would break its own behaviour — a link would stop navigating. The same filter as in\n * `useFieldPanel`, for the same reason.\n */\nfunction onEndClick(event: MouseEvent) {\n  const target = event.target as Element | null\n  if (!target?.closest('button, a, input, select, textarea, [tabindex]')) event.preventDefault()\n}\n\nfunction onActionClick(event: MouseEvent) {\n  // A disabled button never receives the click at all; a link made inert by hand does,\n  // so it is cancelled here.\n  if (props.disabled) {\n    event.preventDefault()\n    return\n  }\n  emit('select')\n}\n</script>\n\n<template>\n  <li class=\"v-side-nav-item\" :class=\"rootClass\" :style=\"rootStyle\">\n    <details\n      v-if=\"hasChildren\"\n      class=\"v-side-nav-branch\"\n      :name=\"parent?.name\"\n      :open=\"openAttr\"\n      :data-swap=\"collapseIcon ? '' : undefined\"\n      @toggle=\"onToggle\"\n    >\n      <summary\n        v-bind=\"forwardedAttrs\"\n        class=\"v-side-nav-row\"\n        :data-active=\"active ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        :aria-current=\"ariaCurrent\"\n        :aria-disabled=\"disabled || undefined\"\n        :tabindex=\"disabled ? -1 : undefined\"\n        @click=\"onSummaryClick\"\n      >\n        <slot name=\"start\">\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\"><slot /></span>\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-bind=\"iconProps(expandIcon)\" />\n        <!-- Both chevrons are always in the DOM; the open state decides which one\n             shows, in CSS alone — the VAccordion idiom -->\n        <VIcon\n          v-if=\"collapseIcon\"\n          class=\"v-side-nav-chevron v-side-nav-chevron-open\"\n          v-bind=\"iconProps(collapseIcon)\"\n        />\n      </summary>\n      <ul class=\"v-side-nav-children\">\n        <slot name=\"items\" />\n      </ul>\n    </details>\n\n    <div\n      v-else\n      class=\"v-side-nav-row\"\n      :data-active=\"active ? '' : undefined\"\n      :data-disabled=\"disabled ? '' : undefined\"\n    >\n      <component\n        :is=\"tag\"\n        v-bind=\"forwardedAttrs\"\n        class=\"v-side-nav-action\"\n        :type=\"tag === 'button' ? 'button' : undefined\"\n        :disabled=\"tag === 'button' ? disabled : undefined\"\n        :href=\"tag === 'a' && !disabled ? href : undefined\"\n        :aria-disabled=\"tag === 'a' && disabled ? 'true' : undefined\"\n        :aria-current=\"ariaCurrent\"\n        @click=\"onActionClick\"\n      >\n        <slot name=\"start\">\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\"><slot /></span>\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   * How deep an item sits, counted entirely in CSS: no registry, nothing provided down\n   * the tree, no inline style, and no `level` prop for the consumer to keep track of.\n   * The markup gives two elements per level — the item, then the list of its children —\n   * and each of them reads a name the other DECLARES.\n   *\n   * TRAP — the obvious one-name form, incrementing a variable by reading itself, is a\n   * CYCLE as far as CSS is concerned, even though the value being read is the inherited\n   * one. The property then falls to invalid, every read falls back to zero, and the\n   * whole tree renders FLAT — with nothing in the console to say why. The two\n   * alternating names are what avoid it.\n   */\n  .v-side-nav-item {\n    --side-nav-parent-level: var(--side-nav-level, 0);\n  }\n\n  .v-side-nav-children {\n    --side-nav-level: calc(var(--side-nav-parent-level) + 1);\n  }\n\n  .v-side-nav-branch {\n    /* Lets a long label wrap rather than widening the whole sidebar. The folding\n       animation itself is further down. */\n    min-inline-size: 0;\n  }\n\n  .v-side-nav-row {\n    /*\n     * Every dimension comes from the variables the nav sets and this row inherits — it\n     * is the only element carrying the shared size class. The icons follow with nothing\n     * written for them, their own variables belonging to that same block.\n     *\n     * The type is composite, as in a menu row: the SIZE comes from the scale, but the\n     * line height stays that of body text — a unitless ratio, so it still follows the\n     * size — and the weight stays regular. The full `control` type role would suit a\n     * single-line label, and a navigation row may wrap and carry a second line.\n     *\n     * TRAP — the indent is computed HERE and not stored in a variable set higher up. A\n     * custom property is substituted on the element that DECLARES it, so a padding\n     * computed on the nav would be frozen at level zero for the whole tree.\n     */\n    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(--vectis-radius-sm);\n    color: var(--vectis-color-text);\n    font-size: var(--control-font-size);\n    line-height: var(--vectis-text-body-md-leading);\n    list-style: none;\n    cursor: pointer;\n  }\n\n  /* Removing the browser's own disclosure triangle: setting the list style is not\n     enough in WebKit, which draws it through this pseudo-element. */\n  .v-side-nav-row::-webkit-details-marker {\n    display: none;\n  }\n\n  .v-side-nav-action {\n    /* On a leaf the link is a CHILD of the row, and the indent deliberately stays on\n       the row itself: what has to run the full width is the hover background, not the\n       link inside it. */\n    flex: 1;\n    min-inline-size: 0;\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: inherit;\n    font-family: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    text-align: start;\n    text-decoration: none;\n    cursor: inherit;\n  }\n\n  /*\n   * This is what stretches the link over the WHOLE row without having to wrap the end\n   * slot inside it. It is an invisible box, positioned, so it is painted above the\n   * chevron — which is not positioned — while passing UNDER the end slot, which is\n   * positioned too and comes later in the document. That layering is exactly what\n   * makes the whole row clickable while leaving a control in the end slot usable.\n   */\n  .v-side-nav-action::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: var(--vectis-radius-sm);\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  /* The chevron points down when the branch is closed and flips when it opens. It\n     turns around a horizontal axis, so unlike VMenu's sideways chevron it needs no\n     mirroring in a right-to-left page. */\n  .v-side-nav-chevron {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n    transition: rotate var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-side-nav-branch[open]:not([data-swap]) > .v-side-nav-row > .v-side-nav-chevron {\n    rotate: 180deg;\n  }\n\n  /* When the navigation supplied a second chevron, each state hides one of the two\n     rendered icons instead of rotating a single one. */\n  .v-side-nav-branch[data-swap][open]\n    > .v-side-nav-row\n    > .v-side-nav-chevron:not(.v-side-nav-chevron-open),\n  .v-side-nav-branch[data-swap]:not([open]) > .v-side-nav-row > .v-side-nav-chevron-open {\n    display: none;\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(var(--vectis-focus-ring-offset) * -1);\n  }\n\n  .v-side-nav-action:focus-visible {\n    outline: none;\n  }\n\n  /* The row of the page currently being viewed. */\n  .v-side-nav-row[data-active] {\n    background: var(--vectis-color-accent-surface);\n    color: var(--vectis-color-accent-text);\n  }\n\n  .v-side-nav-row[data-active] .v-side-nav-label {\n    font-weight: var(--vectis-text-label-weight);\n  }\n\n  .v-side-nav-row[data-active] .v-side-nav-icon,\n  .v-side-nav-row[data-active] .v-side-nav-sublabel,\n  .v-side-nav-row[data-active] .v-side-nav-chevron {\n    color: inherit;\n  }\n\n  .v-side-nav-row[data-active]:hover {\n    /* The current row is already tinted, so its hover deepens that tint rather than\n       replacing it with the neutral highlight — the VMenuItem idiom. */\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-accent-surface),\n      var(--vectis-color-accent-text) 8%\n    );\n  }\n\n  /* A CLOSED branch holding the current page keeps a mark of it, so the reader can see\n     where they are without opening every section. The lookup is deliberately a\n     descendant one: the page may be several levels down. */\n  .v-side-nav-branch:not([open]):has(.v-side-nav-children [aria-current])\n    > .v-side-nav-row:not([data-active]) {\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, the second line and the chevron default to a colour DARKER than the one\n     a disabled label takes: left alone they would come out stronger than the label\n     itself, so they inherit it instead. */\n  .v-side-nav-row[data-disabled] .v-side-nav-icon,\n  .v-side-nav-row[data-disabled] .v-side-nav-sublabel,\n  .v-side-nav-row[data-disabled] .v-side-nav-chevron {\n    color: inherit;\n  }\n\n  /* The opening animates in pure CSS, on the box the browser wraps a branch's content\n     in. A browser without support opens the branch instantly, which is the intended\n     fallback. */\n  .v-side-nav-branch::details-content {\n    block-size: 0;\n    overflow: clip;\n    transition:\n      block-size var(--vectis-duration-base) var(--vectis-ease-default),\n      content-visibility var(--vectis-duration-base) allow-discrete;\n  }\n\n  .v-side-nav-branch[open]::details-content {\n    block-size: auto;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-side-nav-chevron,\n    .v-side-nav-branch::details-content {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VSideNavigation/VSideNavigationSeparator.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-side-nav-separator{margin-block:var(--vectis-space-2);margin-inline:var(--control-padding-inline);border-block-start:1px solid var(--vectis-color-border);flex:none}}

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VSideNavigation/VSideNavigationSeparator.js

@@ -0,0 +1,17 @@
+import './VSideNavigationSeparator.css';
+/* empty css                                                         */
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import { createElementBlock as t, openBlock as n } from "vue";
+//#region src/components/VSideNavigation/VSideNavigationSeparator.vue
+var r = {}, i = {
+	class: "v-side-nav-separator",
+	"aria-hidden": "true"
+};
+function a(e, r) {
+	return n(), t("li", i);
+}
+var o = /*#__PURE__*/ e(r, [["render", a]]);
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=VSideNavigationSeparator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VSideNavigationSeparator.js","names":[],"sources":["../../../src/components/VSideNavigation/VSideNavigationSeparator.vue"],"sourcesContent":["<template>\n  <!-- A list item and not a horizontal rule, because a list may own nothing but list\n       items — and ARIA is stricter still, admitting only list items, so even giving\n       this one a separator role would be rejected.\n\n       So it is a plain list item, and a DECORATIVE one: the line is a visual break\n       between sections, where real grouping is what VSideNavigationGroup provides.\n       Hiding it from assistive technology is what keeps it OUT of the item count,\n       instead of announcing an empty entry in the middle of the navigation. -->\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":";;;;;CASM,OAAM;CAAuB,eAAY;;;aAA7C,EAAsD,MAAtD,CAAsD"}

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

@@ -0,0 +1,37 @@
+import { InjectionKey } from 'vue';
+import { IconSource } from '../VIcon/types.js';
+/**
+ * What each level of a VSideNavigation passes down to the level below it. An item
+ * reads the context of ITS level and provides a fresh one to its own children, and
+ * that renewal is precisely what keeps "only one section open at a time" local to a
+ * level rather than global to the whole sidebar.
+ *
+ * Two things deliberately do NOT travel through here:
+ *
+ * - the size and the density, which the CSS variables carry by inheritance from the
+ *   nav down; passing them here as well would be the same information in two places,
+ *   free to disagree;
+ * - the DEPTH of an item, which is counted by the cascade itself (see the alternating
+ *   variables in VSideNavigationItem) — no registry, and no inline style.
+ */
+export interface SideNavigationContext {
+    /**
+     * The name shared by the collapsible sections of this level. Sections that share one
+     * close each other, which the browser does entirely on its own. Nothing here means
+     * several may stay open at once.
+     */
+    name: string | undefined;
+    /**
+     * Whether the sidebar was asked for one-at-a-time behaviour. It is passed down so
+     * that each level can mint a name of its own.
+     */
+    exclusive: boolean;
+    /** The chevron of a closed section: an icon name, or an explicit render. */
+    expandIcon: IconSource;
+    /**
+     * The chevron of an open section. Nothing here means the closed one is simply
+     * rotated.
+     */
+    collapseIcon: IconSource | undefined;
+}
+export declare const sideNavigationKey: InjectionKey<SideNavigationContext>;

package/dist/components/VSideNavigation/context.js

@@ -0,0 +1,6 @@
+//#region src/components/VSideNavigation/context.ts
+var e = Symbol("v-side-navigation");
+//#endregion
+export { e as sideNavigationKey };
+
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/VSideNavigation/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\n\nimport type { IconSource } from '../VIcon/types'\n\n/**\n * What each level of a VSideNavigation passes down to the level below it. An item\n * reads the context of ITS level and provides a fresh one to its own children, and\n * that renewal is precisely what keeps \"only one section open at a time\" local to a\n * level rather than global to the whole sidebar.\n *\n * Two things deliberately do NOT travel through here:\n *\n * - the size and the density, which the CSS variables carry by inheritance from the\n *   nav down; passing them here as well would be the same information in two places,\n *   free to disagree;\n * - the DEPTH of an item, which is counted by the cascade itself (see the alternating\n *   variables in VSideNavigationItem) — no registry, and no inline style.\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":";AAuCA,IAAa,IAAyD,OAAO,mBAAmB"}

package/dist/components/VSkeletonLoader/VSkeletonLoader.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-skeleton{--skeleton-base:var(--vectis-color-surface-skeleton);--skeleton-highlight:oklch(from var(--skeleton-base) calc(l + .06) c h);--skeleton-h:var(--control-height);--skeleton-radius:var(--vectis-radius-interactive);--skeleton-gap:var(--vectis-space-2);gap:var(--skeleton-gap);flex-direction:column;display:flex}.v-skeleton[data-custom]{--skeleton-base:var(--custom-color)}.v-skeleton-item{inline-size:var(--skeleton-w,100%);block-size:var(--skeleton-h);border-radius:var(--skeleton-radius);background:var(--skeleton-base);flex:auto;position:relative;overflow:clip}.v-skeleton[data-shape=text]{--skeleton-h:1em;--skeleton-radius:var(--vectis-radius-pill);--skeleton-gap:max(0px, calc(1lh - 1em));padding-block:calc(max(0px,1lh - 1em)/2)}.v-skeleton[data-shape=text] .v-skeleton-item{flex:none}.v-skeleton[data-shape=text] .v-skeleton-item+.v-skeleton-item:last-child{--skeleton-last-line:.6;inline-size:calc(var(--skeleton-w,100%) * var(--skeleton-last-line))}.v-skeleton[data-shape=pill]{--skeleton-radius:var(--vectis-radius-pill)}.v-skeleton[data-shape=circle]{--skeleton-radius:var(--vectis-radius-pill);align-items:start;display:inline-flex}.v-skeleton[data-shape=circle] .v-skeleton-item{inline-size:var(--skeleton-w,auto);aspect-ratio:1}.v-skeleton[data-shape=surface]{--skeleton-h:var(--vectis-control-size-skeleton-surface);--skeleton-radius:var(--vectis-radius-surface)}.v-skeleton[data-animation=pulse] .v-skeleton-item:after{content:"";background-color:var(--skeleton-highlight);animation:v-skeleton-pulse var(--vectis-duration-1500) var(--vectis-ease-in-out) infinite;position:absolute;inset:0}.v-skeleton[data-animation=wave] .v-skeleton-item:after{content:"";background-image:linear-gradient(90deg, transparent, var(--skeleton-highlight), transparent);animation:v-skeleton-wave var(--vectis-duration-1500) linear infinite;position:absolute;inset:0}.v-skeleton[data-animation=wave]:dir(rtl) .v-skeleton-item:after{animation-direction:reverse}@keyframes v-skeleton-pulse{0%,to{opacity:0}50%{opacity:1}}@keyframes v-skeleton-wave{0%{translate:-100%}to{translate:100%}}@media (prefers-reduced-motion:reduce){.v-skeleton:is([data-animation=wave],[data-animation=pulse]) .v-skeleton-item:after{background-image:none;background-color:var(--skeleton-highlight);animation:v-skeleton-pulse var(--vectis-duration-5000) var(--vectis-ease-in-out) infinite}}}

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

@@ -0,0 +1,75 @@
+export type SkeletonShape = 'text' | 'control' | 'pill' | 'circle' | 'surface';
+export type SkeletonAnimation = 'wave' | 'pulse' | 'none';
+export type SkeletonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+interface SkeletonLoaderProps {
+    /**
+     * What the silhouette stands for. Each value sets both a corner radius and a way of
+     * being sized:
+     *
+     * - `text` follows the typography around it, so several silhouettes occupy exactly
+     *   as many lines as the text they replace;
+     * - `control` takes the height of a control of the given size — a button, a field;
+     * - `pill` is that same height with fully rounded ends — a chip, a badge;
+     * - `circle` is that height in both dimensions — an avatar, a round icon button;
+     * - `surface` is a card or an image, with a height of its own.
+     */
+    shape?: SkeletonShape;
+    /**
+     * The size on the scale shared by every control. It only means something for the
+     * shapes sized like a control: text follows the typography around it, and a surface
+     * has its own height.
+     */
+    size?: SkeletonSize;
+    /** 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 — `'100%'`, `'12ch'`. Left out, the silhouette takes all the width available.
+     */
+    width?: number | string;
+    /** The height, read the same way. It wins over the shape and the size. */
+    height?: number | string;
+    /**
+     * How many silhouettes to stack. In the text shape the LAST one is drawn shorter
+     * than the others, and that single detail is what reads as a paragraph rather than
+     * as a table.
+     */
+    lines?: number;
+    /**
+     * How the silhouette shows that something is happening. Turning it off freezes it,
+     * which suits printing, a screenshot, or a parent already animating.
+     */
+    animation?: SkeletonAnimation;
+    /**
+     * A background colour of your own, replacing the token. The wave's highlight is
+     * DERIVED from it, so it stays correct with nothing else to set.
+     */
+    color?: string;
+    /**
+     * Announces the loading to screen readers. It is OFF by default, because a skeleton
+     * is decorative: a page holds a dozen of them, and a dozen competing announcements
+     * are unreadable. What should announce the wait is the container around them,
+     * marked as busy.
+     */
+    announce?: boolean;
+    /**
+     * What is announced, which also IMPLIES announcing. Prefer something situated —
+     * "Loading the results" — since a generic word is the reason the default is silence.
+     * It falls back to the design system dictionary.
+     */
+    label?: string;
+}
+declare const __VLS_export: import('vue').DefineComponent<SkeletonLoaderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkeletonLoaderProps> & Readonly<{}>, {
+    label: string;
+    size: SkeletonSize;
+    compact: boolean;
+    shape: SkeletonShape;
+    color: string;
+    width: number | string;
+    height: number | string;
+    lines: number;
+    animation: SkeletonAnimation;
+    announce: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VSkeletonLoader/VSkeletonLoader.js

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