ropav 0.14.0 → 0.15.1

package/dist/utils/aria-hide-outside.d.ts

@@ -1,5 +1,8 @@
 export interface AriaHideOutsideOptions {
-    /** Nothing above this element is hidden. @default document.body */
+    /**
+     * Nothing outside this element is hidden, and only this element is watched for content added
+     * later. @default document.body
+     */
     root?: Element;
     /**
      * Uses `inert` instead of `aria-hidden`, which also blocks pointer interaction and focus

package/dist/utils/aria-hide-outside.js

@@ -1,3 +1,4 @@
+import { regionsOverlap } from "./region.js";
 import { TOP_LAYER_SELECTOR } from "./top-layer.js";
 //#region src/utils/aria-hide-outside.ts
 var supportsInert = typeof HTMLElement !== "undefined" && "inert" in HTMLElement.prototype;
@@ -9,8 +10,19 @@ var supportsInert = typeof HTMLElement !== "undefined" && "inert" in HTMLElement
 * itself keeps a count of zero, so it is never un-hidden by this.
 */
 var refCounts = /* @__PURE__ */ new WeakMap();
-/** Active layers, innermost last. Only the innermost watches the DOM for new content. */
+/**
+* Active layers, innermost last. Only the innermost of the layers whose roots overlap watches the
+* DOM for new content: two modals open in two apps' windows side by side each keep watching their
+* own, while two nested in one place hand watching to the inner one.
+*/
 var layers = [];
+/** Whether a later layer covers this one's root, so this one leaves the watching to it. */
+var isShadowed = (layer) => layers.slice(layers.indexOf(layer) + 1).some((later) => regionsOverlap(later.root, layer.root));
+/** Watch with exactly the layers nothing later covers. */
+var syncObservers = () => {
+	for (const layer of layers) if (isShadowed(layer)) layer.disconnect();
+	else layer.observe();
+};
 /** Content that must never be hidden, however deep in the page it sits. */
 var ALWAYS_VISIBLE_SELECTOR = `[data-live-announcer], ${TOP_LAYER_SELECTOR}`;
 var isAlwaysVisible = (node) => node instanceof HTMLElement && node.matches(ALWAYS_VISIBLE_SELECTOR);
@@ -67,7 +79,6 @@ var ariaHideOutside = (targets, options = {}) => {
 			node = walker.nextNode();
 		}
 	};
