vectis-ui 0.11.0 → 0.13.0

package/dist/components/VTimeline/context.js

@@ -0,0 +1,6 @@
+//#region src/components/VTimeline/context.ts
+var e = Symbol("v-timeline");
+//#endregion
+export { e as timelineKey };
+
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/VTimeline/context.ts"],"sourcesContent":["/**\n * What a VTimeline shares with its events: how they are laid out, which an event marks on itself\n * so that a timeline nested in its content keeps its own layout, and how titles and dates are\n * written.\n */\n\nimport type { InjectionKey } from 'vue'\n\n/** The heading level the titles of the events are rendered at. */\nexport type TimelineHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6\n\nexport interface TimelineContext {\n  orientation: 'vertical' | 'horizontal'\n  layout: 'stacked' | 'split' | 'alternate'\n  headingLevel: TimelineHeadingLevel | undefined\n  locale: string | undefined\n  formatOptions: Intl.DateTimeFormatOptions | undefined\n}\n\nexport const timelineKey: InjectionKey<TimelineContext> = Symbol('v-timeline')\n"],"mappings":";AAmBA,IAAa,IAA6C,OAAO,YAAY"}

package/dist/components/VTimeline/datetime.d.ts

@@ -0,0 +1,8 @@
+/** Writes out the moment of a timeline event at the precision its ISO string gives. */
+/**
+ * The text shown for `datetime`. A year (`2019`) is written as a year and a month (`2026-10`) as
+ * a month; `options` replaces the format of a day (`2026-10-06`) or of a moment
+ * (`2026-10-06T14:30`), which are `dateStyle: 'medium'`, plus `timeStyle: 'short'` for a moment.
+ * A value the browser cannot read is shown as it is.
+ */
+export declare function formatTimelineDate(datetime: string, locale: string, options?: Intl.DateTimeFormatOptions): string;

package/dist/components/VTimeline/datetime.js

@@ -0,0 +1,36 @@
+import { memo as e } from "../../utils/memo.js";
+import { parseISO as t } from "../../utils/date.js";
+//#region src/components/VTimeline/datetime.ts
+var n = /^(\d{4})$/, r = /^(\d{4})-(\d{2})$/, i = /^\d{4}-\d{2}-\d{2}$/, a = { year: "numeric" }, o = {
+	year: "numeric",
+	month: "long"
+}, s = { dateStyle: "medium" }, c = {
+	dateStyle: "medium",
+	timeStyle: "short"
+}, l = /* @__PURE__ */ new Map();
+function u(t, n) {
+	return e(l, `${t}|${JSON.stringify(n)}`, () => new Intl.DateTimeFormat(t, n));
+}
+function d(e, t) {
+	let n = new Date(2e3, t, 1);
+	return n.setFullYear(e, t, 1), n;
+}
+function f(e, l, f) {
+	let p = n.exec(e);
+	if (p) return u(l, a).format(d(Number(p[1]), 0));
+	let m = r.exec(e);
+	if (m) {
+		let t = Number(m[2]) - 1;
+		return t < 0 || t > 11 ? e : u(l, o).format(d(Number(m[1]), t));
+	}
+	if (i.test(e)) {
+		let n = t(e);
+		return n ? u(l, f ?? s).format(n) : e;
+	}
+	let h = new Date(e);
+	return Number.isNaN(h.getTime()) ? e : u(l, f ?? c).format(h);
+}
+//#endregion
+export { f as formatTimelineDate };
+
+//# sourceMappingURL=datetime.js.map

