vectis-ui 0.1.0 → 0.8.0

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

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

package/dist/components/VTypography/VTypography.js.map

@@ -1 +1 @@
-{"version":3,"file":"VTypography.js","names":[],"sources":["../../../src/components/VTypography/VTypography.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core — the only JS is deriving the default tag from the variant.\n/**\n * The design system's text element. Rather than setting a size here and a weight\n * there, the writer names the ROLE the text plays — a heading, a caption, a label —\n * and `variant` applies the complete typographic recipe that goes with it: family,\n * size, weight, line height and letter spacing, all read from the semantic tokens.\n * `tone` does the same for colour.\n *\n * It renders a single element and adds no behaviour, so the attributes it is given\n * (id, for, aria-*…) land straight on that element. This is what lets it serve as a\n * real field label, with `as=\"label\"` and a `for`.\n */\nimport { computed } from 'vue'\n\nexport type TypographyVariant =\n  | 'display'\n  | 'heading-1'\n  | 'heading-2'\n  | 'heading-3'\n  | 'heading-4'\n  | 'subtitle'\n  | 'body-xl'\n  | 'body-lg'\n  | 'body-md'\n  | 'body-sm'\n  | 'label'\n  | 'caption'\n  | 'overline'\n  | 'code'\n\nexport type TypographyTone =\n  'default' | 'muted' | 'subtle' | 'accent' | 'danger' | 'success' | 'warning' | 'on-inverse'\n\ninterface TypographyProps {\n  /**\n   * The role this text plays, which selects a complete recipe of typographic\n   * tokens — size, weight, line height and, where the role calls for it, letter\n   * spacing and a monospaced family.\n   */\n  variant?: TypographyVariant\n  /**\n   * The HTML tag to render. Each variant already has a sensible default (h1 to h4,\n   * p, span, code), so this is for the cases where the meaning and the look differ —\n   * a subtitle that is really an `h2`, or a label attached to a field.\n   */\n  as?: string\n  /**\n   * The colour of the text. `default` sets none at all, so the text inherits from\n   * whatever surrounds it — which is what lets the same component be used on an\n   * inverted surface or inside a coloured toast.\n   */\n  tone?: TypographyTone\n  /**\n   * Cuts the text to one line and ends it with an ellipsis. The element needs a\n   * width to be cut against — being a block, or a flex item — otherwise there is\n   * nothing to overflow and the text simply stays whole.\n   */\n  truncate?: boolean\n}\n\nconst props = withDefaults(defineProps<TypographyProps>(), {\n  variant: 'body-md',\n  as: undefined,\n  tone: 'default',\n  truncate: false,\n})\n\ndefineSlots<{\n  /** Text content. */\n  default(): unknown\n}>()\n\n/**\n * The tag each variant renders when `as` says nothing — the one whose meaning\n * matches the role.\n */\nconst DEFAULT_TAGS: Record<TypographyVariant, string> = {\n  display: 'p',\n  'heading-1': 'h1',\n  'heading-2': 'h2',\n  'heading-3': 'h3',\n  'heading-4': 'h4',\n  subtitle: 'p',\n  'body-xl': 'p',\n  'body-lg': 'p',\n  'body-md': 'p',\n  'body-sm': 'p',\n  label: 'span',\n  caption: 'p',\n  overline: 'span',\n  code: 'code',\n}\n\nconst tag = computed(() => props.as ?? DEFAULT_TAGS[props.variant])\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    class=\"v-typography\"\n    :data-variant=\"variant\"\n    :data-tone=\"tone === 'default' ? undefined : tone\"\n    :data-truncate=\"truncate ? '' : undefined\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-typography {\n    /* These two defaults are re-declared on every instance because custom properties\n       INHERIT: nested inside a variant that sets letter spacing, or inside a `code`,\n       a VTypography would otherwise pick up its ancestor's tracking and monospaced\n       family. The [data-variant] blocks below, being more specific, still win. */\n    --typography-family: var(--vectis-text-family);\n    --typography-tracking: normal;\n\n    margin: 0; /* the space around a text block belongs to the layout holding it */\n    font-family: var(--typography-family);\n    font-size: var(--typography-size);\n    font-weight: var(--typography-weight);\n    line-height: var(--typography-leading);\n    letter-spacing: var(--typography-tracking);\n    /* With the `default` tone no colour variable is set, and the fallback makes the\n       text inherit — which is what allows the component to be dropped inside an\n       already coloured context, an inverted surface or a tinted toast. */\n    color: var(--typography-color, inherit);\n    overflow-wrap: break-word;\n  }\n\n  .v-typography[data-variant='display'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-display-size);\n    --typography-weight: var(--vectis-text-display-weight);\n    --typography-leading: var(--vectis-text-display-leading);\n    --typography-tracking: var(--vectis-text-display-tracking);\n  }\n\n  .v-typography[data-variant='heading-1'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-1-size);\n    --typography-weight: var(--vectis-text-heading-1-weight);\n    --typography-leading: var(--vectis-text-heading-1-leading);\n    --typography-tracking: var(--vectis-text-heading-1-tracking);\n  }\n\n  .v-typography[data-variant='heading-2'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-2-size);\n    --typography-weight: var(--vectis-text-heading-2-weight);\n    --typography-leading: var(--vectis-text-heading-2-leading);\n    --typography-tracking: var(--vectis-text-heading-2-tracking);\n  }\n\n  .v-typography[data-variant='heading-3'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-3-size);\n    --typography-weight: var(--vectis-text-heading-3-weight);\n    --typography-leading: var(--vectis-text-heading-3-leading);\n  }\n\n  .v-typography[data-variant='heading-4'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-4-size);\n    --typography-weight: var(--vectis-text-heading-4-weight);\n    --typography-leading: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-typography[data-variant='subtitle'] {\n    --typography-size: var(--vectis-text-subtitle-size);\n    --typography-weight: var(--vectis-text-subtitle-weight);\n    --typography-leading: var(--vectis-text-subtitle-leading);\n  }\n\n  .v-typography[data-variant='body-xl'] {\n    --typography-size: var(--vectis-text-body-xl-size);\n    --typography-weight: var(--vectis-text-body-xl-weight);\n    --typography-leading: var(--vectis-text-body-xl-leading);\n  }\n\n  .v-typography[data-variant='body-lg'] {\n    --typography-size: var(--vectis-text-body-lg-size);\n    --typography-weight: var(--vectis-text-body-lg-weight);\n    --typography-leading: var(--vectis-text-body-lg-leading);\n  }\n\n  .v-typography[data-variant='body-md'] {\n    --typography-size: var(--vectis-text-body-md-size);\n    --typography-weight: var(--vectis-text-body-md-weight);\n    --typography-leading: var(--vectis-text-body-md-leading);\n  }\n\n  .v-typography[data-variant='body-sm'] {\n    --typography-size: var(--vectis-text-body-sm-size);\n    --typography-weight: var(--vectis-text-body-sm-weight);\n    --typography-leading: var(--vectis-text-body-sm-leading);\n  }\n\n  .v-typography[data-variant='label'] {\n    --typography-size: var(--vectis-text-label-size);\n    --typography-weight: var(--vectis-text-label-weight);\n    --typography-leading: var(--vectis-text-label-leading);\n  }\n\n  .v-typography[data-variant='caption'] {\n    --typography-size: var(--vectis-text-caption-size);\n    --typography-weight: var(--vectis-text-caption-weight);\n    --typography-leading: var(--vectis-text-caption-leading);\n  }\n\n  .v-typography[data-variant='overline'] {\n    --typography-size: var(--vectis-text-overline-size);\n    --typography-weight: var(--vectis-text-overline-weight);\n    --typography-leading: var(--vectis-text-overline-leading);\n    --typography-tracking: var(--vectis-text-overline-tracking);\n\n    text-transform: uppercase;\n  }\n\n  .v-typography[data-variant='code'] {\n    --typography-family: var(--vectis-text-family-code);\n    --typography-size: var(--vectis-text-code-size);\n    --typography-weight: var(--vectis-text-code-weight);\n    --typography-leading: var(--vectis-text-code-leading);\n  }\n\n  /* There is deliberately no block for the `default` tone: leaving the colour\n     variable unset is precisely what makes the text inherit. */\n  .v-typography[data-tone='muted'] {\n    --typography-color: var(--vectis-color-text-muted);\n  }\n\n  .v-typography[data-tone='subtle'] {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  .v-typography[data-tone='accent'] {\n    --typography-color: var(--vectis-color-accent-text);\n  }\n\n  .v-typography[data-tone='danger'] {\n    --typography-color: var(--vectis-color-danger-text);\n  }\n\n  .v-typography[data-tone='success'] {\n    --typography-color: var(--vectis-color-success-text);\n  }\n\n  .v-typography[data-tone='warning'] {\n    --typography-color: var(--vectis-color-warning-text);\n  }\n\n  .v-typography[data-tone='on-inverse'] {\n    --typography-color: var(--vectis-color-text-on-inverse);\n  }\n\n  .v-typography[data-truncate] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VTypography.js","names":[],"sources":["../../../src/components/VTypography/VTypography.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core — the only JS is deriving the default tag from the variant.\n/**\n * The design system's text element. Rather than setting a size here and a weight\n * there, the writer names the ROLE the text plays — a heading, a caption, a label —\n * and `variant` applies the complete typographic recipe that goes with it: family,\n * size, weight, line height and letter spacing, all read from the semantic tokens.\n * `tone` does the same for colour.\n *\n * It renders a single element and adds no behaviour, so the attributes it is given\n * (id, for, aria-*…) land straight on that element. This is what lets it serve as a\n * real field label, with `as=\"label\"` and a `for`.\n */\nimport { computed } from 'vue'\n\nexport type TypographyVariant =\n  | 'display'\n  | 'heading-1'\n  | 'heading-2'\n  | 'heading-3'\n  | 'heading-4'\n  | 'subtitle'\n  | 'body-xl'\n  | 'body-lg'\n  | 'body-md'\n  | 'body-sm'\n  | 'label'\n  | 'caption'\n  | 'overline'\n  | 'code'\n\nexport type TypographyTone =\n  'default' | 'muted' | 'subtle' | 'accent' | 'danger' | 'success' | 'warning' | 'on-inverse'\n\ninterface TypographyProps {\n  /**\n   * The role this text plays, which selects a complete recipe of typographic\n   * tokens — size, weight, line height and, where the role calls for it, letter\n   * spacing and a monospaced family.\n   */\n  variant?: TypographyVariant\n  /**\n   * The HTML tag to render. Each variant already has a sensible default (h1 to h4,\n   * p, span, code), so this is for the cases where the meaning and the look differ —\n   * a subtitle that is really an `h2`, or a label attached to a field.\n   */\n  as?: string\n  /**\n   * The colour of the text. `default` sets none at all, so the text inherits from\n   * whatever surrounds it — which is what lets the same component be used on an\n   * inverted surface or inside a coloured toast.\n   */\n  tone?: TypographyTone\n  /**\n   * Cuts the text to one line and ends it with an ellipsis. The element needs a\n   * width to be cut against — being a block, or a flex item — otherwise there is\n   * nothing to overflow and the text simply stays whole.\n   */\n  truncate?: boolean\n}\n\nconst props = withDefaults(defineProps<TypographyProps>(), {\n  variant: 'body-md',\n  as: undefined,\n  tone: 'default',\n  truncate: false,\n})\n\ndefineSlots<{\n  /** Text content. */\n  default(): unknown\n}>()\n\n/**\n * The tag each variant renders when `as` says nothing — the one whose meaning\n * matches the role.\n */\nconst DEFAULT_TAGS: Record<TypographyVariant, string> = {\n  display: 'p',\n  'heading-1': 'h1',\n  'heading-2': 'h2',\n  'heading-3': 'h3',\n  'heading-4': 'h4',\n  subtitle: 'p',\n  'body-xl': 'p',\n  'body-lg': 'p',\n  'body-md': 'p',\n  'body-sm': 'p',\n  label: 'span',\n  caption: 'p',\n  overline: 'span',\n  code: 'code',\n}\n\nconst tag = computed(() => props.as ?? DEFAULT_TAGS[props.variant])\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    class=\"v-typography\"\n    :data-variant=\"variant\"\n    :data-tone=\"tone === 'default' ? undefined : tone\"\n    :data-truncate=\"truncate ? '' : undefined\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-typography {\n    /* These two defaults are re-declared on every instance because custom properties\n       INHERIT: nested inside a variant that sets letter spacing, or inside a `code`,\n       a VTypography would otherwise pick up its ancestor's tracking and monospaced\n       family. The [data-variant] blocks below, being more specific, still win.\n\n       Size, weight and leading need no such reset, and that is an INVARIANT rather than\n       an oversight: every variant block sets all three, so none can be inherited. A new\n       variant that leaves one out takes it from whichever VTypography encloses it — the\n       same bug these two lines exist to prevent, one step further out. */\n    --typography-family: var(--vectis-text-family);\n    --typography-tracking: normal;\n\n    margin: 0; /* the space around a text block belongs to the layout holding it */\n    font-family: var(--typography-family);\n    font-size: var(--typography-size);\n    font-weight: var(--typography-weight);\n    line-height: var(--typography-leading);\n    letter-spacing: var(--typography-tracking);\n    /* With the `default` tone no colour variable is set, and the fallback makes the\n       text inherit — which is what allows the component to be dropped inside an\n       already coloured context, an inverted surface or a tinted toast. */\n    color: var(--typography-color, inherit);\n    overflow-wrap: break-word;\n  }\n\n  .v-typography[data-variant='display'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-display-size);\n    --typography-weight: var(--vectis-text-display-weight);\n    --typography-leading: var(--vectis-text-display-leading);\n    --typography-tracking: var(--vectis-text-display-tracking);\n  }\n\n  .v-typography[data-variant='heading-1'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-1-size);\n    --typography-weight: var(--vectis-text-heading-1-weight);\n    --typography-leading: var(--vectis-text-heading-1-leading);\n    --typography-tracking: var(--vectis-text-heading-1-tracking);\n  }\n\n  .v-typography[data-variant='heading-2'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-2-size);\n    --typography-weight: var(--vectis-text-heading-2-weight);\n    --typography-leading: var(--vectis-text-heading-2-leading);\n    --typography-tracking: var(--vectis-text-heading-2-tracking);\n  }\n\n  .v-typography[data-variant='heading-3'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-3-size);\n    --typography-weight: var(--vectis-text-heading-3-weight);\n    --typography-leading: var(--vectis-text-heading-3-leading);\n  }\n\n  .v-typography[data-variant='heading-4'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-4-size);\n    --typography-weight: var(--vectis-text-heading-4-weight);\n    --typography-leading: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-typography[data-variant='subtitle'] {\n    --typography-size: var(--vectis-text-subtitle-size);\n    --typography-weight: var(--vectis-text-subtitle-weight);\n    --typography-leading: var(--vectis-text-subtitle-leading);\n  }\n\n  .v-typography[data-variant='body-xl'] {\n    --typography-size: var(--vectis-text-body-xl-size);\n    --typography-weight: var(--vectis-text-body-xl-weight);\n    --typography-leading: var(--vectis-text-body-xl-leading);\n  }\n\n  .v-typography[data-variant='body-lg'] {\n    --typography-size: var(--vectis-text-body-lg-size);\n    --typography-weight: var(--vectis-text-body-lg-weight);\n    --typography-leading: var(--vectis-text-body-lg-leading);\n  }\n\n  .v-typography[data-variant='body-md'] {\n    --typography-size: var(--vectis-text-body-md-size);\n    --typography-weight: var(--vectis-text-body-md-weight);\n    --typography-leading: var(--vectis-text-body-md-leading);\n  }\n\n  .v-typography[data-variant='body-sm'] {\n    --typography-size: var(--vectis-text-body-sm-size);\n    --typography-weight: var(--vectis-text-body-sm-weight);\n    --typography-leading: var(--vectis-text-body-sm-leading);\n  }\n\n  .v-typography[data-variant='label'] {\n    --typography-size: var(--vectis-text-label-size);\n    --typography-weight: var(--vectis-text-label-weight);\n    --typography-leading: var(--vectis-text-label-leading);\n  }\n\n  .v-typography[data-variant='caption'] {\n    --typography-size: var(--vectis-text-caption-size);\n    --typography-weight: var(--vectis-text-caption-weight);\n    --typography-leading: var(--vectis-text-caption-leading);\n  }\n\n  .v-typography[data-variant='overline'] {\n    --typography-size: var(--vectis-text-overline-size);\n    --typography-weight: var(--vectis-text-overline-weight);\n    --typography-leading: var(--vectis-text-overline-leading);\n    --typography-tracking: var(--vectis-text-overline-tracking);\n\n    text-transform: uppercase;\n  }\n\n  .v-typography[data-variant='code'] {\n    --typography-family: var(--vectis-text-family-code);\n    --typography-size: var(--vectis-text-code-size);\n    --typography-weight: var(--vectis-text-code-weight);\n    --typography-leading: var(--vectis-text-code-leading);\n  }\n\n  /* There is deliberately no block for the `default` tone: leaving the colour\n     variable unset is precisely what makes the text inherit. */\n  .v-typography[data-tone='muted'] {\n    --typography-color: var(--vectis-color-text-muted);\n  }\n\n  .v-typography[data-tone='subtle'] {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  .v-typography[data-tone='accent'] {\n    --typography-color: var(--vectis-color-accent-text);\n  }\n\n  .v-typography[data-tone='danger'] {\n    --typography-color: var(--vectis-color-danger-text);\n  }\n\n  .v-typography[data-tone='success'] {\n    --typography-color: var(--vectis-color-success-text);\n  }\n\n  .v-typography[data-tone='warning'] {\n    --typography-color: var(--vectis-color-warning-text);\n  }\n\n  .v-typography[data-tone='on-inverse'] {\n    --typography-color: var(--vectis-color-text-on-inverse);\n  }\n\n  .v-typography[data-truncate] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VTypography.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VTypography/VTypography.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core — the only JS is deriving the default tag from the variant.\n/**\n * The design system's text element. Rather than setting a size here and a weight\n * there, the writer names the ROLE the text plays — a heading, a caption, a label —\n * and `variant` applies the complete typographic recipe that goes with it: family,\n * size, weight, line height and letter spacing, all read from the semantic tokens.\n * `tone` does the same for colour.\n *\n * It renders a single element and adds no behaviour, so the attributes it is given\n * (id, for, aria-*…) land straight on that element. This is what lets it serve as a\n * real field label, with `as=\"label\"` and a `for`.\n */\nimport { computed } from 'vue'\n\nexport type TypographyVariant =\n  | 'display'\n  | 'heading-1'\n  | 'heading-2'\n  | 'heading-3'\n  | 'heading-4'\n  | 'subtitle'\n  | 'body-xl'\n  | 'body-lg'\n  | 'body-md'\n  | 'body-sm'\n  | 'label'\n  | 'caption'\n  | 'overline'\n  | 'code'\n\nexport type TypographyTone =\n  'default' | 'muted' | 'subtle' | 'accent' | 'danger' | 'success' | 'warning' | 'on-inverse'\n\ninterface TypographyProps {\n  /**\n   * The role this text plays, which selects a complete recipe of typographic\n   * tokens — size, weight, line height and, where the role calls for it, letter\n   * spacing and a monospaced family.\n   */\n  variant?: TypographyVariant\n  /**\n   * The HTML tag to render. Each variant already has a sensible default (h1 to h4,\n   * p, span, code), so this is for the cases where the meaning and the look differ —\n   * a subtitle that is really an `h2`, or a label attached to a field.\n   */\n  as?: string\n  /**\n   * The colour of the text. `default` sets none at all, so the text inherits from\n   * whatever surrounds it — which is what lets the same component be used on an\n   * inverted surface or inside a coloured toast.\n   */\n  tone?: TypographyTone\n  /**\n   * Cuts the text to one line and ends it with an ellipsis. The element needs a\n   * width to be cut against — being a block, or a flex item — otherwise there is\n   * nothing to overflow and the text simply stays whole.\n   */\n  truncate?: boolean\n}\n\nconst props = withDefaults(defineProps<TypographyProps>(), {\n  variant: 'body-md',\n  as: undefined,\n  tone: 'default',\n  truncate: false,\n})\n\ndefineSlots<{\n  /** Text content. */\n  default(): unknown\n}>()\n\n/**\n * The tag each variant renders when `as` says nothing — the one whose meaning\n * matches the role.\n */\nconst DEFAULT_TAGS: Record<TypographyVariant, string> = {\n  display: 'p',\n  'heading-1': 'h1',\n  'heading-2': 'h2',\n  'heading-3': 'h3',\n  'heading-4': 'h4',\n  subtitle: 'p',\n  'body-xl': 'p',\n  'body-lg': 'p',\n  'body-md': 'p',\n  'body-sm': 'p',\n  label: 'span',\n  caption: 'p',\n  overline: 'span',\n  code: 'code',\n}\n\nconst tag = computed(() => props.as ?? DEFAULT_TAGS[props.variant])\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    class=\"v-typography\"\n    :data-variant=\"variant\"\n    :data-tone=\"tone === 'default' ? undefined : tone\"\n    :data-truncate=\"truncate ? '' : undefined\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-typography {\n    /* These two defaults are re-declared on every instance because custom properties\n       INHERIT: nested inside a variant that sets letter spacing, or inside a `code`,\n       a VTypography would otherwise pick up its ancestor's tracking and monospaced\n       family. The [data-variant] blocks below, being more specific, still win. */\n    --typography-family: var(--vectis-text-family);\n    --typography-tracking: normal;\n\n    margin: 0; /* the space around a text block belongs to the layout holding it */\n    font-family: var(--typography-family);\n    font-size: var(--typography-size);\n    font-weight: var(--typography-weight);\n    line-height: var(--typography-leading);\n    letter-spacing: var(--typography-tracking);\n    /* With the `default` tone no colour variable is set, and the fallback makes the\n       text inherit — which is what allows the component to be dropped inside an\n       already coloured context, an inverted surface or a tinted toast. */\n    color: var(--typography-color, inherit);\n    overflow-wrap: break-word;\n  }\n\n  .v-typography[data-variant='display'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-display-size);\n    --typography-weight: var(--vectis-text-display-weight);\n    --typography-leading: var(--vectis-text-display-leading);\n    --typography-tracking: var(--vectis-text-display-tracking);\n  }\n\n  .v-typography[data-variant='heading-1'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-1-size);\n    --typography-weight: var(--vectis-text-heading-1-weight);\n    --typography-leading: var(--vectis-text-heading-1-leading);\n    --typography-tracking: var(--vectis-text-heading-1-tracking);\n  }\n\n  .v-typography[data-variant='heading-2'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-2-size);\n    --typography-weight: var(--vectis-text-heading-2-weight);\n    --typography-leading: var(--vectis-text-heading-2-leading);\n    --typography-tracking: var(--vectis-text-heading-2-tracking);\n  }\n\n  .v-typography[data-variant='heading-3'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-3-size);\n    --typography-weight: var(--vectis-text-heading-3-weight);\n    --typography-leading: var(--vectis-text-heading-3-leading);\n  }\n\n  .v-typography[data-variant='heading-4'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-4-size);\n    --typography-weight: var(--vectis-text-heading-4-weight);\n    --typography-leading: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-typography[data-variant='subtitle'] {\n    --typography-size: var(--vectis-text-subtitle-size);\n    --typography-weight: var(--vectis-text-subtitle-weight);\n    --typography-leading: var(--vectis-text-subtitle-leading);\n  }\n\n  .v-typography[data-variant='body-xl'] {\n    --typography-size: var(--vectis-text-body-xl-size);\n    --typography-weight: var(--vectis-text-body-xl-weight);\n    --typography-leading: var(--vectis-text-body-xl-leading);\n  }\n\n  .v-typography[data-variant='body-lg'] {\n    --typography-size: var(--vectis-text-body-lg-size);\n    --typography-weight: var(--vectis-text-body-lg-weight);\n    --typography-leading: var(--vectis-text-body-lg-leading);\n  }\n\n  .v-typography[data-variant='body-md'] {\n    --typography-size: var(--vectis-text-body-md-size);\n    --typography-weight: var(--vectis-text-body-md-weight);\n    --typography-leading: var(--vectis-text-body-md-leading);\n  }\n\n  .v-typography[data-variant='body-sm'] {\n    --typography-size: var(--vectis-text-body-sm-size);\n    --typography-weight: var(--vectis-text-body-sm-weight);\n    --typography-leading: var(--vectis-text-body-sm-leading);\n  }\n\n  .v-typography[data-variant='label'] {\n    --typography-size: var(--vectis-text-label-size);\n    --typography-weight: var(--vectis-text-label-weight);\n    --typography-leading: var(--vectis-text-label-leading);\n  }\n\n  .v-typography[data-variant='caption'] {\n    --typography-size: var(--vectis-text-caption-size);\n    --typography-weight: var(--vectis-text-caption-weight);\n    --typography-leading: var(--vectis-text-caption-leading);\n  }\n\n  .v-typography[data-variant='overline'] {\n    --typography-size: var(--vectis-text-overline-size);\n    --typography-weight: var(--vectis-text-overline-weight);\n    --typography-leading: var(--vectis-text-overline-leading);\n    --typography-tracking: var(--vectis-text-overline-tracking);\n\n    text-transform: uppercase;\n  }\n\n  .v-typography[data-variant='code'] {\n    --typography-family: var(--vectis-text-family-code);\n    --typography-size: var(--vectis-text-code-size);\n    --typography-weight: var(--vectis-text-code-weight);\n    --typography-leading: var(--vectis-text-code-leading);\n  }\n\n  /* There is deliberately no block for the `default` tone: leaving the colour\n     variable unset is precisely what makes the text inherit. */\n  .v-typography[data-tone='muted'] {\n    --typography-color: var(--vectis-color-text-muted);\n  }\n\n  .v-typography[data-tone='subtle'] {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  .v-typography[data-tone='accent'] {\n    --typography-color: var(--vectis-color-accent-text);\n  }\n\n  .v-typography[data-tone='danger'] {\n    --typography-color: var(--vectis-color-danger-text);\n  }\n\n  .v-typography[data-tone='success'] {\n    --typography-color: var(--vectis-color-success-text);\n  }\n\n  .v-typography[data-tone='warning'] {\n    --typography-color: var(--vectis-color-warning-text);\n  }\n\n  .v-typography[data-tone='on-inverse'] {\n    --typography-color: var(--vectis-color-text-on-inverse);\n  }\n\n  .v-typography[data-truncate] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;EA6DA,IAAM,IAAQ,GAgBR,IAAkD;GACtD,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,aAAa;GACb,UAAU;GACV,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,OAAO;GACP,SAAS;GACT,UAAU;GACV,MAAM;EACR,GAEM,IAAM,QAAe,EAAM,MAAM,EAAa,EAAM,QAAQ;yBAIhE,EAQY,EAPL,EAAA,KAAG,GAAA;GACR,OAAM;GACL,gBAAc,EAAA;GACd,aAAW,EAAA,SAAI,YAAiB,KAAA,IAAY,EAAA;GAC5C,iBAAe,EAAA,WAAQ,KAAQ,KAAA;;oBAExB,CAAR,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"VTypography.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VTypography/VTypography.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core — the only JS is deriving the default tag from the variant.\n/**\n * The design system's text element. Rather than setting a size here and a weight\n * there, the writer names the ROLE the text plays — a heading, a caption, a label —\n * and `variant` applies the complete typographic recipe that goes with it: family,\n * size, weight, line height and letter spacing, all read from the semantic tokens.\n * `tone` does the same for colour.\n *\n * It renders a single element and adds no behaviour, so the attributes it is given\n * (id, for, aria-*…) land straight on that element. This is what lets it serve as a\n * real field label, with `as=\"label\"` and a `for`.\n */\nimport { computed } from 'vue'\n\nexport type TypographyVariant =\n  | 'display'\n  | 'heading-1'\n  | 'heading-2'\n  | 'heading-3'\n  | 'heading-4'\n  | 'subtitle'\n  | 'body-xl'\n  | 'body-lg'\n  | 'body-md'\n  | 'body-sm'\n  | 'label'\n  | 'caption'\n  | 'overline'\n  | 'code'\n\nexport type TypographyTone =\n  'default' | 'muted' | 'subtle' | 'accent' | 'danger' | 'success' | 'warning' | 'on-inverse'\n\ninterface TypographyProps {\n  /**\n   * The role this text plays, which selects a complete recipe of typographic\n   * tokens — size, weight, line height and, where the role calls for it, letter\n   * spacing and a monospaced family.\n   */\n  variant?: TypographyVariant\n  /**\n   * The HTML tag to render. Each variant already has a sensible default (h1 to h4,\n   * p, span, code), so this is for the cases where the meaning and the look differ —\n   * a subtitle that is really an `h2`, or a label attached to a field.\n   */\n  as?: string\n  /**\n   * The colour of the text. `default` sets none at all, so the text inherits from\n   * whatever surrounds it — which is what lets the same component be used on an\n   * inverted surface or inside a coloured toast.\n   */\n  tone?: TypographyTone\n  /**\n   * Cuts the text to one line and ends it with an ellipsis. The element needs a\n   * width to be cut against — being a block, or a flex item — otherwise there is\n   * nothing to overflow and the text simply stays whole.\n   */\n  truncate?: boolean\n}\n\nconst props = withDefaults(defineProps<TypographyProps>(), {\n  variant: 'body-md',\n  as: undefined,\n  tone: 'default',\n  truncate: false,\n})\n\ndefineSlots<{\n  /** Text content. */\n  default(): unknown\n}>()\n\n/**\n * The tag each variant renders when `as` says nothing — the one whose meaning\n * matches the role.\n */\nconst DEFAULT_TAGS: Record<TypographyVariant, string> = {\n  display: 'p',\n  'heading-1': 'h1',\n  'heading-2': 'h2',\n  'heading-3': 'h3',\n  'heading-4': 'h4',\n  subtitle: 'p',\n  'body-xl': 'p',\n  'body-lg': 'p',\n  'body-md': 'p',\n  'body-sm': 'p',\n  label: 'span',\n  caption: 'p',\n  overline: 'span',\n  code: 'code',\n}\n\nconst tag = computed(() => props.as ?? DEFAULT_TAGS[props.variant])\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    class=\"v-typography\"\n    :data-variant=\"variant\"\n    :data-tone=\"tone === 'default' ? undefined : tone\"\n    :data-truncate=\"truncate ? '' : undefined\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-typography {\n    /* These two defaults are re-declared on every instance because custom properties\n       INHERIT: nested inside a variant that sets letter spacing, or inside a `code`,\n       a VTypography would otherwise pick up its ancestor's tracking and monospaced\n       family. The [data-variant] blocks below, being more specific, still win.\n\n       Size, weight and leading need no such reset, and that is an INVARIANT rather than\n       an oversight: every variant block sets all three, so none can be inherited. A new\n       variant that leaves one out takes it from whichever VTypography encloses it — the\n       same bug these two lines exist to prevent, one step further out. */\n    --typography-family: var(--vectis-text-family);\n    --typography-tracking: normal;\n\n    margin: 0; /* the space around a text block belongs to the layout holding it */\n    font-family: var(--typography-family);\n    font-size: var(--typography-size);\n    font-weight: var(--typography-weight);\n    line-height: var(--typography-leading);\n    letter-spacing: var(--typography-tracking);\n    /* With the `default` tone no colour variable is set, and the fallback makes the\n       text inherit — which is what allows the component to be dropped inside an\n       already coloured context, an inverted surface or a tinted toast. */\n    color: var(--typography-color, inherit);\n    overflow-wrap: break-word;\n  }\n\n  .v-typography[data-variant='display'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-display-size);\n    --typography-weight: var(--vectis-text-display-weight);\n    --typography-leading: var(--vectis-text-display-leading);\n    --typography-tracking: var(--vectis-text-display-tracking);\n  }\n\n  .v-typography[data-variant='heading-1'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-1-size);\n    --typography-weight: var(--vectis-text-heading-1-weight);\n    --typography-leading: var(--vectis-text-heading-1-leading);\n    --typography-tracking: var(--vectis-text-heading-1-tracking);\n  }\n\n  .v-typography[data-variant='heading-2'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-2-size);\n    --typography-weight: var(--vectis-text-heading-2-weight);\n    --typography-leading: var(--vectis-text-heading-2-leading);\n    --typography-tracking: var(--vectis-text-heading-2-tracking);\n  }\n\n  .v-typography[data-variant='heading-3'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-3-size);\n    --typography-weight: var(--vectis-text-heading-3-weight);\n    --typography-leading: var(--vectis-text-heading-3-leading);\n  }\n\n  .v-typography[data-variant='heading-4'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-4-size);\n    --typography-weight: var(--vectis-text-heading-4-weight);\n    --typography-leading: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-typography[data-variant='subtitle'] {\n    --typography-size: var(--vectis-text-subtitle-size);\n    --typography-weight: var(--vectis-text-subtitle-weight);\n    --typography-leading: var(--vectis-text-subtitle-leading);\n  }\n\n  .v-typography[data-variant='body-xl'] {\n    --typography-size: var(--vectis-text-body-xl-size);\n    --typography-weight: var(--vectis-text-body-xl-weight);\n    --typography-leading: var(--vectis-text-body-xl-leading);\n  }\n\n  .v-typography[data-variant='body-lg'] {\n    --typography-size: var(--vectis-text-body-lg-size);\n    --typography-weight: var(--vectis-text-body-lg-weight);\n    --typography-leading: var(--vectis-text-body-lg-leading);\n  }\n\n  .v-typography[data-variant='body-md'] {\n    --typography-size: var(--vectis-text-body-md-size);\n    --typography-weight: var(--vectis-text-body-md-weight);\n    --typography-leading: var(--vectis-text-body-md-leading);\n  }\n\n  .v-typography[data-variant='body-sm'] {\n    --typography-size: var(--vectis-text-body-sm-size);\n    --typography-weight: var(--vectis-text-body-sm-weight);\n    --typography-leading: var(--vectis-text-body-sm-leading);\n  }\n\n  .v-typography[data-variant='label'] {\n    --typography-size: var(--vectis-text-label-size);\n    --typography-weight: var(--vectis-text-label-weight);\n    --typography-leading: var(--vectis-text-label-leading);\n  }\n\n  .v-typography[data-variant='caption'] {\n    --typography-size: var(--vectis-text-caption-size);\n    --typography-weight: var(--vectis-text-caption-weight);\n    --typography-leading: var(--vectis-text-caption-leading);\n  }\n\n  .v-typography[data-variant='overline'] {\n    --typography-size: var(--vectis-text-overline-size);\n    --typography-weight: var(--vectis-text-overline-weight);\n    --typography-leading: var(--vectis-text-overline-leading);\n    --typography-tracking: var(--vectis-text-overline-tracking);\n\n    text-transform: uppercase;\n  }\n\n  .v-typography[data-variant='code'] {\n    --typography-family: var(--vectis-text-family-code);\n    --typography-size: var(--vectis-text-code-size);\n    --typography-weight: var(--vectis-text-code-weight);\n    --typography-leading: var(--vectis-text-code-leading);\n  }\n\n  /* There is deliberately no block for the `default` tone: leaving the colour\n     variable unset is precisely what makes the text inherit. */\n  .v-typography[data-tone='muted'] {\n    --typography-color: var(--vectis-color-text-muted);\n  }\n\n  .v-typography[data-tone='subtle'] {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  .v-typography[data-tone='accent'] {\n    --typography-color: var(--vectis-color-accent-text);\n  }\n\n  .v-typography[data-tone='danger'] {\n    --typography-color: var(--vectis-color-danger-text);\n  }\n\n  .v-typography[data-tone='success'] {\n    --typography-color: var(--vectis-color-success-text);\n  }\n\n  .v-typography[data-tone='warning'] {\n    --typography-color: var(--vectis-color-warning-text);\n  }\n\n  .v-typography[data-tone='on-inverse'] {\n    --typography-color: var(--vectis-color-text-on-inverse);\n  }\n\n  .v-typography[data-truncate] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;EA6DA,IAAM,IAAQ,GAgBR,IAAkD;GACtD,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,aAAa;GACb,UAAU;GACV,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,OAAO;GACP,SAAS;GACT,UAAU;GACV,MAAM;EACR,GAEM,IAAM,QAAe,EAAM,MAAM,EAAa,EAAM,QAAQ;yBAIhE,EAQY,EAPL,EAAA,KAAG,GAAA;GACR,OAAM;GACL,gBAAc,EAAA;GACd,aAAW,EAAA,SAAI,YAAiB,KAAA,IAAY,EAAA;GAC5C,iBAAe,EAAA,WAAQ,KAAQ,KAAA;;oBAExB,CAAR,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/composables/useAriaLabel.d.ts

@@ -1,19 +1,2 @@
 import { ComputedRef } from 'vue';
-/**
- * Works out the name a screen reader announces for a container that has one: a row of
- * tabs, a group of buttons, a navigation area.
- *
- * A name can be given in three ways, and they are ranked. Pointing at another element
- * that already carries the text wins; an explicit name written on the component comes
- * next; the component's own `label` option is only the fallback. So that option is a
- * DEFAULT and nothing more — an explicit name replaces it, and pointing at another
- * element removes it altogether, since otherwise the element would carry two names at
- * once.
- *
- * This arbitration has to be done by hand as soon as a component both spreads the
- * attributes it was given and writes its own name in the same place: nothing would
- * choose between the two, and both would apply. Elsewhere Vue's normal attribute
- * fallthrough already lets the consumer's win, and all this does is drop a default that
- * has become redundant.
- */
 export declare function useAriaLabel(label: () => string | undefined): ComputedRef<string | undefined>;

package/dist/composables/useAriaLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAriaLabel.js","names":[],"sources":["../../src/composables/useAriaLabel.ts"],"sourcesContent":["import { computed, useAttrs, type ComputedRef } from 'vue'\n\n// @a11y\n/**\n * Works out the name a screen reader announces for a container that has one: a row of\n * tabs, a group of buttons, a navigation area.\n *\n * A name can be given in three ways, and they are ranked. Pointing at another element\n * that already carries the text wins; an explicit name written on the component comes\n * next; the component's own `label` option is only the fallback. So that option is a\n * DEFAULT and nothing more — an explicit name replaces it, and pointing at another\n * element removes it altogether, since otherwise the element would carry two names at\n * once.\n *\n * This arbitration has to be done by hand as soon as a component both spreads the\n * attributes it was given and writes its own name in the same place: nothing would\n * choose between the two, and both would apply. Elsewhere Vue's normal attribute\n * fallthrough already lets the consumer's win, and all this does is drop a default that\n * has become redundant.\n */\nexport function useAriaLabel(label: () => string | undefined): ComputedRef<string | undefined> {\n  const attrs = useAttrs()\n  return computed(() =>\n    attrs['aria-labelledby'] !== undefined\n      ? undefined\n      : ((attrs['aria-label'] as string | undefined) ?? label()),\n  )\n}\n"],"mappings":";;AAoBA,SAAgB,EAAa,GAAkE;CAC7F,IAAM,IAAQ,EAAS;CACvB,OAAO,QACL,EAAM,uBAAuB,KAAA,IAEvB,EAAM,iBAAwC,EAAM,IADtD,KAAA,CAEN;AACF"}
+{"version":3,"file":"useAriaLabel.js","names":[],"sources":["../../src/composables/useAriaLabel.ts"],"sourcesContent":["// @a11y\n/**\n * The accessible name of a labelled container — a tablist, a group, a nav — resolved\n * `aria-labelledby` > consumer `aria-label` > the `label` prop.\n *\n * `label` is therefore only a default: `aria-label` replaces it, and `aria-labelledby`\n * removes it outright, or the element would carry two names at once.\n *\n * The arbitration is only NEEDED where a component both spreads `$attrs` and binds its own\n * `:aria-label` on the same element (VTabs, VToggle): nothing would choose, and both would\n * apply. Elsewhere fallthrough already lets the consumer win and this just drops a default\n * that has become redundant.\n */\n\nimport { computed, useAttrs, type ComputedRef } from 'vue'\n\nexport function useAriaLabel(label: () => string | undefined): ComputedRef<string | undefined> {\n  const attrs = useAttrs()\n  return computed(() =>\n    attrs['aria-labelledby'] !== undefined\n      ? undefined\n      : ((attrs['aria-label'] as string | undefined) ?? label()),\n  )\n}\n"],"mappings":";;AAgBA,SAAgB,EAAa,GAAkE;CAC7F,IAAM,IAAQ,EAAS;CACvB,OAAO,QACL,EAAM,uBAAuB,KAAA,IAEvB,EAAM,iBAAwC,EAAM,IADtD,KAAA,CAEN;AACF"}

package/dist/composables/useClearable.d.ts

@@ -0,0 +1,42 @@
+import { ComputedRef, Ref } from 'vue';
+interface ClearableOptions {
+    /** Whether the field offers a cross at all. */
+    clearable: () => boolean;
+    /**
+     * The consumer's EXPLICIT answer to "is there anything to clear?", which holds even on a
+     * read-only field: the value of a read-only date or time picker changes through its panel
+     * rather than by typing. Left undefined, the field answers for itself.
+     */
+    clearVisible: () => boolean | undefined;
+    /** Whether the field is unusable, the row it sits in taken into account. */
+    disabled: () => boolean;
+    /** Whether the field refuses to be typed into. */
+    readonly: () => boolean;
+    /** What the field currently holds, as text. */
+    text: () => string;
+    /** The real control, which the focus goes back to. */
+    controlEl: Ref<{
+        focus: () => void;
+    } | null>;
+    /** Empties the value and tells the consumer. */
+    onCleared: () => void;
+}
+/**
+ * Whether a field offers its cross: it asks for one, it can be used and changed, and it holds
+ * something. The fields composed on top of VInput — VCombobox, VDateInput, VTimeInput,
+ * VFileInput — hold their value somewhere other than the text, so they work out `filled`
+ * themselves and hand VInput the result as `clearVisible`; the other terms are the same for
+ * every field and are written here once.
+ *
+ * `disabled` is passed apart from the props because it is the value RESOLVED against the row
+ * the field sits in, which the prop alone is not.
+ */
+export declare function canClear(props: {
+    clearable: boolean;
+    readonly: boolean;
+}, disabled: boolean, filled: boolean): boolean;
+export declare function useClearable(options: ClearableOptions): {
+    showClear: ComputedRef<boolean>;
+    onClear: () => void;
+};
+export {};

package/dist/composables/useClearable.js

@@ -0,0 +1,19 @@
+import { computed as e } from "vue";
+//#region src/composables/useClearable.ts
+function t(e, t, n) {
+	return e.clearable && !t && !e.readonly && n;
+}
+function n(t) {
+	let n = e(() => !t.clearable() || t.disabled() ? !1 : t.clearVisible() ?? (!t.readonly() && t.text().length > 0));
+	function r() {
+		t.onCleared(), t.controlEl.value?.focus();
+	}
+	return {
+		showClear: n,
+		onClear: r
+	};
+}
+//#endregion
+export { t as canClear, n as useClearable };
+
+//# sourceMappingURL=useClearable.js.map

package/dist/composables/useClearable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClearable.js","names":[],"sources":["../../src/composables/useClearable.ts"],"sourcesContent":["/**\n * The cross that empties a field, shared by VInput and VTextarea — and, through\n * `canClear`, the answer the fields composed on top of VInput give it.\n *\n * The two halves of it are one decision: WHEN the cross is shown, and what pressing it does.\n * They were written out in both components and had already started to drift — one asked\n * `props.disabled` where the other asked the value resolved against the row it sits in — which\n * is the kind of divergence nothing catches, the cross simply staying visible in a disabled\n * VInputGroup.\n *\n * The focus is the accessibility half and is not optional: the cross VANISHES the instant it\n * empties the field, so without that call the focus would be left on a button that no longer\n * exists and fall back to the top of the document.\n */\nimport { computed } from 'vue'\nimport type { ComputedRef, Ref } from 'vue'\n\ninterface ClearableOptions {\n  /** Whether the field offers a cross at all. */\n  clearable: () => boolean\n  /**\n   * The consumer's EXPLICIT answer to \"is there anything to clear?\", which holds even on a\n   * read-only field: the value of a read-only date or time picker changes through its panel\n   * rather than by typing. Left undefined, the field answers for itself.\n   */\n  clearVisible: () => boolean | undefined\n  /** Whether the field is unusable, the row it sits in taken into account. */\n  disabled: () => boolean\n  /** Whether the field refuses to be typed into. */\n  readonly: () => boolean\n  /** What the field currently holds, as text. */\n  text: () => string\n  /** The real control, which the focus goes back to. */\n  controlEl: Ref<{ focus: () => void } | null>\n  /** Empties the value and tells the consumer. */\n  onCleared: () => void\n}\n\n/**\n * Whether a field offers its cross: it asks for one, it can be used and changed, and it holds\n * something. The fields composed on top of VInput — VCombobox, VDateInput, VTimeInput,\n * VFileInput — hold their value somewhere other than the text, so they work out `filled`\n * themselves and hand VInput the result as `clearVisible`; the other terms are the same for\n * every field and are written here once.\n *\n * `disabled` is passed apart from the props because it is the value RESOLVED against the row\n * the field sits in, which the prop alone is not.\n */\nexport function canClear(\n  props: { clearable: boolean; readonly: boolean },\n  disabled: boolean,\n  filled: boolean,\n): boolean {\n  return props.clearable && !disabled && !props.readonly && filled\n}\n\nexport function useClearable(options: ClearableOptions): {\n  showClear: ComputedRef<boolean>\n  onClear: () => void\n} {\n  // An explicit `clearVisible` replaces the read-only and the content terms together: a\n  // composed field has already asked both through `canClear`.\n  const showClear = computed(() => {\n    if (!options.clearable() || options.disabled()) return false\n    return options.clearVisible() ?? (!options.readonly() && options.text().length > 0)\n  })\n\n  function onClear() {\n    options.onCleared()\n    options.controlEl.value?.focus()\n  }\n\n  return { showClear, onClear }\n}\n"],"mappings":";;AAgDA,SAAgB,EACd,GACA,GACA,GACS;CACT,OAAO,EAAM,aAAa,CAAC,KAAY,CAAC,EAAM,YAAY;AAC5D;AAEA,SAAgB,EAAa,GAG3B;CAGA,IAAM,IAAY,QACZ,CAAC,EAAQ,UAAU,KAAK,EAAQ,SAAS,IAAU,KAChD,EAAQ,aAAa,MAAM,CAAC,EAAQ,SAAS,KAAK,EAAQ,KAAK,CAAC,CAAC,SAAS,EAClF;CAED,SAAS,IAAU;EAEjB,AADA,EAAQ,UAAU,GAClB,EAAQ,UAAU,OAAO,MAAM;CACjC;CAEA,OAAO;EAAE;EAAW;CAAQ;AAC9B"}

package/dist/composables/useControlShape.d.ts

@@ -0,0 +1,22 @@
+import { ComputedRef } from 'vue';
+/** The three members every group context shares, whatever else it carries. */
+interface ShapeContext<S> {
+    readonly size?: S;
+    readonly compact?: boolean;
+    readonly disabled?: boolean;
+}
+interface ShapeProps<S> {
+    readonly size: S;
+    readonly compact: boolean;
+    readonly disabled: boolean;
+}
+export interface ResolvedShape<S> {
+    /** The height, the row's if it named one. */
+    size: ComputedRef<S>;
+    /** The reduced density, the row's if it named one. */
+    compact: ComputedRef<boolean>;
+    /** Unusable as soon as EITHER the row or the control says so. */
+    disabled: ComputedRef<boolean>;
+}
+export declare function useControlShape<S>(props: ShapeProps<S>, group: ShapeContext<S> | null): ResolvedShape<S>;
+export {};

package/dist/composables/useControlShape.js

@@ -0,0 +1,13 @@
+import { computed as e } from "vue";
+//#region src/composables/useControlShape.ts
+function t(t, n) {
+	return {
+		size: e(() => n?.size ?? t.size),
+		compact: e(() => n?.compact ?? t.compact),
+		disabled: e(() => n?.disabled || t.disabled)
+	};
+}
+//#endregion
+export { t as useControlShape };
+
+//# sourceMappingURL=useControlShape.js.map

package/dist/composables/useControlShape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlShape.js","names":[],"sources":["../../src/composables/useControlShape.ts"],"sourcesContent":["/**\n * The arbitration between a control and the row it sits in, resolved once.\n *\n * Seven components read a group context — VButton from a VButtonGroup, and the five fields\n * and VSlider's number fields from a VInputGroup — and each of them wrote the same three\n * computeds by hand. Two of the\n * three use `??` and the third uses `||`, and that asymmetry is the whole rule: `size` and\n * `compact` are the SHAPE of the control, which belongs to the row, while `disabled` is\n * CUMULATIVE, so a row switched off cannot have one of its segments opt back in. Written out\n * six times, one of the six was always going to end up with the wrong operator.\n *\n * It takes the injected context rather than the key so a component keeps its own typing: the\n * two contexts carry different sizes, and neither is `unknown` on the other side.\n */\nimport { computed } from 'vue'\nimport type { ComputedRef } from 'vue'\n\n/** The three members every group context shares, whatever else it carries. */\ninterface ShapeContext<S> {\n  readonly size?: S\n  readonly compact?: boolean\n  readonly disabled?: boolean\n}\n\ninterface ShapeProps<S> {\n  readonly size: S\n  readonly compact: boolean\n  readonly disabled: boolean\n}\n\nexport interface ResolvedShape<S> {\n  /** The height, the row's if it named one. */\n  size: ComputedRef<S>\n  /** The reduced density, the row's if it named one. */\n  compact: ComputedRef<boolean>\n  /** Unusable as soon as EITHER the row or the control says so. */\n  disabled: ComputedRef<boolean>\n}\n\nexport function useControlShape<S>(\n  props: ShapeProps<S>,\n  group: ShapeContext<S> | null,\n): ResolvedShape<S> {\n  return {\n    size: computed(() => group?.size ?? props.size),\n    compact: computed(() => group?.compact ?? props.compact),\n    disabled: computed(() => group?.disabled || props.disabled),\n  }\n}\n"],"mappings":";;AAuCA,SAAgB,EACd,GACA,GACkB;CAClB,OAAO;EACL,MAAM,QAAe,GAAO,QAAQ,EAAM,IAAI;EAC9C,SAAS,QAAe,GAAO,WAAW,EAAM,OAAO;EACvD,UAAU,QAAe,GAAO,YAAY,EAAM,QAAQ;CAC5D;AACF"}

package/dist/composables/useDetailsOpen.d.ts

@@ -0,0 +1,22 @@
+import { Ref } from 'vue';
+/**
+ * The open state of a native `<details>`, shared by the design system's two consumers of one:
+ * VAccordionItem and VSideNavigationItem. Bind `openAttr` to `:open`, `onToggle` to `@toggle`
+ * and `onSummaryClick` to the `<summary>`'s `@click`.
+ *
+ * The element is the source of truth and the `v-model:open` is fed BY it. Left unbound (the
+ * model's `null`), the value handed to `:open` never changes, so Vue never patches the element
+ * back and the native toggling stays sovereign.
+ *
+ * `defaultOpen` is read ONCE, here, and never again: it is an initial state, so a prop changed
+ * later must not close a section the reader has opened. Read inside the computed instead, a
+ * parent re-rendering with another value would silently fold it.
+ */
+export declare function useDetailsOpen(open: Ref<boolean | null>, options: {
+    defaultOpen: () => boolean;
+    disabled: () => boolean;
+}): {
+    openAttr: import('vue').ComputedRef<true | undefined>;
+    onToggle: (event: Event) => void;
+    onSummaryClick: (event: MouseEvent) => void;
+};

package/dist/composables/useDetailsOpen.js

@@ -0,0 +1,21 @@
+import { computed as e } from "vue";
+//#region src/composables/useDetailsOpen.ts
+function t(t, n) {
+	let r = n.defaultOpen(), i = e(() => (t.value ?? r) || void 0);
+	function a(e) {
+		let n = e.target.open;
+		t.value !== n && (t.value = n);
+	}
+	function o(e) {
+		n.disabled() && e.preventDefault();
+	}
+	return {
+		openAttr: i,
+		onToggle: a,
+		onSummaryClick: o
+	};
+}
+//#endregion
+export { t as useDetailsOpen };
+
+//# sourceMappingURL=useDetailsOpen.js.map

package/dist/composables/useDetailsOpen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDetailsOpen.js","names":[],"sources":["../../src/composables/useDetailsOpen.ts"],"sourcesContent":["import { computed } from 'vue'\nimport type { Ref } from 'vue'\n\n/**\n * The open state of a native `<details>`, shared by the design system's two consumers of one:\n * VAccordionItem and VSideNavigationItem. Bind `openAttr` to `:open`, `onToggle` to `@toggle`\n * and `onSummaryClick` to the `<summary>`'s `@click`.\n *\n * The element is the source of truth and the `v-model:open` is fed BY it. Left unbound (the\n * model's `null`), the value handed to `:open` never changes, so Vue never patches the element\n * back and the native toggling stays sovereign.\n *\n * `defaultOpen` is read ONCE, here, and never again: it is an initial state, so a prop changed\n * later must not close a section the reader has opened. Read inside the computed instead, a\n * parent re-rendering with another value would silently fold it.\n */\nexport function useDetailsOpen(\n  open: Ref<boolean | null>,\n  options: { defaultOpen: () => boolean; disabled: () => boolean },\n) {\n  const initial = options.defaultOpen()\n  const openAttr = computed(() => (open.value ?? initial) || undefined)\n\n  // @core\n  // The toggle event does not bubble, which is convenient: listening on the element itself\n  // cannot pick up a nested `<details>` opening inside it.\n  function onToggle(event: Event) {\n    const value = (event.target as HTMLDetailsElement).open\n    if (open.value !== value) open.value = value\n  }\n\n  // @a11y @core\n  /*\n   * A `<summary>` has no `disabled` attribute, so cancelling the click is the only way to stop\n   * a disabled section from folding. The keyboard needs nothing: the component takes the\n   * summary out of the tab order. Deliberately not `pointer-events: none`, which would also\n   * remove the forbidden cursor telling the reader why nothing happens.\n   */\n  function onSummaryClick(event: MouseEvent) {\n    if (options.disabled()) event.preventDefault()\n  }\n\n  return { openAttr, onToggle, onSummaryClick }\n}\n"],"mappings":";;AAgBA,SAAgB,EACd,GACA,GACA;CACA,IAAM,IAAU,EAAQ,YAAY,GAC9B,IAAW,SAAgB,EAAK,SAAS,MAAY,KAAA,CAAS;CAKpE,SAAS,EAAS,GAAc;EAC9B,IAAM,IAAS,EAAM,OAA8B;EACnD,AAAI,EAAK,UAAU,MAAO,EAAK,QAAQ;CACzC;CASA,SAAS,EAAe,GAAmB;EACzC,AAAI,EAAQ,SAAS,KAAG,EAAM,eAAe;CAC/C;CAEA,OAAO;EAAE;EAAU;EAAU;CAAe;AAC9C"}

package/dist/composables/useFieldIds.d.ts

@@ -1,19 +1,4 @@
 import { ComputedRef } from 'vue';
-/**
- * The identifiers a wrapped field needs — the text input and the multi-line one. They
- * are what ties a label to its field and a field to the help text below it, so that
- * clicking the label focuses the field and a screen reader reads the hint out with it.
- *
- * Two points are worth knowing. An identifier the consumer supplies WINS over the one
- * generated here, or a label they wrote themselves outside the component would point at
- * nothing. And the link to the descriptive text is a LIST rather than a single value, so
- * the component's own hint is ADDED to whatever the consumer already pointed at instead
- * of replacing it.
- *
- * The generated identifiers come from Vue's own facility rather than a counter of our
- * own, which is what makes them identical in the page rendered on the server and in the
- * one the browser takes over.
- */
 export declare function useFieldIds(attrs: Record<string, unknown>, hasHint: () => boolean): {
     fieldId: ComputedRef<string>;
     hintId: string;

package/dist/composables/useFieldIds.js

@@ -1,14 +1,15 @@
-import { computed as e, useId as t } from "vue";
+import { joinIds as e } from "../utils/ids.js";
+import { computed as t, useId as n } from "vue";
 //#region src/composables/useFieldIds.ts
-function n(n, r) {
-	let i = t(), a = t();
+function r(r, i) {
+	let a = n(), o = n();
 	return {
-		fieldId: e(() => n.id ?? i),
-		hintId: a,
-		describedBy: e(() => [n["aria-describedby"], r() ? a : void 0].filter(Boolean).join(" ") || void 0)
+		fieldId: t(() => r.id ?? a),
+		hintId: o,
+		describedBy: t(() => e(r["aria-describedby"], i() && o))
 	};
 }
 //#endregion
-export { n as useFieldIds };
+export { r as useFieldIds };
 
 //# sourceMappingURL=useFieldIds.js.map

package/dist/composables/useFieldIds.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFieldIds.js","names":[],"sources":["../../src/composables/useFieldIds.ts"],"sourcesContent":["import { computed, useId, type ComputedRef } from 'vue'\n\n// @a11y @ssr\n/**\n * The identifiers a wrapped field needs — the text input and the multi-line one. They\n * are what ties a label to its field and a field to the help text below it, so that\n * clicking the label focuses the field and a screen reader reads the hint out with it.\n *\n * Two points are worth knowing. An identifier the consumer supplies WINS over the one\n * generated here, or a label they wrote themselves outside the component would point at\n * nothing. And the link to the descriptive text is a LIST rather than a single value, so\n * the component's own hint is ADDED to whatever the consumer already pointed at instead\n * of replacing it.\n *\n * The generated identifiers come from Vue's own facility rather than a counter of our\n * own, which is what makes them identical in the page rendered on the server and in the\n * one the browser takes over.\n */\nexport function useFieldIds(\n  attrs: Record<string, unknown>,\n  hasHint: () => boolean,\n): { fieldId: ComputedRef<string>; hintId: string; describedBy: ComputedRef<string | undefined> } {\n  const uid = useId()\n  const hintId = useId()\n\n  return {\n    fieldId: computed(() => (attrs.id as string | undefined) ?? uid),\n    hintId,\n    describedBy: computed(() => {\n      const ids = [attrs['aria-describedby'] as string | undefined, hasHint() ? hintId : undefined]\n      return ids.filter(Boolean).join(' ') || undefined\n    }),\n  }\n}\n"],"mappings":";;AAkBA,SAAgB,EACd,GACA,GACgG;CAChG,IAAM,IAAM,EAAM,GACZ,IAAS,EAAM;CAErB,OAAO;EACL,SAAS,QAAgB,EAAM,MAA6B,CAAG;EAC/D;EACA,aAAa,QAEJ,CADM,EAAM,qBAA2C,EAAQ,IAAI,IAAS,KAAA,CAC5E,CAAA,CAAI,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA,CACzC;CACH;AACF"}
+{"version":3,"file":"useFieldIds.js","names":[],"sources":["../../src/composables/useFieldIds.ts"],"sourcesContent":["// @a11y @ssr\n/**\n * The ids tying a wrapped field to its label and its hint — VInput and VTextarea, and the hint\n * of VCheckbox, VRadio and VSwitch.\n *\n * A consumer `id` WINS over the generated one, or a label they wrote outside the component\n * would point at nothing. `aria-describedby` is a space-separated LIST, so the component's\n * hint is APPENDED to whatever the consumer already pointed at rather than replacing it.\n *\n * Ids come from `useId()` rather than a counter of our own, which is what keeps them\n * identical across the server render and hydration.\n */\n\nimport { computed, useId, type ComputedRef } from 'vue'\n\nimport { joinIds } from '../utils/ids'\n\nexport function useFieldIds(\n  attrs: Record<string, unknown>,\n  hasHint: () => boolean,\n): { fieldId: ComputedRef<string>; hintId: string; describedBy: ComputedRef<string | undefined> } {\n  const uid = useId()\n  const hintId = useId()\n\n  return {\n    fieldId: computed(() => (attrs.id as string | undefined) ?? uid),\n    hintId,\n    describedBy: computed(() =>\n      joinIds(attrs['aria-describedby'] as string | undefined, hasHint() && hintId),\n    ),\n  }\n}\n"],"mappings":";;;AAiBA,SAAgB,EACd,GACA,GACgG;CAChG,IAAM,IAAM,EAAM,GACZ,IAAS,EAAM;CAErB,OAAO;EACL,SAAS,QAAgB,EAAM,MAA6B,CAAG;EAC/D;EACA,aAAa,QACX,EAAQ,EAAM,qBAA2C,EAAQ,KAAK,CAAM,CAC9E;CACF;AACF"}

package/dist/composables/useFieldPanel.d.ts

@@ -6,7 +6,7 @@ interface FocusableField {
 /** The least this needs of the panel: something it can open and close. */
 interface PanelControl {
     show: () => void;
-    hide: () => void;
+    close: () => void;
 }
 export interface UseFieldPanelOptions {
     /** The component's root, against which "the focus has left" is judged. */
@@ -14,7 +14,7 @@ export interface UseFieldPanelOptions {
     /** The panel to open and close. */
     panelRef: Ref<PanelControl | null>;
     /** The field the focus returns to. */
-    fieldEl: Ref<FocusableField | null>;
+    field: Ref<FocusableField | null>;
     /**
      * Whether opening is refused. It is the SINGLE cut-off point: every route in passes
      * through it, so a component never has to repeat the condition per handler.
@@ -27,32 +27,35 @@ export interface UseFieldPanelOptions {
     /** What it needs to do as the panel closes: clear an announcement, for instance. */
     onClose?: () => void;
     /**
-     * Whether the focus should enter the panel when it opens. It does by default.
+     * Whether focusing the field opens the panel. It does not by default.
      *
-     * A field one TYPES into says no: its panel opens without taking the caret, so typing
-     * carries on and the down arrow remains the one explicit way in.
+     * A field one TYPES into says yes, and its panel then opens WITHOUT taking the caret, so
+     * typing carries on and the down arrow remains the one explicit way in. A click on such a
+     * field leaves the focus where it is for the same reason.
      */
-    focusOnOpen?: () => boolean;
+    openOnFocus?: () => boolean;
 }
 /**
- * The shell shared by the date and the time picker: a field, and a panel below it that
- * nothing dismisses by itself. Neither component owns this — it belongs to both.
+ * The "field + `VPopover` in `mode="manual"`" shell of VDateInput and VTimeInput.
  *
- * A panel of that kind does NOTHING on its own: it does not close on a click outside, does
- * not take the focus, and does not hand it back. What follows is exactly that minimum,
- * and nothing more; whatever is particular to one component arrives through the three
- * callbacks above.
+ * A `manual` popover does nothing on its own: no light dismiss, no focus move, no focus
+ * return. This is exactly that minimum; what is particular to either component arrives
+ * through `onOpen`/`onClose`.
  *
- * TRAP — the panel is WRITTEN to directly and READ back through a model. The state here is
- * meant to be bound to the panel, which feeds it from its own events, but the opening
- * itself must stay synchronous: the frame scheduled to move the focus assumes the panel is
- * already open by the time it runs, and going through the model would put a tick in
- * between.
+ * TRAP — the panel is WRITTEN imperatively and READ back by model. Bind `open` as
+ * `v-model:open` so the DOM feeds it, but the write must stay synchronous: the `rAF` that
+ * moves focus assumes the panel is already open when it is armed, and the model would put
+ * a tick in between.
  */
 export declare function useFieldPanel(options: UseFieldPanelOptions): {
     open: Ref<boolean, boolean>;
+    panelId: string;
     openPanel: (moveFocus?: boolean) => void;
-    closePanel: (refocus?: boolean) => void;
+    closePanel: () => void;
+    closeAndFocus: () => void;
+    focusField: () => void;
+    onFieldFocus: () => void;
+    toggleFromIcon: () => void;
     onControlClick: (event: MouseEvent) => void;
     onFocusout: (event: FocusEvent) => void;
     onKeydown: (event: KeyboardEvent) => void;