@vielzeug/buildit 2.0.0 → 2.1.0

package/dist/toast.js

@@ -1,11 +1,11 @@
-import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
+import { classes as e } from "./packages/craftit/src/directives/classes.js";
+import { each as t } from "./packages/craftit/src/directives/each.js";
+import "./packages/craftit/src/directives/index.js";
+import { reducedMotionMixin as n } from "./styles/mixins/accessibility.css.js";
 import "./styles/index.js";
-import { n as t } from "./craftit/dist/directives/classes.js";
-import { d as n } from "./craftit/dist/directives/each.js";
-import "./craftit/dist/directives/index.js";
 import { awaitExit as r } from "./utils/animation.js";
 import i from "./feedback/toast/toast.css?inline.js";
-import { defineComponent as a, html as o, onMount as s, ref as c, signal as l } from "@vielzeug/craftit";
+import { define as a, html as o, onMount as s, ref as c, signal as l } from "@vielzeug/craftit";
 //#region src/feedback/toast/toast.ts
 function u(e, t) {
 	return e.actions?.length ? o`
@@ -24,110 +24,112 @@ function u(e, t) {
     </div>
   ` : "";
 }
-var d = a({
+var d = a("bit-toast", {
 	props: {
-		max: { default: 5 },
-		position: { default: "bottom-right" }
+		max: 5,
+		position: "bottom-right"
 	},
-	setup({ emit: e, host: i, props: a }) {
-		let d = l([]), f = l(/* @__PURE__ */ new Set()), p = c(), m = /* @__PURE__ */ new Map(), h = [], g = !1, _ = (e, t) => {
+	setup({ emit: n, host: i, props: a }) {
+		let d = l([]), f = l(/* @__PURE__ */ new Set()), p = c(), m = /* @__PURE__ */ new Map(), h = [], g = !1, _ = !1, v = !1, y = (e, t) => {
 			let n = new Set(f.value);
 			t ? n.add(e) : n.delete(e), f.value = n;
-		}, v = (e, t) => {
-			let n = window.setTimeout(() => {
-				C(e), m.delete(e);
-			}, t);
+		}, b = () => {
+			for (let [e, t] of m) clearTimeout(t.timeoutId), m.set(e, {
+				...t,
+				remaining: Math.max(0, t.remaining - (Date.now() - t.startedAt))
+			});
+		}, x = () => {
+			for (let [e, t] of m) {
+				if (t.remaining <= 0) continue;
+				let n = window.setTimeout(() => T(e), t.remaining);
+				m.set(e, {
+					...t,
+					remaining: t.remaining,
+					timeoutId: n
+				});
+			}
+		}, S = () => {
+			_ || v ? b() : x();
+		}, C = (e, t) => {
+			if (t <= 0) return;
+			let n = window.setTimeout(() => T(e), t);
 			m.set(e, {
 				remaining: t,
 				startedAt: Date.now(),
 				timeoutId: n
 			});
-		}, y = !1, b = () => {
-			if (!y) {
-				y = !0;
-				for (let [e, t] of m) clearTimeout(t.timeoutId), m.set(e, {
-					...t,
-					remaining: Math.max(0, t.remaining - (Date.now() - t.startedAt))
-				});
-			}
-		}, x = () => {
-			if (y) {
-				y = !1;
-				for (let [e, t] of m) t.remaining <= 0 || v(e, t.remaining);
-			}
-		}, S = (t) => {
-			let n = t.id || crypto.randomUUID(), r = {
+		}, w = (e) => {
+			let t = e.id || crypto.randomUUID(), r = {
 				dismissible: !0,
 				duration: 5e3,
-				...t,
-				id: n
+				...e,
+				id: t
 			};
-			return d.value = [...d.value, r].slice(-(a.max.value ?? 5)), e("add", { id: n }), r.duration > 0 && v(n, r.duration), n;
-		}, C = (e) => {
-			let t = m.get(e);
-			if (t && (clearTimeout(t.timeoutId), m.delete(e)), !(f.value.has(e) || h.includes(e))) {
+			return d.value = [...d.value, r].slice(-(a.max ?? 5)), n("add", { id: t }), r.duration > 0 && C(t, r.duration), t;
+		}, T = (e) => {
+			if (!(f.value.has(e) || h.includes(e))) {
 				if (g) {
 					h.push(e);
 					return;
 				}
-				g = !0, w(e);
+				g = !0, E(e);
 			}
-		}, w = (t) => {
-			if (f.value.has(t)) {
-				T();
+		}, E = (e) => {
+			if (f.value.has(e)) {
+				D();
 				return;
 			}
-			let n = d.value.find((e) => e.id === t), i = p.value?.querySelector(`[data-toast-id="${t}"]`), a = () => {
-				_(t, !1), d.value = d.value.filter((e) => e.id !== t), n?.onDismiss?.(), e("dismiss", { id: t }), T();
+			let t = d.value.find((t) => t.id === e), i = p.value?.querySelector(`[data-toast-id="${e}"]`), a = () => {
+				y(e, !1), d.value = d.value.filter((t) => t.id !== e);
+				let r = m.get(e);
+				r && clearTimeout(r.timeoutId), m.delete(e), t?.onDismiss?.(), n("dismiss", { id: e }), D();
 			};
-			i ? (_(t, !0), r(i, a)) : a();
-		}, T = () => {
+			i ? (y(e, !0), r(i, a)) : a();
+		}, D = () => {
 			if (h.length === 0) {
 				g = !1;
 				return;
 			}
-			w(h.shift());
-		}, E = (e, t) => {
+			E(h.shift());
+		}, O = (e, t) => {
 			if (d.value = d.value.map((n) => n.id === e ? {
 				...n,
 				...t,
 				id: e
 			} : n), t.duration === void 0) return;
 			let n = m.get(e);
-			n && clearTimeout(n.timeoutId), m.delete(e), t.duration > 0 && v(e, t.duration);
-		}, D = () => {
+			n && clearTimeout(n.timeoutId), m.delete(e), t.duration > 0 && C(e, t.duration);
+		}, k = () => {
 			for (let [, e] of m) clearTimeout(e.timeoutId);
 			m.clear(), h.length = 0;
 			let e = d.value.map((e) => e.id).filter((e) => !f.value.has(e));
-			e.length && (h.push(...e), g || T());
+			e.length && (h.push(...e), g || D());
 		};
 		s(() => {
-			let e = i;
-			e.add = S, e.update = E, e.dismiss = C, e.clear = D;
+			let e = i.el;
+			e.add = w, e.update = O, e.dismiss = T, e.clear = k;
 		});
-		let O = (e) => e.urgency ?? (e.color === "error" ? "assertive" : "polite"), k = !1, A = !1, j = () => b(), M = () => {
-			!k && !A && x();
-		}, N = (e) => {
-			A = e, i.classList.toggle("hovered", e), e ? j() : M();
-		}, P = (e) => o`
+		let A = (e) => e.urgency ?? (e.color === "error" ? "assertive" : "polite"), j = (e) => {
+			v = e, i.el.classList.toggle("hovered", e), S();
+		}, M = (t) => o`
       <div
-        class=${t({
-			exiting: () => f.value.has(e.id),
+        class=${e({
+			exiting: () => f.value.has(t.id),
 			"toast-wrapper": !0
 		})}
-        data-toast-id=${e.id}
+        data-toast-id=${t.id}
         part="toast-wrapper">
         <bit-alert
-          color=${e.color || (e.urgency === "assertive" ? "error" : "primary")}
-          variant=${e.variant || "solid"}
-          size=${e.size || "md"}
-          rounded=${e.rounded || "md"}
-          ?dismissible=${e.dismissible}
-          ?horizontal=${e.horizontal}
-          heading=${e.heading || ""}
-          @dismiss=${() => C(e.id)}>
-          ${e.meta ? o`<span slot="meta">${e.meta}</span>` : ""} ${e.message}
-          ${u(e, () => C(e.id))}
+          color=${t.color || (t.urgency === "assertive" ? "error" : "primary")}
+          variant=${t.variant || "solid"}
+          size=${t.size || "md"}
+          rounded=${t.rounded || "md"}
+          ?dismissible=${t.dismissible}
+          ?horizontal=${t.horizontal}
+          heading=${t.heading || ""}
+          @dismiss=${() => T(t.id)}>
+          ${t.meta ? o`<span slot="meta">${t.meta}</span>` : ""} ${t.message}
+          ${u(t, () => T(t.id))}
         </bit-alert>
       </div>
     `;
@@ -135,13 +137,13 @@ var d = a({
       <div
         class="toast-container"
         ref=${p}
-        @pointerenter=${() => N(!0)}
-        @pointerleave=${() => N(!1)}
+        @pointerenter=${() => j(!0)}
+        @pointerleave=${() => j(!1)}
         @focusin=${() => {
-			k = !0, j();
+			_ = !0, S();
 		}}
         @focusout=${() => {
-			k = !1, M();
+			_ = !1, S();
 		}}
         part="container">
         <!-- Polite live region: normal informational toasts -->
@@ -152,7 +154,10 @@ var d = a({
           aria-atomic="false"
           aria-label="Notifications"
           class="toast-live-region">
-          ${n(() => d.value.filter((e) => O(e) === "polite"), P, void 0, { key: (e) => e.id })}
+          ${t(() => d.value.filter((e) => A(e) === "polite"), {
+			key: (e) => e.id,
+			render: M
+		})}
         </div>
         <!-- Assertive live region: critical errors that interrupt immediately -->
         <div
@@ -162,14 +167,16 @@ var d = a({
           aria-atomic="false"
           aria-label="Critical notifications"
           class="toast-live-region">
-          ${n(() => d.value.filter((e) => O(e) === "assertive"), P, void 0, { key: (e) => e.id })}
+          ${t(() => d.value.filter((e) => A(e) === "assertive"), {
+			key: (e) => e.id,
+			render: M
+		})}
         </div>
         <slot></slot>
       </div>
     `;
 	},
-	styles: [e, i],
-	tag: "bit-toast"
+	styles: [n, i]
 }), f = () => {
 	let e = document.querySelector("bit-toast");
 	return e || (e = document.createElement("bit-toast"), document.body.appendChild(e)), e;

package/dist/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","names":[],"sources":["../src/feedback/toast/toast.ts"],"sourcesContent":["import { defineComponent, html, onMount, ref, signal } from '@vielzeug/craftit';\nimport { classes, each } from '@vielzeug/craftit/directives';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { reducedMotionMixin } from '../../styles';\nimport { awaitExit } from '../../utils/animation';\nimport componentStyles from './toast.css?inline';\n\n/** Toast container properties */\n\nexport type BitToastEvents = {\n  add: { id: string };\n  dismiss: { id: string };\n};\n\nexport type BitToastProps = {\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?: VisualVariant;\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): uses `aria-live=\"polite\"` — announced after the user finishes their current action.\n   * - `'assertive'`: uses `aria-live=\"assertive\"` — interrupts the user immediately. Use only for critical errors.\n   */\n  urgency?: 'polite' | 'assertive';\n  variant?: 'solid' | 'flat' | 'bordered';\n};\n\ntype NormalizedToast = ToastItem & { id: string };\n\n/** Public API of the bit-toast element */\nexport interface ToastElement extends HTMLElement {\n  add: (toast: ToastItem) => string;\n  update: (id: string, updates: Partial<ToastItem>) => void;\n  dismiss: (id: string) => void;\n  clear: () => void;\n}\n\n/**\n * A toast notification container with Time Machine-style stacking animation.\n * Stacks up to 3 notifications with a 3D effect. Hover to expand all toasts.\n *\n * @element bit-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 bit-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 *\n * @example\n * ```html\n * <!-- Declarative: place once in HTML -->\n * <bit-toast position=\"bottom-right\"></bit-toast>\n *\n * <!-- Programmatic: use the singleton service -->\n * <script type=\"module\">\n *   import { toast } from '@vielzeug/buildit';\n *   toast.add({ message: 'Changes saved!', color: 'success' });\n * </script>\n * ```\n */\n/** Renders the actions slot for a toast item */\nfunction renderToastActions(toast: NormalizedToast, onDismiss: () => void) {\n  if (!toast.actions?.length) return '';\n\n  return html`\n    <div slot=\"actions\" class=\"toast-actions\">\n      ${toast.actions.map(\n        (action) => html`\n          <bit-button\n            size=\"sm\"\n            color=${action.color || toast.color || 'primary'}\n            variant=${action.variant || 'solid'}\n            @click=${() => {\n              action.onClick?.();\n              onDismiss();\n            }}\n            >${action.label}</bit-button\n          >\n        `,\n      )}\n    </div>\n  `;\n}\n\nexport const TOAST_TAG = defineComponent<BitToastProps, BitToastEvents>({\n  props: {\n    max: { default: 5 },\n    position: { default: 'bottom-right' },\n  },\n  setup({ emit, host, props }) {\n    const toasts = signal<NormalizedToast[]>([]);\n    const exitingIds = signal<Set<string>>(new Set());\n    const containerRef = ref<HTMLDivElement>();\n    const timers = new Map<\n      string,\n      {\n        remaining: number;\n        startedAt: number;\n        timeoutId: number;\n      }\n    >();\n    // Sequential dismiss queue — only one toast exits at a time so animations never overlap.\n    const dismissQueue: string[] = [];\n    let isDismissing = false;\n    const setExiting = (id: string, value: boolean) => {\n      const next = new Set(exitingIds.value);\n\n      if (value) next.add(id);\n      else next.delete(id);\n\n      exitingIds.value = next;\n    };\n    const scheduleRemoval = (id: string, duration: number) => {\n      const timeoutId = window.setTimeout(() => {\n        removeToast(id);\n        timers.delete(id);\n      }, duration);\n\n      timers.set(id, { remaining: duration, startedAt: Date.now(), timeoutId });\n    };\n    let isPaused = false;\n    const pauseTimers = () => {\n      if (isPaused) return;\n\n      isPaused = true;\n      for (const [id, t] of timers) {\n        clearTimeout(t.timeoutId);\n        timers.set(id, { ...t, remaining: Math.max(0, t.remaining - (Date.now() - t.startedAt)) });\n      }\n    };\n    const resumeTimers = () => {\n      if (!isPaused) return;\n\n      isPaused = false;\n      for (const [id, t] of timers) {\n        if (t.remaining <= 0) continue;\n\n        scheduleRemoval(id, t.remaining);\n      }\n    };\n    const addToast = (toast: ToastItem): string => {\n      const id = toast.id || crypto.randomUUID();\n      const item: NormalizedToast = { dismissible: true, duration: 5000, ...toast, id };\n\n      toasts.value = [...toasts.value, item].slice(-(props.max.value ?? 5));\n      emit('add', { id });\n\n      if (item.duration! > 0) scheduleRemoval(id, item.duration!);\n\n      return id;\n    };\n    const removeToast = (id: string) => {\n      // Cancel the auto-dismiss timer if one is running.\n      const timer = timers.get(id);\n\n      if (timer) {\n        clearTimeout(timer.timeoutId);\n        timers.delete(id);\n      }\n\n      // Skip if already exiting or already queued.\n      if (exitingIds.value.has(id) || dismissQueue.includes(id)) return;\n\n      if (isDismissing) {\n        dismissQueue.push(id);\n\n        return;\n      }\n\n      isDismissing = true;\n      executeRemoval(id);\n    };\n    // Internal: actually animate and remove. Always called from processNextInQueue or directly\n    // when the queue is empty.\n    const executeRemoval = (id: string) => {\n      // Guard: could have been removed by clearAll between queue entry and execution.\n      if (exitingIds.value.has(id)) {\n        processNextInQueue();\n\n        return;\n      }\n\n      const item = toasts.value.find((t) => t.id === id);\n      const wrapper = containerRef.value?.querySelector<HTMLElement>(`[data-toast-id=\"${id}\"]`);\n      const finalize = () => {\n        setExiting(id, false);\n        toasts.value = toasts.value.filter((t) => t.id !== id);\n        item?.onDismiss?.();\n        emit('dismiss', { id });\n        processNextInQueue();\n      };\n\n      if (wrapper) {\n        setExiting(id, true);\n        awaitExit(wrapper, finalize);\n      } else {\n        finalize();\n      }\n    };\n    const processNextInQueue = () => {\n      if (dismissQueue.length === 0) {\n        isDismissing = false;\n\n        return;\n      }\n\n      const nextId = dismissQueue.shift()!;\n\n      executeRemoval(nextId);\n    };\n    const updateToast = (id: string, updates: Partial<ToastItem>) => {\n      toasts.value = toasts.value.map((t) => (t.id === id ? { ...t, ...updates, id } : t));\n\n      if (updates.duration === undefined) return;\n\n      const timer = timers.get(id);\n\n      if (timer) clearTimeout(timer.timeoutId);\n\n      timers.delete(id);\n\n      if (updates.duration > 0) scheduleRemoval(id, updates.duration);\n    };\n    const clearAll = () => {\n      for (const [, t] of timers) clearTimeout(t.timeoutId);\n      timers.clear();\n      // Drain any pending queue entries and replace with the full current list so\n      // they exit one-by-one in order.\n      dismissQueue.length = 0;\n\n      const ids = toasts.value.map((t) => t.id).filter((id) => !exitingIds.value.has(id));\n\n      if (!ids.length) return;\n\n      dismissQueue.push(...ids);\n\n      if (!isDismissing) processNextInQueue();\n    };\n\n    onMount(() => {\n      const el = host as ToastElement;\n\n      el.add = addToast;\n      el.update = updateToast;\n      el.dismiss = removeToast;\n      el.clear = clearAll;\n    });\n\n    const urgencyOf = (t: NormalizedToast) => t.urgency ?? (t.color === 'error' ? 'assertive' : 'polite');\n    let focusPaused = false;\n    let hoverPaused = false;\n    const maybePause = () => pauseTimers();\n    const maybeResume = () => {\n      if (!focusPaused && !hoverPaused) resumeTimers();\n    };\n    const setHovered = (hovered: boolean) => {\n      hoverPaused = hovered;\n      host.classList.toggle('hovered', hovered);\n\n      if (hovered) maybePause();\n      else maybeResume();\n    };\n    const renderToastItem = (toast: NormalizedToast) => html`\n      <div\n        class=${classes({ exiting: () => exitingIds.value.has(toast.id), 'toast-wrapper': true })}\n        data-toast-id=${toast.id}\n        part=\"toast-wrapper\">\n        <bit-alert\n          color=${toast.color || (toast.urgency === 'assertive' ? 'error' : 'primary')}\n          variant=${toast.variant || 'solid'}\n          size=${toast.size || 'md'}\n          rounded=${toast.rounded || 'md'}\n          ?dismissible=${toast.dismissible}\n          ?horizontal=${toast.horizontal}\n          heading=${toast.heading || ''}\n          @dismiss=${() => removeToast(toast.id)}>\n          ${toast.meta ? html`<span slot=\"meta\">${toast.meta}</span>` : ''} ${toast.message}\n          ${renderToastActions(toast, () => removeToast(toast.id))}\n        </bit-alert>\n      </div>\n    `;\n\n    return html`\n      <div\n        class=\"toast-container\"\n        ref=${containerRef}\n        @pointerenter=${() => setHovered(true)}\n        @pointerleave=${() => setHovered(false)}\n        @focusin=${() => {\n          focusPaused = true;\n          maybePause();\n        }}\n        @focusout=${() => {\n          focusPaused = false;\n          maybeResume();\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          ${each(() => toasts.value.filter((t) => urgencyOf(t) === 'polite'), renderToastItem, undefined, {\n            key: (toast) => toast.id,\n          })}\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          ${each(() => toasts.value.filter((t) => urgencyOf(t) === 'assertive'), renderToastItem, undefined, {\n            key: (toast) => toast.id,\n          })}\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n  tag: 'bit-toast',\n});\n\n// ─── Singleton toast service ─────────────────────────────────────────────────\n\nconst getHost = (): ToastElement => {\n  let el = document.querySelector<ToastElement>('bit-toast');\n\n  if (!el) {\n    el = document.createElement('bit-toast') as ToastElement;\n    document.body.appendChild(el);\n  }\n\n  return el;\n};\n\n/**\n * Singleton service for triggering toasts without direct DOM references.\n *\n * @example\n * ```ts\n * import { toast } from '@vielzeug/buildit';\n *\n * toast.add({ message: 'Saved!', color: 'success' });\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 = {\n  /** Add a toast and return its id */\n  add(item: ToastItem): string {\n    return getHost().add(item);\n  },\n\n  /** Dismiss all toasts (animated) */\n  clear(): void {\n    getHost().clear();\n  },\n  /** Configure the auto-created container. Call before the first `add()` if the defaults need to change. */\n  configure(config: BitToastProps): void {\n    const el = getHost();\n\n    if (config.position) el.setAttribute('position', config.position);\n\n    if (config.max != null) el.setAttribute('max', String(config.max));\n  },\n\n  /**\n   * Shows a loading toast tied to a promise.\n   * Updates to success/error when the promise settles.\n   */\n  async 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    const id = toast.add({ color: 'primary', dismissible: false, duration: 0, message: messages.loading });\n\n    try {\n      const data = await promise;\n\n      toast.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      toast.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  /** Dismiss a toast by id */\n  remove(id: string): void {\n    getHost().dismiss(id);\n  },\n\n  /** Update an existing toast in-place */\n  update(id: string, updates: Partial<ToastItem>): void {\n    getHost().update(id, updates);\n  },\n};\n"],"mappings":"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"}
+{"version":3,"file":"toast.js","names":[],"sources":["../src/feedback/toast/toast.ts"],"sourcesContent":["import { define, html, onMount, ref, signal } from '@vielzeug/craftit';\nimport { classes, each } from '@vielzeug/craftit/directives';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { reducedMotionMixin } from '../../styles';\nimport { awaitExit } from '../../utils/animation';\nimport componentStyles from './toast.css?inline';\n\n/** Toast container properties */\n\nexport type BitToastEvents = {\n  add: { id: string };\n  dismiss: { id: string };\n};\n\nexport type BitToastProps = {\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?: VisualVariant;\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): uses `aria-live=\"polite\"` — announced after the user finishes their current action.\n   * - `'assertive'`: uses `aria-live=\"assertive\"` — interrupts the user immediately. Use only for critical errors.\n   */\n  urgency?: 'polite' | 'assertive';\n  variant?: 'solid' | 'flat' | 'bordered';\n};\n\ntype NormalizedToast = ToastItem & { id: string };\n\n/** Public API of the bit-toast element */\nexport interface ToastElement extends HTMLElement {\n  add: (toast: ToastItem) => string;\n  update: (id: string, updates: Partial<ToastItem>) => void;\n  dismiss: (id: string) => void;\n  clear: () => void;\n}\n\n/**\n * A toast notification container with Time Machine-style stacking animation.\n * Stacks up to 3 notifications with a 3D effect. Hover to expand all toasts.\n *\n * @element bit-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 bit-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 *\n * @example\n * ```html\n * <!-- Declarative: place once in HTML -->\n * <bit-toast position=\"bottom-right\"></bit-toast>\n *\n * <!-- Programmatic: use the singleton service -->\n * <script type=\"module\">\n *   import { toast } from '@vielzeug/buildit';\n *   toast.add({ message: 'Changes saved!', color: 'success' });\n * </script>\n * ```\n */\n/** Renders the actions slot for a toast item */\nfunction renderToastActions(toast: NormalizedToast, onDismiss: () => void) {\n  if (!toast.actions?.length) return '';\n\n  return html`\n    <div slot=\"actions\" class=\"toast-actions\">\n      ${toast.actions.map(\n        (action) => html`\n          <bit-button\n            size=\"sm\"\n            color=${action.color || toast.color || 'primary'}\n            variant=${action.variant || 'solid'}\n            @click=${() => {\n              action.onClick?.();\n              onDismiss();\n            }}\n            >${action.label}</bit-button\n          >\n        `,\n      )}\n    </div>\n  `;\n}\n\nexport const TOAST_TAG = define<BitToastProps, BitToastEvents>('bit-toast', {\n  props: {\n    max: 5,\n    position: 'bottom-right',\n  },\n  setup({ emit, host, props }) {\n    const toasts = signal<NormalizedToast[]>([]);\n    const exitingIds = signal<Set<string>>(new Set());\n    const containerRef = ref<HTMLDivElement>();\n\n    // Timer tracking: maps id → { remaining, startedAt, timeoutId }\n    const timers = new Map<string, { remaining: number; startedAt: number; timeoutId: number }>();\n\n    // Sequentially dismiss queue — only one toast exits at a time so animations never overlap.\n    const dismissQueue: string[] = [];\n    let isDismissing = false;\n\n    // Pause state: track focus and hover separately to resume only when both are clear\n    let focusPaused = false;\n    let hoverPaused = false;\n\n    // ────────────────────────────────────────────────────────────────────────────────\n    // Core State Mutations\n    // ────────────────────────────────────────────────────────────────────────────────\n\n    const setExiting = (id: string, value: boolean) => {\n      const next = new Set(exitingIds.value);\n\n      if (value) next.add(id);\n      else next.delete(id);\n\n      exitingIds.value = next;\n    };\n\n    // ────────────────────────────────────────────────────────────────────────────────\n    // Timer Management (pause/resume for hover/focus)\n    // ────────────────────────────────────────────────────────────────────────────────\n\n    const pauseTimers = () => {\n      for (const [id, t] of timers) {\n        clearTimeout(t.timeoutId);\n        timers.set(id, { ...t, remaining: Math.max(0, t.remaining - (Date.now() - t.startedAt)) });\n      }\n    };\n\n    const resumeTimers = () => {\n      for (const [id, t] of timers) {\n        if (t.remaining <= 0) continue;\n\n        const timeoutId = window.setTimeout(() => removeToast(id), t.remaining);\n\n        timers.set(id, { ...t, remaining: t.remaining, timeoutId });\n      }\n    };\n\n    const maybeUpdatePauseState = () => {\n      if (focusPaused || hoverPaused) pauseTimers();\n      else resumeTimers();\n    };\n\n    // ────────────────────────────────────────────────────────────────────────────────\n    // Toast Lifecycle\n    // ────────────────────────────────────────────────────────────────────────────────\n\n    const scheduleRemoval = (id: string, duration: number) => {\n      if (duration <= 0) return;\n\n      const timeoutId = window.setTimeout(() => removeToast(id), duration);\n\n      timers.set(id, { remaining: duration, startedAt: Date.now(), timeoutId });\n    };\n\n    const addToast = (toast: ToastItem): string => {\n      const id = toast.id || crypto.randomUUID();\n      const item: NormalizedToast = { dismissible: true, duration: 5000, ...toast, id };\n\n      toasts.value = [...toasts.value, item].slice(-(props.max ?? 5));\n      emit('add', { id });\n\n      if (item.duration! > 0) scheduleRemoval(id, item.duration!);\n\n      return id;\n    };\n\n    const removeToast = (id: string) => {\n      // Already exiting or queued; skip to avoid double-processing\n      if (exitingIds.value.has(id) || dismissQueue.includes(id)) return;\n\n      if (isDismissing) {\n        dismissQueue.push(id);\n\n        return;\n      }\n\n      isDismissing = true;\n\n      executeRemoval(id);\n    };\n\n    const executeRemoval = (id: string) => {\n      // Guard: could have been removed since queue entry\n      if (exitingIds.value.has(id)) {\n        processNextInQueue();\n\n        return;\n      }\n\n      const item = toasts.value.find((t) => t.id === id);\n      const wrapper = containerRef.value?.querySelector<HTMLElement>(`[data-toast-id=\"${id}\"]`);\n\n      const finalize = () => {\n        setExiting(id, false);\n        toasts.value = toasts.value.filter((t) => t.id !== id);\n\n        // Clean up timer\n        const timer = timers.get(id);\n\n        if (timer) clearTimeout(timer.timeoutId);\n\n        timers.delete(id);\n        item?.onDismiss?.();\n        emit('dismiss', { id });\n        processNextInQueue();\n      };\n\n      if (wrapper) {\n        setExiting(id, true);\n        awaitExit(wrapper, finalize);\n      } else {\n        finalize();\n      }\n    };\n\n    const processNextInQueue = () => {\n      if (dismissQueue.length === 0) {\n        isDismissing = false;\n\n        return;\n      }\n\n      const nextId = dismissQueue.shift()!;\n\n      executeRemoval(nextId);\n    };\n    const updateToast = (id: string, updates: Partial<ToastItem>) => {\n      toasts.value = toasts.value.map((t) => (t.id === id ? { ...t, ...updates, id } : t));\n\n      if (updates.duration === undefined) return;\n\n      const timer = timers.get(id);\n\n      if (timer) clearTimeout(timer.timeoutId);\n\n      timers.delete(id);\n\n      if (updates.duration > 0) scheduleRemoval(id, updates.duration);\n    };\n    const clearAll = () => {\n      for (const [, t] of timers) clearTimeout(t.timeoutId);\n      timers.clear();\n      // Drain any pending queue entries and replace with the full current list so\n      // they exit one-by-one in order.\n      dismissQueue.length = 0;\n\n      const ids = toasts.value.map((t) => t.id).filter((id) => !exitingIds.value.has(id));\n\n      if (!ids.length) return;\n\n      dismissQueue.push(...ids);\n\n      if (!isDismissing) processNextInQueue();\n    };\n\n    onMount(() => {\n      const el = host.el as ToastElement;\n\n      el.add = addToast;\n      el.update = updateToast;\n      el.dismiss = removeToast;\n      el.clear = clearAll;\n    });\n\n    const urgencyOf = (t: NormalizedToast) => t.urgency ?? (t.color === 'error' ? 'assertive' : 'polite');\n\n    const setHovered = (hovered: boolean) => {\n      hoverPaused = hovered;\n      host.el.classList.toggle('hovered', hovered);\n      maybeUpdatePauseState();\n    };\n    const renderToastItem = (toast: NormalizedToast) => html`\n      <div\n        class=${classes({ exiting: () => exitingIds.value.has(toast.id), 'toast-wrapper': true })}\n        data-toast-id=${toast.id}\n        part=\"toast-wrapper\">\n        <bit-alert\n          color=${toast.color || (toast.urgency === 'assertive' ? 'error' : 'primary')}\n          variant=${toast.variant || 'solid'}\n          size=${toast.size || 'md'}\n          rounded=${toast.rounded || 'md'}\n          ?dismissible=${toast.dismissible}\n          ?horizontal=${toast.horizontal}\n          heading=${toast.heading || ''}\n          @dismiss=${() => removeToast(toast.id)}>\n          ${toast.meta ? html`<span slot=\"meta\">${toast.meta}</span>` : ''} ${toast.message}\n          ${renderToastActions(toast, () => removeToast(toast.id))}\n        </bit-alert>\n      </div>\n    `;\n\n    return html`\n      <div\n        class=\"toast-container\"\n        ref=${containerRef}\n        @pointerenter=${() => setHovered(true)}\n        @pointerleave=${() => setHovered(false)}\n        @focusin=${() => {\n          focusPaused = true;\n          maybeUpdatePauseState();\n        }}\n        @focusout=${() => {\n          focusPaused = false;\n          maybeUpdatePauseState();\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          ${each(() => toasts.value.filter((t) => urgencyOf(t) === 'polite'), {\n            key: (toast) => toast.id,\n            render: renderToastItem,\n          })}\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          ${each(() => toasts.value.filter((t) => urgencyOf(t) === 'assertive'), {\n            key: (toast) => toast.id,\n            render: renderToastItem,\n          })}\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n\n// ─── Singleton toast service ─────────────────────────────────────────────────\n\nconst getHost = (): ToastElement => {\n  let el = document.querySelector<ToastElement>('bit-toast');\n\n  if (!el) {\n    el = document.createElement('bit-toast') as ToastElement;\n    document.body.appendChild(el);\n  }\n\n  return el;\n};\n\n/**\n * Singleton service for triggering toasts without direct DOM references.\n *\n * @example\n * ```ts\n * import { toast } from '@vielzeug/buildit';\n *\n * toast.add({ message: 'Saved!', color: 'success' });\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 = {\n  /** Add a toast and return its id */\n  add(item: ToastItem): string {\n    return getHost().add(item);\n  },\n\n  /** Dismiss all toasts (animated) */\n  clear(): void {\n    getHost().clear();\n  },\n  /** Configure the auto-created container. Call before the first `add()` if the defaults need to change. */\n  configure(config: BitToastProps): void {\n    const el = getHost();\n\n    if (config.position) el.setAttribute('position', config.position);\n\n    if (config.max != null) el.setAttribute('max', String(config.max));\n  },\n\n  /**\n   * Shows a loading toast tied to a promise.\n   * Updates to success/error when the promise settles.\n   */\n  async 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    const id = toast.add({ color: 'primary', dismissible: false, duration: 0, message: messages.loading });\n\n    try {\n      const data = await promise;\n\n      toast.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      toast.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  /** Dismiss a toast by id */\n  remove(id: string): void {\n    getHost().dismiss(id);\n  },\n\n  /** Update an existing toast in-place */\n  update(id: string, updates: Partial<ToastItem>): void {\n    getHost().update(id, updates);\n  },\n};\n"],"mappings":";;;;;;;;;AAoGA,SAAS,EAAmB,GAAwB,GAAuB;AAGzE,QAFK,EAAM,SAAS,SAEb,CAAI;;QAEL,EAAM,QAAQ,KACb,MAAW,CAAI;;;oBAGJ,EAAO,SAAS,EAAM,SAAS,UAAU;sBACvC,EAAO,WAAW,QAAQ;2BACrB;AAEb,EADA,EAAO,WAAW,EAClB,GAAW;GACX;eACC,EAAO,MAAM;;UAGrB,CAAC;;MAjB6B;;AAsBrC,IAAa,IAAY,EAAsC,aAAa;CAC1E,OAAO;EACL,KAAK;EACL,UAAU;EACX;CACD,MAAM,EAAE,SAAM,SAAM,YAAS;EAC3B,IAAM,IAAS,EAA0B,EAAE,CAAC,EACtC,IAAa,kBAAoB,IAAI,KAAK,CAAC,EAC3C,IAAe,GAAqB,EAGpC,oBAAS,IAAI,KAA0E,EAGvF,IAAyB,EAAE,EAC7B,IAAe,IAGf,IAAc,IACd,IAAc,IAMZ,KAAc,GAAY,MAAmB;GACjD,IAAM,IAAO,IAAI,IAAI,EAAW,MAAM;AAKtC,GAHI,IAAO,EAAK,IAAI,EAAG,GAClB,EAAK,OAAO,EAAG,EAEpB,EAAW,QAAQ;KAOf,UAAoB;AACxB,QAAK,IAAM,CAAC,GAAI,MAAM,EAEpB,CADA,aAAa,EAAE,UAAU,EACzB,EAAO,IAAI,GAAI;IAAE,GAAG;IAAG,WAAW,KAAK,IAAI,GAAG,EAAE,aAAa,KAAK,KAAK,GAAG,EAAE,WAAW;IAAE,CAAC;KAIxF,UAAqB;AACzB,QAAK,IAAM,CAAC,GAAI,MAAM,GAAQ;AAC5B,QAAI,EAAE,aAAa,EAAG;IAEtB,IAAM,IAAY,OAAO,iBAAiB,EAAY,EAAG,EAAE,EAAE,UAAU;AAEvE,MAAO,IAAI,GAAI;KAAE,GAAG;KAAG,WAAW,EAAE;KAAW;KAAW,CAAC;;KAIzD,UAA8B;AAClC,GAAI,KAAe,IAAa,GAAa,GACxC,GAAc;KAOf,KAAmB,GAAY,MAAqB;AACxD,OAAI,KAAY,EAAG;GAEnB,IAAM,IAAY,OAAO,iBAAiB,EAAY,EAAG,EAAE,EAAS;AAEpE,KAAO,IAAI,GAAI;IAAE,WAAW;IAAU,WAAW,KAAK,KAAK;IAAE;IAAW,CAAC;KAGrE,KAAY,MAA6B;GAC7C,IAAM,IAAK,EAAM,MAAM,OAAO,YAAY,EACpC,IAAwB;IAAE,aAAa;IAAM,UAAU;IAAM,GAAG;IAAO;IAAI;AAOjF,UALA,EAAO,QAAQ,CAAC,GAAG,EAAO,OAAO,EAAK,CAAC,MAAM,EAAE,EAAM,OAAO,GAAG,EAC/D,EAAK,OAAO,EAAE,OAAI,CAAC,EAEf,EAAK,WAAY,KAAG,EAAgB,GAAI,EAAK,SAAU,EAEpD;KAGH,KAAe,MAAe;AAE9B,WAAW,MAAM,IAAI,EAAG,IAAI,EAAa,SAAS,EAAG,GAEzD;QAAI,GAAc;AAChB,OAAa,KAAK,EAAG;AAErB;;AAKF,IAFA,IAAe,IAEf,EAAe,EAAG;;KAGd,KAAkB,MAAe;AAErC,OAAI,EAAW,MAAM,IAAI,EAAG,EAAE;AAC5B,OAAoB;AAEpB;;GAGF,IAAM,IAAO,EAAO,MAAM,MAAM,MAAM,EAAE,OAAO,EAAG,EAC5C,IAAU,EAAa,OAAO,cAA2B,mBAAmB,EAAG,IAAI,EAEnF,UAAiB;AAErB,IADA,EAAW,GAAI,GAAM,EACrB,EAAO,QAAQ,EAAO,MAAM,QAAQ,MAAM,EAAE,OAAO,EAAG;IAGtD,IAAM,IAAQ,EAAO,IAAI,EAAG;AAO5B,IALI,KAAO,aAAa,EAAM,UAAU,EAExC,EAAO,OAAO,EAAG,EACjB,GAAM,aAAa,EACnB,EAAK,WAAW,EAAE,OAAI,CAAC,EACvB,GAAoB;;AAGtB,GAAI,KACF,EAAW,GAAI,GAAK,EACpB,EAAU,GAAS,EAAS,IAE5B,GAAU;KAIR,UAA2B;AAC/B,OAAI,EAAa,WAAW,GAAG;AAC7B,QAAe;AAEf;;AAKF,KAFe,EAAa,OAAO,CAEb;KAElB,KAAe,GAAY,MAAgC;AAG/D,OAFA,EAAO,QAAQ,EAAO,MAAM,KAAK,MAAO,EAAE,OAAO,IAAK;IAAE,GAAG;IAAG,GAAG;IAAS;IAAI,GAAG,EAAG,EAEhF,EAAQ,aAAa,KAAA,EAAW;GAEpC,IAAM,IAAQ,EAAO,IAAI,EAAG;AAM5B,GAJI,KAAO,aAAa,EAAM,UAAU,EAExC,EAAO,OAAO,EAAG,EAEb,EAAQ,WAAW,KAAG,EAAgB,GAAI,EAAQ,SAAS;KAE3D,UAAiB;AACrB,QAAK,IAAM,GAAG,MAAM,EAAQ,cAAa,EAAE,UAAU;AAIrD,GAHA,EAAO,OAAO,EAGd,EAAa,SAAS;GAEtB,IAAM,IAAM,EAAO,MAAM,KAAK,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAO,CAAC,EAAW,MAAM,IAAI,EAAG,CAAC;AAE9E,KAAI,WAET,EAAa,KAAK,GAAG,EAAI,EAEpB,KAAc,GAAoB;;AAGzC,UAAc;GACZ,IAAM,IAAK,EAAK;AAKhB,GAHA,EAAG,MAAM,GACT,EAAG,SAAS,GACZ,EAAG,UAAU,GACb,EAAG,QAAQ;IACX;EAEF,IAAM,KAAa,MAAuB,EAAE,YAAY,EAAE,UAAU,UAAU,cAAc,WAEtF,KAAc,MAAqB;AAGvC,GAFA,IAAc,GACd,EAAK,GAAG,UAAU,OAAO,WAAW,EAAQ,EAC5C,GAAuB;KAEnB,KAAmB,MAA2B,CAAI;;gBAE5C,EAAQ;GAAE,eAAe,EAAW,MAAM,IAAI,EAAM,GAAG;GAAE,iBAAiB;GAAM,CAAC,CAAC;wBAC1E,EAAM,GAAG;;;kBAGf,EAAM,UAAU,EAAM,YAAY,cAAc,UAAU,WAAW;oBACnE,EAAM,WAAW,QAAQ;iBAC5B,EAAM,QAAQ,KAAK;oBAChB,EAAM,WAAW,KAAK;yBACjB,EAAM,YAAY;wBACnB,EAAM,WAAW;oBACrB,EAAM,WAAW,GAAG;2BACb,EAAY,EAAM,GAAG,CAAC;YACrC,EAAM,OAAO,CAAI,qBAAqB,EAAM,KAAK,WAAW,GAAG,GAAG,EAAM,QAAQ;YAChF,EAAmB,SAAa,EAAY,EAAM,GAAG,CAAC,CAAC;;;;AAK/D,SAAO,CAAI;;;cAGD,EAAa;8BACG,EAAW,GAAK,CAAC;8BACjB,EAAW,GAAM,CAAC;yBACvB;AAEf,GADA,IAAc,IACd,GAAuB;IACvB;0BACgB;AAEhB,GADA,IAAc,IACd,GAAuB;IACvB;;;;;;;;;;YAUE,QAAW,EAAO,MAAM,QAAQ,MAAM,EAAU,EAAE,KAAK,SAAS,EAAE;GAClE,MAAM,MAAU,EAAM;GACtB,QAAQ;GACT,CAAC,CAAC;;;;;;;;;;YAUD,QAAW,EAAO,MAAM,QAAQ,MAAM,EAAU,EAAE,KAAK,YAAY,EAAE;GACrE,MAAM,MAAU,EAAM;GACtB,QAAQ;GACT,CAAC,CAAC;;;;;;CAMX,QAAQ,CAAC,GAAoB,EAAgB;CAC9C,CAAC,EAII,UAA8B;CAClC,IAAI,IAAK,SAAS,cAA4B,YAAY;AAO1D,QALK,MACH,IAAK,SAAS,cAAc,YAAY,EACxC,SAAS,KAAK,YAAY,EAAG,GAGxB;GAsBI,IAAQ;CAEnB,IAAI,GAAyB;AAC3B,SAAO,GAAS,CAAC,IAAI,EAAK;;CAI5B,QAAc;AACZ,KAAS,CAAC,OAAO;;CAGnB,UAAU,GAA6B;EACrC,IAAM,IAAK,GAAS;AAIpB,EAFI,EAAO,YAAU,EAAG,aAAa,YAAY,EAAO,SAAS,EAE7D,EAAO,OAAO,QAAM,EAAG,aAAa,OAAO,OAAO,EAAO,IAAI,CAAC;;CAOpE,MAAM,QACJ,GACA,GAKY;EACZ,IAAM,IAAK,EAAM,IAAI;GAAE,OAAO;GAAW,aAAa;GAAO,UAAU;GAAG,SAAS,EAAS;GAAS,CAAC;AAEtG,MAAI;GACF,IAAM,IAAO,MAAM;AASnB,UAPA,EAAM,OAAO,GAAI;IACf,OAAO;IACP,aAAa;IACb,UAAU;IACV,SAAS,OAAO,EAAS,WAAY,aAAa,EAAS,QAAQ,EAAK,GAAG,EAAS;IACrF,CAAC,EAEK;WACA,GAAK;AAOZ,SANA,EAAM,OAAO,GAAI;IACf,OAAO;IACP,aAAa;IACb,UAAU;IACV,SAAS,OAAO,EAAS,SAAU,aAAa,EAAS,MAAM,EAAI,GAAG,EAAS;IAChF,CAAC,EACI;;;CAKV,OAAO,GAAkB;AACvB,KAAS,CAAC,QAAQ,EAAG;;CAIvB,OAAO,GAAY,GAAmC;AACpD,KAAS,CAAC,OAAO,GAAI,EAAQ;;CAEhC"}

package/dist/tooltip.cjs

@@ -1,15 +1,15 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const t=require(`./overlay/tooltip/tooltip.css?inline.cjs`);let n=require(`@vielzeug/craftit`),r=require(`@vielzeug/floatit`);var i=8,a=4,o=(0,n.defineComponent)({props:{"close-delay":{default:0},content:{default:``},delay:{default:0},disabled:{default:!1},open:{default:void 0},placement:{default:`top`},size:{default:void 0},trigger:{default:`hover,focus`},variant:{default:void 0}},setup({host:e,props:t}){let o=(0,n.signal)(!1),s=(0,n.signal)(`top`),c=null,l=null,u=null,d=null,f=(0,n.createId)(`tooltip`),p=(0,n.computed)(()=>String(t.trigger.value).split(`,`).map(e=>e.trim()).filter(Boolean));function m(){return(e.shadowRoot?.querySelector(`slot:not([name])`))?.assignedElements({flatten:!0})?.[0]??null}function h(){if(!d)return;let e=m();e&&(0,r.computePosition)(e,d,{middleware:[(0,r.offset)(i),(0,r.flip)(),(0,r.shift)({padding:6})],placement:t.placement.value}).then(({placement:e,x:t,y:n})=>{if(!d)return;let r=e.split(`-`)[0],i=r===`left`?t-a:t;d.style.left=`${i}px`,d.style.top=`${n}px`,s.value=r})}function g(){t.open.value!==void 0||t.disabled.value||!t.content.value&&!(((e.shadowRoot?.querySelector(`slot[name="content"]`))?.assignedNodes({flatten:!0}).length??0)>0)||(u&&=(clearTimeout(u),null),l&&clearTimeout(l),l=setTimeout(()=>{o.value=!0,d&&!d.matches(`:popover-open`)&&d.showPopover();let e=m();e&&d?(c?.(),c=(0,r.autoUpdate)(e,d,h)):requestAnimationFrame(()=>h())},Number(t.delay.value)||0))}function _(){if(t.open.value!==void 0)return;l&&=(clearTimeout(l),null);let e=Number(t[`close-delay`].value)||0;e>0?(u&&clearTimeout(u),u=setTimeout(()=>{u=null,v()},e)):v()}function v(){c?.(),c=null,o.value=!1,d?.matches(`:popover-open`)&&d.hidePopover()}function y(){o.value?_():g()}(0,n.onMount)(()=>{let i=e.shadowRoot?.querySelector(`slot:not([name])`);if(!i)return;let a=()=>{s();let e=i.assignedElements({flatten:!0})[0];if(!e)return;e.setAttribute(`aria-describedby`,f);let t=p.value;t.includes(`hover`)&&(e.addEventListener(`pointerenter`,g),e.addEventListener(`pointerleave`,_)),t.includes(`focus`)&&(e.addEventListener(`focusin`,g),e.addEventListener(`focusout`,_)),t.includes(`click`)&&e.addEventListener(`click`,y),document.addEventListener(`keydown`,b)},s=()=>{let e=i.assignedElements({flatten:!0})[0];e&&(e.removeAttribute(`aria-describedby`),e.removeEventListener(`pointerenter`,g),e.removeEventListener(`pointerleave`,_),e.removeEventListener(`focusin`,g),e.removeEventListener(`focusout`,_),e.removeEventListener(`click`,y),document.removeEventListener(`keydown`,b))};return(0,n.onSlotChange)(`default`,a),(0,n.watch)(t.open,e=>{if(e!=null)if(e){o.value=!0,d&&!d.matches(`:popover-open`)&&d.showPopover();let e=m();e&&d?(c?.(),c=(0,r.autoUpdate)(e,d,h)):requestAnimationFrame(()=>h())}else v()}),()=>{s(),l&&clearTimeout(l),u&&clearTimeout(u),c?.(),c=null,d?.matches(`:popover-open`)&&d.hidePopover()}});function b(e){e.key===`Escape`&&_()}return n.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./inputs/shared/bundles.cjs`),t=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const n=require(`./packages/craftit/dist/controls/overlay-control.cjs`);require(`./packages/craftit/dist/controls.cjs`);const r=require(`./utils/aria.cjs`),i=require(`./overlay/tooltip/tooltip.css?inline.cjs`);let a=require(`@vielzeug/craftit`),o=require(`@vielzeug/floatit`);var s=8,c=4,l={...e.sizableBundle,...e.disablableBundle,"close-delay":0,content:``,delay:0,open:void 0,placement:`top`,trigger:`hover,focus`,variant:void 0},u=(0,a.define)(`bit-tooltip`,{props:l,setup({props:e,shadowRoot:t,slots:i}){let l=(0,a.signal)(!1),u=(0,a.computed)(()=>!!e.disabled.value),d=(0,a.computed)(()=>e.open.value!==void 0),f=(0,a.signal)(`top`),p=null,m=null,h=null,g=(0,a.createId)(`tooltip`),_=(0,a.computed)(()=>String(e.trigger.value).split(`,`).map(e=>e.trim()).filter(Boolean)),v=()=>{p&&=(clearTimeout(p),null)},y=()=>{m&&=(clearTimeout(m),null)};function b(){return(t?.querySelector(`slot:not([name])`))?.assignedElements({flatten:!0})?.[0]??null}function x(){if(!h)return;let t=b();if(!t)return;let{placement:n,x:r,y:i}=(0,o.computePosition)(t,h,{middleware:[(0,o.offset)(s),(0,o.flip)(),(0,o.shift)({padding:6})],placement:e.placement.value}),a=n.split(`-`)[0],l=a===`left`?r-c:r;h.style.left=`${l}px`,h.style.top=`${i}px`,f.value=a}let S=n.i({disabled:u,elements:{boundary:document.body,panel:h,trigger:b()},isOpen:l,positioner:{floating:()=>h,reference:()=>b(),update:x},restoreFocus:!1,setOpen:e=>{if(e){l.value=!0,h&&!h.matches(`:popover-open`)&&h.showPopover();return}l.value=!1,h?.matches(`:popover-open`)&&h.hidePopover()}});function C(){d.value||u.value||!e.content.value&&!i.has(`content`).value||(y(),v(),p=setTimeout(()=>{S.open(`trigger`)},Number(e.delay.value)||0))}function w(){if(d.value)return;v();let t=Number(e[`close-delay`].value)||0;t>0?(y(),m=setTimeout(()=>{m=null,T()},t)):T()}function T(){S.close(`trigger`,!1)}function E(){l.value?w():C()}(0,a.onMount)(()=>{let n=t?.querySelector(`slot:not([name])`),o=(0,a.createCleanupSignal)();return n?((0,a.watch)(i.elements(),()=>{o.clear();let e=n.assignedElements({flatten:!0})[0];if(!e)return;let t=r.syncAria(e,{describedby:()=>g}),i=[],a=(e,t,n,r)=>{e.addEventListener(t,n,r),i.push(()=>e.removeEventListener(t,n,r))},s=_.value;s.includes(`hover`)&&(a(e,`pointerenter`,C),a(e,`pointerleave`,w)),s.includes(`focus`)&&(a(e,`focusin`,C),a(e,`focusout`,w)),s.includes(`click`)&&a(e,`click`,E),a(document,`keydown`,D),o.set(()=>{t();for(let e of i)e()})},{immediate:!0}),(0,a.watch)(e.open,e=>{e!=null&&(e?S.open(`programmatic`):S.close(`programmatic`,!1))}),()=>{o.clear(),v(),y()}):void 0});function D(e){e.key===`Escape`&&S.close(`escape`,!1)}return a.html`
       <slot></slot>
       <div
         class="tooltip"
         part="tooltip"
-        id="${f}"
+        id="${g}"
         role="tooltip"
         popover="manual"
-        ref=${e=>{d=e}}
-        :data-placement="${s}"
-        :aria-hidden="${()=>String(!o.value)}">
-        <slot name="content">${()=>t.content.value}</slot>
+        ref=${e=>{h=e}}
+        :data-placement="${f}"
+        :aria-hidden="${()=>String(!l.value)}">
+        <slot name="content">${()=>e.content.value}</slot>
       </div>
-    `},styles:[e.forcedColorsMixin,t.default],tag:`bit-tooltip`});exports.TOOLTIP_TAG=o;
+    `},styles:[t.forcedColorsMixin,i.default]});exports.TOOLTIP_TAG=u;
 //# sourceMappingURL=tooltip.cjs.map

package/dist/tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.cjs","names":[],"sources":["../src/overlay/tooltip/tooltip.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/floatit';\n\nimport { computed, createId, defineComponent, html, onMount, onSlotChange, signal, watch } from '@vielzeug/craftit';\nimport { autoUpdate, computePosition, flip, offset, shift } from '@vielzeug/floatit';\n\nimport type { ComponentSize } from '../../types';\n\nimport { forcedColorsMixin } from '../../styles';\n\ntype TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\ntype TooltipTrigger = 'hover' | 'focus' | 'click';\n\nconst TOOLTIP_OFFSET = 8; // gap from trigger to tooltip edge\nconst LEFT_GAP_COMPENSATION = 4; // left placement looks visually tighter in practice\n\nimport styles from './tooltip.css?inline';\n\n/** Tooltip component properties */\nexport type BitTooltipProps = {\n  /** Hide delay in ms (useful to keep tooltip open when moving focus between trigger and tooltip) */\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. When provided, the tooltip acts as a controlled component and ignores trigger events for open/close. */\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 — comma-separated if multiple, e.g. \"hover,focus\" */\n  trigger?: string;\n  /** Visual variant: 'dark' (default) or 'light' */\n  variant?: 'dark' | 'light';\n};\n\n/**\n * A lightweight tooltip shown on hover/focus/click relative to the slotted trigger.\n *\n * @element bit-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 * @example\n * ```html\n * <bit-tooltip content=\"Copy to clipboard\">\n *   <button>Copy</button>\n * </bit-tooltip>\n *\n * <bit-tooltip placement=\"right\" trigger=\"focus,hover\" content=\"Required field\">\n *   <input type=\"text\" />\n * </bit-tooltip>\n * ```\n */\nexport const TOOLTIP_TAG = defineComponent<BitTooltipProps>({\n  props: {\n    'close-delay': { default: 0 },\n    content: { default: '' },\n    delay: { default: 0 },\n    disabled: { default: false },\n    open: { default: undefined },\n    placement: { default: 'top' },\n    size: { default: undefined },\n    trigger: { default: 'hover,focus' },\n    variant: { default: undefined },\n  },\n  setup({ host, props }) {\n    const visible = signal(false);\n    const activePlacement = signal<TooltipPlacement>('top');\n    let autoUpdateCleanup: (() => void) | null = null;\n    let showTimer: ReturnType<typeof setTimeout> | null = null;\n    let hideTimer: ReturnType<typeof setTimeout> | null = null;\n    let tooltipEl: HTMLElement | null = null;\n    const tooltipId = createId('tooltip');\n    const triggers = computed<TooltipTrigger[]>(() =>\n      String(props.trigger.value)\n        .split(',')\n        .map((t: string) => t.trim() as TooltipTrigger)\n        .filter(Boolean),\n    );\n\n    function getTriggerEl(): Element | null {\n      // First slotted element is the trigger\n      const slot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n      const assigned = slot?.assignedElements({ flatten: true });\n\n      return assigned?.[0] ?? null;\n    }\n    function updatePosition() {\n      if (!tooltipEl) return;\n\n      const triggerEl = getTriggerEl();\n\n      if (!triggerEl) return;\n\n      computePosition(triggerEl, tooltipEl, {\n        middleware: [offset(TOOLTIP_OFFSET), flip(), shift({ padding: 6 })],\n        placement: props.placement.value as Placement,\n      }).then(({ placement, x, y }) => {\n        if (!tooltipEl) return;\n\n        const side = placement.split('-')[0] as TooltipPlacement;\n        const adjustedX = side === 'left' ? x - LEFT_GAP_COMPENSATION : x;\n\n        tooltipEl.style.left = `${adjustedX}px`;\n        tooltipEl.style.top = `${y}px`;\n\n        activePlacement.value = side;\n      });\n    }\n    function show() {\n      if (props.open.value !== undefined) return; // controlled mode\n\n      const hasSlottedContent = () => {\n        const contentSlot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"content\"]');\n\n        return (contentSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n      };\n\n      if (props.disabled.value || (!props.content.value && !hasSlottedContent())) return;\n\n      if (hideTimer) {\n        clearTimeout(hideTimer);\n        hideTimer = null;\n      }\n\n      if (showTimer) clearTimeout(showTimer);\n\n      showTimer = setTimeout(\n        () => {\n          visible.value = true;\n\n          if (tooltipEl && !tooltipEl.matches(':popover-open')) {\n            tooltipEl.showPopover();\n          }\n\n          // Start autoUpdate: repositions on scroll, resize, and reference size change\n          const triggerEl = getTriggerEl();\n\n          if (triggerEl && tooltipEl) {\n            autoUpdateCleanup?.();\n            autoUpdateCleanup = autoUpdate(triggerEl, tooltipEl, updatePosition);\n          } else {\n            requestAnimationFrame(() => updatePosition());\n          }\n        },\n        Number(props.delay.value) || 0,\n      );\n    }\n    function hide() {\n      if (props.open.value !== undefined) return; // controlled mode\n\n      if (showTimer) {\n        clearTimeout(showTimer);\n        showTimer = null;\n      }\n\n      const closeDelay = Number(props['close-delay'].value) || 0;\n\n      if (closeDelay > 0) {\n        if (hideTimer) clearTimeout(hideTimer);\n\n        hideTimer = setTimeout(() => {\n          hideTimer = null;\n          _doHide();\n        }, closeDelay);\n      } else {\n        _doHide();\n      }\n    }\n    function _doHide() {\n      autoUpdateCleanup?.();\n      autoUpdateCleanup = null;\n      visible.value = false;\n\n      if (tooltipEl?.matches(':popover-open')) {\n        tooltipEl.hidePopover();\n      }\n    }\n    function toggleClick() {\n      if (visible.value) hide();\n      else show();\n    }\n    onMount(() => {\n      const slot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n\n      if (!slot) return;\n\n      const bindTriggerEvents = () => {\n        unbindTriggerEvents(); // clean up previous bindings\n\n        const triggerEl = slot.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n\n        if (!triggerEl) return;\n\n        triggerEl.setAttribute('aria-describedby', tooltipId);\n\n        const t = triggers.value;\n\n        if (t.includes('hover')) {\n          triggerEl.addEventListener('pointerenter', show);\n          triggerEl.addEventListener('pointerleave', hide);\n        }\n\n        if (t.includes('focus')) {\n          triggerEl.addEventListener('focusin', show);\n          triggerEl.addEventListener('focusout', hide);\n        }\n\n        if (t.includes('click')) {\n          triggerEl.addEventListener('click', toggleClick);\n        }\n\n        // Keyboard escape to dismiss\n        document.addEventListener('keydown', handleKeydown);\n      };\n      const unbindTriggerEvents = () => {\n        const triggerEl = slot.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n\n        if (!triggerEl) return;\n\n        triggerEl.removeAttribute('aria-describedby');\n        triggerEl.removeEventListener('pointerenter', show);\n        triggerEl.removeEventListener('pointerleave', hide);\n        triggerEl.removeEventListener('focusin', show);\n        triggerEl.removeEventListener('focusout', hide);\n        triggerEl.removeEventListener('click', toggleClick);\n        document.removeEventListener('keydown', handleKeydown);\n      };\n\n      onSlotChange('default', bindTriggerEvents);\n      // Controlled mode: watch the `open` prop and show/hide accordingly\n      watch(props.open, (openVal) => {\n        if (openVal === undefined || openVal === null) return;\n\n        if (openVal) {\n          visible.value = true;\n\n          if (tooltipEl && !tooltipEl.matches(':popover-open')) tooltipEl.showPopover();\n\n          const triggerEl = getTriggerEl();\n\n          if (triggerEl && tooltipEl) {\n            autoUpdateCleanup?.();\n            autoUpdateCleanup = autoUpdate(triggerEl, tooltipEl, updatePosition);\n          } else {\n            requestAnimationFrame(() => updatePosition());\n          }\n        } else {\n          _doHide();\n        }\n      });\n\n      return () => {\n        unbindTriggerEvents();\n\n        if (showTimer) clearTimeout(showTimer);\n\n        if (hideTimer) clearTimeout(hideTimer);\n\n        autoUpdateCleanup?.();\n        autoUpdateCleanup = null;\n\n        if (tooltipEl?.matches(':popover-open')) {\n          tooltipEl.hidePopover();\n        }\n      };\n    });\n    function handleKeydown(e: KeyboardEvent) {\n      if (e.key === 'Escape') hide();\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=${(el: HTMLElement) => {\n          tooltipEl = el;\n        }}\n        :data-placement=\"${activePlacement}\"\n        :aria-hidden=\"${() => String(!visible.value)}\">\n        <slot name=\"content\">${() => props.content.value}</slot>\n      </div>\n    `;\n  },\n  styles: [forcedColorsMixin, styles],\n  tag: 'bit-tooltip',\n});\n"],"mappings":"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"}
+{"version":3,"file":"tooltip.cjs","names":[],"sources":["../src/overlay/tooltip/tooltip.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/floatit';\n\nimport { define, createCleanupSignal, computed, createId, html, onMount, signal, watch } from '@vielzeug/craftit';\nimport { createOverlayControl } from '@vielzeug/craftit/controls';\nimport { computePosition, flip, offset, shift } from '@vielzeug/floatit';\n\nimport type { ComponentSize } from '../../types';\n\nimport { disablableBundle, sizableBundle, type PropBundle } from '../../inputs/shared/bundles';\nimport { forcedColorsMixin } from '../../styles';\nimport { syncAria } from '../../utils/aria';\n\ntype TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\ntype TooltipTrigger = 'hover' | 'focus' | 'click';\n\nconst TOOLTIP_OFFSET = 8; // gap from trigger to tooltip edge\nconst LEFT_GAP_COMPENSATION = 4; // left placement looks visually tighter in practice\n\nimport styles from './tooltip.css?inline';\n\n/** Tooltip component properties */\nexport type BitTooltipProps = {\n  /** Hide delay in ms (useful to keep tooltip open when moving focus between trigger and tooltip) */\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. When provided, the tooltip acts as a controlled component and ignores trigger events for open/close. */\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 — comma-separated if multiple, e.g. \"hover,focus\" */\n  trigger?: string;\n  /** Visual variant: 'dark' (default) or 'light' */\n  variant?: 'dark' | 'light';\n};\n\nconst tooltipProps = {\n  ...sizableBundle,\n  ...disablableBundle,\n  'close-delay': 0,\n  content: '',\n  delay: 0,\n  open: undefined,\n  placement: 'top',\n  trigger: 'hover,focus',\n  variant: undefined,\n} satisfies PropBundle<BitTooltipProps>;\n\n/**\n * A lightweight tooltip shown on hover/focus/click relative to the slotted trigger.\n *\n * @element bit-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 * @example\n * ```html\n * <bit-tooltip content=\"Copy to clipboard\">\n *   <button>Copy</button>\n * </bit-tooltip>\n *\n * <bit-tooltip placement=\"right\" trigger=\"focus,hover\" content=\"Required field\">\n *   <input type=\"text\" />\n * </bit-tooltip>\n * ```\n */\nexport const TOOLTIP_TAG = define('bit-tooltip', {\n  props: tooltipProps,\n  setup({ props, shadowRoot, slots }) {\n    const visible = signal(false);\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const isControlled = computed(() => props.open.value !== undefined);\n    const activePlacement = signal<TooltipPlacement>('top');\n    let showTimer: ReturnType<typeof setTimeout> | null = null;\n    let hideTimer: ReturnType<typeof setTimeout> | null = null;\n    let tooltipEl: HTMLElement | null = null;\n    const tooltipId = createId('tooltip');\n    const triggers = computed<TooltipTrigger[]>(() =>\n      String(props.trigger.value)\n        .split(',')\n        .map((t: string) => t.trim() as TooltipTrigger)\n        .filter(Boolean),\n    );\n    const clearShowTimer = () => {\n      if (!showTimer) return;\n\n      clearTimeout(showTimer);\n      showTimer = null;\n    };\n    const clearHideTimer = () => {\n      if (!hideTimer) return;\n\n      clearTimeout(hideTimer);\n      hideTimer = null;\n    };\n\n    function getTriggerEl(): Element | null {\n      // First slotted element is the trigger\n      const slot = shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n      const assigned = slot?.assignedElements({ flatten: true });\n\n      return assigned?.[0] ?? null;\n    }\n    function updatePosition() {\n      if (!tooltipEl) return;\n\n      const triggerEl = getTriggerEl();\n\n      if (!triggerEl) return;\n\n      const { placement, x, y } = computePosition(triggerEl, tooltipEl, {\n        middleware: [offset(TOOLTIP_OFFSET), flip(), shift({ padding: 6 })],\n        placement: props.placement.value as Placement,\n      });\n\n      const side = placement.split('-')[0] as TooltipPlacement;\n      const adjustedX = side === 'left' ? x - LEFT_GAP_COMPENSATION : x;\n\n      tooltipEl.style.left = `${adjustedX}px`;\n      tooltipEl.style.top = `${y}px`;\n\n      activePlacement.value = side;\n    }\n\n    const overlay = createOverlayControl({\n      disabled: isDisabled,\n      elements: {\n        boundary: document.body,\n        panel: tooltipEl,\n        trigger: getTriggerEl() as HTMLElement | null,\n      },\n      isOpen: visible,\n      positioner: {\n        floating: () => tooltipEl,\n        reference: () => getTriggerEl() as HTMLElement | null,\n        update: updatePosition,\n      },\n      restoreFocus: false,\n      setOpen: (next) => {\n        if (next) {\n          visible.value = true;\n\n          if (tooltipEl && !tooltipEl.matches(':popover-open')) {\n            tooltipEl.showPopover();\n          }\n\n          return;\n        }\n\n        visible.value = false;\n\n        if (tooltipEl?.matches(':popover-open')) {\n          tooltipEl.hidePopover();\n        }\n      },\n    });\n\n    function show() {\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      showTimer = setTimeout(\n        () => {\n          overlay.open('trigger');\n        },\n        Number(props.delay.value) || 0,\n      );\n    }\n    function hide() {\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\n        hideTimer = setTimeout(() => {\n          hideTimer = null;\n          closeNow();\n        }, closeDelay);\n      } else {\n        closeNow();\n      }\n    }\n    function closeNow() {\n      overlay.close('trigger', false);\n    }\n    function toggleClick() {\n      if (visible.value) hide();\n      else show();\n    }\n    onMount(() => {\n      const slot = shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n      const triggerBinding = createCleanupSignal();\n\n      if (!slot) return;\n\n      const bindTriggerEvents = () => {\n        triggerBinding.clear();\n\n        const triggerEl = slot.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n\n        if (!triggerEl) return;\n\n        const removeAria = syncAria(triggerEl, {\n          describedby: () => tooltipId,\n        });\n\n        const cleanups: Array<() => void> = [];\n        const add = (\n          target: EventTarget,\n          event: string,\n          listener: EventListener,\n          options?: AddEventListenerOptions,\n        ) => {\n          target.addEventListener(event, listener, options);\n          cleanups.push(() => target.removeEventListener(event, listener, options));\n        };\n\n        const t = triggers.value;\n\n        if (t.includes('hover')) {\n          add(triggerEl, 'pointerenter', show as EventListener);\n          add(triggerEl, 'pointerleave', hide as EventListener);\n        }\n\n        if (t.includes('focus')) {\n          add(triggerEl, 'focusin', show as EventListener);\n          add(triggerEl, 'focusout', hide as EventListener);\n        }\n\n        if (t.includes('click')) {\n          add(triggerEl, 'click', toggleClick as EventListener);\n        }\n\n        // Keyboard escape to dismiss\n        add(document, 'keydown', handleKeydown as EventListener);\n\n        triggerBinding.set(() => {\n          removeAria();\n\n          for (const cleanup of cleanups) cleanup();\n        });\n      };\n\n      watch(slots.elements(), bindTriggerEvents, { immediate: true });\n      // Controlled mode: watch the `open` prop and show/hide accordingly\n      watch(props.open, (openVal) => {\n        if (openVal === undefined || openVal === null) return;\n\n        if (openVal) {\n          overlay.open('programmatic');\n        } else {\n          overlay.close('programmatic', false);\n        }\n      });\n\n      return () => {\n        triggerBinding.clear();\n\n        clearShowTimer();\n        clearHideTimer();\n      };\n    });\n    function handleKeydown(e: KeyboardEvent) {\n      if (e.key === 'Escape') overlay.close('escape', false);\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=${(el: HTMLElement) => {\n          tooltipEl = el;\n        }}\n        :data-placement=\"${activePlacement}\"\n        :aria-hidden=\"${() => String(!visible.value)}\">\n        <slot name=\"content\">${() => props.content.value}</slot>\n      </div>\n    `;\n  },\n  styles: [forcedColorsMixin, styles],\n});\n"],"mappings":"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"}