@mortenbrudvik/waveui 0.10.0 → 0.12.0

package/dist/components/feedback/Toaster.mjs

@@ -8,22 +8,22 @@ import { useEventCallback as s } from "../../hooks/useEventCallback.mjs";
 import { useId as c } from "../../hooks/useId.mjs";
 import { getDirection as l } from "../../lib/direction.mjs";
 import { getFirstTabbable as u, getTabbableElements as d, isConnectedAndFocusable as f } from "../../lib/focus.mjs";
-import { useMergedRefs as ee } from "../../hooks/useMergedRefs.mjs";
-import { joinIds as p } from "../../lib/aria.mjs";
-import { usePresence as m } from "../../hooks/usePresence.mjs";
-import { getOpenLayers as h, isInsideLayerTree as g, subscribeLayers as _ } from "../../lib/layers.mjs";
-import { useDirection as te } from "../../hooks/useDirection.mjs";
-import { Portal as v } from "../portal/Portal.mjs";
-import { focusRing as ne } from "../../lib/styles.mjs";
-import { isEditableTarget as re, isOwnEvent as ie } from "../../lib/events.mjs";
-import { usePreserveFocus as ae } from "../../hooks/usePreserveFocus.mjs";
-import { StatusText as oe, getStatusLabel as y } from "./MessageBar.status.mjs";
-import { ToastContext as se, ToasterContext as b } from "./Toast.context.mjs";
-import { ToastRoot as ce } from "./Toast.root.mjs";
-import * as x from "react";
-import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import { useMergedRefs as p } from "../../hooks/useMergedRefs.mjs";
+import { joinIds as m } from "../../lib/aria.mjs";
+import { usePresence as ee } from "../../hooks/usePresence.mjs";
+import { useDirection as h } from "../../hooks/useDirection.mjs";
+import { getOpenLayers as g, isInsideLayerTree as _, subscribeLayers as v } from "../../lib/layers.mjs";
+import { focusRing as te } from "../../lib/styles.mjs";
+import { Portal as y } from "../portal/Portal.mjs";
+import { isEditableTarget as ne, isOwnEvent as re } from "../../lib/events.mjs";
+import { usePreserveFocus as ie } from "../../hooks/usePreserveFocus.mjs";
+import { StatusText as ae, getStatusLabel as b } from "./MessageBar.status.mjs";
+import { ToastContext as oe, ToasterContext as x } from "./Toast.context.mjs";
+import { ToastRoot as se } from "./Toast.root.mjs";
+import * as S from "react";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
 //#region src/components/feedback/Toaster.tsx
