@vielzeug/refine 1.1.1

package/dist/toast.js

@@ -0,0 +1,316 @@
+import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
+import { warn as t } from "./_dev.js";
+import { createSwipeControl as n } from "./headless/swipe.js";
+import r from "./feedback/toast/toast.css?inline.js";
+import { define as i, html as a, prop as o, ref as s } from "@vielzeug/ore";
+import { computed as c, signal as l, watch as u } from "@vielzeug/ripple";
+import { uuid as d } from "@vielzeug/arsenal";
+//#region src/feedback/toast/toast.ts
+var f = 300;
+function p(e, t) {
+	return e.actions?.length ? a`
+    <div slot="actions" class="toast-actions">
+      ${e.actions.map((n) => a`
+          <ore-button
+            size="sm"
+            color=${n.color || e.color || "primary"}
+            variant=${n.variant || "solid"}
+            @click=${() => {
+		n.onClick?.(), t();
+	}}
+            >${n.label}</ore-button
+          >
+        `)}
+    </div>
+  ` : "";
+}
+var m = "ore-toast";
+i(m, {
+	props: {
+		max: o.number(5),
+		position: o.oneOf([
+			"top-left",
+			"top-center",
+			"top-right",
+			"bottom-left",
+			"bottom-center",
+			"bottom-right"
+		], "bottom-right")
+	},
+	setup(e, { el: t, emit: r, onCleanup: i, onMounted: o }) {
+		let m = l([]), h = s(), g = /* @__PURE__ */ new Map(), _ = l(!1), v = l(!1), y = c(() => _.value || v.value), b = (e, t) => {
+			m.value = m.value.map((n) => n.id === e ? {
+				...n,
+				...t
+			} : n);
+		}, x = (e) => m.value.find((t) => t.id === e), S = (e) => (e instanceof Event ? e.currentTarget : e).querySelector(".toast-inner"), C = (e) => (e.timer && clearTimeout(e.timer.timeoutId), {
+			...e,
+			timer: null
+		}), w = (e, t) => {
+			if (t <= 0) return;
+			let n = setTimeout(() => A(e), t);
+			b(e, { timer: {
+				remaining: t,
+				startedAt: Date.now(),
+				timeoutId: n
+			} });
+		}, T = () => {
+			m.value = m.value.map((e) => e.timer ? (clearTimeout(e.timer.timeoutId), {
+				...e,
+				timer: {
+					...e.timer,
+					remaining: Math.max(0, e.timer.remaining - (Date.now() - e.timer.startedAt))
+				}
+			}) : e);
+		}, E = () => {
+			for (let e of m.value) {
+				if (!e.timer || e.timer.remaining <= 0) continue;
+				let t = setTimeout(() => A(e.id), e.timer.remaining);
+				b(e.id, { timer: {
+					...e.timer,
+					startedAt: Date.now(),
+					timeoutId: t
+				} });
+			}
+		};
+		u(y, (e) => {
+			e ? T() : E();
+		});
+		let D = (e) => {
+			let t = ({ event: e }) => {
+				let t = S(e);
+				t && (t.style.transition = "", t.style.transform = "", t.style.opacity = "");
+			};
+			return n({
+				axis: () => "x",
+				captureTarget: () => null,
+				disabled: c(() => !(x(e)?.dismissible ?? !0)),
+				onCancel: t,
+				onCommit: ({ distance: t, event: n }) => {
+					let r = S(n);
+					if (!r) return;
+					let i = t >= 0 ? 1 : -1, a = window.matchMedia("(prefers-reduced-motion: reduce)").matches, o = () => O(e);
+					if (a) {
+						r.style.opacity = "0", o();
+						return;
+					}
+					r.style.transition = "transform 0.22s ease-out, opacity 0.22s ease-out", r.offsetWidth, r.style.transform = `translateX(${i * 120}%)`, r.style.opacity = "0";
+					let s = (e) => {
+						e.target !== r || e.propertyName !== "transform" || (r.removeEventListener("transitionend", s), clearTimeout(c), o());
+					}, c = setTimeout(() => {
+						r.removeEventListener("transitionend", s), o();
+					}, 300);
+					r.addEventListener("transitionend", s);
+				},
+				onMove: ({ distance: e, event: t }) => {
+					let n = S(t);
+					n && (n.style.transition = "none", n.style.transform = `translateX(${e}px)`, n.style.opacity = String(Math.max(0, 1 - Math.abs(e) / 200)));
+				},
+				onRelease: t
+			});
+		}, O = (e) => {
+			let t = x(e);
+			t?.timer && clearTimeout(t.timer.timeoutId), g.delete(e), m.value = m.value.filter((t) => t.id !== e), t?.onDismiss?.(), r("dismiss", { id: e });
+		}, k = (t) => {
+			let n = t.id || d(), i = e.max?.value ?? 5, a = m.value.filter((e) => e.phase !== "exiting"), o = a.length - (i - 1);
+			if (o > 0) for (let e of a.slice(0, o)) A(e.id);
+			let s = {
+				dismissible: !0,
+				duration: 5e3,
+				...t,
+				id: n,
+				phase: "entering",
+				timer: null
+			};
+			return g.set(n, D(n)), m.value = [...m.value, s], r("add", { id: n }), requestAnimationFrame(() => {
+				x(n)?.phase === "entering" && b(n, { phase: "active" });
+			}), s.duration > 0 && w(n, s.duration), n;
+		}, A = (e) => {
+			let t = x(e);
+			if (!t || t.phase === "exiting") return;
+			b(e, {
+				...C(t),
+				phase: "exiting"
+			});
+			let n = h.value?.querySelector(`[data-toast-id="${e}"] .toast-inner`);
+			n?.offsetHeight;
+			let r = !1, i = () => {
+				r || (r = !0, O(e));
+			}, a = n ? parseFloat(getComputedStyle(n).transitionDuration) * 1e3 : NaN, o = setTimeout(i, (Number.isFinite(a) && a > 0 ? a : f) + 50), s = (t) => {
+				t.target?.closest?.(`[data-toast-id="${e}"]`) && (h.value?.removeEventListener("transitionend", s), clearTimeout(o), i());
+			};
+			h.value?.addEventListener("transitionend", s);
+		}, j = (e, t) => {
+			let n = x(e);
+			if (!n) return;
+			let r = t.duration === void 0 ? n : C(n);
+			b(e, {
+				...r,
+				...t,
+				id: e
+			}), t.duration !== void 0 && t.duration > 0 && w(e, t.duration);
+		}, M = () => {
+			for (let e of m.value) e.phase !== "exiting" && A(e.id);
+		}, N = (e) => e.urgency ?? (e.color === "error" ? "assertive" : "polite"), P = c(() => m.value.filter((e) => N(e) === "polite")), F = c(() => m.value.filter((e) => N(e) === "assertive"));
+		i(() => {
+			for (let e of m.value) e.timer && clearTimeout(e.timer.timeoutId);
+			g.clear();
+		});
+		let I = (e) => {
+			let t = () => A(e.id);
+			return a`
+        <div
+          class="toast-wrapper"
+          data-toast-id=${e.id}
+          part="toast-wrapper"
+          @pointerdown=${(t) => g.get(e.id)?.handlePointerDown(t)}
+          @pointermove=${(t) => g.get(e.id)?.handlePointerMove(t)}
+          @pointerup=${(t) => g.get(e.id)?.handlePointerUp(t)}
+          @pointercancel=${(t) => g.get(e.id)?.handlePointerCancel(t)}>
+          <div class="${() => `toast-inner${e.phase === "active" ? "" : ` ${e.phase}`}`}" part="toast-inner">
+            <ore-alert
+              color=${e.color || (e.urgency === "assertive" ? "error" : "primary")}
+              variant=${e.variant || "solid"}
+              size=${e.size || "md"}
+              rounded=${e.rounded || "md"}
+              ?horizontal=${e.horizontal}
+              heading=${e.heading || ""}
+              ?dismissible=${e.dismissible !== !1}
+              @dismiss=${t}>
+              ${e.meta ? a`<span slot="meta">${e.meta}</span>` : ""} ${e.message}
+              ${p(e, t)}
+            </ore-alert>
+          </div>
+        </div>
+      `;
+		};
+		return o(() => {
+			let e = t;
+			e.add = k, e.clear = M, e.dismiss = A, e.update = j;
+		}), a`
+      <div
+        class="toast-container"
+        ref=${h}
+        @pointerenter=${() => {
+			_.value = !0, t.classList.add("hovered");
+		}}
+        @pointerleave=${() => {
+			_.value = !1, t.classList.remove("hovered");
+		}}
+        @focusin=${() => {
+			v.value = !0;
+		}}
+        @focusout=${() => {
+			v.value = !1;
+		}}
+        part="container">
+        <!-- Polite live region: normal informational toasts -->
+        <div
+          role="region"
+          aria-live="polite"
+          aria-relevant="additions removals"
+          aria-atomic="false"
+          aria-label="Notifications"
+          class="toast-live-region">
+          ${() => P.value.map(I)}
+        </div>
+        <!-- Assertive live region: critical errors that interrupt immediately -->
+        <div
+          role="region"
+          aria-live="assertive"
+          aria-relevant="additions removals"
+          aria-atomic="false"
+          aria-label="Critical notifications"
+          class="toast-live-region">
+          ${() => F.value.map(I)}
+        </div>
+        <slot></slot>
+      </div>
+    `;
+	},
+	styles: [e, r]
+});
+function h(e = document.body) {
+	let n = null, r = !1, i = null, a = () => n?.isConnected ? n : (n = (e instanceof Element, e).querySelector("ore-toast"), n || (n = document.createElement("ore-toast"), i &&= (i.position && n.setAttribute("position", i.position), i.max != null && n.setAttribute("max", String(i.max)), null), e.appendChild(n)), r = !0, n), o = {
+		add(e) {
+			return a().add(e);
+		},
+		clear() {
+			a().clear();
+		},
+		configure(e) {
+			if (r) {
+				t("toast.configure() called after the container was already created; options ignored.");
+				return;
+			}
+			i = {
+				...i,
+				...e
+			};
+		},
+		dismiss(e) {
+			a().dismiss(e);
+		},
+		error(e, t) {
+			return o.add({
+				color: "error",
+				...t,
+				message: e
+			});
+		},
+		info(e, t) {
+			return o.add({
+				color: "info",
+				...t,
+				message: e
+			});
+		},
+		async promise(e, t) {
+			let n = o.add({
+				color: "primary",
+				dismissible: !1,
+				duration: 0,
+				message: t.loading
+			});
+			try {
+				let r = await e;
+				return o.update(n, {
+					color: "success",
+					dismissible: !0,
+					duration: 5e3,
+					message: typeof t.success == "function" ? t.success(r) : t.success
+				}), r;
+			} catch (e) {
+				throw o.update(n, {
+					color: "error",
+					dismissible: !0,
+					duration: 5e3,
+					message: typeof t.error == "function" ? t.error(e) : t.error
+				}), e;
+			}
+		},
+		success(e, t) {
+			return o.add({
+				color: "success",
+				...t,
+				message: e
+			});
+		},
+		update(e, t) {
+			a().update(e, t);
+		},
+		warning(e, t) {
+			return o.add({
+				color: "warning",
+				...t,
+				message: e
+			});
+		}
+	};
+	return o;
+}
+var g = h();
+//#endregion
+export { m as TOAST_TAG, h as createToastService, g as toast };
+
+//# sourceMappingURL=toast.js.map

