vectis-ui 0.1.0

package/dist/components/VSnackbar/VSnackbar.d.ts

@@ -0,0 +1,51 @@
+import { SnackbarPlacement } from './state.js';
+/**
+ * Where confirmations appear. It is mounted ONCE, at the root of the application, and
+ * from then on any call to `snackbar()` shows up here.
+ *
+ * A confirmation is the short answer to something the reader has just done — "Message
+ * deleted", "Settings saved" — usually with one button to take it back. That is a
+ * different job from a notification, which reports a state, and the differences are
+ * deliberate rather than a matter of styling: there is only ever ONE bar at a time,
+ * always along the bottom edge, it carries no close cross, and it leaves on its own after
+ * a few seconds. Two of those follow from the same idea: only the LAST thing a reader did
+ * is worth offering to undo, so a queue would hand out buttons about actions already
+ * forgotten, and a cross would ask them to tidy up after a message that tidies itself.
+ *
+ * Because there is only one, this is a single file where the notifications need two: one
+ * container, one card, and no book-keeping to tell several countdowns apart.
+ *
+ * The JavaScript covers three things the platform does not: putting the state and the
+ * container in step, since drawing above the page can only be asked for by calling a
+ * method; the countdown that takes the bar away when its time is up; and holding that
+ * countdown while the reader is resting the pointer on the bar OR has moved the keyboard
+ * into it, so that something disappearing on a clock can be held long enough to read and
+ * to act on (WCAG 2.2.1).
+ */
+interface SnackbarProps {
+    /** Which end of the bottom edge confirmations appear at, unless one of them asks for another. */
+    placement?: SnackbarPlacement;
+    /**
+     * How long a confirmation stays, in milliseconds, unless it asks for something else. A
+     * confirmation given 0 stays until it is replaced or taken away by hand.
+     */
+    duration?: number;
+    /**
+     * What the single action is called, when the confirmation does not name it. It falls
+     * back to the design system dictionary.
+     */
+    actionLabel?: string;
+    /**
+     * What screen readers announce for the confirmation area itself, which is a landmark of
+     * the page. It falls back to the design system dictionary.
+     */
+    label?: string;
+}
+declare const __VLS_export: import('vue').DefineComponent<SnackbarProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SnackbarProps> & Readonly<{}>, {
+    label: string;
+    placement: SnackbarPlacement;
+    duration: number;
+    actionLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VSnackbar/VSnackbar.js

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

package/dist/components/VSnackbar/VSnackbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VSnackbar.js","names":[],"sources":["../../../src/components/VSnackbar/VSnackbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, ref, watch } from 'vue'\n\nimport { usePopover } from '../../composables/usePopover'\nimport { useTimer } from '../../composables/useTimer'\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { current, dismissSnackbar, type SnackbarPlacement } from './state'\n\n// @a11y @core\n/**\n * Where confirmations appear. It is mounted ONCE, at the root of the application, and\n * from then on any call to `snackbar()` shows up here.\n *\n * A confirmation is the short answer to something the reader has just done — \"Message\n * deleted\", \"Settings saved\" — usually with one button to take it back. That is a\n * different job from a notification, which reports a state, and the differences are\n * deliberate rather than a matter of styling: there is only ever ONE bar at a time,\n * always along the bottom edge, it carries no close cross, and it leaves on its own after\n * a few seconds. Two of those follow from the same idea: only the LAST thing a reader did\n * is worth offering to undo, so a queue would hand out buttons about actions already\n * forgotten, and a cross would ask them to tidy up after a message that tidies itself.\n *\n * Because there is only one, this is a single file where the notifications need two: one\n * container, one card, and no book-keeping to tell several countdowns apart.\n *\n * The JavaScript covers three things the platform does not: putting the state and the\n * container in step, since drawing above the page can only be asked for by calling a\n * method; the countdown that takes the bar away when its time is up; and holding that\n * countdown while the reader is resting the pointer on the bar OR has moved the keyboard\n * into it, so that something disappearing on a clock can be held long enough to read and\n * to act on (WCAG 2.2.1).\n */\ninterface SnackbarProps {\n  /** Which end of the bottom edge confirmations appear at, unless one of them asks for another. */\n  placement?: SnackbarPlacement\n  /**\n   * How long a confirmation stays, in milliseconds, unless it asks for something else. A\n   * confirmation given 0 stays until it is replaced or taken away by hand.\n   */\n  duration?: number\n  /**\n   * What the single action is called, when the confirmation does not name it. It falls\n   * back to the design system dictionary.\n   */\n  actionLabel?: string\n  /**\n   * What screen readers announce for the confirmation area itself, which is a landmark of\n   * the page. It falls back to the design system dictionary.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<SnackbarProps>(), {\n  placement: 'bottom-center',\n  /* Shorter than a notification's five seconds. A confirmation is one short sentence\n     about something the reader has just done, so they already know what it says. */\n  duration: 4000,\n  actionLabel: undefined,\n  label: undefined,\n})\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.snackbar.label)\n\nconst item = computed(() => current.value)\nconst placement = computed(() => item.value?.placement ?? props.placement)\n/* A failure interrupts whatever a screen reader is saying; a plain confirmation waits for\n   a pause, the reader having asked for the action it reports. */\nconst role = computed(() => (item.value?.tone === 'danger' ? 'alert' : 'status'))\nconst actionLabel = computed(\n  () => item.value?.actionLabel ?? props.actionLabel ?? m.value.snackbar.action,\n)\nconst icon = computed(() => (item.value?.icon ? iconProps(item.value.icon) : undefined))\n\nconst hostEl = ref<HTMLElement | null>(null)\nconst { syncShown, show, hide } = usePopover(hostEl)\nconst { start, cancel } = useTimer()\n\n/* The reasons to hold the countdown, each set by its own pair of events. They are two\n   separate flags rather than one counter because they can be true at the same time and\n   end independently: a reader tabs to the action button, then moves the mouse over the\n   bar, then moves it away — and the bar must not leave while the button still has focus. */\nlet hovered = false\nlet focused = false\n\nfunction arm() {\n  const bar = item.value\n  if (!bar || hovered || focused) return\n  const duration = bar.duration ?? props.duration\n  /* GUARD, not a default: `useTimer` runs a delay of 0 SYNCHRONOUSLY, which is the design\n     system's convention for \"no deferral at all\". Without this test a confirmation asking\n     to be permanent would be taken away in the same tick it was raised. */\n  if (duration > 0) start(() => dismissSnackbar(bar.id), duration)\n}\n\n// @core\n/**\n * Brings the page into line with the state: it shows the container when there is a\n * confirmation and hides it when there is none, and restarts the countdown from the top.\n *\n * Restarting unconditionally is what makes a replacement correct — the outgoing bar's\n * countdown must not be allowed to take the incoming one away — and it is safe precisely\n * because this runs only when the bar itself changes.\n *\n * It runs once on mount, which is what makes a confirmation raised before this component\n * existed appear all the same, and after that on every change.\n */\nfunction sync() {\n  cancel()\n  // Showing and hiding are safe to call on a container already in that state, the guards\n  // living in the popover plumbing — so there is no need to remember which it is in.\n  if (item.value) show()\n  else hide()\n  arm()\n}\n\n/*\n * Watching the resolved bar covers a change of confirmation AND its disappearance. The\n * `post` timing is load-bearing: the card must already be in the page before its container\n * is told to show itself.\n */\nwatch(item, sync, { flush: 'post' })\n// @ssr — a watcher does not run during the server render, so a confirmation raised before\n// this component mounted would never be picked up. Running the same synchronization on\n// mount is what brings it in.\nonMounted(sync)\n\n// @a11y — WCAG 2.2.1: something that disappears on a clock has to be holdable, or a slow\n// reader simply never finishes it — and here they would also never reach the button.\n/*\n * Resting the pointer on the bar suspends its countdown, and so does moving the keyboard\n * into it. The focus half is what the notifications do not need and this cannot do\n * without: the action is a real button, so a reader tabbing towards it would otherwise\n * watch it vanish from under the focus ring.\n *\n * Any focus counts, not just a keyboard one: a pointer landing on the button is about to\n * run the action anyway, so there is nothing to lose by holding as well.\n *\n * Leaving restarts the countdown from the FULL duration rather than from what was left:\n * simpler, and more generous to the reader who has just interrupted themselves.\n */\nfunction hold(which: 'pointer' | 'focus') {\n  if (which === 'pointer') hovered = true\n  else focused = true\n  cancel()\n}\n\nfunction release(which: 'pointer' | 'focus') {\n  if (which === 'pointer') hovered = false\n  else focused = false\n  arm()\n}\n\n/* The action always takes the bar away: it answers the confirmation, so leaving it on\n   screen would invite the reader to answer it twice. */\nfunction runAction() {\n  const bar = item.value\n  if (!bar) return\n  bar.action?.()\n  dismissSnackbar(bar.id)\n}\n</script>\n\n<template>\n  <div\n    ref=\"hostEl\"\n    class=\"v-overlay v-snackbar-host\"\n    popover=\"manual\"\n    :data-placement=\"placement\"\n    role=\"region\"\n    :aria-label=\"ariaLabel\"\n    @pointerenter=\"hold('pointer')\"\n    @pointerleave=\"release('pointer')\"\n    @focusin=\"hold('focus')\"\n    @focusout=\"release('focus')\"\n    @beforetoggle=\"syncShown\"\n    @toggle=\"syncShown\"\n  >\n    <div\n      v-if=\"item\"\n      :key=\"item.id\"\n      class=\"v-banner v-snackbar v-tone\"\n      :data-tone=\"item.tone\"\n      :role=\"role\"\n    >\n      <VIcon v-if=\"icon\" class=\"v-snackbar-icon\" v-bind=\"icon\" />\n      <p class=\"v-snackbar-message\">{{ item.message }}</p>\n      <VButton\n        v-if=\"item.action\"\n        class=\"v-snackbar-action\"\n        variant=\"ghost\"\n        tone=\"neutral\"\n        size=\"sm\"\n        @click=\"runAction\"\n      >\n        {{ actionLabel }}\n      </VButton>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The fixed positioning and the guard hiding a closed container come from the shared\n     `.v-overlay` class, set on this same element. What stays here is the browser's own\n     popover decoration to undo — its border, its padding, its opaque background. */\n  .v-snackbar-host {\n    margin: 0;\n    border: none;\n    padding: 0;\n    background: transparent;\n    overflow: visible;\n    width: fit-content;\n    bottom: var(--vectis-space-4);\n    /* The direction the bar slides in from, read by `.v-banner` in styles/banner.css.\n       Always positive: this container only ever sits along the bottom edge. */\n    --banner-enter-y: var(--vectis-space-4);\n  }\n\n  /*\n   * These coordinates are deliberately PHYSICAL rather than logical: a confirmation\n   * appears at a place on the screen, and that place does not flip with the reading\n   * direction — the same argument as the notification stacks, and the same as the\n   * operating system's own messages.\n   */\n  .v-snackbar-host[data-placement='bottom-left'] {\n    left: var(--vectis-space-4);\n  }\n\n  .v-snackbar-host[data-placement='bottom-right'] {\n    right: var(--vectis-space-4);\n  }\n\n  .v-snackbar-host[data-placement='bottom-center'] {\n    left: 0;\n    right: 0;\n    margin-inline: auto;\n  }\n\n  /* The container fades in and out. Animating an element that is being added to or removed\n     from the page needs the two `allow-discrete` declarations and the starting values\n     below; a browser missing either simply shows and hides it at once. */\n  .v-snackbar-host {\n    opacity: 1;\n    transition:\n      opacity var(--vectis-duration-base) var(--vectis-ease-default),\n      overlay var(--vectis-duration-base) allow-discrete,\n      display var(--vectis-duration-base) allow-discrete;\n  }\n\n  .v-snackbar-host:not(:popover-open) {\n    opacity: 0;\n  }\n\n  @starting-style {\n    .v-snackbar-host:popover-open {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-snackbar-host {\n      transition: none;\n    }\n  }\n\n  /* The box, the decoration, the typography and the entry motion come from the shared\n     `.v-banner` class set on this same element — the chassis this bar has in common with\n     the notification card, in `styles/banner.css`. What stays here is what the two\n     genuinely differ on: the alignment, the padding, the width, and the tone painting.\n     `--banner-line`, the one-line alignment unit both use, is defined there. */\n  .v-snackbar {\n    /* Centred, where the notification hooks to its first line. A confirmation is ONE\n       short sentence and it carries a real button: on a message that wraps, aligning to\n       the start would park that button in the top corner, away from the text it answers.\n       Centring also puts the icon in the middle, which is what keeps the two ends of the\n       bar reading as one row. */\n    align-items: center;\n    padding-block: var(--vectis-space-3);\n    /* Tighter at the end than at the start: the action button brings padding of its own,\n       and the two together would read as a hole — hence the negative inline margin it\n       pulls back with, rather than a smaller padding declared here. */\n    padding-inline: var(--vectis-space-4);\n    min-inline-size: var(--vectis-control-size-snackbar-min);\n    /* Wide enough for a sentence, never wider than the viewport with the container's own\n       margins deducted. */\n    max-inline-size: min(\n      var(--vectis-control-size-snackbar-max),\n      calc(100vw - 2 * var(--vectis-space-4))\n    );\n  }\n\n  /*\n   * Both tones are painted SOLID, and there is deliberately no soft variant: a\n   * confirmation is a short-lived object laid over arbitrary content, so it has to read at\n   * a glance rather than tint into the page.\n   *\n   * The tone table itself lives in styles/tones.css, in a layer below the components, and\n   * is shared with VButton, VChip and VToast. Neutral needs no override here — its solid\n   * pair IS the design system's canonical text/surface inversion, dark on a light theme\n   * and light on a dark one, which is exactly what a snackbar wants and is why it is\n   * expressed there rather than restated here.\n   */\n  .v-snackbar {\n    background: var(--tone-bg-solid);\n    color: var(--tone-text-solid);\n  }\n\n  /* No alignment margin here, unlike the notification: `align-items: center` above already\n     puts the icon on the row's centre line, and an equal margin on a centred item changes\n     nothing at all — it would be a declaration that does no work. */\n  .v-snackbar-icon {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n  }\n\n  .v-snackbar-message {\n    flex: 1;\n    min-width: 0;\n    /* A message may hold something with nowhere to break — a file name, an identifier —\n       and it has to wrap anyway rather than widen the bar. */\n    overflow-wrap: anywhere;\n  }\n\n  /*\n   * The action is an ordinary neutral ghost button, recoloured by rebinding the very\n   * variables its own tone table reads. These rules win over that table TWICE — they are\n   * more specific AND they sit in a layer above it — so no sheet order can change the\n   * outcome.\n   *\n   * Without the rebind a neutral ghost paints its text `--vectis-color-text`, which is the\n   * very colour the bar's background is: the button would be invisible, in both themes.\n   * The surrounding text colour is the only thing guaranteed to be readable against that\n   * background, whichever of the two tones is showing.\n   *\n   * Not observable in jsdom, which lays nothing out and evaluates no colour: the guard is\n   * the `Tones` play function, which deliberately ends with a bar OPEN so that axe judges\n   * this button. Verified red — without the rule axe reports `color-contrast` on\n   * `.v-snackbar-action`, in both themes.\n   */\n  .v-snackbar .v-snackbar-action[data-tone] {\n    --tone-text-tinted: currentcolor;\n    --tone-bg-soft: color-mix(in oklab, currentcolor, transparent 85%);\n  }\n\n  .v-snackbar-action {\n    /* TRAP — this restates the size the template gives that button, small. The height the\n       button computes for itself lives inside its own subtree, out of reach from here, so\n       the two are written in two places and must be changed together. */\n    --snackbar-action-height: var(--vectis-control-height-sm);\n    /* The button is taller than a line of text, so this margin comes out negative. Under\n       `align-items: center` it ALIGNS nothing — an equal margin does not move a centred\n       item — and its one job is to keep the bar exactly one line tall on a single-line\n       message: without it the row would take the button's height instead, and the bar\n       would grow by the difference for no reason the reader can see. The unit it is\n       measured against is the one-line height `.v-banner` defines. */\n    margin-block: calc((var(--banner-line) - var(--snackbar-action-height)) / 2);\n    /* Kept equal to VToast's close cross, which pulls back by the same amount from the\n       same gutter — see the note there. */\n    margin-inline-end: calc(-1 * var(--vectis-space-2));\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VSnackbar/VSnackbar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,83 @@
+import { useMessages as e } from "../../i18n/state.js";
+import t from "../VIcon/VIcon.js";
+import { usePopover as n } from "../../composables/usePopover.js";
+import { iconProps as r } from "../VIcon/iconProps.js";
+import i from "../VButton/VButton.js";
+import { useAriaLabel as a } from "../../composables/useAriaLabel.js";
+import { useTimer as o } from "../../composables/useTimer.js";
+import { current as s, dismissSnackbar as c } from "./state.js";
+import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, defineComponent as h, mergeProps as g, onMounted as _, openBlock as v, ref as y, toDisplayString as b, unref as x, watch as S, withCtx as C } from "vue";
+//#region src/components/VSnackbar/VSnackbar.vue?vue&type=script&setup=true&lang.ts
+var w = ["data-placement", "aria-label"], T = ["data-tone", "role"], E = { class: "v-snackbar-message" }, D = /*@__PURE__*/ h({
+	__name: "VSnackbar",
+	props: {
+		placement: { default: "bottom-center" },
+		duration: { default: 4e3 },
+		actionLabel: { default: void 0 },
+		label: { default: void 0 }
+	},
+	setup(h) {
+		let D = h, O = e(), k = a(() => D.label ?? O.value.snackbar.label), A = l(() => s.value), j = l(() => A.value?.placement ?? D.placement), M = l(() => A.value?.tone === "danger" ? "alert" : "status"), N = l(() => A.value?.actionLabel ?? D.actionLabel ?? O.value.snackbar.action), P = l(() => A.value?.icon ? r(A.value.icon) : void 0), F = y(null), { syncShown: I, show: L, hide: R } = n(F), { start: z, cancel: B } = o(), V = !1, H = !1;
+		function U() {
+			let e = A.value;
+			if (!e || V || H) return;
+			let t = e.duration ?? D.duration;
+			t > 0 && z(() => c(e.id), t);
+		}
+		function W() {
+			B(), A.value ? L() : R(), U();
+		}
+		S(A, W, { flush: "post" }), _(W);
+		function G(e) {
+			e === "pointer" ? V = !0 : H = !0, B();
+		}
+		function K(e) {
+			e === "pointer" ? V = !1 : H = !1, U();
+		}
+		function q() {
+			let e = A.value;
+			e && (e.action?.(), c(e.id));
+		}
+		return (e, n) => (v(), f("div", {
+			ref_key: "hostEl",
+			ref: F,
+			class: "v-overlay v-snackbar-host",
+			popover: "manual",
+			"data-placement": j.value,
+			role: "region",
+			"aria-label": x(k),
+			onPointerenter: n[0] ||= (e) => G("pointer"),
+			onPointerleave: n[1] ||= (e) => K("pointer"),
+			onFocusin: n[2] ||= (e) => G("focus"),
+			onFocusout: n[3] ||= (e) => K("focus"),
+			onBeforetoggle: n[4] ||= (...e) => x(I) && x(I)(...e),
+			onToggle: n[5] ||= (...e) => x(I) && x(I)(...e)
+		}, [A.value ? (v(), f("div", {
+			key: A.value.id,
+			class: "v-banner v-snackbar v-tone",
+			"data-tone": A.value.tone,
+			role: M.value
+		}, [
+			P.value ? (v(), u(t, g({
+				key: 0,
+				class: "v-snackbar-icon"
+			}, P.value), null, 16)) : d("", !0),
+			p("p", E, b(A.value.message), 1),
+			A.value.action ? (v(), u(i, {
+				key: 1,
+				class: "v-snackbar-action",
+				variant: "ghost",
+				tone: "neutral",
+				size: "sm",
+				onClick: q
+			}, {
+				default: C(() => [m(b(N.value), 1)]),
+				_: 1
+			})) : d("", !0)
+		], 8, T)) : d("", !0)], 40, w));
+	}
+});
+//#endregion
+export { D as default };
+
+//# sourceMappingURL=VSnackbar.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VSnackbar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VSnackbar/VSnackbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, ref, watch } from 'vue'\n\nimport { usePopover } from '../../composables/usePopover'\nimport { useTimer } from '../../composables/useTimer'\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { current, dismissSnackbar, type SnackbarPlacement } from './state'\n\n// @a11y @core\n/**\n * Where confirmations appear. It is mounted ONCE, at the root of the application, and\n * from then on any call to `snackbar()` shows up here.\n *\n * A confirmation is the short answer to something the reader has just done — \"Message\n * deleted\", \"Settings saved\" — usually with one button to take it back. That is a\n * different job from a notification, which reports a state, and the differences are\n * deliberate rather than a matter of styling: there is only ever ONE bar at a time,\n * always along the bottom edge, it carries no close cross, and it leaves on its own after\n * a few seconds. Two of those follow from the same idea: only the LAST thing a reader did\n * is worth offering to undo, so a queue would hand out buttons about actions already\n * forgotten, and a cross would ask them to tidy up after a message that tidies itself.\n *\n * Because there is only one, this is a single file where the notifications need two: one\n * container, one card, and no book-keeping to tell several countdowns apart.\n *\n * The JavaScript covers three things the platform does not: putting the state and the\n * container in step, since drawing above the page can only be asked for by calling a\n * method; the countdown that takes the bar away when its time is up; and holding that\n * countdown while the reader is resting the pointer on the bar OR has moved the keyboard\n * into it, so that something disappearing on a clock can be held long enough to read and\n * to act on (WCAG 2.2.1).\n */\ninterface SnackbarProps {\n  /** Which end of the bottom edge confirmations appear at, unless one of them asks for another. */\n  placement?: SnackbarPlacement\n  /**\n   * How long a confirmation stays, in milliseconds, unless it asks for something else. A\n   * confirmation given 0 stays until it is replaced or taken away by hand.\n   */\n  duration?: number\n  /**\n   * What the single action is called, when the confirmation does not name it. It falls\n   * back to the design system dictionary.\n   */\n  actionLabel?: string\n  /**\n   * What screen readers announce for the confirmation area itself, which is a landmark of\n   * the page. It falls back to the design system dictionary.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<SnackbarProps>(), {\n  placement: 'bottom-center',\n  /* Shorter than a notification's five seconds. A confirmation is one short sentence\n     about something the reader has just done, so they already know what it says. */\n  duration: 4000,\n  actionLabel: undefined,\n  label: undefined,\n})\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.snackbar.label)\n\nconst item = computed(() => current.value)\nconst placement = computed(() => item.value?.placement ?? props.placement)\n/* A failure interrupts whatever a screen reader is saying; a plain confirmation waits for\n   a pause, the reader having asked for the action it reports. */\nconst role = computed(() => (item.value?.tone === 'danger' ? 'alert' : 'status'))\nconst actionLabel = computed(\n  () => item.value?.actionLabel ?? props.actionLabel ?? m.value.snackbar.action,\n)\nconst icon = computed(() => (item.value?.icon ? iconProps(item.value.icon) : undefined))\n\nconst hostEl = ref<HTMLElement | null>(null)\nconst { syncShown, show, hide } = usePopover(hostEl)\nconst { start, cancel } = useTimer()\n\n/* The reasons to hold the countdown, each set by its own pair of events. They are two\n   separate flags rather than one counter because they can be true at the same time and\n   end independently: a reader tabs to the action button, then moves the mouse over the\n   bar, then moves it away — and the bar must not leave while the button still has focus. */\nlet hovered = false\nlet focused = false\n\nfunction arm() {\n  const bar = item.value\n  if (!bar || hovered || focused) return\n  const duration = bar.duration ?? props.duration\n  /* GUARD, not a default: `useTimer` runs a delay of 0 SYNCHRONOUSLY, which is the design\n     system's convention for \"no deferral at all\". Without this test a confirmation asking\n     to be permanent would be taken away in the same tick it was raised. */\n  if (duration > 0) start(() => dismissSnackbar(bar.id), duration)\n}\n\n// @core\n/**\n * Brings the page into line with the state: it shows the container when there is a\n * confirmation and hides it when there is none, and restarts the countdown from the top.\n *\n * Restarting unconditionally is what makes a replacement correct — the outgoing bar's\n * countdown must not be allowed to take the incoming one away — and it is safe precisely\n * because this runs only when the bar itself changes.\n *\n * It runs once on mount, which is what makes a confirmation raised before this component\n * existed appear all the same, and after that on every change.\n */\nfunction sync() {\n  cancel()\n  // Showing and hiding are safe to call on a container already in that state, the guards\n  // living in the popover plumbing — so there is no need to remember which it is in.\n  if (item.value) show()\n  else hide()\n  arm()\n}\n\n/*\n * Watching the resolved bar covers a change of confirmation AND its disappearance. The\n * `post` timing is load-bearing: the card must already be in the page before its container\n * is told to show itself.\n */\nwatch(item, sync, { flush: 'post' })\n// @ssr — a watcher does not run during the server render, so a confirmation raised before\n// this component mounted would never be picked up. Running the same synchronization on\n// mount is what brings it in.\nonMounted(sync)\n\n// @a11y — WCAG 2.2.1: something that disappears on a clock has to be holdable, or a slow\n// reader simply never finishes it — and here they would also never reach the button.\n/*\n * Resting the pointer on the bar suspends its countdown, and so does moving the keyboard\n * into it. The focus half is what the notifications do not need and this cannot do\n * without: the action is a real button, so a reader tabbing towards it would otherwise\n * watch it vanish from under the focus ring.\n *\n * Any focus counts, not just a keyboard one: a pointer landing on the button is about to\n * run the action anyway, so there is nothing to lose by holding as well.\n *\n * Leaving restarts the countdown from the FULL duration rather than from what was left:\n * simpler, and more generous to the reader who has just interrupted themselves.\n */\nfunction hold(which: 'pointer' | 'focus') {\n  if (which === 'pointer') hovered = true\n  else focused = true\n  cancel()\n}\n\nfunction release(which: 'pointer' | 'focus') {\n  if (which === 'pointer') hovered = false\n  else focused = false\n  arm()\n}\n\n/* The action always takes the bar away: it answers the confirmation, so leaving it on\n   screen would invite the reader to answer it twice. */\nfunction runAction() {\n  const bar = item.value\n  if (!bar) return\n  bar.action?.()\n  dismissSnackbar(bar.id)\n}\n</script>\n\n<template>\n  <div\n    ref=\"hostEl\"\n    class=\"v-overlay v-snackbar-host\"\n    popover=\"manual\"\n    :data-placement=\"placement\"\n    role=\"region\"\n    :aria-label=\"ariaLabel\"\n    @pointerenter=\"hold('pointer')\"\n    @pointerleave=\"release('pointer')\"\n    @focusin=\"hold('focus')\"\n    @focusout=\"release('focus')\"\n    @beforetoggle=\"syncShown\"\n    @toggle=\"syncShown\"\n  >\n    <div\n      v-if=\"item\"\n      :key=\"item.id\"\n      class=\"v-banner v-snackbar v-tone\"\n      :data-tone=\"item.tone\"\n      :role=\"role\"\n    >\n      <VIcon v-if=\"icon\" class=\"v-snackbar-icon\" v-bind=\"icon\" />\n      <p class=\"v-snackbar-message\">{{ item.message }}</p>\n      <VButton\n        v-if=\"item.action\"\n        class=\"v-snackbar-action\"\n        variant=\"ghost\"\n        tone=\"neutral\"\n        size=\"sm\"\n        @click=\"runAction\"\n      >\n        {{ actionLabel }}\n      </VButton>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The fixed positioning and the guard hiding a closed container come from the shared\n     `.v-overlay` class, set on this same element. What stays here is the browser's own\n     popover decoration to undo — its border, its padding, its opaque background. */\n  .v-snackbar-host {\n    margin: 0;\n    border: none;\n    padding: 0;\n    background: transparent;\n    overflow: visible;\n    width: fit-content;\n    bottom: var(--vectis-space-4);\n    /* The direction the bar slides in from, read by `.v-banner` in styles/banner.css.\n       Always positive: this container only ever sits along the bottom edge. */\n    --banner-enter-y: var(--vectis-space-4);\n  }\n\n  /*\n   * These coordinates are deliberately PHYSICAL rather than logical: a confirmation\n   * appears at a place on the screen, and that place does not flip with the reading\n   * direction — the same argument as the notification stacks, and the same as the\n   * operating system's own messages.\n   */\n  .v-snackbar-host[data-placement='bottom-left'] {\n    left: var(--vectis-space-4);\n  }\n\n  .v-snackbar-host[data-placement='bottom-right'] {\n    right: var(--vectis-space-4);\n  }\n\n  .v-snackbar-host[data-placement='bottom-center'] {\n    left: 0;\n    right: 0;\n    margin-inline: auto;\n  }\n\n  /* The container fades in and out. Animating an element that is being added to or removed\n     from the page needs the two `allow-discrete` declarations and the starting values\n     below; a browser missing either simply shows and hides it at once. */\n  .v-snackbar-host {\n    opacity: 1;\n    transition:\n      opacity var(--vectis-duration-base) var(--vectis-ease-default),\n      overlay var(--vectis-duration-base) allow-discrete,\n      display var(--vectis-duration-base) allow-discrete;\n  }\n\n  .v-snackbar-host:not(:popover-open) {\n    opacity: 0;\n  }\n\n  @starting-style {\n    .v-snackbar-host:popover-open {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-snackbar-host {\n      transition: none;\n    }\n  }\n\n  /* The box, the decoration, the typography and the entry motion come from the shared\n     `.v-banner` class set on this same element — the chassis this bar has in common with\n     the notification card, in `styles/banner.css`. What stays here is what the two\n     genuinely differ on: the alignment, the padding, the width, and the tone painting.\n     `--banner-line`, the one-line alignment unit both use, is defined there. */\n  .v-snackbar {\n    /* Centred, where the notification hooks to its first line. A confirmation is ONE\n       short sentence and it carries a real button: on a message that wraps, aligning to\n       the start would park that button in the top corner, away from the text it answers.\n       Centring also puts the icon in the middle, which is what keeps the two ends of the\n       bar reading as one row. */\n    align-items: center;\n    padding-block: var(--vectis-space-3);\n    /* Tighter at the end than at the start: the action button brings padding of its own,\n       and the two together would read as a hole — hence the negative inline margin it\n       pulls back with, rather than a smaller padding declared here. */\n    padding-inline: var(--vectis-space-4);\n    min-inline-size: var(--vectis-control-size-snackbar-min);\n    /* Wide enough for a sentence, never wider than the viewport with the container's own\n       margins deducted. */\n    max-inline-size: min(\n      var(--vectis-control-size-snackbar-max),\n      calc(100vw - 2 * var(--vectis-space-4))\n    );\n  }\n\n  /*\n   * Both tones are painted SOLID, and there is deliberately no soft variant: a\n   * confirmation is a short-lived object laid over arbitrary content, so it has to read at\n   * a glance rather than tint into the page.\n   *\n   * The tone table itself lives in styles/tones.css, in a layer below the components, and\n   * is shared with VButton, VChip and VToast. Neutral needs no override here — its solid\n   * pair IS the design system's canonical text/surface inversion, dark on a light theme\n   * and light on a dark one, which is exactly what a snackbar wants and is why it is\n   * expressed there rather than restated here.\n   */\n  .v-snackbar {\n    background: var(--tone-bg-solid);\n    color: var(--tone-text-solid);\n  }\n\n  /* No alignment margin here, unlike the notification: `align-items: center` above already\n     puts the icon on the row's centre line, and an equal margin on a centred item changes\n     nothing at all — it would be a declaration that does no work. */\n  .v-snackbar-icon {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n  }\n\n  .v-snackbar-message {\n    flex: 1;\n    min-width: 0;\n    /* A message may hold something with nowhere to break — a file name, an identifier —\n       and it has to wrap anyway rather than widen the bar. */\n    overflow-wrap: anywhere;\n  }\n\n  /*\n   * The action is an ordinary neutral ghost button, recoloured by rebinding the very\n   * variables its own tone table reads. These rules win over that table TWICE — they are\n   * more specific AND they sit in a layer above it — so no sheet order can change the\n   * outcome.\n   *\n   * Without the rebind a neutral ghost paints its text `--vectis-color-text`, which is the\n   * very colour the bar's background is: the button would be invisible, in both themes.\n   * The surrounding text colour is the only thing guaranteed to be readable against that\n   * background, whichever of the two tones is showing.\n   *\n   * Not observable in jsdom, which lays nothing out and evaluates no colour: the guard is\n   * the `Tones` play function, which deliberately ends with a bar OPEN so that axe judges\n   * this button. Verified red — without the rule axe reports `color-contrast` on\n   * `.v-snackbar-action`, in both themes.\n   */\n  .v-snackbar .v-snackbar-action[data-tone] {\n    --tone-text-tinted: currentcolor;\n    --tone-bg-soft: color-mix(in oklab, currentcolor, transparent 85%);\n  }\n\n  .v-snackbar-action {\n    /* TRAP — this restates the size the template gives that button, small. The height the\n       button computes for itself lives inside its own subtree, out of reach from here, so\n       the two are written in two places and must be changed together. */\n    --snackbar-action-height: var(--vectis-control-height-sm);\n    /* The button is taller than a line of text, so this margin comes out negative. Under\n       `align-items: center` it ALIGNS nothing — an equal margin does not move a centred\n       item — and its one job is to keep the bar exactly one line tall on a single-line\n       message: without it the row would take the button's height instead, and the bar\n       would grow by the difference for no reason the reader can see. The unit it is\n       measured against is the one-line height `.v-banner` defines. */\n    margin-block: calc((var(--banner-line) - var(--snackbar-action-height)) / 2);\n    /* Kept equal to VToast's close cross, which pulls back by the same amount from the\n       same gutter — see the note there. */\n    margin-inline-end: calc(-1 * var(--vectis-space-2));\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAwDA,IAAM,IAAQ,GASR,IAAI,EAAY,GAChB,IAAY,QAAmB,EAAM,SAAS,EAAE,MAAM,SAAS,KAAK,GAEpE,IAAO,QAAe,EAAQ,KAAK,GACnC,IAAY,QAAe,EAAK,OAAO,aAAa,EAAM,SAAS,GAGnE,IAAO,QAAgB,EAAK,OAAO,SAAS,WAAW,UAAU,QAAS,GAC1E,IAAc,QACZ,EAAK,OAAO,eAAe,EAAM,eAAe,EAAE,MAAM,SAAS,MACzE,GACM,IAAO,QAAgB,EAAK,OAAO,OAAO,EAAU,EAAK,MAAM,IAAI,IAAI,KAAA,CAAU,GAEjF,IAAS,EAAwB,IAAI,GACrC,EAAE,cAAW,SAAM,YAAS,EAAW,CAAM,GAC7C,EAAE,UAAO,cAAW,EAAS,GAM/B,IAAU,IACV,IAAU;EAEd,SAAS,IAAM;GACb,IAAM,IAAM,EAAK;GACjB,IAAI,CAAC,KAAO,KAAW,GAAS;GAChC,IAAM,IAAW,EAAI,YAAY,EAAM;GAIvC,AAAI,IAAW,KAAG,QAAY,EAAgB,EAAI,EAAE,GAAG,CAAQ;EACjE;EAcA,SAAS,IAAO;GAMd,AALA,EAAO,GAGH,EAAK,QAAO,EAAK,IAChB,EAAK,GACV,EAAI;EACN;EAWA,AAJA,EAAM,GAAM,GAAM,EAAE,OAAO,OAAO,CAAC,GAInC,EAAU,CAAI;EAgBd,SAAS,EAAK,GAA4B;GAGxC,AAFI,MAAU,YAAW,IAAU,KAC9B,IAAU,IACf,EAAO;EACT;EAEA,SAAS,EAAQ,GAA4B;GAG3C,AAFI,MAAU,YAAW,IAAU,KAC9B,IAAU,IACf,EAAI;EACN;EAIA,SAAS,IAAY;GACnB,IAAM,IAAM,EAAK;GACZ,MACL,EAAI,SAAS,GACb,EAAgB,EAAI,EAAE;EACxB;yBAIE,EAkCM,OAAA;YAjCA;GAAJ,KAAI;GACJ,OAAM;GACN,SAAQ;GACP,kBAAgB,EAAA;GACjB,MAAK;GACJ,cAAY,EAAA,CAAA;GACZ,gBAAY,AAAA,EAAA,QAAA,MAAE,EAAI,SAAA;GAClB,gBAAY,AAAA,EAAA,QAAA,MAAE,EAAO,SAAA;GACrB,WAAO,AAAA,EAAA,QAAA,MAAE,EAAI,OAAA;GACb,YAAQ,AAAA,EAAA,QAAA,MAAE,EAAO,OAAA;GACjB,gBAAY,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACd,UAAM,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;MAGD,EAAA,SAAA,EAAA,GADR,EAmBM,OAAA;GAjBH,KAAK,EAAA,MAAK;GACX,OAAM;GACL,aAAW,EAAA,MAAK;GAChB,MAAM,EAAA;;GAEM,EAAA,SAAA,EAAA,GAAb,EAA2D,GAA3D,EAA2D;;IAAxC,OAAM;MAA0B,EAAA,KAAI,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA;GACvD,EAAoD,KAApD,GAAoD,EAAnB,EAAA,MAAK,OAAO,GAAA,CAAA;GAErC,EAAA,MAAK,UAAA,EAAA,GADb,EASU,GAAA;;IAPR,OAAM;IACN,SAAQ;IACR,MAAK;IACL,MAAK;IACJ,SAAO;;qBAES,CAAA,EAAA,EAAd,EAAA,KAAW,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/VSnackbar/state.d.ts

