vectis-ui 0.1.0 → 0.8.0

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

@@ -1 +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":""}
+{"version":3,"file":"VToaster.js","names":[],"sources":["../../../src/components/VToast/VToaster.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * Where notifications appear: mounted ONCE at the root, after which every `toast()` call\n * shows up here.\n *\n * One container per placement rather than one popover per notification, each stacking its\n * own with CSS. These boxes are drawn above the page at physical coordinates, anchored to\n * nothing, so individually they would all land on the same spot and keeping them apart would\n * mean measuring and offsetting each in code. The six exist at all times; empty, they cost\n * nothing and are not displayed.\n *\n * The JS covers three things the platform does not: keeping the queue and the containers in\n * step, the popover being imperative; the per-notification dismissal timers; and holding\n * them while the pointer rests on a stack OR the keyboard is inside it, so something that\n * disappears on a clock can be read and closed (WCAG 2.2.1).\n */\n\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\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 = effectivePlacement(item)\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/* The six containers, collected by the `v-for` itself. A plain template ref rather than a\n   function one: a function written inline in the template is a new function on every\n   render, which Vue answers by calling the old one with null and the new one with the\n   element — twelve calls each time a notification comes or goes. */\nconst stackEls = ref<HTMLElement[]>([])\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 element is looked up by its placement rather than by its index: Vue does not\n * promise that a `v-for` ref array follows the order of the list.\n *\n * The containers being permanent, this runs once and never again.\n */\nconst stacks = new Map(\n  PLACEMENTS.map((placement) => {\n    const el = computed(\n      () => stackEls.value.find((stack) => stack.dataset.placement === placement) ?? null,\n    )\n    return [placement, { el, ...usePopover(el) }] as const\n  }),\n)\n\nfunction syncStack(placement: ToastPlacement, event: Event) {\n  stacks.get(placement)?.syncShown(event)\n}\n\n/* The running countdowns, one per notification. */\nconst timers = new Map<number, ReturnType<typeof setTimeout>>()\n/* The corners holding their countdowns, one set per reason. Two sets rather than one\n   because the reasons overlap and end independently: a reader tabs to a close cross, then\n   moves the pointer over the stack and away, and the corner must stay held while the cross\n   still has the focus — VSnackbar's two flags, per corner. */\nconst hovered = new Set<ToastPlacement>()\nconst focused = new Set<ToastPlacement>()\n\nfunction effectivePlacement(item: ToastItem): ToastPlacement {\n  return item.placement ?? props.placement\n}\n\nconst isHeld = (placement: ToastPlacement) => hovered.has(placement) || focused.has(placement)\n\nfunction stopTimer(id: number) {\n  const timer = timers.get(id)\n  if (timer === undefined) return\n  clearTimeout(timer)\n  timers.delete(id)\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 throws away the countdowns of the\n * notifications that have gone, gives every other one a countdown exactly when its corner\n * is not held, and then shows the corners holding something while hiding the empty ones.\n *\n * TRAP — the countdown follows the corner a notification is in NOW, re-derived on every\n * pass rather than remembered per notification. The default corner is a prop, so a\n * notification can change corner while the pointer rests on the old one: a memory of\n * \"already armed\" then outlived the countdown the hold had cancelled, the release looked\n * in the old corner, and the notification never got a countdown again.\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 of timers.keys()) if (!alive.has(id)) stopTimer(id)\n\n  for (const placement of PLACEMENTS) {\n    const stackEl = stacks.get(placement)?.el.value\n    // TRAP — a hold is dropped here as soon as it can no longer be true, rather than\n    // trusted to its closing event. A close cross leaves the page while it has the focus,\n    // and an engine that sends no `focusout` for a removed element would keep the corner\n    // held for good; an emptied stack is hidden under the pointer, with no `pointerleave`.\n    if (!stackEl?.contains(document.activeElement)) focused.delete(placement)\n    if ((groups.value.get(placement)?.length ?? 0) === 0) hovered.delete(placement)\n  }\n\n  for (const item of toasts) {\n    if (isHeld(effectivePlacement(item))) stopTimer(item.id)\n    else 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, and so does moving the keyboard\n * into it: each notification carries a close cross, a real button a reader tabs to, which\n * would otherwise vanish from under the focus ring. The same verbs and the same two\n * reasons as VSnackbar.\n *\n * Leaving restarts them from the FULL duration rather than from what was left: simpler,\n * and more generous to the reader who has just interrupted themselves.\n */\nfunction hold(placement: ToastPlacement, which: 'pointer' | 'focus') {\n  const reason = which === 'pointer' ? hovered : focused\n  reason.add(placement)\n  for (const item of groups.value.get(placement) ?? []) stopTimer(item.id)\n}\n\nfunction release(placement: ToastPlacement, which: 'pointer' | 'focus') {\n  const reason = which === 'pointer' ? hovered : focused\n  reason.delete(placement)\n  if (isHeld(placement)) return\n  for (const item of groups.value.get(placement) ?? []) startTimer(item)\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=\"stackEls\"\n    class=\"v-overlay v-toast-stack\"\n    popover=\"manual\"\n    :data-placement=\"p\"\n    role=\"region\"\n    :aria-label=\"ariaLabel\"\n    @pointerenter=\"hold(p, 'pointer')\"\n    @pointerleave=\"release(p, 'pointer')\"\n    @focusin=\"hold(p, 'focus')\"\n    @focusout=\"release(p, 'focus')\"\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  /*\n   * The container. Its rules are an ALIGNED COPY of VSnackbar's host: the two containers are the\n   * same object, a popover at a physical corner that fades when it empties, and the copy is\n   * kept line for line, the one difference being the top edge, which a confirmation never takes.\n   * They are not factored into styles/banner.css because that sheet is paid for by every\n   * consumer, and these rules cost more than the size gate allows; change one, change the other.\n   *\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 is undone here is the browser's own\n   * popover decoration: its border, its padding, its opaque background.\n   */\n  .v-toast-stack {\n    margin: 0;\n    border: none;\n    padding: 0;\n    background: transparent;\n    overflow: visible;\n    width: fit-content;\n  }\n\n  /*\n   * PHYSICAL coordinates rather than logical ones: a message appears at a place on the\n   * screen, and that place does not flip with the reading direction — the operating\n   * system's own notifications behave the same way.\n   *\n   * `--banner-enter-y` is the direction each card slides in from, read by `.v-banner` in\n   * styles/banner.css: the container is the only thing that knows which edge of the screen\n   * it sits on. That sheet reads it with a `, 0` fallback, so dropping the declaration costs\n   * the slide and nothing else, and nothing reports it.\n   */\n  .v-toast-stack[data-placement^='top-'] {\n    top: var(--vectis-space-4);\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 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-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  /* The stack's own layout, which the snackbar's single bar has no use for. The newest\n     notification should sit nearest the screen edge; the queue only ever grows at the end,\n     so a stack along the top is simply drawn in reverse. */\n  .v-toast-stack {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-3);\n  }\n\n  .v-toast-stack[data-placement^='top-'] {\n    flex-direction: column-reverse;\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -10,6 +10,8 @@ var y = [
 	"aria-label",
 	"onPointerenter",
 	"onPointerleave",
+	"onFocusin",
+	"onFocusout",
 	"onBeforetoggle",
 	"onToggle"
 ], b = /*@__PURE__*/ d({
@@ -31,56 +33,52 @@ var y = [
 		], T = s(() => {
 			let e = /* @__PURE__ */ new Map();
 			for (let t of a) {
-				let n = t.placement ?? b.placement, r = e.get(n);
+				let n = M(t), r = e.get(n);
 				r ? r.push(t) : e.set(n, [t]);
 			}
 			return e;
-		}), E = new Map(w.map((e) => {
-			let n = h(null);
+		}), E = h([]), D = new Map(w.map((e) => {
+			let n = s(() => E.value.find((t) => t.dataset.placement === e) ?? 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);
+			D.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 N = (e) => A.has(e) || j.has(e);
+		function P(e) {
+			let t = k.get(e);
+			t !== void 0 && (clearTimeout(t), k.delete(e));
+		}
+		function F(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() {
+		function I() {
 			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 t of k.keys()) e.has(t) || P(t);
+			for (let e of w) (D.get(e)?.el.value)?.contains(document.activeElement) || j.delete(e), (T.value.get(e)?.length ?? 0) === 0 && A.delete(e);
+			for (let e of a) N(M(e)) ? P(e.id) : F(e);
 			for (let e of w) {
-				let t = E.get(e);
+				let t = D.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));
-			}
+		v(T, I, { flush: "post" }), p(I);
+		function L(e, t) {
+			(t === "pointer" ? A : j).add(e);
+			for (let t of T.value.get(e) ?? []) P(t.id);
 		}
-		function I(e) {
-			j.delete(e);
-			for (let t of a) M(t) === e && N(t);
+		function R(e, t) {
+			if ((t === "pointer" ? A : j).delete(e), !N(e)) for (let t of T.value.get(e) ?? []) F(t);
 		}
 		return f(() => {
 			for (let e of k.values()) clearTimeout(e);
@@ -88,14 +86,17 @@ var y = [
 		}), (e, t) => (m(), l(o, null, g(w, (e) => u("div", {
 			key: e,
 			ref_for: !0,
-			ref: (t) => D(e, t),
+			ref_key: "stackEls",
+			ref: E,
 			class: "v-overlay v-toast-stack",
 			popover: "manual",
 			"data-placement": e,
 			role: "region",
 			"aria-label": _(S),
-			onPointerenter: (t) => F(e),
-			onPointerleave: (t) => I(e),
+			onPointerenter: (t) => L(e, "pointer"),
+			onPointerleave: (t) => R(e, "pointer"),
+			onFocusin: (t) => L(e, "focus"),
+			onFocusout: (t) => R(e, "focus"),
 			onBeforetoggle: (t) => O(e, t),
 			onToggle: (t) => O(e, t)
 		}, [(m(!0), l(o, null, g(T.value.get(e) ?? [], (e) => (m(), c(r, {

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

@@ -1 +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":"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"}
+{"version":3,"file":"VToaster.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VToast/VToaster.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * Where notifications appear: mounted ONCE at the root, after which every `toast()` call\n * shows up here.\n *\n * One container per placement rather than one popover per notification, each stacking its\n * own with CSS. These boxes are drawn above the page at physical coordinates, anchored to\n * nothing, so individually they would all land on the same spot and keeping them apart would\n * mean measuring and offsetting each in code. The six exist at all times; empty, they cost\n * nothing and are not displayed.\n *\n * The JS covers three things the platform does not: keeping the queue and the containers in\n * step, the popover being imperative; the per-notification dismissal timers; and holding\n * them while the pointer rests on a stack OR the keyboard is inside it, so something that\n * disappears on a clock can be read and closed (WCAG 2.2.1).\n */\n\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\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 = effectivePlacement(item)\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/* The six containers, collected by the `v-for` itself. A plain template ref rather than a\n   function one: a function written inline in the template is a new function on every\n   render, which Vue answers by calling the old one with null and the new one with the\n   element — twelve calls each time a notification comes or goes. */\nconst stackEls = ref<HTMLElement[]>([])\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 element is looked up by its placement rather than by its index: Vue does not\n * promise that a `v-for` ref array follows the order of the list.\n *\n * The containers being permanent, this runs once and never again.\n */\nconst stacks = new Map(\n  PLACEMENTS.map((placement) => {\n    const el = computed(\n      () => stackEls.value.find((stack) => stack.dataset.placement === placement) ?? null,\n    )\n    return [placement, { el, ...usePopover(el) }] as const\n  }),\n)\n\nfunction syncStack(placement: ToastPlacement, event: Event) {\n  stacks.get(placement)?.syncShown(event)\n}\n\n/* The running countdowns, one per notification. */\nconst timers = new Map<number, ReturnType<typeof setTimeout>>()\n/* The corners holding their countdowns, one set per reason. Two sets rather than one\n   because the reasons overlap and end independently: a reader tabs to a close cross, then\n   moves the pointer over the stack and away, and the corner must stay held while the cross\n   still has the focus — VSnackbar's two flags, per corner. */\nconst hovered = new Set<ToastPlacement>()\nconst focused = new Set<ToastPlacement>()\n\nfunction effectivePlacement(item: ToastItem): ToastPlacement {\n  return item.placement ?? props.placement\n}\n\nconst isHeld = (placement: ToastPlacement) => hovered.has(placement) || focused.has(placement)\n\nfunction stopTimer(id: number) {\n  const timer = timers.get(id)\n  if (timer === undefined) return\n  clearTimeout(timer)\n  timers.delete(id)\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 throws away the countdowns of the\n * notifications that have gone, gives every other one a countdown exactly when its corner\n * is not held, and then shows the corners holding something while hiding the empty ones.\n *\n * TRAP — the countdown follows the corner a notification is in NOW, re-derived on every\n * pass rather than remembered per notification. The default corner is a prop, so a\n * notification can change corner while the pointer rests on the old one: a memory of\n * \"already armed\" then outlived the countdown the hold had cancelled, the release looked\n * in the old corner, and the notification never got a countdown again.\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 of timers.keys()) if (!alive.has(id)) stopTimer(id)\n\n  for (const placement of PLACEMENTS) {\n    const stackEl = stacks.get(placement)?.el.value\n    // TRAP — a hold is dropped here as soon as it can no longer be true, rather than\n    // trusted to its closing event. A close cross leaves the page while it has the focus,\n    // and an engine that sends no `focusout` for a removed element would keep the corner\n    // held for good; an emptied stack is hidden under the pointer, with no `pointerleave`.\n    if (!stackEl?.contains(document.activeElement)) focused.delete(placement)\n    if ((groups.value.get(placement)?.length ?? 0) === 0) hovered.delete(placement)\n  }\n\n  for (const item of toasts) {\n    if (isHeld(effectivePlacement(item))) stopTimer(item.id)\n    else 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, and so does moving the keyboard\n * into it: each notification carries a close cross, a real button a reader tabs to, which\n * would otherwise vanish from under the focus ring. The same verbs and the same two\n * reasons as VSnackbar.\n *\n * Leaving restarts them from the FULL duration rather than from what was left: simpler,\n * and more generous to the reader who has just interrupted themselves.\n */\nfunction hold(placement: ToastPlacement, which: 'pointer' | 'focus') {\n  const reason = which === 'pointer' ? hovered : focused\n  reason.add(placement)\n  for (const item of groups.value.get(placement) ?? []) stopTimer(item.id)\n}\n\nfunction release(placement: ToastPlacement, which: 'pointer' | 'focus') {\n  const reason = which === 'pointer' ? hovered : focused\n  reason.delete(placement)\n  if (isHeld(placement)) return\n  for (const item of groups.value.get(placement) ?? []) startTimer(item)\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=\"stackEls\"\n    class=\"v-overlay v-toast-stack\"\n    popover=\"manual\"\n    :data-placement=\"p\"\n    role=\"region\"\n    :aria-label=\"ariaLabel\"\n    @pointerenter=\"hold(p, 'pointer')\"\n    @pointerleave=\"release(p, 'pointer')\"\n    @focusin=\"hold(p, 'focus')\"\n    @focusout=\"release(p, 'focus')\"\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  /*\n   * The container. Its rules are an ALIGNED COPY of VSnackbar's host: the two containers are the\n   * same object, a popover at a physical corner that fades when it empties, and the copy is\n   * kept line for line, the one difference being the top edge, which a confirmation never takes.\n   * They are not factored into styles/banner.css because that sheet is paid for by every\n   * consumer, and these rules cost more than the size gate allows; change one, change the other.\n   *\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 is undone here is the browser's own\n   * popover decoration: its border, its padding, its opaque background.\n   */\n  .v-toast-stack {\n    margin: 0;\n    border: none;\n    padding: 0;\n    background: transparent;\n    overflow: visible;\n    width: fit-content;\n  }\n\n  /*\n   * PHYSICAL coordinates rather than logical ones: a message appears at a place on the\n   * screen, and that place does not flip with the reading direction — the operating\n   * system's own notifications behave the same way.\n   *\n   * `--banner-enter-y` is the direction each card slides in from, read by `.v-banner` in\n   * styles/banner.css: the container is the only thing that knows which edge of the screen\n   * it sits on. That sheet reads it with a `, 0` fallback, so dropping the declaration costs\n   * the slide and nothing else, and nothing reports it.\n   */\n  .v-toast-stack[data-placement^='top-'] {\n    top: var(--vectis-space-4);\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 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-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  /* The stack's own layout, which the snackbar's single bar has no use for. The newest\n     notification should sit nearest the screen edge; the queue only ever grows at the end,\n     so a stack along the top is simply drawn in reverse. */\n  .v-toast-stack {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-3);\n  }\n\n  .v-toast-stack[data-placement^='top-'] {\n    flex-direction: column-reverse;\n  }\n}\n</style>\n"],"mappings":"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"}

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

@@ -1,19 +1,7 @@
 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';
+/** How strongly a notification is painted: a tinted background with a border, or the full colour. */
+export type ToastVariant = 'soft' | 'solid';
 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 {
@@ -24,7 +12,7 @@ export interface ToastOptions {
     /** 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';
+    variant?: ToastVariant;
     /**
      * The icon to show. Left out, the tone brings its own; `false` removes it
      * altogether.
@@ -37,8 +25,11 @@ export interface ToastOptions {
     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;
+    /**
+     * Takes the close cross away, leaving the notification to its duration or to
+     * `dismissToast`. Keep the cross on a notification that stays until dismissed by hand.
+     */
+    hideClose?: boolean;
     /**
      * How wide it is, as a CSS length. It is never allowed past the width of the
      * viewport, margins included.
@@ -52,8 +43,8 @@ export interface ToastOptions {
 export interface ToastItem extends ToastOptions {
     id: number;
     tone: ToastTone;
-    variant: 'soft' | 'solid';
-    closable: boolean;
+    variant: ToastVariant;
+    hideClose: boolean;
 }
 /** The queue itself. It is internal, read only by VToaster, and not public API. */
 export declare const toasts: import('vue').Reactive<ToastItem[]>;

package/dist/components/VToast/state.js

@@ -6,7 +6,7 @@ function r(e) {
 	return t.push({
 		tone: "neutral",
 		variant: "soft",
-		closable: !0,
+		hideClose: !1,
 		...e,
 		id: r
 	}), r;

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

@@ -1 +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"}
+{"version":3,"file":"state.js","names":[],"sources":["../../../src/components/VToast/state.ts"],"sourcesContent":["// @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\nimport { reactive } from 'vue'\n\nimport type { IconSource } from '../VIcon/types'\n\nexport type ToastTone = 'neutral' | 'accent' | 'success' | 'danger' | 'warning'\n\n/** How strongly a notification is painted: a tinted background with a border, or the full colour. */\nexport type ToastVariant = 'soft' | 'solid'\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?: ToastVariant\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  /**\n   * Takes the close cross away, leaving the notification to its duration or to\n   * `dismissToast`. Keep the cross on a notification that stays until dismissed by hand.\n   */\n  hideClose?: 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: ToastVariant\n  hideClose: 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', hideClose: false, ...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":";;AA0EA,IAAa,IAAS,EAAsB,CAAC,CAAC,GAE1C,IAAS;AAWb,SAAgB,EAAM,GAA+B;CACnD,IAAM,IAAK;CAEX,OADA,EAAO,KAAK;EAAE,MAAM;EAAW,SAAS;EAAQ,WAAW;EAAO,GAAG;EAAS;CAAG,CAAC,GAC3E;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

@@ -1,2 +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}}
+@layer vectis.components{.v-toggle[data-item-variant=outline]{--toggle-frame:var(--vectis-color-border-strong)}.v-toggle[data-item-variant=outline]>.v-toggle-item:is(:disabled,[aria-disabled=true]),.v-toggle[data-item-variant=outline]>:not(:where(.v-overlay,.v-button-group)) .v-toggle-item:is(:disabled,[aria-disabled=true]):not(:where(.v-overlay *)){--toggle-frame:var(--vectis-color-border)}.v-toggle[data-item-variant=outline]>.v-toggle-item[aria-pressed=true]:is([data-variant=soft],[data-variant=ghost]),.v-toggle[data-item-variant=outline]>:not(:where(.v-overlay,.v-button-group)) .v-toggle-item[aria-pressed=true]:is([data-variant=soft],[data-variant=ghost]):not(:where(.v-overlay *)){border-color:var(--toggle-frame)}}

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

@@ -1,10 +1,16 @@
-export type ToggleValue = string | number;
+import { ItemValue } from '../../types.js';
+/**
+ * What identifies an item. It is the design system's own `ItemValue`, re-exported
+ * under the family's name so a consumer typing a toggle need not reach for another module.
+ */
+export type ToggleValue = ItemValue;
 /**
  * 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 ToggleItemVariant = 'ghost' | 'outline';
+export type ToggleSelectedVariant = 'solid' | 'soft' | 'ghost';
 export type ToggleTone = 'accent' | 'neutral' | 'danger';
 export type ToggleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ToggleOrientation = 'horizontal' | 'vertical';
@@ -18,23 +24,42 @@ interface ToggleProps {
      */
     mandatory?: boolean;
     /**
-     * Joins the items into one segmented control. Turning it off leaves them as separate
-     * buttons with a gap between them.
+     * Leaves the items as separate buttons with a gap between them. Left out, they are
+     * joined into one segmented control.
+     */
+    detached?: boolean;
+    /**
+     * Takes the lines out from between the joined items, so the row reads as one frame
+     * rather than as segments. It has no effect under `detached`, where the items are
+     * separate buttons already.
      */
-    attached?: boolean;
+    seamless?: 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.
+     * Stretches the row across the whole inline size of its parent, every item taking an equal
+     * share of it, on the terms of VButtonGroup's own `fullWidth`.
+     */
+    fullWidth?: boolean;
+    /**
+     * How the UNSELECTED items are drawn. What the selected one takes is `selectedVariant`.
+     * It is named for the ITEMS because that is what it paints: on VTabs and VDataTable
+     * `variant` names the decoration of the frame instead.
      */
-    variant?: ToggleVariant;
+    itemVariant?: ToggleItemVariant;
+    /**
+     * How the SELECTED item is drawn, in the group's tone: filled, tinted, or the colour
+     * of its text alone.
+     */
+    selectedVariant?: ToggleSelectedVariant;
     /** 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;
+    /** Raises the row off the page, on the terms of VButtonGroup's own `elevated`. */
+    elevated?: boolean;
     /** Makes the whole group unusable. */
     disabled?: boolean;
     /**
@@ -54,24 +79,44 @@ type __VLS_Slots = {
     default(): unknown;
 };
 type __VLS_ModelProps = {
+    /**
+     * What is selected, and its SHAPE follows `multiple`: a single value — or `null`, which is
+     * where it starts — when one item may be chosen, and an array when several may. A null or
+     * scalar value passed in `multiple` mode is read as an empty selection.
+     *
+     * The array is never mutated in place; each change is a new one, which is what wakes the
+     * consumer's binding. Re-clicking the selected item deselects it unless `mandatory` is set.
+     */
     modelValue?: ToggleModelValue;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    /**
+     * Moves the focus to the selected item (the first of them when several are), or to the
+     * first item that can take it when nothing is selected.
+     */
+    focus: (options?: FocusOptions) => void;
+    /** The `role="group"` row, which is also where the consumer's attributes land. */
+    el: import('vue').ComputedRef<HTMLElement | null>;
+}, {}, {}, {}, 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;
+    elevated: boolean;
     compact: boolean;
+    fullWidth: boolean;
     disabled: boolean;
-    attached: boolean;
+    detached: boolean;
+    seamless: boolean;
+    itemVariant: ToggleItemVariant;
     multiple: boolean;
     mandatory: boolean;
+    selectedVariant: ToggleSelectedVariant;
     selectedIconFilled: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1 +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":""}
+{"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 drawn in the group's tone and the others\n * quiet. The row itself is a VButtonGroup, which is where the drawing lives: joining the\n * items or leaving them apart, the lines between them, the shared size and the shared\n * elevation are that component's, and the props for them are handed straight over.\n * Nothing about hovering, focusing or disabling is written here either: it all comes\n * 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 { computed, provide, ref } 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 type { ItemValue } from '../../types'\n\n/**\n * What identifies an item. It is the design system's own `ItemValue`, re-exported\n * under the family's name so a consumer typing a toggle need not reach for another module.\n */\nexport type ToggleValue = ItemValue\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 ToggleItemVariant = 'ghost' | 'outline'\nexport type ToggleSelectedVariant = 'solid' | 'soft' | 'ghost'\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   * Leaves the items as separate buttons with a gap between them. Left out, they are\n   * joined into one segmented control.\n   */\n  detached?: boolean\n  /**\n   * Takes the lines out from between the joined items, so the row reads as one frame\n   * rather than as segments. It has no effect under `detached`, where the items are\n   * separate buttons already.\n   */\n  seamless?: boolean\n  /** Whether the items run across the page or down it. */\n  orientation?: ToggleOrientation\n  /**\n   * Stretches the row across the whole inline size of its parent, every item taking an equal\n   * share of it, on the terms of VButtonGroup's own `fullWidth`.\n   */\n  fullWidth?: boolean\n  /**\n   * How the UNSELECTED items are drawn. What the selected one takes is `selectedVariant`.\n   * It is named for the ITEMS because that is what it paints: on VTabs and VDataTable\n   * `variant` names the decoration of the frame instead.\n   */\n  itemVariant?: ToggleItemVariant\n  /**\n   * How the SELECTED item is drawn, in the group's tone: filled, tinted, or the colour\n   * of its text alone.\n   */\n  selectedVariant?: ToggleSelectedVariant\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  /** Raises the row off the page, on the terms of VButtonGroup's own `elevated`. */\n  elevated?: 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  detached: false,\n  seamless: false,\n  orientation: 'horizontal',\n  fullWidth: false,\n  itemVariant: 'ghost',\n  selectedVariant: 'solid',\n  tone: 'accent',\n  size: 'md',\n  compact: false,\n  elevated: false,\n  disabled: false,\n  selectedIconFilled: false,\n  label: undefined,\n})\n\ndefineSlots<{\n  /** The items of the group. */\n  default(): unknown\n}>()\n\n/**\n * What is selected, and its SHAPE follows `multiple`: a single value — or `null`, which is\n * where it starts — when one item may be chosen, and an array when several may. A null or\n * scalar value passed in `multiple` mode is read as an empty selection.\n *\n * The array is never mutated in place; each change is a new one, which is what wakes the\n * consumer's binding. Re-clicking the selected item deselects it unless `mandatory` is set.\n */\nconst model = defineModel<ToggleModelValue>({ default: null })\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 itemVariant() {\n    return props.itemVariant\n  },\n  get selectedVariant() {\n    return props.selectedVariant\n  },\n  get tone() {\n    return props.tone\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: the root is a\n * VButtonGroup, so a template ref would hand back its component instance rather than the\n * element the items are navigated inside.\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\nconst groupRef = ref<InstanceType<typeof VButtonGroup> | null>(null)\nconst groupEl = computed(() => groupRef.value?.el ?? null)\n\n// The root is a VButtonGroup and the items come from the consumer's slot, so a template ref\n// on the toggle reaches no button. `focus` goes to the item that stands for the current\n// choice, the one a keyboard user would expect to resume from.\ndefineExpose({\n  /**\n   * Moves the focus to the selected item (the first of them when several are), or to the\n   * first item that can take it when nothing is selected.\n   */\n  focus: (options?: FocusOptions) => {\n    const group = groupEl.value\n    const enabled = '.v-toggle-item:not(:disabled, [aria-disabled=\"true\"])'\n    const item =\n      group?.querySelector<HTMLElement>(`${enabled}[aria-pressed=\"true\"]`) ??\n      group?.querySelector<HTMLElement>(enabled)\n    item?.focus(options)\n  },\n  /** The `role=\"group\"` row, which is also where the consumer's attributes land. */\n  el: groupEl,\n})\n</script>\n\n<template>\n  <!-- The row is a VButtonGroup, which merges the borders of the buttons among its\n       children — which is why an item renders the button as its own root, and why what\n       may stand between the two is the wrappers a VTooltip, a VPopover or a VBadge put\n       there, and nothing else. It brings the role, its accessible name and the orientation\n       attribute with it, and of the props handed to it here it forwards the size, the density,\n       the elevation and the disabled state to the buttons itself.\n\n       The three booleans go down as `|| undefined`, the VPagination idiom: `undefined` is\n       what means \"no opinion\" to a group, where `false` is an order every item would obey,\n       and a toggle left at its defaults has no opinion to give. The size is always one, the\n       toggle having a default of its own.\n\n       The name is resolved by the group, which sees a consumer's `aria-label` or\n       `aria-labelledby` too: they fall through this component onto it.\n\n       `variant` is deliberately NOT among them, and neither is the tone: the group wins\n       over a button that names its own variant, which would erase the one the selected\n       item carries. Both stay with the items, through the context.\n\n       `data-variant` is a plain attribute, and it is what tells the sheet an outline row\n       from a ghost one — something the items cannot say for themselves, since the\n       selected one carries its own variant rather than the row's. -->\n  <VButtonGroup\n    ref=\"groupRef\"\n    class=\"v-toggle\"\n    :orientation=\"orientation\"\n    :detached=\"detached\"\n    :seamless=\"seamless\"\n    :full-width=\"fullWidth\"\n    :size=\"size\"\n    :compact=\"compact || undefined\"\n    :elevated=\"elevated || undefined\"\n    :disabled=\"disabled || undefined\"\n    :label=\"label\"\n    :data-item-variant=\"itemVariant\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </VButtonGroup>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * Both rules below are written for the two shapes an item can take, exactly as\n   * VButtonGroup's own sheet is and for the same reason: a VTooltip, a VPopover or a\n   * VBadge puts a wrapper between the row and the item, and a rule reaching for a direct\n   * child alone would leave a gap in the frame around whichever item carries one. The\n   * `:not(:where(.v-overlay))` guard weighs nothing and keeps a panel from passing for an\n   * item; the pair is one specificity, so the arbitration with the group's seamless rules\n   * holds on both shapes.\n   *\n   * The frame of an `outline` row, which only that row has: the colour its unselected\n   * items already paint. They are drawn in the NEUTRAL tone, so this is what their\n   * `--tone-border-soft` resolves to — naming that variable here instead would read the\n   * SELECTED item's tone and tint one segment of the frame accent or red.\n   *\n   * It is a variable on the root rather than a value in the rule below because a\n   * disabled segment greys, and VButton greys an outline border to a different token.\n   * Nothing else declares it, so the two rules never arbitrate a border-color between\n   * them.\n   */\n  .v-toggle[data-item-variant='outline'] {\n    --toggle-frame: var(--vectis-color-border-strong);\n  }\n\n  .v-toggle[data-item-variant='outline'] > .v-toggle-item:is(:disabled, [aria-disabled='true']),\n  .v-toggle[data-item-variant='outline']\n    > :not(:where(.v-overlay, .v-button-group))\n    .v-toggle-item:is(:disabled, [aria-disabled='true']):not(:where(.v-overlay *)) {\n    --toggle-frame: var(--vectis-color-border);\n  }\n\n  /*\n   * `soft` and `ghost` leave VButton's border transparent, which in an outline row\n   * opens a gap in the frame for the whole width of the selected segment. Restoring it\n   * on all four sides is what keeps the frame closed wherever the selection sits, in\n   * either orientation and in RTL. It is not conditioned on `seamless`, and deliberately\n   * so: the border is transparent whether the internal lines are drawn or not. Seamless,\n   * the shared edges are cleared again by VButtonGroup's own (0,6,0) rules, which is why\n   * they are written at that weight — a middle segment then keeps its top and bottom\n   * alone.\n   */\n  .v-toggle[data-item-variant='outline']\n    > .v-toggle-item[aria-pressed='true']:is([data-variant='soft'], [data-variant='ghost']),\n  .v-toggle[data-item-variant='outline']\n    > :not(:where(.v-overlay, .v-button-group))\n    .v-toggle-item[aria-pressed='true']:is([data-variant='soft'], [data-variant='ghost']):not(\n      :where(.v-overlay *)\n    ) {\n    border-color: var(--toggle-frame);\n  }\n}\n</style>\n"],"mappings":""}