-	layers.at(-1)?.disconnect();
 	walk(root);
 	const observer = new MutationObserver((changes) => {
 		for (const change of changes) {
@@ -88,10 +99,11 @@ var ariaHideOutside = (targets, options = {}) => {
 			childList: true,
 			subtree: true
 		}),
+		root,
 		visibleNodes
 	};
-	layer.observe();
 	layers.push(layer);
+	syncObservers();
 	return () => {
 		observer.disconnect();
 		for (const node of hiddenNodes) {
@@ -104,7 +116,7 @@ var ariaHideOutside = (targets, options = {}) => {
 		}
 		const index = layers.indexOf(layer);
 		if (index >= 0) layers.splice(index, 1);
-		layers.at(-1)?.observe();
+		syncObservers();
 	};
 };
 /**
@@ -116,7 +128,7 @@ var ariaHideOutside = (targets, options = {}) => {
 * @returns A function withdrawing the exemption, or `undefined` if nothing is hiding anything.
 */
 var keepVisible = (element) => {
-	const layer = layers.at(-1);
+	const layer = layers.findLast((candidate) => candidate.root.contains(element)) ?? layers.at(-1);
 	if (!layer || layer.visibleNodes.has(element)) return void 0;
 	layer.visibleNodes.add(element);
 	return () => {

package/dist/utils/position.d.ts

@@ -74,7 +74,7 @@ export interface PositionResult {
 /** The element's rectangle, ignoring any scale transform when asked. */
 export declare const getRect: (node: Element, ignoreScale: boolean) => Offset;
 /** @private Exported for tests, which drive the arithmetic without a real layout. */
-export declare const calculatePositionInternal: (placementInput: Placement, childOffset: Offset, overlaySize: Offset, margins: Position, padding: number, flip: boolean, boundaryDimensions: Dimensions, containerDimensions: Dimensions, containerOffsetWithBoundary: Offset, offset: number, crossOffset: number, isContainerPositioned: boolean, userSetMaxHeight: number | undefined, arrowSize: number, arrowBoundaryOffset: number, isContainerDescendentOfBoundary: boolean, visualViewport: VisualViewport | null) => PositionResult;
+export declare const calculatePositionInternal: (placementInput: Placement, childOffset: Offset, overlaySize: Offset, margins: Position, padding: number, flip: boolean, boundary: Offset, containerDimensions: Dimensions, viewport: Offset | null, offset: number, crossOffset: number, isContainerPositioned: boolean, userSetMaxHeight: number | undefined, arrowSize: number, arrowBoundaryOffset: number) => PositionResult;
 /**
  * Where to put an overlay so it sits next to its trigger and stays inside the boundary.
  *

package/dist/utils/position.js

@@ -25,8 +25,15 @@ var TOTAL_SIZE = {
 };
 var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 var getVisualViewport = () => typeof document === "undefined" ? null : window.visualViewport;
-/** Whether one node is the other, or contains it. */
-var nodeContains = (node, other) => Boolean(node && other && node.contains(other));
+/** Whether a boundary element stands for the viewport, as the body and the document element do. */
+var isViewportElement = (node) => node.tagName === "BODY" || node.tagName === "HTML";
+/**
+* Whether the container is the viewport. Only the document element ever is: the body is the
+* container only once it is positioned or a containing block, and then an overlay is placed from
+* the body's own padding box, which a body taller than the viewport, or set apart from it by its
+* margin, does not share with the viewport.
+*/
+var isViewportContainer = (node) => node === document.documentElement;
 var isWebKit = () => typeof navigator !== "undefined" && /AppleWebKit/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
 /** The element's rectangle, ignoring any scale transform when asked. */
 var getRect = (node, ignoreScale) => {
@@ -76,7 +83,7 @@ var getPosition = (node, parent, ignoreScale, overrideRect) => {
 */
 var isContainingBlock = (node) => {
 	const style = window.getComputedStyle(node);
-	return style.transform !== "none" || /transform|perspective/.test(style.willChange) || style.filter !== "none" || style.contain === "paint" || "backdropFilter" in style && style.backdropFilter !== "none";
+	return style.transform !== "none" || /transform|perspective/.test(style.willChange) || style.filter !== "none" || /\b(layout|paint|strict|content)\b/.test(style.contain) || "backdropFilter" in style && style.backdropFilter !== "none";
 };
 /** The element an absolutely positioned overlay is placed relative to. */
 var getContainingBlock = (node) => {
@@ -98,26 +105,28 @@ var getContainerDimensions = (containerNode, visualViewport) => {
 	let left = 0;
 	const scroll = {};
 	const isPinchZoomedIn = (visualViewport?.scale ?? 1) > 1;
-	if (containerNode.tagName === "BODY" || containerNode.tagName === "HTML") {
+	if (isViewportContainer(containerNode)) {
 		const documentElement = document.documentElement;
 		totalWidth = documentElement.clientWidth;
 		totalHeight = documentElement.clientHeight;
 		width = visualViewport?.width ?? totalWidth;
 		height = visualViewport?.height ?? totalHeight;
-		scroll.top = documentElement.scrollTop || containerNode.scrollTop;
-		scroll.left = documentElement.scrollLeft || containerNode.scrollLeft;
+		scroll.top = documentElement.scrollTop;
+		scroll.left = documentElement.scrollLeft;
 		if (visualViewport) {
 			top = visualViewport.offsetTop;
 			left = visualViewport.offsetLeft;
 		}
 	} else {
-		({height, left, top, width} = getOffset(containerNode, false));
+		({left, top} = getOffset(containerNode, false));
+		width = containerNode.clientWidth;
+		height = containerNode.clientHeight;
 		scroll.top = containerNode.scrollTop;
 		scroll.left = containerNode.scrollLeft;
 		totalWidth = width;
 		totalHeight = height;
 	}
-	if (isWebKit() && (containerNode.tagName === "BODY" || containerNode.tagName === "HTML") && isPinchZoomedIn) {
+	if (isWebKit() && isViewportContainer(containerNode) && isPinchZoomedIn) {
 		scroll.top = 0;
 		scroll.left = 0;
 		top = visualViewport?.pageTop ?? 0;
@@ -134,13 +143,11 @@ var getContainerDimensions = (containerNode, visualViewport) => {
 	};
 };
 /** How far the overlay must shift along `axis` to stay inside the boundary. */
-var getDelta = (axis, offset, size, boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary) => {
-	const containerScroll = containerDimensions.scroll[axis] ?? 0;
-	const boundarySize = boundaryDimensions[AXIS_SIZE[axis]];
-	const boundaryScroll = boundaryDimensions.scroll[AXIS[axis]] ?? 0;
-	const boundaryStartEdge = containerOffsetWithBoundary[axis] + boundaryScroll + padding;
-	const boundaryEndEdge = containerOffsetWithBoundary[axis] + boundaryScroll + boundarySize - padding;
-	const startEdgeOffset = offset - containerScroll + boundaryScroll + containerOffsetWithBoundary[axis] - boundaryDimensions[AXIS[axis]];
+var getDelta = (axis, offset, size, boundary, containerDimensions, padding) => {
+	const boundaryStart = boundary[axis] + (containerDimensions.scroll[axis] ?? 0);
+	const boundaryStartEdge = boundaryStart + padding;
+	const boundaryEndEdge = boundaryStart + boundary[AXIS_SIZE[axis]] - padding;
+	const startEdgeOffset = offset;
 	const endEdgeOffset = startEdgeOffset + size;
 	if (startEdgeOffset < boundaryStartEdge) return boundaryStartEdge - startEdgeOffset;
 	if (endEdgeOffset > boundaryEndEdge) return Math.max(boundaryEndEdge - endEdgeOffset, boundaryStartEdge - startEdgeOffset);
@@ -189,36 +196,35 @@ var computePosition = (childOffset, overlaySize, placementInfo, offset, crossOff
 	} else position[axis] = Math.floor(childOffset[axis] + childOffset[size] + offset);
 	return position;
 };
-var getMaxHeight = (position, boundaryDimensions, containerOffsetWithBoundary, margins, padding, overlayHeight, heightGrowthDirection, containerDimensions, isContainerDescendentOfBoundary, visualViewport) => {
+var getMaxHeight = (position, boundary, viewport, margins, padding, overlayHeight, heightGrowthDirection, containerDimensions) => {
 	const overlayTop = (position.top != null ? position.top : containerDimensions[TOTAL_SIZE.height] - (position.bottom ?? 0) - overlayHeight) - (containerDimensions.scroll.top ?? 0);
-	const boundaryToContainerTransformOffset = isContainerDescendentOfBoundary ? containerOffsetWithBoundary.top : 0;
-	const viewportTop = visualViewport?.offsetTop ?? boundaryDimensions.top;
-	const viewportBottom = visualViewport ? visualViewport.offsetTop + visualViewport.height : boundaryDimensions.top + boundaryDimensions.height;
+	const visible = viewport ?? boundary;
 	const boundingRect = {
-		bottom: Math.min(boundaryDimensions.top + boundaryDimensions.height + boundaryToContainerTransformOffset, viewportBottom),
-		top: Math.max(boundaryDimensions.top + boundaryToContainerTransformOffset, viewportTop + boundaryToContainerTransformOffset)
+		bottom: Math.min(boundary.top + boundary.height, visible.top + visible.height),
+		top: Math.max(boundary.top, visible.top)
 	};
 	const reserved = (margins.top ?? 0) + (margins.bottom ?? 0) + padding;
 	return heightGrowthDirection !== "top" ? Math.max(0, boundingRect.bottom - overlayTop - reserved) : Math.max(0, overlayTop + overlayHeight - boundingRect.top - reserved);
 };
 /** How much room there is on the side the overlay wants to be on. */
-var getAvailableSpace = (boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding, placementInfo, containerDimensions, isContainerDescendentOfBoundary) => {
+var getAvailableSpace = (boundary, childOffset, margins, padding, placementInfo, containerDimensions) => {
 	const { axis, placement, size } = placementInfo;
-	const containerOffset = isContainerDescendentOfBoundary ? containerOffsetWithBoundary[axis] : 0;
-	if (placement === axis) return Math.max(0, childOffset[axis] - (containerDimensions.scroll[axis] ?? 0) - (boundaryDimensions[axis] + containerOffset) - (margins[axis] ?? 0) - (margins[FLIPPED_DIRECTION[axis]] ?? 0) - padding);
-	return Math.max(0, boundaryDimensions[size] + boundaryDimensions[axis] + containerOffset - childOffset[axis] - childOffset[size] + (containerDimensions.scroll[axis] ?? 0) - (margins[axis] ?? 0) - (margins[FLIPPED_DIRECTION[axis]] ?? 0) - padding);
+	const boundaryStart = boundary[axis] + (containerDimensions.scroll[axis] ?? 0);
+	const reserved = (margins[axis] ?? 0) + (margins[FLIPPED_DIRECTION[axis]] ?? 0) + padding;
+	if (placement === axis) return Math.max(0, childOffset[axis] - boundaryStart - reserved);
+	return Math.max(0, boundaryStart + boundary[size] - childOffset[axis] - childOffset[size] - reserved);
 };
 /** @private Exported for tests, which drive the arithmetic without a real layout. */
-var calculatePositionInternal = (placementInput, childOffset, overlaySize, margins, padding, flip, boundaryDimensions, containerDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, userSetMaxHeight, arrowSize, arrowBoundaryOffset, isContainerDescendentOfBoundary, visualViewport) => {
+var calculatePositionInternal = (placementInput, childOffset, overlaySize, margins, padding, flip, boundary, containerDimensions, viewport, offset, crossOffset, isContainerPositioned, userSetMaxHeight, arrowSize, arrowBoundaryOffset) => {
 	let placementInfo = parsePlacement(placementInput);
 	const { crossAxis, crossSize, size } = placementInfo;
 	let { crossPlacement, placement } = placementInfo;
 	let position = computePosition(childOffset, overlaySize, placementInfo, offset, crossOffset, isContainerPositioned, arrowSize, arrowBoundaryOffset, containerDimensions);
-	const space = getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding + offset, placementInfo, containerDimensions, isContainerDescendentOfBoundary);
+	const space = getAvailableSpace(boundary, childOffset, margins, padding + offset, placementInfo, containerDimensions);
 	if (flip && overlaySize[size] > space) {
 		const flippedPlacementInfo = parsePlacement(`${FLIPPED_DIRECTION[placement]} ${crossPlacement}`);
 		const flippedPosition = computePosition(childOffset, overlaySize, flippedPlacementInfo, offset, crossOffset, isContainerPositioned, arrowSize, arrowBoundaryOffset, containerDimensions);
-		if (getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding + offset, flippedPlacementInfo, containerDimensions, isContainerDescendentOfBoundary) > space) {
+		if (getAvailableSpace(boundary, childOffset, margins, padding + offset, flippedPlacementInfo, containerDimensions) > space) {
 			placementInfo = flippedPlacementInfo;
 			position = flippedPosition;
 		}
@@ -229,12 +235,12 @@ var calculatePositionInternal = (placementInput, childOffset, overlaySize, margi
 	} else if (placementInfo.crossAxis === "top") {
 		if (placementInfo.crossPlacement === "bottom") heightGrowthDirection = "top";
 	}
-	position[crossAxis] += getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary);
-	let maxHeight = getMaxHeight(position, boundaryDimensions, containerOffsetWithBoundary, margins, padding, overlaySize.height, heightGrowthDirection, containerDimensions, isContainerDescendentOfBoundary, visualViewport);
+	position[crossAxis] += getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundary, containerDimensions, padding);
+	let maxHeight = getMaxHeight(position, boundary, viewport, margins, padding, overlaySize.height, heightGrowthDirection, containerDimensions);
 	if (userSetMaxHeight && userSetMaxHeight < maxHeight) maxHeight = userSetMaxHeight;
 	overlaySize.height = Math.min(overlaySize.height, maxHeight);
 	position = computePosition(childOffset, overlaySize, placementInfo, offset, crossOffset, isContainerPositioned, arrowSize, arrowBoundaryOffset, containerDimensions);
-	position[crossAxis] += getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary);
+	position[crossAxis] += getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundary, containerDimensions, padding);
 	const arrowPosition = {};
 	let origin = childOffset[crossAxis] - position[crossAxis] - (margins[AXIS[crossAxis]] ?? 0);
 	const preferredArrowPosition = origin + .5 * childOffset[crossSize];
@@ -268,11 +274,11 @@ var calculatePosition = (options) => {
 	const { arrowBoundaryOffset = 0, arrowSize = 0, boundaryElement, crossOffset, maxHeight, offset, overlayNode, padding, placement, shouldFlip, targetNode, targetRect } = options;
 	const visualViewport = getVisualViewport();
 	const container = overlayNode instanceof HTMLElement ? getContainingBlock(overlayNode) : document.documentElement;
-	const isViewportContainer = container === document.documentElement;
+	const isContainerViewport = isViewportContainer(container);
 	const containerPositionStyle = window.getComputedStyle(container).position;
 	const isContainerPositioned = Boolean(containerPositionStyle) && containerPositionStyle !== "static";
-	const childOffset = isViewportContainer ? getOffset(targetNode, false, targetRect) : getPosition(targetNode, container, false, targetRect);
-	if (!isViewportContainer) {
+	const childOffset = isContainerViewport ? getOffset(targetNode, false, targetRect) : getPosition(targetNode, container, false, targetRect);
+	if (!isContainerViewport) {
 		const { marginLeft, marginTop } = window.getComputedStyle(targetNode);
 		childOffset.top += parseInt(marginTop, 10) || 0;
 		childOffset.left += parseInt(marginLeft, 10) || 0;
@@ -281,26 +287,34 @@ var calculatePosition = (options) => {
 	const margins = getMargins(overlayNode);
 	overlaySize.width += (margins.left ?? 0) + (margins.right ?? 0);
 	overlaySize.height += (margins.top ?? 0) + (margins.bottom ?? 0);
-	const boundaryDimensions = getContainerDimensions(boundaryElement, visualViewport);
 	const containerDimensions = getContainerDimensions(container, visualViewport);
-	let containerOffsetWithBoundary;
-	const isBoundaryViewport = boundaryElement.tagName === "BODY" || boundaryElement.tagName === "HTML";
-	if (isBoundaryViewport && !isViewportContainer) {
-		const containerRect = getRect(container, false);
-		containerOffsetWithBoundary = {
-			height: 0,
-			left: -(containerRect.left - boundaryDimensions.left),
-			top: -(containerRect.top - boundaryDimensions.top),
-			width: 0
-		};
-	} else if (isBoundaryViewport && isViewportContainer) containerOffsetWithBoundary = {
-		height: 0,
-		left: 0,
-		top: 0,
-		width: 0
+	const { clientHeight, clientWidth } = document.documentElement;
+	const viewportRect = {
+		height: visualViewport?.height ?? clientHeight,
+		left: visualViewport?.offsetLeft ?? 0,
+		top: visualViewport?.offsetTop ?? 0,
+		width: visualViewport?.width ?? clientWidth
 	};
-	else containerOffsetWithBoundary = getPosition(boundaryElement, container, false);
-	return calculatePositionInternal(placement, childOffset, overlaySize, margins, padding, shouldFlip, boundaryDimensions, containerDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, maxHeight, arrowSize, arrowBoundaryOffset, nodeContains(boundaryElement, container), visualViewport);
+	let origin;
+	if (isContainerViewport) origin = {
+		left: viewportRect.left - containerDimensions.left,
+		top: viewportRect.top - containerDimensions.top
+	};
+	else {
+		const containerRect = container.getBoundingClientRect();
+		origin = {
+			left: containerRect.left + container.clientLeft,
+			top: containerRect.top + container.clientTop
+		};
+	}
+	const toContainer = ({ height, left, top, width }) => ({
+		height,
+		left: left - origin.left,
+		top: top - origin.top,
+		width
+	});
+	const viewport = toContainer(viewportRect);
+	return calculatePositionInternal(placement, childOffset, overlaySize, margins, padding, shouldFlip, isViewportElement(boundaryElement) ? viewport : toContainer(getRect(boundaryElement, false)), containerDimensions, visualViewport ? viewport : null, offset, crossOffset, isContainerPositioned, maxHeight, arrowSize, arrowBoundaryOffset);
 };
 /** Resolves the logical `start`/`end` in a placement against the writing direction. */
 var translateRTL = (placement, direction) => direction === "rtl" ? placement.replace("start", "right").replace("end", "left") : placement.replace("start", "left").replace("end", "right");

package/dist/utils/region.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Whether two parts of the page can see each other's overlays.
+ *
+ * An overlay belongs to a region: the root its `PortalProvider` names, or the whole document
+ * (`null`) without one. The page-wide stacks — which overlay is innermost, which one watches the
+ * DOM, which one holds focus — are only shared between overlays whose regions overlap. Two apps'
+ * windows side by side are separate regions, so a modal in one is not stacked over a modal in the
+ * other; the whole document overlaps everything, so without a provider nothing changes.
+ */
+export declare const regionsOverlap: (a: Element | null, b: Element | null) => boolean;

package/dist/utils/region.js

@@ -0,0 +1,13 @@
+//#region src/utils/region.ts
+/**
+* Whether two parts of the page can see each other's overlays.
+*
+* An overlay belongs to a region: the root its `PortalProvider` names, or the whole document
+* (`null`) without one. The page-wide stacks — which overlay is innermost, which one watches the
+* DOM, which one holds focus — are only shared between overlays whose regions overlap. Two apps'
+* windows side by side are separate regions, so a modal in one is not stacked over a modal in the
+* other; the whole document overlaps everything, so without a provider nothing changes.
+*/
+var regionsOverlap = (a, b) => a == null || b == null || a.contains(b) || b.contains(a);
+//#endregion
+export { regionsOverlap };

package/dist/version.js

@@ -1,4 +1,4 @@
 //#region src/version.ts
-var ROPAV_VERSION = "0.14.0";
+var ROPAV_VERSION = "0.15.1";
 //#endregion
 export { ROPAV_VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ropav",
-  "version": "0.14.0",
+  "version": "0.15.1",
   "description": "Vapor-native Vue 3 component library — accessible by default, styled with framework-agnostic CSS.",
   "keywords": [
     "components",
@@ -277,6 +277,10 @@
       "import": "./dist/components/popover/index.js",
       "types": "./dist/components/popover/index.d.ts"
     },
+    "./portal-provider": {
+      "import": "./dist/components/portal-provider/index.js",
+      "types": "./dist/components/portal-provider/index.d.ts"
+    },
     "./progress-bar": {
       "import": "./dist/components/progress-bar/index.js",
       "types": "./dist/components/progress-bar/index.d.ts"
@@ -417,7 +421,7 @@
     "@internationalized/date": "3.12.4",
     "@internationalized/number": "3.6.8",
     "@internationalized/string": "3.2.10",
-    "@ropav/styles": "0.14.0"
+    "@ropav/styles": "0.15.1"
   },
   "peerDependencies": {
     "vue": "^3.6.0-rc.8"