vectis-ui 0.1.0

package/dist/components/VToast/VToaster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VToaster.js","names":[],"sources":["../../../src/components/VToast/VToaster.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport { usePopover } from '../../composables/usePopover'\nimport VToast from './VToast.vue'\nimport { dismissToast, toasts, type ToastItem, type ToastPlacement } from './state'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\n// @a11y @core\n/**\n * Where notifications appear. It is mounted ONCE, at the root of the application, and\n * from then on any call to `toast()` shows up here.\n *\n * It renders one container per corner of the screen rather than one floating box per\n * notification, and each container simply stacks its notifications with CSS. The\n * reason is that these boxes are drawn above the whole page, at fixed coordinates and\n * anchored to nothing: individually they would all land on the same spot, and keeping\n * them apart would mean measuring and offsetting each one in code. The six containers\n * exist at all times — empty, they cost nothing and the browser does not display them.\n *\n * The JavaScript covers three things the platform does not: putting the queue and the\n * containers in step, since drawing above the page can only be asked for by calling a\n * method; the timers that dismiss a notification when its time is up; and pausing\n * those timers while the pointer rests on a stack, so that something disappearing on a\n * clock can be held in place long enough to read (WCAG 2.2.1).\n */\ninterface ToasterProps {\n  /** Which corner notifications appear in, unless one of them asks for another. */\n  placement?: ToastPlacement\n  /**\n   * How long a notification stays, in milliseconds, unless it asks for something else.\n   * A notification given 0 stays until it is dismissed.\n   */\n  duration?: number\n  /** What the close cross does, in words. It falls back to the design system dictionary. */\n  closeLabel?: string\n  /**\n   * What screen readers announce for the notification areas themselves, which are\n   * landmarks of the page. It falls back to the design system dictionary.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<ToasterProps>(), {\n  placement: 'bottom-right',\n  duration: 5000,\n  closeLabel: undefined,\n  label: undefined,\n})\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.toaster.label)\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? m.value.common.close)\n\nconst PLACEMENTS: ToastPlacement[] = [\n  'top-left',\n  'top-center',\n  'top-right',\n  'bottom-left',\n  'bottom-center',\n  'bottom-right',\n]\n\n/**\n * The queue sorted into the corner each notification actually belongs to: the one it\n * asked for, or failing that the one set on this component.\n */\nconst groups = computed(() => {\n  const map = new Map<ToastPlacement, ToastItem[]>()\n  for (const item of toasts) {\n    const placement = item.placement ?? props.placement\n    const list = map.get(placement)\n    if (list) list.push(item)\n    else map.set(placement, [item])\n  }\n  return map\n})\n\n/*\n * One instance of the popover plumbing PER corner. Each carries its own element, its\n * own open state — fed by that element's events — and the guards that make opening and\n * closing safe to call twice: asking the browser to show an already-shown popover\n * throws.\n *\n * The containers being permanent, this runs once and never again.\n */\nconst stacks = new Map(\n  PLACEMENTS.map((placement) => {\n    const el = ref<HTMLElement | null>(null)\n    return [placement, { el, ...usePopover(el) }] as const\n  }),\n)\n\nfunction setStackEl(placement: ToastPlacement, el: unknown) {\n  const stack = stacks.get(placement)\n  if (stack) stack.el.value = (el as HTMLElement | null) ?? null\n}\n\nfunction syncStack(placement: ToastPlacement, event: Event) {\n  stacks.get(placement)?.syncShown(event)\n}\n\n/* The running countdowns, and the notifications already given one — a notification is\n   armed once and only once, however many times the queue changes around it. */\nconst timers = new Map<number, ReturnType<typeof setTimeout>>()\nconst armed = new Set<number>()\n/* The corners the pointer is currently resting on, whose countdowns are suspended. */\nconst paused = new Set<ToastPlacement>()\n\nfunction effectivePlacement(item: ToastItem): ToastPlacement {\n  return item.placement ?? props.placement\n}\n\nfunction startTimer(item: ToastItem) {\n  const duration = item.duration ?? props.duration\n  if (duration <= 0 || timers.has(item.id)) return\n  timers.set(\n    item.id,\n    setTimeout(() => {\n      timers.delete(item.id)\n      dismissToast(item.id)\n    }, duration),\n  )\n}\n\n// @core\n/**\n * Brings the page into line with the queue: it starts the countdown of every\n * notification that has just arrived, throws away the countdowns of those that have\n * gone, and then shows the corners holding something while hiding the empty ones.\n *\n * It runs once on mount — which is what makes a notification raised before this\n * component existed appear all the same — and after that on every change to the queue.\n */\nfunction sync() {\n  const alive = new Set(toasts.map((item) => item.id))\n  for (const [id, timer] of timers) {\n    if (!alive.has(id)) {\n      clearTimeout(timer)\n      timers.delete(id)\n    }\n  }\n  for (const id of armed) if (!alive.has(id)) armed.delete(id)\n  for (const item of toasts) {\n    if (armed.has(item.id)) continue\n    armed.add(item.id)\n    if (!paused.has(effectivePlacement(item))) startTimer(item)\n  }\n\n  // Showing and hiding are safe to call on a container already in that state, the\n  // guards living in the popover plumbing — so there is no need to remember which\n  // corners are currently open.\n  for (const placement of PLACEMENTS) {\n    const stack = stacks.get(placement)\n    if (!stack?.el.value) continue\n    if ((groups.value.get(placement)?.length ?? 0) > 0) stack.show()\n    else stack.hide()\n  }\n}\n\n/*\n * Watching the grouped queue covers a change to the notifications AND a change to the\n * default corner. The `post` timing is load-bearing: the notification must already be\n * in the page before its container is told to show itself.\n */\nwatch(groups, sync, { flush: 'post' })\n// @ssr — a watcher does not run during the server render, so a notification raised\n// before this component mounted would never be picked up. Running the same\n// synchronization on 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\n// slow reader simply never finishes it.\n/*\n * Resting the pointer on a corner suspends its countdowns. Leaving restarts them from\n * the FULL duration rather than from what was left: simpler, and more generous to the\n * reader who has just interrupted themselves.\n */\nfunction pause(placement: ToastPlacement) {\n  paused.add(placement)\n  for (const item of toasts) {\n    if (effectivePlacement(item) !== placement) continue\n    const timer = timers.get(item.id)\n    if (timer !== undefined) {\n      clearTimeout(timer)\n      timers.delete(item.id)\n    }\n  }\n}\n\nfunction resume(placement: ToastPlacement) {\n  paused.delete(placement)\n  for (const item of toasts) {\n    if (effectivePlacement(item) === placement) startTimer(item)\n  }\n}\n\n/* The queue lives outside this component and survives it being unmounted and mounted\n   again; only the countdowns are cleared here, and they are started afresh next time. */\nonBeforeUnmount(() => {\n  for (const timer of timers.values()) clearTimeout(timer)\n  timers.clear()\n})\n</script>\n\n<template>\n  <div\n    v-for=\"p in PLACEMENTS\"\n    :key=\"p\"\n    :ref=\"(el) => setStackEl(p, el)\"\n    class=\"v-overlay v-toast-stack\"\n    popover=\"manual\"\n    :data-placement=\"p\"\n    role=\"region\"\n    :aria-label=\"ariaLabel\"\n    @pointerenter=\"pause(p)\"\n    @pointerleave=\"resume(p)\"\n    @beforetoggle=\"syncStack(p, $event)\"\n    @toggle=\"syncStack(p, $event)\"\n  >\n    <VToast\n      v-for=\"item in groups.get(p) ?? []\"\n      :key=\"item.id\"\n      :item=\"item\"\n      :close-label=\"resolvedCloseLabel\"\n      @close=\"dismissToast($event)\"\n    />\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 — and\n     the stack's own layout. */\n  .v-toast-stack {\n    margin: 0;\n    border: none;\n    padding: 0;\n    background: transparent;\n    overflow: visible;\n    width: fit-content;\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-3);\n  }\n\n  /*\n   * These coordinates are deliberately PHYSICAL rather than logical: a notification\n   * appears at a place on the screen, and that place does not flip with the reading\n   * direction — the operating system's own notifications behave the same way.\n   */\n  .v-toast-stack[data-placement^='top-'] {\n    top: var(--vectis-space-4);\n    /* The newest notification should sit nearest the screen edge. The queue only ever\n       grows at the end, so the stack is simply drawn in reverse. */\n    flex-direction: column-reverse;\n    /* The direction each card slides in from, read by `.v-banner` in styles/banner.css\n       — the stack is the only thing that knows which edge of the screen it sits on. */\n    --banner-enter-y: calc(-1 * var(--vectis-space-4));\n  }\n\n  .v-toast-stack[data-placement^='bottom-'] {\n    bottom: var(--vectis-space-4);\n    --banner-enter-y: var(--vectis-space-4);\n  }\n\n  .v-toast-stack[data-placement$='-left'] {\n    left: var(--vectis-space-4);\n  }\n\n  .v-toast-stack[data-placement$='-right'] {\n    right: var(--vectis-space-4);\n  }\n\n  .v-toast-stack[data-placement$='-center'] {\n    left: 0;\n    right: 0;\n    margin-inline: auto;\n  }\n\n  /* The stack 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-toast-stack {\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-toast-stack:not(:popover-open) {\n    opacity: 0;\n  }\n\n  @starting-style {\n    .v-toast-stack:popover-open {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-toast-stack {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VToast/VToaster.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,112 @@
+import { useMessages as e } from "../../i18n/state.js";
+import { usePopover as t } from "../../composables/usePopover.js";
+import { useAriaLabel as n } from "../../composables/useAriaLabel.js";
+import r from "./VToast.js";
+import { dismissToast as i, toasts as a } from "./state.js";
+import { Fragment as o, computed as s, createBlock as c, createElementBlock as l, createElementVNode as u, defineComponent as d, onBeforeUnmount as f, onMounted as p, openBlock as m, ref as h, renderList as g, unref as _, watch as v } from "vue";
+//#region src/components/VToast/VToaster.vue?vue&type=script&setup=true&lang.ts
+var y = [
+	"data-placement",
+	"aria-label",
+	"onPointerenter",
+	"onPointerleave",
+	"onBeforetoggle",
+	"onToggle"
+], b = /*@__PURE__*/ d({
+	__name: "VToaster",
+	props: {
+		placement: { default: "bottom-right" },
+		duration: { default: 5e3 },
+		closeLabel: { default: void 0 },
+		label: { default: void 0 }
+	},
+	setup(d) {
+		let b = d, x = e(), S = n(() => b.label ?? x.value.toaster.label), C = s(() => b.closeLabel ?? x.value.common.close), w = [
+			"top-left",
+			"top-center",
+			"top-right",
+			"bottom-left",
+			"bottom-center",
+			"bottom-right"
+		], T = s(() => {
+			let e = /* @__PURE__ */ new Map();
+			for (let t of a) {
+				let n = t.placement ?? b.placement, r = e.get(n);
+				r ? r.push(t) : e.set(n, [t]);
+			}
+			return e;
+		}), E = new Map(w.map((e) => {
+			let n = h(null);
+			return [e, {
+				el: n,
+				...t(n)
+			}];
+		}));
+		function D(e, t) {
+			let n = E.get(e);
+			n && (n.el.value = t ?? null);
+		}
+		function O(e, t) {
+			E.get(e)?.syncShown(t);
+		}
+		let k = /* @__PURE__ */ new Map(), A = /* @__PURE__ */ new Set(), j = /* @__PURE__ */ new Set();
+		function M(e) {
+			return e.placement ?? b.placement;
+		}
+		function N(e) {
+			let t = e.duration ?? b.duration;
+			t <= 0 || k.has(e.id) || k.set(e.id, setTimeout(() => {
+				k.delete(e.id), i(e.id);
+			}, t));
+		}
+		function P() {
+			let e = new Set(a.map((e) => e.id));
+			for (let [t, n] of k) e.has(t) || (clearTimeout(n), k.delete(t));
+			for (let t of A) e.has(t) || A.delete(t);
+			for (let e of a) A.has(e.id) || (A.add(e.id), j.has(M(e)) || N(e));
+			for (let e of w) {
+				let t = E.get(e);
+				t?.el.value && ((T.value.get(e)?.length ?? 0) > 0 ? t.show() : t.hide());
+			}
+		}
+		v(T, P, { flush: "post" }), p(P);
+		function F(e) {
+			j.add(e);
+			for (let t of a) {
+				if (M(t) !== e) continue;
+				let n = k.get(t.id);
+				n !== void 0 && (clearTimeout(n), k.delete(t.id));
+			}
+		}
+		function I(e) {
+			j.delete(e);
+			for (let t of a) M(t) === e && N(t);
+		}
+		return f(() => {
+			for (let e of k.values()) clearTimeout(e);
+			k.clear();
+		}), (e, t) => (m(), l(o, null, g(w, (e) => u("div", {
+			key: e,
+			ref_for: !0,
+			ref: (t) => D(e, t),
+			class: "v-overlay v-toast-stack",
+			popover: "manual",
+			"data-placement": e,
+			role: "region",
+			"aria-label": _(S),
+			onPointerenter: (t) => F(e),
+			onPointerleave: (t) => I(e),
+			onBeforetoggle: (t) => O(e, t),
+			onToggle: (t) => O(e, t)
+		}, [(m(!0), l(o, null, g(T.value.get(e) ?? [], (e) => (m(), c(r, {
+			key: e.id,
+			item: e,
+			"close-label": C.value,
+			onClose: t[0] ||= (e) => _(i)(e)
+		}, null, 8, ["item", "close-label"]))), 128))], 40, y)), 64));
+	}
+});
+//#endregion
+export { b as default };
+
+//# sourceMappingURL=VToaster.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VToast/VToaster.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VToaster.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VToast/VToaster.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport { usePopover } from '../../composables/usePopover'\nimport VToast from './VToast.vue'\nimport { dismissToast, toasts, type ToastItem, type ToastPlacement } from './state'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\n// @a11y @core\n/**\n * Where notifications appear. It is mounted ONCE, at the root of the application, and\n * from then on any call to `toast()` shows up here.\n *\n * It renders one container per corner of the screen rather than one floating box per\n * notification, and each container simply stacks its notifications with CSS. The\n * reason is that these boxes are drawn above the whole page, at fixed coordinates and\n * anchored to nothing: individually they would all land on the same spot, and keeping\n * them apart would mean measuring and offsetting each one in code. The six containers\n * exist at all times — empty, they cost nothing and the browser does not display them.\n *\n * The JavaScript covers three things the platform does not: putting the queue and the\n * containers in step, since drawing above the page can only be asked for by calling a\n * method; the timers that dismiss a notification when its time is up; and pausing\n * those timers while the pointer rests on a stack, so that something disappearing on a\n * clock can be held in place long enough to read (WCAG 2.2.1).\n */\ninterface ToasterProps {\n  /** Which corner notifications appear in, unless one of them asks for another. */\n  placement?: ToastPlacement\n  /**\n   * How long a notification stays, in milliseconds, unless it asks for something else.\n   * A notification given 0 stays until it is dismissed.\n   */\n  duration?: number\n  /** What the close cross does, in words. It falls back to the design system dictionary. */\n  closeLabel?: string\n  /**\n   * What screen readers announce for the notification areas themselves, which are\n   * landmarks of the page. It falls back to the design system dictionary.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<ToasterProps>(), {\n  placement: 'bottom-right',\n  duration: 5000,\n  closeLabel: undefined,\n  label: undefined,\n})\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.toaster.label)\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? m.value.common.close)\n\nconst PLACEMENTS: ToastPlacement[] = [\n  'top-left',\n  'top-center',\n  'top-right',\n  'bottom-left',\n  'bottom-center',\n  'bottom-right',\n]\n\n/**\n * The queue sorted into the corner each notification actually belongs to: the one it\n * asked for, or failing that the one set on this component.\n */\nconst groups = computed(() => {\n  const map = new Map<ToastPlacement, ToastItem[]>()\n  for (const item of toasts) {\n    const placement = item.placement ?? props.placement\n    const list = map.get(placement)\n    if (list) list.push(item)\n    else map.set(placement, [item])\n  }\n  return map\n})\n\n/*\n * One instance of the popover plumbing PER corner. Each carries its own element, its\n * own open state — fed by that element's events — and the guards that make opening and\n * closing safe to call twice: asking the browser to show an already-shown popover\n * throws.\n *\n * The containers being permanent, this runs once and never again.\n */\nconst stacks = new Map(\n  PLACEMENTS.map((placement) => {\n    const el = ref<HTMLElement | null>(null)\n    return [placement, { el, ...usePopover(el) }] as const\n  }),\n)\n\nfunction setStackEl(placement: ToastPlacement, el: unknown) {\n  const stack = stacks.get(placement)\n  if (stack) stack.el.value = (el as HTMLElement | null) ?? null\n}\n\nfunction syncStack(placement: ToastPlacement, event: Event) {\n  stacks.get(placement)?.syncShown(event)\n}\n\n/* The running countdowns, and the notifications already given one — a notification is\n   armed once and only once, however many times the queue changes around it. */\nconst timers = new Map<number, ReturnType<typeof setTimeout>>()\nconst armed = new Set<number>()\n/* The corners the pointer is currently resting on, whose countdowns are suspended. */\nconst paused = new Set<ToastPlacement>()\n\nfunction effectivePlacement(item: ToastItem): ToastPlacement {\n  return item.placement ?? props.placement\n}\n\nfunction startTimer(item: ToastItem) {\n  const duration = item.duration ?? props.duration\n  if (duration <= 0 || timers.has(item.id)) return\n  timers.set(\n    item.id,\n    setTimeout(() => {\n      timers.delete(item.id)\n      dismissToast(item.id)\n    }, duration),\n  )\n}\n\n// @core\n/**\n * Brings the page into line with the queue: it starts the countdown of every\n * notification that has just arrived, throws away the countdowns of those that have\n * gone, and then shows the corners holding something while hiding the empty ones.\n *\n * It runs once on mount — which is what makes a notification raised before this\n * component existed appear all the same — and after that on every change to the queue.\n */\nfunction sync() {\n  const alive = new Set(toasts.map((item) => item.id))\n  for (const [id, timer] of timers) {\n    if (!alive.has(id)) {\n      clearTimeout(timer)\n      timers.delete(id)\n    }\n  }\n  for (const id of armed) if (!alive.has(id)) armed.delete(id)\n  for (const item of toasts) {\n    if (armed.has(item.id)) continue\n    armed.add(item.id)\n    if (!paused.has(effectivePlacement(item))) startTimer(item)\n  }\n\n  // Showing and hiding are safe to call on a container already in that state, the\n  // guards living in the popover plumbing — so there is no need to remember which\n  // corners are currently open.\n  for (const placement of PLACEMENTS) {\n    const stack = stacks.get(placement)\n    if (!stack?.el.value) continue\n    if ((groups.value.get(placement)?.length ?? 0) > 0) stack.show()\n    else stack.hide()\n  }\n}\n\n/*\n * Watching the grouped queue covers a change to the notifications AND a change to the\n * default corner. The `post` timing is load-bearing: the notification must already be\n * in the page before its container is told to show itself.\n */\nwatch(groups, sync, { flush: 'post' })\n// @ssr — a watcher does not run during the server render, so a notification raised\n// before this component mounted would never be picked up. Running the same\n// synchronization on 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\n// slow reader simply never finishes it.\n/*\n * Resting the pointer on a corner suspends its countdowns. Leaving restarts them from\n * the FULL duration rather than from what was left: simpler, and more generous to the\n * reader who has just interrupted themselves.\n */\nfunction pause(placement: ToastPlacement) {\n  paused.add(placement)\n  for (const item of toasts) {\n    if (effectivePlacement(item) !== placement) continue\n    const timer = timers.get(item.id)\n    if (timer !== undefined) {\n      clearTimeout(timer)\n      timers.delete(item.id)\n    }\n  }\n}\n\nfunction resume(placement: ToastPlacement) {\n  paused.delete(placement)\n  for (const item of toasts) {\n    if (effectivePlacement(item) === placement) startTimer(item)\n  }\n}\n\n/* The queue lives outside this component and survives it being unmounted and mounted\n   again; only the countdowns are cleared here, and they are started afresh next time. */\nonBeforeUnmount(() => {\n  for (const timer of timers.values()) clearTimeout(timer)\n  timers.clear()\n})\n</script>\n\n<template>\n  <div\n    v-for=\"p in PLACEMENTS\"\n    :key=\"p\"\n    :ref=\"(el) => setStackEl(p, el)\"\n    class=\"v-overlay v-toast-stack\"\n    popover=\"manual\"\n    :data-placement=\"p\"\n    role=\"region\"\n    :aria-label=\"ariaLabel\"\n    @pointerenter=\"pause(p)\"\n    @pointerleave=\"resume(p)\"\n    @beforetoggle=\"syncStack(p, $event)\"\n    @toggle=\"syncStack(p, $event)\"\n  >\n    <VToast\n      v-for=\"item in groups.get(p) ?? []\"\n      :key=\"item.id\"\n      :item=\"item\"\n      :close-label=\"resolvedCloseLabel\"\n      @close=\"dismissToast($event)\"\n    />\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 — and\n     the stack's own layout. */\n  .v-toast-stack {\n    margin: 0;\n    border: none;\n    padding: 0;\n    background: transparent;\n    overflow: visible;\n    width: fit-content;\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-3);\n  }\n\n  /*\n   * These coordinates are deliberately PHYSICAL rather than logical: a notification\n   * appears at a place on the screen, and that place does not flip with the reading\n   * direction — the operating system's own notifications behave the same way.\n   */\n  .v-toast-stack[data-placement^='top-'] {\n    top: var(--vectis-space-4);\n    /* The newest notification should sit nearest the screen edge. The queue only ever\n       grows at the end, so the stack is simply drawn in reverse. */\n    flex-direction: column-reverse;\n    /* The direction each card slides in from, read by `.v-banner` in styles/banner.css\n       — the stack is the only thing that knows which edge of the screen it sits on. */\n    --banner-enter-y: calc(-1 * var(--vectis-space-4));\n  }\n\n  .v-toast-stack[data-placement^='bottom-'] {\n    bottom: var(--vectis-space-4);\n    --banner-enter-y: var(--vectis-space-4);\n  }\n\n  .v-toast-stack[data-placement$='-left'] {\n    left: var(--vectis-space-4);\n  }\n\n  .v-toast-stack[data-placement$='-right'] {\n    right: var(--vectis-space-4);\n  }\n\n  .v-toast-stack[data-placement$='-center'] {\n    left: 0;\n    right: 0;\n    margin-inline: auto;\n  }\n\n  /* The stack 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-toast-stack {\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-toast-stack:not(:popover-open) {\n    opacity: 0;\n  }\n\n  @starting-style {\n    .v-toast-stack:popover-open {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-toast-stack {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA6CA,IAAM,IAAQ,GAOR,IAAI,EAAY,GAChB,IAAY,QAAmB,EAAM,SAAS,EAAE,MAAM,QAAQ,KAAK,GACnE,IAAqB,QAAe,EAAM,cAAc,EAAE,MAAM,OAAO,KAAK,GAE5E,IAA+B;GACnC;GACA;GACA;GACA;GACA;GACA;EACF,GAMM,IAAS,QAAe;GAC5B,IAAM,oBAAM,IAAI,IAAiC;GACjD,KAAK,IAAM,KAAQ,GAAQ;IACzB,IAAM,IAAY,EAAK,aAAa,EAAM,WACpC,IAAO,EAAI,IAAI,CAAS;IAC9B,AAAI,IAAM,EAAK,KAAK,CAAI,IACnB,EAAI,IAAI,GAAW,CAAC,CAAI,CAAC;GAChC;GACA,OAAO;EACT,CAAC,GAUK,IAAS,IAAI,IACjB,EAAW,KAAK,MAAc;GAC5B,IAAM,IAAK,EAAwB,IAAI;GACvC,OAAO,CAAC,GAAW;IAAE;IAAI,GAAG,EAAW,CAAE;GAAE,CAAC;EAC9C,CAAC,CACH;EAEA,SAAS,EAAW,GAA2B,GAAa;GAC1D,IAAM,IAAQ,EAAO,IAAI,CAAS;GAClC,AAAI,MAAO,EAAM,GAAG,QAAS,KAA6B;EAC5D;EAEA,SAAS,EAAU,GAA2B,GAAc;GAC1D,EAAO,IAAI,CAAS,CAAC,EAAE,UAAU,CAAK;EACxC;EAIA,IAAM,oBAAS,IAAI,IAA2C,GACxD,oBAAQ,IAAI,IAAY,GAExB,oBAAS,IAAI,IAAoB;EAEvC,SAAS,EAAmB,GAAiC;GAC3D,OAAO,EAAK,aAAa,EAAM;EACjC;EAEA,SAAS,EAAW,GAAiB;GACnC,IAAM,IAAW,EAAK,YAAY,EAAM;GACpC,KAAY,KAAK,EAAO,IAAI,EAAK,EAAE,KACvC,EAAO,IACL,EAAK,IACL,iBAAiB;IAEf,AADA,EAAO,OAAO,EAAK,EAAE,GACrB,EAAa,EAAK,EAAE;GACtB,GAAG,CAAQ,CACb;EACF;EAWA,SAAS,IAAO;GACd,IAAM,IAAQ,IAAI,IAAI,EAAO,KAAK,MAAS,EAAK,EAAE,CAAC;GACnD,KAAK,IAAM,CAAC,GAAI,MAAU,GACxB,AAAK,EAAM,IAAI,CAAE,MACf,aAAa,CAAK,GAClB,EAAO,OAAO,CAAE;GAGpB,KAAK,IAAM,KAAM,GAAO,AAAK,EAAM,IAAI,CAAE,KAAG,EAAM,OAAO,CAAE;GAC3D,KAAK,IAAM,KAAQ,GACb,EAAM,IAAI,EAAK,EAAE,MACrB,EAAM,IAAI,EAAK,EAAE,GACZ,EAAO,IAAI,EAAmB,CAAI,CAAC,KAAG,EAAW,CAAI;GAM5D,KAAK,IAAM,KAAa,GAAY;IAClC,IAAM,IAAQ,EAAO,IAAI,CAAS;IAC7B,GAAO,GAAG,WACV,EAAO,MAAM,IAAI,CAAS,CAAC,EAAE,UAAU,KAAK,IAAG,EAAM,KAAK,IAC1D,EAAM,KAAK;GAClB;EACF;EAWA,AAJA,EAAM,GAAQ,GAAM,EAAE,OAAO,OAAO,CAAC,GAIrC,EAAU,CAAI;EASd,SAAS,EAAM,GAA2B;GACxC,EAAO,IAAI,CAAS;GACpB,KAAK,IAAM,KAAQ,GAAQ;IACzB,IAAI,EAAmB,CAAI,MAAM,GAAW;IAC5C,IAAM,IAAQ,EAAO,IAAI,EAAK,EAAE;IAChC,AAAI,MAAU,KAAA,MACZ,aAAa,CAAK,GAClB,EAAO,OAAO,EAAK,EAAE;GAEzB;EACF;EAEA,SAAS,EAAO,GAA2B;GACzC,EAAO,OAAO,CAAS;GACvB,KAAK,IAAM,KAAQ,GACjB,AAAI,EAAmB,CAAI,MAAM,KAAW,EAAW,CAAI;EAE/D;SAIA,QAAsB;GACpB,KAAK,IAAM,KAAS,EAAO,OAAO,GAAG,aAAa,CAAK;GACvD,EAAO,MAAM;EACf,CAAC,mBAIC,EAqBM,GAAA,MAAA,EApBQ,IAAL,MADT,EAqBM,OAAA;GAnBH,KAAK;;GACL,MAAM,MAAO,EAAW,GAAG,CAAE;GAC9B,OAAM;GACN,SAAQ;GACP,kBAAgB;GACjB,MAAK;GACJ,cAAY,EAAA,CAAA;GACZ,iBAAY,MAAE,EAAM,CAAC;GACrB,iBAAY,MAAE,EAAO,CAAC;GACtB,iBAAY,MAAE,EAAU,GAAG,CAAM;GACjC,WAAM,MAAE,EAAU,GAAG,CAAM;cAE5B,EAME,GAAA,MAAA,EALe,EAAA,MAAO,IAAI,CAAC,KAAA,CAAA,IAApB,YADT,EAME,GAAA;GAJC,KAAK,EAAK;GACJ;GACN,eAAa,EAAA;GACb,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,CAAA,CAAY,CAAC,CAAM"}

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

