ropav 0.14.0 → 0.15.0

package/dist/components/alert-dialog/alert-dialog-backdrop.js

@@ -1,6 +1,7 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { provideFocusResponder } from "../../composables/focus-responder.js";
 import { providePressResponder } from "../../composables/press-responder.js";
+import { usePortal } from "../../composables/use-portal.js";
 import { useModalOverlay } from "../../composables/use-modal-overlay.js";
 import { useModalTransition } from "../../composables/use-modal-transition.js";
 import { provideAlertDialogContext, provideAlertDialogOverlayContext, useAlertDialogContext } from "./alert-dialog.context.js";
@@ -101,7 +102,8 @@ var alert_dialog_backdrop_vue_vue_type_script_setup_true_vapor_true_lang_default
 			}
 		});
 		const styles = computed(() => slots.value.backdrop({ class: props.class }));
-		const target = computed(() => props.portalContainer ?? "body");
+		const portal = usePortal();
+		const target = computed(() => props.portalContainer ?? portal.container.value);
 		const setElement = (next) => {
 			backdropElement.value = next ?? null;
 		};

package/dist/components/drawer/drawer-backdrop.js

@@ -1,6 +1,7 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { provideFocusResponder } from "../../composables/focus-responder.js";
 import { providePressResponder } from "../../composables/press-responder.js";
+import { usePortal } from "../../composables/use-portal.js";
 import { useModalOverlay } from "../../composables/use-modal-overlay.js";
 import { useModalTransition } from "../../composables/use-modal-transition.js";
 import { provideDrawerContext, provideDrawerOverlayContext, useDrawerContext } from "./drawer.context.js";
@@ -98,7 +99,8 @@ var drawer_backdrop_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 			}
 		});
 		const styles = computed(() => slots.value.backdrop({ class: props.class }));
-		const target = computed(() => props.portalContainer ?? "body");
+		const portal = usePortal();
+		const target = computed(() => props.portalContainer ?? portal.container.value);
 		const setElement = (next) => {
 			backdropElement.value = next ?? null;
 		};

package/dist/components/index.d.ts

@@ -58,6 +58,7 @@ export * from "./modal/index.js";
 export * from "./number-field/index.js";
 export * from "./pagination/index.js";
 export * from "./popover/index.js";
+export * from "./portal-provider/index.js";
 export * from "./progress-bar/index.js";
 export * from "./progress-circle/index.js";
 export * from "./radio/index.js";

package/dist/components/meter/meter-root.js

@@ -5,7 +5,7 @@ import { useProgressValue } from "../../composables/use-progress-value.js";
 import { computed, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, template, unref } from "vue";
 import { meterVariants } from "@ropav/styles";
 //#region src/components/meter/meter-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-slot=meter role=\"meter progressbar\">", 1);
+var t0 = template("<div data-slot=meter role=meter>", 1);
 var meter_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "meter-root",
 	props: {

package/dist/components/modal/modal-backdrop.js

@@ -1,6 +1,7 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { provideFocusResponder } from "../../composables/focus-responder.js";
 import { providePressResponder } from "../../composables/press-responder.js";
+import { usePortal } from "../../composables/use-portal.js";
 import { useModalOverlay } from "../../composables/use-modal-overlay.js";
 import { useModalTransition } from "../../composables/use-modal-transition.js";
 import { provideModalContext, provideModalOverlayContext, useModalContext } from "./modal.context.js";
@@ -95,7 +96,8 @@ var modal_backdrop_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 			}
 		});
 		const styles = computed(() => slots.value.backdrop({ class: props.class }));
-		const target = computed(() => props.portalContainer ?? "body");
+		const portal = usePortal();
+		const target = computed(() => props.portalContainer ?? portal.container.value);
 		const setElement = (next) => {
 			backdropElement.value = next ?? null;
 		};

package/dist/components/overlay/overlay-popover.js

