vectis-ui 0.1.0 → 0.8.0

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

@@ -1,11 +1,10 @@
 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";
+import { toggleKey as r } from "./context.js";
+import { toggleValue as i } from "../../utils/array.js";
+import { computed as a, createBlock as o, defineComponent as s, mergeModels as c, openBlock as l, provide as u, ref as d, renderSlot as f, useModel as p, withCtx as m } from "vue";
 //#region src/components/VToggle/VToggle.vue?vue&type=script&setup=true&lang.ts
-var _ = /*@__PURE__*/ s({
+var h = /*@__PURE__*/ s({
 	__name: "VToggle",
 	props: /*@__PURE__*/ c({
 		multiple: {
@@ -16,18 +15,31 @@ var _ = /*@__PURE__*/ s({
 			type: Boolean,
 			default: !1
 		},
-		attached: {
+		detached: {
 			type: Boolean,
-			default: !0
+			default: !1
+		},
+		seamless: {
+			type: Boolean,
+			default: !1
 		},
 		orientation: { default: "horizontal" },
-		variant: { default: "ghost" },
+		fullWidth: {
+			type: Boolean,
+			default: !1
+		},
+		itemVariant: { default: "ghost" },
+		selectedVariant: { default: "solid" },
 		tone: { default: "accent" },
 		size: { default: "md" },
 		compact: {
 			type: Boolean,
 			default: !1
 		},
+		elevated: {
+			type: Boolean,
+			default: !1
+		},
 		disabled: {
 			type: Boolean,
 			default: !1
@@ -42,62 +54,84 @@ var _ = /*@__PURE__*/ s({
 		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;
+	setup(s, { expose: c }) {
+		let h = s, g = p(s, "modelValue");
+		function _(e) {
+			return h.multiple ? Array.isArray(g.value) && g.value.includes(e) : g.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);
+		function v(e) {
+			if (h.multiple) {
+				let t = Array.isArray(g.value) ? g.value : [];
+				if (h.mandatory && t.length === 1 && t.includes(e)) return;
+				g.value = i(t, e);
 				return;
 			}
-			if (_.value === e) {
-				c.mandatory || (_.value = null);
+			if (g.value === e) {
+				h.mandatory || (g.value = null);
 				return;
 			}
-			_.value = e;
+			g.value = e;
 		}
-		d(i, {
-			isSelected: y,
-			select: b,
-			get variant() {
-				return c.variant;
-			},
-			get tone() {
-				return c.tone;
+		u(r, {
+			isSelected: _,
+			select: v,
+			get itemVariant() {
+				return h.itemVariant;
 			},
-			get size() {
-				return c.size;
+			get selectedVariant() {
+				return h.selectedVariant;
 			},
-			get compact() {
-				return c.compact;
-			},
-			get disabled() {
-				return c.disabled;
+			get tone() {
+				return h.tone;
 			},
 			get selectedIconFilled() {
-				return c.selectedIconFilled;
+				return h.selectedIconFilled;
 			}
 		});
-		function x(e) {
+		function y(e) {
 			let r = e.currentTarget;
-			t(e, r, n(r, ".v-toggle-item:not(:disabled)"), { vertical: c.orientation === "vertical" });
+			t(e, r, () => n(r, ".v-toggle-item:not(:disabled)"), { vertical: h.orientation === "vertical" });
 		}
-		return (t, n) => (u(), o(p(s.attached ? e : "div"), l(s.attached ? { orientation: s.orientation } : { "data-orientation": s.orientation }, {
+		let b = d(null), x = a(() => b.value?.el ?? null);
+		return c({
+			focus: (e) => {
+				let t = x.value, n = ".v-toggle-item:not(:disabled, [aria-disabled=\"true\"])";
+				(t?.querySelector(`${n}[aria-pressed="true"]`) ?? t?.querySelector(n))?.focus(e);
+			},
+			el: x
+		}), (t, n) => (l(), o(e, {
+			ref_key: "groupRef",
+			ref: b,
 			class: "v-toggle",
-			role: "group",
-			"aria-label": m(v),
-			onKeydown: x
-		}), {
-			default: g(() => [f(t.$slots, "default")]),
+			orientation: s.orientation,
+			detached: s.detached,
+			seamless: s.seamless,
+			"full-width": s.fullWidth,
+			size: s.size,
+			compact: s.compact || void 0,
+			elevated: s.elevated || void 0,
+			disabled: s.disabled || void 0,
+			label: s.label,
+			"data-item-variant": s.itemVariant,
+			onKeydown: y
+		}, {
+			default: m(() => [f(t.$slots, "default")]),
 			_: 3
-		}, 16, ["aria-label"]));
+		}, 8, [
+			"orientation",
+			"detached",
+			"seamless",
+			"full-width",
+			"size",
+			"compact",
+			"elevated",
+			"disabled",
+			"label",
+			"data-item-variant"
+		]));
 	}
 });
 //#endregion
-export { _ as default };
+export { h 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

@@ -1 +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"}
+{"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 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuGA,IAAM,IAAQ,GA+BR,IAAQ,EAA6B,GAAA,YAAkB;EAE7D,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,cAAc;IAChB,OAAO,EAAM;GACf;GACA,IAAI,kBAAkB;IACpB,OAAO,EAAM;GACf;GACA,IAAI,OAAO;IACT,OAAO,EAAM;GACf;GACA,IAAI,qBAAqB;IACvB,OAAO,EAAM;GACf;EACF,CAAC;EAeD,SAAS,EAAU,GAAsB;GACvC,IAAM,IAAQ,EAAM;GACpB,EAAc,GAAO,SAAa,EAAe,GAAO,+BAA+B,GAAG,EACxF,UAAU,EAAM,gBAAgB,WAClC,CAAC;EACH;EAEA,IAAM,IAAW,EAA8C,IAAI,GAC7D,IAAU,QAAe,EAAS,OAAO,MAAM,IAAI;SAKzD,EAAa;GAKX,QAAQ,MAA2B;IACjC,IAAM,IAAQ,EAAQ,OAChB,IAAU;IAIhB,CAFE,GAAO,cAA2B,GAAG,EAAQ,sBAAsB,KACnE,GAAO,cAA2B,CAAO,EAAA,EACrC,MAAM,CAAO;GACrB;GAEA,IAAI;EACN,CAAC,mBA0BC,EAgBe,GAAA;YAfT;GAAJ,KAAI;GACJ,OAAM;GACL,aAAa,EAAA;GACb,UAAU,EAAA;GACV,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,MAAM,EAAA;GACN,SAAS,EAAA,WAAW,KAAA;GACpB,UAAU,EAAA,YAAY,KAAA;GACtB,UAAU,EAAA,YAAY,KAAA;GACtB,OAAO,EAAA;GACP,qBAAmB,EAAA;GACV;;oBAEF,CAAR,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA"}

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

@@ -9,7 +9,19 @@ interface ToggleItemProps {
     /** The visible label. The default slot replaces it. */
     label?: string;
     /** An icon before the label: an icon name, or an explicit render. */
-    icon?: IconSource;
+    iconStart?: IconSource;
+    /**
+     * An icon after the label. It is NOT switched to its filled form by the group's
+     * `selectedIconFilled`, which names the icon standing for the item rather than one
+     * trailing it; `iconFilled` fills it for good.
+     */
+    iconEnd?: IconSource;
+    /**
+     * Renders `iconStart` and `iconEnd` in their filled form (the font's `FILL` axis), whether
+     * the item is selected or not. The group's `selectedIconFilled` still fills the start icon
+     * of the selected item when this is left out.
+     */
+    iconFilled?: boolean;
     /**
      * Makes this item unusable: it no longer responds, the arrow keys skip over it, and
      * it greys out through the colour tokens.
@@ -23,7 +35,9 @@ type __VLS_Slots = {
 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;
+    iconStart: IconSource;
+    iconEnd: IconSource;
+    iconFilled: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/VToggle/VToggleItem.js

@@ -1,6 +1,4 @@
-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

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

@@ -1 +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":""}
+{"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. It is also what brings the size, the density, the elevation\n * and a row-wide disabled state here with nothing asked for: the VButtonGroup the VToggle\n * renders hands them to every button it contains, this one included.\n *\n * Used outside a VToggle it renders as a plain neutral VButton that is never pressed: the\n * way it is drawn is the group's decision, and there is no group to take it.\n */\nimport { computed, inject } 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  iconStart?: IconSource\n  /**\n   * An icon after the label. It is NOT switched to its filled form by the group's\n   * `selectedIconFilled`, which names the icon standing for the item rather than one\n   * trailing it; `iconFilled` fills it for good.\n   */\n  iconEnd?: IconSource\n  /**\n   * Renders `iconStart` and `iconEnd` in their filled form (the font's `FILL` axis), whether\n   * the item is selected or not. The group's `selectedIconFilled` still fills the start icon\n   * of the selected item when this is left out.\n   */\n  iconFilled?: boolean\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  iconStart: undefined,\n  iconEnd: undefined,\n  iconFilled: false,\n  disabled: false,\n})\n\nconst slots = defineSlots<{\n  /** The content of the item, replacing the `label` prop. */\n  default?(): unknown\n}>()\n\nconst toggle = inject(toggleKey, null)\n\nconst selected = computed(() => toggle != null && toggle.isSelected(props.value))\n\n// TRAP — a function read by the template, never a `computed`: `slots` is not reactive, so a\n// computed would keep its first answer while a slot behind a `v-if` comes and goes.\n/**\n * An icon, on either side, and no label at all: the item becomes a square, like a VIconButton.\n * The same definition as VChip's, and the square itself is VButton's `[data-icon-only]` rule.\n */\nfunction iconOnly() {\n  return !props.label && !slots.default && Boolean(props.iconStart || props.iconEnd)\n}\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 && toggle ? toggle.selectedVariant : toggle?.itemVariant\"\n    :tone=\"selected && toggle ? toggle.tone : 'neutral'\"\n    :disabled=\"disabled\"\n    :data-icon-only=\"iconOnly() ? '' : undefined\"\n    @click=\"toggle?.select(value)\"\n  >\n    <template v-if=\"iconStart\" #start>\n      <VIcon\n        v-bind=\"iconProps(iconStart)\"\n        :filled=\"iconFilled || (selected && toggle?.selectedIconFilled)\"\n      />\n    </template>\n    <template v-if=\"iconEnd\" #end>\n      <VIcon v-bind=\"iconProps(iconEnd)\" :filled=\"iconFilled\" />\n    </template>\n    <slot v-if=\"!iconOnly()\">{{ label }}</slot>\n  </VButton>\n</template>\n"],"mappings":""}

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

@@ -1,5 +1,5 @@
-import e from "../VIcon/VIcon.js";
-import { iconProps as t } from "../VIcon/iconProps.js";
+import { iconProps as e } from "../VIcon/iconProps.js";
+import t from "../VIcon/VIcon.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";
@@ -9,37 +9,45 @@ var y = /*@__PURE__*/ u({
 	props: {
 		value: {},
 		label: { default: void 0 },
-		icon: { default: void 0 },
+		iconStart: { default: void 0 },
+		iconEnd: { default: void 0 },
+		iconFilled: {
+			type: Boolean,
+			default: !1
+		},
 		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);
+		let y = u, b = _(), x = d(r, null), S = i(() => x != null && x.isSelected(y.value));
+		function C() {
+			return !y.label && !b.default && !!(y.iconStart || y.iconEnd);
+		}
 		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,
+			variant: S.value && g(x) ? g(x).selectedVariant : g(x)?.itemVariant,
+			tone: S.value && g(x) ? g(x).tone : "neutral",
+			disabled: u.disabled,
+			"data-icon-only": C() ? "" : 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)]),
+			default: v(() => [C() ? o("", !0) : m(r.$slots, "default", {}, () => [c(h(u.label), 1)], void 0, 0)]),
 			_: 2
-		}, [u.icon ? {
+		}, [u.iconStart ? {
 			name: "start",
-			fn: v(() => [l(e, f(g(t)(u.icon), { filled: S.value && (g(x)?.selectedIconFilled ?? !1) }), null, 16, ["filled"])]),
+			fn: v(() => [l(t, f(g(e)(u.iconStart), { filled: u.iconFilled || S.value && g(x)?.selectedIconFilled }), null, 16, ["filled"])]),
 			key: "0"
+		} : void 0, u.iconEnd ? {
+			name: "end",
+			fn: v(() => [l(t, f(g(e)(u.iconEnd), { filled: u.iconFilled }), null, 16, ["filled"])]),
+			key: "1"
 		} : void 0]), 1032, [
 			"aria-pressed",
 			"variant",
 			"tone",
-			"size",
-			"compact",
 			"disabled",
 			"data-icon-only"
 		]));

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

@@ -1 +1 @@
-{"version":3,"file":"VToggleItem.vue_vue_type_script_setup_true_lang.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":";;;;;;;;;;;;;;;;;;EAuCA,IAAM,IAAQ,GAWR,IAAQ,EAAS,GACjB,IAAS,EAAO,GAAW,IAAI,GAE/B,IAAW,QAAe,KAAU,QAAQ,EAAO,WAAW,EAAM,KAAK,CAAC,GAG1E,IAAW,QAAe,EAAQ,EAAM,QAAS,CAAC,EAAM,SAAS,CAAC,EAAM,OAAO;yBAWnF,EAeU,GAAA;GAdR,OAAM;GACL,gBAAc,EAAA,QAAQ,SAAA;GACtB,SAAS,EAAA,QAAQ,UAAc,EAAA,CAAA,CAAM,EAAE,WAAO;GAC9C,MAAM,EAAA,QAAY,EAAA,CAAA,CAAM,EAAE,QAAI,WAAA;GAC9B,MAAM,EAAA,CAAA,CAAM,EAAE,QAAI;GAClB,SAAS,EAAA,CAAA,CAAM,EAAE,WAAO;GACxB,UAAU,EAAA,YAAY,EAAA,CAAA,CAAM,EAAE;GAC9B,kBAAgB,EAAA,QAAQ,KAAQ,KAAA;GAChC,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,CAAA,CAAM,EAAE,OAAO,EAAA,KAAK;;oBAMtB,CADO,EAAA,QAAkB,EAAA,IAAA,EAAA,IAA/B,EAAyC,EAAA,QAAA,WAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,GAAA,KAAA,GAAA,CAAA,CAAA,CAAA;;MAHf,EAAA,OAAA;SAAO;eACyE,CAA9F,EAA8F,GAA9F,EAAe,EAA+E,CAAA,CAAtE,CAAC,EAAA,IAAI,GAAA,EAAI,QAAQ,EAAA,UAAa,EAAA,CAAA,CAAM,EAAE,sBAAkB,IAAA,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"VToggleItem.vue_vue_type_script_setup_true_lang.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. It is also what brings the size, the density, the elevation\n * and a row-wide disabled state here with nothing asked for: the VButtonGroup the VToggle\n * renders hands them to every button it contains, this one included.\n *\n * Used outside a VToggle it renders as a plain neutral VButton that is never pressed: the\n * way it is drawn is the group's decision, and there is no group to take it.\n */\nimport { computed, inject } 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  iconStart?: IconSource\n  /**\n   * An icon after the label. It is NOT switched to its filled form by the group's\n   * `selectedIconFilled`, which names the icon standing for the item rather than one\n   * trailing it; `iconFilled` fills it for good.\n   */\n  iconEnd?: IconSource\n  /**\n   * Renders `iconStart` and `iconEnd` in their filled form (the font's `FILL` axis), whether\n   * the item is selected or not. The group's `selectedIconFilled` still fills the start icon\n   * of the selected item when this is left out.\n   */\n  iconFilled?: boolean\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  iconStart: undefined,\n  iconEnd: undefined,\n  iconFilled: false,\n  disabled: false,\n})\n\nconst slots = defineSlots<{\n  /** The content of the item, replacing the `label` prop. */\n  default?(): unknown\n}>()\n\nconst toggle = inject(toggleKey, null)\n\nconst selected = computed(() => toggle != null && toggle.isSelected(props.value))\n\n// TRAP — a function read by the template, never a `computed`: `slots` is not reactive, so a\n// computed would keep its first answer while a slot behind a `v-if` comes and goes.\n/**\n * An icon, on either side, and no label at all: the item becomes a square, like a VIconButton.\n * The same definition as VChip's, and the square itself is VButton's `[data-icon-only]` rule.\n */\nfunction iconOnly() {\n  return !props.label && !slots.default && Boolean(props.iconStart || props.iconEnd)\n}\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 && toggle ? toggle.selectedVariant : toggle?.itemVariant\"\n    :tone=\"selected && toggle ? toggle.tone : 'neutral'\"\n    :disabled=\"disabled\"\n    :data-icon-only=\"iconOnly() ? '' : undefined\"\n    @click=\"toggle?.select(value)\"\n  >\n    <template v-if=\"iconStart\" #start>\n      <VIcon\n        v-bind=\"iconProps(iconStart)\"\n        :filled=\"iconFilled || (selected && toggle?.selectedIconFilled)\"\n      />\n    </template>\n    <template v-if=\"iconEnd\" #end>\n      <VIcon v-bind=\"iconProps(iconEnd)\" :filled=\"iconFilled\" />\n    </template>\n    <slot v-if=\"!iconOnly()\">{{ label }}</slot>\n  </VButton>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAqDA,IAAM,IAAQ,GAQR,IAAQ,EAAA,GAKR,IAAS,EAAO,GAAW,IAAI,GAE/B,IAAW,QAAe,KAAU,QAAQ,EAAO,WAAW,EAAM,KAAK,CAAC;EAQhF,SAAS,IAAW;GAClB,OAAO,CAAC,EAAM,SAAS,CAAC,EAAM,WAAW,GAAQ,EAAM,aAAa,EAAM;EAC5E;yBAWE,EAmBU,GAAA;GAlBR,OAAM;GACL,gBAAc,EAAA,QAAQ,SAAA;GACtB,SAAS,EAAA,SAAY,EAAA,CAAA,IAAS,EAAA,CAAA,CAAM,CAAC,kBAAkB,EAAA,CAAA,CAAM,EAAE;GAC/D,MAAM,EAAA,SAAY,EAAA,CAAA,IAAS,EAAA,CAAA,CAAM,CAAC,OAAI;GACtC,UAAU,EAAA;GACV,kBAAgB,EAAQ,IAAA,KAAU,KAAA;GAClC,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,CAAA,CAAM,EAAE,OAAO,EAAA,KAAK;;oBAStB,CAEO,EAAQ,IAAY,EAAA,IAAA,EAAA,IAAjC,EAA2C,EAAA,QAAA,WAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,GAAA,KAAA,GAAA,CAAA,CAAA,CAAA;;MATjB,EAAA,YAAA;SAAY;eAIxB,CAHF,EAGE,GAHF,EACU,EAER,CAAA,CAFiB,CAAC,EAAA,SAAS,GAAA,EAC1B,QAAQ,EAAA,cAAe,EAAA,SAAY,EAAA,CAAA,CAAM,EAAE,mBAAA,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,CAAA,CAAA,CAAA;;cAGhC,EAAA,UAAA;SAAU;eACkC,CAA1D,EAA0D,GAA1D,EAAe,EAA2C,CAAA,CAAlC,CAAC,EAAA,OAAO,GAAA,EAAI,QAAQ,EAAA,WAAU,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,CAAA,CAAA,CAAA"}

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

@@ -1,36 +1,16 @@
 import { InjectionKey } from 'vue';
-import { ToggleSize, ToggleTone, ToggleValue, ToggleVariant } from './VToggle.js';
-/**
- * What a VToggle passes down to the items inside it. Everything is exposed through
- * getters, which is what keeps the group's props reactive on the other side of the
- * injection.
- *
- * There is no identifier and no registry here, unlike VTabs: nothing in this pattern
- * points at anything else, and whether an item is selected is a plain comparison of
- * values — so the server and the browser reach the same answer with nothing exchanged.
- *
- * That comparison is offered as a QUESTION rather than as the current value, because
- * with several choices allowed it is no longer a simple equality, and only the group
- * knows which of the two it is doing.
- *
- * The size travels through here rather than through CSS inheritance, as it does in
- * VAccordion, because each item renders a button that declares its own size on itself.
- */
+import { ToggleSelectedVariant, ToggleTone, ToggleValue, ToggleItemVariant } from './VToggle.js';
 export interface ToggleContext {
     /** Whether the item carrying this value is currently selected. */
     isSelected: (value: ToggleValue) => boolean;
     /** Reports that an item was clicked; the group decides what it does to the selection. */
     select: (value: ToggleValue) => void;
     /** How the unselected items are drawn. */
-    readonly variant: ToggleVariant;
+    readonly itemVariant: ToggleItemVariant;
+    /** How the selected item is drawn. */
+    readonly selectedVariant: ToggleSelectedVariant;
     /** The colour a selected item takes. */
     readonly tone: ToggleTone;
-    /** The height of the items. */
-    readonly size: ToggleSize;
-    /** The reduced density. */
-    readonly compact: boolean;
-    /** Whether the whole group is unusable. */
-    readonly disabled: boolean;
     /** Whether the selected item draws its icon filled. */
     readonly selectedIconFilled: boolean;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/VToggle/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\n\nimport type { ToggleSize, ToggleTone, ToggleValue, ToggleVariant } from './VToggle.vue'\n\n/**\n * What a VToggle passes down to the items inside it. Everything is exposed through\n * getters, which is what keeps the group's props reactive on the other side of the\n * injection.\n *\n * There is no identifier and no registry here, unlike VTabs: nothing in this pattern\n * points at anything else, and whether an item is selected is a plain comparison of\n * values — so the server and the browser reach the same answer with nothing exchanged.\n *\n * That comparison is offered as a QUESTION rather than as the current value, because\n * with several choices allowed it is no longer a simple equality, and only the group\n * knows which of the two it is doing.\n *\n * The size travels through here rather than through CSS inheritance, as it does in\n * VAccordion, because each item renders a button that declares its own size on itself.\n */\nexport interface ToggleContext {\n  /** Whether the item carrying this value is currently selected. */\n  isSelected: (value: ToggleValue) => boolean\n  /** Reports that an item was clicked; the group decides what it does to the selection. */\n  select: (value: ToggleValue) => void\n  /** How the unselected items are drawn. */\n  readonly variant: ToggleVariant\n  /** The colour a selected item takes. */\n  readonly tone: ToggleTone\n  /** The height of the items. */\n  readonly size: ToggleSize\n  /** The reduced density. */\n  readonly compact: boolean\n  /** Whether the whole group is unusable. */\n  readonly disabled: boolean\n  /** Whether the selected item draws its icon filled. */\n  readonly selectedIconFilled: boolean\n}\n\nexport const toggleKey: InjectionKey<ToggleContext> = Symbol('v-toggle')\n"],"mappings":";AAuCA,IAAa,IAAyC,OAAO,UAAU"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/VToggle/context.ts"],"sourcesContent":["/**\n * What a VToggle passes down to the items inside it. Everything is exposed through\n * getters, which is what keeps the group's props reactive on the other side of the\n * injection.\n *\n * There is no identifier and no registry here, unlike VTabs: nothing in this pattern\n * points at anything else, and whether an item is selected is a plain comparison of\n * values — so the server and the browser reach the same answer with nothing exchanged.\n *\n * That comparison is offered as a QUESTION rather than as the current value, because\n * with several choices allowed it is no longer a simple equality, and only the group\n * knows which of the two it is doing.\n *\n * What is here is what SELECTION decides, and nothing else. The size, the density, the\n * elevation and the disabled state are the row's appearance, so they travel down the\n * VButtonGroup the group renders and reach each item's button through `buttonGroupKey`\n * instead. The variant and the tone stay here because they are read per item: which of\n * the two variants applies, and whether the tone or a quiet neutral is used, is decided\n * by whether that item is the selected one.\n */\n\nimport type { InjectionKey } from 'vue'\n\nimport type {\n  ToggleSelectedVariant,\n  ToggleTone,\n  ToggleValue,\n  ToggleItemVariant,\n} from './VToggle.vue'\n\nexport interface ToggleContext {\n  /** Whether the item carrying this value is currently selected. */\n  isSelected: (value: ToggleValue) => boolean\n  /** Reports that an item was clicked; the group decides what it does to the selection. */\n  select: (value: ToggleValue) => void\n  /** How the unselected items are drawn. */\n  readonly itemVariant: ToggleItemVariant\n  /** How the selected item is drawn. */\n  readonly selectedVariant: ToggleSelectedVariant\n  /** The colour a selected item takes. */\n  readonly tone: ToggleTone\n  /** Whether the selected item draws its icon filled. */\n  readonly selectedIconFilled: boolean\n}\n\nexport const toggleKey: InjectionKey<ToggleContext> = Symbol('v-toggle')\n"],"mappings":";AA6CA,IAAa,IAAyC,OAAO,UAAU"}

package/dist/components/VTooltip/VTooltip.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-tooltip{anchor-name:--tooltip-anchor;anchor-scope:--tooltip-anchor;align-items:center;display:inline-flex}.v-popover-panel.v-tooltip-panel{width:max-content;max-width:min(18rem, calc(100vw - var(--vectis-space-8)));padding:var(--vectis-space-1) var(--vectis-space-2);background:var(--vectis-color-surface-inverse);color:var(--vectis-color-text-on-inverse);border-radius:var(--vectis-radius-sm);box-shadow:var(--vectis-shadow-sm);font-family:var(--vectis-text-family);font-size:var(--vectis-text-caption-size);line-height:var(--vectis-text-caption-leading);border:none}}
+@layer vectis.components{.v-tooltip{anchor-name:--tooltip-anchor;anchor-scope:--tooltip-anchor;align-items:center;display:inline-flex}.v-popover-panel.v-tooltip-panel{width:max-content;max-width:min(18rem, calc(100vw - var(--vectis-space-8)));padding:var(--vectis-space-1) var(--vectis-space-2);background:var(--vectis-color-surface-inverse);color:var(--vectis-color-text-on-inverse);border-radius:min(var(--vectis-radius-interactive), calc(.5lh + var(--vectis-space-1)));box-shadow:var(--vectis-shadow-sm);font-family:var(--vectis-text-family);font-size:var(--vectis-text-caption-size);line-height:var(--vectis-text-caption-leading);border:none}}

package/dist/components/VTooltip/VTooltip.d.ts

@@ -1,31 +1,9 @@
-/**
- * A short explanation appearing beside an element when the pointer rests on it or
- * when it takes keyboard focus. It is built on VPopover, in the mode where nothing
- * closes by itself, since a tooltip has its own rules about when to appear and when
- * to go.
- *
- * Those rules are why there is JavaScript here at all: HTML has no stable way to say
- * "show this after a short delay on hover or focus" — the proposal for it is still
- * experimental — so the component handles the delay, the pointer, the focus, the press
- * on the trigger, and Escape, which must dismiss a tooltip without moving the focus
- * (WCAG 1.4.13).
- *
- * There are four ways out and each covers a case the others do not: the pointer leaves,
- * the focus leaves, Escape is pressed, or the trigger is PRESSED — that last one for a
- * trigger which opens a panel, where the tooltip would otherwise stand over what it just
- * opened. The template says which browser makes it necessary.
- *
- * The positioning is pure CSS and needs no generated identifier: the wrapper names
- * itself as the anchor and confines that name to its own subtree. The confinement is
- * essential — a visible panel sits in the top layer, which anchor resolution treats
- * as coming after the whole document, so without it every tooltip on the page would
- * attach to the last wrapper carrying the name.
- *
- * The wrapper stays here rather than being delegated to VPopover's trigger slot,
- * because a tooltip trigger is not a button that opens a panel — it would then toggle
- * on click — but an element the panel DESCRIBES.
- */
-type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
+/** Which side of the element the tooltip appears on. */
+export type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
+/** What the described element has to carry: the link to the tooltip that describes it. */
+export type TooltipTriggerProps = {
+    'aria-describedby': string;
+};
 interface TooltipProps {
     /** What the tooltip says. The `#content` slot replaces it when both are given. */
     text?: string;
@@ -33,7 +11,7 @@ interface TooltipProps {
      * Which side of the element the tooltip appears on. The browser flips it to the
      * opposite side by itself when there is not enough room.
      */
-    placement?: Placement;
+    placement?: TooltipPlacement;
     /**
      * How long the pointer must rest on the element before the tooltip appears, in
      * milliseconds. Keyboard focus opens it at once — the intent is not in doubt there
@@ -48,9 +26,7 @@ type __VLS_Slots = {
      * something that can take focus, or keyboard users will never see the tooltip.
      */
     default(props: {
-        triggerProps: {
-            'aria-describedby': string;
-        };
+        triggerProps: TooltipTriggerProps;
     }): unknown;
     /**
      * Content richer than a plain string: formatting, a keyboard shortcut, an icon. It
@@ -63,7 +39,7 @@ type __VLS_Slots = {
 };
 declare const __VLS_base: import('vue').DefineComponent<TooltipProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TooltipProps> & Readonly<{}>, {
     text: string;
-    placement: Placement;
+    placement: TooltipPlacement;
     delay: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/VTooltip/VTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"VTooltip.js","names":[],"sources":["../../../src/components/VTooltip/VTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, useId } from 'vue'\n\nimport VPopover from '../VPopover/VPopover.vue'\n\nimport { useTimer } from '../../composables/useTimer'\n\n/**\n * A short explanation appearing beside an element when the pointer rests on it or\n * when it takes keyboard focus. It is built on VPopover, in the mode where nothing\n * closes by itself, since a tooltip has its own rules about when to appear and when\n * to go.\n *\n * Those rules are why there is JavaScript here at all: HTML has no stable way to say\n * \"show this after a short delay on hover or focus\" — the proposal for it is still\n * experimental — so the component handles the delay, the pointer, the focus, the press\n * on the trigger, and Escape, which must dismiss a tooltip without moving the focus\n * (WCAG 1.4.13).\n *\n * There are four ways out and each covers a case the others do not: the pointer leaves,\n * the focus leaves, Escape is pressed, or the trigger is PRESSED — that last one for a\n * trigger which opens a panel, where the tooltip would otherwise stand over what it just\n * opened. The template says which browser makes it necessary.\n *\n * The positioning is pure CSS and needs no generated identifier: the wrapper names\n * itself as the anchor and confines that name to its own subtree. The confinement is\n * essential — a visible panel sits in the top layer, which anchor resolution treats\n * as coming after the whole document, so without it every tooltip on the page would\n * attach to the last wrapper carrying the name.\n *\n * The wrapper stays here rather than being delegated to VPopover's trigger slot,\n * because a tooltip trigger is not a button that opens a panel — it would then toggle\n * on click — but an element the panel DESCRIBES.\n */\ntype Placement =\n  'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right'\n\ninterface TooltipProps {\n  /** What the tooltip says. The `#content` slot replaces it when both are given. */\n  text?: string\n  /**\n   * Which side of the element the tooltip appears on. The browser flips it to the\n   * opposite side by itself when there is not enough room.\n   */\n  placement?: Placement\n  /**\n   * How long the pointer must rest on the element before the tooltip appears, in\n   * milliseconds. Keyboard focus opens it at once — the intent is not in doubt there\n   * — and a delay of 0 disables the wait entirely.\n   */\n  delay?: number\n}\n\nconst props = withDefaults(defineProps<TooltipProps>(), {\n  text: undefined,\n  placement: 'top',\n  delay: 300,\n})\n\ndefineSlots<{\n  /**\n   * The element the tooltip describes. Bind the `triggerProps` it receives onto it —\n   * that is what ties the two together for assistive technology — and make sure it is\n   * something that can take focus, or keyboard users will never see the tooltip.\n   */\n  default(props: { triggerProps: { 'aria-describedby': string } }): unknown\n  /**\n   * Content richer than a plain string: formatting, a keyboard shortcut, an icon. It\n   * must stay NON-interactive. The tooltip closes as soon as the pointer leaves the\n   * element, so a link or a button inside could never be reached, and the description\n   * is flattened to plain text for screen readers anyway. Content one can interact\n   * with belongs in a panel that stays open, such as VMenu.\n   */\n  content?(): unknown\n}>()\n\nconst tooltipId = useId()\n// @a11y\n/*\n * The panel is opened and closed by calling it directly rather than through\n * `v-model:open`. Keyboard focus has to open it SYNCHRONOUSLY, and a model would go\n * through VPopover's watcher, hence through a tick. There is nothing lost either way:\n * a tooltip publishes no open state anyone needs to read.\n *\n * Calling twice is harmless — the guards for that live upstream in usePopover.\n */\nconst popoverRef = ref<InstanceType<typeof VPopover> | null>(null)\n\n// The delay before appearing. useTimer is what makes it re-armable and cancels it\n// when the component goes away.\nconst timer = useTimer()\n\n// @core\nfunction show(immediate = false) {\n  // A delay of 0 runs the callback synchronously — the design system's convention,\n  // and what lets keyboard focus share this code path without waiting a tick.\n  timer.start(() => popoverRef.value?.show(), immediate ? 0 : props.delay)\n}\n\nfunction hide() {\n  timer.cancel()\n  popoverRef.value?.hide()\n}\n\n// @keyboard @a11y — Escape must dismiss a tooltip opened by hover or focus without\n// moving the focus anywhere (WCAG 1.4.13): content appearing on hover has to be\n// dismissible, for a magnifier user whose view it may be covering.\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') hide()\n}\n</script>\n\n<template>\n  <!--\n    TRAP — `pointerdown` is what stops a tooltip from surviving the click that acted on its\n    trigger, and the case it really covers is a trigger that OPENS something: a menu, a\n    dialog, a popover of any kind. The tooltip would then stand over what it opened, and\n    none of the other three exits applies — the pointer has not left, the focus has not\n    moved out on its own, and nobody pressed Escape.\n\n    It looks redundant on Chromium and Firefox, where a click focuses the button and the\n    panel then takes the focus, which fires this wrapper's `focusout`. Safari on macOS does\n    NOT focus a button on click, so nothing leaves the wrapper and the tooltip stays up,\n    behind the panel, until the pointer moves. Delete this line and that is the bug that\n    comes back, on one browser only.\n\n    It is `pointerdown` and not `click`, so the tooltip is gone BEFORE the panel appears\n    rather than overlapping it for a frame. Keyboard activation sends no `pointerdown` at\n    all, and needs none: focus moving into the panel closes the tooltip everywhere.\n  -->\n  <span\n    class=\"v-tooltip\"\n    @pointerenter=\"show()\"\n    @pointerleave=\"hide\"\n    @pointerdown=\"hide\"\n    @focusin=\"show(true)\"\n    @focusout=\"hide\"\n    @keydown=\"onKeydown\"\n  >\n    <slot :trigger-props=\"{ 'aria-describedby': tooltipId }\" />\n    <VPopover\n      :id=\"tooltipId\"\n      ref=\"popoverRef\"\n      mode=\"manual\"\n      anchor=\"--tooltip-anchor\"\n      :placement=\"placement\"\n      :surface=\"false\"\n      role=\"tooltip\"\n      class=\"v-tooltip-panel\"\n    >\n      <slot name=\"content\">{{ text }}</slot>\n    </VPopover>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The wrapper is FLEX and not inline-block, for the same reason as `.v-badge-host`:\n     both are inline-level atomic boxes, so the surrounding text flows identically, but\n     an inline-block establishes an inline formatting context for the trigger — which\n     then sits on a line box and adds the strut's descender to the wrapper's height.\n     That is not only a couple of pixels in a flex row: this wrapper is also the ANCHOR,\n     so the panel is offset by them too.\n\n     `align-items: center` covers what is left. A wrapper stretched by a parent in\n     `align-items: stretch` would otherwise stretch the trigger with it, where the\n     inline-block form left it at its natural height. */\n  .v-tooltip {\n    display: inline-flex;\n    align-items: center;\n    anchor-name: --tooltip-anchor;\n    /* Confining the name to this subtree is indispensable: a visible panel moves to\n       the top layer, where anchor resolution treats it as coming after the whole\n       document, so without it every tooltip would attach to the LAST wrapper carrying\n       this name. */\n    anchor-scope: --tooltip-anchor;\n  }\n\n  /* The anchoring itself comes from VPopover, through the `anchor` prop.\n\n     The selector is written as a compound of two classes that both land on this same\n     element, even though the panel class it guards against — `.v-panel` — is never\n     present here, VTooltip asking for no surface. It is written that way so it cannot\n     break the day that prop changes: at equal specificity the winner between two\n     component sheets is decided by the order the consumer's bundler happens to\n     produce, which is nobody's decision. */\n  .v-popover-panel.v-tooltip-panel {\n    width: max-content;\n    max-width: min(18rem, calc(100vw - var(--vectis-space-8)));\n    padding: var(--vectis-space-1) var(--vectis-space-2);\n    /* The tooltip is painted against the page rather than with it: a dark surface in\n       both themes, darker still in the dark one, so it reads as an overlay whatever\n       it happens to cover. */\n    background: var(--vectis-color-surface-inverse);\n    color: var(--vectis-color-text-on-inverse);\n    border: none;\n    border-radius: var(--vectis-radius-sm);\n    box-shadow: var(--vectis-shadow-sm);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-caption-size);\n    line-height: var(--vectis-text-caption-leading);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VTooltip.js","names":[],"sources":["../../../src/components/VTooltip/VTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A short explanation appearing beside an element on hover or keyboard focus. A VPopover in\n * `mode=\"manual\"`, a tooltip having its own rules about when to appear and when to go.\n *\n * Those rules are why there is JS here at all: HTML has no stable way to say \"show this\n * after a delay on hover or focus\", so the component handles the delay, the pointer, the\n * focus, a press on the trigger, and Escape — which must dismiss without moving the focus\n * (WCAG 1.4.13).\n *\n * Four ways out, each covering what the others do not: the pointer leaves, the focus leaves,\n * Escape, or the trigger is PRESSED — that last for a trigger opening a panel, where the\n * tooltip would otherwise stand over what it just opened.\n *\n * Positioning is pure CSS with no generated id: the wrapper names itself as the anchor and\n * confines that name to its own subtree. The confinement is essential — a shown panel moves\n * to the top layer, which anchor resolution treats as coming after the whole document, so\n * without it every tooltip would attach to the last wrapper named on the page.\n *\n * The wrapper stays HERE rather than going through VPopover's `#trigger`: a tooltip trigger\n * is not a `popovertarget` invoker, which would toggle on click, but an element the panel\n * DESCRIBES.\n */\n\nimport { ref, useId } from 'vue'\n\nimport VPopover from '../VPopover/VPopover.vue'\n\nimport { useTimer } from '../../composables/useTimer'\nimport { isKeyboardFocus } from '../../utils/focus'\n\n/** Which side of the element the tooltip appears on. */\nexport type TooltipPlacement =\n  'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right'\n\n/** What the described element has to carry: the link to the tooltip that describes it. */\nexport type TooltipTriggerProps = {\n  'aria-describedby': string\n}\n\ninterface TooltipProps {\n  /** What the tooltip says. The `#content` slot replaces it when both are given. */\n  text?: string\n  /**\n   * Which side of the element the tooltip appears on. The browser flips it to the\n   * opposite side by itself when there is not enough room.\n   */\n  placement?: TooltipPlacement\n  /**\n   * How long the pointer must rest on the element before the tooltip appears, in\n   * milliseconds. Keyboard focus opens it at once — the intent is not in doubt there\n   * — and a delay of 0 disables the wait entirely.\n   */\n  delay?: number\n}\n\nconst props = withDefaults(defineProps<TooltipProps>(), {\n  text: undefined,\n  placement: 'top',\n  delay: 300,\n})\n\ndefineSlots<{\n  /**\n   * The element the tooltip describes. Bind the `triggerProps` it receives onto it —\n   * that is what ties the two together for assistive technology — and make sure it is\n   * something that can take focus, or keyboard users will never see the tooltip.\n   */\n  default(props: { triggerProps: TooltipTriggerProps }): unknown\n  /**\n   * Content richer than a plain string: formatting, a keyboard shortcut, an icon. It\n   * must stay NON-interactive. The tooltip closes as soon as the pointer leaves the\n   * element, so a link or a button inside could never be reached, and the description\n   * is flattened to plain text for screen readers anyway. Content one can interact\n   * with belongs in a panel that stays open, such as VMenu.\n   */\n  content?(): unknown\n}>()\n\nconst tooltipId = useId()\n// @a11y\n/*\n * The panel is opened and closed by calling it directly rather than through\n * `v-model:open`. Keyboard focus has to open it SYNCHRONOUSLY, and a model would go\n * through VPopover's watcher, hence through a tick. There is nothing lost either way:\n * a tooltip publishes no open state anyone needs to read.\n *\n * Calling twice is harmless — the guards for that live upstream in usePopover.\n */\nconst popoverRef = ref<InstanceType<typeof VPopover> | null>(null)\n\n// The delay before appearing. useTimer is what makes it re-armable and cancels it\n// when the component goes away.\nconst timer = useTimer()\n\n// @core\nfunction show(immediate = false) {\n  // A delay of 0 runs the callback synchronously — the design system's convention,\n  // and what lets keyboard focus share this code path without waiting a tick.\n  timer.start(() => popoverRef.value?.show(), immediate ? 0 : props.delay)\n}\n\nfunction hide() {\n  timer.cancel()\n  popoverRef.value?.close()\n}\n\n// @a11y\n/*\n * The tooltip belongs to the KEYBOARD focus, and a `focusin` says the focus arrived, never\n * how it got there. Three ways in are not a Tab: a click, which the pointer already covers\n * and which the `pointerdown` above has just closed the tooltip for; a tap, which no browser\n * agrees on; and a `focus()` from code — the one a closing panel hands back to the button\n * that opened it, which would raise a tooltip over a page the reader is no longer pointing\n * at. `:focus-visible` is the browser's own answer to the question, the same one VMenu asks\n * to decide where a menu's focus lands.\n *\n * The consequence to know: a tooltip never opens on a tap. Content a touch reader needs\n * cannot live here alone.\n */\nfunction onFocusIn(event: FocusEvent) {\n  if (isKeyboardFocus(event.target)) show(true)\n}\n\n// @keyboard @a11y — Escape must dismiss a tooltip opened by hover or focus without\n// moving the focus anywhere (WCAG 1.4.13): content appearing on hover has to be\n// dismissible, for a magnifier user whose view it may be covering.\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') hide()\n}\n</script>\n\n<template>\n  <!--\n    TRAP — `pointerdown` is what stops a tooltip from surviving the click that acted on its\n    trigger, and the case it really covers is a trigger that OPENS something: a menu, a\n    dialog, a popover of any kind. The tooltip would then stand over what it opened, and\n    none of the other three exits applies — the pointer has not left, the focus has not\n    moved out on its own, and nobody pressed Escape.\n\n    It looks redundant on Chromium and Firefox, where a click focuses the button and the\n    panel then takes the focus, which fires this wrapper's `focusout`. Safari on macOS does\n    NOT focus a button on click, so nothing leaves the wrapper and the tooltip stays up,\n    behind the panel, until the pointer moves. Delete this line and that is the bug that\n    comes back, on one browser only.\n\n    It is `pointerdown` and not `click`, so the tooltip is gone BEFORE the panel appears\n    rather than overlapping it for a frame. Keyboard activation sends no `pointerdown` at\n    all, and needs none: focus moving into the panel closes the tooltip everywhere.\n  -->\n  <span\n    class=\"v-tooltip\"\n    @pointerenter=\"show()\"\n    @pointerleave=\"hide\"\n    @pointerdown=\"hide\"\n    @focusin=\"onFocusIn\"\n    @focusout=\"hide\"\n    @keydown=\"onKeydown\"\n  >\n    <slot :trigger-props=\"{ 'aria-describedby': tooltipId }\" />\n    <VPopover\n      :id=\"tooltipId\"\n      ref=\"popoverRef\"\n      mode=\"manual\"\n      anchor=\"--tooltip-anchor\"\n      :placement=\"placement\"\n      bare\n      role=\"tooltip\"\n      class=\"v-tooltip-panel\"\n    >\n      <slot name=\"content\">{{ text }}</slot>\n    </VPopover>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The wrapper is FLEX and not inline-block, for the same reason as `.v-badge-host`:\n     both are inline-level atomic boxes, so the surrounding text flows identically, but\n     an inline-block establishes an inline formatting context for the trigger — which\n     then sits on a line box and adds the strut's descender to the wrapper's height.\n     That is not only a couple of pixels in a flex row: this wrapper is also the ANCHOR,\n     so the panel is offset by them too.\n\n     `align-items: center` covers what is left. A wrapper stretched by a parent in\n     `align-items: stretch` would otherwise stretch the trigger with it, where the\n     inline-block form left it at its natural height. */\n  .v-tooltip {\n    display: inline-flex;\n    align-items: center;\n    anchor-name: --tooltip-anchor;\n    /* Confining the name to this subtree is indispensable: a visible panel moves to\n       the top layer, where anchor resolution treats it as coming after the whole\n       document, so without it every tooltip would attach to the LAST wrapper carrying\n       this name. */\n    anchor-scope: --tooltip-anchor;\n  }\n\n  /* The anchoring itself comes from VPopover, through the `anchor` prop.\n\n     The selector is written as a compound of two classes that both land on this same\n     element, even though the panel class it guards against — `.v-panel` — is never\n     present here, VTooltip asking for a `bare` panel. It is written that way so it cannot\n     break the day that prop changes: at equal specificity the winner between two\n     component sheets is decided by the order the consumer's bundler happens to\n     produce, which is nobody's decision. */\n  .v-popover-panel.v-tooltip-panel {\n    width: max-content;\n    max-width: min(18rem, calc(100vw - var(--vectis-space-8)));\n    padding: var(--vectis-space-1) var(--vectis-space-2);\n    /* The tooltip is painted against the page rather than with it: a dark surface in\n       both themes, darker still in the dark one, so it reads as an overlay whatever\n       it happens to cover. */\n    background: var(--vectis-color-surface-inverse);\n    color: var(--vectis-color-text-on-inverse);\n    border: none;\n    /* The control radius capped at half the height of a ONE-line bubble, the row recipe\n       of VSideNavigationItem: a tooltip wraps past its max-width, and under a pill\n       override a two-line bubble would otherwise round to half of its own height. */\n    border-radius: min(var(--vectis-radius-interactive), calc(0.5lh + var(--vectis-space-1)));\n    box-shadow: var(--vectis-shadow-sm);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-caption-size);\n    line-height: var(--vectis-text-caption-leading);\n  }\n}\n</style>\n"],"mappings":""}