@@ -0,0 +1,74 @@
+import { IconSource } from '../VIcon/types.js';
+/**
+ * The queue of notifications waiting to be shown. Nothing in HTML covers this, so it
+ * is code by necessity.
+ *
+ * The queue is held at module level rather than inside a component, and that is the
+ * whole point: `toast()` can then be called from ANYWHERE — a component, a store, an
+ * error handler in an API layer — 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, `toast()` 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 timers, is the
+ * mounted VToaster.
+ */
+export type ToastTone = 'neutral' | 'accent' | 'success' | 'danger' | 'warning';
+export type ToastPlacement = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+/** Everything one can say when raising a notification. */
+export interface ToastOptions {
+    /** What the notification says. */
+    message: string;
+    /** A short heading above the message, when the message alone needs framing. */
+    title?: string;
+    /** What the notification means, expressed as a colour, and which icon it takes by default. */
+    tone?: ToastTone;
+    /** How strongly it is painted: a tinted background with a border, or the full colour. */
+    variant?: 'soft' | 'solid';
+    /**
+     * The icon to show. Left out, the tone brings its own; `false` removes it
+     * altogether.
+     */
+    icon?: IconSource | false;
+    /**
+     * How long it stays, in milliseconds. Setting it to 0 keeps it until it is
+     * dismissed by hand, and leaving it out takes the duration set on the VToaster.
+     */
+    duration?: number;
+    /** Which corner it appears in. Left out, it takes the one set on the VToaster. */
+    placement?: ToastPlacement;
+    /** Shows the close cross. */
+    closable?: boolean;
+    /**
+     * How wide it is, as a CSS length. It is never allowed past the width of the
+     * viewport, margins included.
+     */
+    width?: string;
+}
+/**
+ * A notification once it is in the queue, with the choices the caller left out filled
+ * in and an id of its own. Internal: it is what VToaster renders.
+ */
+export interface ToastItem extends ToastOptions {
+    id: number;
+    tone: ToastTone;
+    variant: 'soft' | 'solid';
+    closable: boolean;
+}
+/** The queue itself. It is internal, read only by VToaster, and not public API. */
+export declare const toasts: import('vue').Reactive<ToastItem[]>;
+/**
+ * Raises a notification, and hands back an id that `dismissToast` can use to take it
+ * away again before its time.
+ *
+ * The two defaults that belong to the VToaster — where notifications appear and how
+ * long they stay — are deliberately NOT resolved here: they are read when the
+ * notification is rendered, so the toaster remains the single source of truth for its
+ * own settings.
+ */
+export declare function toast(options: ToastOptions): number;
+/**
+ * Takes a notification away by its id, or clears every one of them when called with
+ * no argument.
+ */
+export declare function dismissToast(id?: number): void;

