@schukai/monster 4.129.1 → 4.129.3

package/source/components/form/util/floating-ui.mjs

@@ -16,7 +16,6 @@ import {
 	arrow,
 	autoPlacement,
 	autoUpdate,
-	detectOverflow,
 	computePosition,
 	offset,
 	flip,
@@ -24,11 +23,21 @@ import {
 	shift,
 } from "@floating-ui/dom";
 import { Processing } from "../../../util/processing.mjs";
-import { getDocument } from "../../../dom/util.mjs";
 import { isString, isArray, isObject, isFunction } from "../../../types/is.mjs";
 import { hide } from "@popperjs/core";
 
-export { positionPopper };
+export {
+	canUseNativePositionedPopper,
+	closePositionedPopper,
+	isPositionedPopperOpen,
+	openPositionedPopper,
+	positionPopper,
+};
+
+const autoUpdateCleanupMap = new WeakMap();
+const nativeArrowSyncFrameMap = new WeakMap();
+const anchorNameMap = new WeakMap();
+let anchorNameCounter = 0;
 
 /**
  * @private
@@ -38,191 +47,822 @@ export { positionPopper };
  * @return {Promise|*}
  */
 function positionPopper(controlElement, popperElement, options) {
-	const body = getDocument().body;
+	const config = normalizePopperConfig(options);
 
 	return new Processing(() => {
-		const arrowElement = controlElement.querySelector(
+		if (canUseNativePositionedPopper(controlElement, popperElement, config)) {
+			prepareNativePopover(controlElement, popperElement, config);
+			startAutoUpdate(controlElement, popperElement, () => {
+				syncNativePopover(controlElement, popperElement, config);
+			});
+			syncNativePopover(controlElement, popperElement, config);
+			return;
+		}
+
+		teardownNativePopover(popperElement);
+		popperElement.style.removeProperty("visibility");
+		popperElement.style.display = "block";
+
+		const arrowElement = popperElement.querySelector(
 			"[data-monster-role=arrow]",
 		);
+		const floatingMiddleware = [...config.floatingMiddleware];
+		if (
+			arrowElement instanceof HTMLElement &&
+			config.middlewareTokens.includes("arrow")
+		) {
+			floatingMiddleware.push(arrow({ element: arrowElement }));
+		}
 
-		const config = Object.assign(
-			{},
-			{
-				placement: "top",
-			},
-			options,
-		);
+		startAutoUpdate(controlElement, popperElement, () => {
+			computePosition(
+				controlElement,
+				popperElement,
+				Object.assign({}, config, {
+					middleware: floatingMiddleware,
+				}),
+			).then(({ x, y, placement, middlewareData }) => {
+				Object.assign(popperElement.style, {
+					top: "0",
+					left: "0",
+					transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
+				});
+
+				if (middlewareData.arrow) {
+					applyFloatingArrowStyles(
+						arrowElement,
+						placement,
+						middlewareData.arrow,
+					);
+				}
+			});
+		});
+	}).run();
+}
+
+function openPositionedPopper(controlElement, popperElement, options) {
+	const config = normalizePopperConfig(options);
+
+	if (canUseNativePositionedPopper(controlElement, popperElement, config)) {
+		prepareNativePopover(controlElement, popperElement, config);
+		popperElement.style.removeProperty("transform");
+		if (!matchesPopoverOpen(popperElement)) {
+			popperElement.showPopover();
+		}
+		return;
+	}
+
+	teardownNativePopover(popperElement);
+	popperElement.style.display = "block";
+}
+
+function closePositionedPopper(popperElement) {
+	stopAutoUpdate(popperElement);
+	cancelScheduledNativeArrowSync(popperElement);
+
+	if (isNativePopoverElement(popperElement)) {
+		if (matchesPopoverOpen(popperElement)) {
+			popperElement.hidePopover();
+		}
+		popperElement.style.display = "none";
+		popperElement.style.removeProperty("visibility");
+		popperElement.style.removeProperty("transform");
+		return;
+	}
+
+	popperElement.style.display = "none";
+}
+
+function isPositionedPopperOpen(popperElement) {
+	if (isNativePopoverElement(popperElement)) {
+		return matchesPopoverOpen(popperElement);
+	}
+
+	return popperElement.style.display === "block";
+}
+
+function canUseNativePositionedPopper(controlElement, popperElement, options) {
+	if (!(controlElement instanceof HTMLElement)) {
+		return false;
+	}
+
+	if (!(popperElement instanceof HTMLElement)) {
+		return false;
+	}
+
+	if (options?.engine !== "native") {
+		return false;
+	}
+
+	if (!("showPopover" in HTMLElement.prototype)) {
+		return false;
+	}
+
+	if (typeof CSS === "undefined") {
+		return false;
+	}
+
+	return (
+		CSS.supports("anchor-name: --monster-popper-anchor") &&
+		CSS.supports("position-anchor: --monster-popper-anchor") &&
+		CSS.supports("top: anchor(bottom)")
+	);
+}
+
+function normalizePopperConfig(options) {
+	const config = Object.assign(
+		{},
+		{
+			placement: "top",
+			engine: "native",
+		},
+		options,
+	);
+
+	config.middleware = normalizeMiddleware(config);
+	config.middlewareTokens = config.middleware.filter((line) => isString(line));
+	config.floatingMiddleware = buildFloatingMiddleware(
+		config.middleware,
+		config.placement,
+	);
+
+	return config;
+}
+
+function normalizeMiddleware(config) {
+	const middleware = config?.["middleware"];
+	if (isArray(middleware)) {
+		return [...middleware];
+	}
+
+	if (isString(middleware)) {
+		return middleware.split(",").filter((line) => line.trim().length > 0);
+	}
+
+	return [];
+}
 
-		const middleware = config?.["middleware"];
-		if (!isArray(middleware)) {
-			if (isString(middleware)) {
-				config["middleware"] = middleware.split(",").filter((line) => {
-					return line.trim().length > 0;
+function buildFloatingMiddleware(middleware, placement) {
+	const result = [...middleware];
+
+	for (const key in result) {
+		const line = result[key];
+		if (isFunction(line) || isObject(line)) {
+			continue;
+		}
+
+		if (!isString(line)) {
+			throw new Error(
+				`Middleware must be a string, a function or an object. Got ${typeof line}`,
+			);
+		}
+
+		const kv = line.split(":");
+		const fn = kv.shift();
+
+		switch (fn) {
+			case "flip":
+				result[key] = flip();
+				break;
+			case "shift":
+				result[key] = shift();
+				break;
+			case "autoPlacement":
+				let defaultAllowedPlacements = ["top", "bottom", "left", "right"];
+
+				const defPlacement = kv?.shift();
+				if (isString(defPlacement) && defPlacement.trim().length > 0) {
+					defaultAllowedPlacements = defPlacement
+						.split(",")
+						.filter((entry) => entry.trim().length > 0);
+				}
+
+				if (defaultAllowedPlacements.includes(placement)) {
+					defaultAllowedPlacements.splice(
+						defaultAllowedPlacements.indexOf(placement),
+						1,
+					);
+				}
+				defaultAllowedPlacements.unshift(placement);
+
+				result[key] = autoPlacement({
+					crossAxis: true,
+					autoAlignment: true,
+					allowedPlacements: defaultAllowedPlacements,
 				});
-			} else {
-				config["middleware"] = [];
-			}
+				break;
+			case "arrow":
+				result[key] = null;
+				break;
+			case "size":
+				result[key] = size({
+					apply({ availableWidth, availableHeight, elements }) {
+						Object.assign(elements.floating.style, {
+							boxSizing: "border-box",
+							maxWidth: `${availableWidth}px`,
+							maxHeight: `${availableHeight}px`,
+						});
+					},
+				});
+				break;
+			case "offset":
+				result[key] = offset(parseInt(kv?.shift()) || 10);
+				break;
+			case "hide":
+				result[key] = hide();
+				break;
+			default:
+				throw new Error(`Unknown function: ${fn}`);
 		}
+	}
 
-		for (const key in middleware) {
-			const line = middleware[key];
-			if (isFunction(line)) {
-				continue;
-			}
+	return result.filter(Boolean);
+}
+
+function startAutoUpdate(controlElement, popperElement, callback) {
+	stopAutoUpdate(popperElement);
+	autoUpdateCleanupMap.set(
+		popperElement,
+		autoUpdate(controlElement, popperElement, callback),
+	);
+}
+
+function stopAutoUpdate(popperElement) {
+	const cleanup = autoUpdateCleanupMap.get(popperElement);
+	if (typeof cleanup === "function") {
+		cleanup();
+	}
+	autoUpdateCleanupMap.delete(popperElement);
+}
+
+function scheduleNativeArrowSync(controlElement, popperElement) {
+	cancelScheduledNativeArrowSync(popperElement);
+
+	const frameState = {
+		outer: 0,
+		inner: 0,
+	};
+
+	frameState.outer = requestAnimationFrame(() => {
+		frameState.inner = requestAnimationFrame(() => {
+			nativeArrowSyncFrameMap.delete(popperElement);
 
-			if (isObject(line)) {
-				continue;
+			if (
+				!(controlElement instanceof HTMLElement) ||
+				!(popperElement instanceof HTMLElement) ||
+				!isNativePopoverElement(popperElement)
+			) {
+				return;
 			}
 
-			if (!isString(line)) {
-				throw new Error(
-					`Middleware must be a string, a function or an object. Got ${typeof line}`,
-				);
+			if (
+				!matchesPopoverOpen(popperElement) &&
+				popperElement.style.display !== "block"
+			) {
+				return;
 			}
 
-			const kv = line.split(":");
-			const fn = kv.shift();
-
-			switch (fn) {
-				case "flip":
-					config["middleware"][key] = flip();
-					break;
-				case "shift":
-					config["middleware"][key] = shift();
-					break;
-				case "autoPlacement":
-					let defaultAllowedPlacements = ["top", "bottom", "left", "right"];
-
-					const defPlacement = kv?.shift();
-					if (isString(defPlacement) && defPlacement.trim().length > 0) {
-						defaultAllowedPlacements = defPlacement
-							.split(",")
-							.filter((line) => {
-								return line.trim().length > 0;
-							});
-					}
-
-					if (defaultAllowedPlacements.includes(config.placement)) {
-						defaultAllowedPlacements.splice(
-							defaultAllowedPlacements.indexOf(config.placement),
-							1,
-						);
-					}
-					defaultAllowedPlacements.unshift(config.placement);
-
-					config["middleware"][key] = autoPlacement({
-						crossAxis: true,
-						autoAlignment: true,
-						allowedPlacements: defaultAllowedPlacements,
-					});
-
-					break;
-				case "arrow":
-					if (arrowElement) {
-						config["middleware"][key] = arrow({ element: arrowElement });
-					}
-					break;
-				case "size":
-					config["middleware"][key] = size({
-						apply({ availableWidth, availableHeight, elements }) {
-							Object.assign(elements.floating.style, {
-								boxSizing: "border-box",
-								maxWidth: `${availableWidth}px`,
-								maxHeight: `${availableHeight}px`,
-							});
-						},
-					});
-					break;
-				case "offset":
-					const o = kv?.shift();
-					config["middleware"][key] = offset(parseInt(o) || 10);
-					break;
-				case "hide":
-					config["middleware"][key] = hide();
-					break;
+			syncNativeArrow(controlElement, popperElement);
+		});
+	});
+
+	nativeArrowSyncFrameMap.set(popperElement, frameState);
+}
+
+function cancelScheduledNativeArrowSync(popperElement) {
+	const frameState = nativeArrowSyncFrameMap.get(popperElement);
+	if (!frameState) {
+		return;
+	}
+
+	if (frameState.outer) {
+		cancelAnimationFrame(frameState.outer);
+	}
+
+	if (frameState.inner) {
+		cancelAnimationFrame(frameState.inner);
+	}
+
+	nativeArrowSyncFrameMap.delete(popperElement);
+}
+
+function prepareNativePopover(controlElement, popperElement, config) {
+	const anchorName = getAnchorName(controlElement);
+	popperElement.dataset.monsterPopperEngine = "native";
+	popperElement.setAttribute("popover", "manual");
+	controlElement.style.setProperty("anchor-name", anchorName);
+	popperElement.style.setProperty("position-anchor", anchorName);
+	popperElement.style.setProperty("inset", "auto");
+	popperElement.style.setProperty("margin", "0");
+	popperElement.style.setProperty("overflow", "visible");
+	popperElement.style.display = "block";
+	popperElement.style.removeProperty("transform");
+	applyNativeTryFallbacks(popperElement, config);
+}
+
+function teardownNativePopover(popperElement) {
+	if (!isNativePopoverElement(popperElement)) {
+		return;
+	}
+
+	if (matchesPopoverOpen(popperElement)) {
+		popperElement.hidePopover();
+	}
+
+	cancelScheduledNativeArrowSync(popperElement);
+	delete popperElement.dataset.monsterPopperEngine;
+	popperElement.removeAttribute("popover");
+	popperElement.style.removeProperty("position-anchor");
+	popperElement.style.removeProperty("position-area");
+	popperElement.style.removeProperty("inset-area");
+	popperElement.style.removeProperty("position-try");
+	popperElement.style.removeProperty("position-try-fallbacks");
+	popperElement.style.removeProperty("margin");
+	popperElement.style.removeProperty("margin-top");
+	popperElement.style.removeProperty("margin-right");
+	popperElement.style.removeProperty("margin-bottom");
+	popperElement.style.removeProperty("margin-left");
+	popperElement.style.removeProperty("inset");
+	popperElement.style.removeProperty("overflow");
+	popperElement.style.removeProperty("--monster-popper-control-width");
+	popperElement.style.removeProperty("--monster-popper-control-height");
+}
+
+function syncNativePopover(controlElement, popperElement, config) {
+	const controlRect = controlElement.getBoundingClientRect();
+	const placement = resolvePlacement(config.placement);
+	const offsetValue = resolveOffset(config.middlewareTokens);
+
+	popperElement.style.setProperty(
+		"--monster-popper-control-width",
+		`${Math.round(controlRect.width)}px`,
+	);
+	popperElement.style.setProperty(
+		"--monster-popper-control-height",
+		`${Math.round(controlRect.height)}px`,
+	);
+
+	applyNativePlacementStyles(popperElement, placement, offsetValue);
+	popperElement.style.removeProperty("visibility");
+	syncNativeArrow(controlElement, popperElement);
+	scheduleNativeArrowSync(controlElement, popperElement);
+}
+
+function resolvePlacement(value) {
+	if (!isString(value) || value.trim().length === 0) {
+		return { side: "top", align: "center" };
+	}
+
+	const [rawSide, rawAlign] = value.split("-");
+	const side = rawSide === "auto" ? "top" : rawSide;
+	const align =
+		rawAlign === "start" || rawAlign === "end" ? rawAlign : "center";
+
+	if (!["top", "bottom", "left", "right"].includes(side)) {
+		return { side: "top", align: "center" };
+	}
+
+	return { side, align };
+}
+
+function resolveOffset(middleware) {
+	if (!isArray(middleware)) {
+		return 10;
+	}
+
+	for (const entry of middleware) {
+		if (!isString(entry) || !entry.startsWith("offset")) {
+			continue;
+		}
+
+		const [, rawValue] = entry.split(":");
+		const parsed = parseInt(rawValue);
+		if (Number.isFinite(parsed)) {
+			return parsed;
+		}
+	}
+
+	return 10;
+}
+
+function applyNativePlacementStyles(
+	popperElement,
+	{ side, align },
+	offsetValue,
+) {
+	if (supportsNativePositionArea()) {
+		applyNativePositionAreaStyles(popperElement, { side, align }, offsetValue);
+		return;
+	}
+
+	popperElement.style.removeProperty("position-area");
+	popperElement.style.removeProperty("inset-area");
+	popperElement.style.removeProperty("margin-top");
+	popperElement.style.removeProperty("margin-right");
+	popperElement.style.removeProperty("margin-bottom");
+	popperElement.style.removeProperty("margin-left");
+	popperElement.style.removeProperty("top");
+	popperElement.style.removeProperty("right");
+	popperElement.style.removeProperty("bottom");
+	popperElement.style.removeProperty("left");
+
+	switch (side) {
+		case "bottom":
+			popperElement.style.setProperty(
+				"top",
+				`calc(anchor(bottom) + ${offsetValue}px)`,
+			);
+			applyHorizontalAlignment(popperElement, align);
+			break;
+		case "left":
+			popperElement.style.setProperty(
+				"left",
+				`calc(anchor(left) - 100% - ${offsetValue}px)`,
+			);
+			applyVerticalAlignment(popperElement, align);
+			break;
+		case "right":
+			popperElement.style.setProperty(
+				"left",
+				`calc(anchor(right) + ${offsetValue}px)`,
+			);
+			applyVerticalAlignment(popperElement, align);
+			break;
+		case "top":
+		default:
+			popperElement.style.setProperty(
+				"top",
+				`calc(anchor(top) - 100% - ${offsetValue}px)`,
+			);
+			applyHorizontalAlignment(popperElement, align);
+			break;
+	}
+}
+
+function applyNativePositionAreaStyles(
+	popperElement,
+	{ side, align },
+	offsetValue,
+) {
+	const positionArea = resolveNativePositionArea({ side, align });
+
+	popperElement.style.removeProperty("top");
+	popperElement.style.removeProperty("right");
+	popperElement.style.removeProperty("bottom");
+	popperElement.style.removeProperty("left");
+	popperElement.style.setProperty("position-area", positionArea);
+	popperElement.style.setProperty("inset-area", positionArea);
+	popperElement.style.setProperty("margin-top", "0px");
+	popperElement.style.setProperty("margin-right", "0px");
+	popperElement.style.setProperty("margin-bottom", "0px");
+	popperElement.style.setProperty("margin-left", "0px");
+
+	switch (side) {
+		case "bottom":
+			popperElement.style.setProperty("margin-top", `${offsetValue}px`);
+			break;
+		case "left":
+			popperElement.style.setProperty("margin-right", `${offsetValue}px`);
+			break;
+		case "right":
+			popperElement.style.setProperty("margin-left", `${offsetValue}px`);
+			break;
+		case "top":
+		default:
+			popperElement.style.setProperty("margin-bottom", `${offsetValue}px`);
+			break;
+	}
+}
+
+function resolveNativePositionArea({ side, align }) {
+	switch (side) {
+		case "bottom":
+			switch (align) {
+				case "end":
+					return "bottom span-left";
+				case "center":
+					return "bottom center";
+				case "start":
 				default:
-					throw new Error(`Unknown function: ${fn}`);
+					return "bottom span-right";
 			}
-		}
+		case "left":
+			switch (align) {
+				case "end":
+					return "left span-top";
+				case "center":
+					return "left center";
+				case "start":
+				default:
+					return "left span-bottom";
+			}
+		case "right":
+			switch (align) {
+				case "end":
+					return "right span-top";
+				case "center":
+					return "right center";
+				case "start":
+				default:
+					return "right span-bottom";
+			}
+		case "top":
+		default:
+			switch (align) {
+				case "end":
+					return "top span-left";
+				case "center":
+					return "top center";
+				case "start":
+				default:
+					return "top span-right";
+			}
+	}
+}
 
-		popperElement.style.removeProperty("visibility");
-		popperElement.style.display = "block";
+function supportsNativePositionArea() {
+	if (typeof CSS === "undefined") {
+		return false;
+	}
+
+	return (
+		CSS.supports("position-area: bottom center") ||
+		CSS.supports("inset-area: bottom center")
+	);
+}
+
+function applyHorizontalAlignment(popperElement, align) {
+	switch (align) {
+		case "end":
+			popperElement.style.setProperty("left", "calc(anchor(right) - 100%)");
+			break;
+		case "center":
+			popperElement.style.setProperty(
+				"left",
+				"calc(anchor(left) + (var(--monster-popper-control-width) - 100%) / 2)",
+			);
+			break;
+		case "start":
+		default:
+			popperElement.style.setProperty("left", "anchor(left)");
+			break;
+	}
+}
 
-		autoUpdate(controlElement, popperElement, () => {
-			computePosition(controlElement, popperElement, config).then(
-				({ x, y, placement, middlewareData }) => {
-					Object.assign(popperElement.style, {
-						top: "0",
-						left: "0",
-						transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
-					});
-
-					if (middlewareData.arrow) {
-						const side = placement.split("-")[0];
-
-						const staticSide = {
-							top: "bottom",
-							right: "left",
-							bottom: "top",
-							left: "right",
-						}[side];
-
-						// monster-border-width = + 4 (2*2) (should come from css)
-						const arrowLen = arrowElement.offsetWidth + 4;
-
-						const borderStyle = {
-							borderLeft: "transparent",
-							borderRight: "transparent",
-							borderBottom: "transparent",
-							borderTop: "transparent",
-						};
-
-						const defaultBorder =
-							"var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4)";
-
-						switch (side) {
-							case "top":
-								borderStyle.borderRight = defaultBorder;
-								borderStyle.borderBottom = defaultBorder;
-								break;
-
-							case "bottom":
-								borderStyle.borderTop = defaultBorder;
-								borderStyle.borderLeft = defaultBorder;
-								break;
-
-							case "left":
-								borderStyle.borderRight = defaultBorder;
-								borderStyle.borderTop = defaultBorder;
-								break;
-
-							case "right":
-								borderStyle.borderBottom = defaultBorder;
-								borderStyle.borderLeft = defaultBorder;
-								break;
-						}
-
-						const { x, y } = middlewareData.arrow;
-
-						Object.assign(
-							arrowElement.style,
-							{
-								left: x != null ? `${x}px` : "",
-								top: y != null ? `${y}px` : "",
-								// Ensure the static side gets unset when
-								// flipping to other placements' axes.
-								right: "",
-								bottom: "",
-								[staticSide]: `${-arrowLen / 2}px`,
-								transform: "rotate(45deg)",
-							},
-							borderStyle,
-						);
-					}
-				},
+function applyVerticalAlignment(popperElement, align) {
+	switch (align) {
+		case "end":
+			popperElement.style.setProperty("top", "calc(anchor(bottom) - 100%)");
+			break;
+		case "center":
+			popperElement.style.setProperty(
+				"top",
+				"calc(anchor(top) + (var(--monster-popper-control-height) - 100%) / 2)",
 			);
+			break;
+		case "start":
+		default:
+			popperElement.style.setProperty("top", "anchor(top)");
+			break;
+	}
+}
+
+function applyNativeTryFallbacks(popperElement, config) {
+	const middleware = config.middlewareTokens || [];
+	const placement = resolvePlacement(config.placement);
+	let fallbacks = "";
+
+	if (
+		middleware.some(
+			(entry) => isString(entry) && entry.startsWith("autoPlacement"),
+		)
+	) {
+		fallbacks =
+			placement.side === "left" || placement.side === "right"
+				? "flip-inline, flip-block"
+				: "flip-block, flip-inline";
+	} else if (middleware.includes("flip")) {
+		fallbacks =
+			placement.side === "left" || placement.side === "right"
+				? "flip-inline"
+				: "flip-block";
+	}
+
+	if (fallbacks.length === 0) {
+		popperElement.style.removeProperty("position-try");
+		popperElement.style.removeProperty("position-try-fallbacks");
+		return;
+	}
+
+	popperElement.style.setProperty("position-try", fallbacks);
+	popperElement.style.setProperty("position-try-fallbacks", fallbacks);
+}
+
+function syncNativeArrow(controlElement, popperElement) {
+	const arrowElement = popperElement.querySelector("[data-monster-role=arrow]");
+
+	if (!(arrowElement instanceof HTMLElement)) {
+		return;
+	}
+
+	const controlRect = controlElement.getBoundingClientRect();
+	const popperRect = popperElement.getBoundingClientRect();
+	const arrowHalf = arrowElement.offsetWidth / 2;
+
+	if (arrowHalf === 0) {
+		return;
+	}
+
+	const side = resolveArrowSide(controlRect, popperRect);
+	const staticSide = side;
+	const defaultBorder =
+		"var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4)";
+	const borderStyle = {
+		borderLeft: "transparent",
+		borderRight: "transparent",
+		borderBottom: "transparent",
+		borderTop: "transparent",
+	};
+
+	switch (side) {
+		case "top":
+			borderStyle.borderTop = defaultBorder;
+			borderStyle.borderLeft = defaultBorder;
+			break;
+		case "bottom":
+			borderStyle.borderRight = defaultBorder;
+			borderStyle.borderBottom = defaultBorder;
+			break;
+		case "left":
+			borderStyle.borderLeft = defaultBorder;
+			borderStyle.borderBottom = defaultBorder;
+			break;
+		case "right":
+			borderStyle.borderTop = defaultBorder;
+			borderStyle.borderRight = defaultBorder;
+			break;
+	}
+
+	const arrowOffset = resolveArrowOffset(
+		side,
+		controlRect,
+		popperRect,
+		arrowHalf,
+	);
+	const arrowLen = arrowElement.offsetWidth + 4;
+
+	Object.assign(
+		arrowElement.style,
+		{
+			left: side === "top" || side === "bottom" ? `${arrowOffset}px` : "",
+			top: side === "left" || side === "right" ? `${arrowOffset}px` : "",
+			right: "",
+			bottom: "",
+			[staticSide]: `${-arrowLen / 2}px`,
+			transform: "rotate(45deg)",
+		},
+		borderStyle,
+	);
+}
+
+function resolveArrowSide(controlRect, popperRect) {
+	const triggerCenterX = controlRect.left + controlRect.width / 2;
+	const triggerCenterY = controlRect.top + controlRect.height / 2;
+	const candidates = [];
+
+	if (triggerCenterY <= popperRect.top) {
+		candidates.push({
+			side: "top",
+			distance: popperRect.top - triggerCenterY,
 		});
-	}).run();
+	}
+
+	if (triggerCenterY >= popperRect.bottom) {
+		candidates.push({
+			side: "bottom",
+			distance: triggerCenterY - popperRect.bottom,
+		});
+	}
+
+	if (triggerCenterX <= popperRect.left) {
+		candidates.push({
+			side: "left",
+			distance: popperRect.left - triggerCenterX,
+		});
+	}
+
+	if (triggerCenterX >= popperRect.right) {
+		candidates.push({
+			side: "right",
+			distance: triggerCenterX - popperRect.right,
+		});
+	}
+
+	if (candidates.length === 0) {
+		return "top";
+	}
+
+	candidates.sort((a, b) => a.distance - b.distance);
+	return candidates[0].side;
+}
+
+function resolveArrowOffset(side, controlRect, popperRect, arrowHalf) {
+	if (side === "top" || side === "bottom") {
+		return clamp(
+			controlRect.left + controlRect.width / 2 - popperRect.left - arrowHalf,
+			0,
+			Math.max(0, popperRect.width - arrowHalf * 2),
+		);
+	}
+
+	return clamp(
+		controlRect.top + controlRect.height / 2 - popperRect.top - arrowHalf,
+		0,
+		Math.max(0, popperRect.height - arrowHalf * 2),
+	);
+}
+
+function applyFloatingArrowStyles(arrowElement, placement, arrowData) {
+	if (!(arrowElement instanceof HTMLElement)) {
+		return;
+	}
+
+	const side = placement.split("-")[0];
+	const staticSide = {
+		top: "bottom",
+		right: "left",
+		bottom: "top",
+		left: "right",
+	}[side];
+	const arrowLen = arrowElement.offsetWidth + 4;
+	const borderStyle = {
+		borderLeft: "transparent",
+		borderRight: "transparent",
+		borderBottom: "transparent",
+		borderTop: "transparent",
+	};
+	const defaultBorder =
+		"var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4)";
+
+	switch (side) {
+		case "top":
+			borderStyle.borderRight = defaultBorder;
+			borderStyle.borderBottom = defaultBorder;
+			break;
+		case "bottom":
+			borderStyle.borderTop = defaultBorder;
+			borderStyle.borderLeft = defaultBorder;
+			break;
+		case "left":
+			borderStyle.borderRight = defaultBorder;
+			borderStyle.borderTop = defaultBorder;
+			break;
+		case "right":
+			borderStyle.borderBottom = defaultBorder;
+			borderStyle.borderLeft = defaultBorder;
+			break;
+	}
+
+	Object.assign(
+		arrowElement.style,
+		{
+			left: arrowData.x != null ? `${arrowData.x}px` : "",
+			top: arrowData.y != null ? `${arrowData.y}px` : "",
+			right: "",
+			bottom: "",
+			[staticSide]: `${-arrowLen / 2}px`,
+			transform: "rotate(45deg)",
+		},
+		borderStyle,
+	);
+}
+
+function getAnchorName(controlElement) {
+	if (!anchorNameMap.has(controlElement)) {
+		anchorNameCounter += 1;
+		anchorNameMap.set(
+			controlElement,
+			`--monster-popper-anchor-${anchorNameCounter}`,
+		);
+	}
+
+	return anchorNameMap.get(controlElement);
+}
+
+function isNativePopoverElement(popperElement) {
+	return popperElement?.dataset?.monsterPopperEngine === "native";
+}
+
+function matchesPopoverOpen(popperElement) {
+	try {
+		return popperElement.matches(":popover-open");
+	} catch (e) {
+		return false;
+	}
+}
+
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
 }
 
 function roundByDPR(value) {