ropav 0.13.0 → 0.15.0

package/dist/composables/use-localized-string-formatter.js

@@ -1,30 +1,9 @@
 import { useLocale } from "./use-locale.js";
+import { useLocalizedStringDictionary } from "./use-localized-string-dictionary.js";
 import { computed } from "vue";
-import { LocalizedStringDictionary, LocalizedStringFormatter } from "@internationalized/string";
+import { LocalizedStringFormatter } from "@internationalized/string";
 //#region src/composables/use-localized-string-formatter.ts
 /**
-* Dictionaries built so far, keyed by the table each was built from.
-*
-* A dictionary is derived entirely from its strings and is read-only afterwards, so every consumer
-* of the same table can share one. Weak, so a table that goes out of scope takes its dictionary
-* with it.
-*/
-var dictionaries = /* @__PURE__ */ new WeakMap();
-/**
-* The dictionary for a table of localized strings.
-*
-* Ported from React Aria's `packages/react-aria/src/i18n/useLocalizedStringFormatter.ts`
-* (react-aria 3.51.0), without its global-dictionary lookup: that exists so a server can hand
-* pre-loaded strings to the client, which this package does not do yet.
-*/
-var useLocalizedStringDictionary = (strings) => {
-	const cached = dictionaries.get(strings);
-	if (cached) return cached;
-	const dictionary = new LocalizedStringDictionary(strings);
-	dictionaries.set(strings, dictionary);
-	return dictionary;
-};
-/**
 * A formatter reading a table of localized strings in the locale that applies here.
 *
 * Handed back as a computed rather than a formatter, so a consumer keeps up when the locale
@@ -36,4 +15,4 @@ var useLocalizedStringFormatter = (strings) => {
 	return computed(() => new LocalizedStringFormatter(locale.value.locale, dictionary));
 };
 //#endregion
-export { useLocalizedStringDictionary, useLocalizedStringFormatter };
+export { useLocalizedStringFormatter };

package/dist/composables/use-long-press.d.ts

@@ -1,7 +1,5 @@
 import type { PressEvent, UsePressHandlers } from "./use-press.js";
 import type { ComputedRef, MaybeRefOrGetter } from "vue";
-/** How long the press has to be held before it counts as a long press. */
-export declare const LONG_PRESS_THRESHOLD_MS = 500;
 export interface LongPressEvent extends Omit<PressEvent, "type"> {
     type: "longpressstart" | "longpressend" | "longpress";
 }

package/dist/composables/use-long-press.js

@@ -69,7 +69,7 @@ var useLongPress = (options = {}) => {
 				if (event.pointerType === "touch") addGlobalListener(event.target, "contextmenu", (menu) => menu.preventDefault(), { once: true });
 				options.onLongPress?.(toLongPressEvent(event, "longpress"));
 				timeout = void 0;
-			}, toValue(options.threshold) ?? 500);
+			}, toValue(options.threshold) ?? LONG_PRESS_THRESHOLD_MS);
 			addGlobalListener(window, "pointerup", () => {
 				setTimeout(() => removeAllGlobalListeners(), 100);
 			}, { once: true });
@@ -82,4 +82,4 @@ var useLongPress = (options = {}) => {
 	};
 };
 //#endregion
-export { LONG_PRESS_THRESHOLD_MS, useLongPress };
+export { useLongPress };

package/dist/composables/use-menu-trigger-state.d.ts