package/dist/components/VToast/state.js

@@ -0,0 +1,25 @@
+import { reactive as e } from "vue";
+//#region src/components/VToast/state.ts
+var t = e([]), n = 0;
+function r(e) {
+	let r = n++;
+	return t.push({
+		tone: "neutral",
+		variant: "soft",
+		closable: !0,
+		...e,
+		id: r
+	}), r;
+}
+function i(e) {
+	if (e === void 0) {
+		t.length = 0;
+		return;
+	}
+	let n = t.findIndex((t) => t.id === e);
+	n !== -1 && t.splice(n, 1);
+}
+//#endregion
+export { i as dismissToast, r as toast, t as toasts };
+
+//# sourceMappingURL=state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","names":[],"sources":["../../../src/components/VToast/state.ts"],"sourcesContent":["import { reactive } from 'vue'\n\nimport type { IconSource } from '../VIcon/types'\n\n// @ssr @core\n/**\n * The queue of notifications waiting to be shown. Nothing in HTML covers this, so it\n * is code by necessity.\n *\n * The queue is held at module level rather than inside a component, and that is the\n * whole point: `toast()` can then be called from ANYWHERE — a component, a store, an\n * error handler in an API layer — 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, `toast()` must only ever be called in the browser, from a handler or\n * 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 timers, is the\n * mounted VToaster.\n */\n\nexport type ToastTone = 'neutral' | 'accent' | 'success' | 'danger' | 'warning'\n\nexport type ToastPlacement =\n  'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n\n/** Everything one can say when raising a notification. */\nexport interface ToastOptions {\n  /** What the notification says. */\n  message: string\n  /** A short heading above the message, when the message alone needs framing. */\n  title?: string\n  /** What the notification means, expressed as a colour, and which icon it takes by default. */\n  tone?: ToastTone\n  /** How strongly it is painted: a tinted background with a border, or the full colour. */\n  variant?: 'soft' | 'solid'\n  /**\n   * The icon to show. Left out, the tone brings its own; `false` removes it\n   * altogether.\n   */\n  icon?: IconSource | false\n  /**\n   * How long it stays, in milliseconds. Setting it to 0 keeps it until it is\n   * dismissed by hand, and leaving it out takes the duration set on the VToaster.\n   */\n  duration?: number\n  /** Which corner it appears in. Left out, it takes the one set on the VToaster. */\n  placement?: ToastPlacement\n  /** Shows the close cross. */\n  closable?: boolean\n  /**\n   * How wide it is, as a CSS length. It is never allowed past the width of the\n   * viewport, margins included.\n   */\n  width?: string\n}\n\n/**\n * A notification once it is in the queue, with the choices the caller left out filled\n * in and an id of its own. Internal: it is what VToaster renders.\n */\nexport interface ToastItem extends ToastOptions {\n  id: number\n  tone: ToastTone\n  variant: 'soft' | 'solid'\n  closable: boolean\n}\n\n/** The queue itself. It is internal, read only by VToaster, and not public API. */\nexport const toasts = reactive<ToastItem[]>([])\n\nlet nextId = 0\n\n/**\n * Raises a notification, and hands back an id that `dismissToast` can use to take it\n * away again before its time.\n *\n * The two defaults that belong to the VToaster — where notifications appear and how\n * long they stay — are deliberately NOT resolved here: they are read when the\n * notification is rendered, so the toaster remains the single source of truth for its\n * own settings.\n */\nexport function toast(options: ToastOptions): number {\n  const id = nextId++\n  toasts.push({ tone: 'neutral', variant: 'soft', closable: true, ...options, id })\n  return id\n}\n\n/**\n * Takes a notification away by its id, or clears every one of them when called with\n * no argument.\n */\nexport function dismissToast(id?: number): void {\n  if (id === undefined) {\n    toasts.length = 0\n    return\n  }\n  const index = toasts.findIndex((item) => item.id === id)\n  if (index !== -1) toasts.splice(index, 1)\n}\n"],"mappings":";;AAoEA,IAAa,IAAS,EAAsB,CAAC,CAAC,GAE1C,IAAS;AAWb,SAAgB,EAAM,GAA+B;CACnD,IAAM,IAAK;CAEX,OADA,EAAO,KAAK;EAAE,MAAM;EAAW,SAAS;EAAQ,UAAU;EAAM,GAAG;EAAS;CAAG,CAAC,GACzE;AACT;AAMA,SAAgB,EAAa,GAAmB;CAC9C,IAAI,MAAO,KAAA,GAAW;EACpB,EAAO,SAAS;EAChB;CACF;CACA,IAAM,IAAQ,EAAO,WAAW,MAAS,EAAK,OAAO,CAAE;CACvD,AAAI,MAAU,MAAI,EAAO,OAAO,GAAO,CAAC;AAC1C"}

