@botiverse/raft-ui 0.95.4 → 0.96.0

package/dist/components/combobox/combobox.mjs

@@ -289,7 +289,7 @@ function ComboboxSeparator({ className, ...props }) {
 	});
 }
 function ComboboxFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
-	const collision = usePopupCollision(collisionPadding, collisionBoundary, 8, container);
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, 8, container, void 0, props.anchor);
 	return /* @__PURE__ */ jsx(Combobox.Positioner, {
 		...collision,
 		...props

package/dist/components/combobox-select/combobox-select.mjs

@@ -68,7 +68,7 @@ const PHONE_LIST_COLLISION = {
 	fallbackAxisSide: "none"
 };
 function ComboboxSelectFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
-	const collision = usePopupCollision(collisionPadding, collisionBoundary, 8, container);
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, 8, container, void 0, props.anchor);
 	return /* @__PURE__ */ jsx(Combobox.Positioner, {
 		...collision,
 		...props

package/dist/components/context-menu/context-menu.mjs

@@ -85,7 +85,7 @@ function ContextMenuPortal(props) {
 	});
 }
 function ContextMenuFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
-	const collision = usePopupCollision(collisionPadding, collisionBoundary, 8, container);
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, 8, container, void 0, props.anchor);
 	return /* @__PURE__ */ jsx(ContextMenu.Positioner, {
 		...collision,
 		...props

package/dist/components/dialog/dialog-sheet-context.mjs

@@ -1,3 +1,4 @@
+import { PopupSheetReset } from "../../lib/popup-boundary.mjs";
 import { tv } from "../../lib/tv.mjs";
 import { createContext, createElement, useContext } from "react";
 // src/components/dialog/dialog-sheet-context.ts
@@ -25,10 +26,11 @@ function useInDialogSheetHead() {
 /**
 * Every overlay surface starts outside any sheet: a confirm, a dialog or a
 * drawer opened from inside a sheet keeps its own head, footer and commit
-* button instead of taking the sheet's.
+* button instead of taking the sheet's, and its popups aren't kept inside the
+* sheet below it (PopupSheetContext).
 */
 function DialogSheetReset({ children }) {
-	return createElement(DialogSheetSurfaceContext.Provider, { value: false }, createElement(DialogSheetContext.Provider, { value: NO_SHEET }, createElement(DialogSheetHeadContext.Provider, { value: false }, children)));
+	return createElement(DialogSheetSurfaceContext.Provider, { value: false }, createElement(DialogSheetContext.Provider, { value: NO_SHEET }, createElement(DialogSheetHeadContext.Provider, { value: false }, createElement(PopupSheetReset, null, children))));
 }
 /**
 * A dialog drawn as a phone sheet (design: dialog.md "On a phone"). The

package/dist/components/dialog/dialog-sheet.mjs

@@ -1,4 +1,5 @@
 import { cn } from "../../cn.mjs";
+import { PopupSheetContext } from "../../lib/popup-boundary.mjs";
 import { useMobileViewport } from "../../lib/use-mobile-viewport.mjs";
 import { useSoftKeyboard } from "../../lib/use-soft-keyboard.mjs";
 import { Button } from "../button/button.mjs";
@@ -40,6 +41,10 @@ function DialogSheetContent({ className, overlay, placement, style, ref, childre
 		setPopup(element);
 		assignRef(ref, element);
 	}, [ref]);
+	const popupSheet = useMemo(() => phone && popup ? {
+		head: () => popup.querySelector("[data-slot=\"dialog-header\"]"),
+		surface: () => popup
+	} : void 0, [phone, popup]);
 	const sheet = dialogSheet();
 	const sheetOverlay = useMemo(() => overlay === false ? false : {
 		...typeof overlay === "object" ? overlay : null,
@@ -65,7 +70,10 @@ function DialogSheetContent({ className, overlay, placement, style, ref, childre
 			"data-sheet": phone ? "" : void 0,
 			children: /* @__PURE__ */ jsx(DialogSheetContext.Provider, {
 				value: state,
-				children
+				children: /* @__PURE__ */ jsx(PopupSheetContext.Provider, {
+					value: popupSheet,
+					children
+				})
 			})
 		})
 	});