package/dist/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","names":[],"sources":["../src/feedback/toast/toast.ts"],"sourcesContent":["import { uuid } from '@vielzeug/arsenal';\nimport { define, html, prop, ref } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { SwipeControl } from '../../headless';\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\n\nimport { warn } from '../../_dev';\nimport { createSwipeControl } from '../../headless';\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './toast.css?inline';\n\n// ---------------------------------------------------------------------------\n// NOTE: Architecture\n//\n// Each toast has two DOM layers:\n//   .toast-wrapper  — layout / stacking / grid positioning (no animation)\n//   .toast-inner    — animation target (opacity fade in/out)\n//\n// This separation means stacking rules (nth-last-child, hover) and animation\n// rules never fight over the same element. No !important needed anywhere.\n//\n// State: a single signal<ToastEntry[]> owns all per-toast state (data, phase,\n// timer). There are no parallel Sets or Maps tracking lifecycle separately.\n//\n// Exit animation: .toast-inner.exiting fades opacity → 0.\n// The wrapper stays in-flow during the fade so the grid doesn't snap shut.\n// After transitionend (or TOAST_EXIT_MS fallback), finalize() removes the\n// toast from the entries array which removes the wrapper from the DOM.\n//\n// Swipe gesture animates .toast-inner (not .toast-wrapper) to avoid\n// polluting the wrapper's transition state used by the exit animation.\n// Swipe commit calls finalizeRemoval() directly — it owns the animation,\n// so the normal removeToast() path is not involved.\n//\n// Close button: owned by the toast template, not ore-alert. ore-alert renders\n// content only. This keeps ore-alert a pure presentational component with no\n// animation lifecycle coupling.\n//\n// Max eviction: when adding would exceed max, oldest non-exiting toasts are\n// dismissed via removeToast() — animated, with onDismiss callback + event.\n//\n// Dismiss queue: removed. Each toast exits independently in parallel.\n// ---------------------------------------------------------------------------\n\n/** Duration (ms) of the CSS opacity exit transition on .toast-inner.\n * Must match the value in toast.css: `transition: opacity 300ms`.  */\nconst TOAST_EXIT_MS = 300;\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport type OreToastEvents = {\n  add: { id: string };\n  dismiss: { id: string };\n};\n\nexport type OreToastProps = {\n  max?: number;\n  position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';\n};\n\n/** Individual toast notification */\nexport type ToastItem = {\n  actions?: Array<{\n    color?: ThemeColor;\n    label: string;\n    onClick?: () => void;\n    variant?: 'solid' | 'flat' | 'bordered';\n  }>;\n  color?: ThemeColor;\n  dismissible?: boolean;\n  /** Auto-dismiss delay in ms. Set to 0 for persistent toasts (default: 5000) */\n  duration?: number;\n  heading?: string;\n  /** Show message and actions side-by-side (horizontal layout) */\n  horizontal?: boolean;\n  /** Auto-generated via crypto.randomUUID() if omitted */\n  id?: string;\n  message: string;\n  /** Metadata text (e.g. timestamp) shown in the alert meta slot */\n  meta?: string;\n  /** Called after the toast is fully dismissed and removed */\n  onDismiss?: () => void;\n  rounded?: RoundedSize | '';\n  size?: ComponentSize;\n  /**\n   * Urgency level for screen readers.\n   * - `'polite'` (default): announced after the user finishes their current action.\n   * - `'assertive'`: interrupts the user immediately. Use only for critical errors.\n   */\n  urgency?: 'polite' | 'assertive';\n  variant?: 'solid' | 'flat' | 'bordered';\n};\n\ntype ToastPhase = 'entering' | 'active' | 'exiting';\n\ntype ToastTimer = {\n  remaining: number;\n  startedAt: number;\n  timeoutId: ReturnType<typeof setTimeout>;\n};\n\n/** Internal: a ToastItem that has been normalized and given a lifecycle phase. */\ntype ToastEntry = Required<Pick<ToastItem, 'dismissible' | 'duration' | 'id'>> &\n  Omit<ToastItem, 'dismissible' | 'duration' | 'id'> & {\n    id: string;\n    phase: ToastPhase;\n    timer: ToastTimer | null;\n  };\n\n/** Public API of the ore-toast element */\nexport interface ToastElement extends HTMLElement {\n  add: (toast: ToastItem) => string;\n  clear: () => void;\n  dismiss: (id: string) => void;\n  update: (id: string, updates: Partial<ToastItem>) => void;\n}\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\n/**\n * An accessible toast stack with polite/assertive live regions and hover expansion.\n * Stacks up to 3 notifications with a 3D effect.\n *\n * @element ore-toast\n *\n * @attr {string} position - 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n * @attr {number} max - Max toasts in DOM at once (default: 5)\n *\n * @fires add - When a toast is added `{ id }`\n * @fires dismiss - When a toast is dismissed `{ id }`\n *\n * @slot - Manually placed `ore-alert` elements\n *\n * @cssprop --toast-position - Position type (default: fixed)\n * @cssprop --toast-inset-top - Top inset\n * @cssprop --toast-inset-bottom - Bottom inset\n * @cssprop --toast-inset-left - Left inset\n * @cssprop --toast-inset-right - Right inset\n * @cssprop --toast-z-index - Z-index (default: 9999)\n * @cssprop --toast-max-width - Max width (default: 400px)\n * @cssprop --toast-gap - Gap between expanded toasts (default: 0.5rem)\n * @cssprop --toast-exit-duration - Exit animation duration (default: 300ms)\n *\n * @example\n * ```html\n * <!-- Declarative: place once in HTML -->\n * <ore-toast position=\"bottom-right\"></ore-toast>\n *\n * <!-- Programmatic: use the singleton service -->\n * <script type=\"module\">\n *   import { toast } from '@vielzeug/refine';\n *   toast.success('Changes saved!');\n * </script>\n * ```\n */\n\n/** Renders the action buttons for a toast entry. */\nfunction renderToastActions(entry: ToastEntry, onDismiss: () => void) {\n  if (!entry.actions?.length) return '';\n\n  return html`\n    <div slot=\"actions\" class=\"toast-actions\">\n      ${entry.actions.map(\n        (action) => html`\n          <ore-button\n            size=\"sm\"\n            color=${action.color || entry.color || 'primary'}\n            variant=${action.variant || 'solid'}\n            @click=${() => {\n              action.onClick?.();\n              onDismiss();\n            }}\n            >${action.label}</ore-button\n          >\n        `,\n      )}\n    </div>\n  `;\n}\n\nexport const TOAST_TAG = 'ore-toast' as const;\ndefine<OreToastProps, OreToastEvents>(TOAST_TAG, {\n  props: {\n    max: prop.number(5),\n    position: prop.oneOf(\n      ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'] as const,\n      'bottom-right',\n    ),\n  },\n  setup(props, { el, emit, onCleanup, onMounted }) {\n    // Single source of truth for all toast state.\n    const entries = signal<ToastEntry[]>([]);\n    const containerRef = ref<HTMLDivElement>();\n\n    // Per-toast swipe-to-dismiss controls (keyed by id, cleaned up in finalizeRemoval).\n    const swipeControls = new Map<string, SwipeControl>();\n\n    // Pause state is reactive so computed derivations and watches can observe it.\n    const hoverPaused = signal(false);\n    const focusPaused = signal(false);\n    const paused = computed(() => hoverPaused.value || focusPaused.value);\n\n    // ── Helpers ────────────────────────────────────────────────────────────\n\n    const updateEntry = (id: string, patch: Partial<ToastEntry>) => {\n      entries.value = entries.value.map((e) => (e.id === id ? { ...e, ...patch } : e));\n    };\n\n    const getEntry = (id: string) => entries.value.find((e) => e.id === id);\n\n    const getInner = (wrapperOrEvent: HTMLElement | Event): HTMLElement | null => {\n      const wrapper = wrapperOrEvent instanceof Event ? (wrapperOrEvent.currentTarget as HTMLElement) : wrapperOrEvent;\n\n      return wrapper.querySelector<HTMLElement>('.toast-inner');\n    };\n\n    // ── Timer management ───────────────────────────────────────────────────\n\n    const clearEntryTimer = (entry: ToastEntry): ToastEntry => {\n      if (entry.timer) clearTimeout(entry.timer.timeoutId);\n\n      return { ...entry, timer: null };\n    };\n\n    const scheduleTimer = (id: string, remaining: number) => {\n      if (remaining <= 0) return;\n\n      const timeoutId = setTimeout(() => removeToast(id), remaining);\n\n      updateEntry(id, { timer: { remaining, startedAt: Date.now(), timeoutId } });\n    };\n\n    const pauseTimers = () => {\n      entries.value = entries.value.map((e) => {\n        if (!e.timer) return e;\n\n        clearTimeout(e.timer.timeoutId);\n\n        return {\n          ...e,\n          timer: { ...e.timer, remaining: Math.max(0, e.timer.remaining - (Date.now() - e.timer.startedAt)) },\n        };\n      });\n    };\n\n    const resumeTimers = () => {\n      for (const e of entries.value) {\n        if (!e.timer || e.timer.remaining <= 0) continue;\n\n        const timeoutId = setTimeout(() => removeToast(e.id), e.timer.remaining);\n\n        updateEntry(e.id, { timer: { ...e.timer, startedAt: Date.now(), timeoutId } });\n      }\n    };\n\n    // Watch reactive pause state — automatically pauses/resumes all timers.\n    watch(paused, (isPaused) => {\n      if (isPaused) pauseTimers();\n      else resumeTimers();\n    });\n\n    // ── Swipe gesture ──────────────────────────────────────────────────────\n    // Animates .toast-inner to avoid polluting the wrapper transition state.\n    // On commit, calls finalizeRemoval() directly (swipe owns the animation).\n\n    const createToastSwipe = (id: string): SwipeControl => {\n      // Same reset behavior whether the swipe was interrupted by the platform\n      // (onCancel) or simply released without crossing the commit threshold\n      // (onRelease) — the toast snaps back to rest either way.\n      const resetSwipeStyles = ({ event }: { event: PointerEvent }): void => {\n        const inner = getInner(event);\n\n        if (!inner) return;\n\n        inner.style.transition = '';\n        inner.style.transform = '';\n        inner.style.opacity = '';\n      };\n\n      return createSwipeControl({\n        axis: () => 'x',\n        // Do not capture pointers for toast swipe gestures; capture can steal\n        // close-button clicks when the gesture does not move.\n        captureTarget: () => null,\n        disabled: computed(() => !(getEntry(id)?.dismissible ?? true)),\n        onCancel: resetSwipeStyles,\n        onCommit: ({ distance, event }) => {\n          const inner = getInner(event);\n\n          if (!inner) return;\n\n          const dir = distance >= 0 ? 1 : -1;\n          const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n          const finish = () => finalizeRemoval(id);\n\n          if (reducedMotion) {\n            inner.style.opacity = '0';\n            finish();\n\n            return;\n          }\n\n          inner.style.transition = 'transform 0.22s ease-out, opacity 0.22s ease-out';\n          void inner.offsetWidth;\n          inner.style.transform = `translateX(${dir * 120}%)`;\n          inner.style.opacity = '0';\n\n          const onTransitionEnd = (e: TransitionEvent) => {\n            if (e.target !== inner || e.propertyName !== 'transform') return;\n\n            inner.removeEventListener('transitionend', onTransitionEnd);\n            clearTimeout(fallback);\n            finish();\n          };\n\n          const fallback = setTimeout(() => {\n            inner.removeEventListener('transitionend', onTransitionEnd);\n            finish();\n          }, 300);\n\n          inner.addEventListener('transitionend', onTransitionEnd);\n        },\n        onMove: ({ distance, event }) => {\n          const inner = getInner(event);\n\n          if (!inner) return;\n\n          inner.style.transition = 'none';\n          inner.style.transform = `translateX(${distance}px)`;\n          inner.style.opacity = String(Math.max(0, 1 - Math.abs(distance) / 200));\n        },\n        onRelease: resetSwipeStyles,\n      });\n    };\n\n    // ── Toast lifecycle ────────────────────────────────────────────────────\n\n    /** Remove all per-entry resources and fire callbacks. Does not animate. */\n    const finalizeRemoval = (id: string) => {\n      const entry = getEntry(id);\n\n      // Clean up timer and swipe control before removing from signal.\n      if (entry?.timer) clearTimeout(entry.timer.timeoutId);\n\n      swipeControls.delete(id);\n      entries.value = entries.value.filter((e) => e.id !== id);\n      entry?.onDismiss?.();\n      emit('dismiss', { id });\n    };\n\n    const addToast = (item: ToastItem): string => {\n      const id = item.id || uuid();\n      const maxToasts = props.max?.value ?? 5;\n\n      // Evict oldest non-exiting toasts to stay within max — animated, with callbacks.\n      const active = entries.value.filter((e) => e.phase !== 'exiting');\n      const overflow = active.length - (maxToasts - 1);\n\n      if (overflow > 0) {\n        for (const evicted of active.slice(0, overflow)) removeToast(evicted.id);\n      }\n\n      const entry: ToastEntry = {\n        dismissible: true,\n        duration: 5000,\n        ...item,\n        id,\n        phase: 'entering',\n        timer: null,\n      };\n\n      swipeControls.set(id, createToastSwipe(id));\n      entries.value = [...entries.value, entry];\n      emit('add', { id });\n\n      requestAnimationFrame(() => {\n        // Guard: if the toast was dismissed before this rAF fired (e.g. evicted\n        // by max), do not overwrite its exiting phase back to active.\n        if (getEntry(id)?.phase === 'entering') updateEntry(id, { phase: 'active' });\n      });\n\n      if (entry.duration > 0) scheduleTimer(id, entry.duration);\n\n      return id;\n    };\n\n    const removeToast = (id: string) => {\n      const entry = getEntry(id);\n\n      // Already animating out or not found — ignore.\n      if (!entry || entry.phase === 'exiting') return;\n\n      // Clear the auto-dismiss timer: the user (or max-eviction) is dismissing now.\n      updateEntry(id, { ...clearEntryTimer(entry), phase: 'exiting' });\n\n      // Force a layout flush on the current inner element (if in DOM now) so the\n      // browser snapshots the current opacity as the animation start value.\n      const innerEl = containerRef.value?.querySelector<HTMLElement>(`[data-toast-id=\"${id}\"] .toast-inner`);\n\n      void innerEl?.offsetHeight;\n\n      let done = false;\n      const onDone = () => {\n        if (done) return;\n\n        done = true;\n        finalizeRemoval(id);\n      };\n\n      // TOAST_EXIT_MS is the built-in default, matching the CSS opacity transition's own\n      // default. Read the *actual* computed duration so a consumer-customized\n      // `--toast-exit-duration` doesn't get cut off by a shorter hardcoded fallback.\n      // Fallback fires if transitionend never arrives (jsdom, reduced-motion, etc.).\n      const computedExitMs = innerEl ? parseFloat(getComputedStyle(innerEl).transitionDuration) * 1000 : NaN;\n      const exitMs = Number.isFinite(computedExitMs) && computedExitMs > 0 ? computedExitMs : TOAST_EXIT_MS;\n      const fallback = setTimeout(onDone, exitMs + 50);\n\n      // Listen on the container with event delegation so we are immune to\n      // ore re-rendering the entries list (e.g. rAF phase transitions that\n      // rebuild DOM after our listener would have been set up).\n      // transitionend bubbles, so it reaches the container regardless of which\n      // generation of .toast-inner element fires it.\n      const onTransitionEnd = (e: TransitionEvent) => {\n        const wrapper = (e.target as HTMLElement | null)?.closest?.(`[data-toast-id=\"${id}\"]`);\n\n        if (!wrapper) return;\n\n        containerRef.value?.removeEventListener('transitionend', onTransitionEnd);\n        clearTimeout(fallback);\n        onDone();\n      };\n\n      containerRef.value?.addEventListener('transitionend', onTransitionEnd);\n    };\n\n    const updateToast = (id: string, updates: Partial<ToastItem>) => {\n      const entry = getEntry(id);\n\n      if (!entry) return;\n\n      const cleared = updates.duration !== undefined ? clearEntryTimer(entry) : entry;\n\n      updateEntry(id, { ...cleared, ...updates, id });\n\n      if (updates.duration !== undefined && updates.duration > 0) scheduleTimer(id, updates.duration);\n    };\n\n    const clearAll = () => {\n      // Fire all removals concurrently — parallel fades are visually correct.\n      for (const e of entries.value) {\n        if (e.phase !== 'exiting') removeToast(e.id);\n      }\n    };\n\n    // ── Derived lists for live regions ─────────────────────────────────────\n\n    const urgencyOf = (e: ToastEntry) => e.urgency ?? (e.color === 'error' ? 'assertive' : 'polite');\n    const politeEntries = computed(() => entries.value.filter((e) => urgencyOf(e) === 'polite'));\n    const assertiveEntries = computed(() => entries.value.filter((e) => urgencyOf(e) === 'assertive'));\n\n    // ── Cleanup on disconnect ──────────────────────────────────────────────\n\n    onCleanup(() => {\n      for (const e of entries.value) {\n        if (e.timer) clearTimeout(e.timer.timeoutId);\n      }\n\n      swipeControls.clear();\n    });\n\n    // ── Template ───────────────────────────────────────────────────────────\n\n    const renderEntry = (entry: ToastEntry) => {\n      const dismiss = () => removeToast(entry.id);\n\n      return html`\n        <div\n          class=\"toast-wrapper\"\n          data-toast-id=${entry.id}\n          part=\"toast-wrapper\"\n          @pointerdown=${(e: PointerEvent) => swipeControls.get(entry.id)?.handlePointerDown(e)}\n          @pointermove=${(e: PointerEvent) => swipeControls.get(entry.id)?.handlePointerMove(e)}\n          @pointerup=${(e: PointerEvent) => swipeControls.get(entry.id)?.handlePointerUp(e)}\n          @pointercancel=${(e: PointerEvent) => swipeControls.get(entry.id)?.handlePointerCancel(e)}>\n          <div class=\"${() => `toast-inner${entry.phase !== 'active' ? ` ${entry.phase}` : ''}`}\" part=\"toast-inner\">\n            <ore-alert\n              color=${entry.color || (entry.urgency === 'assertive' ? 'error' : 'primary')}\n              variant=${entry.variant || 'solid'}\n              size=${entry.size || 'md'}\n              rounded=${entry.rounded || 'md'}\n              ?horizontal=${entry.horizontal}\n              heading=${entry.heading || ''}\n              ?dismissible=${entry.dismissible !== false}\n              @dismiss=${dismiss}>\n              ${entry.meta ? html`<span slot=\"meta\">${entry.meta}</span>` : ''} ${entry.message}\n              ${renderToastActions(entry, dismiss)}\n            </ore-alert>\n          </div>\n        </div>\n      `;\n    };\n\n    // Expose imperative API directly on mount — calls made before mount are\n    // safe because ore mounts synchronously on connectedCallback.\n    onMounted(() => {\n      const toastEl = el as ToastElement;\n\n      toastEl.add = addToast;\n      toastEl.clear = clearAll;\n      toastEl.dismiss = removeToast;\n      toastEl.update = updateToast;\n    });\n\n    return html`\n      <div\n        class=\"toast-container\"\n        ref=${containerRef}\n        @pointerenter=${() => {\n          hoverPaused.value = true;\n          el.classList.add('hovered');\n        }}\n        @pointerleave=${() => {\n          hoverPaused.value = false;\n          el.classList.remove('hovered');\n        }}\n        @focusin=${() => {\n          focusPaused.value = true;\n        }}\n        @focusout=${() => {\n          focusPaused.value = false;\n        }}\n        part=\"container\">\n        <!-- Polite live region: normal informational toasts -->\n        <div\n          role=\"region\"\n          aria-live=\"polite\"\n          aria-relevant=\"additions removals\"\n          aria-atomic=\"false\"\n          aria-label=\"Notifications\"\n          class=\"toast-live-region\">\n          ${() => politeEntries.value.map(renderEntry)}\n        </div>\n        <!-- Assertive live region: critical errors that interrupt immediately -->\n        <div\n          role=\"region\"\n          aria-live=\"assertive\"\n          aria-relevant=\"additions removals\"\n          aria-atomic=\"false\"\n          aria-label=\"Critical notifications\"\n          class=\"toast-live-region\">\n          ${() => assertiveEntries.value.map(renderEntry)}\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n\n// ─── Toast service ────────────────────────────────────────────────────────────\n\nexport type ToastServiceConfig = OreToastProps;\n\nexport interface ToastService {\n  /** Add a toast and return its id */\n  add(item: ToastItem): string;\n  /** Dismiss all toasts (animated, in parallel) */\n  clear(): void;\n  /**\n   * Configure the auto-created container.\n   * Has no effect if called after the first `add()` — logs a dev warning in that case.\n   */\n  configure(config: ToastServiceConfig): void;\n  /** Dismiss a toast by id (animated) */\n  dismiss(id: string): void;\n  /** Shortcut: error toast with red color (assertive live region) */\n  error(message: string, opts?: Partial<ToastItem>): string;\n  /** Shortcut: info toast */\n  info(message: string, opts?: Partial<ToastItem>): string;\n  /**\n   * Shows a loading toast tied to a promise.\n   * Updates to success/error when the promise settles.\n   */\n  promise<T>(\n    promise: Promise<T>,\n    messages: {\n      error: string | ((err: unknown) => string);\n      loading: string;\n      success: string | ((data: T) => string);\n    },\n  ): Promise<T>;\n  /** Shortcut: success toast with green color */\n  success(message: string, opts?: Partial<ToastItem>): string;\n  /** Update an existing toast in-place */\n  update(id: string, updates: Partial<ToastItem>): void;\n  /** Shortcut: warning toast */\n  warning(message: string, opts?: Partial<ToastItem>): string;\n}\n\n/**\n * Creates a scoped toast service backed by an `ore-toast` element.\n *\n * The service lazily creates an `<ore-toast>` element inside `root` on first\n * use. Pass a custom root to scope notifications to a sub-tree (e.g. a drawer),\n * or use the pre-built `toast` singleton which targets `document.body`.\n *\n * @example\n * ```ts\n * // Scoped instance\n * const drawerToast = createToastService(drawerEl);\n * drawerToast.success('Saved inside drawer');\n *\n * // The default singleton\n * import { toast } from '@vielzeug/refine';\n * toast.success('Saved!');\n * ```\n */\nexport function createToastService(root: ParentNode = document.body): ToastService {\n  let host: ToastElement | null = null;\n  let configured = false;\n  let pendingConfig: ToastServiceConfig | null = null;\n\n  const getHost = (): ToastElement => {\n    if (host?.isConnected) return host;\n\n    // Re-use an existing element in the root (supports declarative placement).\n    host = (root instanceof Element ? root : (root as Document | ShadowRoot)).querySelector<ToastElement>('ore-toast');\n\n    if (!host) {\n      host = document.createElement('ore-toast') as ToastElement;\n\n      if (pendingConfig) {\n        if (pendingConfig.position) host.setAttribute('position', pendingConfig.position);\n\n        if (pendingConfig.max != null) host.setAttribute('max', String(pendingConfig.max));\n\n        pendingConfig = null;\n      }\n\n      (root as Element | Document).appendChild(host);\n    }\n\n    configured = true;\n\n    return host;\n  };\n\n  const service: ToastService = {\n    add(item) {\n      return getHost().add(item);\n    },\n\n    clear() {\n      getHost().clear();\n    },\n\n    configure(config) {\n      if (configured) {\n        warn('toast.configure() called after the container was already created; options ignored.');\n\n        return;\n      }\n\n      pendingConfig = { ...pendingConfig, ...config };\n    },\n\n    dismiss(id) {\n      getHost().dismiss(id);\n    },\n\n    error(message, opts) {\n      return service.add({ color: 'error', ...opts, message });\n    },\n\n    info(message, opts) {\n      return service.add({ color: 'info', ...opts, message });\n    },\n\n    async promise(promise, messages) {\n      const id = service.add({ color: 'primary', dismissible: false, duration: 0, message: messages.loading });\n\n      try {\n        const data = await promise;\n\n        service.update(id, {\n          color: 'success',\n          dismissible: true,\n          duration: 5000,\n          message: typeof messages.success === 'function' ? messages.success(data) : messages.success,\n        });\n\n        return data;\n      } catch (err) {\n        service.update(id, {\n          color: 'error',\n          dismissible: true,\n          duration: 5000,\n          message: typeof messages.error === 'function' ? messages.error(err) : messages.error,\n        });\n        throw err;\n      }\n    },\n\n    success(message, opts) {\n      return service.add({ color: 'success', ...opts, message });\n    },\n\n    update(id, updates) {\n      getHost().update(id, updates);\n    },\n\n    warning(message, opts) {\n      return service.add({ color: 'warning', ...opts, message });\n    },\n  };\n\n  return service;\n}\n\n/**\n * Singleton toast service — finds or creates a single `<ore-toast>` on `document.body`.\n *\n * @example\n * ```ts\n * import { toast } from '@vielzeug/refine';\n *\n * toast.success('Changes saved!');\n * toast.error('Upload failed', { duration: 0 });\n *\n * const id = toast.add({ message: 'Uploading…', duration: 0, dismissible: false });\n * toast.update(id, { message: 'Done!', color: 'success', duration: 3000, dismissible: true });\n *\n * await toast.promise(uploadFile(), {\n *   loading: 'Uploading…',\n *   success: (url) => `Uploaded to ${url}`,\n *   error: 'Upload failed',\n * });\n * ```\n */\nexport const toast: ToastService = createToastService();\n"],"mappings":"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"}