package/dist/components/VTimeline/datetime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datetime.js","names":[],"sources":["../../../src/components/VTimeline/datetime.ts"],"sourcesContent":["// @ssr\n/** Writes out the moment of a timeline event at the precision its ISO string gives. */\n\nimport { parseISO } from '../../utils/date'\nimport { memo } from '../../utils/memo'\n\nconst YEAR_RE = /^(\\d{4})$/\nconst MONTH_RE = /^(\\d{4})-(\\d{2})$/\nconst DAY_RE = /^\\d{4}-\\d{2}-\\d{2}$/\n\nconst YEAR_FORMAT: Intl.DateTimeFormatOptions = { year: 'numeric' }\nconst MONTH_FORMAT: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long' }\nconst DAY_FORMAT: Intl.DateTimeFormatOptions = { dateStyle: 'medium' }\nconst DATETIME_FORMAT: Intl.DateTimeFormatOptions = { dateStyle: 'medium', timeStyle: 'short' }\n\nconst formatters = new Map<string, Intl.DateTimeFormat>()\n\nfunction formatterFor(locale: string, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat {\n  return memo(\n    formatters,\n    `${locale}|${JSON.stringify(options)}`,\n    () => new Intl.DateTimeFormat(locale, options),\n  )\n}\n\n/** A year or a month read at local time, like a calendar date. */\nfunction localMonth(year: number, month0: number): Date {\n  const date = new Date(2000, month0, 1)\n  date.setFullYear(year, month0, 1)\n  return date\n}\n\n/**\n * The text shown for `datetime`. A year (`2019`) is written as a year and a month (`2026-10`) as\n * a month; `options` replaces the format of a day (`2026-10-06`) or of a moment\n * (`2026-10-06T14:30`), which are `dateStyle: 'medium'`, plus `timeStyle: 'short'` for a moment.\n * A value the browser cannot read is shown as it is.\n */\nexport function formatTimelineDate(\n  datetime: string,\n  locale: string,\n  options?: Intl.DateTimeFormatOptions,\n): string {\n  const year = YEAR_RE.exec(datetime)\n  if (year) return formatterFor(locale, YEAR_FORMAT).format(localMonth(Number(year[1]), 0))\n\n  const month = MONTH_RE.exec(datetime)\n  if (month) {\n    const month0 = Number(month[2]) - 1\n    if (month0 < 0 || month0 > 11) return datetime\n    return formatterFor(locale, MONTH_FORMAT).format(localMonth(Number(month[1]), month0))\n  }\n\n  if (DAY_RE.test(datetime)) {\n    const day = parseISO(datetime)\n    return day ? formatterFor(locale, options ?? DAY_FORMAT).format(day) : datetime\n  }\n\n  // A moment without an offset is read at local time, one with an offset (`Z`, `+02:00`) as the\n  // instant it names, shown in the time zone the code runs in unless `options` sets one.\n  const moment = new Date(datetime)\n  if (Number.isNaN(moment.getTime())) return datetime\n  return formatterFor(locale, options ?? DATETIME_FORMAT).format(moment)\n}\n"],"mappings":";;;AAMA,IAAM,IAAU,aACV,IAAW,qBACX,IAAS,uBAET,IAA0C,EAAE,MAAM,UAAU,GAC5D,IAA2C;CAAE,MAAM;CAAW,OAAO;AAAO,GAC5E,IAAyC,EAAE,WAAW,SAAS,GAC/D,IAA8C;CAAE,WAAW;CAAU,WAAW;AAAQ,GAExF,oBAAa,IAAI,IAAiC;AAExD,SAAS,EAAa,GAAgB,GAA0D;CAC9F,OAAO,EACL,GACA,GAAG,EAAO,GAAG,KAAK,UAAU,CAAO,WAC7B,IAAI,KAAK,eAAe,GAAQ,CAAO,CAC/C;AACF;AAGA,SAAS,EAAW,GAAc,GAAsB;CACtD,IAAM,IAAO,IAAI,KAAK,KAAM,GAAQ,CAAC;CAErC,OADA,EAAK,YAAY,GAAM,GAAQ,CAAC,GACzB;AACT;AAQA,SAAgB,EACd,GACA,GACA,GACQ;CACR,IAAM,IAAO,EAAQ,KAAK,CAAQ;CAClC,IAAI,GAAM,OAAO,EAAa,GAAQ,CAAW,CAAC,CAAC,OAAO,EAAW,OAAO,EAAK,EAAE,GAAG,CAAC,CAAC;CAExF,IAAM,IAAQ,EAAS,KAAK,CAAQ;CACpC,IAAI,GAAO;EACT,IAAM,IAAS,OAAO,EAAM,EAAE,IAAI;EAElC,OADI,IAAS,KAAK,IAAS,KAAW,IAC/B,EAAa,GAAQ,CAAY,CAAC,CAAC,OAAO,EAAW,OAAO,EAAM,EAAE,GAAG,CAAM,CAAC;CACvF;CAEA,IAAI,EAAO,KAAK,CAAQ,GAAG;EACzB,IAAM,IAAM,EAAS,CAAQ;EAC7B,OAAO,IAAM,EAAa,GAAQ,KAAW,CAAU,CAAC,CAAC,OAAO,CAAG,IAAI;CACzE;CAIA,IAAM,IAAS,IAAI,KAAK,CAAQ;CAEhC,OADI,OAAO,MAAM,EAAO,QAAQ,CAAC,IAAU,IACpC,EAAa,GAAQ,KAAW,CAAe,CAAC,CAAC,OAAO,CAAM;AACvE"}

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

@@ -2,9 +2,9 @@ import { iconProps as e } from "../VIcon/iconProps.js";
 import { cssSize as t } from "../../utils/css.js";
 import n from "../VIcon/VIcon.js";
 import r from "../VIconButton/VIconButton.js";
-import { close as i } from "../VIcon/icons/close.js";
-import { check_circle as a } from "../VIcon/icons/check_circle.js";
-import { error as o } from "../VIcon/icons/error.js";
+import { error as i } from "../VIcon/icons/error.js";
+import { close as a } from "../VIcon/icons/close.js";
+import { check_circle as o } from "../VIcon/icons/check_circle.js";
 import { info as s } from "../VIcon/icons/info.js";
 import { notifications as c } from "../VIcon/icons/notifications.js";
 import { warning as l } from "../VIcon/icons/warning.js";