@@ -0,0 +1,64 @@
+import type { CollectionKey } from "./use-collection.js";
+import type { FocusStrategy, OverlayTriggerState, UseOverlayTriggerStateOptions } from "./use-overlay-trigger-state.js";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+export interface MenuTriggerState extends OverlayTriggerState {
+    /** Which item the menu focuses when it opens, or `null` to focus the menu itself. */
+    focusStrategy: ComputedRef<FocusStrategy | null>;
+    open: (focusStrategy?: FocusStrategy | null) => void;
+    toggle: (focusStrategy?: FocusStrategy | null) => void;
+}
+export interface RootMenuTriggerState extends MenuTriggerState {
+    /**
+     * The open submenu trigger keys, one per level: index 0 is the submenu opened from the root
+     * menu, index 1 the submenu opened from that one, and so on.
+     */
+    expandedKeysStack: ComputedRef<CollectionKey[]>;
+    openSubmenu: (triggerKey: CollectionKey, level: number) => void;
+    closeSubmenu: (triggerKey: CollectionKey, level: number) => void;
+}
+/**
+ * Open state for a menu trigger, ported from React Stately's `useMenuTriggerState`.
+ *
+ * Adds two things to a plain overlay trigger. A focus strategy, because how a menu was opened
+ * decides where focus lands: ArrowUp opens it focused on the last item, a mouse click opens it
+ * focused on the menu itself. And the stack of open submenus, held here on the root rather
+ * than in each submenu, which is what makes "only one path through the menu tree is open at a
+ * time" true by construction — opening a submenu at level N truncates the stack to N.
+ *
+ * @example
+ * ```ts
+ * const state = useMenuTriggerState({isOpen: () => props.isOpen});
+ * state.open("last"); // ArrowUp on the trigger
+ * ```
+ */
+export declare const useMenuTriggerState: (options?: UseOverlayTriggerStateOptions) => RootMenuTriggerState;
+export interface SubmenuTriggerState extends OverlayTriggerState {
+    focusStrategy: ComputedRef<FocusStrategy | null>;
+    open: (focusStrategy?: FocusStrategy | null) => void;
+    toggle: (focusStrategy?: FocusStrategy | null) => void;
+    /** Closes every menu in the tree, which is what selecting an item does. */
+    closeAll: () => void;
+    /** How deep this submenu sits, counting the root menu as level 0. */
+    submenuLevel: number;
+}
+export interface UseSubmenuTriggerStateOptions {
+    /**
+     * The key of the item that opens this submenu.
+     *
+     * Read reactively, because the item is declared beside the submenu rather than around it: the
+     * submenu exists before it has been told which item it belongs to, and is closed until it has.
+     */
+    triggerKey: MaybeRefOrGetter<CollectionKey | null>;
+}
+/**
+ * Open state for one submenu, ported from React Stately's `useSubmenuTriggerState`.
+ *
+ * Holds no open flag of its own — it derives one by asking the root whether its own trigger
+ * key is the one expanded at its level. That is what makes opening a sibling submenu close
+ * this one with no coordination between the two.
+ *
+ * The level is captured once, when the submenu trigger is created, and deliberately not
+ * recomputed: it describes where this trigger sits in the tree, which does not change, whereas
+ * the stack it was read from changes constantly.
+ */
+export declare const useSubmenuTriggerState: (options: UseSubmenuTriggerStateOptions, root: RootMenuTriggerState) => SubmenuTriggerState;

package/dist/composables/use-menu-trigger-state.js

