beez-ui 2.6.0 → 2.6.1

package/CHANGELOG.md

@@ -4,6 +4,15 @@ Todos los cambios relevantes de beez-ui se documentan en este archivo con el for
 
 ## [Unreleased]
 
+## [2.6.1] - 2026-10-16
+
+### Fixed
+
+- Los botones de un toast de `ThemedToaster` (acción, cancelar o cerrar) responden mientras hay un `Dialog`, `AlertDialog` o `Sheet` abierto, y presionarlos ya no cierra el `Dialog` o el `Sheet`. También se alcanzan con el teclado mediante el atajo de Sonner (Alt+T), que ya no queda bloqueado por la trampa de foco del modal; si el control enfocado cierra su toast, el foco vuelve al modal en lugar de perderse.
+- Presionar Escape en un menú, select o diálogo abierto desde el `Sidebar` en mobile cierra solo esa capa y deja el sidebar abierto.
+- Abrir el `Sidebar` en mobile en una ventana de escritorio angosta ya no desplaza la página de costado cuando desaparece la barra de scroll.
+- El contenido de `PopoverContent` más alto que el espacio disponible en pantalla se desplaza dentro del panel en lugar de quedar cortado fuera del viewport.
+
 ## [2.6.0] - 2026-10-15
 
 ### Added

package/dist/components/dialog.js

@@ -11,6 +11,7 @@ import { Dialog as DialogPrimitive } from "radix-ui";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../motion/presence.js";
 import { cn } from "../lib/utils.js";
+import { keepOpenOnToastInteraction } from "../lib/toast-layer.js";
 import { Button } from "./button.js";
 import { ControlButton } from "./control-button.js";
 import { XIcon } from "lucide-react";
