@mortenbrudvik/waveui 0.9.0 → 0.11.0

package/dist/components/feedback/Toaster.mjs

@@ -8,9 +8,9 @@ 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 { useMergedRefs as p } from "../../hooks/useMergedRefs.mjs";
+import { joinIds as m } from "../../lib/aria.mjs";
+import { usePresence as ee } 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";
@@ -31,7 +31,7 @@ function le(e, t) {
 		shown: !0
 	}));
 }
-function w(e, t) {
+function ue(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 w(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 T(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) {
+function E(e, t) {
 	return e.contains(t) ? !0 : h().some((n) => {
 		let r = n.getAnchor();
 		return r !== null && e.contains(r) && g(n.id, t);
 	});
 }
-function ue(e, t) {
+function de(e, t) {
 	let n = t?.getDismissButton() ?? null;
 	return d(e).some((e) => e !== n);
 }
-function O(e) {
+function D(e) {
 	return e === void 0 ? Infinity : e >= 1 ? Math.floor(e) : 1;
 }
-var k = {
+var O = {
 	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);
+}, k = "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 A() {
+	return x.useContext(b) || (t("useToastController", "<Toaster>", k), O);
 }
-var de = 5e3;
-function M(e) {
+var fe = 5e3;
+function j(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 M = {
+	"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)"
+}, N = 16;
+function P(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 F = {
+	inline: 0,
+	block: 0
+};
+function I() {
+	return h().filter((e) => e.kind === "modal" || e.kind === "dialog");
+}
+function pe() {
+	let e = /* @__PURE__ */ new Set();
+	for (let t of I()) for (let n of t.getElements()) n?.isConnected && e.add(n);
+	return e;
+}
+function L(e, t) {
+	let n = I();
+	if (n.length === 0) return F;
 	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 F;
+	let a = r.documentElement.clientWidth || i.innerWidth, o = r.documentElement.clientHeight || i.innerHeight, s = P(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 - N : e.left <= N, r = c ? e.top <= N : e.bottom >= o - N;
+		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 }) {
+var R = 2e3;
+function z({ text: e }) {
 	let [t, n] = x.useState(!0);
 	return x.useEffect(() => {
-		let e = setTimeout(() => n(!1), I);
+		let e = setTimeout(() => n(!1), R);
 		return () => clearTimeout(e);
 	}, []), t ? /* @__PURE__ */ S("div", { children: e }) : null;
 }
-L.displayName = "LiveMessage";
-function R(e) {
+z.displayName = "LiveMessage";
+function B(e) {
 	return e.kind === "title";
 }
-function z(e) {
+function V(e) {
 	return e.kind === "body";
 }
-function B(e) {
+function H(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 me = /* @__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(".")), U = /* @__PURE__ */ new Set([
 	"noscript",
 	"script",
 	"style",
 	"template"
-]), U = /* @__PURE__ */ new Set([
+]), he = /* @__PURE__ */ new Set([
 	"button",
 	"img",
 	"input",
 	"select",
 	"textarea"
-]), pe = /* @__PURE__ */ new Set([
+]), W = /* @__PURE__ */ new Set([
 	"button",
 	"checkbox",
 	"combobox",
@@ -193,12 +210,12 @@ var V = /* @__PURE__ */ new Set(/* @__PURE__ */ "a.abbr.b.bdi.bdo.cite.code.data
 	"tab",
 	"textbox"
 ]);
-function W(e) {
+function ge(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 ? W.has(t) || t.startsWith("menuitem") : e.localName === "a" ? e.hasAttribute("href") : he.has(e.localName);
 }
 function G(e) {
-	return e.getAttribute("aria-hidden") === "true" || e.hasAttribute("hidden") || H.has(e.localName);
+	return e.getAttribute("aria-hidden") === "true" || e.hasAttribute("hidden") || U.has(e.localName);
 }
 function K(e, t) {
 	if (!e) return "";
@@ -211,7 +228,7 @@ function K(e, t) {
 		let a = e;
 		if (!i && t?.(a) || G(a)) return;
 		let o = a.getAttribute("aria-label");
-		if (o && W(a)) {
+		if (o && ge(a)) {
 			n.push(` ${o} `);
 			return;
 		}
@@ -219,7 +236,7 @@ function K(e, t) {
 			n.push(` ${a.getAttribute("alt") ?? ""} `);
 			return;
 		}
-		let s = !V.has(a.localName);
+		let s = !me.has(a.localName);
 		s && n.push(" ");
 		for (let e of Array.from(a.childNodes)) r(e, !1);
 		s && n.push(" ");
@@ -230,7 +247,7 @@ 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 J(e, t, n, r) {
-	let i = t.find(R), a = t.find(z);
+	let i = t.find(B), a = t.find(V);
 	if (!i && !a) {
 		let t = n?.getDismissButton() ?? null;
 		return K(e, (e) => e === t || e.id !== "" && (e.id === r || e.id === n?.statusTextId));
@@ -240,43 +257,43 @@ function J(e, t, n, r) {
 		K(o),
 		K(a?.getElement() ?? null),
 		...c,
-		...t.filter(B).flatMap((e) => q(e.getElement()))
+		...t.filter(H).flatMap((e) => q(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 _e({ 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 } = 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, _);
+	}, [f, d]), ue = p(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
+	let w = c("wave-toast-title"), T = c("wave-toast-status"), [E, D] = x.useState([]), O = x.useRef([]), k = x.useCallback((e) => (O.current = [...O.current, e], D(O.current), () => {
+		O.current = O.current.filter((t) => t !== e), D(O.current);
+	}), []), [A, j] = x.useState(null), M = x.useRef(null), N = x.useCallback((e) => (M.current = e, j(e), () => {
+		M.current === e && (M.current = null, j(null));
+	}), []), P = s(() => {
+		M.current?.onDismiss?.(), a(f);
+	}), F = x.useMemo(() => ({
+		titleId: w,
+		dismiss: P,
+		registerPart: k,
+		registerToast: N
 	}), [
-		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;
+		w,
+		P,
+		k,
+		N
+	]), I = E.find(B), pe = E.find(V), L = t.form === "content" && A === null ? y(t.options.status ?? "info", t.options.statusLabel) : "", R = A ? A.statusTextId : L ? T : void 0;
 	x.useLayoutEffect(() => {
 		let e = v.current;
 		if (t.dismissed || !e) return;
-		let n = t.options.timeout ?? (ue(e, N.current) ? 0 : de);
+		let n = t.options.timeout ?? (de(e, M.current) ? 0 : fe);
 		r.start(t.id, t.seq, n);
 	}, [t, r]), x.useLayoutEffect(() => {
 		let e = v.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 = M.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, O.current, n, T);
 		u(t.id, {
 			seq: t.seq,
 			text: [i, a].filter(Boolean).join(" "),
@@ -285,36 +302,36 @@ function me({ entry: t, timers: r, onDismiss: a, onExited: o, getFocusFallback:
 	}, [
 		t,
 		u,
-		E,
-		j
+		T,
+		A
 	]);
-	let H = t.form === "content" ? t.options.status : void 0;
+	let z = 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 e = M.current?.status;
+		z !== void 0 && e !== void 0 && z !== e && n("Toaster:status-conflict", `Toaster: the dispatched Toast has status "${e}" but the dispatch options pass "${z}"; the Toast's status is used. Remove \`status\` from the options.`);
 	}, [
 		t,
-		H,
-		j
+		z,
+		A
 	]);
-	let U = (e) => {
+	let H = (e) => {
 		(e.key === "Delete" || e.key === "Backspace") && (e.defaultPrevented || !ie(e) || re(e.target) || (e.preventDefault(), a(f)));
 	};
 	return g ? /* @__PURE__ */ C("div", {
-		ref: w,
+		ref: ue,
 		role: "group",
 		tabIndex: -1,
 		"data-wave-toast": "",
-		"aria-labelledby": p(V, I?.id),
-		"aria-describedby": L?.id,
+		"aria-labelledby": m(R, I?.id),
+		"aria-describedby": pe?.id,
 		className: e(i.toast, "rounded", ne),
 		...te,
-		onKeyDown: U,
-		children: [B ? /* @__PURE__ */ S(oe, {
-			label: B,
-			id: E
+		onKeyDown: H,
+		children: [L ? /* @__PURE__ */ S(oe, {
+			label: L,
+			id: T
 		}) : null, /* @__PURE__ */ S(se.Provider, {
-			value: fe,
+			value: F,
 			children: t.form === "options" ? /* @__PURE__ */ S(ce, {
 				status: t.options.status,
 				statusLabel: t.options.statusLabel,
@@ -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) => {
+_e.displayName = "ToastContainer";
+var Y = ({ position: t = "bottom-end", limit: l, shortcuts: d, toaster: m, className: ee, style: g, children: ne, onFocus: re, onBlur: ae, onKeyDown: oe, onPointerEnter: y, onPointerLeave: se, onPointerOver: ce, ref: de, ...O }) => {
+	let [k, A] = x.useState([]), [fe, N] = x.useState(() => /* @__PURE__ */ new Map()), P = x.useCallback((e, t) => {
+		N((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);
+	}, []), I = le(k, D(l));
+	I !== k && A(I);
 	let R = I.filter((e) => e.shown);
 	x.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);
+	let B = c("toast"), V = x.useRef(0), H = x.useRef(null), me = p(de, H), U = x.useRef(null), he = te(), [W, ge] = x.useState(F);
 	x.useLayoutEffect(() => {
-		let e = () => {
-			let e = V.current;
-			G(e ? fe(e, t) : 0);
+		let e = null, n = null, r = null, i = /* @__PURE__ */ new Set(), a = () => {
+			let t = pe();
+			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 = H.current;
+			e && n !== r && (r && e.unobserve(r), n && e.observe(n), r = n), a();
+			let i = n ? L(n, t) : F;
+			ge((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 = _(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))));
+	}, [t, he]);
+	let [G] = x.useState(() => j((e) => A((t) => ue(t, e))));
 	x.useEffect(() => {
-		let e = document, t = !1, n = () => K.setInBackground(t || e.visibilityState === "hidden"), r = (e) => {
+		let e = document, t = !1, n = () => G.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(), G.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), G.setSuspended(!0);
 		};
-	}, [K]);
-	let q = x.useCallback((e, t) => {
-		B.current += 1;
-		let n = B.current, r = o(e) ? {
+	}, [G]);
+	let K = x.useCallback((e, t) => {
+		V.current += 1;
+		let n = V.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 ?? `${B}-${n}`;
+		return A((e) => {
 			let t = e.findIndex((e) => e.id === i), a = t !== -1 && e[t].shown, o = {
 				...r,
 				id: i,
@@ -385,37 +416,37 @@ 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) => {
+	}, [B]), q = x.useCallback((e) => {
+		G.remove(e), A((t) => ue(t, e));
+	}, [G]), J = x.useCallback(() => {
+		G.clear(), A((e) => w(e));
+	}, [G]), Y = x.useCallback((e) => {
+		A((t) => t.some((t) => t.id === e && t.dismissed) ? t.filter((t) => !(t.id === e && t.dismissed)) : t), N((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
+		dispatchToast: K,
+		dismissToast: q,
+		dismissAllToasts: J
 	}), [
+		K,
 		q,
-		J,
-		Y
-	]), [ge] = x.useState(() => ({}));
+		J
+	]), [ve] = x.useState(() => ({}));
 	x.useLayoutEffect(() => {
-		if (!p) return;
-		let e = a(p, ge, X);
+		if (!m) return;
+		let e = a(m, ve, X);
 		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,
-		ge,
+		m,
+		ve,
 		X
 	]);
-	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 ye = x.useCallback((e) => {
+		let t = H.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);
@@ -424,12 +455,12 @@ var Y = ({ position: t = "bottom-end", limit: l, shortcuts: d, toaster: p, class
 		let c = U.current;
 		return U.current = null, c?.isConnected ? c : null;
 	}, []), Z = s(() => {
-		let e = V.current;
+		let e = H.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 n = G.isPaused("focus");
+		G.setPaused("focus", !1);
 		let r = U.current;
 		U.current = null, n && r && f(r) && r.focus({ preventScroll: !0 });
 	});
@@ -440,117 +471,118 @@ var Y = ({ position: t = "bottom-end", limit: l, shortcuts: d, toaster: p, class
 	x.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);
+			if (Q.current = null, t || !G.isPaused("hover")) return;
+			let n = H.current;
+			n && e.target instanceof Node && E(n, e.target) || G.setPaused("hover", !1);
 		};
 		return document.addEventListener("pointerover", e), () => document.removeEventListener("pointerover", e);
-	}, [K]);
-	let ve = x.useRef(I);
+	}, [G]);
+	let be = x.useRef(I);
 	x.useLayoutEffect(() => {
-		ve.current = I;
+		be.current = I;
 	});
-	let $ = x.useRef(/* @__PURE__ */ new Map()), ye = x.useCallback((e, t) => {
+	let $ = x.useRef(/* @__PURE__ */ new Map()), xe = x.useCallback((e, t) => {
 		t ? $.current.set(e, t) : $.current.delete(e);
-	}, []), be = typeof d?.focus == "function", xe = s((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 = T(be.current), n = t ? $.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 = H.current, i = n.ownerDocument.activeElement;
+		i instanceof HTMLElement && i !== n.ownerDocument.body && !(r && E(r, i)) && (U.current = i), n.focus({ preventScroll: !1 });
 	});
 	x.useEffect(() => {
-		if (!be) return;
-		let e = (e) => xe(e);
+		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) && (E(e.currentTarget, t) || (U.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 && E(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 && E(t, r)) return;
 			}
 			U.current = null;
 		}
-	}, we = (e) => {
+	}, Ee = (e) => {
 		if (e.key !== "Escape" && e.key !== "Esc" || e.defaultPrevented || e.nativeEvent.isComposing || !ie(e)) return;
 		let t = e.currentTarget;
 		if (h().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 = [];
+		U.current = null, n?.isConnected && n.focus({ preventScroll: !0 }), J();
+	}, De = [], Oe = [];
 	for (let e of R) {
 		if (e.dismissed) continue;
-		let t = de.get(e.id);
+		let t = fe.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__ */ S(z, { text: t.text }, t.seq);
+		(t.assertive ? Oe : De).push(n);
 	}
-	let De = W > 0 ? {
+	let ke = W.inline > 0 || W.block > 0 ? {
 		...g,
-		"--wave-toaster-offset": `${W}px`
+		...W.inline > 0 && { "--wave-toaster-offset": `${W.inline}px` },
+		...W.block > 0 && { "--wave-toaster-offset-block": `${W.block}px` }
 	} : g;
 	return /* @__PURE__ */ C(b.Provider, {
 		value: X,
 		children: [ne, /* @__PURE__ */ S(v, {
 			layer: "toast",
 			children: /* @__PURE__ */ C("div", {
-				ref: H,
+				ref: me,
 				role: "region",
 				"aria-label": "Notifications",
 				"data-wave-focus-trap-allow": "",
 				"data-position": t,
-				...k,
-				style: De,
+				...O,
+				style: ke,
 				onFocus: (e) => {
-					re?.(e), Se(e), K.setPaused("focus", !0);
+					re?.(e), we(e), G.setPaused("focus", !0);
 				},
 				onBlur: (e) => {
-					ae?.(e), Ce(e);
+					ae?.(e), Te(e);
 					let t = e.relatedTarget;
-					t instanceof Node && D(e.currentTarget, t) || K.setPaused("focus", !1);
+					t instanceof Node && E(e.currentTarget, t) || G.setPaused("focus", !1);
 				},
 				onPointerEnter: (e) => {
-					y?.(e), K.setPaused("hover", !0);
+					y?.(e), G.setPaused("hover", !0);
 				},
 				onPointerLeave: (e) => {
-					se?.(e), K.setPaused("hover", !1);
+					se?.(e), G.setPaused("hover", !1);
 				},
 				onPointerOver: (e) => {
 					ce?.(e), Q.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(oe, Ee)(e),
+				className: e(i.root, "fixed flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2", M[t], ee),
 				children: [
 					/* @__PURE__ */ S("div", {
 						role: "status",
 						"aria-live": "polite",
 						"aria-atomic": "false",
 						className: "sr-only",
-						children: Te
+						children: De
 					}),
 					/* @__PURE__ */ S("div", {
 						"aria-live": "assertive",
 						"aria-atomic": "false",
 						className: "sr-only",
-						children: Ee
+						children: Oe
 					}),
-					R.map((e) => /* @__PURE__ */ S(me, {
+					R.map((e) => /* @__PURE__ */ S(_e, {
 						entry: e,
-						timers: K,
-						onDismiss: J,
-						onExited: he,
-						getFocusFallback: _e,
-						announce: F,
-						registerContainer: ye
+						timers: G,
+						onDismiss: q,
+						onExited: Y,
+						getFocusFallback: ye,
+						announce: P,
+						registerContainer: xe
 					}, e.id))
 				]
 			})
@@ -559,6 +591,6 @@ var Y = ({ position: t = "bottom-end", limit: l, shortcuts: d, toaster: p, class
 };
 Y.displayName = "Toaster";
 //#endregion
-export { Y as Toaster, j as useToastController };
+export { Y as Toaster, A as useToastController };
 
 //# sourceMappingURL=Toaster.mjs.map