@@ -0,0 +1,90 @@
+import { useOverlayTriggerState } from "./use-overlay-trigger-state.js";
+import { computed, shallowRef, toValue } from "vue";
+//#region src/composables/use-menu-trigger-state.ts
+/**
+* Open state for a menu trigger, ported from React Stately's `useMenuTriggerState`.
+*
+* Adds two things to a plain overlay trigger. A focus strategy, because how a menu was opened
+* decides where focus lands: ArrowUp opens it focused on the last item, a mouse click opens it
+* focused on the menu itself. And the stack of open submenus, held here on the root rather
+* than in each submenu, which is what makes "only one path through the menu tree is open at a
+* time" true by construction — opening a submenu at level N truncates the stack to N.
+*
+* @example
+* ```ts
+* const state = useMenuTriggerState({isOpen: () => props.isOpen});
+* state.open("last"); // ArrowUp on the trigger
+* ```
+*/
+var useMenuTriggerState = (options = {}) => {
+	const overlay = useOverlayTriggerState(options);
+	const focusStrategy = shallowRef(null);
+	const expandedKeys = shallowRef([]);
+	return {
+		close: () => {
+			expandedKeys.value = [];
+			overlay.close();
+		},
+		closeSubmenu: (triggerKey, level) => {
+			if (expandedKeys.value[level] === triggerKey) expandedKeys.value = expandedKeys.value.slice(0, level);
+		},
+		expandedKeysStack: computed(() => expandedKeys.value),
+		focusStrategy: computed(() => focusStrategy.value),
+		isOpen: overlay.isOpen,
+		open: (strategy = null) => {
+			focusStrategy.value = strategy;
+			overlay.open();
+		},
+		openSubmenu: (triggerKey, level) => {
+			if (level > expandedKeys.value.length) return;
+			expandedKeys.value = [...expandedKeys.value.slice(0, level), triggerKey];
+		},
+		setOpen: overlay.setOpen,
+		toggle: (strategy = null) => {
+			focusStrategy.value = strategy;
+			overlay.toggle();
+		}
+	};
+};
+/**
+* Open state for one submenu, ported from React Stately's `useSubmenuTriggerState`.
+*
+* Holds no open flag of its own — it derives one by asking the root whether its own trigger
+* key is the one expanded at its level. That is what makes opening a sibling submenu close
+* this one with no coordination between the two.
+*
+* The level is captured once, when the submenu trigger is created, and deliberately not
+* recomputed: it describes where this trigger sits in the tree, which does not change, whereas
+* the stack it was read from changes constantly.
+*/
+var useSubmenuTriggerState = (options, root) => {
+	const submenuLevel = root.expandedKeysStack.value.length;
+	const focusStrategy = shallowRef(null);
+	const triggerKey = computed(() => toValue(options.triggerKey));
+	const isOpen = computed(() => triggerKey.value !== null && root.expandedKeysStack.value[submenuLevel] === triggerKey.value);
+	const close = () => {
+		focusStrategy.value = null;
+		if (triggerKey.value === null) return;
+		root.closeSubmenu(triggerKey.value, submenuLevel);
+	};
+	const open = (strategy = null) => {
+		focusStrategy.value = strategy;
+		if (triggerKey.value === null) return;
+		root.openSubmenu(triggerKey.value, submenuLevel);
+	};
+	return {
+		close,
+		closeAll: root.close,
+		focusStrategy: computed(() => focusStrategy.value),
+		isOpen,
+		open,
+		setOpen: (next) => next ? open() : close(),
+		submenuLevel,
+		toggle: (strategy = null) => {
+			if (isOpen.value) close();
+			else open(strategy);
+		}
+	};
+};
+//#endregion
+export { useMenuTriggerState, useSubmenuTriggerState };

package/dist/composables/use-menu-trigger.d.ts

@@ -1,6 +1,7 @@
 import type { PressResponder } from "./press-responder.js";
+import type { MenuTriggerState } from "./use-menu-trigger-state.js";
 import type { OverlayType } from "./use-overlay-trigger.js";
-import type { FocusStrategy, MenuTriggerState } from "./use-overlay-trigger-state.js";
+import type { FocusStrategy } from "./use-overlay-trigger-state.js";
 import type { ComputedRef, MaybeRefOrGetter } from "vue";
 /** How the menu is opened. */
 export type MenuTriggerType = "press" | "longPress";

package/dist/composables/use-modal-overlay.d.ts

