@ac-design/design-system 2.0.0 → 2.1.0

package/dist/lib/components/AcToaster.vue_vue_type_script_setup_true_lang.js

@@ -1,160 +1,199 @@
 import e from "./AcButton.js";
 import { useToast as t } from "../composables/useToast.js";
 import { Fragment as n, Teleport as r, TransitionGroup as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, nextTick as f, normalizeClass as p, onBeforeUnmount as m, openBlock as h, ref as g, renderList as _, resolveDynamicComponent as v, toDisplayString as y, unref as b, watch as x, withCtx as S } from "vue";
-import { CircleAlert as C, CircleCheck as w, Info as T, TriangleAlert as E, X as D } from "@lucide/vue";
+import { CircleCheck as C, CircleX as w, Info as T, TriangleAlert as E, X as D } from "@lucide/vue";
 //#region src/lib/components/AcToaster.vue?vue&type=script&setup=true&lang.ts
 var O = ["aria-label"], k = {
 	class: "sr-only",
 	role: "status",
 	"aria-live": "polite",
 	"aria-atomic": "true"
-}, A = {
+}, ee = {
 	class: "sr-only",
 	role: "alert",
 	"aria-live": "assertive",
 	"aria-atomic": "true"
-}, j = ["data-tone"], M = { class: "flex min-w-0 flex-1 flex-col gap-0.5" }, N = { class: "text-base font-medium break-words text-heading" }, P = {
+}, te = ["data-tone"], ne = { class: "flex min-w-0 flex-1 flex-col gap-0.5" }, re = { class: "text-base leading-[1.35] font-semibold break-words text-heading" }, ie = {
 	key: 0,
-	class: "text-base break-words text-muted"
-}, F = ["aria-label", "onClick"], I = 3, L = /*@__PURE__*/ d({
+	class: "text-[13px] leading-[1.45] break-words text-muted"
+}, ae = ["aria-label", "onClick"], A = ["data-toast-bar"], j = 3, M = "transition-[opacity,translate] duration-300 ease-[cubic-bezier(0.21,1.02,0.73,1)] motion-reduce:duration-150", N = /*@__PURE__*/ d({
 	__name: "AcToaster",
 	props: {
-		position: { default: "bottom-right" },
+		position: { default: "top-right" },
 		max: { default: 5 },
+		progress: {
+			type: Boolean,
+			default: !1
+		},
 		label: { default: "Notifications" }
 	},
 	setup(d) {
-		let L = d, R = {
+		let N = d, P = {
 			neutral: {
 				iconClass: "",
-				box: "border-border bg-surface"
+				box: "border-border bg-surface",
+				bar: "bg-muted"
 			},
 			success: {
-				icon: w,
+				icon: C,
 				iconClass: "text-success",
-				box: "border-border bg-surface"
+				box: "border-border bg-surface",
+				bar: "bg-success"
 			},
 			error: {
-				icon: C,
+				icon: w,
 				iconClass: "text-danger",
-				box: "border-danger/25 bg-[color-mix(in_srgb,var(--color-danger)_8%,var(--color-surface))]"
+				box: "border-danger/25 bg-[color-mix(in_srgb,var(--color-danger)_8%,var(--color-surface))]",
+				bar: "bg-danger"
 			},
 			warning: {
 				icon: E,
 				iconClass: "text-warning",
-				box: "border-border bg-surface"
+				box: "border-border bg-surface",
+				bar: "bg-warning"
 			},
 			info: {
 				icon: T,
 				iconClass: "text-info",
-				box: "border-border bg-surface"
+				box: "border-border bg-surface",
+				bar: "bg-info"
 			}
-		}, z = {
-			"bottom-right": "bottom-3 sm:bottom-6 sm:right-6",
-			"bottom-center": "bottom-3 sm:bottom-6 sm:left-1/2 sm:-translate-x-1/2",
-			"top-right": "top-3 sm:top-6 sm:right-6",
-			"top-center": "top-3 sm:top-6 sm:left-1/2 sm:-translate-x-1/2"
-		}, { toasts: B, dismiss: V } = t(), H = g(""), U = g(""), W = /* @__PURE__ */ new Map(), G = !1, K = /* @__PURE__ */ new Set(), q = a(() => L.position.startsWith("top")), J = a(() => {
-			let e = B.value.slice(-L.max);
-			return q.value ? [...e].reverse() : e;
-		});
+		}, F = {
+			"top-right": "top-20 sm:right-5",
+			"top-center": "top-20 sm:left-1/2 sm:-translate-x-1/2",
+			"bottom-right": "bottom-5 sm:right-5",
+			"bottom-center": "bottom-5 sm:left-1/2 sm:-translate-x-1/2"
+		}, { toasts: I, dismiss: L } = t(), R = g(null), z = g(""), B = g(""), V = /* @__PURE__ */ new Map(), H = !1, U = /* @__PURE__ */ new Set(), W = a(() => N.position.startsWith("top")), G = a(() => I.value.slice(-N.max)), K = a(() => N.position.endsWith("right") ? "opacity-0 motion-safe:translate-x-[120%]" : W.value ? "opacity-0 motion-safe:-translate-y-2" : "opacity-0 motion-safe:translate-y-2");
+		function q(e) {
+			return e.duration > 0 && (e.progress ?? N.progress);
+		}
+		function J(e) {
+			let t = V.get(e);
+			t && !H && (t.started = Date.now(), t.handle = setTimeout(() => L(e), t.remaining), oe(e));
+		}
 		function Y(e) {
-			let t = W.get(e);
-			t && !G && (t.started = Date.now(), t.handle = setTimeout(() => V(e), t.remaining));
+			let t = V.get(e);
+			t?.handle && (clearTimeout(t.handle), t.handle = void 0, t.remaining -= Date.now() - t.started, t.bar?.pause());
+		}
+		async function oe(e) {
+			await f();
+			let t = V.get(e);
+			if (t?.handle) {
+				if (t.bar) return t.bar.play();
+				t.bar = (R.value?.querySelector(`[data-toast-bar="${CSS.escape(e)}"]`))?.animate([{ transform: "scaleX(1)" }, { transform: "scaleX(0)" }], {
+					duration: t.duration,
+					fill: "forwards"
+				});
+			}
 		}
-		function X(e) {
-			let t = W.get(e);
-			t?.handle && (clearTimeout(t.handle), t.handle = void 0, t.remaining -= Date.now() - t.started);
+		function X(e, t = !1) {
+			Y(e), t && V.get(e)?.bar?.cancel(), V.delete(e);
 		}
 		function Z() {
-			G = !0, W.forEach((e, t) => X(t));
+			H = !0, V.forEach((e, t) => Y(t));
 		}
 		function Q() {
-			G = !1, W.forEach((e, t) => Y(t));
+			H = !1, V.forEach((e, t) => J(t));
 		}
 		function $(e) {
 			e.currentTarget.contains(e.relatedTarget) || Q();
 		}
-		function ee(e) {
+		function se(e) {
 			let t = new Set(e.map((e) => e.id));
-			for (let [e] of W) t.has(e) || (X(e), W.delete(e));
-			for (let t of e) W.get(t.id)?.version !== t.version && (X(t.id), W.delete(t.id), t.duration > 0 && (W.set(t.id, {
+			for (let [e] of V) t.has(e) || X(e);
+			for (let t of e) V.get(t.id)?.version !== t.version && (X(t.id, !0), t.duration > 0 && (V.set(t.id, {
 				version: t.version,
+				duration: t.duration,
 				remaining: t.duration,
 				started: 0
-			}), Y(t.id)));
+			}), J(t.id)));
 		}
-		async function te(e) {
-			let t = e.filter((e) => !K.has(`${e.id}:${e.version}`));
-			if (K = new Set(e.map((e) => `${e.id}:${e.version}`)), !t.length) return;
+		async function ce(e) {
+			let t = e.filter((e) => !U.has(`${e.id}:${e.version}`));
+			if (U = new Set(e.map((e) => `${e.id}:${e.version}`)), !t.length) return;
 			let n = (e) => /[.!?…]$/.test(e.trim()) ? e.trim() : `${e.trim()}.`, r = (e) => e.flatMap((e) => [e.title, e.description ?? ""].filter(Boolean).map(n)).join(" "), i = t.filter((e) => e.tone === "error"), a = t.filter((e) => e.tone !== "error");
-			H.value = "", U.value = "", await f(), a.length && (H.value = r(a)), i.length && (U.value = r(i));
+			z.value = "", B.value = "", await f(), a.length && (z.value = r(a)), i.length && (B.value = r(i));
 		}
-		function ne(e) {
-			e.action?.onClick(), V(e.id);
+		function le(e) {
+			e.action?.onClick(), L(e.id);
 		}
-		return x(J, (e) => {
-			ee(e), te(e);
-		}, { immediate: !0 }), m(() => W.forEach((e) => clearTimeout(e.handle))), (t, a) => (h(), o(r, { to: "body" }, [l("section", {
+		return x(G, (e) => {
+			se(e), ce(e);
+		}, { immediate: !0 }), m(() => V.forEach((e) => {
+			clearTimeout(e.handle), e.bar?.cancel();
+		})), (t, a) => (h(), o(r, { to: "body" }, [l("section", {
+			ref_key: "root",
+			ref: R,
 			"aria-label": d.label,
 			"data-ac-ds": "",
 			"data-testid": "ac-toaster"
 		}, [
-			l("div", k, y(H.value), 1),
-			l("div", A, y(U.value), 1),
+			l("div", k, y(z.value), 1),
+			l("div", ee, y(B.value), 1),
 			u(i, {
 				tag: "ol",
-				class: p(["pointer-events-none fixed inset-x-3 z-[100] flex flex-col gap-3 sm:inset-x-auto sm:w-89", z[d.position]]),
-				"enter-active-class": "transition duration-200 ease-out",
-				"enter-from-class": `opacity-0 ${q.value ? "motion-safe:-translate-y-2" : "motion-safe:translate-y-2"}`,
-				"leave-active-class": "transition duration-150 ease-in",
-				"leave-to-class": "opacity-0 motion-safe:scale-95",
+				class: p(["pointer-events-none fixed inset-x-5 z-[100] flex flex-col gap-3 sm:inset-x-auto sm:w-[384px]", F[d.position]]),
+				"enter-active-class": M,
+				"enter-from-class": K.value,
+				"leave-active-class": M,
+				"leave-to-class": K.value,
 				"move-class": "motion-safe:transition-transform motion-safe:duration-200",
 				onPointerenter: Z,
 				onPointerleave: Q,
 				onFocusin: Z,
 				onFocusout: $
 			}, {
-				default: S(() => [(h(!0), c(n, null, _(J.value, (t, n) => (h(), c("li", {
+				default: S(() => [(h(!0), c(n, null, _(G.value, (t, n) => (h(), c("li", {
 					key: t.id,
-					class: p(["pointer-events-auto relative flex items-start gap-3 overflow-hidden rounded-10 border py-3.5 pl-4 shadow-lg", [
-						R[t.tone].box,
+					class: p(["pointer-events-auto relative flex items-start gap-3 overflow-hidden rounded-10 border py-3.5 pl-4 shadow-md", [
+						P[t.tone].box,
 						t.dismissible ? "pr-10" : "pr-4",
-						(q.value ? n : J.value.length - 1 - n) >= I && "max-sm:hidden"
+						G.value.length - 1 - n >= j && "max-sm:hidden"
 					]]),
 					"data-ac-ds": "",
 					"data-testid": "ac-toast",
 					"data-tone": t.tone
 				}, [
-					R[t.tone].icon ? (h(), o(v(R[t.tone].icon), {
+					P[t.tone].icon ? (h(), o(v(P[t.tone].icon), {
 						key: 0,
-						class: p(["mt-px size-5 shrink-0", R[t.tone].iconClass]),
+						class: p(["mt-px size-5 shrink-0", P[t.tone].iconClass]),
+						"stroke-width": 2.25,
 						"aria-hidden": "true"
 					}, null, 8, ["class"])) : s("", !0),
-					l("div", M, [l("p", N, y(t.title), 1), t.description ? (h(), c("p", P, y(t.description), 1)) : s("", !0)]),
+					l("div", ne, [l("p", re, y(t.title), 1), t.description ? (h(), c("p", ie, y(t.description), 1)) : s("", !0)]),
 					t.action ? (h(), o(e, {
 						key: 1,
 						title: t.action.label,
 						size: "small",
 						color: "white",
 						class: "-my-1 shrink-0",
-						onClick: (e) => ne(t)
+						onClick: (e) => le(t)
 					}, null, 8, ["title", "onClick"])) : s("", !0),
 					t.dismissible ? (h(), c("button", {
 						key: 2,
 						type: "button",
-						class: "absolute top-2 right-2 inline-flex size-6 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+						class: "absolute top-2 right-2 inline-flex size-6 cursor-pointer items-center justify-center rounded-6 text-muted transition-colors hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
 						"aria-label": `Dismiss: ${t.title}`,
-						onClick: (e) => b(V)(t.id)
+						onClick: (e) => b(L)(t.id)
 					}, [u(b(D), {
 						class: "size-3.5",
 						"aria-hidden": "true"
-					})], 8, F)) : s("", !0)
-				], 10, j))), 128))]),
+					})], 8, ae)) : s("", !0),
+					q(t) ? (h(), c("span", {
+						key: 3,
+						"data-toast-bar": t.id,
+						class: p(["absolute bottom-0 left-0 h-0.5 w-full origin-left opacity-70 motion-reduce:hidden", P[t.tone].bar]),
+						"aria-hidden": "true"
+					}, null, 10, A)) : s("", !0)
+				], 10, te))), 128))]),
 				_: 1
-			}, 8, ["class", "enter-from-class"])
+			}, 8, [
+				"class",
+				"enter-from-class",
+				"leave-to-class"
+			])
 		], 8, O)]));
 	}
 });
 //#endregion
-export { L as default };
+export { N as default };

package/dist/lib/components/AcTooltip.vue.d.ts

@@ -1,28 +1,48 @@
+type Side = "top" | "bottom" | "left" | "right";
 export interface Props {
-    /** The hint text, in a dark bubble up to 280px wide. Keep it to a few words; use the `content` slot for richer text. */
+    /** The hint text, in a dark bubble up to `max-width` wide. Keep it to a few words; use the `content` slot for richer text. */
     content?: string;
+    /** Bold first line above `content`, for a hint that needs a heading: "Read-only replica". */
+    title?: string;
     /** Preferred side of the trigger. It flips to the opposite side when there isn't room. */
-    placement?: "top" | "bottom" | "left" | "right";
-    /** Milliseconds to wait on hover before showing. Keyboard focus shows it immediately. */
+    placement?: Side;
+    /** Lines the bubble up with the trigger's start, centre or end. The arrow keeps pointing at the trigger's centre. */
+    align?: "start" | "center" | "end";
+    /** Adds a status icon before the text: `info`, `success`, `warning` or `danger`. */
+    tone?: "neutral" | "info" | "success" | "warning" | "danger";
+    /** Keyboard keys shown as small chips after the text, e.g. `["⌘", "K"]`. */
+    shortcut?: string[];
+    /** Milliseconds to wait on hover before showing. Keyboard focus, and a pointer moving over from another open tooltip, show it at once. */
     delay?: number;
     /** Turns the tooltip off, e.g. while a menu from the same button is open. */
     disabled?: boolean;
+    /** Lets the pointer move onto the bubble without closing it, e.g. to select and copy an ID. */
+    interactive?: boolean;
+    /** Shows the tooltip only when the trigger's text is cut off, for truncated names in tables. */
+    overflowOnly?: boolean;
+    /** Widest the bubble grows before wrapping, as a CSS length. */
+    maxWidth?: string;
 }
-type __VLS_Slots = {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    title: string;
+    disabled: boolean;
+    tone: "neutral" | "info" | "success" | "warning" | "danger";
+    align: "start" | "center" | "end";
+    content: string;
+    placement: Side;
+    shortcut: string[];
+    delay: number;
+    interactive: boolean;
+    overflowOnly: boolean;
+    maxWidth: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     /** The trigger: a button, icon button, link or any focusable element. It gets `aria-describedby`. */
     default?: () => unknown;
     /** Tooltip content instead of the `content` prop. Text only; no links or buttons, since it can't be reached by Tab. */
     content?: () => unknown;
-};
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    disabled: boolean;
-    content: string;
-    placement: "top" | "bottom" | "left" | "right";
-    delay: number;
-}, {}, {}, {}, 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/lib/components/AcTooltip.vue_vue_type_script_setup_true_lang.js

@@ -1,124 +1,238 @@
-import { Teleport as e, Transition as t, computed as n, createBlock as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, nextTick as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, onUpdated as m, openBlock as h, ref as g, renderSlot as _, toDisplayString as v, useId as y, useSlots as b, vShow as x, watch as S, withCtx as C, withDirectives as w } from "vue";
+import { Fragment as e, Teleport as t, Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as ee, createVNode as te, defineComponent as c, nextTick as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, onUpdated as ne, openBlock as m, ref as h, renderList as re, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, useId as y, useSlots as ie, vShow as b, watch as x, withCtx as S, withDirectives as C } from "vue";
+import { CircleAlert as w, CircleCheck as ae, Info as oe, TriangleAlert as se } from "@lucide/vue";
 //#region src/lib/components/AcTooltip.vue?vue&type=script&setup=true&lang.ts
-var T = ["data-side"], E = 8, D = 8, O = /*@__PURE__*/ c({
+var ce = ["data-side"], le = { class: "flex items-start gap-2" }, ue = { class: "min-w-0 flex-1" }, T = {
+	key: 0,
+	class: "font-semibold text-on-tooltip"
+}, de = {
+	key: 1,
+	class: "ml-1 flex shrink-0 items-center gap-0.5 self-center"
+}, E = null, D = 0, fe = 400, O = /*@__PURE__*/ c({
 	__name: "AcTooltip",
 	props: {
 		content: { default: "" },
+		title: { default: "" },
 		placement: { default: "top" },
-		delay: { default: 300 },
+		align: { default: "center" },
+		tone: { default: "neutral" },
+		shortcut: { default: () => [] },
+		delay: { default: 100 },
 		disabled: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		interactive: {
+			type: Boolean,
+			default: !1
+		},
+		overflowOnly: {
+			type: Boolean,
+			default: !1
+		},
+		maxWidth: { default: "280px" }
 	},
 	setup(c) {
-		let O = c, k = b(), A = {
+		let O = c, pe = ie(), k = {
 			top: "bottom",
 			bottom: "top",
 			left: "right",
 			right: "left"
-		}, j = {
+		}, me = {
 			top: "translate-y-1",
 			bottom: "-translate-y-1",
 			left: "translate-x-1",
 			right: "-translate-x-1"
-		}, M = {
-			top: "origin-bottom",
-			bottom: "origin-top",
-			left: "origin-right",
-			right: "origin-left"
-		}, N = `${y()}-tip`, P = g(null), F = g(null), I = g(!1), L = g(O.placement), R = g({
+		}, A = {
+			top: "border-r border-b",
+			bottom: "border-t border-l",
+			left: "border-t border-r",
+			right: "border-b border-l"
+		}, j = {
+			info: {
+				icon: oe,
+				class: "text-info"
+			},
+			success: {
+				icon: ae,
+				class: "text-success"
+			},
+			warning: {
+				icon: se,
+				class: "text-warning"
+			},
+			danger: {
+				icon: w,
+				class: "text-danger"
+			}
+		}, M = `${y()}-tip`, N = h(null), P = h(null), F = h(!1), I = h(O.placement), L = h({
 			top: 0,
-			left: 0
-		}), z, B, V = null, H = n(() => !O.disabled && !!(O.content || k.content));
+			left: 0,
+			arrow: 0
+		}), R, z, B = null, V = r(() => !O.disabled && !!(O.content || O.title || pe.content)), H = r(() => O.tone === "neutral" ? null : j[O.tone]), he = r(() => {
+			let { top: e, left: t, arrow: n } = L.value, r = {
+				top: `${n}px 100%`,
+				bottom: `${n}px 0`,
+				left: `100% ${n}px`,
+				right: `0 ${n}px`
+			}[I.value];
+			return {
+				top: `${e}px`,
+				left: `${t}px`,
+				maxWidth: O.maxWidth,
+				transformOrigin: r
+			};
+		}), ge = r(() => {
+			let e = `${L.value.arrow - 5}px`, t = "-6px";
+			return {
+				top: {
+					left: e,
+					bottom: t
+				},
+				bottom: {
+					left: e,
+					top: t
+				},
+				left: {
+					top: e,
+					right: t
+				},
+				right: {
+					top: e,
+					left: t
+				}
+			}[I.value];
+		});
 		function U() {
-			let e = P.value;
+			let e = N.value;
 			return e?.querySelector("button, a[href], input, select, textarea, [tabindex]") ?? e?.firstElementChild ?? null;
 		}
 		function W() {
 			let e = U();
-			if (V && V !== e && G(V), V = e, !e) return;
-			let t = (e.getAttribute("aria-describedby") ?? "").split(" ").filter((e) => e && e !== N);
-			H.value && t.push(N), t.length ? e.setAttribute("aria-describedby", t.join(" ")) : e.removeAttribute("aria-describedby");
+			if (B && B !== e && G(B), B = e, !e) return;
+			let t = (e.getAttribute("aria-describedby") ?? "").split(" ").filter((e) => e && e !== M);
+			V.value && t.push(M), t.length ? e.setAttribute("aria-describedby", t.join(" ")) : e.removeAttribute("aria-describedby");
 		}
 		function G(e) {
-			let t = (e.getAttribute("aria-describedby") ?? "").split(" ").filter((e) => e && e !== N);
+			let t = (e.getAttribute("aria-describedby") ?? "").split(" ").filter((e) => e && e !== M);
 			t.length ? e.setAttribute("aria-describedby", t.join(" ")) : e.removeAttribute("aria-describedby");
 		}
+		function _e() {
+			let e = N.value;
+			return e ? [e, ...e.querySelectorAll("*")].some((e) => e.scrollWidth > e.clientWidth + 1) : !1;
+		}
+		async function ve() {
+			(!O.overflowOnly || _e()) && (E && E !== q && E(), E = q, F.value = !0, await l(), ye());
+		}
 		function K(e) {
-			clearTimeout(B), H.value && !I.value && (clearTimeout(z), z = setTimeout(async () => {
-				I.value = !0, await l(), Y();
-			}, e));
-		}
-		function q(e = 0) {
-			clearTimeout(z), clearTimeout(B), e ? B = setTimeout(() => I.value = !1, e) : I.value = !1;
-		}
-		function J(e, t, n, r) {
-			return e === "top" ? t.top - E - r >= D : e === "bottom" ? t.bottom + E + r <= window.innerHeight - D : e === "left" ? t.left - E - n >= D : t.right + E + n <= window.innerWidth - D;
-		}
-		function Y() {
-			let e = U() ?? P.value;
-			if (!e || !F.value) return;
-			let t = e.getBoundingClientRect(), { offsetWidth: n, offsetHeight: r } = F.value, i = O.placement, a = J(i, t, n, r) || !J(A[i], t, n, r) ? i : A[i], o = (e, t) => Math.max(D, Math.min(e, t - D));
-			L.value = a, R.value = a === "top" || a === "bottom" ? {
-				top: a === "top" ? t.top - E - r : t.bottom + E,
-				left: o(t.left + t.width / 2 - n / 2, window.innerWidth - n)
-			} : {
-				top: o(t.top + t.height / 2 - r / 2, window.innerHeight - r),
-				left: a === "left" ? t.left - E - n : t.right + E
-			};
+			if (clearTimeout(z), !V.value || F.value) return;
+			clearTimeout(R);
+			let t = E !== null || Date.now() - D < fe;
+			R = setTimeout(ve, t ? 0 : e);
+		}
+		function q() {
+			clearTimeout(R), clearTimeout(z), F.value && (F.value = !1, D = Date.now(), E === q && (E = null));
+		}
+		function J(e = 0) {
+			clearTimeout(R), clearTimeout(z), e ? z = setTimeout(q, e) : q();
+		}
+		function Y(e, t, n, r) {
+			return e === "top" ? t.top - 8 - r >= 8 : e === "bottom" ? t.bottom + 8 + r <= window.innerHeight - 8 : e === "left" ? t.left - 8 - n >= 8 : t.right + 8 + n <= window.innerWidth - 8;
+		}
+		function X(e, t, n) {
+			return O.align === "start" ? e : O.align === "end" ? e + t - n : e + (t - n) / 2;
 		}
-		function X(e) {
+		function Z(e, t, n) {
+			return Math.min(Math.max(e, t), Math.max(t, n));
+		}
+		function ye() {
+			let e = U() ?? N.value;
+			if (!e || !P.value) return;
+			let t = e.getBoundingClientRect(), { offsetWidth: n, offsetHeight: r } = P.value, i = O.placement, a = Y(i, t, n, r) || !Y(k[i], t, n, r) ? i : k[i];
+			if (I.value = a, a === "top" || a === "bottom") {
+				let e = Z(X(t.left, t.width, n), 8, window.innerWidth - 8 - n), i = Z(t.left + t.width / 2 - e, 12, n - 12);
+				L.value = {
+					top: Math.round(a === "top" ? t.top - 8 - r : t.bottom + 8),
+					left: Math.round(e),
+					arrow: i
+				};
+			} else {
+				let e = Z(X(t.top, t.height, r), 8, window.innerHeight - 8 - r), i = Z(t.top + t.height / 2 - e, 12, r - 12);
+				L.value = {
+					top: Math.round(e),
+					left: Math.round(a === "left" ? t.left - 8 - n : t.right + 8),
+					arrow: i
+				};
+			}
+		}
+		function be(e) {
 			e.pointerType !== "touch" && K(O.delay);
 		}
-		function Z(e) {
+		function xe(e) {
 			e.target.matches(":focus-visible") && K(0);
 		}
+		function Se() {
+			O.interactive && clearTimeout(z);
+		}
+		function Ce() {
+			O.interactive && J(120);
+		}
 		function Q() {
-			q();
+			J();
 		}
 		function $(e) {
-			e.key === "Escape" && I.value && q();
+			e.key === "Escape" && F.value && J();
 		}
-		return S(I, (e) => {
+		return x(F, (e) => {
 			e ? (document.addEventListener("keydown", $), window.addEventListener("scroll", Q, !0)) : (document.removeEventListener("keydown", $), window.removeEventListener("scroll", Q, !0));
-		}), S(H, (e) => {
-			W(), e || q();
-		}), p(W), m(W), f(() => {
-			q(), document.removeEventListener("keydown", $), window.removeEventListener("scroll", Q, !0), V && G(V);
-		}), (n, l) => (h(), i("span", {
+		}), x(V, (e) => {
+			W(), e || J();
+		}), p(W), ne(W), f(() => {
+			J(), E === q && (E = null), document.removeEventListener("keydown", $), window.removeEventListener("scroll", Q, !0), B && G(B);
+		}), (r, l) => (m(), o("span", {
 			ref_key: "root",
-			ref: P,
+			ref: N,
 			class: "inline-flex max-w-full",
 			"data-ac-ds": "",
 			"data-testid": "ac-tooltip",
-			onPointerenter: X,
-			onPointerleave: l[2] ||= (e) => q(100),
-			onPointerdown: l[3] ||= (e) => q(),
-			onFocusin: Z,
-			onFocusout: l[4] ||= (e) => q()
-		}, [_(n.$slots, "default"), (h(), r(e, { to: "body" }, [s(t, {
+			onPointerenter: be,
+			onPointerleave: l[0] ||= (e) => J(120),
+			onPointerdown: l[1] ||= (e) => J(),
+			onFocusin: xe,
+			onFocusout: l[2] ||= (e) => J()
+		}, [g(r.$slots, "default"), (m(), i(t, { to: "body" }, [te(n, {
 			"enter-active-class": "transition-[opacity,scale,translate] duration-150 ease-out motion-reduce:transition-none",
-			"enter-from-class": `opacity-0 scale-95 ${j[L.value ?? "top"]}`,
+			"enter-from-class": `opacity-0 scale-95 ${me[I.value]}`,
 			"leave-active-class": "transition-[opacity,scale] duration-100 ease-in motion-reduce:transition-none",
 			"leave-to-class": "opacity-0 scale-95"
 		}, {
-			default: C(() => [w(a("div", {
-				id: N,
+			default: S(() => [C(s("div", {
+				id: M,
 				ref_key: "tip",
-				ref: F,
+				ref: P,
 				role: "tooltip",
-				class: u(["fixed z-[100] w-max max-w-[280px] rounded-10 border border-white/10 bg-tooltip px-2.5 py-1.5 text-xs leading-relaxed break-words whitespace-normal text-on-tooltip shadow-lg shadow-black/25", M[L.value ?? "top"]]),
-				"data-side": L.value,
-				style: d({
-					top: `${R.value.top}px`,
-					left: `${R.value.left}px`
-				}),
+				class: u(["fixed z-[100] w-max rounded-10 border border-white/10 bg-tooltip text-xs leading-relaxed break-words whitespace-normal text-on-tooltip shadow-lg shadow-black/25", [c.title ? "px-3 py-2" : "px-2.5 py-1.5", c.interactive ? "pointer-events-auto" : "pointer-events-none"]]),
+				"data-side": I.value,
+				style: d(he.value),
 				"data-ac-ds": "",
 				"data-testid": "ac-tooltip-panel",
-				onPointerenter: l[0] ||= (e) => K(0),
-				onPointerleave: l[1] ||= (e) => q(100)
-			}, [_(n.$slots, "content", {}, () => [o(v(c.content), 1)])], 46, T), [[x, I.value]])]),
+				onPointerenter: Se,
+				onPointerleave: Ce
+			}, [s("div", le, [
+				H.value ? (m(), i(_(H.value.icon), {
+					key: 0,
+					class: u(["mt-0.5 size-3.5 shrink-0", H.value.class]),
+					"aria-hidden": "true"
+				}, null, 8, ["class"])) : a("", !0),
+				s("div", ue, [c.title ? (m(), o("p", T, v(c.title), 1)) : a("", !0), s("div", { class: u(c.title && "mt-0.5 text-on-tooltip/75") }, [g(r.$slots, "content", {}, () => [ee(v(c.content), 1)])], 2)]),
+				c.shortcut.length ? (m(), o("span", de, [(m(!0), o(e, null, re(c.shortcut, (e) => (m(), o("kbd", {
+					key: e,
+					class: "min-w-4 rounded-4 border border-white/15 bg-white/10 px-1 text-center font-mono text-xm leading-4 text-on-tooltip/75"
+				}, v(e), 1))), 128))])) : a("", !0)
+			]), s("span", {
+				"aria-hidden": "true",
+				class: u(["absolute size-2.5 rotate-45 border-white/10 bg-tooltip", A[I.value]]),
+				style: d(ge.value)
+			}, null, 6)], 46, ce), [[b, F.value]])]),
 			_: 3
 		}, 8, ["enter-from-class"])]))], 544));
 	}