@@ -3,6 +3,7 @@ import { provideSurfaceContext } from "../surface/surface.context.js";
 import { ariaHideOutside, keepVisible } from "../../utils/aria-hide-outside.js";
 import { useDismissable } from "../../composables/use-dismissable.js";
 import { useFocusScope } from "../../composables/use-focus-scope.js";
+import { usePortal } from "../../composables/use-portal.js";
 import { usePreventScroll } from "../../composables/use-prevent-scroll.js";
 import { useEnterExit } from "../../composables/use-enter-exit.js";
 import { provideOverlayGroupContext, useOverlayGroupContext, useOverlayTargetContext } from "./overlay.context.js";
@@ -54,6 +55,7 @@ var overlay_popover_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 		const props = __props;
 		const target = useOverlayTargetContext();
 		const group = useOverlayGroupContext();
+		const portal = usePortal();
 		/**
 		* Modality belongs to the overlay, not to the thing that opened it.
 		*
@@ -88,6 +90,7 @@ var overlay_popover_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 		const { arrowStyle, overlayStyle, placement } = useOverlayPosition({
 			arrowBoundaryOffset: () => props.arrowBoundaryOffset,
 			arrowRef: arrow,
+			boundaryElement: () => portal.root.value,
 			containerPadding: () => props.containerPadding,
 			crossOffset: () => props.crossOffset,
 			isOpen: () => target.state.isOpen.value,
@@ -138,6 +141,7 @@ var overlay_popover_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 			isOpen: () => target.state.isOpen.value,
 			onClose: target.state.close,
 			overlayRef: element,
+			region: () => portal.root.value,
 			shouldCloseOnBlur: true,
 			shouldCloseOnInteractOutside
 		});
@@ -157,14 +161,18 @@ var overlay_popover_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 			() => target.state.isOpen.value,
 			element,
 			ownContainer,
-			isNonModal
-		], ([isOpen, popover, container], _previous, onCleanup) => {
+			isNonModal,
+			() => portal.root.value
+		], ([isOpen, popover, container, nonModal, root], _previous, onCleanup) => {
 			if (!isOpen || !popover) return;
-			if (isNonModal.value) {
+			if (nonModal) {
 				onCleanup(keepVisible(popover) ?? (() => {}));
 				return;
 			}
-			onCleanup(ariaHideOutside([container ?? popover], { shouldUseInert: true }));
+			onCleanup(ariaHideOutside([container ?? popover], {
+				root: root ?? void 0,
+				shouldUseInert: true
+			}));
 		}, {
 			flush: "post",
 			immediate: true
@@ -172,6 +180,7 @@ var overlay_popover_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 		useFocusScope({
 			contain: () => isDialog.value || focusContainRequests.value > 0,
 			isActive: () => target.state.isOpen.value,
+			region: () => portal.root.value,
 			restoreFocus: true,
 			scopeRef: element
 		});
@@ -215,7 +224,7 @@ var overlay_popover_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 			ownContainer.value = next ?? null;
 		};
 		return [createIf(() => !unref(isSubOverlay) && isPresent.value, () => {
-			return createComponent(VaporTeleport, { to: "body" }, () => {
+			return createComponent(VaporTeleport, { to: () => unref(portal).container.value }, () => {
 				const n2 = t0();
 				setStyle(n2, CONTAINER_STYLE);
 				setTemplateRefBinding(n2, () => setContainer);

package/dist/components/portal-provider/index.d.ts

@@ -0,0 +1,3 @@
+import PortalProviderRoot from "./portal-provider.js";
+export { PortalProviderRoot as PortalProvider };
+export type { PortalProviderRootProps as PortalProviderProps } from "./portal-provider.types.js";

package/dist/components/portal-provider/index.js

@@ -0,0 +1,2 @@
+import portal_provider_default from "./portal-provider.js";
+export { portal_provider_default as PortalProvider };

package/dist/components/portal-provider/portal-provider.d.ts

@@ -0,0 +1,21 @@
+import type { PortalProviderRootProps } from "./portal-provider.types.js";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<PortalProviderRootProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/portal-provider/portal-provider.js

@@ -0,0 +1,20 @@
+import { providePortal } from "../../composables/use-portal.js";
+import { createSlot, defineVaporComponent } from "vue";
+//#region src/components/portal-provider/portal-provider.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var portal_provider_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "portal-provider",
+	props: {
+		container: {},
+		root: {}
+	},
+	setup(__props) {
+		const props = __props;
+		providePortal({
+			container: () => props.container,
+			root: () => props.root
+		});
+		return createSlot();
+	}
+});
+//#endregion
+export { portal_provider_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/portal-provider/portal-provider.types.d.ts

@@ -0,0 +1,22 @@
+export interface PortalProviderRootProps {
+    /**
+     * Where every overlay below renders: modals, alert dialogs, drawers, popovers, menus, the
+     * listboxes of pickers, tooltips and toast regions. A component's own `portalContainer` still
+     * wins.
+     *
+     * Omitted, it inherits the enclosing provider's container; `null` goes back to the document's
+     * body. An element other than the body has to be a containing block for `position: fixed` (a
+     * `transform`, or `contain: layout` or `paint`) sized to the area the overlays cover: backdrops
+     * fill it, and modals size to it rather than to the visual viewport.
+     */
+    container?: HTMLElement | string | null;
+    /**
+     * The part of the page the overlays below belong to, usually an element holding both the content
+     * and the `container`. A modal makes only this element `inert` and holds focus and outside
+     * presses only within it, and a placed overlay flips and shifts to stay inside it — so an app
+     * rendered in a window of a larger page leaves the rest of that page alone.
+     *
+     * Omitted, it inherits the enclosing provider's root; `null` goes back to the whole document.
+     */
+    root?: HTMLElement | null;
+}