package/dist/components/dialog/dialog.mjs

@@ -1,6 +1,7 @@
 import { cn } from "../../cn.mjs";
 import { barButtonDesktop, headEdgePull } from "../../lib/head-edges.mjs";
 import { decisionWidth } from "../../lib/decision-width.mjs";
+import { PopupSheetReset } from "../../lib/popup-boundary.mjs";
 import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { stackedActions, useStackedActions } from "../../lib/stacked-actions.mjs";
 import { tv } from "../../lib/tv.mjs";
@@ -23,6 +24,7 @@ import { createPortal } from "react-dom";
 const dialog = tv({
 	slots: {
 		overlay: ["fixed inset-0 z-dialog bg-layer-backdrop"],
+		portal: [],
 		content: [
 			"fixed top-1/2 left-1/2 z-dialog flex w-[calc(100%-2rem)] -translate-1/2 flex-col",
 			"max-h-[calc(100dvh-2rem)] outline-none",
@@ -84,9 +86,13 @@ const dialog = tv({
 			},
 			1: {
 				overlay: ["z-dialog-layer"],
-				content: ["z-dialog-layer"]
+				content: []
 			}
 		},
+		lifted: {
+			false: {},
+			true: { portal: ["relative isolate z-dialog-layer"] }
+		},
 		nested: {
 			false: {},
 			true: { overlay: ["bg-layer-backdrop-nested"] }
@@ -141,19 +147,25 @@ function DialogContent({ className, children, portalProps, overlay, size, layer,
 	const sheetSurface = useContext(DialogSheetSurfaceContext);
 	const [keyboard, setKeyboard] = useState(null);
 	const raised = !sheetSurface && keyboard != null;
-	const { content } = dialog({
+	const lifted = layer === 1;
+	const { content, portal } = dialog({
 		size,
-		layer,
 		placement,
+		lifted,
 		keyboard: raised || void 0
 	});
-	const overlayProps = typeof overlay === "object" ? overlay : {};
+	const { layer: overlayLayer, ...overlayRest } = typeof overlay === "object" ? overlay : {};
+	const overlayProps = lifted ? overlayRest : {
+		layer: overlayLayer,
+		...overlayRest
+	};
+	const portalClassName = portalProps?.className;
+	const liftedPortalClassName = typeof portalClassName === "function" ? (state) => portal({ className: portalClassName(state) }) : portal({ className: portalClassName });
 	return /* @__PURE__ */ jsxs(DialogPortal, {
 		...portalProps,
-		children: [overlay === false ? null : /* @__PURE__ */ jsx(DialogOverlay, {
-			layer,
-			...overlayProps
-		}), /* @__PURE__ */ jsxs(Dialog.Popup, {
+		"data-layer": lifted ? 1 : void 0,
+		className: lifted ? liftedPortalClassName : portalClassName,
+		children: [overlay === false ? null : /* @__PURE__ */ jsx(DialogOverlay, { ...overlayProps }), /* @__PURE__ */ jsxs(Dialog.Popup, {
 			"data-slot": "dialog-content",
 			"data-placement": top ? "top" : void 0,
 			"data-soft-keyboard": raised ? "" : void 0,
@@ -255,9 +267,9 @@ function DialogHeader({ className, bar = false, children, ...props }) {
 			"data-sheet": "",
 			className: dialog({ bar: false }).header({ className: cn(head.header(), className) }),
 			...props,
-			children: [/* @__PURE__ */ jsxs(DialogSheetHeadContext.Provider, {
+			children: [/* @__PURE__ */ jsx(DialogSheetHeadContext.Provider, {
 				value: true,
-				children: [backs.length > 0 ? backs : closes, rest]
+				children: /* @__PURE__ */ jsxs(PopupSheetReset, { children: [backs.length > 0 ? backs : closes, rest] })
 			}), /* @__PURE__ */ jsx("div", {
 				ref: setCommitSlot,
 				"data-slot": "dialog-commit-slot",

package/dist/components/drawer/drawer.d.mts

@@ -18,7 +18,7 @@ export declare function DrawerContent({ className, children, portalProps, ...pro
 export type DrawerCloseProps = StyledProps<Drawer.Close.Props> & Pick<ButtonProps, "variant" | "size">;
 export declare function DrawerClose({ className, variant, size, children, render, "aria-label": ariaLabel, ...props }: DrawerCloseProps): import("react").JSX.Element;
 export type DrawerHeaderProps = useRender.ComponentProps<"div">;
-export declare function DrawerHeader({ className, render, ...props }: DrawerHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function DrawerHeader({ className, render, children, ...props }: DrawerHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type DrawerFooterProps = useRender.ComponentProps<"div">;
 export declare function DrawerFooter({ className, render, ...props }: DrawerFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type DrawerBodyProps = useRender.ComponentProps<"div">;

package/dist/components/drawer/drawer.mjs

@@ -1,11 +1,12 @@
 import { cn } from "../../cn.mjs";
+import { PopupSheetContext, PopupSheetReset } from "../../lib/popup-boundary.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
 import { Button } from "../button/button.mjs";
 import { DialogSheetReset } from "../dialog/dialog-sheet-context.mjs";
 import { drawer } from "./drawer.recipe.mjs";
 import { useParentOverlayKind, withOverlayLayer } from "../../lib/overlay-depth.mjs";
 import { X } from "lucide-react";
-import { createContext, useContext, useMemo } from "react";
+import { createContext, useContext, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -89,6 +90,11 @@ function DrawerContent({ className, children, portalProps, ...props }) {
 		axis: swipeAxis,
 		snapPoints: hasSnapPoints
 	});
+	const [surface, setSurface] = useState(null);
+	const popupSheet = useMemo(() => surface ? {
+		head: () => surface.querySelector("[data-slot=\"drawer-header\"]"),
+		surface: () => surface
+	} : void 0, [surface]);
 	return /* @__PURE__ */ jsxs(DrawerPortal, {
 		...portalProps,
 		children: [modal === true ? /* @__PURE__ */ jsx(DrawerOverlay, {}) : null, /* @__PURE__ */ jsx(Drawer.Viewport, {
@@ -99,9 +105,13 @@ function DrawerContent({ className, children, portalProps, ...props }) {
 				className: popup({ className }),
 				...props,
 				children: [hasSnapPoints || swipeDirection === "down" ? /* @__PURE__ */ jsx(DrawerSwipeHandle, {}) : null, /* @__PURE__ */ jsx(Drawer.Content, {
+					ref: setSurface,
 					"data-slot": "drawer-content",
 					className: content(),
-					children: /* @__PURE__ */ jsx(DialogSheetReset, { children })
+					children: /* @__PURE__ */ jsx(DialogSheetReset, { children: /* @__PURE__ */ jsx(PopupSheetContext.Provider, {
+						value: popupSheet,
+						children
+					}) })
 				})]
 			})
 		})]
@@ -130,14 +140,17 @@ function DrawerClose({ className, variant, size, children, render, "aria-label":
 		children: children ?? /* @__PURE__ */ jsx(X, { className: closeIcon() })
 	});
 }
-function DrawerHeader({ className, render, ...props }) {
+function DrawerHeader({ className, render, children, ...props }) {
 	const { hasSnapPoints, swipeAxis, swipeDirection } = useDrawerConfig();
 	const { header } = drawer({
 		side: swipeDirection,
 		axis: swipeAxis,
 		snapPoints: hasSnapPoints
 	});
-	const defaultProps = { className: header({ className }) };
+	const defaultProps = {
+		className: header({ className }),
+		children: /* @__PURE__ */ jsx(PopupSheetReset, { children })
+	};
 	return useRender({
 		defaultTagName: "div",
 		render,

package/dist/components/dropdown-menu/dropdown-menu.mjs

@@ -101,7 +101,7 @@ function DropdownMenuPopup({ className, ...props }) {
 	});
 }
 function DropdownMenuFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
-	const collision = usePopupCollision(collisionPadding, collisionBoundary, 5, container);
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, 5, container, void 0, props.anchor);
 	return /* @__PURE__ */ jsx(Menu.Positioner, {
 		...collision,
 		...props

package/dist/components/lightbox/lightbox.d.mts

@@ -61,7 +61,7 @@ export type LightboxContentProps = StyledProps<Dialog.Popup.Props>;
  * A lightbox opened from state passes `finalFocus={openerRef}` so focus goes
  * back to what opened it.
  */
-export declare function LightboxContent({ className, initialFocus, finalFocus, onKeyDown, ref, ...props }: LightboxContentProps): import("react").JSX.Element;
+export declare function LightboxContent({ className, initialFocus, finalFocus, onKeyDown, ref, children, ...props }: LightboxContentProps): import("react").JSX.Element;
 export type LightboxHeaderProps = useRender.ComponentProps<"div">;
 export declare function LightboxHeader({ render, className, ...props }: LightboxHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type LightboxToolbarProps = useRender.ComponentProps<"div">;

package/dist/components/lightbox/lightbox.mjs

@@ -1,6 +1,7 @@
 import { cn } from "../../cn.mjs";
 import { headEdgePull } from "../../lib/head-edges.mjs";
-import { OverlayLayerProvider, useParentOverlayKind } from "../../lib/overlay-depth.mjs";
+import { OverlayLayer, useParentOverlayKind } from "../../lib/overlay-depth.mjs";
+import { PopupSheetReset } from "../../lib/popup-boundary.mjs";
 import { tv } from "../../lib/tv.mjs";
 import { useMergedRef } from "../../lib/use-merged-ref.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
@@ -25,9 +26,9 @@ const lightbox = tv({
 		header: [
 			"pointer-events-auto shrink-0",
 			"flex items-center gap-3 pb-3",
-			"pt-[calc(env(safe-area-inset-top,0px)+--spacing(3))]",
-			"pl-[calc(env(safe-area-inset-left,0px)+--spacing(4))]",
-			"pr-[calc(env(safe-area-inset-right,0px)+--spacing(4))]",
+			"pt-[calc(env(safe-area-inset-top,0px)+(--spacing(3)))]",
+			"pl-[calc(env(safe-area-inset-left,0px)+(--spacing(4)))]",
+			"pr-[calc(env(safe-area-inset-right,0px)+(--spacing(4)))]",
 			"bg-transparent shadow-none",
 			headEdgePull
 		],
@@ -71,7 +72,7 @@ const lightbox = tv({
 			"focus-visible:outline-transparent focus-visible:shadow-focus",
 			"[&_svg]:size-5.5"
 		],
-		infoDock: ["pointer-events-none absolute right-6 bottom-20 left-6 z-raised flex justify-center"],
+		infoDock: ["pointer-events-none absolute inset-x-6 bottom-20  z-raised flex justify-center"],
 		infoBar: [
 			"pointer-events-auto flex items-center",
 			"w-[clamp(144px,20vw,224px)] max-w-[calc(100vw-48px)] min-w-36",
@@ -87,7 +88,7 @@ const lightbox = tv({
 			"*:data-[slot=button]:after:inset-x-[-3px] *:data-[slot=button]:first:after:left-[-9.5px] *:data-[slot=button]:last:after:right-[-9.5px]",
 			"pointer-coarse:*:data-[slot=button]:after:inset-y-[-9.5px]"
 		],
-		thumbnailStrip: ["pointer-events-none absolute right-0 bottom-4 left-0 z-raised", "flex items-center justify-center gap-1.5"],
+		thumbnailStrip: ["pointer-events-none absolute inset-x-0 bottom-4  z-raised", "flex items-center justify-center gap-1.5"],
 		thumbnail: [
 			"group/lightbox-thumb pointer-events-auto relative size-12 overflow-hidden",
 			"transition-[border-color,opacity,box-shadow] duration-150",
@@ -127,7 +128,7 @@ function Lightbox({ closeOnModW = true, defaultOpen = false, modal = true, onOpe
 		onOpenChange: handleOpenChange,
 		open,
 		...props,
-		children: [modWClose, /* @__PURE__ */ jsx(OverlayLayerProvider, {
+		children: [modWClose, /* @__PURE__ */ jsx(OverlayLayer, {
 			kind: "dialog",
 			modal: true,
 			children: /* @__PURE__ */ jsx(LightboxModalContext.Provider, {
@@ -281,7 +282,7 @@ function routeScrollKey(event) {
 * A lightbox opened from state passes `finalFocus={openerRef}` so focus goes
 * back to what opened it.
 */
-function LightboxContent({ className, initialFocus, finalFocus, onKeyDown, ref, ...props }) {
+function LightboxContent({ className, initialFocus, finalFocus, onKeyDown, ref, children, ...props }) {
 	const documentMode = useContext(LightboxModalContext) === "trap-focus";
 	const nested = useParentOverlayKind() != null;
 	const { backdrop, content } = lightbox({ nested });
@@ -307,7 +308,8 @@ function LightboxContent({ className, initialFocus, finalFocus, onKeyDown, ref,
 		finalFocus: finalFocus ?? documentMode,
 		className: content({ className }),
 		onKeyDown: handleKeyDown,
-		...props
+		...props,
+		children: /* @__PURE__ */ jsx(PopupSheetReset, { children })
 	})] });
 }
 function LightboxHeader({ render, className, ...props }) {

package/dist/components/notification-center/notification-center.mjs

@@ -137,7 +137,7 @@ function NotificationCenterPortal(props) {
 	});
 }
 function NotificationCenterFramePositioner({ collisionBoundary, collisionPadding, container, defaultCollisionPadding, ...props }) {
-	const collision = usePopupCollision(collisionPadding, collisionBoundary, defaultCollisionPadding, container);
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, defaultCollisionPadding, container, void 0, props.anchor);
 	return /* @__PURE__ */ jsx(Popover.Positioner, {
 		...collision,
 		...props

package/dist/components/popover/popover.mjs

@@ -71,7 +71,7 @@ function PopoverPopup({ className, ...props }) {
 	});
 }
 function PopoverFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
-	const collision = usePopupCollision(collisionPadding, collisionBoundary, 5, container);
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, 5, container, void 0, props.anchor);
 	return /* @__PURE__ */ jsx(Popover.Positioner, {
 		...collision,
 		...props

package/dist/components/preview-card/preview-card.mjs

@@ -70,7 +70,7 @@ function PreviewCardPopup({ className, ...props }) {
 	});
 }
 function PreviewCardFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
-	const collision = usePopupCollision(collisionPadding, collisionBoundary, 5, container);
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, 5, container, void 0, props.anchor);
 	return /* @__PURE__ */ jsx(PreviewCard.Positioner, {
 		...collision,
 		...props

package/dist/components/select/select.mjs

@@ -344,7 +344,7 @@ function SelectPopup({ className, ...props }) {
 	});
 }
 function SelectFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
-	const collision = usePopupCollision(collisionPadding, collisionBoundary, 8, container);
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, 8, container, void 0, props.anchor);
 	return /* @__PURE__ */ jsx(Select.Positioner, {
 		...collision,
 		...props

package/dist/components/tooltip/tooltip.mjs

@@ -169,7 +169,7 @@ const CONTENT_COLLISION_AVOIDANCE = {
 * off center, by up to half the left and right insets.
 */
 function TooltipFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
-	const collision = usePopupCollision(void 0, collisionBoundary, collisionPadding ?? 5, container, 0);
+	const collision = usePopupCollision(void 0, collisionBoundary, collisionPadding ?? 5, container, 0, props.anchor);
 	return /* @__PURE__ */ jsx(Tooltip.Positioner, {
 		...collision,
 		...props

package/dist/lib/frame-insets.mjs

@@ -1,4 +1,5 @@
-import { useMemo, useState } from "react";
+import { sheetPopupBoundary, usePopupSheet, visualViewportShift } from "./popup-boundary.mjs";
+import { useLayoutEffect, useMemo, useState } from "react";
 // src/lib/frame-insets.ts
 const NO_FRAME_INSETS = Object.freeze({
 	top: 0,
@@ -127,15 +128,20 @@ function portalsToBody(container) {
 	return element == null || element === document.body || element === document.documentElement;
 }
 /**
-* The window inset by the frame insets, as a collision boundary rect. Its size
-* is read each time Base UI places the popup (it copies the rect's fields), so
-* it follows the window when it resizes while the popup is open.
+* The window inset by the frame insets, as a collision boundary rect. Its
+* fields are read each time Base UI places the popup (it copies them), so it
+* follows the window when it resizes while the popup is open, and WebKit's
+* visual viewport when it pans (visualViewportShift).
 */
 function frameCollisionBoundary(insets) {
 	const root = () => document.documentElement;
 	return {
-		x: insets.left,
-		y: insets.top,
+		get x() {
+			return insets.left + visualViewportShift().x;
+		},
+		get y() {
+			return insets.top + visualViewportShift().y;
+		},
 		get width() {
 			return Math.max(0, root().clientWidth - insets.left - insets.right);
 		},
@@ -191,16 +197,54 @@ function frameCollision(padding, boundary, insets, gap, container) {
 * inset, and `gap` (8px) inside each inset, the insets as the boundary
 * (frameCollision). A `collisionPadding` the caller passes wins as it is, and
 * a `collisionBoundary` the caller passes is kept. Call it from a part inside
-* the popup's portal, which mounts each time the popup opens.
+* the popup's portal, which mounts each time the popup opens, and spread the
+* result on the positioner.
+*
+* In a sheet (a phone's DialogSheetContent, a Drawer, an app's own under
+* SheetPopupBoundary) a popup with no `collisionBoundary` of its own takes the
+* sheet's: the area under its head, decided for this popup each time it is
+* placed (sheetPopupBoundary), whatever its portal container. Pass the
+* positioner's own `anchor` as `anchor`: the sheet then decides by it, not by
+* the trigger it would look up in the page. Outside a sheet nothing changes,
+* and no `ref` is returned.
 */
-function usePopupCollision(collisionPadding, collisionBoundary, defaultPadding, container, gap = 8) {
+function usePopupCollision(collisionPadding, collisionBoundary, defaultPadding, container, gap = 8, anchor) {
 	const insets = useFrameInsets(container);
-	return useMemo(() => collisionPadding === void 0 ? frameCollision(defaultPadding, collisionBoundary, insets, gap, container) : {
-		collisionPadding,
-		collisionBoundary
+	const sheet = usePopupSheet();
+	const [positioner] = useState(() => ({ current: null }));
+	const [latest] = useState(() => {
+		let current = anchor;
+		return {
+			read: () => current,
+			set: (next) => {
+				current = next;
+			}
+		};
+	});
+	useLayoutEffect(() => {
+		latest.set(anchor);
+	}, [latest, anchor]);
+	const sheetBoundary = useMemo(() => sheet && collisionBoundary === void 0 ? sheetPopupBoundary(sheet, () => positioner.current, latest.read) : void 0, [
+		sheet,
+		collisionBoundary,
+		positioner,
+		latest
+	]);
+	const boundary = collisionBoundary ?? sheetBoundary;
+	return useMemo(() => {
+		const collision = collisionPadding === void 0 ? frameCollision(defaultPadding, boundary, insets, gap, container) : {
+			collisionPadding,
+			collisionBoundary: boundary
+		};
+		return sheetBoundary ? {
+			...collision,
+			ref: positioner
+		} : collision;
 	}, [
 		collisionPadding,
-		collisionBoundary,
+		boundary,
+		sheetBoundary,
+		positioner,
 		defaultPadding,
 		insets,
 		gap,

package/dist/lib/overlay-depth.d.mts

@@ -24,6 +24,11 @@ export type OverlayLayerProviderProps = {
  * `useParentOverlayKind` inside it to pick its own scrim. Modal overlays only:
  * a non-modal one passes `modal={false}`, adds nothing, and must not call
  * `useParentOverlayKind` (it would read the layer below as its own).
+ *
+ * It is a surface of its own, modal or not, so what is inside starts outside
+ * any sheet around it: a popup opened in it isn't held inside a sheet it was
+ * opened from (dialog.md, "Popups in a sheet"). A sheet of the app's own puts
+ * its `SheetPopupBoundary` inside this provider.
  */
 export declare function OverlayLayerProvider({ kind, modal, children }: OverlayLayerProviderProps): import("react").JSX.Element;
 /**

package/dist/lib/overlay-depth.mjs

@@ -1,8 +1,27 @@
+import { PopupSheetReset } from "./popup-boundary.mjs";
 import { createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 // src/lib/overlay-depth.tsx
 const OverlayStackContext = createContext([]);
 /**
+* Adds a modal surface to the stack for everything under it. raft-ui's own
+* roots use this one: a root also holds its trigger, which is still in the
+* surface it is written in, so it must not start outside that sheet as
+* `OverlayLayerProvider` does.
+*/
+function OverlayLayer({ kind, modal, children }) {
+	const stack = useContext(OverlayStackContext);
+	const value = useMemo(() => modal ? [...stack, kind] : stack, [
+		stack,
+		kind,
+		modal
+	]);
+	return /* @__PURE__ */ jsx(OverlayStackContext.Provider, {
+		value,
+		children
+	});
+}
+/**
 * Tells everything under it that a modal surface is open, so a raft-ui
 * Dialog, AlertDialog or Drawer opened from inside draws the lighter nested
 * scrim (design/foundations/elevation.md#stacked-overlays). raft-ui's own
@@ -11,17 +30,17 @@ const OverlayStackContext = createContext([]);
 * `useParentOverlayKind` inside it to pick its own scrim. Modal overlays only:
 * a non-modal one passes `modal={false}`, adds nothing, and must not call
 * `useParentOverlayKind` (it would read the layer below as its own).
+*
+* It is a surface of its own, modal or not, so what is inside starts outside
+* any sheet around it: a popup opened in it isn't held inside a sheet it was
+* opened from (dialog.md, "Popups in a sheet"). A sheet of the app's own puts
+* its `SheetPopupBoundary` inside this provider.
 */
 function OverlayLayerProvider({ kind, modal, children }) {
-	const stack = useContext(OverlayStackContext);
-	const value = useMemo(() => modal ? [...stack, kind] : stack, [
-		stack,
+	return /* @__PURE__ */ jsx(OverlayLayer, {
 		kind,
-		modal
-	]);
-	return /* @__PURE__ */ jsx(OverlayStackContext.Provider, {
-		value,
-		children
+		modal,
+		children: /* @__PURE__ */ jsx(PopupSheetReset, { children })
 	});
 }
 /**
@@ -44,15 +63,15 @@ function useParentOverlayKind() {
 * children be a render function (`({ payload }) => …`), so keep that shape.
 */
 function withOverlayLayer(kind, modal, children) {
-	if (typeof children === "function") return (...args) => /* @__PURE__ */ jsx(OverlayLayerProvider, {
+	if (typeof children === "function") return (...args) => /* @__PURE__ */ jsx(OverlayLayer, {
 		kind,
 		modal,
 		children: children(...args)
 	});
-	return /* @__PURE__ */ jsx(OverlayLayerProvider, {
+	return /* @__PURE__ */ jsx(OverlayLayer, {
 		kind,
 		modal,
 		children
 	});
 }
-export { OverlayLayerProvider, useParentOverlayKind, withOverlayLayer };
+export { OverlayLayer, OverlayLayerProvider, useParentOverlayKind, withOverlayLayer };

package/dist/lib/popup-boundary.d.mts

@@ -0,0 +1,24 @@
+import { ReactNode, RefObject } from "react";
+export type SheetPopupBoundaryProps = {
+  /** The sheet's head: popups stay under its bottom edge. */
+  head: RefObject<Element | null>;
+  /**
+   * The sheet's surface: popups stay above its bottom edge.
+   * @default The head's parent element.
+   */
+  surface?: RefObject<Element | null>;
+  children?: ReactNode;
+};
+/**
+ * For a sheet an app draws itself (its own surface, a head that stays put and
+ * a body that scrolls): every raft-ui popup opened under it (Select, Combobox,
+ * ComboboxSelect, DropdownMenu, ContextMenu, Popover, PreviewCard, Tooltip,
+ * NotificationCenter) flips and sizes inside the sheet, under its head
+ * (sheetPopupBoundary says when it doesn't). Wrap the sheet's body in it, or
+ * the head and the body: a popup anchored in the head is left alone either
+ * way. Put it inside the sheet's own `OverlayLayerProvider`, which starts
+ * without one. raft-ui's own sheets, `DialogSheetContent` on a phone and
+ * `Drawer`, do this by themselves, and a `collisionBoundary` passed to a popup
+ * still wins. It renders no element.
+ */
+export declare function SheetPopupBoundary({ head, surface, children }: SheetPopupBoundaryProps): import("react").JSX.Element;