package/dist/components/VToggle/VToggle.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-toggle:not(.v-button-group){align-items:center;gap:var(--vectis-space-1);display:inline-flex}.v-toggle:not(.v-button-group)[data-orientation=vertical]{flex-direction:column;align-items:stretch}}

package/dist/components/VToggle/VToggle.d.ts

@@ -0,0 +1,84 @@
+export type ToggleValue = string | number;
+/**
+ * What the v-model holds, which follows `multiple`: one value or nothing when a single
+ * choice is allowed, and a list of them when several are.
+ */
+export type ToggleModelValue = ToggleValue | ToggleValue[] | null;
+export type ToggleVariant = 'ghost' | 'outline';
+export type ToggleTone = 'accent' | 'neutral' | 'danger';
+export type ToggleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ToggleOrientation = 'horizontal' | 'vertical';
+interface ToggleProps {
+    /** Allows several items to be chosen at once, which makes the v-model a list. */
+    multiple?: boolean;
+    /**
+     * Refuses to let the last chosen item be given up, so that something is always
+     * selected once something has been. It is a guard and nothing more: it selects
+     * nothing on its own at the start.
+     */
+    mandatory?: boolean;
+    /**
+     * Joins the items into one segmented control. Turning it off leaves them as separate
+     * buttons with a gap between them.
+     */
+    attached?: boolean;
+    /** Whether the items run across the page or down it. */
+    orientation?: ToggleOrientation;
+    /**
+     * How the UNSELECTED items are drawn. A selected item is always filled, whatever
+     * this says.
+     */
+    variant?: ToggleVariant;
+    /** The colour a selected item takes. The others stay neutral. */
+    tone?: ToggleTone;
+    /** The height of the items, from the scale shared by every control. */
+    size?: ToggleSize;
+    /** Takes 4px off the height of every item. */
+    compact?: boolean;
+    /** Makes the whole group unusable. */
+    disabled?: boolean;
+    /**
+     * Draws the selected item's icon in its filled form, a common way of reinforcing
+     * that it is the one in effect.
+     */
+    selectedIconFilled?: boolean;
+    /**
+     * What screen readers announce for the group — "Text alignment", "Filters". It is
+     * strongly recommended: no default could say what a group of buttons is for.
+     */
+    label?: string;
+}
+type __VLS_Props = ToggleProps;
+type __VLS_Slots = {
+    /** The items of the group. */
+    default(): unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: ToggleModelValue;
+};
+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: ToggleModelValue) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: ToggleModelValue) => any) | undefined;
+}>, {
+    label: string;
+    size: ToggleSize;
+    variant: ToggleVariant;
+    tone: ToggleTone;
+    orientation: ToggleOrientation;
+    compact: boolean;
+    disabled: boolean;
+    attached: boolean;
+    multiple: boolean;
+    mandatory: boolean;
+    selectedIconFilled: 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/VToggle/VToggle.js

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

package/dist/components/VToggle/VToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VToggle.js","names":[],"sources":["../../../src/components/VToggle/VToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @core\n/**\n * A row of buttons where one — or several — stay pressed: choosing a text alignment,\n * a view, a set of filters. A single v-model holds what is chosen.\n *\n * Every item is a VButton, the selected one filled and the others quiet, and by\n * default the whole row is joined into one segmented control. Nothing about hovering,\n * focusing or disabling is written here: it all comes from VButton.\n *\n * The JavaScript covers the two things HTML has no answer for: what a click does to\n * the selection — toggling it off, or refusing to when the last choice may not be\n * given up — and moving between the items with the arrow keys.\n */\nimport { provide } from 'vue'\n\nimport VButtonGroup from '../VButton/VButtonGroup.vue'\nimport { toggleKey } from './context'\n\nimport { toggleValue } from '../../utils/array'\nimport { arrowNavigate, navigableItems } from '../../utils/arrowNav'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\n\nexport type ToggleValue = string | number\n/**\n * What the v-model holds, which follows `multiple`: one value or nothing when a single\n * choice is allowed, and a list of them when several are.\n */\nexport type ToggleModelValue = ToggleValue | ToggleValue[] | null\nexport type ToggleVariant = 'ghost' | 'outline'\nexport type ToggleTone = 'accent' | 'neutral' | 'danger'\nexport type ToggleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nexport type ToggleOrientation = 'horizontal' | 'vertical'\n\ninterface ToggleProps {\n  /** Allows several items to be chosen at once, which makes the v-model a list. */\n  multiple?: boolean\n  /**\n   * Refuses to let the last chosen item be given up, so that something is always\n   * selected once something has been. It is a guard and nothing more: it selects\n   * nothing on its own at the start.\n   */\n  mandatory?: boolean\n  /**\n   * Joins the items into one segmented control. Turning it off leaves them as separate\n   * buttons with a gap between them.\n   */\n  attached?: boolean\n  /** Whether the items run across the page or down it. */\n  orientation?: ToggleOrientation\n  /**\n   * How the UNSELECTED items are drawn. A selected item is always filled, whatever\n   * this says.\n   */\n  variant?: ToggleVariant\n  /** The colour a selected item takes. The others stay neutral. */\n  tone?: ToggleTone\n  /** The height of the items, from the scale shared by every control. */\n  size?: ToggleSize\n  /** Takes 4px off the height of every item. */\n  compact?: boolean\n  /** Makes the whole group unusable. */\n  disabled?: boolean\n  /**\n   * Draws the selected item's icon in its filled form, a common way of reinforcing\n   * that it is the one in effect.\n   */\n  selectedIconFilled?: boolean\n  /**\n   * What screen readers announce for the group — \"Text alignment\", \"Filters\". It is\n   * strongly recommended: no default could say what a group of buttons is for.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<ToggleProps>(), {\n  multiple: false,\n  mandatory: false,\n  attached: true,\n  orientation: 'horizontal',\n  variant: 'ghost',\n  tone: 'accent',\n  size: 'md',\n  compact: false,\n  disabled: false,\n  selectedIconFilled: false,\n  label: undefined,\n})\n\ndefineSlots<{\n  /** The items of the group. */\n  default(): unknown\n}>()\n\nconst model = defineModel<ToggleModelValue>({ default: null })\n\nconst ariaLabel = useAriaLabel(() => props.label)\n\nfunction isSelected(value: ToggleValue): boolean {\n  return props.multiple\n    ? Array.isArray(model.value) && model.value.includes(value)\n    : model.value === value\n}\n\n/*\n * What a click does to the selection.\n *\n * With several choices allowed, the list is NEVER changed in place: each write\n * produces a new one. That is what makes a consumer's own watchers and computed values\n * notice; mutating the existing list would leave some of them silent. A model still\n * holding a single value, or nothing, is treated as an empty list rather than\n * refused.\n *\n * There is no check for the disabled state here, and none is needed: a disabled button\n * emits no click at all.\n */\nfunction select(value: ToggleValue) {\n  if (props.multiple) {\n    const current = Array.isArray(model.value) ? model.value : []\n    if (props.mandatory && current.length === 1 && current.includes(value)) return\n    model.value = toggleValue(current, value)\n    return\n  }\n  if (model.value === value) {\n    if (!props.mandatory) model.value = null\n    return\n  }\n  model.value = value\n}\n\nprovide(toggleKey, {\n  isSelected,\n  select,\n  get variant() {\n    return props.variant\n  },\n  get tone() {\n    return props.tone\n  },\n  get size() {\n    return props.size\n  },\n  get compact() {\n    return props.compact\n  },\n  get disabled() {\n    return props.disabled\n  },\n  get selectedIconFilled() {\n    return props.selectedIconFilled\n  },\n})\n\n// @keyboard @a11y\n/*\n * The arrow keys, through the shared implementation in `utils/arrowNav`.\n *\n * Every visible item stays a stop in the tab order here — the VPagination model. The\n * single-stop treatment is reserved for the patterns that require it, a row of tabs or\n * a radio group, and a group of buttons is neither. Disabled items are really disabled\n * buttons, which the selector leaves out.\n *\n * The container is read from the event rather than kept as a reference, because the\n * root is rendered dynamically: a reference would hand back sometimes a plain element,\n * sometimes a component instance.\n */\nfunction onKeydown(event: KeyboardEvent) {\n  const group = event.currentTarget as HTMLElement\n  arrowNavigate(event, group, navigableItems(group, '.v-toggle-item:not(:disabled)'), {\n    vertical: props.orientation === 'vertical',\n  })\n}\n</script>\n\n<template>\n  <!-- Joined, the row is a VButtonGroup, which merges the borders of its DIRECT\n       button children — which is why an item renders the button as its own root, with\n       no wrapper in between.\n\n       The orientation is passed through ONE key or the other, never both: an\n       attribute bound to `undefined` would still be forwarded and would overwrite the\n       one VButtonGroup sets for itself. So the group receives a prop, and the plain\n       container an attribute.\n\n       The role is needed for the plain container, and simply repeats what\n       VButtonGroup already sets when the row is joined. -->\n  <component\n    :is=\"attached ? VButtonGroup : 'div'\"\n    v-bind=\"attached ? { orientation } : { 'data-orientation': orientation }\"\n    class=\"v-toggle\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * These rules are for the separated row alone, and the exclusion is what makes that\n   * true: when the row is joined, the root carries BOTH classes at once. Without it,\n   * the centring here and the stretching VButtonGroup declares would collide at equal\n   * specificity, and the winner would be decided by whichever sheet the consumer's\n   * bundler put last.\n   */\n  .v-toggle:not(.v-button-group) {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n  }\n\n  .v-toggle:not(.v-button-group)[data-orientation='vertical'] {\n    flex-direction: column;\n    align-items: stretch;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VToggle/VToggle.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,103 @@
+import e from "../VButton/VButtonGroup.js";
+import { arrowNavigate as t, navigableItems as n } from "../../utils/arrowNav.js";
+import { useAriaLabel as r } from "../../composables/useAriaLabel.js";
+import { toggleKey as i } from "./context.js";
+import { toggleValue as a } from "../../utils/array.js";
+import { createBlock as o, defineComponent as s, mergeModels as c, mergeProps as l, openBlock as u, provide as d, renderSlot as f, resolveDynamicComponent as p, unref as m, useModel as h, withCtx as g } from "vue";
+//#region src/components/VToggle/VToggle.vue?vue&type=script&setup=true&lang.ts
+var _ = /*@__PURE__*/ s({
+	__name: "VToggle",
+	props: /*@__PURE__*/ c({
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		mandatory: {
+			type: Boolean,
+			default: !1
+		},
+		attached: {
+			type: Boolean,
+			default: !0
+		},
+		orientation: { default: "horizontal" },
+		variant: { default: "ghost" },
+		tone: { default: "accent" },
+		size: { default: "md" },
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		selectedIconFilled: {
+			type: Boolean,
+			default: !1
+		},
+		label: { default: void 0 }
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(s) {
+		let c = s, _ = h(s, "modelValue"), v = r(() => c.label);
+		function y(e) {
+			return c.multiple ? Array.isArray(_.value) && _.value.includes(e) : _.value === e;
+		}
+		function b(e) {
+			if (c.multiple) {
+				let t = Array.isArray(_.value) ? _.value : [];
+				if (c.mandatory && t.length === 1 && t.includes(e)) return;
+				_.value = a(t, e);
+				return;
+			}
+			if (_.value === e) {
+				c.mandatory || (_.value = null);
+				return;
+			}
+			_.value = e;
+		}
+		d(i, {
+			isSelected: y,
+			select: b,
+			get variant() {
+				return c.variant;
+			},
+			get tone() {
+				return c.tone;
+			},
+			get size() {
+				return c.size;
+			},
+			get compact() {
+				return c.compact;
+			},
+			get disabled() {
+				return c.disabled;
+			},
+			get selectedIconFilled() {
+				return c.selectedIconFilled;
+			}
+		});
+		function x(e) {
+			let r = e.currentTarget;
+			t(e, r, n(r, ".v-toggle-item:not(:disabled)"), { vertical: c.orientation === "vertical" });
+		}
+		return (t, n) => (u(), o(p(s.attached ? e : "div"), l(s.attached ? { orientation: s.orientation } : { "data-orientation": s.orientation }, {
+			class: "v-toggle",
+			role: "group",
+			"aria-label": m(v),
+			onKeydown: x
+		}), {
+			default: g(() => [f(t.$slots, "default")]),
+			_: 3
+		}, 16, ["aria-label"]));
+	}
+});
+//#endregion
+export { _ as default };
+
+//# sourceMappingURL=VToggle.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VToggle.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VToggle/VToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @core\n/**\n * A row of buttons where one — or several — stay pressed: choosing a text alignment,\n * a view, a set of filters. A single v-model holds what is chosen.\n *\n * Every item is a VButton, the selected one filled and the others quiet, and by\n * default the whole row is joined into one segmented control. Nothing about hovering,\n * focusing or disabling is written here: it all comes from VButton.\n *\n * The JavaScript covers the two things HTML has no answer for: what a click does to\n * the selection — toggling it off, or refusing to when the last choice may not be\n * given up — and moving between the items with the arrow keys.\n */\nimport { provide } from 'vue'\n\nimport VButtonGroup from '../VButton/VButtonGroup.vue'\nimport { toggleKey } from './context'\n\nimport { toggleValue } from '../../utils/array'\nimport { arrowNavigate, navigableItems } from '../../utils/arrowNav'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\n\nexport type ToggleValue = string | number\n/**\n * What the v-model holds, which follows `multiple`: one value or nothing when a single\n * choice is allowed, and a list of them when several are.\n */\nexport type ToggleModelValue = ToggleValue | ToggleValue[] | null\nexport type ToggleVariant = 'ghost' | 'outline'\nexport type ToggleTone = 'accent' | 'neutral' | 'danger'\nexport type ToggleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nexport type ToggleOrientation = 'horizontal' | 'vertical'\n\ninterface ToggleProps {\n  /** Allows several items to be chosen at once, which makes the v-model a list. */\n  multiple?: boolean\n  /**\n   * Refuses to let the last chosen item be given up, so that something is always\n   * selected once something has been. It is a guard and nothing more: it selects\n   * nothing on its own at the start.\n   */\n  mandatory?: boolean\n  /**\n   * Joins the items into one segmented control. Turning it off leaves them as separate\n   * buttons with a gap between them.\n   */\n  attached?: boolean\n  /** Whether the items run across the page or down it. */\n  orientation?: ToggleOrientation\n  /**\n   * How the UNSELECTED items are drawn. A selected item is always filled, whatever\n   * this says.\n   */\n  variant?: ToggleVariant\n  /** The colour a selected item takes. The others stay neutral. */\n  tone?: ToggleTone\n  /** The height of the items, from the scale shared by every control. */\n  size?: ToggleSize\n  /** Takes 4px off the height of every item. */\n  compact?: boolean\n  /** Makes the whole group unusable. */\n  disabled?: boolean\n  /**\n   * Draws the selected item's icon in its filled form, a common way of reinforcing\n   * that it is the one in effect.\n   */\n  selectedIconFilled?: boolean\n  /**\n   * What screen readers announce for the group — \"Text alignment\", \"Filters\". It is\n   * strongly recommended: no default could say what a group of buttons is for.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<ToggleProps>(), {\n  multiple: false,\n  mandatory: false,\n  attached: true,\n  orientation: 'horizontal',\n  variant: 'ghost',\n  tone: 'accent',\n  size: 'md',\n  compact: false,\n  disabled: false,\n  selectedIconFilled: false,\n  label: undefined,\n})\n\ndefineSlots<{\n  /** The items of the group. */\n  default(): unknown\n}>()\n\nconst model = defineModel<ToggleModelValue>({ default: null })\n\nconst ariaLabel = useAriaLabel(() => props.label)\n\nfunction isSelected(value: ToggleValue): boolean {\n  return props.multiple\n    ? Array.isArray(model.value) && model.value.includes(value)\n    : model.value === value\n}\n\n/*\n * What a click does to the selection.\n *\n * With several choices allowed, the list is NEVER changed in place: each write\n * produces a new one. That is what makes a consumer's own watchers and computed values\n * notice; mutating the existing list would leave some of them silent. A model still\n * holding a single value, or nothing, is treated as an empty list rather than\n * refused.\n *\n * There is no check for the disabled state here, and none is needed: a disabled button\n * emits no click at all.\n */\nfunction select(value: ToggleValue) {\n  if (props.multiple) {\n    const current = Array.isArray(model.value) ? model.value : []\n    if (props.mandatory && current.length === 1 && current.includes(value)) return\n    model.value = toggleValue(current, value)\n    return\n  }\n  if (model.value === value) {\n    if (!props.mandatory) model.value = null\n    return\n  }\n  model.value = value\n}\n\nprovide(toggleKey, {\n  isSelected,\n  select,\n  get variant() {\n    return props.variant\n  },\n  get tone() {\n    return props.tone\n  },\n  get size() {\n    return props.size\n  },\n  get compact() {\n    return props.compact\n  },\n  get disabled() {\n    return props.disabled\n  },\n  get selectedIconFilled() {\n    return props.selectedIconFilled\n  },\n})\n\n// @keyboard @a11y\n/*\n * The arrow keys, through the shared implementation in `utils/arrowNav`.\n *\n * Every visible item stays a stop in the tab order here — the VPagination model. The\n * single-stop treatment is reserved for the patterns that require it, a row of tabs or\n * a radio group, and a group of buttons is neither. Disabled items are really disabled\n * buttons, which the selector leaves out.\n *\n * The container is read from the event rather than kept as a reference, because the\n * root is rendered dynamically: a reference would hand back sometimes a plain element,\n * sometimes a component instance.\n */\nfunction onKeydown(event: KeyboardEvent) {\n  const group = event.currentTarget as HTMLElement\n  arrowNavigate(event, group, navigableItems(group, '.v-toggle-item:not(:disabled)'), {\n    vertical: props.orientation === 'vertical',\n  })\n}\n</script>\n\n<template>\n  <!-- Joined, the row is a VButtonGroup, which merges the borders of its DIRECT\n       button children — which is why an item renders the button as its own root, with\n       no wrapper in between.\n\n       The orientation is passed through ONE key or the other, never both: an\n       attribute bound to `undefined` would still be forwarded and would overwrite the\n       one VButtonGroup sets for itself. So the group receives a prop, and the plain\n       container an attribute.\n\n       The role is needed for the plain container, and simply repeats what\n       VButtonGroup already sets when the row is joined. -->\n  <component\n    :is=\"attached ? VButtonGroup : 'div'\"\n    v-bind=\"attached ? { orientation } : { 'data-orientation': orientation }\"\n    class=\"v-toggle\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * These rules are for the separated row alone, and the exclusion is what makes that\n   * true: when the row is joined, the root carries BOTH classes at once. Without it,\n   * the centring here and the stretching VButtonGroup declares would collide at equal\n   * specificity, and the winner would be decided by whichever sheet the consumer's\n   * bundler put last.\n   */\n  .v-toggle:not(.v-button-group) {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n  }\n\n  .v-toggle:not(.v-button-group)[data-orientation='vertical'] {\n    flex-direction: column;\n    align-items: stretch;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4EA,IAAM,IAAQ,GAmBR,IAAQ,EAA6B,GAAA,YAAkB,GAEvD,IAAY,QAAmB,EAAM,KAAK;EAEhD,SAAS,EAAW,GAA6B;GAC/C,OAAO,EAAM,WACT,MAAM,QAAQ,EAAM,KAAK,KAAK,EAAM,MAAM,SAAS,CAAK,IACxD,EAAM,UAAU;EACtB;EAcA,SAAS,EAAO,GAAoB;GAClC,IAAI,EAAM,UAAU;IAClB,IAAM,IAAU,MAAM,QAAQ,EAAM,KAAK,IAAI,EAAM,QAAQ,CAAC;IAC5D,IAAI,EAAM,aAAa,EAAQ,WAAW,KAAK,EAAQ,SAAS,CAAK,GAAG;IACxE,EAAM,QAAQ,EAAY,GAAS,CAAK;IACxC;GACF;GACA,IAAI,EAAM,UAAU,GAAO;IACzB,AAAK,EAAM,cAAW,EAAM,QAAQ;IACpC;GACF;GACA,EAAM,QAAQ;EAChB;EAEA,EAAQ,GAAW;GACjB;GACA;GACA,IAAI,UAAU;IACZ,OAAO,EAAM;GACf;GACA,IAAI,OAAO;IACT,OAAO,EAAM;GACf;GACA,IAAI,OAAO;IACT,OAAO,EAAM;GACf;GACA,IAAI,UAAU;IACZ,OAAO,EAAM;GACf;GACA,IAAI,WAAW;IACb,OAAO,EAAM;GACf;GACA,IAAI,qBAAqB;IACvB,OAAO,EAAM;GACf;EACF,CAAC;EAeD,SAAS,EAAU,GAAsB;GACvC,IAAM,IAAQ,EAAM;GACpB,EAAc,GAAO,GAAO,EAAe,GAAO,+BAA+B,GAAG,EAClF,UAAU,EAAM,gBAAgB,WAClC,CAAC;EACH;yBAeE,EASY,EARL,EAAA,WAAW,IAAY,KAAA,GAD9B,EAEU,EAOE,WAPM,EAAA,aAAK,EAAA,YAAW,IAAA,EAAA,oBAA2B,EAAA,YAAW,GAAA;GACtE,OAAM;GACN,MAAK;GACJ,cAAY,EAAA,CAAA;GACH;;oBAEF,CAAR,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/components/VToggle/VToggleItem.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-toggle-item[data-size][data-icon-only]{min-inline-size:var(--control-height);padding-inline:0}}

package/dist/components/VToggle/VToggleItem.d.ts

@@ -0,0 +1,35 @@
+import { IconSource } from '../VIcon/types.js';
+import { ToggleValue } from './VToggle.js';
+interface ToggleItemProps {
+    /**
+     * What choosing this item means. It is what the group's v-model holds when the item
+     * is selected, and it must be unique within the group.
+     */
+    value: ToggleValue;
+    /** The visible label. The default slot replaces it. */
+    label?: string;
+    /** An icon before the label: an icon name, or an explicit render. */
+    icon?: IconSource;
+    /**
+     * Makes this item unusable: it no longer responds, the arrow keys skip over it, and
+     * it greys out through the colour tokens.
+     */
+    disabled?: boolean;
+}
+type __VLS_Slots = {
+    /** The content of the item, replacing the `label` prop. */
+    default?(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<ToggleItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ToggleItemProps> & Readonly<{}>, {
+    label: string;
+    disabled: boolean;
+    icon: 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/VToggle/VToggleItem.js

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

package/dist/components/VToggle/VToggleItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VToggleItem.js","names":[],"sources":["../../../src/components/VToggle/VToggleItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * One item of a VToggle. It IS a VButton — the colour, the size, the focus ring and\n * the disabled state all come from there — and what this component adds is the one\n * attribute saying whether the button is currently pressed.\n *\n * That button is also this component's own root element, with nothing wrapped around\n * it, which is what lets the group merge the borders of neighbouring items: it only\n * joins its DIRECT children.\n *\n * Used outside a VToggle it still renders perfectly well, simply never selected, the\n * same way a tab does outside its row.\n */\nimport { computed, inject, useSlots } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport { toggleKey } from './context'\nimport type { ToggleValue } from './VToggle.vue'\n\ninterface ToggleItemProps {\n  /**\n   * What choosing this item means. It is what the group's v-model holds when the item\n   * is selected, and it must be unique within the group.\n   */\n  value: ToggleValue\n  /** The visible label. The default slot replaces it. */\n  label?: string\n  /** An icon before the label: an icon name, or an explicit render. */\n  icon?: IconSource\n  /**\n   * Makes this item unusable: it no longer responds, the arrow keys skip over it, and\n   * it greys out through the colour tokens.\n   */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<ToggleItemProps>(), {\n  label: undefined,\n  icon: undefined,\n  disabled: false,\n})\n\ndefineSlots<{\n  /** The content of the item, replacing the `label` prop. */\n  default?(): unknown\n}>()\n\nconst slots = useSlots()\nconst toggle = inject(toggleKey, null)\n\nconst selected = computed(() => toggle != null && toggle.isSelected(props.value))\n\n/** An icon and no label at all: the item becomes a square, like a VIconButton. */\nconst iconOnly = computed(() => Boolean(props.icon) && !props.label && !slots.default)\n</script>\n\n<template>\n  <!-- The pressed state is always rendered, false included: it is its PRESENCE that\n       makes a screen reader announce the button as one that stays pressed, and an\n       attribute appearing only when true would leave the unselected items announced\n       as ordinary buttons.\n\n       The filled form is asked of the icon directly, because VButton's own icon\n       options have no effect on an icon handed to it through a slot. -->\n  <VButton\n    class=\"v-toggle-item\"\n    :aria-pressed=\"selected ? 'true' : 'false'\"\n    :variant=\"selected ? 'solid' : (toggle?.variant ?? 'ghost')\"\n    :tone=\"selected ? (toggle?.tone ?? 'accent') : 'neutral'\"\n    :size=\"toggle?.size ?? 'md'\"\n    :compact=\"toggle?.compact ?? false\"\n    :disabled=\"disabled || toggle?.disabled\"\n    :data-icon-only=\"iconOnly ? '' : undefined\"\n    @click=\"toggle?.select(value)\"\n  >\n    <template v-if=\"icon\" #start>\n      <VIcon v-bind=\"iconProps(icon)\" :filled=\"selected && (toggle?.selectedIconFilled ?? false)\" />\n    </template>\n    <slot v-if=\"!iconOnly\">{{ label }}</slot>\n  </VButton>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * An item reduced to its icon becomes a square, like a VIconButton. The selector is\n   * qualified by an attribute VButton always renders, which is what makes it beat that\n   * button's own padding whatever order the two sheets end up in.\n   */\n  .v-toggle-item[data-size][data-icon-only] {\n    padding-inline: 0;\n    min-inline-size: var(--control-height);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VToggle/VToggleItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,51 @@
+import e from "../VIcon/VIcon.js";
+import { iconProps as t } from "../VIcon/iconProps.js";
+import n from "../VButton/VButton.js";
+import { toggleKey as r } from "./context.js";
+import { computed as i, createBlock as a, createCommentVNode as o, createSlots as s, createTextVNode as c, createVNode as l, defineComponent as u, inject as d, mergeProps as f, openBlock as p, renderSlot as m, toDisplayString as h, unref as g, useSlots as _, withCtx as v } from "vue";
+//#region src/components/VToggle/VToggleItem.vue?vue&type=script&setup=true&lang.ts
+var y = /*@__PURE__*/ u({
+	__name: "VToggleItem",
+	props: {
+		value: {},
+		label: { default: void 0 },
+		icon: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(u) {
+		let y = u, b = _(), x = d(r, null), S = i(() => x != null && x.isSelected(y.value)), C = i(() => !!y.icon && !y.label && !b.default);
+		return (r, i) => (p(), a(n, {
+			class: "v-toggle-item",
+			"aria-pressed": S.value ? "true" : "false",
+			variant: S.value ? "solid" : g(x)?.variant ?? "ghost",
+			tone: S.value ? g(x)?.tone ?? "accent" : "neutral",
+			size: g(x)?.size ?? "md",
+			compact: g(x)?.compact ?? !1,
+			disabled: u.disabled || g(x)?.disabled,
+			"data-icon-only": C.value ? "" : void 0,
+			onClick: i[0] ||= (e) => g(x)?.select(u.value)
+		}, s({
+			default: v(() => [C.value ? o("", !0) : m(r.$slots, "default", {}, () => [c(h(u.label), 1)], void 0, 0)]),
+			_: 2
+		}, [u.icon ? {
+			name: "start",
+			fn: v(() => [l(e, f(g(t)(u.icon), { filled: S.value && (g(x)?.selectedIconFilled ?? !1) }), null, 16, ["filled"])]),
+			key: "0"
+		} : void 0]), 1032, [
+			"aria-pressed",
+			"variant",
+			"tone",
+			"size",
+			"compact",
+			"disabled",
+			"data-icon-only"
+		]));
+	}
+});
+//#endregion
+export { y as default };
+
+//# sourceMappingURL=VToggleItem.vue_vue_type_script_setup_true_lang.js.map