package/dist/components/toast/toast-provider.js

@@ -1,5 +1,6 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { composeSlotClassName } from "../../utils/compose.js";
+import { usePortal } from "../../composables/use-portal.js";
 import { useLocale } from "../../composables/use-locale.js";
 import { provideToastRegionContext } from "./toast.context.js";
 import { DEFAULT_SCALE_FACTOR, EXIT_FALLBACK } from "./toast.constants.js";
@@ -115,7 +116,8 @@ var toast_provider_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 			slots,
 			visibleToasts
 		});
-		const target = computed(() => props.portalContainer ?? "body");
+		const portal = usePortal();
+		const target = computed(() => props.portalContainer ?? portal.container.value);
 		const styles = computed(() => composeSlotClassName(slots.value.region, props.class));
 		const regionStyle = computed(() => ({
 			"--gap": `${props.gap}px`,

package/dist/components/tooltip/tooltip-content.js

@@ -1,4 +1,5 @@
 import { dataAttr } from "../../utils/assertion.js";
+import { usePortal } from "../../composables/use-portal.js";
 import { useEnterExit } from "../../composables/use-enter-exit.js";
 import { provideOverlayArrowContext } from "../overlay/overlay.context.js";
 import { useOverlayPosition } from "../../composables/use-overlay-position.js";
@@ -38,6 +39,7 @@ var tooltip_content_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 		const { shouldSkipAnimation, slots, state, tooltipId, triggerElement } = useTooltipContext();
 		const element = shallowRef(null);
 		const arrow = shallowRef(null);
+		const portal = usePortal();
 		/**
 		* Built straight on the positioner rather than on the shared overlay primitive.
 		*
@@ -50,6 +52,7 @@ var tooltip_content_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 		const { arrowStyle, overlayStyle, placement } = useOverlayPosition({
 			arrowBoundaryOffset: () => props.arrowBoundaryOffset,
 			arrowRef: arrow,
+			boundaryElement: () => portal.root.value,
 			containerPadding: () => props.containerPadding,
 			crossOffset: () => props.crossOffset,
 			isOpen: () => state.isOpen.value,
@@ -76,7 +79,7 @@ var tooltip_content_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 		const isExiting = computed(() => props.isExiting ?? (!shouldSkipAnimation.value && enterExit.isExiting.value));
 		const isPresent = computed(() => state.isOpen.value || enterExit.isExiting.value || props.isExiting === true);
 		const styles = computed(() => slots.value.base({ class: props.class }));
-		const target = computed(() => props.portalContainer ?? "body");
+		const target = computed(() => props.portalContainer ?? portal.container.value);
 		const setElement = (next) => {
 			element.value = next ?? null;
 		};

package/dist/composables/focus-scope-registry.d.ts

@@ -1,8 +1,16 @@
 export interface RegisteredScope {
     root: () => HTMLElement | null;
     contain: () => boolean;
+    /** The part of the page the scope belongs to, `null` for the whole document. */
+    region: () => Element | null;
 }
-export declare const innermostContainingScope: () => RegisteredScope | null;
+/**
+ * The innermost scope holding focus in a region, among the scopes whose region overlaps it.
+ *
+ * Without a region every scope overlaps every other, which is the page-wide question. With one, a
+ * modal in one app's window is not shadowed by a modal another app opened later in its own.
+ */
+export declare const innermostContainingScope: (region?: Element | null) => RegisteredScope | null;
 /**
  * Whether the element sits inside any registered scope.
  *

package/dist/composables/focus-scope-registry.js

@@ -1,3 +1,4 @@
+import { regionsOverlap } from "../utils/region.js";
 //#region src/composables/focus-scope-registry.ts
 /**
 * Registered scopes, outermost first.
@@ -7,10 +8,16 @@
 * inside it has to be allowed through rather than pulled back.
 */
 var scopes = [];
-var innermostContainingScope = () => {
+/**
+* The innermost scope holding focus in a region, among the scopes whose region overlaps it.
+*
+* Without a region every scope overlaps every other, which is the page-wide question. With one, a
+* modal in one app's window is not shadowed by a modal another app opened later in its own.
+*/
+var innermostContainingScope = (region = null) => {
 	for (let index = scopes.length - 1; index >= 0; index--) {
 		const scope = scopes[index];
-		if (scope.contain()) return scope;
+		if (scope.contain() && regionsOverlap(scope.region(), region)) return scope;
 	}
 	return null;
 };

package/dist/composables/index.d.ts

@@ -26,6 +26,7 @@ export * from "./use-move.js";
 export * from "./use-number-formatter.js";
 export * from "./use-overlay-position.js";
 export * from "./use-overlay-trigger-state.js";
+export * from "./use-portal.js";
 export * from "./use-press.js";
 export * from "./use-prevent-scroll.js";
 export * from "./use-selection-manager.js";

package/dist/composables/use-combo-box.js

@@ -1,5 +1,6 @@
 import { useId as useId$1 } from "./use-id.js";
 import { ariaHideOutside } from "../utils/aria-hide-outside.js";
+import { usePortal } from "./use-portal.js";
 import { isAppleDevice } from "../utils/platform.js";
 import { useOverlayTrigger } from "./use-overlay-trigger.js";
 import { usePress } from "./use-press.js";
@@ -221,6 +222,7 @@ var useComboBox = (options, state) => {
 		flush: "post",
 		immediate: true
 	});
+	const portal = usePortal();
 	/**
 	* Everything but the field and its options is taken out of the accessibility tree while the
 	* popover is open.
@@ -232,10 +234,11 @@ var useComboBox = (options, state) => {
 	watch([
 		() => state.isOpen.value,
 		inputElement,
-		() => toValue(options.popoverElement)
-	], ([isOpen, input, popover], _previous, onCleanup) => {
+		() => toValue(options.popoverElement),
+		() => portal.root.value
+	], ([isOpen, input, popover, root], _previous, onCleanup) => {
 		if (!isOpen || !popover) return;
-		onCleanup(ariaHideOutside([input, popover].filter((element) => element != null)));
+		onCleanup(ariaHideOutside([input, popover].filter((element) => element != null), { root: root ?? void 0 }));
 	}, {
 		flush: "post",
 		immediate: true

package/dist/composables/use-dismissable.d.ts

@@ -23,6 +23,12 @@ export interface UseDismissableOptions {
      * should be left alone — the trigger of an already-open submenu, for one.
      */
     shouldCloseOnInteractOutside?: (element: Element) => boolean;
+    /**
+     * The part of the page the overlay belongs to. A press outside it — in another app's window
+     * beside this one — is neither an outside interaction nor swallowed, and the overlay is only
+     * stacked with overlays whose region overlaps its own. `null` or absent: the whole document.
+     */
+    region?: MaybeRefOrGetter<Element | null | undefined>;
 }
 export interface UseDismissableReturn {
     /** Bind to the overlay so Escape dismisses it. */

package/dist/composables/use-dismissable.js

@@ -1,14 +1,8 @@
+import { regionsOverlap } from "../utils/region.js";
 import { isInTopLayer } from "../utils/top-layer.js";
 import { isElementInAnyFocusScope } from "./focus-scope-registry.js";
 import { computed, onScopeDispose, toValue, watch } from "vue";
 //#region src/composables/use-dismissable.ts
-/**
-* Open overlays, innermost last.
-*
-* Module-level on purpose: a click outside must dismiss exactly one overlay — the innermost —
-* and no single overlay can know whether another is nested inside it. React Aria keeps the same
-* list for the same reason.
-*/
 var visibleOverlays = [];
 /**
 * Dismiss an overlay on Escape or on an interaction outside it, ported from React Aria's
@@ -37,11 +31,13 @@ var visibleOverlays = [];
 * ```
 */
 var useDismissable = (options) => {
-	const layer = {};
+	const layer = { region: () => toValue(options.region) ?? null };
 	const isOpen = computed(() => Boolean(toValue(options.isOpen)));
 	const isDismissable = computed(() => Boolean(toValue(options.isDismissable)));
 	const getOverlay = () => toValue(options.overlayRef) ?? null;
-	const isTopMost = () => visibleOverlays.at(-1) === layer;
+	/** The innermost open overlay this one is stacked with — possibly itself. */
+	const innermost = () => visibleOverlays.findLast((other) => regionsOverlap(other.region(), layer.region()));
+	const isTopMost = () => innermost() === layer;
 	const close = () => {
 		if (isTopMost()) options.onClose?.();
 	};
@@ -61,6 +57,8 @@ var useDismissable = (options) => {
 		const target = event.target;
 		if (!(target instanceof Element) || !target.ownerDocument.documentElement.contains(target)) return false;
 		if (isInTopLayer(target)) return false;
+		const region = layer.region();
+		if (region && !region.contains(target)) return false;
 		return !event.composedPath().includes(overlay);
 	};
 	/** Whether the pointerdown that began this interaction was outside. */
@@ -72,7 +70,7 @@ var useDismissable = (options) => {
 		if (!isDismissable.value || !isOpen.value || typeof document === "undefined") return;
 		const onPointerdown = (event) => {
 			if (!isOutside(event)) return;
-			layerAtPointerDown = visibleOverlays.at(-1);
+			layerAtPointerDown = innermost();
 			if (options.shouldCloseOnInteractOutside && !options.shouldCloseOnInteractOutside(event.target)) return;
 			pointerDownWasOutside = true;
 			if (isTopMost()) event.stopPropagation();

package/dist/composables/use-focus-scope.d.ts

@@ -23,6 +23,12 @@ export interface UseFocusScopeOptions {
      * @default false
      */
     autoFocus?: MaybeRefOrGetter<boolean | "first" | "last" | undefined>;
+    /**
+     * The part of the page containment holds focus within. Focus moving to something outside it —
+     * another app's window beside this one — is left alone rather than pulled back, and Tab pressed
+     * out there is not taken over. `null` or absent: the whole document.
+     */
+    region?: MaybeRefOrGetter<Element | null | undefined>;
 }
 /**
  * Keep focus inside an overlay and give it back when the overlay closes, ported from React

package/dist/composables/use-focus-scope.js

@@ -31,8 +31,14 @@ var useFocusScope = (options) => {
 	const getRoot = () => toValue(options.scopeRef) ?? null;
 	const scope = {
 		contain: () => Boolean(toValue(options.contain)),
+		region: () => toValue(options.region) ?? null,
 		root: getRoot
 	};
+	/** Whether an element is somewhere this scope has any say over. */
+	const isInRegion = (element) => {
+		const region = scope.region();
+		return !region || !element || region.contains(element);
+	};
 	const focusElement = (element) => {
 		element?.focus({ preventScroll: true });
 	};
@@ -49,7 +55,8 @@ var useFocusScope = (options) => {
 		const ownerDocument = root.ownerDocument;
 		const onKeydown = (event) => {
 			if (event.key !== "Tab" || event.altKey || event.ctrlKey || event.metaKey) return;
-			if (innermostContainingScope() !== scope) return;
+			if (innermostContainingScope(scope.region()) !== scope) return;
+			if (!isInRegion(ownerDocument.activeElement)) return;
 			const focusable = tabbableIn(root);
 			if (focusable.length === 0) {
 				event.preventDefault();
@@ -62,9 +69,10 @@ var useFocusScope = (options) => {
 			focusElement(next);
 		};
 		const onFocusin = (event) => {
-			if (innermostContainingScope() !== scope) return;
+			if (innermostContainingScope(scope.region()) !== scope) return;
 			const target = event.target;
 			if (!(target instanceof Element)) return;
+			if (!isInRegion(target)) return;
 			if (isElementInAnyFocusScope(target)) return;
 			focusElement(root);
 		};

package/dist/composables/use-modal-overlay.js

@@ -2,6 +2,7 @@ import { ariaHideOutside } from "../utils/aria-hide-outside.js";
 import { useDismissable } from "./use-dismissable.js";
 import { useFocusScope } from "./use-focus-scope.js";
 import { usePageSize } from "./use-page-size.js";
+import { usePortal } from "./use-portal.js";
 import { usePreventScroll } from "./use-prevent-scroll.js";
 import { useViewportSize } from "./use-viewport-size.js";
 import { computed, toValue, watch } from "vue";
@@ -35,17 +36,26 @@ import { computed, toValue, watch } from "vue";
 */
 var useModalOverlay = (options) => {
 	const isOpen = () => toValue(options.isOpen);
+	const portal = usePortal();
 	const dismissable = useDismissable({
 		isDismissable: options.isDismissable,
 		isKeyboardDismissDisabled: options.isKeyboardDismissDisabled,
 		isOpen,
 		onClose: options.onClose,
 		overlayRef: options.modalRef,
+		region: () => portal.root.value,
 		shouldCloseOnInteractOutside: options.shouldCloseOnInteractOutside
 	});
-	watch([isOpen, () => toValue(options.modalRef)], ([open, modal], _previous, onCleanup) => {
+	watch([
+		isOpen,
+		() => toValue(options.modalRef),
+		() => portal.root.value
+	], ([open, modal, root], _previous, onCleanup) => {
 		if (!open || !modal) return;
-		onCleanup(ariaHideOutside([modal], { shouldUseInert: true }));
+		onCleanup(ariaHideOutside([modal], {
+			root: root ?? void 0,
+			shouldUseInert: true
+		}));
 	}, {
 		flush: "post",
 		immediate: true
@@ -53,6 +63,7 @@ var useModalOverlay = (options) => {
 	useFocusScope({
 		contain: true,
 		isActive: isOpen,
+		region: () => portal.root.value,
 		restoreFocus: true,
 		scopeRef: options.modalRef
 	});
@@ -64,6 +75,7 @@ var useModalOverlay = (options) => {
 		page: computed(() => page.value),
 		viewport: computed(() => viewport.value),
 		viewportStyle: computed(() => {
+			if (portal.isContained.value) return {};
 			const style = {
 				"--visual-viewport-height": `${viewport.value.height}px`,
 				"--visual-viewport-width": `${viewport.value.width}px`

package/dist/composables/use-portal.d.ts

@@ -0,0 +1,35 @@
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+/** Where the overlays below a `PortalProvider` go, and what they treat as the page. */
+export interface Portal {
+    /** Where every overlay is rendered: `"body"` without a provider. */
+    container: ComputedRef<HTMLElement | string>;
+    /**
+     * The part of the page an overlay belongs to: what a modal hides outside itself (`inert`), what
+     * it holds focus and outside presses within, and what placement keeps an overlay inside. `null`
+     * (the whole document) without a provider, or with one that names no root.
+     */
+    root: ComputedRef<HTMLElement | null>;
+    /** Whether overlays render into an element of their own rather than the document's body. */
+    isContained: ComputedRef<boolean>;
+}
+/**
+ * The portal that applies here: the nearest `PortalProvider`'s, or the document's body.
+ *
+ * Ported from React Aria's `UNSAFE_PortalProvider` (`getContainer`), with the root added: an
+ * overlay rendered into a region of the page, say an app's window, belongs to that region and has
+ * to leave the rest of the page alone — hidden, focused and pressed as it was.
+ */
+export declare const usePortal: () => Portal;
+export interface PortalOptions {
+    /** `undefined` inherits the enclosing portal's container, `null` goes back to the body. */
+    container: MaybeRefOrGetter<HTMLElement | string | null | undefined>;
+    /** `undefined` inherits the enclosing portal's root, `null` goes back to the whole document. */
+    root?: MaybeRefOrGetter<HTMLElement | null | undefined>;
+}
+/**
+ * Send every overlay below into `container`, belonging to `root`.
+ *
+ * Absent and `null` differ as they do in React Aria: a nested provider that names only a container
+ * keeps the root of the one around it, and an explicit `null` is the way back to the page.
+ */
+export declare const providePortal: (options: PortalOptions) => Portal;

package/dist/composables/use-portal.js

@@ -0,0 +1,47 @@
+import { createContext } from "../utils/create-context.js";
+import { computed, toValue } from "vue";
+//#region src/composables/use-portal.ts
+var [usePortalContext, providePortalContext] = createContext({
+	defaultValue: null,
+	name: "PortalContext",
+	strict: false
+});
+var BODY = {
+	container: computed(() => "body"),
+	isContained: computed(() => false),
+	root: computed(() => null)
+};
+/**
+* The portal that applies here: the nearest `PortalProvider`'s, or the document's body.
+*
+* Ported from React Aria's `UNSAFE_PortalProvider` (`getContainer`), with the root added: an
+* overlay rendered into a region of the page, say an app's window, belongs to that region and has
+* to leave the rest of the page alone — hidden, focused and pressed as it was.
+*/
+var usePortal = () => usePortalContext() ?? BODY;
+/**
+* Send every overlay below into `container`, belonging to `root`.
+*
+* Absent and `null` differ as they do in React Aria: a nested provider that names only a container
+* keeps the root of the one around it, and an explicit `null` is the way back to the page.
+*/
+var providePortal = (options) => {
+	const parent = usePortal();
+	const container = computed(() => {
+		const own = toValue(options.container);
+		return own === void 0 ? parent.container.value : own ?? "body";
+	});
+	const root = computed(() => {
+		const own = toValue(options.root);
+		return own === void 0 ? parent.root.value : own;
+	});
+	const portal = {
+		container,
+		isContained: computed(() => container.value !== "body" && (typeof document === "undefined" || container.value !== document.body)),
+		root
+	};
+	providePortalContext(portal);
+	return portal;
+};
+//#endregion
+export { providePortal, usePortal };