vectis-ui 0.1.0

package/dist/components/VProgressLinear/VProgressLinear.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,74 @@
+import { useMessages as e } from "../../i18n/state.js";
+import { px as t } from "../../utils/css.js";
+import { useProgressValue as n } from "../../composables/useProgressValue.js";
+import { Fragment as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, normalizeStyle as l, openBlock as u, renderSlot as d, toDisplayString as f, unref as p } from "vue";
+//#region src/components/VProgressLinear/VProgressLinear.vue?vue&type=script&setup=true&lang.ts
+var m = [
+	"aria-label",
+	"data-tone",
+	"data-custom",
+	"data-shape",
+	"data-orientation",
+	"data-value-position",
+	"data-indeterminate",
+	"aria-valuenow",
+	"aria-valuemax"
+], h = { class: "v-progress-linear-text" }, g = {
+	class: "v-progress-linear-text",
+	"data-on-fill": "",
+	"aria-hidden": "true"
+}, _ = /*@__PURE__*/ c({
+	__name: "VProgressLinear",
+	props: {
+		value: { default: 0 },
+		max: { default: 100 },
+		indeterminate: {
+			type: Boolean,
+			default: !1
+		},
+		tone: { default: "accent" },
+		color: { default: void 0 },
+		thickness: { default: void 0 },
+		shape: { default: "rounded" },
+		showValue: {
+			type: Boolean,
+			default: !1
+		},
+		valuePosition: { default: "center" },
+		orientation: { default: "horizontal" }
+	},
+	setup(c) {
+		let _ = c, v = e(), { clamped: y, fraction: b } = n(() => _.value, () => _.max);
+		return (e, n) => (u(), a("div", {
+			class: "v-progress-linear",
+			role: "progressbar",
+			"aria-label": p(v).progress.label,
+			"data-tone": c.tone,
+			"data-custom": c.color === void 0 ? void 0 : "",
+			"data-shape": c.shape,
+			"data-orientation": c.orientation === "vertical" ? "vertical" : void 0,
+			"data-value-position": c.valuePosition,
+			"data-indeterminate": c.indeterminate ? "" : void 0,
+			"aria-valuenow": c.indeterminate ? void 0 : p(y),
+			"aria-valuemin": "0",
+			"aria-valuemax": c.max,
+			style: l({
+				"--fill-fraction": String(p(b)),
+				"--custom-color": c.color,
+				"--progress-thickness": p(t)(c.thickness)
+			})
+		}, [n[0] ||= o("span", { class: "v-progress-linear-fill" }, null, -1), !c.indeterminate && (c.showValue || e.$slots.default) ? (u(), a(r, { key: 0 }, [o("span", h, [d(e.$slots, "default", {
+			value: p(y),
+			max: c.max,
+			percent: p(b) * 100
+		}, () => [s(f(p(v).progress.percent(Math.round(p(b) * 100))), 1)])]), o("span", g, [d(e.$slots, "default", {
+			value: p(y),
+			max: c.max,
+			percent: p(b) * 100
+		}, () => [s(f(p(v).progress.percent(Math.round(p(b) * 100))), 1)])])], 64)) : i("", !0)], 12, m));
+	}
+});
+//#endregion
+export { _ as default };
+
+//# sourceMappingURL=VProgressLinear.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VProgressLinear.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VProgressLinear/VProgressLinear.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core — no behavioural JS at all: value normalization and the display string.\n/**\n * A bar filling up as something progresses. The element rendered IS the track, and the\n * whole geometry follows from a single number set on it — the fraction filled, with no\n * unit. Everything is written in logical properties, so turning the bar vertical needs\n * nothing but a change of writing direction.\n *\n * There is no behavioural JavaScript: the value is clamped and a percentage is\n * formatted, and that is all.\n *\n * On naming: pass an `aria-label` saying what is progressing. The text shown inside the\n * bar cannot serve as that name — the role a progress bar carries makes its content\n * presentational, so screen readers do not announce it.\n */\nimport { useProgressValue } from '../../composables/useProgressValue'\nimport { useMessages } from '../../i18n/state'\nimport { px } from '../../utils/css'\n\ninterface ProgressLinearProps {\n  /** How far along it is. Anything outside the range is brought back into it. */\n  value?: number\n  /** What counts as finished. The other end is always zero. */\n  max?: number\n  /**\n   * Says that the progress cannot be measured: the bar animates continuously and the\n   * value is ignored. It is what to use while waiting for a server that reports no\n   * percentage.\n   */\n  indeterminate?: boolean\n  /** What the progress means, expressed as a colour. */\n  tone?: 'accent' | 'success' | 'warning' | 'danger' | 'neutral'\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. The\n   * track's own shade is derived from it against the theme, so it follows the light and\n   * the dark one.\n   */\n  color?: string\n  /**\n   * How thick the bar is, always IN PIXELS: `12` and `'12'` both give 12px. It is 4px\n   * by default — bear in mind that showing text inside a bar that thin needs an\n   * explicit thickness.\n   */\n  thickness?: number | string\n  /** Whether the ends of the bar are rounded or square. */\n  shape?: 'rounded' | 'square'\n  /**\n   * Writes the percentage inside the bar. It is ignored while the progress is\n   * unmeasurable, there being no figure to write.\n   */\n  showValue?: boolean\n  /**\n   * Where that text sits along the bar. On a vertical bar the start is the zero end,\n   * hence the bottom.\n   */\n  valuePosition?: 'start' | 'center' | 'end'\n  /** Turns the bar upright, filling from the bottom up. */\n  orientation?: 'horizontal' | 'vertical'\n}\n\nconst props = withDefaults(defineProps<ProgressLinearProps>(), {\n  value: 0,\n  max: 100,\n  indeterminate: false,\n  tone: 'accent',\n  color: undefined,\n  thickness: undefined,\n  shape: 'rounded',\n  showValue: false,\n  valuePosition: 'center',\n  orientation: 'horizontal',\n})\n\ndefineSlots<{\n  /**\n   * What to write inside the bar instead of the percentage.\n   *\n   * TRAP — it is rendered TWICE, once over the empty track and once over the filled\n   * part in a colour that contrasts with it, each copy cut at the fill's edge. So\n   * whatever it renders must be pure: anything with a side effect would happen twice.\n   */\n  default?(props: { value: number; max: number; percent: number }): unknown\n}>()\n\n/* The percent sign, and the non-breaking space French puts before it where English puts\n   nothing, are a convention of the language: they belong in the dictionary rather than\n   in this file. Any other format goes through the slot above. */\nconst m = useMessages()\n\nconst { clamped, fraction } = useProgressValue(\n  () => props.value,\n  () => props.max,\n)\n</script>\n\n<template>\n  <div\n    class=\"v-progress-linear\"\n    role=\"progressbar\"\n    :aria-label=\"m.progress.label\"\n    :data-tone=\"tone\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-shape=\"shape\"\n    :data-orientation=\"orientation === 'vertical' ? 'vertical' : undefined\"\n    :data-value-position=\"valuePosition\"\n    :data-indeterminate=\"indeterminate ? '' : undefined\"\n    :aria-valuenow=\"indeterminate ? undefined : clamped\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"max\"\n    :style=\"{\n      '--fill-fraction': String(fraction),\n      '--custom-color': color,\n      '--progress-thickness': px(thickness),\n    }\"\n  >\n    <span class=\"v-progress-linear-fill\" />\n    <!--\n      The same text twice, each copy cut at the fill's edge so that the two complete\n      each other exactly: the first in the ordinary text colour over the empty track,\n      the second over the filled part, coloured to contrast with it. The second is\n      hidden from screen readers, being a duplicate of text already there.\n    -->\n    <template v-if=\"!indeterminate && (showValue || $slots.default)\">\n      <span class=\"v-progress-linear-text\">\n        <slot :value=\"clamped\" :max=\"max\" :percent=\"fraction * 100\">\n          {{ m.progress.percent(Math.round(fraction * 100)) }}\n        </slot>\n      </span>\n      <span class=\"v-progress-linear-text\" data-on-fill aria-hidden=\"true\">\n        <slot :value=\"clamped\" :max=\"max\" :percent=\"fraction * 100\">\n          {{ m.progress.percent(Math.round(fraction * 100)) }}\n        </slot>\n      </span>\n    </template>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The element IS the track, and it takes the whole length available. Sizing it is the\n   * consumer's business, through the parent or through a width of their own — a\n   * consumer's style sits outside our layers and always wins.\n   */\n  .v-progress-linear {\n    --progress-thickness: var(--vectis-control-size-progress-linear-thickness);\n    position: relative;\n    display: block;\n    inline-size: 100%;\n    block-size: var(--progress-thickness);\n    border-radius: var(--vectis-radius-pill);\n    background: var(--progress-track);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n  }\n\n  .v-progress-linear[data-shape='square'] {\n    border-radius: 0;\n  }\n\n  .v-progress-linear-fill {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    inline-size: calc(100% * var(--fill-fraction));\n    border-radius: inherit;\n    background: var(--progress-fill);\n    /*\n     * The fill is animated by changing its LENGTH, which the browser has to lay out\n     * again on every frame. Scaling it would be cheaper, but a scale is physical: it\n     * would have to be undone for the vertical orientation and again for a\n     * right-to-left page, where a logical length simply works.\n     *\n     * The duration and easing are repeated by the clip of the text over the fill, or the\n     * colour boundary would drift away from the fill's own edge for the length of the\n     * transition.\n     */\n    transition: inline-size var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-progress-linear[data-tone='accent'] {\n    --progress-fill: var(--vectis-color-accent);\n    --progress-track: var(--vectis-color-accent-surface);\n    --tone-text-fallback: var(--vectis-color-text-on-accent);\n  }\n\n  .v-progress-linear[data-tone='success'] {\n    --progress-fill: var(--vectis-color-success);\n    --progress-track: var(--vectis-color-success-surface);\n    --tone-text-fallback: var(--vectis-color-text-on-accent);\n  }\n\n  .v-progress-linear[data-tone='danger'] {\n    --progress-fill: var(--vectis-color-danger);\n    --progress-track: var(--vectis-color-danger-surface);\n    --tone-text-fallback: var(--vectis-color-text-on-accent);\n  }\n\n  .v-progress-linear[data-tone='warning'] {\n    --progress-fill: var(--vectis-color-warning);\n    --progress-track: var(--vectis-color-warning-surface);\n    /* White does not reach the required contrast on amber, so this tone has a text\n       colour of its own. */\n    --tone-text-fallback: var(--vectis-color-text-on-warning);\n  }\n\n  /* The neutral tone inverts text and surface rather than using a mid grey, which would\n     be unreadable in one theme or the other. */\n  .v-progress-linear[data-tone='neutral'] {\n    --progress-fill: var(--vectis-color-text);\n    --progress-track: var(--vectis-color-surface-muted);\n    --tone-text-fallback: var(--vectis-color-surface);\n  }\n\n  /* Placed after the tones on purpose: the specificity is the same, so it is the order\n     that lets a custom colour override the tone it replaces. */\n  .v-progress-linear[data-custom] {\n    --progress-fill: var(--custom-color);\n    --progress-track: color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 85%);\n    --tone-text-fallback: var(--vectis-color-text-on-accent);\n  }\n\n  /* The text inside the bar, in two copies laid over the same box — the track's own,\n     which is why a cut expressed as a fraction of it lands exactly on the fill's edge.\n     Bear in mind that the default 4px thickness cannot hold text at all: showing any\n     implies asking for a thicker bar.\n\n     TRAP — the two copies are COMPLEMENTARY and never superimposed: this one is cut OUT\n     of the filled part, the other cut TO it, so every letter is painted exactly once.\n     Removing either clip raises no error and stays invisible for as long as both copies\n     resolve to the SAME colour, which is what happens wherever the adaptive colour\n     function is unsupported. Where it IS supported and the two disagree — black over an\n     accent fill against white text in the dark theme — the copy underneath shows its\n     antialiased edges all around the letters of the one on top, and the label reads as\n     a halo. */\n  .v-progress-linear-text {\n    /* The two insets of the cut: one on the edge the fill grows FROM, one on the edge it\n       grows towards. They are named after those roles rather than after physical sides,\n       so the three geometry rules further down — horizontal, right-to-left, vertical —\n       all read the same pair. This copy cuts on the start side; the one over the fill\n       swaps them. */\n    --progress-clip-start: calc(100% * var(--fill-fraction));\n    --progress-clip-end: -100vmax;\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding-inline: var(--vectis-space-2);\n    color: var(--vectis-color-text);\n    /* The large negative inset on the two sides that do NOT carry the cut is what stops\n       text taller or wider than the bar from being cropped by its own clip. */\n    clip-path: inset(-100vmax var(--progress-clip-end) -100vmax var(--progress-clip-start));\n    /* The same duration and easing as the fill's own length, or the colour boundary\n       would drift away from the fill's edge for the length of the transition. */\n    transition: clip-path var(--vectis-duration-base) var(--vectis-ease-default);\n    /* The bar itself is turned on its side in vertical mode; the text is put back\n       upright here, since a label read sideways is not the point. */\n    writing-mode: horizontal-tb;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  .v-progress-linear[data-value-position='start'] .v-progress-linear-text {\n    justify-content: start;\n  }\n\n  .v-progress-linear[data-value-position='end'] .v-progress-linear-text {\n    justify-content: end;\n  }\n\n  .v-progress-linear-text[data-on-fill] {\n    /* The exact complement of the copy above: the cut moves to the other end of the\n       axis, so the two together cover the whole bar and overlap nowhere. */\n    --progress-clip-start: -100vmax;\n    --progress-clip-end: calc(100% * (1 - var(--fill-fraction)));\n    /* The per-tone fallback colour. The adaptive one cannot simply be written as a\n       second declaration after it: because that declaration contains a var(), a browser\n       with no support does not reject it at parse time — it would win the cascade and\n       only then turn invalid, which resets the colour to inherited and leaves the\n       fallback never applied. The block below is the way round it, being evaluated\n       before any var() substitution. */\n    color: var(--tone-text-fallback);\n  }\n\n  /* Where the adaptive colour function exists, the text picks black or white against\n     whatever colour the fill ended up with. */\n  @supports (color: contrast-color(red)) {\n    .v-progress-linear-text[data-on-fill] {\n      color: contrast-color(var(--progress-fill));\n    }\n  }\n\n  /* In a right-to-left page the fill grows from the right, so the two insets change\n     physical sides — the variables themselves keep their meaning. */\n  .v-progress-linear:dir(rtl) .v-progress-linear-text {\n    clip-path: inset(-100vmax var(--progress-clip-start) -100vmax var(--progress-clip-end));\n  }\n\n  /* Upright, the bar fills from the bottom.\n\n     Changing the writing direction on the element is enough to turn everything: the\n     axis the fill grows along becomes vertical, so the length and the thickness swap\n     places, and both the fill and the animation follow with no rule written twice.\n\n     TRAP — putting zero at the bottom is NOT done by reversing the direction, which\n     would also apply to the text of the two copies: bidirectional reordering would then\n     display \"50 %\" as \"% 50\". The fill is anchored to the far end of the axis instead.\n\n     The length comes from a token because there is nothing to inherit it from: in a\n     parent of automatic height the bar would collapse to nothing. A consumer's own\n     height overrides it, sitting outside our layers. */\n  .v-progress-linear[data-orientation='vertical'] {\n    writing-mode: vertical-lr;\n    inline-size: var(--vectis-control-size-progress-linear-length);\n  }\n\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-fill {\n    inset-inline-start: auto;\n    inset-inline-end: 0;\n  }\n\n  /* The text now stacks along the vertical axis, whose start is the zero end — the\n     bottom of the bar. */\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-text {\n    flex-direction: column-reverse;\n    padding-inline: 0;\n    padding-block: var(--vectis-space-2);\n  }\n\n  /* The cut moves to the vertical axis: the fill rises from the bottom, which is that\n     axis' start. It is therefore the same in both reading directions, which means the\n     right-to-left rule further up has to be neutralized.\n\n     TRAP — the second selector is what neutralizes it, and it is written that way on\n     purpose: it is one step MORE specific than that rule, where the first selector alone\n     would merely tie with it and win by source order — a far more fragile arrangement. */\n  .v-progress-linear[data-orientation='vertical'] .v-progress-linear-text,\n  .v-progress-linear[data-orientation='vertical']:dir(rtl) .v-progress-linear-text {\n    clip-path: inset(var(--progress-clip-end) -100vmax var(--progress-clip-start) -100vmax);\n  }\n\n  /* When the progress cannot be measured, a bar of fixed size crosses the track from\n     just outside one end to just outside the other. At each extreme it is exactly flush\n     with the edge without ever pulling away from it, which is what makes the loop\n     invisible and keeps the track from ever looking empty — no second bar is needed.\n\n     The easing carries the whole impression: a gradual entry, a quick crossing, a damped\n     exit. A linear run, or an asymmetric curve, immediately reads as mechanical.\n\n     The movement is expressed in LOGICAL properties — a position and a size as\n     percentages of the track — rather than as a transform. One definition then serves\n     the horizontal, the vertical and the right-to-left cases, where a transform, being\n     physical, would need its own keyframes per axis and a flip per direction. */\n  .v-progress-linear[data-indeterminate] {\n    overflow: hidden;\n  }\n\n  .v-progress-linear[data-indeterminate] .v-progress-linear-fill {\n    /* The starting position is derived from this size, and the two must stay tied: that\n       is what has the bar begin exactly off the track rather than half on it. */\n    --progress-bar: 40%;\n    /* The anchoring is put back at the start of the axis, vertical case included — where\n       a measurable progress anchors at the far end instead. */\n    inset-inline-start: 0;\n    inset-inline-end: auto;\n    inline-size: var(--progress-bar);\n    /* The transition of a measurable progress has no place here: switching to this mode\n       would otherwise be animated as the bar growing to its new size. */\n    transition: none;\n    animation: v-progress-linear-indeterminate var(--vectis-duration-1500) var(--vectis-ease-in-out)\n      infinite;\n  }\n\n  @keyframes v-progress-linear-indeterminate {\n    from {\n      inset-inline-start: calc(-1 * var(--progress-bar));\n    }\n\n    to {\n      inset-inline-start: 100%;\n    }\n  }\n\n  /* Turned upright, the axis runs downwards, so the bar would travel from the top down —\n     the opposite of a measurable fill, which rises from the bottom. The same keyframes\n     are simply read backwards, which changes nothing else BECAUSE the easing curve is\n     symmetric; an asymmetric one would need a second set of keyframes.\n\n     Nothing is needed for a right-to-left page: the logical inset already follows the\n     reading direction. */\n  .v-progress-linear[data-orientation='vertical'][data-indeterminate] .v-progress-linear-fill {\n    animation-direction: reverse;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-progress-linear-fill,\n    .v-progress-linear-text {\n      transition: none;\n    }\n\n    /* Slowed down and not stopped: a motionless loader no longer says that anything is\n       happening, which is the one thing it exists to say. */\n    .v-progress-linear[data-indeterminate] .v-progress-linear-fill {\n      animation-duration: var(--vectis-duration-5000);\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DA,IAAM,IAAQ,GA2BR,IAAI,EAAY,GAEhB,EAAE,YAAS,gBAAa,QACtB,EAAM,aACN,EAAM,GACd;yBAIE,EAsCM,OAAA;GArCJ,OAAM;GACN,MAAK;GACJ,cAAY,EAAA,CAAA,CAAC,CAAC,SAAS;GACvB,aAAW,EAAA;GACX,eAAa,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,cAAY,EAAA;GACZ,oBAAkB,EAAA,gBAAW,aAAA,aAA+B,KAAA;GAC5D,uBAAqB,EAAA;GACrB,sBAAoB,EAAA,gBAAa,KAAQ,KAAA;GACzC,iBAAe,EAAA,gBAAgB,KAAA,IAAY,EAAA,CAAA;GAC5C,iBAAc;GACb,iBAAe,EAAA;GACf,OAAK,EAAA;uBAA6B,OAAO,EAAA,CAAA,CAAQ;sBAA2B,EAAA;4BAAqC,EAAA,CAAA,CAAE,CAAC,EAAA,SAAS;;eAM9H,EAAuC,QAAA,EAAjC,OAAM,yBAAwB,GAAA,MAAA,EAAA,GAAA,CAOnB,EAAA,kBAAkB,EAAA,aAAaA,EAAAA,OAAO,YAAA,EAAA,GAAvD,EAWW,GAAA,EAAA,KAAA,EAAA,GAAA,CAVT,EAIO,QAJP,GAIO,CAHL,EAEO,EAAA,QAAA,WAAA;GAFA,OAAO,EAAA,CAAA;GAAU,KAAK,EAAA;GAAM,SAAS,EAAA,CAAA,IAAQ;WAE7C,CAAA,EAAA,EADF,EAAA,CAAA,CAAC,CAAC,SAAS,QAAQ,KAAK,MAAM,EAAA,CAAA,IAAQ,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAG7C,EAIO,QAJP,GAIO,CAHL,EAEO,EAAA,QAAA,WAAA;GAFA,OAAO,EAAA,CAAA;GAAU,KAAK,EAAA;GAAM,SAAS,EAAA,CAAA,IAAQ;WAE7C,CAAA,EAAA,EADF,EAAA,CAAA,CAAC,CAAC,SAAS,QAAQ,KAAK,MAAM,EAAA,CAAA,IAAQ,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA,CAAA"}