package/dist/tooltip.cjs

@@ -0,0 +1,15 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/theme.css.cjs"),t=require("./shared/prop-bundles.cjs"),n=require("./headless/parse.cjs"),r=require("./overlay/shared/use-floating-trigger.cjs"),i=require("./overlay/tooltip/tooltip.css?inline.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");var s=4,c=[`hover`,`focus`],l=new Set([`click`,`focus`,`hover`]),u=e=>{if(e==null||e.trim()===``)return 0;let t=Number(e);return Number.isFinite(t)&&t>=0?t:0},d=e=>e==null?void 0:e===``||e===`true`,f=e=>n.parseStringTriggers(e,l,c),p=`ore-tooltip`;(0,a.define)(p,{props:{...t.sizableBundle,...t.disablableBundle,"close-delay":{default:0,parse:u},content:a.prop.string(),delay:{default:0,parse:u},open:{default:void 0,parse:d},placement:a.prop.oneOf([`top`,`bottom`,`left`,`right`],`top`),trigger:a.prop.string(`hover,focus`),variant:a.prop.string()},setup(e,{aria:t,el:n,onCleanup:i,onMounted:c,slots:l}){let u=n.shadowRoot,d=(0,o.computed)(()=>!!e.disabled.value),p=(0,o.computed)(()=>e.open.value!==void 0),m=(0,o.signal)(`top`),h=(0,a.createStableId)(`tooltip`),g=(0,o.computed)(()=>f(e.trigger.value)),_=null,v=null,y=null,b=()=>{v&&=(clearTimeout(v),null)},x=()=>{y&&=(clearTimeout(y),null)},S=r.useFloatingTrigger({bindTriggerAria:e=>t(e,{describedby:()=>h}),disabled:d,getPanel:()=>_,offset:8,onCleanup:i,onPlacementChange:e=>{let t=e.split(`-`)[0];m.value=t,t===`left`&&_&&(_.style.left=`${parseFloat(_.style.left)-s}px`)},openProp:e.open,placement:(0,o.computed)(()=>e.placement.value),slot:()=>u?.querySelector(`slot:not([name])`)??null,slotElements:l.elements(),triggers:(0,o.computed)(()=>[])});function C(){if(p.value||d.value||!e.content.value&&!l.has(`content`).value)return;x(),b();let t=Number(e.delay.value)||0;t>0?v=setTimeout(()=>{v=null,S.open(`hover`),S.updatePosition()},t):(S.open(`hover`),S.updatePosition())}function w(){if(p.value)return;b();let t=Number(e[`close-delay`].value)||0;t>0?(x(),y=setTimeout(()=>{y=null,S.close(`trigger`)},t)):S.close(`trigger`)}return c(()=>{let e=u?.querySelector(`slot:not([name])`),t=[],n=(e,n,r)=>{e.addEventListener(n,r),t.push(()=>e.removeEventListener(n,r))},r=()=>{for(let e of t)e();t=[];let r=e?.assignedElements({flatten:!0})[0];if(!r)return;let i=g.value;i.includes(`hover`)&&(n(r,`pointerenter`,C),n(r,`pointerleave`,w)),i.includes(`focus`)&&(n(r,`focusin`,C),n(r,`focusout`,w)),i.includes(`click`)&&n(r,`click`,()=>S.visible.value?w():C())};e?.addEventListener(`slotchange`,r),r();let i=S.mount();return()=>{e?.removeEventListener(`slotchange`,r);for(let e of t)e();b(),x(),i()}}),a.html`
+      <slot></slot>
+      <div
+        class="tooltip"
+        part="tooltip"
+        id="${h}"
+        role="tooltip"
+        popover="manual"
+        ref=${e=>{_=e}}
+        :data-placement="${m}"
+        :aria-hidden="${()=>String(!S.visible.value)}">
+        <slot name="content"><span class="tooltip-text">${e.content}</span></slot>
+      </div>
+    `},styles:[e.forcedColorsMixin,i.default]}),exports.TOOLTIP_TAG=p;
+//# sourceMappingURL=tooltip.cjs.map

package/dist/tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.cjs","names":[],"sources":["../src/overlay/tooltip/tooltip.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/orbit';\n\nimport { createStableId, define, html, prop } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport type { ComponentSize } from '../../types';\n\nimport { parseStringTriggers } from '../../headless';\nimport { disablableBundle, sizableBundle } from '../../shared';\nimport { forcedColorsMixin } from '../../styles';\nimport { useFloatingTrigger } from '../shared/use-floating-trigger';\nimport styles from './tooltip.css?inline';\n\ntype TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\ntype TooltipTrigger = 'click' | 'focus' | 'hover';\n\nconst LEFT_GAP_COMPENSATION = 4;\nconst DEFAULT_TOOLTIP_TRIGGERS: TooltipTrigger[] = ['hover', 'focus'];\nconst VALID_TOOLTIP_TRIGGERS = new Set<TooltipTrigger>(['click', 'focus', 'hover']);\n\nconst parseDelayMs = (value: string | null): number => {\n  if (value == null || value.trim() === '') return 0;\n\n  const parsed = Number(value);\n\n  return Number.isFinite(parsed) && parsed >= 0 ? parsed : 0;\n};\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n  value == null ? undefined : value === '' || value === 'true';\n\nconst normalizeTriggers = (value: string | null | undefined): TooltipTrigger[] =>\n  parseStringTriggers(value, VALID_TOOLTIP_TRIGGERS, DEFAULT_TOOLTIP_TRIGGERS);\n\n/** Tooltip component properties */\nexport type OreTooltipProps = {\n  /** Hide delay in ms */\n  'close-delay'?: number;\n  /** Tooltip text content */\n  content?: string;\n  /** Show delay in ms */\n  delay?: number;\n  /** Disable the tooltip */\n  disabled?: boolean;\n  /** Controlled open state */\n  open?: boolean;\n  /** Preferred placement relative to trigger */\n  placement?: TooltipPlacement;\n  /** Tooltip size */\n  size?: ComponentSize;\n  /** Which trigger(s) show/hide the tooltip */\n  trigger?: string;\n  /** Visual variant */\n  variant?: 'dark' | 'light';\n};\n\n/**\n * A lightweight tooltip shown on hover/focus/click relative to the slotted trigger.\n *\n * @element ore-tooltip\n *\n * @attr {string} content - Tooltip text content\n * @attr {string} placement - 'top' | 'bottom' | 'left' | 'right' (default: 'top')\n * @attr {string} trigger - 'hover' | 'focus' | 'click' or comma-separated combination\n * @attr {number} delay - Show delay in milliseconds (default: 0)\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - 'dark' (default) | 'light'\n * @attr {boolean} disabled - Disable the tooltip\n *\n * @slot - Trigger element that the tooltip is anchored to\n * @slot content - Complex tooltip content (overrides the `content` attribute)\n *\n * @cssprop --tooltip-max-width - Max width of the tooltip bubble\n *\n * @part tooltip - Tooltip container.\n * @example\n * ```html\n * <!-- Simple text tooltip -->\n * <ore-tooltip content=\"Copy to clipboard\">\n *   <button>Copy</button>\n * </ore-tooltip>\n *\n * <!-- Placement and delay -->\n * <ore-tooltip content=\"Save your work\" placement=\"right\" delay=\"300\">\n *   <ore-icon name=\"save\"></ore-icon>\n * </ore-tooltip>\n *\n * <!-- Hover + focus trigger -->\n * <ore-tooltip content=\"Required field\" trigger=\"hover,focus\" placement=\"top\">\n *   <ore-input label=\"Email\" type=\"email\"></ore-input>\n * </ore-tooltip>\n *\n * <!-- Rich content slot -->\n * <ore-tooltip>\n *   <ore-button>Help</ore-button>\n *   <div slot=\"content\">\n *     <strong>Keyboard shortcuts</strong>\n *     <p>Press Ctrl+S to save.</p>\n *   </div>\n * </ore-tooltip>\n * ```\n */\nexport const TOOLTIP_TAG = 'ore-tooltip' as const;\ndefine<OreTooltipProps>(TOOLTIP_TAG, {\n  props: {\n    ...sizableBundle,\n    ...disablableBundle,\n    'close-delay': { default: 0, parse: parseDelayMs },\n    content: prop.string(),\n    delay: { default: 0, parse: parseDelayMs },\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n    placement: prop.oneOf(['top', 'bottom', 'left', 'right'] as const, 'top'),\n    trigger: prop.string('hover,focus'),\n    variant: prop.string<'dark' | 'light'>(),\n  },\n  setup(props, { aria, el, onCleanup, onMounted, slots }) {\n    const shadowRoot = el.shadowRoot;\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const isControlled = computed(() => props.open.value !== undefined);\n    const activePlacement = signal<TooltipPlacement>('top');\n    const tooltipId = createStableId('tooltip');\n    const triggers = computed<TooltipTrigger[]>(() => normalizeTriggers(props.trigger.value));\n    let tooltipEl: HTMLElement | null = null;\n    let showTimer: ReturnType<typeof setTimeout> | null = null;\n    let hideTimer: ReturnType<typeof setTimeout> | null = null;\n\n    const clearShowTimer = (): void => {\n      if (!showTimer) return;\n\n      clearTimeout(showTimer);\n      showTimer = null;\n    };\n    const clearHideTimer = (): void => {\n      if (!hideTimer) return;\n\n      clearTimeout(hideTimer);\n      hideTimer = null;\n    };\n\n    const floating = useFloatingTrigger({\n      bindTriggerAria: (triggerEl) => aria(triggerEl, { describedby: () => tooltipId }),\n      disabled: isDisabled,\n      getPanel: () => tooltipEl,\n      offset: 8,\n      onCleanup,\n      onPlacementChange: (p) => {\n        const side = p.split('-')[0] as TooltipPlacement;\n\n        activePlacement.value = side;\n\n        if (side === 'left' && tooltipEl) {\n          tooltipEl.style.left = `${parseFloat(tooltipEl.style.left) - LEFT_GAP_COMPENSATION}px`;\n        }\n      },\n      openProp: props.open as typeof props.open & { value: boolean | undefined },\n      placement: computed(() => props.placement.value as Placement),\n      slot: () => shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])') ?? null,\n      slotElements: slots.elements(),\n      triggers: computed(() => [] as TooltipTrigger[]),\n    });\n\n    function show(): void {\n      if (isControlled.value) return;\n\n      if (isDisabled.value || (!props.content.value && !slots.has('content').value)) return;\n\n      clearHideTimer();\n      clearShowTimer();\n\n      const delay = Number(props.delay.value) || 0;\n\n      if (delay > 0) {\n        showTimer = setTimeout(() => {\n          showTimer = null;\n          floating.open('hover');\n          floating.updatePosition();\n        }, delay);\n      } else {\n        floating.open('hover');\n        floating.updatePosition();\n      }\n    }\n\n    function hide(): void {\n      if (isControlled.value) return;\n\n      clearShowTimer();\n\n      const closeDelay = Number(props['close-delay'].value) || 0;\n\n      if (closeDelay > 0) {\n        clearHideTimer();\n        hideTimer = setTimeout(() => {\n          hideTimer = null;\n          floating.close('trigger');\n        }, closeDelay);\n      } else {\n        floating.close('trigger');\n      }\n    }\n\n    onMounted(() => {\n      // Manually bind trigger events so we can wrap show/hide with delay timers.\n      // useFloatingTrigger handles ARIA, positioning, controlled mode, and keyboard dismiss.\n      const triggerSlot = shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n      let eventCleanups: Array<() => void> = [];\n\n      const addEvent = (target: EventTarget, event: string, handler: EventListener): void => {\n        target.addEventListener(event, handler);\n        eventCleanups.push(() => target.removeEventListener(event, handler));\n      };\n\n      const bindTriggerEvents = (): void => {\n        for (const cleanup of eventCleanups) cleanup();\n        eventCleanups = [];\n\n        const triggerEl = triggerSlot?.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n\n        if (!triggerEl) return;\n\n        const t = triggers.value;\n\n        if (t.includes('hover')) {\n          addEvent(triggerEl, 'pointerenter', show);\n          addEvent(triggerEl, 'pointerleave', hide);\n        }\n\n        if (t.includes('focus')) {\n          addEvent(triggerEl, 'focusin', show);\n          addEvent(triggerEl, 'focusout', hide);\n        }\n\n        if (t.includes('click')) {\n          addEvent(triggerEl, 'click', () => (floating.visible.value ? hide() : show()));\n        }\n      };\n\n      triggerSlot?.addEventListener('slotchange', bindTriggerEvents);\n      bindTriggerEvents();\n\n      const destroyFloating = floating.mount();\n\n      return () => {\n        triggerSlot?.removeEventListener('slotchange', bindTriggerEvents);\n        for (const cleanup of eventCleanups) cleanup();\n        clearShowTimer();\n        clearHideTimer();\n        destroyFloating();\n      };\n    });\n\n    return html`\n      <slot></slot>\n      <div\n        class=\"tooltip\"\n        part=\"tooltip\"\n        id=\"${tooltipId}\"\n        role=\"tooltip\"\n        popover=\"manual\"\n        ref=${(ref: HTMLElement) => {\n          tooltipEl = ref;\n        }}\n        :data-placement=\"${activePlacement}\"\n        :aria-hidden=\"${() => String(!floating.visible.value)}\">\n        <slot name=\"content\"><span class=\"tooltip-text\">${props.content}</span></slot>\n      </div>\n    `;\n  },\n  styles: [forcedColorsMixin, styles],\n});\n"],"mappings":"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"}