@@ -0,0 +1,92 @@
+import { IconSource } from '../VIcon/types.js';
+/**
+ * The confirmation bar waiting to be shown. Nothing in HTML covers this, so it is code
+ * by necessity.
+ *
+ * A snackbar confirms an action the reader has just taken and offers, most of the time,
+ * to take it back — "Message deleted — Undo". That is what separates it from a
+ * notification, which reports a state: a notification stacks, because two things can be
+ * true at once, whereas only the LAST action a reader took is worth offering to undo.
+ * So there is at most one snackbar at a time, and raising a new one replaces the one
+ * before it on the spot.
+ *
+ * Which is why this is a single value rather than a queue. It is a `shallowRef` and not
+ * a `reactive` object: the bar is replaced whole, never edited in place. That is what
+ * makes the watcher in VSnackbar exact — it fires when and only when the bar really
+ * changes, so the countdown is re-armed exactly then, and none of the bookkeeping the
+ * VToaster needs to time several notifications at once has to exist here.
+ *
+ * The state is held at module level rather than inside a component, and that is the
+ * whole point: `snackbar()` can then be called from ANYWHERE — a component, a store, the
+ * handler that just deleted something — without anything having to be passed down to it.
+ * The price is a contract to respect: since module state is shared by every request a
+ * server handles, `snackbar()` must only ever be called in the browser, from a handler
+ * or when a request comes back, and never while a page is being rendered on the server.
+ *
+ * The only thing that touches the DOM, and the only thing that arms the countdown, is
+ * the mounted VSnackbar.
+ */
+/**
+ * What a confirmation can mean. There are two, and deliberately no more: a snackbar
+ * says either "done" or "that did not work". Success, warning and the accent are
+ * STATES, which is a notification's subject — reporting one here would blur the line
+ * the two components exist to draw.
+ */
+export type SnackbarTone = 'neutral' | 'danger';
+/** Where the bar appears. Along the bottom edge only, where it is out of the content's way. */
+export type SnackbarPlacement = 'bottom-left' | 'bottom-center' | 'bottom-right';
+/** Everything one can say when raising a confirmation. */
+export interface SnackbarOptions {
+    /** What the confirmation says. One short sentence — there is no title to frame it. */
+    message: string;
+    /** What it means, expressed as a colour: the plain inversion, or the failure colour. */
+    tone?: SnackbarTone;
+    /**
+     * An icon before the message. There is none by default, and none is deduced from the
+     * tone: a confirmation is read, not scanned.
+     */
+    icon?: IconSource;
+    /**
+     * How long it stays, in milliseconds. Setting it to 0 keeps it until it is replaced or
+     * taken away by hand, and leaving it out takes the duration set on the VSnackbar.
+     */
+    duration?: number;
+    /** Which end of the bottom edge it appears at. Left out, it takes the one set on the VSnackbar. */
+    placement?: SnackbarPlacement;
+    /**
+     * What the single action does. Left out, the bar carries no button at all. Running it
+     * always takes the bar away, so nothing has to be dismissed by hand afterwards.
+     */
+    action?: () => void;
+    /** What that action is called. It falls back to the design system dictionary ("Undo"). */
+    actionLabel?: string;
+}
+/**
+ * A confirmation once it is showing, with the choices the caller left out filled in and
+ * an id of its own. Internal: it is what VSnackbar renders.
+ */
+export interface SnackbarItem extends SnackbarOptions {
+    id: number;
+    tone: SnackbarTone;
+}
+/** The bar currently showing, if any. Internal, read only by VSnackbar, and not public API. */
+export declare const current: import('vue').ShallowRef<SnackbarItem | null, SnackbarItem | null>;
+/**
+ * Raises a confirmation, replacing whatever was showing, and hands back an id that
+ * `dismissSnackbar` can use to take it away again before its time.
+ *
+ * The two defaults that belong to the VSnackbar — where the bar appears and how long it
+ * stays — are deliberately NOT resolved here: they are read when the bar is rendered, so
+ * the component remains the single source of truth for its own settings.
+ */
+export declare function snackbar(options: SnackbarOptions): number;
+/**
+ * Takes a confirmation away, by its id or — called with no argument — whichever one is
+ * showing.
+ *
+ * Passing an id is not a formality: it is checked against the bar actually on screen, and
+ * a stale one is ignored. Without that test a countdown or a handler arriving late would
+ * close the bar that has just REPLACED the one it was about, and the reader would watch a
+ * fresh confirmation vanish in a fraction of its time.
+ */
+export declare function dismissSnackbar(id?: number): void;