package/dist/components/VRadio/VRadio.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-radio{align-items:center;gap:var(--vectis-space-2);font-family:var(--vectis-text-family);font-size:var(--vectis-text-label-size);color:var(--vectis-color-text);cursor:pointer;display:inline-flex}.v-radio[data-label-position=start]{flex-direction:row-reverse}.v-radio[data-spread]{justify-content:space-between;display:flex}.v-radio-input{opacity:0;pointer-events:none;width:1px;height:1px;margin:0;position:absolute}.v-radio-dot{width:var(--vectis-control-size-check);height:var(--vectis-control-size-check);background:var(--vectis-color-surface);border:var(--vectis-control-border-width) solid var(--vectis-color-border-strong);border-radius:var(--vectis-radius-full);color:var(--vectis-color-text-on-accent);transition:background-color var(--vectis-duration-fast) var(--vectis-ease-default), border-color var(--vectis-duration-fast) var(--vectis-ease-default);flex:none;place-items:center;display:inline-grid}.v-radio-dot:before{content:"";width:var(--vectis-control-size-check-dot);height:var(--vectis-control-size-check-dot);border-radius:var(--vectis-radius-full);opacity:0;transition:opacity var(--vectis-duration-fast) var(--vectis-ease-default);background:currentColor}.v-radio:hover .v-radio-input:not(:disabled,:checked)+.v-radio-dot{border-color:color-mix(in oklab, var(--vectis-color-border-strong), var(--vectis-color-text) 15%)}.v-radio-input:checked+.v-radio-dot{background:var(--vectis-color-accent);border-color:var(--vectis-color-accent)}.v-radio-input:checked+.v-radio-dot:before{opacity:1}.v-radio:hover .v-radio-input:not(:disabled):checked+.v-radio-dot{background:var(--vectis-color-accent-hover);border-color:var(--vectis-color-accent-hover)}.v-radio-input:focus-visible+.v-radio-dot{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}:is(.v-radio-input:user-invalid+.v-radio-dot,.v-radio-input[aria-invalid=true]+.v-radio-dot){border-color:var(--vectis-color-danger)}.v-radio:has(.v-radio-input:disabled){color:var(--vectis-color-text-subtle);cursor:not-allowed}.v-radio-input:disabled+.v-radio-dot{background:var(--vectis-color-surface-muted);border-color:var(--vectis-color-border);color:var(--vectis-color-text-subtle)}@media (prefers-reduced-motion:reduce){.v-radio-dot,.v-radio-dot:before{transition:none}}}