@@ -1,4 +1,5 @@
-import type { PageSize, ViewportSize } from "./use-viewport-size.js";
+import type { PageSize } from "./use-page-size.js";
+import type { ViewportSize } from "./use-viewport-size.js";
 import type { ComputedRef, MaybeRefOrGetter } from "vue";
 export interface UseModalOverlayOptions {
     /**

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

@@ -1,8 +1,10 @@
 import { ariaHideOutside } from "../utils/aria-hide-outside.js";
-import { useFocusScope } from "./use-focus-scope.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 { usePageSize, useViewportSize } from "./use-viewport-size.js";
+import { useViewportSize } from "./use-viewport-size.js";
 import { computed, toValue, watch } from "vue";
 //#region src/composables/use-modal-overlay.ts
 /**
@@ -34,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
@@ -52,6 +63,7 @@ var useModalOverlay = (options) => {
 	useFocusScope({
 		contain: true,
 		isActive: isOpen,
+		region: () => portal.root.value,
 		restoreFocus: true,
 		scopeRef: options.modalRef
 	});
@@ -63,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-overlay-trigger-state.d.ts

@@ -1,4 +1,3 @@
-import type { CollectionKey } from "./use-collection.js";
 import type { ComputedRef, MaybeRefOrGetter } from "vue";
 /** Which end of a collection receives focus when an overlay opens. */
 export type FocusStrategy = "first" | "last";
@@ -26,64 +25,3 @@ export interface OverlayTriggerState {
  * ```
  */
 export declare const useOverlayTriggerState: (options?: UseOverlayTriggerStateOptions) => OverlayTriggerState;
-export interface MenuTriggerState extends OverlayTriggerState {
-    /** Which item the menu focuses when it opens, or `null` to focus the menu itself. */
-    focusStrategy: ComputedRef<FocusStrategy | null>;
-    open: (focusStrategy?: FocusStrategy | null) => void;
-    toggle: (focusStrategy?: FocusStrategy | null) => void;
-}
-export interface RootMenuTriggerState extends MenuTriggerState {
-    /**
-     * The open submenu trigger keys, one per level: index 0 is the submenu opened from the root
-     * menu, index 1 the submenu opened from that one, and so on.
-     */
-    expandedKeysStack: ComputedRef<CollectionKey[]>;
-    openSubmenu: (triggerKey: CollectionKey, level: number) => void;
-    closeSubmenu: (triggerKey: CollectionKey, level: number) => void;
-}
-/**
- * Open state for a menu trigger, ported from React Stately's `useMenuTriggerState`.
- *
- * Adds two things to a plain overlay trigger. A focus strategy, because how a menu was opened
- * decides where focus lands: ArrowUp opens it focused on the last item, a mouse click opens it
- * focused on the menu itself. And the stack of open submenus, held here on the root rather
- * than in each submenu, which is what makes "only one path through the menu tree is open at a
- * time" true by construction — opening a submenu at level N truncates the stack to N.
- *
- * @example
- * ```ts
- * const state = useMenuTriggerState({isOpen: () => props.isOpen});
- * state.open("last"); // ArrowUp on the trigger
- * ```
- */
-export declare const useMenuTriggerState: (options?: UseOverlayTriggerStateOptions) => RootMenuTriggerState;
-export interface SubmenuTriggerState extends OverlayTriggerState {
-    focusStrategy: ComputedRef<FocusStrategy | null>;
-    open: (focusStrategy?: FocusStrategy | null) => void;
-    toggle: (focusStrategy?: FocusStrategy | null) => void;
-    /** Closes every menu in the tree, which is what selecting an item does. */
-    closeAll: () => void;
-    /** How deep this submenu sits, counting the root menu as level 0. */
-    submenuLevel: number;
-}
-export interface UseSubmenuTriggerStateOptions {
-    /**
-     * The key of the item that opens this submenu.
-     *
-     * Read reactively, because the item is declared beside the submenu rather than around it: the
-     * submenu exists before it has been told which item it belongs to, and is closed until it has.
-     */
-    triggerKey: MaybeRefOrGetter<CollectionKey | null>;
-}
-/**
- * Open state for one submenu, ported from React Stately's `useSubmenuTriggerState`.
- *
- * Holds no open flag of its own — it derives one by asking the root whether its own trigger
- * key is the one expanded at its level. That is what makes opening a sibling submenu close
- * this one with no coordination between the two.
- *
- * The level is captured once, when the submenu trigger is created, and deliberately not
- * recomputed: it describes where this trigger sits in the tree, which does not change, whereas
- * the stack it was read from changes constantly.
- */
-export declare const useSubmenuTriggerState: (options: UseSubmenuTriggerStateOptions, root: RootMenuTriggerState) => SubmenuTriggerState;

package/dist/composables/use-overlay-trigger-state.js

@@ -1,5 +1,5 @@
 import { useControllableState } from "./use-controllable-state.js";
-import { computed, shallowRef, toValue } from "vue";
+import { computed } from "vue";
 //#region src/composables/use-overlay-trigger-state.ts
 /**
 * Open state for an overlay trigger, ported from React Stately's `useOverlayTriggerState`.
@@ -26,90 +26,5 @@ var useOverlayTriggerState = (options = {}) => {
 		toggle: () => setState(!state.value)
 	};
 };
-/**
-* Open state for a menu trigger, ported from React Stately's `useMenuTriggerState`.
-*
-* Adds two things to a plain overlay trigger. A focus strategy, because how a menu was opened
-* decides where focus lands: ArrowUp opens it focused on the last item, a mouse click opens it
-* focused on the menu itself. And the stack of open submenus, held here on the root rather
-* than in each submenu, which is what makes "only one path through the menu tree is open at a
-* time" true by construction — opening a submenu at level N truncates the stack to N.
-*
-* @example
-* ```ts
-* const state = useMenuTriggerState({isOpen: () => props.isOpen});
-* state.open("last"); // ArrowUp on the trigger
-* ```
-*/
-var useMenuTriggerState = (options = {}) => {
-	const overlay = useOverlayTriggerState(options);
-	const focusStrategy = shallowRef(null);
-	const expandedKeys = shallowRef([]);
-	return {
-		close: () => {
-			expandedKeys.value = [];
-			overlay.close();
-		},
-		closeSubmenu: (triggerKey, level) => {
-			if (expandedKeys.value[level] === triggerKey) expandedKeys.value = expandedKeys.value.slice(0, level);
-		},
-		expandedKeysStack: computed(() => expandedKeys.value),
-		focusStrategy: computed(() => focusStrategy.value),
-		isOpen: overlay.isOpen,
-		open: (strategy = null) => {
-			focusStrategy.value = strategy;
-			overlay.open();
-		},
-		openSubmenu: (triggerKey, level) => {
-			if (level > expandedKeys.value.length) return;
-			expandedKeys.value = [...expandedKeys.value.slice(0, level), triggerKey];
-		},
-		setOpen: overlay.setOpen,
-		toggle: (strategy = null) => {
-			focusStrategy.value = strategy;
-			overlay.toggle();
-		}
-	};
-};
-/**
-* Open state for one submenu, ported from React Stately's `useSubmenuTriggerState`.
-*
-* Holds no open flag of its own — it derives one by asking the root whether its own trigger
-* key is the one expanded at its level. That is what makes opening a sibling submenu close
-* this one with no coordination between the two.
-*
-* The level is captured once, when the submenu trigger is created, and deliberately not
-* recomputed: it describes where this trigger sits in the tree, which does not change, whereas
-* the stack it was read from changes constantly.
-*/
-var useSubmenuTriggerState = (options, root) => {
-	const submenuLevel = root.expandedKeysStack.value.length;
-	const focusStrategy = shallowRef(null);
-	const triggerKey = computed(() => toValue(options.triggerKey));
-	const isOpen = computed(() => triggerKey.value !== null && root.expandedKeysStack.value[submenuLevel] === triggerKey.value);
-	const close = () => {
-		focusStrategy.value = null;
-		if (triggerKey.value === null) return;
-		root.closeSubmenu(triggerKey.value, submenuLevel);
-	};
-	const open = (strategy = null) => {
-		focusStrategy.value = strategy;
-		if (triggerKey.value === null) return;
-		root.openSubmenu(triggerKey.value, submenuLevel);
-	};
-	return {
-		close,
-		closeAll: root.close,
-		focusStrategy: computed(() => focusStrategy.value),
-		isOpen,
-		open,
-		setOpen: (next) => next ? open() : close(),
-		submenuLevel,
-		toggle: (strategy = null) => {
-			if (isOpen.value) close();
-			else open(strategy);
-		}
-	};
-};
 //#endregion
-export { useMenuTriggerState, useOverlayTriggerState, useSubmenuTriggerState };
+export { useOverlayTriggerState };

package/dist/composables/use-page-size.d.ts

@@ -0,0 +1,14 @@
+import type { ShallowRef } from "vue";
+export interface PageSize {
+    /** Absent on the server, and while there is no document to measure. */
+    width: number | undefined;
+    height: number | undefined;
+}
+/**
+ * Track the size of the whole scrollable page.
+ *
+ * Ported from the block React Aria computes inline in `ModalOverlayInner`. Published as
+ * `--page-width` / `--page-height` for a backdrop that has to cover a page taller than the
+ * viewport rather than only the part currently on screen.
+ */
+export declare const usePageSize: () => ShallowRef<PageSize>;

package/dist/composables/use-page-size.js

@@ -0,0 +1,42 @@
+import { isScrollable } from "../utils/focus.js";
+import { onScopeDispose, shallowRef } from "vue";
+//#region src/composables/use-page-size.ts
+var getVisualViewport = () => typeof document === "undefined" ? null : window.visualViewport ?? null;
+var measurePage = () => {
+	if (typeof document === "undefined") return {
+		height: void 0,
+		width: void 0
+	};
+	const scrolling = isScrollable(document.body) ? document.body : document.scrollingElement ?? document.documentElement;
+	const rect = scrolling.getBoundingClientRect();
+	return {
+		height: scrolling.scrollHeight - rect.height % 1,
+		width: scrolling.scrollWidth - rect.width % 1
+	};
+};
+/**
+* Track the size of the whole scrollable page.
+*
+* Ported from the block React Aria computes inline in `ModalOverlayInner`. Published as
+* `--page-width` / `--page-height` for a backdrop that has to cover a page taller than the
+* viewport rather than only the part currently on screen.
+*/
+var usePageSize = () => {
+	const size = shallowRef(measurePage());
+	if (typeof document === "undefined") return size;
+	const onResize = () => {
+		const next = measurePage();
+		if (next.width === size.value.width && next.height === size.value.height) return;
+		size.value = next;
+	};
+	const viewport = getVisualViewport();
+	window.addEventListener("resize", onResize);
+	viewport?.addEventListener("resize", onResize);
+	onScopeDispose(() => {
+		window.removeEventListener("resize", onResize);
+		viewport?.removeEventListener("resize", onResize);
+	}, true);
+	return size;
+};
+//#endregion
+export { usePageSize };

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 };

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

@@ -64,26 +64,6 @@ export interface UsePressReturn {
      */
     handlers: UsePressHandlers;
 }
-/**
- * Whether a click came from something other than a pointer.
- *
- * Ported from React Aria's `isVirtualClick`. A screen reader and `element.click()` both
- * produce a click with no pointer data behind it, which is the only way to tell them apart
- * from a real one.
- */
-export declare const isVirtualClick: (event: MouseEvent) => boolean;
-/**
- * Whether a pointer event was synthesised by assistive technology.
- *
- * A screen reader activating an element reports a zero-sized pointer. Safari on iOS gives
- * such events the wrong coordinates and target, so they have to be left to the click handler.
- *
- * Android needs a shape of its own, and the zero-size test is turned off there rather than left
- * to miss: TalkBack's double tap reports a one-by-one pointer claiming to be a mouse. Every part
- * of that is load-bearing — pressure alone would catch real presses in Safari, which reports zero
- * for those too, and the mouse claim is what separates the double tap from a touch screen press.
- */
-export declare const isVirtualPointerEvent: (event: PointerEvent) => boolean;
 /**
  * Press interactions across mouse, touch, keyboard and assistive technology, ported from
  * React Aria's `usePress`.