package/dist/components/VSnackbar/state.js

@@ -0,0 +1,18 @@
+import { shallowRef as e } from "vue";
+//#region src/components/VSnackbar/state.ts
+var t = e(null), n = 0;
+function r(e) {
+	let r = n++;
+	return t.value = {
+		tone: "neutral",
+		...e,
+		id: r
+	}, r;
+}
+function i(e) {
+	(e === void 0 || t.value?.id === e) && (t.value = null);
+}
+//#endregion
+export { t as current, i as dismissSnackbar, r as snackbar };
+
+//# sourceMappingURL=state.js.map

package/dist/components/VSnackbar/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","names":[],"sources":["../../../src/components/VSnackbar/state.ts"],"sourcesContent":["import { shallowRef } from 'vue'\n\nimport type { IconSource } from '../VIcon/types'\n\n// @ssr @core\n/**\n * The confirmation bar waiting to be shown. Nothing in HTML covers this, so it is code\n * by necessity.\n *\n * A snackbar confirms an action the reader has just taken and offers, most of the time,\n * to take it back — \"Message deleted — Undo\". That is what separates it from a\n * notification, which reports a state: a notification stacks, because two things can be\n * true at once, whereas only the LAST action a reader took is worth offering to undo.\n * So there is at most one snackbar at a time, and raising a new one replaces the one\n * before it on the spot.\n *\n * Which is why this is a single value rather than a queue. It is a `shallowRef` and not\n * a `reactive` object: the bar is replaced whole, never edited in place. That is what\n * makes the watcher in VSnackbar exact — it fires when and only when the bar really\n * changes, so the countdown is re-armed exactly then, and none of the bookkeeping the\n * VToaster needs to time several notifications at once has to exist here.\n *\n * The state is held at module level rather than inside a component, and that is the\n * whole point: `snackbar()` can then be called from ANYWHERE — a component, a store, the\n * handler that just deleted something — without anything having to be passed down to it.\n * The price is a contract to respect: since module state is shared by every request a\n * server handles, `snackbar()` must only ever be called in the browser, from a handler\n * or when a request comes back, and never while a page is being rendered on the server.\n *\n * The only thing that touches the DOM, and the only thing that arms the countdown, is\n * the mounted VSnackbar.\n */\n\n/**\n * What a confirmation can mean. There are two, and deliberately no more: a snackbar\n * says either \"done\" or \"that did not work\". Success, warning and the accent are\n * STATES, which is a notification's subject — reporting one here would blur the line\n * the two components exist to draw.\n */\nexport type SnackbarTone = 'neutral' | 'danger'\n\n/** Where the bar appears. Along the bottom edge only, where it is out of the content's way. */\nexport type SnackbarPlacement = 'bottom-left' | 'bottom-center' | 'bottom-right'\n\n/** Everything one can say when raising a confirmation. */\nexport interface SnackbarOptions {\n  /** What the confirmation says. One short sentence — there is no title to frame it. */\n  message: string\n  /** What it means, expressed as a colour: the plain inversion, or the failure colour. */\n  tone?: SnackbarTone\n  /**\n   * An icon before the message. There is none by default, and none is deduced from the\n   * tone: a confirmation is read, not scanned.\n   */\n  icon?: IconSource\n  /**\n   * How long it stays, in milliseconds. Setting it to 0 keeps it until it is replaced or\n   * taken away by hand, and leaving it out takes the duration set on the VSnackbar.\n   */\n  duration?: number\n  /** Which end of the bottom edge it appears at. Left out, it takes the one set on the VSnackbar. */\n  placement?: SnackbarPlacement\n  /**\n   * What the single action does. Left out, the bar carries no button at all. Running it\n   * always takes the bar away, so nothing has to be dismissed by hand afterwards.\n   */\n  action?: () => void\n  /** What that action is called. It falls back to the design system dictionary (\"Undo\"). */\n  actionLabel?: string\n}\n\n/**\n * A confirmation once it is showing, with the choices the caller left out filled in and\n * an id of its own. Internal: it is what VSnackbar renders.\n */\nexport interface SnackbarItem extends SnackbarOptions {\n  id: number\n  tone: SnackbarTone\n}\n\n/** The bar currently showing, if any. Internal, read only by VSnackbar, and not public API. */\nexport const current = shallowRef<SnackbarItem | null>(null)\n\nlet nextId = 0\n\n/**\n * Raises a confirmation, replacing whatever was showing, and hands back an id that\n * `dismissSnackbar` can use to take it away again before its time.\n *\n * The two defaults that belong to the VSnackbar — where the bar appears and how long it\n * stays — are deliberately NOT resolved here: they are read when the bar is rendered, so\n * the component remains the single source of truth for its own settings.\n */\nexport function snackbar(options: SnackbarOptions): number {\n  const id = nextId++\n  current.value = { tone: 'neutral', ...options, id }\n  return id\n}\n\n/**\n * Takes a confirmation away, by its id or — called with no argument — whichever one is\n * showing.\n *\n * Passing an id is not a formality: it is checked against the bar actually on screen, and\n * a stale one is ignored. Without that test a countdown or a handler arriving late would\n * close the bar that has just REPLACED the one it was about, and the reader would watch a\n * fresh confirmation vanish in a fraction of its time.\n */\nexport function dismissSnackbar(id?: number): void {\n  if (id === undefined || current.value?.id === id) current.value = null\n}\n"],"mappings":";;AAiFA,IAAa,IAAU,EAAgC,IAAI,GAEvD,IAAS;AAUb,SAAgB,EAAS,GAAkC;CACzD,IAAM,IAAK;CAEX,OADA,EAAQ,QAAQ;EAAE,MAAM;EAAW,GAAG;EAAS;CAAG,GAC3C;AACT;AAWA,SAAgB,EAAgB,GAAmB;CACjD,CAAI,MAAO,KAAA,KAAa,EAAQ,OAAO,OAAO,OAAI,EAAQ,QAAQ;AACpE"}