package/dist/components/VRadio/VRadio.d.ts

@@ -0,0 +1,58 @@
+/**
+ * A radio button whose dot is drawn by the design system, on the same principle as
+ * VCheckbox: the real `<input type="radio">` stays in place and only its own drawing
+ * is hidden.
+ *
+ * The group is native as well. Several VRadio sharing the same `name` and the same
+ * v-model form one choice, and it is the browser that then makes the arrow keys move
+ * between them, that lets only one be selected, and that gives the group a single
+ * stop in the tab order. There is no JavaScript here for any of it.
+ */
+interface RadioProps {
+    /**
+     * What choosing this button means. The group's v-model holds the value of the
+     * selected button, so this is what it becomes when this one is picked.
+     */
+    value: string;
+    /** Which side of the dot the label sits on. */
+    labelPosition?: 'start' | 'end';
+    /**
+     * Pushes the label and the dot to opposite ends of the line, the row taking the
+     * full width available.
+     */
+    spread?: boolean;
+    /**
+     * Marks the field as invalid, which colours the dot and tells assistive technology
+     * so. It is for a rule the browser cannot check by itself.
+     */
+    invalid?: boolean;
+    /** Makes this choice unusable, greyed out through the colour tokens. */
+    disabled?: boolean;
+}
+type __VLS_Props = RadioProps;
+type __VLS_Slots = {
+    /** The label. It is clickable, the whole component being wrapped in a `<label>`. */
+    default?(): unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    invalid: boolean;
+    labelPosition: "start" | "end";
+    spread: 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/VRadio/VRadio.js

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

package/dist/components/VRadio/VRadio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VRadio.js","names":[],"sources":["../../../src/components/VRadio/VRadio.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A radio button whose dot is drawn by the design system, on the same principle as\n * VCheckbox: the real `<input type=\"radio\">` stays in place and only its own drawing\n * is hidden.\n *\n * The group is native as well. Several VRadio sharing the same `name` and the same\n * v-model form one choice, and it is the browser that then makes the arrow keys move\n * between them, that lets only one be selected, and that gives the group a single\n * stop in the tab order. There is no JavaScript here for any of it.\n */\ninterface RadioProps {\n  /**\n   * What choosing this button means. The group's v-model holds the value of the\n   * selected button, so this is what it becomes when this one is picked.\n   */\n  value: string\n  /** Which side of the dot the label sits on. */\n  labelPosition?: 'start' | 'end'\n  /**\n   * Pushes the label and the dot to opposite ends of the line, the row taking the\n   * full width available.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which colours the dot and tells assistive technology\n   * so. It is for a rule the browser cannot check by itself.\n   */\n  invalid?: boolean\n  /** Makes this choice unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n}\n\nwithDefaults(defineProps<RadioProps>(), {\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n})\n\n// @a11y — the component's ONLY behavioural decision, and it buys the whole keyboard.\n// Moving between the buttons of a group is the browser's job, but it only groups\n// inputs that share a `name` — so redirecting the attributes is what makes the arrow\n// keys work at all. The root being the <label>, `name` left on it would reach\n// nothing.\ndefineOptions({ inheritAttrs: false })\n\nconst model = defineModel<string>({ default: '' })\n\ndefineSlots<{\n  /** The label. It is clickable, the whole component being wrapped in a `<label>`. */\n  default?(): unknown\n}>()\n</script>\n\n<template>\n  <label class=\"v-radio\" :data-label-position=\"labelPosition\" :data-spread=\"spread || undefined\">\n    <input\n      v-model=\"model\"\n      type=\"radio\"\n      class=\"v-radio-input\"\n      v-bind=\"$attrs\"\n      :value=\"value\"\n      :disabled=\"disabled\"\n      :aria-invalid=\"invalid || undefined\"\n    />\n    <span class=\"v-radio-dot\" aria-hidden=\"true\" />\n    <span v-if=\"$slots.default\" class=\"v-radio-label\"><slot /></span>\n  </label>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-radio {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-label-size);\n    color: var(--vectis-color-text);\n    cursor: pointer;\n  }\n\n  /* The input is taken out of the flow by its absolute position, so reversing the\n     row only ever swaps the dot and the label. */\n  .v-radio[data-label-position='start'] {\n    flex-direction: row-reverse;\n  }\n\n  .v-radio[data-spread] {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  /* Hidden with `opacity` and never with `display: none`, which would take the input\n     out of the tab order, out of the form and out of its own group. */\n  .v-radio-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* The dot works exactly like VCheckbox's box — the accent colour fills it once the\n     input is checked — with the small inner disc drawn as a pseudo-element in\n     currentcolor, so it follows whatever colour the ring takes. */\n  .v-radio-dot {\n    display: inline-grid;\n    place-items: center;\n    width: var(--vectis-control-size-check);\n    height: var(--vectis-control-size-check);\n    flex: none;\n    background: var(--vectis-color-surface);\n    border: var(--vectis-control-border-width) solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-full);\n    color: var(--vectis-color-text-on-accent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-radio-dot::before {\n    content: '';\n    width: var(--vectis-control-size-check-dot);\n    height: var(--vectis-control-size-check-dot);\n    border-radius: var(--vectis-radius-full);\n    background: currentcolor;\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-radio:hover .v-radio-input:not(:disabled, :checked) + .v-radio-dot {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-radio-input:checked + .v-radio-dot {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-radio-input:checked + .v-radio-dot::before {\n    opacity: 1;\n  }\n\n  .v-radio:hover .v-radio-input:not(:disabled):checked + .v-radio-dot {\n    background: var(--vectis-color-accent-hover);\n    border-color: var(--vectis-color-accent-hover);\n  }\n\n  .v-radio-input:focus-visible + .v-radio-dot {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-radio-input:user-invalid + .v-radio-dot,\n  .v-radio-input[aria-invalid='true'] + .v-radio-dot {\n    border-color: var(--vectis-color-danger);\n  }\n\n  /* A disabled radio greys out through the colour tokens, the same ones VButton\n     uses, and never through opacity. */\n  .v-radio:has(.v-radio-input:disabled) {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-radio-input:disabled + .v-radio-dot {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-radio-dot,\n    .v-radio-dot::before {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VRadio/VRadio.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,60 @@
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, mergeModels as i, mergeProps as a, openBlock as o, renderSlot as s, useModel as c, vModelRadio as l, withDirectives as u } from "vue";
+//#region src/components/VRadio/VRadio.vue?vue&type=script&setup=true&lang.ts
+var d = ["data-label-position", "data-spread"], f = [
+	"value",
+	"disabled",
+	"aria-invalid"
+], p = {
+	key: 0,
+	class: "v-radio-label"
+}, m = /*@__PURE__*/ r({
+	inheritAttrs: !1,
+	__name: "VRadio",
+	props: /*@__PURE__*/ i({
+		value: {},
+		labelPosition: { default: "end" },
+		spread: {
+			type: Boolean,
+			default: !1
+		},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(r) {
+		let i = c(r, "modelValue");
+		return (c, m) => (o(), t("label", {
+			class: "v-radio",
+			"data-label-position": r.labelPosition,
+			"data-spread": r.spread || void 0
+		}, [
+			u(n("input", a({
+				"onUpdate:modelValue": m[0] ||= (e) => i.value = e,
+				type: "radio",
+				class: "v-radio-input"
+			}, c.$attrs, {
+				value: r.value,
+				disabled: r.disabled,
+				"aria-invalid": r.invalid || void 0
+			}), null, 16, f), [[l, i.value]]),
+			m[1] ||= n("span", {
+				class: "v-radio-dot",
+				"aria-hidden": "true"
+			}, null, -1),
+			c.$slots.default ? (o(), t("span", p, [s(c.$slots, "default")])) : e("", !0)
+		], 8, d));
+	}
+});
+//#endregion
+export { m as default };
+
+//# sourceMappingURL=VRadio.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VRadio.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../src/components/VRadio/VRadio.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A radio button whose dot is drawn by the design system, on the same principle as\n * VCheckbox: the real `<input type=\"radio\">` stays in place and only its own drawing\n * is hidden.\n *\n * The group is native as well. Several VRadio sharing the same `name` and the same\n * v-model form one choice, and it is the browser that then makes the arrow keys move\n * between them, that lets only one be selected, and that gives the group a single\n * stop in the tab order. There is no JavaScript here for any of it.\n */\ninterface RadioProps {\n  /**\n   * What choosing this button means. The group's v-model holds the value of the\n   * selected button, so this is what it becomes when this one is picked.\n   */\n  value: string\n  /** Which side of the dot the label sits on. */\n  labelPosition?: 'start' | 'end'\n  /**\n   * Pushes the label and the dot to opposite ends of the line, the row taking the\n   * full width available.\n   */\n  spread?: boolean\n  /**\n   * Marks the field as invalid, which colours the dot and tells assistive technology\n   * so. It is for a rule the browser cannot check by itself.\n   */\n  invalid?: boolean\n  /** Makes this choice unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n}\n\nwithDefaults(defineProps<RadioProps>(), {\n  labelPosition: 'end',\n  spread: false,\n  invalid: false,\n  disabled: false,\n})\n\n// @a11y — the component's ONLY behavioural decision, and it buys the whole keyboard.\n// Moving between the buttons of a group is the browser's job, but it only groups\n// inputs that share a `name` — so redirecting the attributes is what makes the arrow\n// keys work at all. The root being the <label>, `name` left on it would reach\n// nothing.\ndefineOptions({ inheritAttrs: false })\n\nconst model = defineModel<string>({ default: '' })\n\ndefineSlots<{\n  /** The label. It is clickable, the whole component being wrapped in a `<label>`. */\n  default?(): unknown\n}>()\n</script>\n\n<template>\n  <label class=\"v-radio\" :data-label-position=\"labelPosition\" :data-spread=\"spread || undefined\">\n    <input\n      v-model=\"model\"\n      type=\"radio\"\n      class=\"v-radio-input\"\n      v-bind=\"$attrs\"\n      :value=\"value\"\n      :disabled=\"disabled\"\n      :aria-invalid=\"invalid || undefined\"\n    />\n    <span class=\"v-radio-dot\" aria-hidden=\"true\" />\n    <span v-if=\"$slots.default\" class=\"v-radio-label\"><slot /></span>\n  </label>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-radio {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-label-size);\n    color: var(--vectis-color-text);\n    cursor: pointer;\n  }\n\n  /* The input is taken out of the flow by its absolute position, so reversing the\n     row only ever swaps the dot and the label. */\n  .v-radio[data-label-position='start'] {\n    flex-direction: row-reverse;\n  }\n\n  .v-radio[data-spread] {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  /* Hidden with `opacity` and never with `display: none`, which would take the input\n     out of the tab order, out of the form and out of its own group. */\n  .v-radio-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* The dot works exactly like VCheckbox's box — the accent colour fills it once the\n     input is checked — with the small inner disc drawn as a pseudo-element in\n     currentcolor, so it follows whatever colour the ring takes. */\n  .v-radio-dot {\n    display: inline-grid;\n    place-items: center;\n    width: var(--vectis-control-size-check);\n    height: var(--vectis-control-size-check);\n    flex: none;\n    background: var(--vectis-color-surface);\n    border: var(--vectis-control-border-width) solid var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-full);\n    color: var(--vectis-color-text-on-accent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-radio-dot::before {\n    content: '';\n    width: var(--vectis-control-size-check-dot);\n    height: var(--vectis-control-size-check-dot);\n    border-radius: var(--vectis-radius-full);\n    background: currentcolor;\n    opacity: 0;\n    transition: opacity var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-radio:hover .v-radio-input:not(:disabled, :checked) + .v-radio-dot {\n    border-color: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 15%\n    );\n  }\n\n  .v-radio-input:checked + .v-radio-dot {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-radio-input:checked + .v-radio-dot::before {\n    opacity: 1;\n  }\n\n  .v-radio:hover .v-radio-input:not(:disabled):checked + .v-radio-dot {\n    background: var(--vectis-color-accent-hover);\n    border-color: var(--vectis-color-accent-hover);\n  }\n\n  .v-radio-input:focus-visible + .v-radio-dot {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-radio-input:user-invalid + .v-radio-dot,\n  .v-radio-input[aria-invalid='true'] + .v-radio-dot {\n    border-color: var(--vectis-color-danger);\n  }\n\n  /* A disabled radio greys out through the colour tokens, the same ones VButton\n     uses, and never through opacity. */\n  .v-radio:has(.v-radio-input:disabled) {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-radio-input:disabled + .v-radio-dot {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-radio-dot,\n    .v-radio-dot::before {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CA,IAAM,IAAQ,EAAmB,GAAA,YAAgB;yBAS/C,EAYQ,SAAA;GAZD,OAAM;GAAW,uBAAqB,EAAA;GAAgB,eAAa,EAAA,UAAU,KAAA;;KAClF,EAQE,SARF,EAQE;6CAPc,QAAA;IACd,MAAK;IACL,OAAM;MACEA,EAAAA,QAAM;IACb,OAAO,EAAA;IACP,UAAU,EAAA;IACV,gBAAc,EAAA,WAAW,KAAA;0BANjB,EAAA,KAAK,CAAA,CAAA;YAQhB,EAA+C,QAAA;IAAzC,OAAM;IAAc,eAAY;;GAC1BC,EAAAA,OAAO,WAAA,EAAA,GAAnB,EAAiE,QAAjE,GAAiE,CAAf,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}

package/dist/components/VSeparator/VSeparator.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-separator{border:0 solid var(--vectis-color-border);flex:none;margin:0}.v-separator[data-orientation=horizontal]{border-block-start-width:1px}.v-separator[data-orientation=vertical]{border-inline-start-width:1px;align-self:stretch}}

package/dist/components/VSeparator/VSeparator.d.ts

@@ -0,0 +1,23 @@
+/**
+ * A one-pixel rule drawn between two blocks. It renders an `<hr>`, so assistive
+ * technology already knows it is a separator, and the element takes no focus and
+ * appears in no keyboard navigation.
+ *
+ * It carries no content slot and no spacing prop, on purpose. A divider with a label
+ * in the middle is really a heading that happens to have a rule, and the space
+ * around a rule belongs to the layout placing it — the same rule VTypography
+ * follows.
+ */
+interface SeparatorProps {
+    /**
+     * The direction the rule runs in: across by default, or down the page under
+     * `vertical`. A vertical rule needs a height to show: as a flex or grid item it
+     * takes the one of its line, but in ordinary flow the consumer has to set one.
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+declare const __VLS_export: import('vue').DefineComponent<SeparatorProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VSeparator/VSeparator.js

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

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

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

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

@@ -0,0 +1,17 @@
+import { createElementBlock as e, defineComponent as t, openBlock as n } from "vue";
+//#region src/components/VSeparator/VSeparator.vue?vue&type=script&setup=true&lang.ts
+var r = ["data-orientation", "aria-orientation"], i = /*@__PURE__*/ t({
+	__name: "VSeparator",
+	props: { orientation: { default: "horizontal" } },
+	setup(t) {
+		return (i, a) => (n(), e("hr", {
+			class: "v-separator",
+			"data-orientation": t.orientation,
+			"aria-orientation": t.orientation === "vertical" ? "vertical" : void 0
+		}, null, 8, r));
+	}
+});
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=VSeparator.vue_vue_type_script_setup_true_lang.js.map

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

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

package/dist/components/VSideNavigation/VSideNavigation.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-side-nav{--side-nav-indent:calc(var(--vectis-icon-size) + var(--control-gap));font-family:var(--vectis-text-family);interpolate-size:allow-keywords}.v-side-nav-list,.v-side-nav-children,.v-side-nav-group-list{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}}

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

@@ -0,0 +1,64 @@
+import { IconSource } from '../VIcon/types.js';
+/**
+ * The navigation of a sidebar: a tree of links, shown in place rather than in a
+ * floating panel, whose branches can be opened and closed. It is written out level by
+ * level with its own subcomponents, never described as a list of data.
+ *
+ * The markup is real lists, where VMenu uses plain containers, and the difference is
+ * meaningful: the menu pattern forbids lists — it admits nothing but commands and
+ * groups — whereas in a navigation the counting and the nesting ARE the information. A
+ * screen reader announcing "list of 4 items, item 2, itself a list of 3" is describing
+ * the site's structure.
+ *
+ * The folding is the browser's: the open state, the keyboard that toggles it, the
+ * exclusivity between neighbouring sections and the animation all come from the native
+ * disclosure elements. The only behavioural JavaScript here is moving the focus with
+ * the arrow keys.
+ */
+interface SideNavigationProps {
+    /**
+     * What screen readers announce for this navigation. A page often has several — a
+     * main one, a sidebar, a footer — and this is what tells them apart. It falls back
+     * to the design system dictionary.
+     */
+    label?: string;
+    /** The height of the rows, 32 or 40 pixels, inherited by every level. */
+    size?: 'sm' | 'md';
+    /**
+     * Takes 4px off the height of every row. It is a density setting and NOT a collapsed
+     * icon-only rail, which this component does not offer.
+     */
+    compact?: boolean;
+    /**
+     * Keeps a single section open at a time WITHIN EACH LEVEL, which the browser does on
+     * its own. It is off by default: a sidebar normally lets several sections stay open.
+     */
+    exclusive?: boolean;
+    /** The chevron of a closed section: an icon name, or an explicit render. */
+    expandIcon?: IconSource;
+    /**
+     * The chevron of an open section. Leave it out and the closed one is simply rotated
+     * by 180°.
+     */
+    collapseIcon?: IconSource;
+}
+type __VLS_Slots = {
+    /** The first level of the tree: items, groups and separators. */
+    default(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<SideNavigationProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SideNavigationProps> & Readonly<{}>, {
+    label: string;
+    size: "sm" | "md";
+    compact: boolean;
+    exclusive: boolean;
+    expandIcon: IconSource;
+    collapseIcon: IconSource;
+}, {}, {}, {}, 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/VSideNavigation.js

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

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

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

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

@@ -0,0 +1,67 @@
+import { useMessages as e } from "../../i18n/state.js";
+import { arrowNavigate as t } from "../../utils/arrowNav.js";
+import { useAriaLabel as n } from "../../composables/useAriaLabel.js";
+import { expand_more as r } from "../VIcon/icons/expand_more.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({
+	__name: "VSideNavigation",
+	props: {
+		label: { default: void 0 },
+		size: { default: "md" },
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		exclusive: {
+			type: Boolean,
+			default: !1
+		},
+		expandIcon: { default: () => r },
+		collapseIcon: { default: void 0 }
+	},
+	setup(r) {
+		let s = r, _ = e(), v = n(() => s.label ?? _.value.sideNavigation.label), y = p();
+		l(i, {
+			get name() {
+				return s.exclusive ? y : void 0;
+			},
+			get exclusive() {
+				return s.exclusive;
+			},
+			get expandIcon() {
+				return s.expandIcon;
+			},
+			get collapseIcon() {
+				return s.collapseIcon;
+			}
+		});
+		let b = u(null);
+		function x(e, t) {
+			for (let n = e, r = e.parentElement; r && n !== t; n = r, r = r.parentElement) if (r.tagName === "DETAILS" && !r.open && n.tagName !== "SUMMARY") return !1;
+			return !0;
+		}
+		function S(e) {
+			let n = b.value;
+			n && t(e, n, [...n.querySelectorAll(g)].filter((e) => x(e, n)), { vertical: !0 });
+		}
+		return (e, t) => (c(), a("nav", {
+			ref_key: "rootEl",
+			ref: b,
+			class: "v-side-nav v-control",
+			"data-size": r.size,
+			"data-compact": r.compact ? "" : void 0,
+			"aria-label": f(v),
+			onKeydown: S
+		}, [o("ul", h, [d(e.$slots, "default")])], 40, m));
+	}
+});
+//#endregion
+export { _ as default };
+
+//# sourceMappingURL=VSideNavigation.vue_vue_type_script_setup_true_lang.js.map

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

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

package/dist/components/VSideNavigation/VSideNavigationGroup.css

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

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

@@ -0,0 +1,33 @@
+/**
+ * A named section of the navigation — "Workspace", "Settings". The name is plain text:
+ * it cannot be focused or clicked, and it names the sublist under it for assistive
+ * technology.
+ *
+ * Unlike a menu group, it does NOT claim to be a group in ARIA terms. Such a role
+ * cannot be a direct child of a list without breaking what that list is allowed to
+ * contain. A NAMED sublist says exactly the same thing in strictly valid HTML — and it
+ * gives a group the same shape as a branch, which is what keeps the styling uniform.
+ *
+ * A group is NOT a level of the hierarchy: it declares neither of the two variables
+ * counting the depth, so that count passes through it untouched and the items inside
+ * are indented as if the group were not there.
+ */
+interface SideNavigationGroupProps {
+    /** The name of the section. The `#label` slot replaces it. */
+    label: string;
+}
+type __VLS_Slots = {
+    /** The items belonging to this section. */
+    default(): unknown;
+    /** A name made of markup, replacing the `label` prop. */
+    label?(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<SideNavigationGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SideNavigationGroupProps> & Readonly<{}>, {}, {}, {}, {}, 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/VSideNavigationGroup.js

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