-function le(e, t) {
+function ce(e, t) {
 	let n = 0, r = !1;
 	for (let t of e) t.shown ? t.dismissed || (n += 1) : r = !0;
 	return !r || n >= t ? e : e.map((e) => e.shown || n >= t ? e : (n += 1, {
@@ -31,7 +31,7 @@ function le(e, t) {
 		shown: !0
 	}));
 }
-function w(e, t) {
+function T(e, t) {
 	let n = e.findIndex((e) => e.id === t);
 	if (n === -1) return e;
 	let r = e[n];
@@ -43,40 +43,40 @@ function w(e, t) {
 		dismissed: !0
 	}, i;
 }
-function T(e) {
+function E(e) {
 	return e.every((e) => e.shown && e.dismissed) ? e : e.filter((e) => e.shown).map((e) => e.dismissed ? e : {
 		...e,
 		dismissed: !0
 	});
 }
-function E(e) {
+function D(e) {
 	let t;
 	for (let n of e) n.shown && !n.dismissed && (!t || n.seq > t.seq) && (t = n);
 	return t;
 }
-function D(e, t) {
-	return e.contains(t) ? !0 : h().some((n) => {
+function O(e, t) {
+	return e.contains(t) ? !0 : g().some((n) => {
 		let r = n.getAnchor();
-		return r !== null && e.contains(r) && g(n.id, t);
+		return r !== null && e.contains(r) && _(n.id, t);
 	});
 }
-function ue(e, t) {
+function le(e, t) {
 	let n = t?.getDismissButton() ?? null;
 	return d(e).some((e) => e !== n);
 }
-function O(e) {
+function k(e) {
 	return e === void 0 ? Infinity : e >= 1 ? Math.floor(e) : 1;
 }
-var k = {
+var A = {
 	dispatchToast: (e, t) => (o(e) ? e.toastId : t?.toastId) ?? "",
 	dismissToast: () => {},
 	dismissAllToasts: () => {}
-}, A = "useToastController must be used within <Toaster>. Wrap your app (or the part of it that shows toasts) in <Toaster>: it provides the controller to its children.";
-function j() {
-	return x.useContext(b) || (t("useToastController", "<Toaster>", A), k);
+}, j = "useToastController must be used within <Toaster>. Wrap your app (or the part of it that shows toasts) in <Toaster>: it provides the controller to its children.";
+function M() {
+	return S.useContext(x) || (t("useToastController", "<Toaster>", j), A);
 }
-var de = 5e3;
-function M(e) {
+var ue = 5e3;
+function N(e) {
 	let t = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Map(), i = !1, a = !1, o = (o) => {
 		let s = t.get(o);
 		if (!s) return;
@@ -119,67 +119,84 @@ function M(e) {
 		}
 	};
 }
-var N = {
-	"top-start": "top-4 start-4 ms-(--wave-toaster-offset)",
-	"top-end": "top-4 end-4 me-(--wave-toaster-offset)",
-	"bottom-start": "bottom-4 start-4 ms-(--wave-toaster-offset)",
-	"bottom-end": "bottom-4 end-4 me-(--wave-toaster-offset)",
-	"top-right": "top-4 right-4 mr-(--wave-toaster-offset)",
-	"top-left": "top-4 left-4 ml-(--wave-toaster-offset)",
-	"bottom-right": "bottom-4 right-4 mr-(--wave-toaster-offset)",
-	"bottom-left": "bottom-4 left-4 ml-(--wave-toaster-offset)"
-}, P = 16;
-function F(e, t) {
+var P = {
+	"top-start": "top-4 start-4 ms-(--wave-toaster-offset) mt-(--wave-toaster-offset-block)",
+	"top-end": "top-4 end-4 me-(--wave-toaster-offset) mt-(--wave-toaster-offset-block)",
+	"bottom-start": "bottom-4 start-4 ms-(--wave-toaster-offset) mb-(--wave-toaster-offset-block)",
+	"bottom-end": "bottom-4 end-4 me-(--wave-toaster-offset) mb-(--wave-toaster-offset-block)",
+	"top-right": "top-4 right-4 mr-(--wave-toaster-offset) mt-(--wave-toaster-offset-block)",
+	"top-left": "top-4 left-4 ml-(--wave-toaster-offset) mt-(--wave-toaster-offset-block)",
+	"bottom-right": "bottom-4 right-4 mr-(--wave-toaster-offset) mb-(--wave-toaster-offset-block)",
+	"bottom-left": "bottom-4 left-4 ml-(--wave-toaster-offset) mb-(--wave-toaster-offset-block)"
+}, F = 16;
+function I(e, t) {
 	let n = e.slice(e.indexOf("-") + 1);
 	if (n === "right" || n === "left") return n === "right";
 	let r = l(t) === "rtl";
 	return n === "end" ? !r : r;
 }
-function fe(e, t) {
-	let n = h().filter((e) => e.kind === "modal");
-	if (n.length === 0) return 0;
+var L = {
+	inline: 0,
+	block: 0
+};
+function R() {
+	return g().filter((e) => e.kind === "modal" || e.kind === "dialog");
+}
+function de() {
+	let e = /* @__PURE__ */ new Set();
+	for (let t of R()) for (let n of t.getElements()) n?.isConnected && e.add(n);
+	return e;
+}
+function z(e, t) {
+	let n = R();
+	if (n.length === 0) return L;
 	let r = e.ownerDocument, i = r.defaultView;
-	if (!i) return 0;
-	let a = r.documentElement.clientWidth || i.innerWidth, o = r.documentElement.clientHeight || i.innerHeight, s = F(t, e), c = t.startsWith("top"), l = 0;
+	if (!i) return L;
+	let a = r.documentElement.clientWidth || i.innerWidth, o = r.documentElement.clientHeight || i.innerHeight, s = I(t, e), c = t.startsWith("top"), l = (t) => a - t >= e.offsetWidth + 32, u = (t) => o - t >= e.offsetHeight + 32, d = 0, f = 0;
 	for (let e of n) for (let t of e.getElements()) {
 		if (!t?.isConnected) continue;
 		let e = t.getBoundingClientRect();
 		if (e.width <= 0 || e.height <= 0) continue;
-		let n = s ? e.right >= a - P : e.left <= P, r = c ? e.top <= P : e.bottom >= o - P;
-		n && r && (l = Math.max(l, s ? a - e.left : e.right));
+		let n = s ? e.right >= a - F : e.left <= F, r = c ? e.top <= F : e.bottom >= o - F;
+		if (!n || !r) continue;
+		let i = s ? a - e.left : e.right, p = c ? e.bottom : o - e.top;
+		l(i) ? d = Math.max(d, i) : u(p) && (f = Math.max(f, p));
 	}
-	return l <= 0 || a - l < e.offsetWidth + 32 ? 0 : Math.ceil(l);
+	return {
+		inline: d > 0 && l(d) ? Math.ceil(d) : 0,
+		block: f > 0 && u(f) ? Math.ceil(f) : 0
+	};
 }
-var I = 2e3;
-function L({ text: e }) {
-	let [t, n] = x.useState(!0);
-	return x.useEffect(() => {
-		let e = setTimeout(() => n(!1), I);
+var B = 2e3;
+function V({ text: e }) {
+	let [t, n] = S.useState(!0);
+	return S.useEffect(() => {
+		let e = setTimeout(() => n(!1), B);
 		return () => clearTimeout(e);
-	}, []), t ? /* @__PURE__ */ S("div", { children: e }) : null;
+	}, []), t ? /* @__PURE__ */ C("div", { children: e }) : null;
 }
-L.displayName = "LiveMessage";
-function R(e) {
+V.displayName = "LiveMessage";
+function H(e) {
 	return e.kind === "title";
 }
-function z(e) {
+function U(e) {
 	return e.kind === "body";
 }
-function B(e) {
+function W(e) {
 	return e.kind === "footer";
 }
-var V = /* @__PURE__ */ new Set(/* @__PURE__ */ "a.abbr.b.bdi.bdo.cite.code.data.dfn.em.i.kbd.label.mark.q.s.samp.small.span.strong.sub.sup.time.u.var.wbr".split(".")), H = /* @__PURE__ */ new Set([
+var fe = /* @__PURE__ */ new Set(/* @__PURE__ */ "a.abbr.b.bdi.bdo.cite.code.data.dfn.em.i.kbd.label.mark.q.s.samp.small.span.strong.sub.sup.time.u.var.wbr".split(".")), G = /* @__PURE__ */ new Set([
 	"noscript",
 	"script",
 	"style",
 	"template"
-]), U = /* @__PURE__ */ new Set([
+]), pe = /* @__PURE__ */ new Set([
 	"button",
 	"img",
 	"input",
 	"select",
 	"textarea"
-]), pe = /* @__PURE__ */ new Set([
+]), K = /* @__PURE__ */ new Set([
 	"button",
 	"checkbox",
 	"combobox",
@@ -193,14 +210,14 @@ var V = /* @__PURE__ */ new Set(/* @__PURE__ */ "a.abbr.b.bdi.bdo.cite.code.data
 	"tab",
 	"textbox"
 ]);
-function W(e) {
+function me(e) {
 	let t = e.getAttribute("role")?.trim().split(/\s+/)[0];
-	return t ? pe.has(t) || t.startsWith("menuitem") : e.localName === "a" ? e.hasAttribute("href") : U.has(e.localName);
+	return t ? K.has(t) || t.startsWith("menuitem") : e.localName === "a" ? e.hasAttribute("href") : pe.has(e.localName);
 }
-function G(e) {
-	return e.getAttribute("aria-hidden") === "true" || e.hasAttribute("hidden") || H.has(e.localName);
+function q(e) {
+	return e.getAttribute("aria-hidden") === "true" || e.hasAttribute("hidden") || G.has(e.localName);
 }
-function K(e, t) {
+function J(e, t) {
 	if (!e) return "";
 	let n = [], r = (e, i) => {
 		if (e.nodeType === Node.TEXT_NODE) {
@@ -209,9 +226,9 @@ function K(e, t) {
 		}
 		if (e.nodeType !== Node.ELEMENT_NODE) return;
 		let a = e;
-		if (!i && t?.(a) || G(a)) return;
+		if (!i && t?.(a) || q(a)) return;
 		let o = a.getAttribute("aria-label");
-		if (o && W(a)) {
+		if (o && me(a)) {
 			n.push(` ${o} `);
 			return;
 		}
@@ -219,64 +236,64 @@ function K(e, t) {
 			n.push(` ${a.getAttribute("alt") ?? ""} `);
 			return;
 		}
-		let s = !V.has(a.localName);
+		let s = !fe.has(a.localName);
 		s && n.push(" ");
 		for (let e of Array.from(a.childNodes)) r(e, !1);
 		s && n.push(" ");
 	};
 	return r(e, !0), n.join("").replace(/\s+/g, " ").trim();
 }
-function q(e) {
-	return !e || G(e) ? [] : Array.from(e.childNodes, (e) => e.nodeType === Node.TEXT_NODE ? (e.textContent ?? "").replace(/\s+/g, " ").trim() : e.nodeType === Node.ELEMENT_NODE ? K(e) : "").filter(Boolean);
+function Y(e) {
+	return !e || q(e) ? [] : Array.from(e.childNodes, (e) => e.nodeType === Node.TEXT_NODE ? (e.textContent ?? "").replace(/\s+/g, " ").trim() : e.nodeType === Node.ELEMENT_NODE ? J(e) : "").filter(Boolean);
 }
-function J(e, t, n, r) {
-	let i = t.find(R), a = t.find(z);
+function X(e, t, n, r) {
+	let i = t.find(H), a = t.find(U);
 	if (!i && !a) {
 		let t = n?.getDismissButton() ?? null;
-		return K(e, (e) => e === t || e.id !== "" && (e.id === r || e.id === n?.statusTextId));
+		return J(e, (e) => e === t || e.id !== "" && (e.id === r || e.id === n?.statusTextId));
 	}
-	let o = i?.getLabel() ?? null, s = i?.getRow() ?? null, c = s ? Array.from(s.children).filter((e) => e !== o).flatMap((e) => q(e)) : [];
+	let o = i?.getLabel() ?? null, s = i?.getRow() ?? null, c = s ? Array.from(s.children).filter((e) => e !== o).flatMap((e) => Y(e)) : [];
 	return [
-		K(o),
-		K(a?.getElement() ?? null),
+		J(o),
+		J(a?.getElement() ?? null),
 		...c,
-		...t.filter(B).flatMap((e) => q(e.getElement()))
+		...t.filter(W).flatMap((e) => Y(e.getElement()))
 	].filter(Boolean).join(" ");
 }
-function me({ entry: t, timers: r, onDismiss: a, onExited: o, getFocusFallback: l, announce: u, registerContainer: d }) {
-	let { id: f, dismissed: h } = t, { isMounted: g, ref: _, presenceProps: te } = m(!h, {
+function he({ entry: t, timers: r, onDismiss: a, onExited: o, getFocusFallback: l, announce: u, registerContainer: d }) {
+	let { id: f, dismissed: h } = t, { isMounted: g, ref: _, presenceProps: v } = ee(!h, {
 		appear: !0,
 		onExited: () => o(f)
-	}), v = x.useRef(null), b = x.useRef(null), le = x.useCallback((e) => {
-		v.current = e, e && (b.current = e), d(f, e);
-	}, [f, d]), w = ee(le, _);
-	ae(v, () => l(b.current), { enabled: !h });
-	let T = c("wave-toast-title"), E = c("wave-toast-status"), [D, O] = x.useState([]), k = x.useRef([]), A = x.useCallback((e) => (k.current = [...k.current, e], O(k.current), () => {
-		k.current = k.current.filter((t) => t !== e), O(k.current);
-	}), []), [j, M] = x.useState(null), N = x.useRef(null), P = x.useCallback((e) => (N.current = e, M(e), () => {
-		N.current === e && (N.current = null, M(null));
-	}), []), F = s(() => {
-		N.current?.onDismiss?.(), a(f);
-	}), fe = x.useMemo(() => ({
-		titleId: T,
-		dismiss: F,
-		registerPart: A,
-		registerToast: P
+	}), y = S.useRef(null), x = S.useRef(null), ce = S.useCallback((e) => {
+		y.current = e, e && (x.current = e), d(f, e);
+	}, [f, d]), T = p(ce, _);
+	ie(y, () => l(x.current), { enabled: !h });
+	let E = c("wave-toast-title"), D = c("wave-toast-status"), [O, k] = S.useState([]), A = S.useRef([]), j = S.useCallback((e) => (A.current = [...A.current, e], k(A.current), () => {
+		A.current = A.current.filter((t) => t !== e), k(A.current);
+	}), []), [M, N] = S.useState(null), P = S.useRef(null), F = S.useCallback((e) => (P.current = e, N(e), () => {
+		P.current === e && (P.current = null, N(null));
+	}), []), I = s(() => {
+		P.current?.onDismiss?.(), a(f);
+	}), L = S.useMemo(() => ({
+		titleId: E,
+		dismiss: I,
+		registerPart: j,
+		registerToast: F
 	}), [
-		T,
-		F,
-		A,
-		P
-	]), I = D.find(R), L = D.find(z), B = t.form === "content" && j === null ? y(t.options.status ?? "info", t.options.statusLabel) : "", V = j ? j.statusTextId : B ? E : void 0;
-	x.useLayoutEffect(() => {
-		let e = v.current;
+		E,
+		I,
+		j,
+		F
+	]), R = O.find(H), de = O.find(U), z = t.form === "content" && M === null ? b(t.options.status ?? "info", t.options.statusLabel) : "", B = M ? M.statusTextId : z ? D : void 0;
+	S.useLayoutEffect(() => {
+		let e = y.current;
 		if (t.dismissed || !e) return;
-		let n = t.options.timeout ?? (ue(e, N.current) ? 0 : de);
+		let n = t.options.timeout ?? (le(e, P.current) ? 0 : ue);
 		r.start(t.id, t.seq, n);
-	}, [t, r]), x.useLayoutEffect(() => {
-		let e = v.current;
+	}, [t, r]), S.useLayoutEffect(() => {
+		let e = y.current;
 		if (t.dismissed || !e) return;
-		let n = N.current, r = n?.status ?? t.options.status ?? "info", i = n ? n.statusLabel : y(r, t.options.statusLabel), a = t.form === "content" && t.options.announcement !== void 0 ? t.options.announcement : J(e, k.current, n, E);
+		let n = P.current, r = n?.status ?? t.options.status ?? "info", i = n ? n.statusLabel : b(r, t.options.statusLabel), a = t.form === "content" && t.options.announcement !== void 0 ? t.options.announcement : X(e, A.current, n, D);
 		u(t.id, {
 			seq: t.seq,
 			text: [i, a].filter(Boolean).join(" "),
@@ -285,37 +302,37 @@ function me({ entry: t, timers: r, onDismiss: a, onExited: o, getFocusFallback:
 	}, [
 		t,
 		u,
-		E,
-		j
+		D,
+		M
 	]);
-	let H = t.form === "content" ? t.options.status : void 0;
-	x.useEffect(() => {
-		let e = N.current?.status;
-		H !== void 0 && e !== void 0 && H !== e && n("Toaster:status-conflict", `Toaster: the dispatched Toast has status "${e}" but the dispatch options pass "${H}"; the Toast's status is used. Remove \`status\` from the options.`);
+	let V = t.form === "content" ? t.options.status : void 0;
+	S.useEffect(() => {
+		let e = P.current?.status;
+		V !== void 0 && e !== void 0 && V !== e && n("Toaster:status-conflict", `Toaster: the dispatched Toast has status "${e}" but the dispatch options pass "${V}"; the Toast's status is used. Remove \`status\` from the options.`);
 	}, [
 		t,
-		H,
-		j
+		V,
+		M
 	]);
-	let U = (e) => {
-		(e.key === "Delete" || e.key === "Backspace") && (e.defaultPrevented || !ie(e) || re(e.target) || (e.preventDefault(), a(f)));
+	let W = (e) => {
+		(e.key === "Delete" || e.key === "Backspace") && (e.defaultPrevented || !re(e) || ne(e.target) || (e.preventDefault(), a(f)));
 	};
-	return g ? /* @__PURE__ */ C("div", {
-		ref: w,
+	return g ? /* @__PURE__ */ w("div", {
+		ref: T,
 		role: "group",
 		tabIndex: -1,
 		"data-wave-toast": "",
-		"aria-labelledby": p(V, I?.id),
-		"aria-describedby": L?.id,
-		className: e(i.toast, "rounded", ne),
-		...te,
-		onKeyDown: U,
-		children: [B ? /* @__PURE__ */ S(oe, {
-			label: B,
-			id: E
-		}) : null, /* @__PURE__ */ S(se.Provider, {
-			value: fe,
-			children: t.form === "options" ? /* @__PURE__ */ S(ce, {
+		"aria-labelledby": m(B, R?.id),
+		"aria-describedby": de?.id,
+		className: e(i.toast, "rounded", te),
+		...v,
+		onKeyDown: W,
+		children: [z ? /* @__PURE__ */ C(ae, {
+			label: z,
+			id: D
+		}) : null, /* @__PURE__ */ C(oe.Provider, {
+			value: L,
+			children: t.form === "options" ? /* @__PURE__ */ C(se, {
 				status: t.options.status,
 				statusLabel: t.options.statusLabel,
 				title: t.options.title,
@@ -325,55 +342,69 @@ function me({ entry: t, timers: r, onDismiss: a, onExited: o, getFocusFallback:
 		})]
 	}) : null;
 }
-me.displayName = "ToastContainer";
-var Y = ({ position: t = "bottom-end", limit: l, shortcuts: d, toaster: p, className: m, style: g, children: ne, onFocus: re, onBlur: ae, onKeyDown: oe, onPointerEnter: y, onPointerLeave: se, onPointerOver: ce, ref: ue, ...k }) => {
-	let [A, j] = x.useState([]), [de, P] = x.useState(() => /* @__PURE__ */ new Map()), F = x.useCallback((e, t) => {
-		P((n) => {
+he.displayName = "ToastContainer";
+var Z = ({ position: t = "bottom-end", limit: l, shortcuts: d, toaster: m, className: ee, style: _, children: te, onFocus: ne, onBlur: ie, onKeyDown: ae, onPointerEnter: b, onPointerLeave: oe, onPointerOver: se, ref: le, ...A }) => {
+	let [j, M] = S.useState([]), [ue, F] = S.useState(() => /* @__PURE__ */ new Map()), I = S.useCallback((e, t) => {
+		F((n) => {
 			let r = n.get(e);
 			if (r && r.seq === t.seq && r.text === t.text && r.assertive === t.assertive) return n;
 			let i = new Map(n);
 			return i.set(e, t), i;
 		});
-	}, []), I = le(A, O(l));
-	I !== A && j(I);
-	let R = I.filter((e) => e.shown);
-	x.useEffect(() => {
+	}, []), R = ce(j, k(l));
+	R !== j && M(R);
+	let B = R.filter((e) => e.shown);
+	S.useEffect(() => {
 		l !== void 0 && !(l >= 1) && n("Toaster:limit", `Toaster: \`limit\` must be 1 or more (got ${String(l)}); it counts as 1.`);
 	}, [l]);
-	let z = c("toast"), B = x.useRef(0), V = x.useRef(null), H = ee(ue, V), U = x.useRef(null), pe = te(), [W, G] = x.useState(0);
-	x.useLayoutEffect(() => {
-		let e = () => {
-			let e = V.current;
-			G(e ? fe(e, t) : 0);
+	let H = c("toast"), U = S.useRef(0), W = S.useRef(null), fe = p(le, W), G = S.useRef(null), pe = h(), [K, me] = S.useState(L);
+	S.useLayoutEffect(() => {
+		let e = null, n = null, r = null, i = /* @__PURE__ */ new Set(), a = () => {
+			let t = de();
+			for (let n of i) t.has(n) || e?.unobserve(n);
+			for (let n of t) i.has(n) || e?.observe(n);
+			let r = t.size !== i.size || [...t].some((e) => !i.has(e));
+			if (i = t, r && n) {
+				n.disconnect();
+				for (let e of t) n.observe(e, {
+					attributes: !0,
+					attributeFilter: ["class", "style"]
+				});
+			}
+		}, o = () => {
+			let n = W.current;
+			e && n !== r && (r && e.unobserve(r), n && e.observe(n), r = n), a();
+			let i = n ? z(n, t) : L;
+			me((e) => e.inline === i.inline && e.block === i.block ? e : i);
 		};
-		e();
-		let n = _(e);
-		return window.addEventListener("resize", e), document.addEventListener("transitionend", e, !0), document.addEventListener("animationend", e, !0), () => {
-			n(), window.removeEventListener("resize", e), document.removeEventListener("transitionend", e, !0), document.removeEventListener("animationend", e, !0);
+		typeof ResizeObserver < "u" && (e = new ResizeObserver(() => o())), typeof MutationObserver < "u" && (n = new MutationObserver(o)), o();
+		let s = v(o);
+		return window.addEventListener("resize", o), document.addEventListener("transitionend", o, !0), document.addEventListener("animationend", o, !0), () => {
+			s(), e?.disconnect(), n?.disconnect(), window.removeEventListener("resize", o), document.removeEventListener("transitionend", o, !0), document.removeEventListener("animationend", o, !0);
 		};
 	}, [t, pe]);
-	let [K] = x.useState(() => M((e) => j((t) => w(t, e))));
-	x.useEffect(() => {
-		let e = document, t = !1, n = () => K.setInBackground(t || e.visibilityState === "hidden"), r = (e) => {
+	let [q] = S.useState(() => N((e) => M((t) => T(t, e))));
+	S.useEffect(() => {
+		let e = document, t = !1, n = () => q.setInBackground(t || e.visibilityState === "hidden"), r = (e) => {
 			e.target instanceof Node || (t = !0, n());
 		}, i = (e) => {
 			e.target instanceof Node || (t = !1, n());
 		};
-		return n(), K.setSuspended(!1), window.addEventListener("blur", r), window.addEventListener("focus", i), e.addEventListener("visibilitychange", n), () => {
-			window.removeEventListener("blur", r), window.removeEventListener("focus", i), e.removeEventListener("visibilitychange", n), K.setSuspended(!0);
+		return n(), q.setSuspended(!1), window.addEventListener("blur", r), window.addEventListener("focus", i), e.addEventListener("visibilitychange", n), () => {
+			window.removeEventListener("blur", r), window.removeEventListener("focus", i), e.removeEventListener("visibilitychange", n), q.setSuspended(!0);
 		};
-	}, [K]);
-	let q = x.useCallback((e, t) => {
-		B.current += 1;
-		let n = B.current, r = o(e) ? {
+	}, [q]);
+	let J = S.useCallback((e, t) => {
+		U.current += 1;
+		let n = U.current, r = o(e) ? {
 			form: "options",
 			options: e
 		} : {
 			form: "content",
 			content: e,
 			options: t ?? {}
-		}, i = r.options.toastId ?? `${z}-${n}`;
-		return j((e) => {
+		}, i = r.options.toastId ?? `${H}-${n}`;
+		return M((e) => {
 			let t = e.findIndex((e) => e.id === i), a = t !== -1 && e[t].shown, o = {
 				...r,
 				id: i,
@@ -385,180 +416,181 @@ var Y = ({ position: t = "bottom-end", limit: l, shortcuts: d, toaster: p, class
 			let s = e.slice();
 			return s[t] = o, s;
 		}), i;
-	}, [z]), J = x.useCallback((e) => {
-		K.remove(e), j((t) => w(t, e));
-	}, [K]), Y = x.useCallback(() => {
-		K.clear(), j((e) => T(e));
-	}, [K]), he = x.useCallback((e) => {
-		j((t) => t.some((t) => t.id === e && t.dismissed) ? t.filter((t) => !(t.id === e && t.dismissed)) : t), P((t) => {
+	}, [H]), Y = S.useCallback((e) => {
+		q.remove(e), M((t) => T(t, e));
+	}, [q]), X = S.useCallback(() => {
+		q.clear(), M((e) => E(e));
+	}, [q]), Z = S.useCallback((e) => {
+		M((t) => t.some((t) => t.id === e && t.dismissed) ? t.filter((t) => !(t.id === e && t.dismissed)) : t), F((t) => {
 			if (!t.has(e)) return t;
 			let n = new Map(t);
 			return n.delete(e), n;
 		});
-	}, []), X = x.useMemo(() => ({
-		dispatchToast: q,
-		dismissToast: J,
-		dismissAllToasts: Y
+	}, []), Q = S.useMemo(() => ({
+		dispatchToast: J,
+		dismissToast: Y,
+		dismissAllToasts: X
 	}), [
-		q,
 		J,
-		Y
-	]), [ge] = x.useState(() => ({}));
-	x.useLayoutEffect(() => {
-		if (!p) return;
-		let e = a(p, ge, X);
+		Y,
+		X
+	]), [ge] = S.useState(() => ({}));
+	S.useLayoutEffect(() => {
+		if (!m) return;
+		let e = a(m, ge, Q);
 		if (e.status === "bound") return e.unbind;
 		e.status === "taken" ? n("Toaster:handle-bound", "Toaster: this handle is already bound to another Toaster; a handle binds one Toaster. Create one handle per Toaster.") : n("Toaster:handle-unknown", "Toaster: `toaster` is not a handle from createToaster(), so nothing is bound. Pass the value createToaster() returns.");
 	}, [
-		p,
+		m,
 		ge,
-		X
+		Q
 	]);
-	let _e = x.useCallback((e) => {
-		let t = V.current, n = t ? Array.from(t.children).filter((e) => e instanceof HTMLElement && e.hasAttribute("data-wave-toast")) : [], r = !!e && e.ownerDocument.activeElement === e, i = e ? n.indexOf(e) : -1, a = (t) => t !== e && t.isConnected && t.getAttribute("data-presence") !== "exiting", o = n.slice(i + 1).find(a), s = i > 0 ? n.slice(0, i).reverse().find(a) : void 0;
+	let _e = S.useCallback((e) => {
+		let t = W.current, n = t ? Array.from(t.children).filter((e) => e instanceof HTMLElement && e.hasAttribute("data-wave-toast")) : [], r = !!e && e.ownerDocument.activeElement === e, i = e ? n.indexOf(e) : -1, a = (t) => t !== e && t.isConnected && t.getAttribute("data-presence") !== "exiting", o = n.slice(i + 1).find(a), s = i > 0 ? n.slice(0, i).reverse().find(a) : void 0;
 		for (let e of [o, s]) {
 			if (!e) continue;
 			let t = r ? e : u(e);
 			if (t) return t;
 		}
-		let c = U.current;
-		return U.current = null, c?.isConnected ? c : null;
-	}, []), Z = s(() => {
-		let e = V.current;
+		let c = G.current;
+		return G.current = null, c?.isConnected ? c : null;
+	}, []), $ = s(() => {
+		let e = W.current;
 		if (!e) return;
 		let t = e.ownerDocument;
 		if (t.activeElement && t.activeElement !== t.body) return;
-		let n = K.isPaused("focus");
-		K.setPaused("focus", !1);
-		let r = U.current;
-		U.current = null, n && r && f(r) && r.focus({ preventScroll: !0 });
+		let n = q.isPaused("focus");
+		q.setPaused("focus", !1);
+		let r = G.current;
+		G.current = null, n && r && f(r) && r.focus({ preventScroll: !0 });
 	});
-	x.useLayoutEffect(() => {
-		Z();
-	}, [I, Z]), x.useLayoutEffect(() => _(() => queueMicrotask(Z)), [Z]);
-	let Q = x.useRef(null);
-	x.useEffect(() => {
+	S.useLayoutEffect(() => {
+		$();
+	}, [R, $]), S.useLayoutEffect(() => v(() => queueMicrotask($)), [$]);
+	let ve = S.useRef(null);
+	S.useEffect(() => {
 		let e = (e) => {
-			let t = Q.current === e;
-			if (Q.current = null, t || !K.isPaused("hover")) return;
-			let n = V.current;
-			n && e.target instanceof Node && D(n, e.target) || K.setPaused("hover", !1);
+			let t = ve.current === e;
+			if (ve.current = null, t || !q.isPaused("hover")) return;
+			let n = W.current;
+			n && e.target instanceof Node && O(n, e.target) || q.setPaused("hover", !1);
 		};
 		return document.addEventListener("pointerover", e), () => document.removeEventListener("pointerover", e);
-	}, [K]);
-	let ve = x.useRef(I);
-	x.useLayoutEffect(() => {
-		ve.current = I;
+	}, [q]);
+	let ye = S.useRef(R);
+	S.useLayoutEffect(() => {
+		ye.current = R;
 	});
-	let $ = x.useRef(/* @__PURE__ */ new Map()), ye = x.useCallback((e, t) => {
-		t ? $.current.set(e, t) : $.current.delete(e);
-	}, []), be = typeof d?.focus == "function", xe = s((e) => {
+	let be = S.useRef(/* @__PURE__ */ new Map()), xe = S.useCallback((e, t) => {
+		t ? be.current.set(e, t) : be.current.delete(e);
+	}, []), Se = typeof d?.focus == "function", Ce = s((e) => {
 		if (e.defaultPrevented || e.isComposing || !d?.focus?.(e)) return;
-		let t = E(ve.current), n = t ? $.current.get(t.id) : void 0;
+		let t = D(ye.current), n = t ? be.current.get(t.id) : void 0;
 		if (!n?.isConnected) return;
 		e.preventDefault();
-		let r = V.current, i = n.ownerDocument.activeElement;
-		i instanceof HTMLElement && i !== n.ownerDocument.body && !(r && D(r, i)) && (U.current = i), n.focus({ preventScroll: !1 });
+		let r = W.current, i = n.ownerDocument.activeElement;
+		i instanceof HTMLElement && i !== n.ownerDocument.body && !(r && O(r, i)) && (G.current = i), n.focus({ preventScroll: !1 });
 	});
-	x.useEffect(() => {
-		if (!be) return;
-		let e = (e) => xe(e);
+	S.useEffect(() => {
+		if (!Se) return;
+		let e = (e) => Ce(e);
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-	}, [be, xe]);
-	let Se = (e) => {
+	}, [Se, Ce]);
+	let we = (e) => {
 		let t = e.relatedTarget;
-		t instanceof HTMLElement && f(t) && (D(e.currentTarget, t) || (U.current = t));
-	}, Ce = (e) => {
+		t instanceof HTMLElement && f(t) && (O(e.currentTarget, t) || (G.current = t));
+	}, Te = (e) => {
 		let t = e.currentTarget, n = e.relatedTarget;
-		if (!(n instanceof Node && D(t, n)) && !e.target.closest("[data-wave-toast][data-presence=\"exiting\"]")) {
+		if (!(n instanceof Node && O(t, n)) && !e.target.closest("[data-wave-toast][data-presence=\"exiting\"]")) {
 			if (n === null) {
 				let n = e.target;
 				if (!n.isConnected) return;
 				let r = n.ownerDocument.activeElement;
-				if (r && D(t, r)) return;
+				if (r && O(t, r)) return;
 			}
-			U.current = null;
+			G.current = null;
 		}
-	}, we = (e) => {
-		if (e.key !== "Escape" && e.key !== "Esc" || e.defaultPrevented || e.nativeEvent.isComposing || !ie(e)) return;
+	}, Ee = (e) => {
+		if (e.key !== "Escape" && e.key !== "Esc" || e.defaultPrevented || e.nativeEvent.isComposing || !re(e)) return;
 		let t = e.currentTarget;
-		if (h().some((e) => e.escape && t.contains(e.getAnchor()))) return;
+		if (g().some((e) => e.escape && t.contains(e.getAnchor()))) return;
 		e.preventDefault();
-		let n = U.current;
-		U.current = null, n?.isConnected && n.focus({ preventScroll: !0 }), Y();
-	}, Te = [], Ee = [];
-	for (let e of R) {
+		let n = G.current;
+		G.current = null, n?.isConnected && n.focus({ preventScroll: !0 }), X();
+	}, De = [], Oe = [];
+	for (let e of B) {
 		if (e.dismissed) continue;
-		let t = de.get(e.id);
+		let t = ue.get(e.id);
 		if (!t || t.seq !== e.seq || !t.text) continue;
-		let n = /* @__PURE__ */ S(L, { text: t.text }, t.seq);
-		(t.assertive ? Ee : Te).push(n);
+		let n = /* @__PURE__ */ C(V, { text: t.text }, t.seq);
+		(t.assertive ? Oe : De).push(n);
 	}
-	let De = W > 0 ? {
-		...g,
-		"--wave-toaster-offset": `${W}px`
-	} : g;
-	return /* @__PURE__ */ C(b.Provider, {
-		value: X,
-		children: [ne, /* @__PURE__ */ S(v, {
+	let ke = K.inline > 0 || K.block > 0 ? {
+		..._,
+		...K.inline > 0 && { "--wave-toaster-offset": `${K.inline}px` },
+		...K.block > 0 && { "--wave-toaster-offset-block": `${K.block}px` }
+	} : _;
+	return /* @__PURE__ */ w(x.Provider, {
+		value: Q,
+		children: [te, /* @__PURE__ */ C(y, {
 			layer: "toast",
-			children: /* @__PURE__ */ C("div", {
-				ref: H,
+			children: /* @__PURE__ */ w("div", {
+				ref: fe,
 				role: "region",
 				"aria-label": "Notifications",
 				"data-wave-focus-trap-allow": "",
 				"data-position": t,
-				...k,
-				style: De,
+				...A,
+				style: ke,
 				onFocus: (e) => {
-					re?.(e), Se(e), K.setPaused("focus", !0);
+					ne?.(e), we(e), q.setPaused("focus", !0);
 				},
 				onBlur: (e) => {
-					ae?.(e), Ce(e);
+					ie?.(e), Te(e);
 					let t = e.relatedTarget;
-					t instanceof Node && D(e.currentTarget, t) || K.setPaused("focus", !1);
+					t instanceof Node && O(e.currentTarget, t) || q.setPaused("focus", !1);
 				},
 				onPointerEnter: (e) => {
-					y?.(e), K.setPaused("hover", !0);
+					b?.(e), q.setPaused("hover", !0);
 				},
 				onPointerLeave: (e) => {
-					se?.(e), K.setPaused("hover", !1);
+					oe?.(e), q.setPaused("hover", !1);
 				},
 				onPointerOver: (e) => {
-					ce?.(e), Q.current = e.nativeEvent;
+					se?.(e), ve.current = e.nativeEvent;
 				},
-				onKeyDown: (e) => r(oe, we)(e),
-				className: e(i.root, "fixed flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2", N[t], m),
+				onKeyDown: (e) => r(ae, Ee)(e),
+				className: e(i.root, "fixed flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2", P[t], ee),
 				children: [
-					/* @__PURE__ */ S("div", {
+					/* @__PURE__ */ C("div", {
 						role: "status",
 						"aria-live": "polite",
 						"aria-atomic": "false",
 						className: "sr-only",
-						children: Te
+						children: De
 					}),
-					/* @__PURE__ */ S("div", {
+					/* @__PURE__ */ C("div", {
 						"aria-live": "assertive",
 						"aria-atomic": "false",
 						className: "sr-only",
-						children: Ee
+						children: Oe
 					}),
-					R.map((e) => /* @__PURE__ */ S(me, {
+					B.map((e) => /* @__PURE__ */ C(he, {
 						entry: e,
-						timers: K,
-						onDismiss: J,
-						onExited: he,
+						timers: q,
+						onDismiss: Y,
+						onExited: Z,
 						getFocusFallback: _e,
-						announce: F,
-						registerContainer: ye
+						announce: I,
+						registerContainer: xe
 					}, e.id))
 				]
 			})
 		})]
 	});
 };
-Y.displayName = "Toaster";
+Z.displayName = "Toaster";
 //#endregion
-export { Y as Toaster, j as useToastController };
+export { Z as Toaster, M as useToastController };
 
 //# sourceMappingURL=Toaster.mjs.map