@@ -210,7 +211,7 @@ function DialogViewportCloseButton() {
 * @returns The styled primitive with its original interaction contract.
 */
 function DialogContent(t0) {
-	const $ = _c(26);
+	const $ = _c(29);
 	let children;
 	let className;
 	let props;
@@ -256,17 +257,25 @@ function DialogContent(t0) {
 		t7 = $[9];
 	}
 	let t8;
-	if ($[10] !== closeButtonPlacement || $[11] !== showCloseButton) {
-		t8 = showCloseButton && closeButtonPlacement === "viewport" && /* @__PURE__ */ _jsx(DialogViewportCloseButton, {});
-		$[10] = closeButtonPlacement;
-		$[11] = showCloseButton;
-		$[12] = t8;
+	if ($[10] !== props.onInteractOutside) {
+		t8 = keepOpenOnToastInteraction(props.onInteractOutside);
+		$[10] = props.onInteractOutside;
+		$[11] = t8;
 	} else {
-		t8 = $[12];
+		t8 = $[11];
 	}
 	let t9;
-	if ($[13] !== closeButtonPlacement || $[14] !== showCloseButton) {
-		t9 = showCloseButton && closeButtonPlacement === "content" && /* @__PURE__ */ _jsx(DialogPrimitive.Close, {
+	if ($[12] !== closeButtonPlacement || $[13] !== showCloseButton) {
+		t9 = showCloseButton && closeButtonPlacement === "viewport" && /* @__PURE__ */ _jsx(DialogViewportCloseButton, {});
+		$[12] = closeButtonPlacement;
+		$[13] = showCloseButton;
+		$[14] = t9;
+	} else {
+		t9 = $[14];
+	}
+	let t10;
+	if ($[15] !== closeButtonPlacement || $[16] !== showCloseButton) {
+		t10 = showCloseButton && closeButtonPlacement === "content" && /* @__PURE__ */ _jsx(DialogPrimitive.Close, {
 			"data-slot": "dialog-close",
 			asChild: true,
 			children: /* @__PURE__ */ _jsx(MotionSlot, {
@@ -282,15 +291,15 @@ function DialogContent(t0) {
 				})
 			})
 		});
-		$[13] = closeButtonPlacement;
-		$[14] = showCloseButton;
-		$[15] = t9;
+		$[15] = closeButtonPlacement;
+		$[16] = showCloseButton;
+		$[17] = t10;
 	} else {
-		t9 = $[15];
+		t10 = $[17];
 	}
-	let t10;
-	if ($[16] !== children || $[17] !== props || $[18] !== t5 || $[19] !== t7 || $[20] !== t8 || $[21] !== t9) {
-		t10 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t4, /* @__PURE__ */ _jsx(MotionSlot, {
+	let t11;
+	if ($[18] !== children || $[19] !== props || $[20] !== t10 || $[21] !== t5 || $[22] !== t7 || $[23] !== t8 || $[24] !== t9) {
+		t11 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t4, /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "center-morph",
 			children: /* @__PURE__ */ _jsxs(DialogPrimitive.Content, {
 				forceMount: true,
@@ -298,40 +307,42 @@ function DialogContent(t0) {
 				"data-close-button-placement": t5,
 				className: t7,
 				...props,
+				onInteractOutside: t8,
 				children: [
 					children,
-					t8,
-					t9
+					t9,
+					t10
 				]
 			})
 		})] });
-		$[16] = children;
-		$[17] = props;
-		$[18] = t5;
-		$[19] = t7;
-		$[20] = t8;
-		$[21] = t9;
-		$[22] = t10;
+		$[18] = children;
+		$[19] = props;
+		$[20] = t10;
+		$[21] = t5;
+		$[22] = t7;
+		$[23] = t8;
+		$[24] = t9;
+		$[25] = t11;
 	} else {
-		t10 = $[22];
+		t11 = $[25];
 	}
-	let t11;
-	if ($[23] !== props.forceMount || $[24] !== t10) {
-		t11 = /* @__PURE__ */ _jsx(DialogPortal, {
+	let t12;
+	if ($[26] !== props.forceMount || $[27] !== t11) {
+		t12 = /* @__PURE__ */ _jsx(DialogPortal, {
 			forceMount: true,
 			children: /* @__PURE__ */ _jsx(MotionPresence, {
 				scope: "dialog",
 				forceMount: t3,
-				children: t10
+				children: t11
 			})
 		});
-		$[23] = props.forceMount;
-		$[24] = t10;
-		$[25] = t11;
+		$[26] = props.forceMount;
+		$[27] = t11;
+		$[28] = t12;
 	} else {
-		t11 = $[25];
+		t12 = $[28];
 	}
-	return t11;
+	return t12;
 }
 /**
 * Stacks the title and description. While the panel shows its own close button, the header keeps Arc's gap to it so

package/dist/components/popover.d.ts

@@ -11,6 +11,7 @@ declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof Popove
 declare function PopoverClose({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Close>): React.JSX.Element;
 /**
  * Renders Arc's panel: raised surface, hairline border, panel radius and floating shadow, kept inside the viewport.
+ * Content taller than the room left on the placed side scrolls inside the panel instead of running off screen.
  * @param props - Radix content properties. `align` defaults to `center`, `sideOffset` to 6px and `collisionPadding`
  *   to 10px.
  * @returns The portaled panel.

package/dist/components/popover.js

@@ -106,6 +106,7 @@ function resolvePopoverMotion() {
 }
 /**
 * Renders Arc's panel: raised surface, hairline border, panel radius and floating shadow, kept inside the viewport.
+* Content taller than the room left on the placed side scrolls inside the panel instead of running off screen.
 * @param props - Radix content properties. `align` defaults to `center`, `sideOffset` to 6px and `collisionPadding`
 *   to 10px.
 * @returns The portaled panel.
@@ -138,7 +139,7 @@ function PopoverContent(t0) {
 	const t4 = props.forceMount;
 	let t5;
 	if ($[6] !== className) {
-		t5 = cn("z-50 flex w-72 max-w-[calc(100vw-20px)] origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-(--radius-panel) border border-border bg-surface-raised p-(--space-4) text-sm leading-(--leading-body) text-foreground shadow-(--shadow-floating) outline-hidden", className);
+		t5 = cn("z-50 flex max-h-(--radix-popover-content-available-height) w-72 max-w-[calc(100vw-20px)] origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 overflow-y-auto overscroll-contain *:shrink-0 rounded-(--radius-panel) border border-border bg-surface-raised p-(--space-4) text-sm leading-(--leading-body) text-foreground shadow-(--shadow-floating) outline-hidden", className);
 		$[6] = className;
 		$[7] = t5;
 	} else {

package/dist/components/sheet.js

@@ -5,6 +5,7 @@ import { Dialog as SheetPrimitive } from "radix-ui";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../motion/presence.js";
 import { cn } from "../lib/utils.js";
+import { keepOpenOnToastInteraction } from "../lib/toast-layer.js";
 import { ControlButton } from "./control-button.js";
 import { XIcon } from "lucide-react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -160,7 +161,7 @@ function SheetOverlay(t0) {
 * @returns The styled primitive with its original interaction contract.
 */
 function SheetContent(t0) {
-	const $ = _c(20);
+	const $ = _c(23);
 	let children;
 	let className;
 	let props;
@@ -203,8 +204,16 @@ function SheetContent(t0) {
 		t5 = $[8];
 	}
 	let t6;
-	if ($[9] !== showCloseButton) {
-		t6 = showCloseButton && /* @__PURE__ */ _jsx(SheetPrimitive.Close, {
+	if ($[9] !== props.onInteractOutside) {
+		t6 = keepOpenOnToastInteraction(props.onInteractOutside);
+		$[9] = props.onInteractOutside;
+		$[10] = t6;
+	} else {
+		t6 = $[10];
+	}
+	let t7;
+	if ($[11] !== showCloseButton) {
+		t7 = showCloseButton && /* @__PURE__ */ _jsx(SheetPrimitive.Close, {
 			"data-slot": "sheet-close",
 			asChild: true,
 			children: /* @__PURE__ */ _jsx(MotionSlot, {
@@ -220,14 +229,14 @@ function SheetContent(t0) {
 				})
 			})
 		});
-		$[9] = showCloseButton;
-		$[10] = t6;
+		$[11] = showCloseButton;
+		$[12] = t7;
 	} else {
-		t6 = $[10];
+		t7 = $[12];
 	}
-	let t7;
-	if ($[11] !== children || $[12] !== props || $[13] !== side || $[14] !== t5 || $[15] !== t6) {
-		t7 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t4, /* @__PURE__ */ _jsx(MotionSlot, {
+	let t8;
+	if ($[13] !== children || $[14] !== props || $[15] !== side || $[16] !== t5 || $[17] !== t6 || $[18] !== t7) {
+		t8 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t4, /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "sheet",
 			children: /* @__PURE__ */ _jsxs(SheetPrimitive.Content, {
 				forceMount: true,
@@ -235,35 +244,37 @@ function SheetContent(t0) {
 				"data-side": side,
 				className: t5,
 				...props,
-				children: [children, t6]
+				onInteractOutside: t6,
+				children: [children, t7]
 			})
 		})] });
-		$[11] = children;
-		$[12] = props;
-		$[13] = side;
-		$[14] = t5;
-		$[15] = t6;
-		$[16] = t7;
+		$[13] = children;
+		$[14] = props;
+		$[15] = side;
+		$[16] = t5;
+		$[17] = t6;
+		$[18] = t7;
+		$[19] = t8;
 	} else {
-		t7 = $[16];
+		t8 = $[19];
 	}
-	let t8;
-	if ($[17] !== props.forceMount || $[18] !== t7) {
-		t8 = /* @__PURE__ */ _jsx(SheetPortal, {
+	let t9;
+	if ($[20] !== props.forceMount || $[21] !== t8) {
+		t9 = /* @__PURE__ */ _jsx(SheetPortal, {
 			forceMount: true,
 			children: /* @__PURE__ */ _jsx(MotionPresence, {
 				scope: "sheet",
 				forceMount: t3,
-				children: t7
+				children: t8
 			})
 		});
-		$[17] = props.forceMount;
-		$[18] = t7;
-		$[19] = t8;
+		$[20] = props.forceMount;
+		$[21] = t8;
+		$[22] = t9;
 	} else {
-		t8 = $[19];
+		t9 = $[22];
 	}
-	return t8;
+	return t9;
 }
 function SheetHeader(t0) {
 	const $ = _c(8);

package/dist/components/sidebar.js

@@ -404,15 +404,22 @@ function MobileSidebar(t0) {
 			const previousBodyStyles = {
 				left: body.style.left,
 				overflow: body.style.overflow,
+				paddingRight: body.style.paddingRight,
 				position: body.style.position,
 				right: body.style.right,
 				top: body.style.top
 			};
+			const clientWidthBeforeLock = document.documentElement.clientWidth;
+			const bodyPaddingRight = Number.parseFloat(getComputedStyle(body).paddingRight) || 0;
 			body.style.position = "fixed";
 			body.style.top = `-${scrollY}px`;
 			body.style.left = "0";
 			body.style.right = "0";
 			body.style.overflow = "hidden";
+			const scrollbarWidth = document.documentElement.clientWidth - clientWidthBeforeLock;
+			if (scrollbarWidth > 0) {
+				body.style.paddingRight = `${bodyPaddingRight + scrollbarWidth}px`;
+			}
 			const restoreTriggerFocus = () => triggerRef.current?.focus({ preventScroll: true });
 			const focusFrame = requestAnimationFrame(() => {
 				const firstFocusable = panelRef.current?.querySelector(FOCUSABLE_SELECTOR);
@@ -425,6 +432,7 @@ function MobileSidebar(t0) {
 				body.style.left = previousBodyStyles.left;
 				body.style.right = previousBodyStyles.right;
 				body.style.overflow = previousBodyStyles.overflow;
+				body.style.paddingRight = previousBodyStyles.paddingRight;
 				window.scrollTo(0, scrollY);
 				restoreTriggerFocus();
 			};
@@ -447,6 +455,9 @@ function MobileSidebar(t0) {
 	let t5;
 	if ($[7] !== setOpenMobile) {
 		t5 = (event) => {
+			if (event.defaultPrevented || !panelRef.current?.contains(event.target)) {
+				return;
+			}
 			if (event.key === "Escape") {
 				event.preventDefault();
 				setOpenMobile(false);

package/dist/components/themed-toaster.d.ts

@@ -1,4 +1,8 @@
 import { type ToasterProps } from "sonner";
-/** Renders shared notification styling using the consumer's resolved theme. */
-declare const ThemedToaster: ({ theme, ...props }: ToasterProps) => import("react").JSX.Element;
+/**
+ * Renders shared notification styling using the consumer's resolved theme. Toasts take pointer input even while a
+ * modal overlay (which disables pointer events on the page) is open, and Sonner's hotkey moves keyboard focus into
+ * them past the modal's focus trap, so their actions stay usable from a dialog.
+ */
+declare const ThemedToaster: ({ theme, className, ...props }: ToasterProps) => import("react").JSX.Element;
 export { ThemedToaster };

package/dist/components/themed-toaster.js

@@ -1,104 +1,134 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
 import { MotionSlot } from "../motion/motion-slot.js";
+import { cn } from "../lib/utils.js";
+import { letFocusReachToastLayer } from "../lib/toast-layer.js";
+import { useEffect } from "react";
 import { Toaster as Sonner } from "sonner";
 import { useTheme } from "next-themes";
 import { CircleCheck, Info, TriangleAlert, OctagonAlert, Loader } from "lucide-react";
 import { jsx as _jsx } from "react/jsx-runtime";
-/** Renders shared notification styling using the consumer's resolved theme. */
+/**
+* Renders shared notification styling using the consumer's resolved theme. Toasts take pointer input even while a
+* modal overlay (which disables pointer events on the page) is open, and Sonner's hotkey moves keyboard focus into
+* them past the modal's focus trap, so their actions stay usable from a dialog.
+*/
 const ThemedToaster = (t0) => {
-	const $ = _c(12);
+	const $ = _c(17);
+	let className;
 	let props;
 	let theme;
 	if ($[0] !== t0) {
-		({theme, ...props} = t0);
+		({theme, className, ...props} = t0);
 		$[0] = t0;
-		$[1] = props;
-		$[2] = theme;
+		$[1] = className;
+		$[2] = props;
+		$[3] = theme;
 	} else {
-		props = $[1];
-		theme = $[2];
+		className = $[1];
+		props = $[2];
+		theme = $[3];
 	}
 	const { resolvedTheme } = useTheme();
 	const activeTheme = theme ?? (resolvedTheme === "dark" ? "dark" : "light");
 	let t1;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ _jsx(MotionSlot, {
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	useEffect(_temp, t1);
+	let t2;
+	if ($[5] !== className) {
+		t2 = cn("toaster group pointer-events-auto", className);
+		$[5] = className;
+		$[6] = t2;
+	} else {
+		t2 = $[6];
+	}
+	let t3;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "selection",
 			children: /* @__PURE__ */ _jsx(CircleCheck, { className: "size-4" })
 		});
-		$[3] = t1;
+		$[7] = t3;
 	} else {
-		t1 = $[3];
+		t3 = $[7];
 	}
-	let t2;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "selection",
 			children: /* @__PURE__ */ _jsx(Info, { className: "size-4" })
 		});
-		$[4] = t2;
+		$[8] = t4;
 	} else {
-		t2 = $[4];
+		t4 = $[8];
 	}
-	let t3;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "selection",
 			children: /* @__PURE__ */ _jsx(TriangleAlert, { className: "size-4" })
 		});
-		$[5] = t3;
+		$[9] = t5;
 	} else {
-		t3 = $[5];
+		t5 = $[9];
 	}
-	let t4;
-	let t5;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = {
-			success: t1,
-			info: t2,
-			warning: t3,
+	let t6;
+	let t7;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = {
+			success: t3,
+			info: t4,
+			warning: t5,
 			error: /* @__PURE__ */ _jsx(MotionSlot, {
 				kind: "selection",
 				children: /* @__PURE__ */ _jsx(OctagonAlert, { className: "size-4" })
 			}),
 			loading: /* @__PURE__ */ _jsx(Loader, { className: "size-4 animate-spin" })
 		};
-		t5 = {
+		t7 = {
 			"--normal-bg": "var(--popover)",
 			"--normal-text": "var(--popover-foreground)",
 			"--normal-border": "var(--border)",
 			"--border-radius": "var(--radius)"
 		};
-		$[6] = t4;
-		$[7] = t5;
+		$[10] = t6;
+		$[11] = t7;
 	} else {
-		t4 = $[6];
-		t5 = $[7];
+		t6 = $[10];
+		t7 = $[11];
 	}
-	let t6;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = { classNames: { toast: "cn-toast" } };
-		$[8] = t6;
+	let t8;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = { classNames: { toast: "cn-toast" } };
+		$[12] = t8;
 	} else {
-		t6 = $[8];
+		t8 = $[12];
 	}
-	let t7;
-	if ($[9] !== activeTheme || $[10] !== props) {
-		t7 = /* @__PURE__ */ _jsx(Sonner, {
+	let t9;
+	if ($[13] !== activeTheme || $[14] !== props || $[15] !== t2) {
+		t9 = /* @__PURE__ */ _jsx(Sonner, {
 			theme: activeTheme,
-			className: "toaster group",
-			icons: t4,
-			style: t5,
-			toastOptions: t6,
+			className: t2,
+			icons: t6,
+			style: t7,
+			toastOptions: t8,
 			...props
 		});
-		$[9] = activeTheme;
-		$[10] = props;
-		$[11] = t7;
+		$[13] = activeTheme;
+		$[14] = props;
+		$[15] = t2;
+		$[16] = t9;
 	} else {
-		t7 = $[11];
+		t9 = $[16];
 	}
-	return t7;
+	return t9;
 };
 export { ThemedToaster };
+function _temp() {
+	return letFocusReachToastLayer(document);
+}

package/dist/constants/toast.d.ts

@@ -0,0 +1,3 @@
+/** Contract with the toast layer rendered by `ThemedToaster` (Sonner). */
+/** Selector of the list Sonner renders for each toast position, the outermost element of the toast layer. */
+export declare const TOAST_LAYER_SELECTOR = "[data-sonner-toaster]";

package/dist/constants/toast.js

@@ -0,0 +1,3 @@
+/** Contract with the toast layer rendered by `ThemedToaster` (Sonner). */
+/** Selector of the list Sonner renders for each toast position, the outermost element of the toast layer. */
+export const TOAST_LAYER_SELECTOR = "[data-sonner-toaster]";

package/dist/lib/toast-layer.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Tells whether an event target belongs to the toast layer.
+ * @param target - Target of the outside interaction.
+ * @returns `true` when the target is a toast or one of its controls.
+ */
+export declare function isToastLayerTarget(target: EventTarget | null): boolean;
+/**
+ * Lets keyboard focus enter the toast layer while a modal traps focus. Radix's focus trap listens for `focusin` and
+ * `focusout` on the document and pulls focus back into the modal whenever it lands outside, so Sonner's hotkey could
+ * never move focus to a toast's controls. Focus changes that land on a toast stop at the body, after React has run
+ * its own handlers and before the document-level trap sees them; every other focus change still reaches the trap.
+ * Because the trap never sees focus leave, it cannot pull it back either: when the focused toast control is removed
+ * (an action or close button dismisses its toast), focus returns to the element it came from instead of the body.
+ * @param ownerDocument - Document whose body hosts the app and the modal portals.
+ * @returns Removes the listeners.
+ */
+export declare function letFocusReachToastLayer(ownerDocument: Document): () => void;
+/**
+ * Wraps a modal's `onInteractOutside` so presses on toasts never dismiss it. The consumer's handler still runs first
+ * and can keep preventing dismissal for its own reasons.
+ * @param handler - The consumer's `onInteractOutside`, if any.
+ * @returns The handler to give the Radix content.
+ */
+export declare function keepOpenOnToastInteraction<OutsideEvent extends Event>(handler?: (event: OutsideEvent) => void): (event: OutsideEvent) => void;

package/dist/lib/toast-layer.js

@@ -0,0 +1,76 @@
+/**
+* Keeps toasts usable while a modal overlay is open. Toasts sit above every overlay, but a modal `Dialog` or `Sheet`
+* treats a press on them as a press outside and closes, so a toast's action or close button would dismiss the form
+* that raised it instead of running.
+*/
+import { TOAST_LAYER_SELECTOR } from "../constants/toast.js";
+/**
+* Tells whether an event target belongs to the toast layer.
+* @param target - Target of the outside interaction.
+* @returns `true` when the target is a toast or one of its controls.
+*/
+export function isToastLayerTarget(target) {
+	return target instanceof Element && target.closest(TOAST_LAYER_SELECTOR) !== null;
+}
+/**
+* Lets keyboard focus enter the toast layer while a modal traps focus. Radix's focus trap listens for `focusin` and
+* `focusout` on the document and pulls focus back into the modal whenever it lands outside, so Sonner's hotkey could
+* never move focus to a toast's controls. Focus changes that land on a toast stop at the body, after React has run
+* its own handlers and before the document-level trap sees them; every other focus change still reaches the trap.
+* Because the trap never sees focus leave, it cannot pull it back either: when the focused toast control is removed
+* (an action or close button dismisses its toast), focus returns to the element it came from instead of the body.
+* @param ownerDocument - Document whose body hosts the app and the modal portals.
+* @returns Removes the listeners.
+*/
+export function letFocusReachToastLayer(ownerDocument) {
+	const { body } = ownerDocument;
+	let focusOrigin = null;
+	let focusedToastElement = null;
+	const restoreFocusAfterRemoval = new MutationObserver(() => {
+		if (focusedToastElement?.isConnected !== false) return;
+		const activeElement = ownerDocument.activeElement;
+		if (activeElement === null || activeElement === body) focusOrigin?.focus({ preventScroll: true });
+		stopTrackingToastFocus();
+	});
+	const stopTrackingToastFocus = () => {
+		restoreFocusAfterRemoval.disconnect();
+		focusOrigin = null;
+		focusedToastElement = null;
+	};
+	const stopFocusIntoToast = (event) => {
+		const focusedElement = event.type === "focusin" ? event.target : event.relatedTarget;
+		if (!isToastLayerTarget(focusedElement)) {
+			if (event.type === "focusin") stopTrackingToastFocus();
+			return;
+		}
+		event.stopPropagation();
+		if (event.type !== "focusin") return;
+		if (focusedToastElement === null) {
+			focusOrigin = event.relatedTarget instanceof HTMLElement ? event.relatedTarget : null;
+			restoreFocusAfterRemoval.observe(body, {
+				childList: true,
+				subtree: true
+			});
+		}
+		focusedToastElement = focusedElement;
+	};
+	body.addEventListener("focusin", stopFocusIntoToast);
+	body.addEventListener("focusout", stopFocusIntoToast);
+	return () => {
+		stopTrackingToastFocus();
+		body.removeEventListener("focusin", stopFocusIntoToast);
+		body.removeEventListener("focusout", stopFocusIntoToast);
+	};
+}
+/**
+* Wraps a modal's `onInteractOutside` so presses on toasts never dismiss it. The consumer's handler still runs first
+* and can keep preventing dismissal for its own reasons.
+* @param handler - The consumer's `onInteractOutside`, if any.
+* @returns The handler to give the Radix content.
+*/
+export function keepOpenOnToastInteraction(handler) {
+	return (event) => {
+		handler?.(event);
+		if (isToastLayerTarget(event.target)) event.preventDefault();
+	};
+}