package/dist/tooltip.js

@@ -0,0 +1,121 @@
+import { forcedColorsMixin as e } from "./styles/mixins/theme.css.js";
+import { disablableBundle as t, sizableBundle as n } from "./shared/prop-bundles.js";
+import { parseStringTriggers as r } from "./headless/parse.js";
+import { useFloatingTrigger as i } from "./overlay/shared/use-floating-trigger.js";
+import a from "./overlay/tooltip/tooltip.css?inline.js";
+import { createStableId as o, define as s, html as c, prop as l } from "@vielzeug/ore";
+import { computed as u, signal as d } from "@vielzeug/ripple";
+//#region src/overlay/tooltip/tooltip.ts
+var f = 4, p = ["hover", "focus"], m = /* @__PURE__ */ new Set([
+	"click",
+	"focus",
+	"hover"
+]), h = (e) => {
+	if (e == null || e.trim() === "") return 0;
+	let t = Number(e);
+	return Number.isFinite(t) && t >= 0 ? t : 0;
+}, g = (e) => e == null ? void 0 : e === "" || e === "true", _ = (e) => r(e, m, p), v = "ore-tooltip";
+s(v, {
+	props: {
+		...n,
+		...t,
+		"close-delay": {
+			default: 0,
+			parse: h
+		},
+		content: l.string(),
+		delay: {
+			default: 0,
+			parse: h
+		},
+		open: {
+			default: void 0,
+			parse: g
+		},
+		placement: l.oneOf([
+			"top",
+			"bottom",
+			"left",
+			"right"
+		], "top"),
+		trigger: l.string("hover,focus"),
+		variant: l.string()
+	},
+	setup(e, { aria: t, el: n, onCleanup: r, onMounted: a, slots: s }) {
+		let l = n.shadowRoot, p = u(() => !!e.disabled.value), m = u(() => e.open.value !== void 0), h = d("top"), g = o("tooltip"), v = u(() => _(e.trigger.value)), y = null, b = null, x = null, S = () => {
+			b &&= (clearTimeout(b), null);
+		}, C = () => {
+			x &&= (clearTimeout(x), null);
+		}, w = i({
+			bindTriggerAria: (e) => t(e, { describedby: () => g }),
+			disabled: p,
+			getPanel: () => y,
+			offset: 8,
+			onCleanup: r,
+			onPlacementChange: (e) => {
+				let t = e.split("-")[0];
+				h.value = t, t === "left" && y && (y.style.left = `${parseFloat(y.style.left) - f}px`);
+			},
+			openProp: e.open,
+			placement: u(() => e.placement.value),
+			slot: () => l?.querySelector("slot:not([name])") ?? null,
+			slotElements: s.elements(),
+			triggers: u(() => [])
+		});
+		function T() {
+			if (m.value || p.value || !e.content.value && !s.has("content").value) return;
+			C(), S();
+			let t = Number(e.delay.value) || 0;
+			t > 0 ? b = setTimeout(() => {
+				b = null, w.open("hover"), w.updatePosition();
+			}, t) : (w.open("hover"), w.updatePosition());
+		}
+		function E() {
+			if (m.value) return;
+			S();
+			let t = Number(e["close-delay"].value) || 0;
+			t > 0 ? (C(), x = setTimeout(() => {
+				x = null, w.close("trigger");
+			}, t)) : w.close("trigger");
+		}
+		return a(() => {
+			let e = l?.querySelector("slot:not([name])"), t = [], n = (e, n, r) => {
+				e.addEventListener(n, r), t.push(() => e.removeEventListener(n, r));
+			}, r = () => {
+				for (let e of t) e();
+				t = [];
+				let r = e?.assignedElements({ flatten: !0 })[0];
+				if (!r) return;
+				let i = v.value;
+				i.includes("hover") && (n(r, "pointerenter", T), n(r, "pointerleave", E)), i.includes("focus") && (n(r, "focusin", T), n(r, "focusout", E)), i.includes("click") && n(r, "click", () => w.visible.value ? E() : T());
+			};
+			e?.addEventListener("slotchange", r), r();
+			let i = w.mount();
+			return () => {
+				e?.removeEventListener("slotchange", r);
+				for (let e of t) e();
+				S(), C(), i();
+			};
+		}), c`
+      <slot></slot>
+      <div
+        class="tooltip"
+        part="tooltip"
+        id="${g}"
+        role="tooltip"
+        popover="manual"
+        ref=${(e) => {
+			y = e;
+		}}
+        :data-placement="${h}"
+        :aria-hidden="${() => String(!w.visible.value)}">
+        <slot name="content"><span class="tooltip-text">${e.content}</span></slot>
+      </div>
+    `;
+	},
+	styles: [e, a]
+});
+//#endregion
+export { v as TOOLTIP_TAG };
+
+//# sourceMappingURL=tooltip.js.map