@@ -24,11 +24,11 @@ var C = ["data-tone", "data-variant"], w = { class: "v-banner-text v-toast-body"
 		let O = g, k = D, A = {
 			neutral: c,
 			accent: s,
-			success: a,
-			danger: o,
+			success: o,
+			danger: i,
 			warning: l
 		}, j = u(() => O.item.icon === !1 ? void 0 : e(O.item.icon ?? A[O.item.tone]));
-		return (e, a) => (y(), p("div", {
+		return (e, i) => (y(), p("div", {
 			class: "v-banner v-toast v-tone",
 			"data-tone": g.item.tone,
 			"data-variant": g.item.variant,
@@ -44,9 +44,9 @@ var C = ["data-tone", "data-variant"], w = { class: "v-banner-text v-toast-body"
 				class: "v-banner-control v-toast-close",
 				label: g.closeLabel,
 				size: "sm",
-				onClick: a[0] ||= (e) => k("close", g.item.id)
+				onClick: i[0] ||= (e) => k("close", g.item.id)
 			}, {
-				default: S(() => [h(n, { name: x(i) }, null, 8, ["name"])]),
+				default: S(() => [h(n, { name: x(a) }, null, 8, ["name"])]),
 				_: 1
 			}, 8, ["label"]))
 		], 12, C));

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

@@ -1,9 +1,9 @@
 import { useMessages as e } from "../../i18n/state.js";
 import { usePopover as t } from "../../composables/usePopover.js";
 import { useAriaLabel as n } from "../../composables/useAriaLabel.js";
-import r from "./VToast.js";
-import { dismissToast as i, toasts as a } from "./state.js";
-import { useLiveAnnouncer as o } from "../../composables/useLiveAnnouncer.js";
+import { useLiveAnnouncer as r } from "../../composables/useLiveAnnouncer.js";
+import i from "./VToast.js";
+import { dismissToast as a, toasts as o } from "./state.js";
 import { Fragment as s, computed as c, createBlock as l, createElementBlock as u, createElementVNode as d, defineComponent as f, nextTick as p, onBeforeUnmount as m, onMounted as h, openBlock as g, ref as _, renderList as v, toDisplayString as y, unref as b, watch as x } from "vue";
 //#region src/components/VToast/VToaster.vue?vue&type=script&setup=true&lang.ts
 var S = [
@@ -39,7 +39,7 @@ var S = [
 			"bottom-right"
 		], A = c(() => {
 			let e = /* @__PURE__ */ new Map();
-			for (let t of a) {
+			for (let t of o) {
 				let n = L(t), r = e.get(n);
 				r ? r.push(t) : e.set(n, [t]);
 			}
@@ -66,16 +66,16 @@ var S = [
 		function B(e) {
 			let t = e.duration ?? T.duration;
 			t <= 0 || P.has(e.id) || P.set(e.id, setTimeout(() => {
-				P.delete(e.id), i(e.id);
+				P.delete(e.id), a(e.id);
 			}, t));
 		}
 		function V() {
-			let e = new Set(a.map((e) => e.id));
+			let e = new Set(o.map((e) => e.id));
 			for (let t of P.keys()) e.has(t) || z(t);
 			for (let t of q) e.has(t) || q.delete(t);
-			for (let e of a) q.has(e.id) || (q.add(e.id), K([e.title, e.message].filter(Boolean).join(". "), e.tone === "danger" || e.tone === "warning"));
+			for (let e of o) q.has(e.id) || (q.add(e.id), K([e.title, e.message].filter(Boolean).join(". "), e.tone === "danger" || e.tone === "warning"));
 			for (let e of k) (M.get(e)?.el.value)?.contains(document.activeElement) || I.delete(e), (A.value.get(e)?.length ?? 0) === 0 && F.delete(e);
-			for (let e of a) R(L(e)) ? z(e.id) : B(e);
+			for (let e of o) R(L(e)) ? z(e.id) : B(e);
 			for (let e of k) {
 				let t = M.get(e);
 				t?.el.value && ((A.value.get(e)?.length ?? 0) > 0 ? t.show() : t.hide());
@@ -89,14 +89,14 @@ var S = [
 		function U(e, t) {
 			if ((t === "pointer" ? F : I).delete(e), !R(e)) for (let t of A.value.get(e) ?? []) B(t);
 		}
-		let { polite: W, assertive: G, announce: K } = o(), q = /* @__PURE__ */ new Set(), J = /* @__PURE__ */ new Map();
+		let { polite: W, assertive: G, announce: K } = r(), q = /* @__PURE__ */ new Set(), J = /* @__PURE__ */ new Map();
 		function Y(e, t) {
 			let n = t.relatedTarget, r = M.get(e)?.el.value;
 			n && !r?.contains(n) && J.set(e, n), H(e, "focus");
 		}
 		function X(e) {
-			let t = a.find((t) => t.id === e), n = t ? L(t) : void 0, r = n ? M.get(n)?.el.value : null, o = !!r?.contains(document.activeElement);
-			i(e), !(!o || !n) && p(() => {
+			let t = o.find((t) => t.id === e), n = t ? L(t) : void 0, r = n ? M.get(n)?.el.value : null, i = !!r?.contains(document.activeElement);
+			a(e), !(!i || !n) && p(() => {
 				let e = r?.querySelector(".v-toast-close"), t = J.get(n);
 				e ? e.focus() : t?.isConnected && t.focus();
 			});
@@ -126,7 +126,7 @@ var S = [
 				onFocusout: (t) => U(e, "focus"),
 				onBeforetoggle: (t) => N(e, t),
 				onToggle: (t) => N(e, t)
-			}, [(g(!0), u(s, null, v(A.value.get(e) ?? [], (e) => (g(), l(r, {
+			}, [(g(!0), u(s, null, v(A.value.get(e) ?? [], (e) => (g(), l(i, {
 				key: e.id,
 				item: e,
 				"close-label": O.value,

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

@@ -107,17 +107,17 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     label: string;
     size: ToggleSize;
     tone: ToggleTone;
+    compact: boolean;
+    disabled: boolean;
+    mandatory: boolean;
+    multiple: boolean;
     orientation: ToggleOrientation;
     elevated: boolean;
-    compact: boolean;
     fullWidth: boolean;
-    disabled: boolean;
     detached: boolean;
     bordered: boolean;
     itemVariant: ToggleItemVariant;
     selectedVariant: ToggleSelectedVariant;
-    multiple: boolean;
-    mandatory: boolean;
     selectedIconFilled: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -30,10 +30,10 @@ type __VLS_Slots = {
 };
 declare const __VLS_base: import('vue').DefineComponent<ToggleItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ToggleItemProps> & Readonly<{}>, {
     label: string;
-    disabled: boolean;
     iconStart: IconSource;
     iconEnd: IconSource;
     iconFilled: boolean;
+    disabled: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -13,7 +13,12 @@ interface TooltipProps {
      */
     placement?: TooltipPlacement;
     /** How long the pointer must rest on the element before the tooltip appears, in milliseconds. */
-    delay?: number;
+    openDelay?: number;
+    /**
+     * How long the tooltip stays once the pointer has left both the element and the tooltip, in
+     * milliseconds. It is the time to cross the gap between them.
+     */
+    closeDelay?: number;
 }
 type __VLS_Slots = {
     /** The element the tooltip describes. */
@@ -34,7 +39,8 @@ declare const __VLS_base: import('vue').DefineComponent<TooltipProps, {
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TooltipProps> & Readonly<{}>, {
     text: string;
     placement: TooltipPlacement;
-    delay: number;
+    openDelay: number;
+    closeDelay: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/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 * Use a manual VPopover because tooltip hover, focus, delay and Escape policies differ from\n * native light dismissal. Pointer movement may require keeping the bubble open.\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  /** How long the pointer must rest on the element before the tooltip appears, in milliseconds. */\n  delay?: number\n}\n\nconst props = withDefaults(defineProps<TooltipProps>(), {\n  text: undefined,\n  placement: 'top',\n  delay: 300,\n})\n\ndefineSlots<{\n  /** The element the tooltip describes. */\n  default(props: { triggerProps: TooltipTriggerProps }): unknown\n  /** Content richer than a plain string: formatting, a keyboard shortcut, an icon. */\n  content?(): unknown\n}>()\n\nconst tooltipId = useId()\n// @a11y\n/*\n * Keyboard focus has to open it synchronously, and a model would go through VPopover's watcher,\n * hence through a tick. There is nothing lost either way: a tooltip publishes no open state\n * anyone needs to read.\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 between\n * the trigger and the bubble, which the margin leaves empty and which no pointer event covers.\n */\nconst LEAVE_GRACE = 100\n\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, and what lets\n  // 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 how\n * it got there. `:focus-visible` is the browser's own answer to the question, the same one\n * VMenu asks to decide where a menu's focus lands.\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\nlet listening = false\nfunction onOpenChange(open: boolean) {\n  if (open === listening) return\n  listening = 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    Close on pointerdown so a tooltip cannot remain above a dialog or menu opened by its\n    trigger.\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  /*\n   * A wrapper stretched by a parent in `align-items: stretch` would otherwise stretch the\n   * trigger with it, where the inline-block form left it at its natural height.\n   */\n  .v-tooltip {\n    display: inline-flex;\n    align-items: center;\n    anchor-name: --tooltip-anchor;\n    /*\n     * Confining the name to this subtree is indispensable: a visible panel moves to the top\n     * layer, where anchor resolution treats it as coming after the whole document, so without\n     * it every tooltip would attach to the last wrapper carrying this name.\n     */\n    anchor-scope: --tooltip-anchor;\n  }\n\n  /*\n   * Compound the panel classes so chrome overrides remain independent of VPopover stylesheet\n   * order, including if bare changes.\n   */\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  /* An 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":""}
+{"version":3,"file":"VTooltip.js","names":[],"sources":["../../../src/components/VTooltip/VTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Use a manual VPopover because tooltip hover, focus, delay and Escape policies differ from\n * native light dismissal. Pointer movement may require keeping the bubble open.\n */\n\nimport { computed, ref, useId } from 'vue'\n\nimport VPopover from '../VPopover/VPopover.vue'\n\nimport { useEscapeDismiss } from '../../composables/useEscapeDismiss'\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  /** How long the pointer must rest on the element before the tooltip appears, in milliseconds. */\n  openDelay?: number\n  /**\n   * How long the tooltip stays once the pointer has left both the element and the tooltip, in\n   * milliseconds. It is the time to cross the gap between them.\n   */\n  closeDelay?: number\n}\n\nconst props = withDefaults(defineProps<TooltipProps>(), {\n  text: undefined,\n  placement: 'top',\n  openDelay: 300,\n  closeDelay: 100,\n})\n\ndefineSlots<{\n  /** The element the tooltip describes. */\n  default(props: { triggerProps: TooltipTriggerProps }): unknown\n  /** Content richer than a plain string: formatting, a keyboard shortcut, an icon. */\n  content?(): unknown\n}>()\n\nconst tooltipId = useId()\n// @a11y\n/*\n * Keyboard focus has to open it synchronously, and a model would go through VPopover's watcher,\n * hence through a tick. There is nothing lost either way: a tooltip publishes no open state\n * anyone needs to read.\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\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, and what lets\n  // keyboard focus share this code path without waiting a tick.\n  timer.start(() => popoverRef.value?.show(), immediate ? 0 : props.openDelay)\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(), props.closeDelay)\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 how\n * it got there. `:focus-visible` is the browser's own answer to the question, the same one\n * VMenu asks to decide where a menu's focus lands.\n */\nfunction onFocusIn(event: FocusEvent) {\n  if (!isKeyboardFocus(event.target)) return\n  focused = true\n  show(true)\n}\n\n// Escape hides the tooltip without moving the focus anywhere.\nconst onOpenChange = useEscapeDismiss(() => {\n  hovered = false\n  focused = false\n  hide()\n})\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    Close on pointerdown so a tooltip cannot remain above a dialog or menu opened by its\n    trigger.\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  /*\n   * A wrapper stretched by a parent in `align-items: stretch` would otherwise stretch the\n   * trigger with it, where the inline-block form left it at its natural height.\n   */\n  .v-tooltip {\n    display: inline-flex;\n    align-items: center;\n    anchor-name: --tooltip-anchor;\n    /*\n     * Confining the name to this subtree is indispensable: a visible panel moves to the top\n     * layer, where anchor resolution treats it as coming after the whole document, so without\n     * it every tooltip would attach to the last wrapper carrying this name.\n     */\n    anchor-scope: --tooltip-anchor;\n  }\n\n  /*\n   * Compound the panel classes so chrome overrides remain independent of VPopover stylesheet\n   * order, including if bare changes.\n   */\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  /* An 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,74 +1,76 @@
 import e from "../VPopover/VPopover.js";
-import { useTimer as t } from "../../composables/useTimer.js";
-import { isKeyboardFocus as n } from "../../utils/focus.js";
-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";
+import { isKeyboardFocus as t } from "../../utils/focus.js";
+import { useTimer as n } from "../../composables/useTimer.js";
+import { useEscapeDismiss as r } from "../../composables/useEscapeDismiss.js";
+import { computed as i, createElementBlock as a, createTextVNode as o, createVNode as s, defineComponent 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 g = 100, _ = /*@__PURE__*/ s({
+var g = /*@__PURE__*/ c({
 	__name: "VTooltip",
 	props: {
 		text: { default: void 0 },
 		placement: { default: "top" },
-		delay: { default: 300 }
+		openDelay: { default: 300 },
+		closeDelay: { default: 100 }
 	},
-	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);
+	setup(c, { expose: g }) {
+		let _ = c, v = m(), y = u(null), b = n(), x = !1, S = !1;
+		function C(e = !1) {
+			b.start(() => y.value?.show(), e ? 0 : _.openDelay);
+		}
+		function w() {
+			b.cancel(), y.value?.close();
 		}
 		function T() {
-			x.cancel(), b.value?.close();
+			x = !0, C();
 		}
 		function E() {
-			S = !0, w();
+			x = !1, !S && b.start(() => y.value?.close(), _.closeDelay);
 		}
 		function D() {
-			S = !1, !C && x.start(() => b.value?.close(), g);
+			x = !1, S = !1, w();
 		}
 		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());
+			S = !1, x || w();
 		}
-		let M = !1;
-		function N(e) {
-			e !== M && (M = e, e ? document.addEventListener("keydown", j) : document.removeEventListener("keydown", j));
+		function k(e) {
+			t(e.target) && (S = !0, C(!0));
 		}
-		return c(() => N(!1)), _({
-			show: () => w(!0),
-			close: T,
-			el: r(() => b.value?.el ?? null)
-		}), (t, n) => (l(), i("span", {
+		let A = r(() => {
+			x = !1, S = !1, w();
+		});
+		return g({
+			show: () => C(!0),
+			close: w,
+			el: i(() => y.value?.el ?? null)
+		}), (t, n) => (l(), a("span", {
 			class: "v-tooltip",
-			onPointerenter: E,
-			onPointerleave: D,
-			onPointerdown: O,
-			onFocusin: A,
-			onFocusout: k
-		}, [d(t.$slots, "default", { triggerProps: { "aria-describedby": p(y) } }), o(e, {
-			id: p(y),
+			onPointerenter: T,
+			onPointerleave: E,
+			onPointerdown: D,
+			onFocusin: k,
+			onFocusout: O
+		}, [d(t.$slots, "default", { triggerProps: { "aria-describedby": p(v) } }), s(e, {
+			id: p(v),
 			ref_key: "popoverRef",
-			ref: b,
+			ref: y,
 			mode: "manual",
 			anchor: "--tooltip-anchor",
-			placement: s.placement,
+			placement: c.placement,
 			bare: "",
 			role: "tooltip",
 			class: "v-tooltip-panel",
-			"onUpdate:open": N
+			"onUpdate:open": p(A)
 		}, {
-			default: h(() => [d(t.$slots, "content", {}, () => [a(f(s.text), 1)])]),
+			default: h(() => [d(t.$slots, "content", {}, () => [o(f(c.text), 1)])]),
 			_: 3
-		}, 8, ["id", "placement"])], 32));
+		}, 8, [
+			"id",
+			"placement",
+			"onUpdate:open"
+		])], 32));
 	}
 });
 //#endregion
-export { _ as default };
+export { g 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 * Use a manual VPopover because tooltip hover, focus, delay and Escape policies differ from\n * native light dismissal. Pointer movement may require keeping the bubble open.\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  /** How long the pointer must rest on the element before the tooltip appears, in milliseconds. */\n  delay?: number\n}\n\nconst props = withDefaults(defineProps<TooltipProps>(), {\n  text: undefined,\n  placement: 'top',\n  delay: 300,\n})\n\ndefineSlots<{\n  /** The element the tooltip describes. */\n  default(props: { triggerProps: TooltipTriggerProps }): unknown\n  /** Content richer than a plain string: formatting, a keyboard shortcut, an icon. */\n  content?(): unknown\n}>()\n\nconst tooltipId = useId()\n// @a11y\n/*\n * Keyboard focus has to open it synchronously, and a model would go through VPopover's watcher,\n * hence through a tick. There is nothing lost either way: a tooltip publishes no open state\n * anyone needs to read.\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 between\n * the trigger and the bubble, which the margin leaves empty and which no pointer event covers.\n */\nconst LEAVE_GRACE = 100\n\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, and what lets\n  // 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 how\n * it got there. `:focus-visible` is the browser's own answer to the question, the same one\n * VMenu asks to decide where a menu's focus lands.\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\nlet listening = false\nfunction onOpenChange(open: boolean) {\n  if (open === listening) return\n  listening = 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    Close on pointerdown so a tooltip cannot remain above a dialog or menu opened by its\n    trigger.\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  /*\n   * A wrapper stretched by a parent in `align-items: stretch` would otherwise stretch the\n   * trigger with it, where the inline-block form left it at its natural height.\n   */\n  .v-tooltip {\n    display: inline-flex;\n    align-items: center;\n    anchor-name: --tooltip-anchor;\n    /*\n     * Confining the name to this subtree is indispensable: a visible panel moves to the top\n     * layer, where anchor resolution treats it as coming after the whole document, so without\n     * it every tooltip would attach to the last wrapper carrying this name.\n     */\n    anchor-scope: --tooltip-anchor;\n  }\n\n  /*\n   * Compound the panel classes so chrome overrides remain independent of VPopover stylesheet\n   * order, including if bare changes.\n   */\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  /* An 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":";;;;;AA2EA,IAAM,IAAc;;;;;;;;EA9BpB,IAAM,IAAQ,GAaR,IAAY,EAAM,GAOlB,IAAa,EAA0C,IAAI,GAI3D,IAAQ,EAAS,GAQnB,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;EAQA,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,IAAI,IAAY;EAChB,SAAS,EAAa,GAAe;GAC/B,MAAS,MACb,IAAY,GACR,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,mBAQC,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"}
+{"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 * Use a manual VPopover because tooltip hover, focus, delay and Escape policies differ from\n * native light dismissal. Pointer movement may require keeping the bubble open.\n */\n\nimport { computed, ref, useId } from 'vue'\n\nimport VPopover from '../VPopover/VPopover.vue'\n\nimport { useEscapeDismiss } from '../../composables/useEscapeDismiss'\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  /** How long the pointer must rest on the element before the tooltip appears, in milliseconds. */\n  openDelay?: number\n  /**\n   * How long the tooltip stays once the pointer has left both the element and the tooltip, in\n   * milliseconds. It is the time to cross the gap between them.\n   */\n  closeDelay?: number\n}\n\nconst props = withDefaults(defineProps<TooltipProps>(), {\n  text: undefined,\n  placement: 'top',\n  openDelay: 300,\n  closeDelay: 100,\n})\n\ndefineSlots<{\n  /** The element the tooltip describes. */\n  default(props: { triggerProps: TooltipTriggerProps }): unknown\n  /** Content richer than a plain string: formatting, a keyboard shortcut, an icon. */\n  content?(): unknown\n}>()\n\nconst tooltipId = useId()\n// @a11y\n/*\n * Keyboard focus has to open it synchronously, and a model would go through VPopover's watcher,\n * hence through a tick. There is nothing lost either way: a tooltip publishes no open state\n * anyone needs to read.\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\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, and what lets\n  // keyboard focus share this code path without waiting a tick.\n  timer.start(() => popoverRef.value?.show(), immediate ? 0 : props.openDelay)\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(), props.closeDelay)\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 how\n * it got there. `:focus-visible` is the browser's own answer to the question, the same one\n * VMenu asks to decide where a menu's focus lands.\n */\nfunction onFocusIn(event: FocusEvent) {\n  if (!isKeyboardFocus(event.target)) return\n  focused = true\n  show(true)\n}\n\n// Escape hides the tooltip without moving the focus anywhere.\nconst onOpenChange = useEscapeDismiss(() => {\n  hovered = false\n  focused = false\n  hide()\n})\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    Close on pointerdown so a tooltip cannot remain above a dialog or menu opened by its\n    trigger.\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  /*\n   * A wrapper stretched by a parent in `align-items: stretch` would otherwise stretch the\n   * trigger with it, where the inline-block form left it at its natural height.\n   */\n  .v-tooltip {\n    display: inline-flex;\n    align-items: center;\n    anchor-name: --tooltip-anchor;\n    /*\n     * Confining the name to this subtree is indispensable: a visible panel moves to the top\n     * layer, where anchor resolution treats it as coming after the whole document, so without\n     * it every tooltip would attach to the last wrapper carrying this name.\n     */\n    anchor-scope: --tooltip-anchor;\n  }\n\n  /*\n   * Compound the panel classes so chrome overrides remain independent of VPopover stylesheet\n   * order, including if bare changes.\n   */\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  /* An 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":";;;;;;;;;;;;;;;EAmDA,IAAM,IAAQ,GAcR,IAAY,EAAM,GAOlB,IAAa,EAA0C,IAAI,GAI3D,IAAQ,EAAS,GAEnB,IAAU,IACV,IAAU;EAGd,SAAS,EAAK,IAAY,IAAO;GAG/B,EAAM,YAAY,EAAW,OAAO,KAAK,GAAG,IAAY,IAAI,EAAM,SAAS;EAC7E;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,EAAM,UAAU;EAC/D;EAEA,SAAS,IAAgB;GAGvB,AAFA,IAAU,IACV,IAAU,IACV,EAAK;EACP;EAEA,SAAS,IAAa;GAEpB,AADA,IAAU,IACL,KAAS,EAAK;EACrB;EAQA,SAAS,EAAU,GAAmB;GAC/B,EAAgB,EAAM,MAAM,MACjC,IAAU,IACV,EAAK,EAAI;EACX;EAGA,IAAM,IAAe,QAAuB;GAG1C,AAFA,IAAU,IACV,IAAU,IACV,EAAK;EACP,CAAC;SAED,EAAa;GAEX,YAAY,EAAK,EAAI;GAErB,OAAO;GAEP,IAAI,QAAe,EAAW,OAAO,MAAM,IAAI;EACjD,CAAC,mBAQC,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,EAAA,CAAA;;oBAEwB,CAAtC,EAAsC,EAAA,QAAA,WAAA,CAAA,SAAA,CAAA,EAAA,EAAd,EAAA,IAAI,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/VTreeView/VTreeView.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-tree{--tree-indent:calc(var(--vectis-icon-size) + var(--control-gap));font-family:var(--vectis-text-family);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.v-tree-row{--tree-row-radius:min(var(--vectis-radius-interactive), calc(var(--control-height) / 2));align-items:center;gap:var(--control-gap);min-block-size:var(--control-height);padding-block:var(--vectis-space-1);padding-inline:calc(var(--vectis-space-2) + var(--tree-level,0) * var(--tree-indent)) var(--vectis-space-2);border-radius:var(--tree-row-radius);color:var(--vectis-color-text);font-size:var(--control-font-size);font-weight:var(--vectis-text-body-md-weight);line-height:var(--vectis-text-body-md-leading);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;display:flex}.v-tree-row:hover:not([aria-disabled=true]){background:var(--vectis-color-surface-muted)}.v-tree-row:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:calc(-1 * var(--vectis-focus-ring-width))}.v-tree-row:is([aria-selected=true],[data-current]){background:var(--vectis-color-accent-surface);color:var(--vectis-color-accent-text)}.v-tree-row:is([aria-selected=true],[data-current]):hover:not([aria-disabled=true]){background:color-mix(in oklab, var(--vectis-color-accent-surface), var(--vectis-color-accent-text) 8%)}.v-tree-row:is([aria-selected=true],[data-current]) :is(.v-tree-icon,.v-tree-toggle){color:inherit}.v-tree-row[data-current] .v-tree-label{font-weight:var(--vectis-text-label-weight)}.v-tree-toggle{inline-size:var(--vectis-icon-size);block-size:var(--vectis-icon-size);color:var(--vectis-color-text-muted);flex:none;place-items:center;display:inline-grid}.v-tree-chevron{transition:rotate var(--vectis-duration-base) var(--vectis-ease-default)}.v-tree-row[aria-expanded=true] .v-tree-chevron{rotate:90deg}.v-tree-row[aria-expanded=true] .v-tree-chevron:dir(rtl){rotate:-90deg}.v-tree-icon{color:var(--vectis-color-text-muted);flex:none}.v-tree-label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-inline-size:0;overflow:hidden}.v-tree-end{align-items:center;gap:var(--vectis-space-1);color:var(--vectis-color-text-muted);flex:none;display:flex}.v-tree-error{color:var(--vectis-color-danger-text);flex:none}.v-tree-row:is([aria-checked=true],[aria-checked=mixed]) .v-check-mark{background:var(--vectis-color-accent);border-color:var(--vectis-color-accent)}.v-tree-row[aria-checked=true] .v-check-mark-tick,.v-tree-row[aria-checked=mixed] .v-check-mark-dash{opacity:1}.v-tree-row[aria-disabled=true]{color:var(--vectis-color-text-subtle);cursor:not-allowed}.v-tree-row[aria-disabled=true] :is(.v-tree-icon,.v-tree-toggle,.v-tree-end){color:inherit}.v-tree-row[aria-disabled=true] .v-check-mark{background:var(--vectis-color-surface-muted);border-color:var(--vectis-color-border);color:var(--vectis-color-text-subtle)}@media (forced-colors:active){.v-tree-row.v-tree-row:is([aria-selected=true],[data-current]):not([aria-disabled=true]){forced-color-adjust:none;color:highlighttext;background:highlight}.v-tree-row:is([aria-checked=true],[aria-checked=mixed]):not([aria-disabled=true]) .v-check-mark{forced-color-adjust:none;color:highlighttext;background:highlight;border-color:highlight}}@media (prefers-reduced-motion:reduce){.v-tree-chevron{transition:none}}}

package/dist/components/VTreeView/VTreeView.d.ts

@@ -0,0 +1,112 @@
+import { IconSource } from '../VIcon/types.js';
+import { ItemValue } from '../../types.js';
+/** Whether nodes can be selected: not at all, one at a time, or several with checkboxes. */
+export type TreeSelectionMode = 'none' | 'single' | 'multiple';
+/** The height of the rows: 32 or 40 pixels. */
+export type TreeViewSize = 'sm' | 'md';
+/**
+ * What is selected, and its shape follows `selectionMode`: a single value (or `null`) in `single`
+ * mode, an array in `multiple` mode.
+ */
+export type TreeViewModelValue = ItemValue | ItemValue[] | null;
+/** One node of the tree. */
+export interface TreeItem {
+    /** What identifies the node, in the selection and expansion models. Unique across the tree. */
+    value: ItemValue;
+    /** What the row says. It is also what typeahead matches. */
+    label: string;
+    /** An icon before the label: an icon name, or an explicit render. */
+    icon?: IconSource;
+    /** The child nodes, which make this node a branch. */
+    children?: TreeItem[];
+    /**
+     * Marks a branch whose children `loadChildren` fetches on its first expansion. Ignored when
+     * `children` is set or when the tree has no `loadChildren`.
+     */
+    lazy?: boolean;
+    /** Where the node leads, which makes the row a link. */
+    href?: string;
+    /** Marks the node as the page being viewed (`aria-current`). */
+    current?: boolean;
+    /**
+     * Keeps the node focusable, so it is still found, but it cannot be selected, activated, expanded
+     * or collapsed.
+     */
+    disabled?: boolean;
+}
+/** What the `#icon`, `#label` and `#end` slots receive. */
+export interface TreeItemSlotProps {
+    item: TreeItem;
+    /** The depth of the node, from 1. */
+    level: number;
+    /** Whether the node's children are shown. */
+    expanded: boolean;
+}
+interface TreeViewProps {
+    /** The first level of the tree. */
+    items: TreeItem[];
+    /**
+     * Whether nodes can be selected. In `multiple` mode each row has a checkbox, and checking a
+     * branch checks everything under it.
+     */
+    selectionMode?: TreeSelectionMode;
+    /**
+     * Fetches the children of a `lazy` node, on its first expansion. The tree keeps them; a failure
+     * collapses the node again, and the next expansion retries.
+     */
+    loadChildren?: (item: TreeItem) => Promise<TreeItem[]>;
+    /** The height of the rows, 32 or 40 pixels. */
+    size?: TreeViewSize;
+    /** What screen readers announce for the tree. It falls back to the design system dictionary. */
+    label?: string;
+}
+type __VLS_Props = TreeViewProps;
+type __VLS_Slots = {
+    /** Replaces the icon of a node, for instance to show an open folder when it is expanded. */
+    icon?(props: TreeItemSlotProps): unknown;
+    /** Replaces the label of a node. */
+    label?(props: TreeItemSlotProps): unknown;
+    /**
+     * Content at the end of a row: a count, a badge. It must not be focusable: a row is a single
+     * control.
+     */
+    end?(props: TreeItemSlotProps): unknown;
+};
+type __VLS_ModelProps = {
+    /**
+     * What is selected. In `single` mode, a value or `null`; in `multiple` mode, the checked nodes in
+     * tree order, a branch included when everything under it is checked. A value given for a branch
+     * checks its whole subtree. A shape that does not match the mode reads as an empty selection.
+     */
+    modelValue?: TreeViewModelValue;
+    /** The values of the expanded nodes. Left unbound, the tree keeps that state itself. */
+    'expanded'?: ItemValue[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    /** Moves the focus to the tree's tab stop: the last focused node, else the selected or current one. */
+    focus: (options?: FocusOptions) => false | void | undefined;
+    /** The `role="tree"` element, which also receives the consumer's attributes. */
+    el: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: TreeViewModelValue) => any;
+    activate: (item: TreeItem, event: MouseEvent | KeyboardEvent) => any;
+    "update:expanded": (value: ItemValue[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: TreeViewModelValue) => any) | undefined;
+    onActivate?: ((item: TreeItem, event: MouseEvent | KeyboardEvent) => any) | undefined;
+    "onUpdate:expanded"?: ((value: ItemValue[]) => any) | undefined;
+}>, {
+    label: string;
+    size: TreeViewSize;
+    selectionMode: TreeSelectionMode;
+    loadChildren: (item: TreeItem) => Promise<TreeItem[]>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VTreeView/VTreeView.js

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