package/dist/components/VSpinner/VSpinner.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-spinner{--spinner-size:1em;--spinner-ring:calc(var(--spinner-size) * 5 / 6);width:var(--spinner-size);height:var(--spinner-size);flex:none;justify-content:center;align-items:center;display:inline-flex}.v-spinner-circle{width:var(--spinner-ring);height:var(--spinner-ring);border:max(1px, calc(var(--spinner-ring) / 10)) solid color-mix(in oklab, currentcolor, transparent 75%);border-radius:var(--vectis-radius-full);animation:v-spin var(--vectis-duration-1000) linear infinite;border-block-start-color:currentColor}@media (prefers-reduced-motion:reduce){.v-spinner-circle{animation-duration:var(--vectis-duration-3000)}}}

package/dist/components/VSpinner/VSpinner.d.ts

@@ -0,0 +1,21 @@
+interface SpinnerProps {
+    /**
+     * A size in pixels, understood exactly as VIcon's: it is the BOX the spinner
+     * occupies, not the diameter of the ring, which is drawn slightly smaller inside
+     * it. Left out, the box measures 1em and therefore follows the size of the text
+     * around it, which is how the spinner stays proportionate inside a button or a
+     * paragraph without being told anything.
+     */
+    size?: number;
+    /**
+     * What screen readers announce while it turns. It falls back to the wording of the
+     * design system dictionary, in the current language.
+     */
+    label?: string;
+}
+declare const __VLS_export: import('vue').DefineComponent<SpinnerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SpinnerProps> & Readonly<{}>, {
+    label: string;
+    size: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VSpinner/VSpinner.js

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

package/dist/components/VSpinner/VSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VSpinner.js","names":[],"sources":["../../../src/components/VSpinner/VSpinner.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A turning ring saying that something is under way. The animation is pure CSS; what\n * makes the component more than a decorated circle is that it also announces itself:\n * it carries `role=\"status\"` and a label only screen readers see, so the wait is\n * heard as well as seen, without adding any text to the design.\n *\n * The single line of JavaScript reads the label from the dictionary, which is what\n * makes its default translatable. It is not behaviour: no event, no lifecycle, no\n * DOM access.\n */\nimport { computed } from 'vue'\n\nimport { useMessages } from '../../i18n/state'\n\ninterface SpinnerProps {\n  /**\n   * A size in pixels, understood exactly as VIcon's: it is the BOX the spinner\n   * occupies, not the diameter of the ring, which is drawn slightly smaller inside\n   * it. Left out, the box measures 1em and therefore follows the size of the text\n   * around it, which is how the spinner stays proportionate inside a button or a\n   * paragraph without being told anything.\n   */\n  size?: number\n  /**\n   * What screen readers announce while it turns. It falls back to the wording of the\n   * design system dictionary, in the current language.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<SpinnerProps>(), {\n  size: undefined,\n  label: undefined,\n})\n\nconst m = useMessages()\nconst resolvedLabel = computed(() => props.label ?? m.value.common.loading)\n</script>\n\n<template>\n  <span\n    class=\"v-spinner\"\n    :style=\"size !== undefined ? { '--spinner-size': `${size}px` } : undefined\"\n    role=\"status\"\n  >\n    <span class=\"v-spinner-circle\" aria-hidden=\"true\" />\n    <span class=\"v-visually-hidden\">{{ resolvedLabel }}</span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-spinner {\n    /* `--spinner-size` is the BOX the spinner occupies, exactly as `--vectis-icon-size`\n       is for VIcon — and not the diameter of the ring. Sized in `em`, that box follows\n       the text of whatever contains it, so a consumer can size it through font-size\n       alone — VButton, VInput and VTextarea do exactly that, from their icon size. The\n       `size` prop writes this same variable in pixels, inline, and therefore wins.\n\n       The ring is then drawn at five sixths of the box, because that is the proportion\n       Material Symbols draws `progress_activity` at: on its 960 grid the outer radius\n       is 400, so the ink spans 800 of the 960 the glyph is scaled into. Anything a\n       spinner stands in for is an icon, and matching that fraction is what makes the\n       two read as the same size instead of the spinner looking a size up. */\n    --spinner-size: 1em;\n    --spinner-ring: calc(var(--spinner-size) * 5 / 6);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    width: var(--spinner-size);\n    height: var(--spinner-size);\n  }\n\n  .v-spinner-circle {\n    width: var(--spinner-ring);\n    height: var(--spinner-ring);\n    /* The stroke is a tenth of the ring's diameter, the same source again: the glyph's\n       outer radius is 400 and its inner one 320, so its stroke is 80 of those 800. It\n       stays in proportion at every size, with a one-pixel floor below which the ring\n       would disappear — a floor that only bites under a 12px box, which no size of the\n       design system reaches. A bare ratio is tolerated here, like the opacities. */\n    border: max(1px, calc(var(--spinner-ring) / 10)) solid\n      color-mix(in oklab, currentcolor, transparent 75%);\n    border-block-start-color: currentcolor;\n    border-radius: var(--vectis-radius-full);\n    animation: v-spin var(--vectis-duration-1000) linear infinite;\n  }\n\n  /* The `v-spin` keyframes live in styles/utilities.css, shared with\n     VProgressCircular. Keyframes are global names rather than declarations arbitrated\n     by the cascade, so they sit outside any layer and are declared once for the whole\n     design system. */\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-spinner-circle {\n      animation-duration: var(--vectis-duration-3000);\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VSpinner/VSpinner.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,25 @@
+import { useMessages as e } from "../../i18n/state.js";
+import { computed as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeStyle as a, openBlock as o, toDisplayString as s } from "vue";
+//#region src/components/VSpinner/VSpinner.vue?vue&type=script&setup=true&lang.ts
+var c = { class: "v-visually-hidden" }, l = /*@__PURE__*/ i({
+	__name: "VSpinner",
+	props: {
+		size: { default: void 0 },
+		label: { default: void 0 }
+	},
+	setup(i) {
+		let l = i, u = e(), d = t(() => l.label ?? u.value.common.loading);
+		return (e, t) => (o(), n("span", {
+			class: "v-spinner",
+			style: a(i.size === void 0 ? void 0 : { "--spinner-size": `${i.size}px` }),
+			role: "status"
+		}, [t[0] ||= r("span", {
+			class: "v-spinner-circle",
+			"aria-hidden": "true"
+		}, null, -1), r("span", c, s(d.value), 1)], 4));
+	}
+});
+//#endregion
+export { l as default };
+
+//# sourceMappingURL=VSpinner.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VSpinner.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VSpinner/VSpinner.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A turning ring saying that something is under way. The animation is pure CSS; what\n * makes the component more than a decorated circle is that it also announces itself:\n * it carries `role=\"status\"` and a label only screen readers see, so the wait is\n * heard as well as seen, without adding any text to the design.\n *\n * The single line of JavaScript reads the label from the dictionary, which is what\n * makes its default translatable. It is not behaviour: no event, no lifecycle, no\n * DOM access.\n */\nimport { computed } from 'vue'\n\nimport { useMessages } from '../../i18n/state'\n\ninterface SpinnerProps {\n  /**\n   * A size in pixels, understood exactly as VIcon's: it is the BOX the spinner\n   * occupies, not the diameter of the ring, which is drawn slightly smaller inside\n   * it. Left out, the box measures 1em and therefore follows the size of the text\n   * around it, which is how the spinner stays proportionate inside a button or a\n   * paragraph without being told anything.\n   */\n  size?: number\n  /**\n   * What screen readers announce while it turns. It falls back to the wording of the\n   * design system dictionary, in the current language.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<SpinnerProps>(), {\n  size: undefined,\n  label: undefined,\n})\n\nconst m = useMessages()\nconst resolvedLabel = computed(() => props.label ?? m.value.common.loading)\n</script>\n\n<template>\n  <span\n    class=\"v-spinner\"\n    :style=\"size !== undefined ? { '--spinner-size': `${size}px` } : undefined\"\n    role=\"status\"\n  >\n    <span class=\"v-spinner-circle\" aria-hidden=\"true\" />\n    <span class=\"v-visually-hidden\">{{ resolvedLabel }}</span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-spinner {\n    /* `--spinner-size` is the BOX the spinner occupies, exactly as `--vectis-icon-size`\n       is for VIcon — and not the diameter of the ring. Sized in `em`, that box follows\n       the text of whatever contains it, so a consumer can size it through font-size\n       alone — VButton, VInput and VTextarea do exactly that, from their icon size. The\n       `size` prop writes this same variable in pixels, inline, and therefore wins.\n\n       The ring is then drawn at five sixths of the box, because that is the proportion\n       Material Symbols draws `progress_activity` at: on its 960 grid the outer radius\n       is 400, so the ink spans 800 of the 960 the glyph is scaled into. Anything a\n       spinner stands in for is an icon, and matching that fraction is what makes the\n       two read as the same size instead of the spinner looking a size up. */\n    --spinner-size: 1em;\n    --spinner-ring: calc(var(--spinner-size) * 5 / 6);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    width: var(--spinner-size);\n    height: var(--spinner-size);\n  }\n\n  .v-spinner-circle {\n    width: var(--spinner-ring);\n    height: var(--spinner-ring);\n    /* The stroke is a tenth of the ring's diameter, the same source again: the glyph's\n       outer radius is 400 and its inner one 320, so its stroke is 80 of those 800. It\n       stays in proportion at every size, with a one-pixel floor below which the ring\n       would disappear — a floor that only bites under a 12px box, which no size of the\n       design system reaches. A bare ratio is tolerated here, like the opacities. */\n    border: max(1px, calc(var(--spinner-ring) / 10)) solid\n      color-mix(in oklab, currentcolor, transparent 75%);\n    border-block-start-color: currentcolor;\n    border-radius: var(--vectis-radius-full);\n    animation: v-spin var(--vectis-duration-1000) linear infinite;\n  }\n\n  /* The `v-spin` keyframes live in styles/utilities.css, shared with\n     VProgressCircular. Keyframes are global names rather than declarations arbitrated\n     by the cascade, so they sit outside any layer and are declared once for the whole\n     design system. */\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-spinner-circle {\n      animation-duration: var(--vectis-duration-3000);\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;EAgCA,IAAM,IAAQ,GAKR,IAAI,EAAY,GAChB,IAAgB,QAAe,EAAM,SAAS,EAAE,MAAM,OAAO,OAAO;yBAIxE,EAOO,QAAA;GANL,OAAM;GACL,OAAK,EAAE,EAAA,SAAS,KAAA,IAAgD,KAAA,IAAvC,EAAA,kBAAA,GAA0B,EAAA,KAAI,IAAA,CAAkB;GAC1E,MAAK;eAEL,EAAoD,QAAA;GAA9C,OAAM;GAAmB,eAAY;gBAC3C,EAA0D,QAA1D,GAA0D,EAAvB,EAAA,KAAa,GAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/components/VSwitch/VSwitch.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-switch{--switch-track-w:var(--vectis-control-size-switch-w);--switch-track-h:var(--vectis-control-size-switch-h);--switch-pad:2px;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-switch[data-label-position=start]{flex-direction:row-reverse}.v-switch[data-spread]{justify-content:space-between;display:flex}.v-switch-input{opacity:0;pointer-events:none;width:1px;height:1px;margin:0;position:absolute}.v-switch-track{width:var(--switch-track-w);height:var(--switch-track-h);padding:var(--switch-pad);background:var(--vectis-color-border-strong);border-radius:var(--vectis-radius-full);transition:background-color var(--vectis-duration-fast) var(--vectis-ease-default);flex:none;align-items:center;display:inline-flex}.v-switch-thumb{width:calc(var(--switch-track-h) - var(--switch-pad) * 2);height:calc(var(--switch-track-h) - var(--switch-pad) * 2);background:var(--vectis-color-surface);border-radius:var(--vectis-radius-full);box-shadow:var(--vectis-shadow-xs);transition:margin-inline-start var(--vectis-duration-base) var(--vectis-ease-default)}.v-switch-input:checked+.v-switch-track{background:var(--vectis-color-accent)}.v-switch-input:checked+.v-switch-track .v-switch-thumb{margin-inline-start:calc(var(--switch-track-w) - var(--switch-track-h))}.v-switch:hover .v-switch-input:not(:disabled):not(:checked)+.v-switch-track{background:color-mix(in oklab, var(--vectis-color-border-strong), var(--vectis-color-text) 12%)}.v-switch-input:focus-visible+.v-switch-track{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-switch:has(.v-switch-input:disabled){color:var(--vectis-color-text-subtle);cursor:not-allowed}.v-switch-input:disabled+.v-switch-track{background:var(--vectis-color-surface-muted)}.v-switch-input:disabled+.v-switch-track .v-switch-thumb{background:var(--vectis-color-text-subtle);box-shadow:none}@media (prefers-reduced-motion:reduce){.v-switch-track,.v-switch-thumb{transition:none}}}

package/dist/components/VSwitch/VSwitch.d.ts

@@ -0,0 +1,46 @@
+/**
+ * A switch, for a setting that takes effect at once — where a checkbox states an
+ * intention to be confirmed later.
+ *
+ * Underneath it is a native checkbox marked `role="switch"`, so a screen reader
+ * announces it as on or off rather than as ticked, and the keyboard and the form
+ * behaviour come along for free. The track and the moving thumb are pure CSS,
+ * following the input's checked state; the only JavaScript is the v-model.
+ */
+interface SwitchProps {
+    /** Which side of the switch the label sits on. */
+    labelPosition?: 'start' | 'end';
+    /**
+     * Pushes the label and the switch to opposite ends of the line, the row taking the
+     * full width available — the usual shape for a list of settings.
+     */
+    spread?: boolean;
+    /** Makes the switch unusable, greyed out through the colour tokens. */
+    disabled?: boolean;
+}
+type __VLS_Props = SwitchProps;
+type __VLS_Slots = {
+    /** The label. It is clickable, the whole component being wrapped in a `<label>`. */
+    default?(): unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+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: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: 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/VSwitch/VSwitch.js

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

package/dist/components/VSwitch/VSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VSwitch.js","names":[],"sources":["../../../src/components/VSwitch/VSwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A switch, for a setting that takes effect at once — where a checkbox states an\n * intention to be confirmed later.\n *\n * Underneath it is a native checkbox marked `role=\"switch\"`, so a screen reader\n * announces it as on or off rather than as ticked, and the keyboard and the form\n * behaviour come along for free. The track and the moving thumb are pure CSS,\n * following the input's checked state; the only JavaScript is the v-model.\n */\ninterface SwitchProps {\n  /** Which side of the switch the label sits on. */\n  labelPosition?: 'start' | 'end'\n  /**\n   * Pushes the label and the switch to opposite ends of the line, the row taking the\n   * full width available — the usual shape for a list of settings.\n   */\n  spread?: boolean\n  /** Makes the switch unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n}\n\nwithDefaults(defineProps<SwitchProps>(), {\n  labelPosition: 'end',\n  spread: false,\n  disabled: false,\n})\n\n// @a11y\n// The root element is the <label>, so the attributes the consumer passes have to be\n// redirected onto the input: `name` for the form, and the aria-* for the element\n// that actually carries the switch role.\ndefineOptions({ inheritAttrs: false })\n\nconst model = defineModel<boolean>({ default: false })\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-switch\" :data-label-position=\"labelPosition\" :data-spread=\"spread || undefined\">\n    <input\n      v-model=\"model\"\n      type=\"checkbox\"\n      role=\"switch\"\n      class=\"v-switch-input\"\n      v-bind=\"$attrs\"\n      :disabled=\"disabled\"\n    />\n    <span class=\"v-switch-track\" aria-hidden=\"true\">\n      <span class=\"v-switch-thumb\" />\n    </span>\n    <span v-if=\"$slots.default\" class=\"v-switch-label\"><slot /></span>\n  </label>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-switch {\n    --switch-track-w: var(--vectis-control-size-switch-w);\n    --switch-track-h: var(--vectis-control-size-switch-h);\n    --switch-pad: 2px;\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 track and the label. */\n  .v-switch[data-label-position='start'] {\n    flex-direction: row-reverse;\n  }\n\n  .v-switch[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 and out of the form. */\n  .v-switch-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  .v-switch-track {\n    display: inline-flex;\n    align-items: center;\n    width: var(--switch-track-w);\n    height: var(--switch-track-h);\n    padding: var(--switch-pad);\n    flex: none;\n    background: var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-full);\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-switch-thumb {\n    width: calc(var(--switch-track-h) - var(--switch-pad) * 2);\n    height: calc(var(--switch-track-h) - var(--switch-pad) * 2);\n    background: var(--vectis-color-surface);\n    border-radius: var(--vectis-radius-full);\n    box-shadow: var(--vectis-shadow-xs);\n    /* The thumb travels through `margin-inline-start` rather than a translation,\n       because a logical property follows the reading direction: in a right-to-left\n       page the thumb then moves leftwards on its own, where a translateX would have\n       to be mirrored by a second rule. */\n    transition: margin-inline-start var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-switch-input:checked + .v-switch-track {\n    background: var(--vectis-color-accent);\n  }\n\n  .v-switch-input:checked + .v-switch-track .v-switch-thumb {\n    margin-inline-start: calc(var(--switch-track-w) - var(--switch-track-h));\n  }\n\n  .v-switch:hover .v-switch-input:not(:disabled):not(:checked) + .v-switch-track {\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 12%\n    );\n  }\n\n  .v-switch-input:focus-visible + .v-switch-track {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* A disabled switch greys out through the colour tokens, the same ones VCheckbox\n     and VRadio use, and never through opacity. The thumb takes text-subtle — the\n     colour their disabled tick and dot take — which is what keeps it visible against\n     the grey track in both themes. */\n  .v-switch:has(.v-switch-input:disabled) {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-switch-input:disabled + .v-switch-track {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-switch-input:disabled + .v-switch-track .v-switch-thumb {\n    background: var(--vectis-color-text-subtle);\n    box-shadow: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-switch-track,\n    .v-switch-thumb {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VSwitch/VSwitch.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,51 @@
+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, vModelCheckbox as l, withDirectives as u } from "vue";
+//#region src/components/VSwitch/VSwitch.vue?vue&type=script&setup=true&lang.ts
+var d = ["data-label-position", "data-spread"], f = ["disabled"], p = {
+	key: 0,
+	class: "v-switch-label"
+}, m = /*@__PURE__*/ r({
+	inheritAttrs: !1,
+	__name: "VSwitch",
+	props: /*@__PURE__*/ i({
+		labelPosition: { default: "end" },
+		spread: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(r) {
+		let i = c(r, "modelValue");
+		return (c, m) => (o(), t("label", {
+			class: "v-switch",
+			"data-label-position": r.labelPosition,
+			"data-spread": r.spread || void 0
+		}, [
+			u(n("input", a({
+				"onUpdate:modelValue": m[0] ||= (e) => i.value = e,
+				type: "checkbox",
+				role: "switch",
+				class: "v-switch-input"
+			}, c.$attrs, { disabled: r.disabled }), null, 16, f), [[l, i.value]]),
+			m[1] ||= n("span", {
+				class: "v-switch-track",
+				"aria-hidden": "true"
+			}, [n("span", { class: "v-switch-thumb" })], -1),
+			c.$slots.default ? (o(), t("span", p, [s(c.$slots, "default")])) : e("", !0)
+		], 8, d));
+	}
+});
+//#endregion
+export { m as default };
+
+//# sourceMappingURL=VSwitch.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VSwitch.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../src/components/VSwitch/VSwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A switch, for a setting that takes effect at once — where a checkbox states an\n * intention to be confirmed later.\n *\n * Underneath it is a native checkbox marked `role=\"switch\"`, so a screen reader\n * announces it as on or off rather than as ticked, and the keyboard and the form\n * behaviour come along for free. The track and the moving thumb are pure CSS,\n * following the input's checked state; the only JavaScript is the v-model.\n */\ninterface SwitchProps {\n  /** Which side of the switch the label sits on. */\n  labelPosition?: 'start' | 'end'\n  /**\n   * Pushes the label and the switch to opposite ends of the line, the row taking the\n   * full width available — the usual shape for a list of settings.\n   */\n  spread?: boolean\n  /** Makes the switch unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n}\n\nwithDefaults(defineProps<SwitchProps>(), {\n  labelPosition: 'end',\n  spread: false,\n  disabled: false,\n})\n\n// @a11y\n// The root element is the <label>, so the attributes the consumer passes have to be\n// redirected onto the input: `name` for the form, and the aria-* for the element\n// that actually carries the switch role.\ndefineOptions({ inheritAttrs: false })\n\nconst model = defineModel<boolean>({ default: false })\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-switch\" :data-label-position=\"labelPosition\" :data-spread=\"spread || undefined\">\n    <input\n      v-model=\"model\"\n      type=\"checkbox\"\n      role=\"switch\"\n      class=\"v-switch-input\"\n      v-bind=\"$attrs\"\n      :disabled=\"disabled\"\n    />\n    <span class=\"v-switch-track\" aria-hidden=\"true\">\n      <span class=\"v-switch-thumb\" />\n    </span>\n    <span v-if=\"$slots.default\" class=\"v-switch-label\"><slot /></span>\n  </label>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-switch {\n    --switch-track-w: var(--vectis-control-size-switch-w);\n    --switch-track-h: var(--vectis-control-size-switch-h);\n    --switch-pad: 2px;\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 track and the label. */\n  .v-switch[data-label-position='start'] {\n    flex-direction: row-reverse;\n  }\n\n  .v-switch[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 and out of the form. */\n  .v-switch-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  .v-switch-track {\n    display: inline-flex;\n    align-items: center;\n    width: var(--switch-track-w);\n    height: var(--switch-track-h);\n    padding: var(--switch-pad);\n    flex: none;\n    background: var(--vectis-color-border-strong);\n    border-radius: var(--vectis-radius-full);\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-switch-thumb {\n    width: calc(var(--switch-track-h) - var(--switch-pad) * 2);\n    height: calc(var(--switch-track-h) - var(--switch-pad) * 2);\n    background: var(--vectis-color-surface);\n    border-radius: var(--vectis-radius-full);\n    box-shadow: var(--vectis-shadow-xs);\n    /* The thumb travels through `margin-inline-start` rather than a translation,\n       because a logical property follows the reading direction: in a right-to-left\n       page the thumb then moves leftwards on its own, where a translateX would have\n       to be mirrored by a second rule. */\n    transition: margin-inline-start var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-switch-input:checked + .v-switch-track {\n    background: var(--vectis-color-accent);\n  }\n\n  .v-switch-input:checked + .v-switch-track .v-switch-thumb {\n    margin-inline-start: calc(var(--switch-track-w) - var(--switch-track-h));\n  }\n\n  .v-switch:hover .v-switch-input:not(:disabled):not(:checked) + .v-switch-track {\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-border-strong),\n      var(--vectis-color-text) 12%\n    );\n  }\n\n  .v-switch-input:focus-visible + .v-switch-track {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* A disabled switch greys out through the colour tokens, the same ones VCheckbox\n     and VRadio use, and never through opacity. The thumb takes text-subtle — the\n     colour their disabled tick and dot take — which is what keeps it visible against\n     the grey track in both themes. */\n  .v-switch:has(.v-switch-input:disabled) {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-switch-input:disabled + .v-switch-track {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-switch-input:disabled + .v-switch-track .v-switch-thumb {\n    background: var(--vectis-color-text-subtle);\n    box-shadow: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-switch-track,\n    .v-switch-thumb {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCA,IAAM,IAAQ,EAAoB,GAAA,YAAmB;yBASnD,EAaQ,SAAA;GAbD,OAAM;GAAY,uBAAqB,EAAA;GAAgB,eAAa,EAAA,UAAU,KAAA;;KACnF,EAOE,SAPF,EAOE;6CANc,QAAA;IACd,MAAK;IACL,MAAK;IACL,OAAM;MACEA,EAAAA,QAAM,EACb,UAAU,EAAA,SAAQ,CAAA,GAAA,MAAA,IAAA,CAAA,GAAA,CAAA,CAAA,GALV,EAAA,KAAK,CAAA,CAAA;YAOhB,EAEO,QAAA;IAFD,OAAM;IAAiB,eAAY;OACvC,EAA+B,QAAA,EAAzB,OAAM,iBAAgB,CAAA,CAAA,GAAA,EAAA;GAElBC,EAAAA,OAAO,WAAA,EAAA,GAAnB,EAAkE,QAAlE,GAAkE,CAAf,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}

package/dist/components/VTabs/VTab.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-tab[data-size]{white-space:nowrap;flex:none;position:relative}.v-tab[data-size][data-icon-only]{min-inline-size:var(--control-height);padding-inline:0}.v-tab[data-size]:focus-visible{outline-offset:calc(var(--vectis-focus-ring-offset) * -1)}.v-tab-label{text-overflow:ellipsis;overflow:hidden}.v-tabs[data-grow] .v-tab[data-size]{flex:1 1 0;min-inline-size:0}.v-tabs[data-variant=inset] .v-tab[data-size]{border-radius:calc(var(--vectis-radius-surface) - var(--vectis-space-1))}.v-tabs:is([data-variant=flat],[data-variant=outlined]) .v-tab[data-size]{border-radius:0}.v-tabs[data-variant=outlined] .v-tab[data-size]:first-of-type{border-start-start-radius:var(--vectis-radius-interactive)}.v-tabs[data-variant=outlined][data-orientation=horizontal] .v-tab[data-size]:last-of-type{border-start-end-radius:var(--vectis-radius-interactive)}.v-tabs[data-variant=outlined][data-orientation=vertical] .v-tab[data-size]:last-of-type{border-end-start-radius:var(--vectis-radius-interactive)}.v-tabs:is([data-variant=flat],[data-variant=outlined]) .v-tab[data-size]:after{content:"";block-size:var(--vectis-control-size-tab-indicator);opacity:0;transition:opacity var(--vectis-duration-fast) var(--vectis-ease-default);background:currentColor;position:absolute;inset-block-end:0;inset-inline:0}.v-tabs:is([data-variant=flat],[data-variant=outlined])[data-orientation=vertical] .v-tab[data-size]:after{block-size:auto;inline-size:var(--vectis-control-size-tab-indicator);inset-block:0;inset-inline:0 auto}.v-tabs:is([data-variant=flat],[data-variant=outlined]) .v-tab[data-size][aria-selected=true]:after{opacity:1}@media (prefers-reduced-motion:reduce){.v-tabs:is([data-variant=flat],[data-variant=outlined]) .v-tab[data-size]:after{transition:none}}}