package/dist/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","names":[],"sources":["../src/overlay/tooltip/tooltip.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/orbit';\n\nimport { createStableId, define, html, prop } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport type { ComponentSize } from '../../types';\n\nimport { parseStringTriggers } from '../../headless';\nimport { disablableBundle, sizableBundle } from '../../shared';\nimport { forcedColorsMixin } from '../../styles';\nimport { useFloatingTrigger } from '../shared/use-floating-trigger';\nimport styles from './tooltip.css?inline';\n\ntype TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\ntype TooltipTrigger = 'click' | 'focus' | 'hover';\n\nconst LEFT_GAP_COMPENSATION = 4;\nconst DEFAULT_TOOLTIP_TRIGGERS: TooltipTrigger[] = ['hover', 'focus'];\nconst VALID_TOOLTIP_TRIGGERS = new Set<TooltipTrigger>(['click', 'focus', 'hover']);\n\nconst parseDelayMs = (value: string | null): number => {\n  if (value == null || value.trim() === '') return 0;\n\n  const parsed = Number(value);\n\n  return Number.isFinite(parsed) && parsed >= 0 ? parsed : 0;\n};\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n  value == null ? undefined : value === '' || value === 'true';\n\nconst normalizeTriggers = (value: string | null | undefined): TooltipTrigger[] =>\n  parseStringTriggers(value, VALID_TOOLTIP_TRIGGERS, DEFAULT_TOOLTIP_TRIGGERS);\n\n/** Tooltip component properties */\nexport type OreTooltipProps = {\n  /** Hide delay in ms */\n  'close-delay'?: number;\n  /** Tooltip text content */\n  content?: string;\n  /** Show delay in ms */\n  delay?: number;\n  /** Disable the tooltip */\n  disabled?: boolean;\n  /** Controlled open state */\n  open?: boolean;\n  /** Preferred placement relative to trigger */\n  placement?: TooltipPlacement;\n  /** Tooltip size */\n  size?: ComponentSize;\n  /** Which trigger(s) show/hide the tooltip */\n  trigger?: string;\n  /** Visual variant */\n  variant?: 'dark' | 'light';\n};\n\n/**\n * A lightweight tooltip shown on hover/focus/click relative to the slotted trigger.\n *\n * @element ore-tooltip\n *\n * @attr {string} content - Tooltip text content\n * @attr {string} placement - 'top' | 'bottom' | 'left' | 'right' (default: 'top')\n * @attr {string} trigger - 'hover' | 'focus' | 'click' or comma-separated combination\n * @attr {number} delay - Show delay in milliseconds (default: 0)\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - 'dark' (default) | 'light'\n * @attr {boolean} disabled - Disable the tooltip\n *\n * @slot - Trigger element that the tooltip is anchored to\n * @slot content - Complex tooltip content (overrides the `content` attribute)\n *\n * @cssprop --tooltip-max-width - Max width of the tooltip bubble\n *\n * @part tooltip - Tooltip container.\n * @example\n * ```html\n * <!-- Simple text tooltip -->\n * <ore-tooltip content=\"Copy to clipboard\">\n *   <button>Copy</button>\n * </ore-tooltip>\n *\n * <!-- Placement and delay -->\n * <ore-tooltip content=\"Save your work\" placement=\"right\" delay=\"300\">\n *   <ore-icon name=\"save\"></ore-icon>\n * </ore-tooltip>\n *\n * <!-- Hover + focus trigger -->\n * <ore-tooltip content=\"Required field\" trigger=\"hover,focus\" placement=\"top\">\n *   <ore-input label=\"Email\" type=\"email\"></ore-input>\n * </ore-tooltip>\n *\n * <!-- Rich content slot -->\n * <ore-tooltip>\n *   <ore-button>Help</ore-button>\n *   <div slot=\"content\">\n *     <strong>Keyboard shortcuts</strong>\n *     <p>Press Ctrl+S to save.</p>\n *   </div>\n * </ore-tooltip>\n * ```\n */\nexport const TOOLTIP_TAG = 'ore-tooltip' as const;\ndefine<OreTooltipProps>(TOOLTIP_TAG, {\n  props: {\n    ...sizableBundle,\n    ...disablableBundle,\n    'close-delay': { default: 0, parse: parseDelayMs },\n    content: prop.string(),\n    delay: { default: 0, parse: parseDelayMs },\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n    placement: prop.oneOf(['top', 'bottom', 'left', 'right'] as const, 'top'),\n    trigger: prop.string('hover,focus'),\n    variant: prop.string<'dark' | 'light'>(),\n  },\n  setup(props, { aria, el, onCleanup, onMounted, slots }) {\n    const shadowRoot = el.shadowRoot;\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const isControlled = computed(() => props.open.value !== undefined);\n    const activePlacement = signal<TooltipPlacement>('top');\n    const tooltipId = createStableId('tooltip');\n    const triggers = computed<TooltipTrigger[]>(() => normalizeTriggers(props.trigger.value));\n    let tooltipEl: HTMLElement | null = null;\n    let showTimer: ReturnType<typeof setTimeout> | null = null;\n    let hideTimer: ReturnType<typeof setTimeout> | null = null;\n\n    const clearShowTimer = (): void => {\n      if (!showTimer) return;\n\n      clearTimeout(showTimer);\n      showTimer = null;\n    };\n    const clearHideTimer = (): void => {\n      if (!hideTimer) return;\n\n      clearTimeout(hideTimer);\n      hideTimer = null;\n    };\n\n    const floating = useFloatingTrigger({\n      bindTriggerAria: (triggerEl) => aria(triggerEl, { describedby: () => tooltipId }),\n      disabled: isDisabled,\n      getPanel: () => tooltipEl,\n      offset: 8,\n      onCleanup,\n      onPlacementChange: (p) => {\n        const side = p.split('-')[0] as TooltipPlacement;\n\n        activePlacement.value = side;\n\n        if (side === 'left' && tooltipEl) {\n          tooltipEl.style.left = `${parseFloat(tooltipEl.style.left) - LEFT_GAP_COMPENSATION}px`;\n        }\n      },\n      openProp: props.open as typeof props.open & { value: boolean | undefined },\n      placement: computed(() => props.placement.value as Placement),\n      slot: () => shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])') ?? null,\n      slotElements: slots.elements(),\n      triggers: computed(() => [] as TooltipTrigger[]),\n    });\n\n    function show(): void {\n      if (isControlled.value) return;\n\n      if (isDisabled.value || (!props.content.value && !slots.has('content').value)) return;\n\n      clearHideTimer();\n      clearShowTimer();\n\n      const delay = Number(props.delay.value) || 0;\n\n      if (delay > 0) {\n        showTimer = setTimeout(() => {\n          showTimer = null;\n          floating.open('hover');\n          floating.updatePosition();\n        }, delay);\n      } else {\n        floating.open('hover');\n        floating.updatePosition();\n      }\n    }\n\n    function hide(): void {\n      if (isControlled.value) return;\n\n      clearShowTimer();\n\n      const closeDelay = Number(props['close-delay'].value) || 0;\n\n      if (closeDelay > 0) {\n        clearHideTimer();\n        hideTimer = setTimeout(() => {\n          hideTimer = null;\n          floating.close('trigger');\n        }, closeDelay);\n      } else {\n        floating.close('trigger');\n      }\n    }\n\n    onMounted(() => {\n      // Manually bind trigger events so we can wrap show/hide with delay timers.\n      // useFloatingTrigger handles ARIA, positioning, controlled mode, and keyboard dismiss.\n      const triggerSlot = shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n      let eventCleanups: Array<() => void> = [];\n\n      const addEvent = (target: EventTarget, event: string, handler: EventListener): void => {\n        target.addEventListener(event, handler);\n        eventCleanups.push(() => target.removeEventListener(event, handler));\n      };\n\n      const bindTriggerEvents = (): void => {\n        for (const cleanup of eventCleanups) cleanup();\n        eventCleanups = [];\n\n        const triggerEl = triggerSlot?.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n\n        if (!triggerEl) return;\n\n        const t = triggers.value;\n\n        if (t.includes('hover')) {\n          addEvent(triggerEl, 'pointerenter', show);\n          addEvent(triggerEl, 'pointerleave', hide);\n        }\n\n        if (t.includes('focus')) {\n          addEvent(triggerEl, 'focusin', show);\n          addEvent(triggerEl, 'focusout', hide);\n        }\n\n        if (t.includes('click')) {\n          addEvent(triggerEl, 'click', () => (floating.visible.value ? hide() : show()));\n        }\n      };\n\n      triggerSlot?.addEventListener('slotchange', bindTriggerEvents);\n      bindTriggerEvents();\n\n      const destroyFloating = floating.mount();\n\n      return () => {\n        triggerSlot?.removeEventListener('slotchange', bindTriggerEvents);\n        for (const cleanup of eventCleanups) cleanup();\n        clearShowTimer();\n        clearHideTimer();\n        destroyFloating();\n      };\n    });\n\n    return html`\n      <slot></slot>\n      <div\n        class=\"tooltip\"\n        part=\"tooltip\"\n        id=\"${tooltipId}\"\n        role=\"tooltip\"\n        popover=\"manual\"\n        ref=${(ref: HTMLElement) => {\n          tooltipEl = ref;\n        }}\n        :data-placement=\"${activePlacement}\"\n        :aria-hidden=\"${() => String(!floating.visible.value)}\">\n        <slot name=\"content\"><span class=\"tooltip-text\">${props.content}</span></slot>\n      </div>\n    `;\n  },\n  styles: [forcedColorsMixin, styles],\n});\n"],"mappings":"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"}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../shared';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAEA,cAAc,WAAW,CAAC"}

package/dist/utils/css.cjs

@@ -0,0 +1,2 @@
+function e(e){if(!e)return null;let t=e.trim();return/[;{}\n\r]/.test(t)?null:/^-?(\d+(\.\d+)?)(px|em|rem|%|vh|vw|vmin|vmax|dvh|dvw|svh|svw|ch|ex|lh|rlh|cm|mm|in|pt|pc|fr|s|ms|deg|rad|turn)$/.test(t)||/^(0|auto|none|inherit|initial|unset|revert)$/.test(t)||/^(var|calc|env|clamp|min|max)\([^;{}]*\)$/.test(t)?t:null}exports.safeCSSLength=e;
+//# sourceMappingURL=css.cjs.map

package/dist/utils/css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.cjs","names":[],"sources":["../../src/utils/css.ts"],"sourcesContent":["/**\n * Validates that a string is a safe CSS length value before injecting it\n * into a CSS custom property. Accepts standard length units, percentages,\n * CSS keywords, and `calc()`/`var()` expressions without embedded semicolons,\n * curly braces, or other CSS injection vectors.\n *\n * @returns The trimmed value if safe, `null` otherwise.\n */\nexport function safeCSSLength(value: string | null | undefined): string | null {\n  if (!value) return null;\n\n  const v = value.trim();\n\n  // Block CSS injection sequences (parens excluded — needed by var()/calc())\n  if (/[;{}\\n\\r]/.test(v)) return null;\n\n  // Allow: numbers with units, %, keywords, var(--token), calc(...), env(...)\n  if (\n    /^-?(\\d+(\\.\\d+)?)(px|em|rem|%|vh|vw|vmin|vmax|dvh|dvw|svh|svw|ch|ex|lh|rlh|cm|mm|in|pt|pc|fr|s|ms|deg|rad|turn)$/.test(\n      v,\n    )\n  )\n    return v;\n\n  if (/^(0|auto|none|inherit|initial|unset|revert)$/.test(v)) return v;\n\n  // Allow CSS function expressions: var(--token), calc(...), env(...), clamp(...), min(...), max(...)\n  // Tightened pattern: must match the whole value and inner parens must close properly.\n  if (/^(var|calc|env|clamp|min|max)\\([^;{}]*\\)$/.test(v)) return v;\n\n  return null;\n}\n"],"mappings":"AAQA,SAAgB,EAAc,EAAiD,CAC7E,GAAI,CAAC,EAAO,OAAO,KAEnB,IAAM,EAAI,EAAM,KAAK,EAmBrB,MAhBI,YAAY,KAAK,CAAC,EAAU,KAI9B,kHAAkH,KAChH,CACF,GAIE,+CAA+C,KAAK,CAAC,GAIrD,4CAA4C,KAAK,CAAC,EAAU,EAEzD,IACT"}

package/dist/utils/css.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Validates that a string is a safe CSS length value before injecting it
+ * into a CSS custom property. Accepts standard length units, percentages,
+ * CSS keywords, and `calc()`/`var()` expressions without embedded semicolons,
+ * curly braces, or other CSS injection vectors.
+ *
+ * @returns The trimmed value if safe, `null` otherwise.
+ */
+export declare function safeCSSLength(value: string | null | undefined): string | null;
+//# sourceMappingURL=css.d.ts.map

package/dist/utils/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/utils/css.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAuB7E"}

package/dist/utils/css.js

@@ -0,0 +1,10 @@
+//#region src/utils/css.ts
+function e(e) {
+	if (!e) return null;
+	let t = e.trim();
+	return /[;{}\n\r]/.test(t) ? null : /^-?(\d+(\.\d+)?)(px|em|rem|%|vh|vw|vmin|vmax|dvh|dvw|svh|svw|ch|ex|lh|rlh|cm|mm|in|pt|pc|fr|s|ms|deg|rad|turn)$/.test(t) || /^(0|auto|none|inherit|initial|unset|revert)$/.test(t) || /^(var|calc|env|clamp|min|max)\([^;{}]*\)$/.test(t) ? t : null;
+}
+//#endregion
+export { e as safeCSSLength };
+
+//# sourceMappingURL=css.js.map