vectis-ui 0.8.1 → 0.9.0

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

@@ -62,7 +62,7 @@ var h = /*@__PURE__*/ s({
 		function v(e) {
 			if (h.multiple) {
 				let t = Array.isArray(g.value) ? g.value : [];
-				if (h.mandatory && t.length === 1 && t.includes(e)) return;
+				if (h.mandatory && t.length > 0 && t.every((t) => t === e)) return;
 				g.value = i(t, e);
 				return;
 			}
@@ -89,6 +89,7 @@ var h = /*@__PURE__*/ s({
 			}
 		});
 		function y(e) {
+			if (!e.target.matches(".v-toggle-item")) return;
 			let r = e.currentTarget;
 			t(e, r, () => n(r, ".v-toggle-item:not(:disabled)"), { vertical: h.orientation === "vertical" });
 		}

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 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"}
+{"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\n/** How the items that are not selected are drawn. */\nexport type ToggleItemVariant = 'ghost' | 'outline'\n/** How a selected item is drawn. */\nexport type ToggleSelectedVariant = 'solid' | 'soft' | 'ghost'\n/** The colour of a selected item. */\nexport type ToggleTone = 'accent' | 'neutral' | 'danger'\n/** The height of the items, from the scale every control shares. */\nexport type ToggleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n/** Whether the items run across the page or down it. */\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, such as \"Text alignment\" or \"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    // `every` rather than a length of one: the removal takes out every copy of the value, so\n    // a list holding it twice would otherwise be emptied past the guard.\n    if (props.mandatory && current.length > 0 && current.every((v) => v === 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 *\n * Only a key pressed ON an item is taken. An item may carry a companion whose content sits\n * inside the group (a VPopover's panel stays a DOM descendant of its trigger), and an arrow\n * typed in a field there must move the caret, not the focus.\n */\nfunction onKeydown(event: KeyboardEvent) {\n  if (!(event.target as Element).matches('.v-toggle-item')) return\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-item-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  /*\n   * Windows forced colors replace every background with the page's, so the pressed item would look\n   * exactly like the others there: the fill is its only cue, the state being in an ARIA\n   * attribute a sighted reader never sees. It takes the system's own selection pair\n   * instead, and opts out of the forcing for that element alone so the pair is painted.\n   *\n   * TRAP — the class is repeated to reach (0,6,0). The variant, hover and active rules\n   * reach (0,5,0), and with the forcing turned off any of them that still won would paint\n   * its tone over the selection, with HighlightText on top of it.\n   */\n  @media (forced-colors: active) {\n    .v-toggle-item.v-toggle-item.v-toggle-item.v-toggle-item[aria-pressed='true']:not(:disabled) {\n      forced-color-adjust: none;\n      background-color: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n      outline-color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4GA,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;IAG5D,IAAI,EAAM,aAAa,EAAQ,SAAS,KAAK,EAAQ,OAAO,MAAM,MAAM,CAAK,GAAG;IAChF,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;EAmBD,SAAS,EAAU,GAAsB;GACvC,IAAI,CAAE,EAAM,OAAmB,QAAQ,gBAAgB,GAAG;GAC1D,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

@@ -31,6 +31,10 @@ interface ToggleItemProps {
 type __VLS_Slots = {
     /** The content of the item, replacing the `label` prop. */
     default?(): unknown;
+    /** Content before the label, which takes the place of `iconStart`. */
+    start?(): unknown;
+    /** Content after the label, which takes the place of `iconEnd`. */
+    end?(): unknown;
 };
 declare const __VLS_base: import('vue').DefineComponent<ToggleItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ToggleItemProps> & Readonly<{}>, {
     label: string;

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. 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":""}
+{"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  /** Content before the label, which takes the place of `iconStart`. */\n  start?(): unknown\n  /** Content after the label, which takes the place of `iconEnd`. */\n  end?(): 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 (\n    !props.label &&\n    !slots.default &&\n    Boolean(slots.start || slots.end || props.iconStart || props.iconEnd)\n  )\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 || $slots.start\" #start>\n      <slot name=\"start\">\n        <VIcon\n          v-bind=\"iconProps(iconStart!)\"\n          :filled=\"iconFilled || (selected && toggle?.selectedIconFilled)\"\n        />\n      </slot>\n    </template>\n    <template v-if=\"iconEnd || $slots.end\" #end>\n      <slot name=\"end\"><VIcon v-bind=\"iconProps(iconEnd!)\" :filled=\"iconFilled\" /></slot>\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

@@ -23,7 +23,7 @@ var y = /*@__PURE__*/ u({
 	setup(u) {
 		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 !y.label && !b.default && !!(b.start || b.end || y.iconStart || y.iconEnd);
 		}
 		return (r, i) => (p(), a(n, {
 			class: "v-toggle-item",
@@ -36,13 +36,13 @@ var y = /*@__PURE__*/ u({
 		}, s({
 			default: v(() => [C() ? o("", !0) : m(r.$slots, "default", {}, () => [c(h(u.label), 1)], void 0, 0)]),
 			_: 2
-		}, [u.iconStart ? {
+		}, [u.iconStart || r.$slots.start ? {
 			name: "start",
-			fn: v(() => [l(t, f(g(e)(u.iconStart), { filled: u.iconFilled || S.value && g(x)?.selectedIconFilled }), null, 16, ["filled"])]),
+			fn: v(() => [m(r.$slots, "start", {}, () => [l(t, f(g(e)(u.iconStart), { filled: u.iconFilled || S.value && g(x)?.selectedIconFilled }), null, 16, ["filled"])])]),
 			key: "0"
-		} : void 0, u.iconEnd ? {
+		} : void 0, u.iconEnd || r.$slots.end ? {
 			name: "end",
-			fn: v(() => [l(t, f(g(e)(u.iconEnd), { filled: u.iconFilled }), null, 16, ["filled"])]),
+			fn: v(() => [m(r.$slots, "end", {}, () => [l(t, f(g(e)(u.iconEnd), { filled: u.iconFilled }), null, 16, ["filled"])])]),
 			key: "1"
 		} : void 0]), 1032, [
 			"aria-pressed",

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. 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"}
+{"version":3,"file":"VToggleItem.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"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  /** Content before the label, which takes the place of `iconStart`. */\n  start?(): unknown\n  /** Content after the label, which takes the place of `iconEnd`. */\n  end?(): 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 (\n    !props.label &&\n    !slots.default &&\n    Boolean(slots.start || slots.end || props.iconStart || props.iconEnd)\n  )\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 || $slots.start\" #start>\n      <slot name=\"start\">\n        <VIcon\n          v-bind=\"iconProps(iconStart!)\"\n          :filled=\"iconFilled || (selected && toggle?.selectedIconFilled)\"\n        />\n      </slot>\n    </template>\n    <template v-if=\"iconEnd || $slots.end\" #end>\n      <slot name=\"end\"><VIcon v-bind=\"iconProps(iconEnd!)\" :filled=\"iconFilled\" /></slot>\n    </template>\n    <slot v-if=\"!iconOnly()\">{{ label }}</slot>\n  </VButton>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAqDA,IAAM,IAAQ,GAQR,IAAQ,EAAA,GASR,IAAS,EAAO,GAAW,IAAI,GAE/B,IAAW,QAAe,KAAU,QAAQ,EAAO,WAAW,EAAM,KAAK,CAAC;EAQhF,SAAS,IAAW;GAClB,OACE,CAAC,EAAM,SACP,CAAC,EAAM,WACP,GAAQ,EAAM,SAAS,EAAM,OAAO,EAAM,aAAa,EAAM;EAEjE;yBAWE,EAqBU,GAAA;GApBR,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;;oBASb,CAIF,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;;MAXjB,EAAA,aAAaA,EAAAA,OAAO,QAAA;SAAQ;eAMnC,CALP,EAKO,EAAA,QAAA,SAAA,CAAA,SAAA,CAJL,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,CAAA,CAAA;;cAIlC,EAAA,WAAWA,EAAAA,OAAO,MAAA;SAAM;eAC6C,CAAnF,EAAmF,EAAA,QAAA,OAAA,CAAA,SAAA,CAAlE,EAA2D,GAA3D,EAAe,EAA4C,CAAA,CAAnC,CAAC,EAAA,OAAO,GAAA,EAAK,QAAQ,EAAA,WAAU,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}

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: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}}
+@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{inline-size:max-content;max-inline-size:min(var(--vectis-control-size-tooltip-max), calc(100dvi - 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}@media (forced-colors:active){.v-popover-panel.v-tooltip-panel{outline:1px solid canvastext}}}

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

@@ -1,5 +1,5 @@
 /** Which side of the element the tooltip appears on. */
-export type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
+export type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 /** What the described element has to carry: the link to the tooltip that describes it. */
 export type TooltipTriggerProps = {
     'aria-describedby': string;
@@ -14,30 +14,37 @@ interface TooltipProps {
     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
-     * — and a delay of 0 disables the wait entirely.
+     * milliseconds. Keyboard focus opens it at once, the intent being in no doubt there,
+     * and a delay of 0 disables the wait entirely.
      */
     delay?: number;
 }
 type __VLS_Slots = {
     /**
-     * The element the tooltip describes. Bind the `triggerProps` it receives onto it —
-     * that is what ties the two together for assistive technology — and make sure it is
-     * something that can take focus, or keyboard users will never see the tooltip.
+     * The element the tooltip describes. Bind the `triggerProps` it receives onto it, which
+     * is what ties the two together for assistive technology, and make sure it is something
+     * that can take focus, or keyboard users will never see the tooltip.
      */
     default(props: {
         triggerProps: TooltipTriggerProps;
     }): unknown;
     /**
      * Content richer than a plain string: formatting, a keyboard shortcut, an icon. It
-     * must stay NON-interactive. The tooltip closes as soon as the pointer leaves the
-     * element, so a link or a button inside could never be reached, and the description
-     * is flattened to plain text for screen readers anyway. Content one can interact
+     * must stay NON-interactive: the description is flattened to plain text for screen
+     * readers, and nothing inside can be reached from the keyboard. Content one can interact
      * with belongs in a panel that stays open, such as VMenu.
      */
     content?(): unknown;
 };
-declare const __VLS_base: import('vue').DefineComponent<TooltipProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TooltipProps> & Readonly<{}>, {
+declare function hide(): void;
+declare const __VLS_base: import('vue').DefineComponent<TooltipProps, {
+    /** Shows the tooltip at once, without the hover delay. */
+    show: () => void;
+    /** Hides the tooltip. */
+    close: typeof hide;
+    /** The tooltip bubble. */
+    el: import('vue').ComputedRef<HTMLElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TooltipProps> & Readonly<{}>, {
     text: string;
     placement: TooltipPlacement;
     delay: number;

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\">\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":""}
+{"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 * It stays as long as EITHER the pointer rests on it (the trigger or the bubble) or the\n * keyboard focus is on the trigger, and goes when both have left, after a short grace the\n * pointer needs to cross the gap onto the bubble (WCAG 1.4.13: hoverable, persistent).\n * Two more ways out: Escape, heard from anywhere on the page while it shows and spent on\n * it, and the trigger being PRESSED, for a trigger opening a panel, where the tooltip would\n * 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 { computed, onBeforeUnmount, 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'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\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 being in no 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, which\n   * is what ties the two together for assistive technology, and make sure it is something\n   * 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 description is flattened to plain text for screen\n   * readers, and nothing inside can be reached from the keyboard. 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/**\n * How long a tooltip the pointer has left waits before going: the time to cross the gap\n * between the trigger and the bubble, which the margin leaves empty and which no pointer\n * event covers. The bubble is a DOM descendant of the wrapper, so reaching it counts as\n * coming back and cancels the close.\n */\nconst LEAVE_GRACE = 100\n\n// The two reasons it is showing. It goes only once neither holds.\nlet hovered = false\nlet focused = false\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\nfunction onPointerEnter() {\n  hovered = true\n  show()\n}\n\nfunction onPointerLeave() {\n  hovered = false\n  if (focused) return\n  timer.start(() => popoverRef.value?.close(), LEAVE_GRACE)\n}\n\nfunction onPointerDown() {\n  hovered = false\n  focused = false\n  hide()\n}\n\nfunction onFocusOut() {\n  focused = false\n  if (!hovered) hide()\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)) return\n  focused = true\n  show(true)\n}\n\n// @keyboard @a11y\n// Escape must dismiss a tooltip opened by hover or focus without moving the focus anywhere\n// (WCAG 1.4.13), for a magnifier user whose view it may be covering. It is heard on the\n// DOCUMENT while the tooltip shows, since a hovered tooltip rarely holds the focus, and it\n// is SPENT on it: inside a VDialog the same key would otherwise also be the dialog's close\n// request.\nfunction onDocumentKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Escape' || event.defaultPrevented) return\n  event.preventDefault()\n  hovered = false\n  focused = false\n  hide()\n}\n\nconst listening = ref(false)\nfunction onOpenChange(open: boolean) {\n  if (open === listening.value) return\n  listening.value = open\n  if (open) document.addEventListener('keydown', onDocumentKeydown)\n  else document.removeEventListener('keydown', onDocumentKeydown)\n}\nonBeforeUnmount(() => onOpenChange(false))\n\ndefineExpose({\n  /** Shows the tooltip at once, without the hover delay. */\n  show: () => show(true),\n  /** Hides the tooltip. */\n  close: hide,\n  /** The tooltip bubble. */\n  el: computed(() => popoverRef.value?.el ?? null),\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=\"onPointerEnter\"\n    @pointerleave=\"onPointerLeave\"\n    @pointerdown=\"onPointerDown\"\n    @focusin=\"onFocusIn\"\n    @focusout=\"onFocusOut\"\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      @update:open=\"onOpenChange\"\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    inline-size: max-content;\n    max-inline-size: min(\n      var(--vectis-control-size-tooltip-max),\n      calc(100dvi - var(--vectis-space-8))\n    );\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-inline-size, 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  /* Windows forced colors flattens the bubble's background to Canvas and drops its shadow,\n     which were its only edge: it would float over the page with no boundary at all. An\n     outline draws one without moving the layout by a pixel. */\n  @media (forced-colors: active) {\n    .v-popover-panel.v-tooltip-panel {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VTooltip/VTooltip.vue_vue_type_script_setup_true_lang.js

@@ -1,54 +1,74 @@
 import e from "../VPopover/VPopover.js";
 import { useTimer as t } from "../../composables/useTimer.js";
 import { isKeyboardFocus as n } from "../../utils/focus.js";
-import { createElementBlock as r, createTextVNode as i, createVNode as a, defineComponent as o, openBlock as s, ref as c, renderSlot as l, toDisplayString as u, unref as d, useId as f, withCtx as p } from "vue";
+import { computed as r, createElementBlock as i, createTextVNode as a, createVNode as o, defineComponent as s, onBeforeUnmount as c, openBlock as l, ref as u, renderSlot as d, toDisplayString as f, unref as p, useId as m, withCtx as h } from "vue";
 //#region src/components/VTooltip/VTooltip.vue?vue&type=script&setup=true&lang.ts
-var m = /*@__PURE__*/ o({
+var g = 100, _ = /*@__PURE__*/ s({
 	__name: "VTooltip",
 	props: {
 		text: { default: void 0 },
 		placement: { default: "top" },
 		delay: { default: 300 }
 	},
-	setup(o) {
-		let m = o, h = f(), g = c(null), _ = t();
-		function v(e = !1) {
-			_.start(() => g.value?.show(), e ? 0 : m.delay);
+	setup(s, { expose: _ }) {
+		let v = s, y = m(), b = u(null), x = t(), S = !1, C = !1;
+		function w(e = !1) {
+			x.start(() => b.value?.show(), e ? 0 : v.delay);
 		}
-		function y() {
-			_.cancel(), g.value?.close();
+		function T() {
+			x.cancel(), b.value?.close();
 		}
-		function b(e) {
-			n(e.target) && v(!0);
+		function E() {
+			S = !0, w();
 		}
-		function x(e) {
-			e.key === "Escape" && y();
+		function D() {
+			S = !1, !C && x.start(() => b.value?.close(), g);
 		}
-		return (t, n) => (s(), r("span", {
+		function O() {
+			S = !1, C = !1, T();
+		}
+		function k() {
+			C = !1, S || T();
+		}
+		function A(e) {
+			n(e.target) && (C = !0, w(!0));
+		}
+		function j(e) {
+			e.key !== "Escape" || e.defaultPrevented || (e.preventDefault(), S = !1, C = !1, T());
+		}
+		let M = u(!1);
+		function N(e) {
+			e !== M.value && (M.value = e, e ? document.addEventListener("keydown", j) : document.removeEventListener("keydown", j));
+		}
+		return c(() => N(!1)), _({
+			show: () => w(!0),
+			close: T,
+			el: r(() => b.value?.el ?? null)
+		}), (t, n) => (l(), i("span", {
 			class: "v-tooltip",
-			onPointerenter: n[0] ||= (e) => v(),
-			onPointerleave: y,
-			onPointerdown: y,
-			onFocusin: b,
-			onFocusout: y,
-			onKeydown: x
-		}, [l(t.$slots, "default", { triggerProps: { "aria-describedby": d(h) } }), a(e, {
-			id: d(h),
+			onPointerenter: E,
+			onPointerleave: D,
+			onPointerdown: O,
+			onFocusin: A,
+			onFocusout: k
+		}, [d(t.$slots, "default", { triggerProps: { "aria-describedby": p(y) } }), o(e, {
+			id: p(y),
 			ref_key: "popoverRef",
-			ref: g,
+			ref: b,
 			mode: "manual",
 			anchor: "--tooltip-anchor",
-			placement: o.placement,
+			placement: s.placement,
 			bare: "",
 			role: "tooltip",
-			class: "v-tooltip-panel"
+			class: "v-tooltip-panel",
+			"onUpdate:open": N
 		}, {
-			default: p(() => [l(t.$slots, "content", {}, () => [i(u(o.text), 1)])]),
+			default: h(() => [d(t.$slots, "content", {}, () => [a(f(s.text), 1)])]),
 			_: 3
 		}, 8, ["id", "placement"])], 32));
 	}
 });
 //#endregion
-export { m as default };
+export { _ as default };
 
 //# sourceMappingURL=VTooltip.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VTooltip.vue_vue_type_script_setup_true_lang.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":";;;;;;;;;;;;;EAwDA,IAAM,IAAQ,GAuBR,IAAY,EAAM,GAUlB,IAAa,EAA0C,IAAI,GAI3D,IAAQ,EAAS;EAGvB,SAAS,EAAK,IAAY,IAAO;GAG/B,EAAM,YAAY,EAAW,OAAO,KAAK,GAAG,IAAY,IAAI,EAAM,KAAK;EACzE;EAEA,SAAS,IAAO;GAEd,AADA,EAAM,OAAO,GACb,EAAW,OAAO,MAAM;EAC1B;EAeA,SAAS,EAAU,GAAmB;GACpC,AAAI,EAAgB,EAAM,MAAM,KAAG,EAAK,EAAI;EAC9C;EAKA,SAAS,EAAU,GAAsB;GACvC,AAAI,EAAM,QAAQ,YAAU,EAAK;EACnC;yBAqBE,EAsBO,QAAA;GArBL,OAAM;GACL,gBAAY,AAAA,EAAA,QAAA,MAAE,EAAI;GAClB,gBAAc;GACd,eAAa;GACb,WAAS;GACT,YAAU;GACD;MAEV,EAA2D,EAAA,QAAA,WAAA,EAApD,cAAa,EAAA,oBAAwB,EAAA,CAAA,EAAS,EAAA,CAAA,GACrD,EAWW,GAAA;GAVR,IAAI,EAAA,CAAA;YACD;GAAJ,KAAI;GACJ,MAAK;GACL,QAAO;GACN,WAAW,EAAA;GACZ,MAAA;GACA,MAAK;GACL,OAAM;;oBAEgC,CAAtC,EAAsC,EAAA,QAAA,WAAA,CAAA,SAAA,CAAA,EAAA,EAAd,EAAA,IAAI,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"VTooltip.vue_vue_type_script_setup_true_lang.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 * It stays as long as EITHER the pointer rests on it (the trigger or the bubble) or the\n * keyboard focus is on the trigger, and goes when both have left, after a short grace the\n * pointer needs to cross the gap onto the bubble (WCAG 1.4.13: hoverable, persistent).\n * Two more ways out: Escape, heard from anywhere on the page while it shows and spent on\n * it, and the trigger being PRESSED, for a trigger opening a panel, where the tooltip would\n * 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 { computed, onBeforeUnmount, 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'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\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 being in no 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, which\n   * is what ties the two together for assistive technology, and make sure it is something\n   * 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 description is flattened to plain text for screen\n   * readers, and nothing inside can be reached from the keyboard. 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/**\n * How long a tooltip the pointer has left waits before going: the time to cross the gap\n * between the trigger and the bubble, which the margin leaves empty and which no pointer\n * event covers. The bubble is a DOM descendant of the wrapper, so reaching it counts as\n * coming back and cancels the close.\n */\nconst LEAVE_GRACE = 100\n\n// The two reasons it is showing. It goes only once neither holds.\nlet hovered = false\nlet focused = false\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\nfunction onPointerEnter() {\n  hovered = true\n  show()\n}\n\nfunction onPointerLeave() {\n  hovered = false\n  if (focused) return\n  timer.start(() => popoverRef.value?.close(), LEAVE_GRACE)\n}\n\nfunction onPointerDown() {\n  hovered = false\n  focused = false\n  hide()\n}\n\nfunction onFocusOut() {\n  focused = false\n  if (!hovered) hide()\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)) return\n  focused = true\n  show(true)\n}\n\n// @keyboard @a11y\n// Escape must dismiss a tooltip opened by hover or focus without moving the focus anywhere\n// (WCAG 1.4.13), for a magnifier user whose view it may be covering. It is heard on the\n// DOCUMENT while the tooltip shows, since a hovered tooltip rarely holds the focus, and it\n// is SPENT on it: inside a VDialog the same key would otherwise also be the dialog's close\n// request.\nfunction onDocumentKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Escape' || event.defaultPrevented) return\n  event.preventDefault()\n  hovered = false\n  focused = false\n  hide()\n}\n\nconst listening = ref(false)\nfunction onOpenChange(open: boolean) {\n  if (open === listening.value) return\n  listening.value = open\n  if (open) document.addEventListener('keydown', onDocumentKeydown)\n  else document.removeEventListener('keydown', onDocumentKeydown)\n}\nonBeforeUnmount(() => onOpenChange(false))\n\ndefineExpose({\n  /** Shows the tooltip at once, without the hover delay. */\n  show: () => show(true),\n  /** Hides the tooltip. */\n  close: hide,\n  /** The tooltip bubble. */\n  el: computed(() => popoverRef.value?.el ?? null),\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=\"onPointerEnter\"\n    @pointerleave=\"onPointerLeave\"\n    @pointerdown=\"onPointerDown\"\n    @focusin=\"onFocusIn\"\n    @focusout=\"onFocusOut\"\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      @update:open=\"onOpenChange\"\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    inline-size: max-content;\n    max-inline-size: min(\n      var(--vectis-control-size-tooltip-max),\n      calc(100dvi - var(--vectis-space-8))\n    );\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-inline-size, 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  /* Windows forced colors flattens the bubble's background to Canvas and drops its shadow,\n     which were its only edge: it would float over the page with no boundary at all. An\n     outline draws one without moving the layout by a pixel. */\n  @media (forced-colors: active) {\n    .v-popover-panel.v-tooltip-panel {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;AAkHA,IAAM,IAAc;;;;;;;;EA5CpB,IAAM,IAAQ,GAsBR,IAAY,EAAM,GAUlB,IAAa,EAA0C,IAAI,GAI3D,IAAQ,EAAS,GAWnB,IAAU,IACV,IAAU;EAGd,SAAS,EAAK,IAAY,IAAO;GAG/B,EAAM,YAAY,EAAW,OAAO,KAAK,GAAG,IAAY,IAAI,EAAM,KAAK;EACzE;EAEA,SAAS,IAAO;GAEd,AADA,EAAM,OAAO,GACb,EAAW,OAAO,MAAM;EAC1B;EAEA,SAAS,IAAiB;GAExB,AADA,IAAU,IACV,EAAK;EACP;EAEA,SAAS,IAAiB;GACxB,IAAU,IACN,MACJ,EAAM,YAAY,EAAW,OAAO,MAAM,GAAG,CAAW;EAC1D;EAEA,SAAS,IAAgB;GAGvB,AAFA,IAAU,IACV,IAAU,IACV,EAAK;EACP;EAEA,SAAS,IAAa;GAEpB,AADA,IAAU,IACL,KAAS,EAAK;EACrB;EAeA,SAAS,EAAU,GAAmB;GAC/B,EAAgB,EAAM,MAAM,MACjC,IAAU,IACV,EAAK,EAAI;EACX;EAQA,SAAS,EAAkB,GAAsB;GAC3C,EAAM,QAAQ,YAAY,EAAM,qBACpC,EAAM,eAAe,GACrB,IAAU,IACV,IAAU,IACV,EAAK;EACP;EAEA,IAAM,IAAY,EAAI,EAAK;EAC3B,SAAS,EAAa,GAAe;GAC/B,MAAS,EAAU,UACvB,EAAU,QAAQ,GACd,IAAM,SAAS,iBAAiB,WAAW,CAAiB,IAC3D,SAAS,oBAAoB,WAAW,CAAiB;EAChE;SACA,QAAsB,EAAa,EAAK,CAAC,GAEzC,EAAa;GAEX,YAAY,EAAK,EAAI;GAErB,OAAO;GAEP,IAAI,QAAe,EAAW,OAAO,MAAM,IAAI;EACjD,CAAC,mBAqBC,EAsBO,QAAA;GArBL,OAAM;GACL,gBAAc;GACd,gBAAc;GACd,eAAa;GACb,WAAS;GACT,YAAU;MAEX,EAA2D,EAAA,QAAA,WAAA,EAApD,cAAa,EAAA,oBAAwB,EAAA,CAAA,EAAS,EAAA,CAAA,GACrD,EAYW,GAAA;GAXR,IAAI,EAAA,CAAA;YACD;GAAJ,KAAI;GACJ,MAAK;GACL,QAAO;GACN,WAAW,EAAA;GACZ,MAAA;GACA,MAAK;GACL,OAAM;GACL,iBAAa;;oBAEwB,CAAtC,EAAsC,EAAA,QAAA,WAAA,CAAA,SAAA,CAAA,EAAA,EAAd,EAAA,IAAI,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/VTypography/VTypography.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-typography{--typography-family:var(--vectis-text-family);--typography-tracking:normal;font-family:var(--typography-family);font-size:var(--typography-size);font-weight:var(--typography-weight);line-height:var(--typography-leading);letter-spacing:var(--typography-tracking);color:var(--typography-color,inherit);overflow-wrap:break-word;margin:0}.v-typography[data-variant=display]{--typography-family:var(--vectis-text-family-heading);--typography-size:var(--vectis-text-display-size);--typography-weight:var(--vectis-text-display-weight);--typography-leading:var(--vectis-text-display-leading);--typography-tracking:var(--vectis-text-display-tracking)}.v-typography[data-variant=heading-1]{--typography-family:var(--vectis-text-family-heading);--typography-size:var(--vectis-text-heading-1-size);--typography-weight:var(--vectis-text-heading-1-weight);--typography-leading:var(--vectis-text-heading-1-leading);--typography-tracking:var(--vectis-text-heading-1-tracking)}.v-typography[data-variant=heading-2]{--typography-family:var(--vectis-text-family-heading);--typography-size:var(--vectis-text-heading-2-size);--typography-weight:var(--vectis-text-heading-2-weight);--typography-leading:var(--vectis-text-heading-2-leading);--typography-tracking:var(--vectis-text-heading-2-tracking)}.v-typography[data-variant=heading-3]{--typography-family:var(--vectis-text-family-heading);--typography-size:var(--vectis-text-heading-3-size);--typography-weight:var(--vectis-text-heading-3-weight);--typography-leading:var(--vectis-text-heading-3-leading)}.v-typography[data-variant=heading-4]{--typography-family:var(--vectis-text-family-heading);--typography-size:var(--vectis-text-heading-4-size);--typography-weight:var(--vectis-text-heading-4-weight);--typography-leading:var(--vectis-text-heading-4-leading)}.v-typography[data-variant=subtitle]{--typography-size:var(--vectis-text-subtitle-size);--typography-weight:var(--vectis-text-subtitle-weight);--typography-leading:var(--vectis-text-subtitle-leading)}.v-typography[data-variant=body-xl]{--typography-size:var(--vectis-text-body-xl-size);--typography-weight:var(--vectis-text-body-xl-weight);--typography-leading:var(--vectis-text-body-xl-leading)}.v-typography[data-variant=body-lg]{--typography-size:var(--vectis-text-body-lg-size);--typography-weight:var(--vectis-text-body-lg-weight);--typography-leading:var(--vectis-text-body-lg-leading)}.v-typography[data-variant=body-md]{--typography-size:var(--vectis-text-body-md-size);--typography-weight:var(--vectis-text-body-md-weight);--typography-leading:var(--vectis-text-body-md-leading)}.v-typography[data-variant=body-sm]{--typography-size:var(--vectis-text-body-sm-size);--typography-weight:var(--vectis-text-body-sm-weight);--typography-leading:var(--vectis-text-body-sm-leading)}.v-typography[data-variant=label]{--typography-size:var(--vectis-text-label-size);--typography-weight:var(--vectis-text-label-weight);--typography-leading:var(--vectis-text-label-leading)}.v-typography[data-variant=caption]{--typography-size:var(--vectis-text-caption-size);--typography-weight:var(--vectis-text-caption-weight);--typography-leading:var(--vectis-text-caption-leading)}.v-typography[data-variant=overline]{--typography-size:var(--vectis-text-overline-size);--typography-weight:var(--vectis-text-overline-weight);--typography-leading:var(--vectis-text-overline-leading);--typography-tracking:var(--vectis-text-overline-tracking);text-transform:uppercase}.v-typography[data-variant=code]{--typography-family:var(--vectis-text-family-code);--typography-size:var(--vectis-text-code-size);--typography-weight:var(--vectis-text-code-weight);--typography-leading:var(--vectis-text-code-leading)}.v-typography[data-tone=muted]{--typography-color:var(--vectis-color-text-muted)}.v-typography[data-tone=subtle]{--typography-color:var(--vectis-color-text-subtle)}.v-typography[data-tone=accent]{--typography-color:var(--vectis-color-accent-text)}.v-typography[data-tone=danger]{--typography-color:var(--vectis-color-danger-text)}.v-typography[data-tone=success]{--typography-color:var(--vectis-color-success-text)}.v-typography[data-tone=warning]{--typography-color:var(--vectis-color-warning-text)}.v-typography[data-tone=on-inverse]{--typography-color:var(--vectis-color-text-on-inverse)}.v-typography[data-truncate]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}}
+@layer vectis.components{.v-typography{--typography-family:var(--vectis-text-family);--typography-tracking:normal;font-family:var(--typography-family);font-size:var(--typography-size);font-weight:var(--typography-weight);line-height:var(--typography-leading);letter-spacing:var(--typography-tracking);color:var(--typography-color,inherit);overflow-wrap:break-word;margin:0}:where(.v-typography){--typography-color:initial}.v-typography[data-variant=display]{--typography-family:var(--vectis-text-family-heading);--typography-size:var(--vectis-text-display-size);--typography-weight:var(--vectis-text-display-weight);--typography-leading:var(--vectis-text-display-leading);--typography-tracking:var(--vectis-text-display-tracking)}.v-typography[data-variant=heading-1]{--typography-family:var(--vectis-text-family-heading);--typography-size:var(--vectis-text-heading-1-size);--typography-weight:var(--vectis-text-heading-1-weight);--typography-leading:var(--vectis-text-heading-1-leading);--typography-tracking:var(--vectis-text-heading-1-tracking)}.v-typography[data-variant=heading-2]{--typography-family:var(--vectis-text-family-heading);--typography-size:var(--vectis-text-heading-2-size);--typography-weight:var(--vectis-text-heading-2-weight);--typography-leading:var(--vectis-text-heading-2-leading);--typography-tracking:var(--vectis-text-heading-2-tracking)}.v-typography[data-variant=heading-3]{--typography-family:var(--vectis-text-family-heading);--typography-size:var(--vectis-text-heading-3-size);--typography-weight:var(--vectis-text-heading-3-weight);--typography-leading:var(--vectis-text-heading-3-leading)}.v-typography[data-variant=heading-4]{--typography-family:var(--vectis-text-family-heading);--typography-size:var(--vectis-text-heading-4-size);--typography-weight:var(--vectis-text-heading-4-weight);--typography-leading:var(--vectis-text-heading-4-leading)}.v-typography[data-variant=subtitle]{--typography-size:var(--vectis-text-subtitle-size);--typography-weight:var(--vectis-text-subtitle-weight);--typography-leading:var(--vectis-text-subtitle-leading)}.v-typography[data-variant=body-xl]{--typography-size:var(--vectis-text-body-xl-size);--typography-weight:var(--vectis-text-body-xl-weight);--typography-leading:var(--vectis-text-body-xl-leading)}.v-typography[data-variant=body-lg]{--typography-size:var(--vectis-text-body-lg-size);--typography-weight:var(--vectis-text-body-lg-weight);--typography-leading:var(--vectis-text-body-lg-leading)}.v-typography[data-variant=body-md]{--typography-size:var(--vectis-text-body-md-size);--typography-weight:var(--vectis-text-body-md-weight);--typography-leading:var(--vectis-text-body-md-leading)}.v-typography[data-variant=body-sm]{--typography-size:var(--vectis-text-body-sm-size);--typography-weight:var(--vectis-text-body-sm-weight);--typography-leading:var(--vectis-text-body-sm-leading)}.v-typography[data-variant=label]{--typography-size:var(--vectis-text-label-size);--typography-weight:var(--vectis-text-label-weight);--typography-leading:var(--vectis-text-label-leading)}.v-typography[data-variant=caption]{--typography-size:var(--vectis-text-caption-size);--typography-weight:var(--vectis-text-caption-weight);--typography-leading:var(--vectis-text-caption-leading)}.v-typography[data-variant=overline]{--typography-size:var(--vectis-text-overline-size);--typography-weight:var(--vectis-text-overline-weight);--typography-leading:var(--vectis-text-overline-leading);--typography-tracking:var(--vectis-text-overline-tracking);text-transform:uppercase}.v-typography[data-variant=code]{--typography-family:var(--vectis-text-family-code);--typography-size:var(--vectis-text-code-size);--typography-weight:var(--vectis-text-code-weight);--typography-leading:var(--vectis-text-code-leading)}.v-typography[data-tone=muted]{--typography-color:var(--vectis-color-text-muted)}.v-typography[data-tone=subtle]{--typography-color:var(--vectis-color-text-subtle)}.v-typography[data-tone=accent]{--typography-color:var(--vectis-color-accent-text)}.v-typography[data-tone=danger]{--typography-color:var(--vectis-color-danger-text)}.v-typography[data-tone=success]{--typography-color:var(--vectis-color-success-text)}.v-typography[data-tone=warning]{--typography-color:var(--vectis-color-warning-text)}.v-typography[data-tone=on-inverse]{--typography-color:var(--vectis-color-text-on-inverse)}.v-typography[data-truncate]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}}

package/dist/components/VTypography/VTypography.d.ts

@@ -1,27 +1,29 @@
+/** The role a text plays, each with its complete typographic recipe. */
 export type TypographyVariant = 'display' | 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4' | 'subtitle' | 'body-xl' | 'body-lg' | 'body-md' | 'body-sm' | 'label' | 'caption' | 'overline' | 'code';
+/** The colour of a text; `default` sets none and inherits. */
 export type TypographyTone = 'default' | 'muted' | 'subtle' | 'accent' | 'danger' | 'success' | 'warning' | 'on-inverse';
 interface TypographyProps {
     /**
      * The role this text plays, which selects a complete recipe of typographic
-     * tokens — size, weight, line height and, where the role calls for it, letter
+     * tokens: size, weight, line height and, where the role calls for it, letter
      * spacing and a monospaced family.
      */
     variant?: TypographyVariant;
     /**
      * The HTML tag to render. Each variant already has a sensible default (h1 to h4,
-     * p, span, code), so this is for the cases where the meaning and the look differ —
+     * p, span, code), so this is for the cases where the meaning and the look differ:
      * a subtitle that is really an `h2`, or a label attached to a field.
      */
     as?: string;
     /**
      * The colour of the text. `default` sets none at all, so the text inherits from
-     * whatever surrounds it — which is what lets the same component be used on an
+     * whatever surrounds it, which is what lets the same component be used on an
      * inverted surface or inside a coloured toast.
      */
     tone?: TypographyTone;
     /**
      * Cuts the text to one line and ends it with an ellipsis. The element needs a
-     * width to be cut against — being a block, or a flex item — otherwise there is
+     * width to be cut against (being a block, or a flex item), otherwise there is
      * nothing to overflow and the text simply stays whole.
      */
     truncate?: boolean;