@schukai/monster 4.129.4 → 4.129.6

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.129.4"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.129.6"}

package/source/components/content/copy.mjs

@@ -163,7 +163,7 @@ class Copy extends CustomElement {
 	 * @property {boolean} features.preventOpenEventSent=false Prevent open event from being sent
 	 * @property {Object} popper Popper configuration
 	 * @property {string} popper.placement="top" Popper placement
-	 * @property {string[]} popper.middleware=["autoPlacement", "shift", "offset:15", "arrow"] Popper middleware
+	 * @property {string[]} popper.middleware=["flip", "shift", "offset:-1", "arrow"] Popper middleware
 	 * @property {boolean} disabled=false Disabled state
 	 */
 	get defaults() {
@@ -178,7 +178,7 @@ class Copy extends CustomElement {
 			},
 			popper: {
 				placement: "top",
-				middleware: ["autoPlacement", "offset:-1", "arrow"],
+				middleware: ["flip", "shift", "offset:-1", "arrow"],
 			},
 		});
 	}

package/source/components/datatable/columnbar.mjs

@@ -21,11 +21,14 @@ import {
 import { findTargetElementFromEvent } from "../../dom/events.mjs";
 import { clone } from "../../util/clone.mjs";
 import { ColumnBarStyleSheet } from "./stylesheet/column-bar.mjs";
-import { createPopper } from "@popperjs/core";
 import { getLocaleOfDocument } from "../../dom/locale.mjs";
 import { hasObjectLink } from "../../dom/attributes.mjs";
 import { customElementUpdaterLinkSymbol } from "../../dom/constants.mjs";
 import { getGlobalObject } from "../../types/global.mjs";
+import {
+	createFloatingPopper,
+	popperInstanceSymbol,
+} from "../form/util/popper.mjs";
 
 export { ColumnBar };
 
@@ -53,12 +56,6 @@ const settingsLayerElementSymbol = Symbol("settingsLayerElement");
  */
 const dotsContainerElementSymbol = Symbol("dotsContainerElement");
 
-/**
- * @private
- * @type {symbol}
- */
-const popperInstanceSymbol = Symbol("popperInstance");
-
 /**
  * @private
  * @type {symbol}
@@ -226,7 +223,11 @@ class ColumnBar extends CustomElement {
 		}
 
 		if (typeof this[dotsFrameRequestSymbol] === "number") {
-			cancelAnimationFrame(this[dotsFrameRequestSymbol]);
+			const cancelFrame =
+				typeof globalThis.cancelAnimationFrame === "function"
+					? globalThis.cancelAnimationFrame.bind(globalThis)
+					: globalThis.clearTimeout.bind(globalThis);
+			cancelFrame(this[dotsFrameRequestSymbol]);
 			this[dotsFrameRequestSymbol] = null;
 		}
 
@@ -241,6 +242,8 @@ class ColumnBar extends CustomElement {
 			);
 			this[closeEventHandlerSymbol] = null;
 		}
+
+		this[popperInstanceSymbol]?.destroy();
 	}
 
 	/**
@@ -350,7 +353,7 @@ function initControlReferences() {
 function initEventHandler() {
 	const self = this;
 
-	self[popperInstanceSymbol] = createPopper(
+	self[popperInstanceSymbol] = createFloatingPopper(
 		self[settingsButtonElementSymbol],
 		self[settingsLayerElementSymbol],
 		{

package/source/components/form/button-bar.mjs

@@ -183,7 +183,7 @@ class ButtonBar extends CustomElement {
 			},
 			popper: {
 				placement: "left",
-				middleware: ["autoPlacement", "shift", "offset:5"],
+				middleware: ["flip", "shift", "offset:5"],
 			},
 		});
 

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

@@ -19,15 +19,14 @@ import {
 	computePosition,
 	offset,
 	flip,
+	hide,
 	size,
 	shift,
 } from "@floating-ui/dom";
+import { isArray, isFunction, isObject, isString } from "../../../types/is.mjs";
 import { Processing } from "../../../util/processing.mjs";
-import { isString, isArray, isObject, isFunction } from "../../../types/is.mjs";
-import { hide } from "@popperjs/core";
 
 export {
-	canUseNativePositionedPopper,
 	closePositionedPopper,
 	isPositionedPopperOpen,
 	openPositionedPopper,
@@ -35,9 +34,6 @@ export {
 };
 
 const autoUpdateCleanupMap = new WeakMap();
-const nativeArrowSyncFrameMap = new WeakMap();
-const anchorNameMap = new WeakMap();
-let anchorNameCounter = 0;
 
 /**
  * @private
@@ -50,15 +46,6 @@ function positionPopper(controlElement, popperElement, options) {
 	const config = normalizePopperConfig(options);
 
 	return new Processing(() => {
-		if (canUseNativePositionedPopper(controlElement, popperElement, config)) {
-			prepareNativePopover(controlElement, popperElement, config);
-			startAutoUpdate(controlElement, popperElement, () => {
-				syncNativePopover(controlElement, popperElement, config);
-			});
-			syncNativePopover(controlElement, popperElement, config);
-			return;
-		}
-
 		enableFloatingPositioning(controlElement, popperElement, config);
 	}).run();
 }
@@ -66,21 +53,16 @@ function positionPopper(controlElement, popperElement, options) {
 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);
+	stopAutoUpdate(popperElement);
 	popperElement.style.display = "block";
+	popperElement.style.removeProperty("transform");
+
+	// Keep the call signature stable even though only Floating UI is used now.
+	void controlElement;
+	void config;
 }
 
 function enableFloatingPositioning(controlElement, popperElement, config) {
-	teardownNativePopover(popperElement);
 	popperElement.style.removeProperty("visibility");
 	popperElement.style.display = "block";
 
@@ -122,63 +104,21 @@ function syncFloatingPopover(controlElement, popperElement, config) {
 
 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";
+	popperElement.style.removeProperty("visibility");
+	popperElement.style.removeProperty("transform");
 }
 
 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",
+			engine: "floating",
 		},
 		options,
 	);
@@ -194,7 +134,7 @@ function normalizePopperConfig(options) {
 }
 
 function normalizeMiddleware(config) {
-	const middleware = config?.["middleware"];
+	const middleware = config?.middleware;
 	if (isArray(middleware)) {
 		return [...middleware];
 	}
@@ -299,499 +239,6 @@ function stopAutoUpdate(popperElement) {
 	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 (
-				!(controlElement instanceof HTMLElement) ||
-				!(popperElement instanceof HTMLElement) ||
-				!isNativePopoverElement(popperElement)
-			) {
-				return;
-			}
-
-			if (
-				!matchesPopoverOpen(popperElement) &&
-				popperElement.style.display !== "block"
-			) {
-				return;
-			}
-
-			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");
-
-	if (hasViewportOverflow(popperElement)) {
-		enableFloatingPositioning(controlElement, popperElement, config);
-		return;
-	}
-
-	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:
-					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";
-			}
-	}
-}
-
-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;
-	}
-}
-
-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,
-		});
-	}
-
-	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;
@@ -847,52 +294,6 @@ function applyFloatingArrowStyles(arrowElement, placement, arrowData) {
 	);
 }
 
-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 hasViewportOverflow(popperElement) {
-	if (!(popperElement instanceof HTMLElement)) {
-		return false;
-	}
-
-	const rect = popperElement.getBoundingClientRect();
-	const tolerance = 1;
-	const viewportWidth = window.innerWidth;
-	const viewportHeight = window.innerHeight;
-
-	return (
-		rect.left < -tolerance ||
-		rect.top < -tolerance ||
-		rect.right > viewportWidth + tolerance ||
-		rect.bottom > viewportHeight + tolerance
-	);
-}
-
-function clamp(value, min, max) {
-	return Math.min(Math.max(value, min), max);
-}
-
 function roundByDPR(value) {
 	const dpr = window.devicePixelRatio || 1;
 	return Math.round(value * dpr) / dpr;

package/source/components/form/util/popper.mjs

@@ -12,11 +12,33 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
+import {
+	arrow,
+	autoPlacement,
+	autoUpdate,
+	computePosition,
+	flip,
+	hide,
+	offset,
+	shift,
+	size,
+} from "@floating-ui/dom";
 import { extend } from "../../../data/extend.mjs";
-import { isArray } from "../../../types/is.mjs";
+import {
+	isArray,
+	isElement,
+	isFunction,
+	isNumber,
+	isObject,
+	isString,
+} from "../../../types/is.mjs";
 import { validateBoolean } from "../../../types/validate.mjs";
 
-export { setEventListenersModifiers, popperInstanceSymbol };
+export {
+	createFloatingPopper,
+	setEventListenersModifiers,
+	popperInstanceSymbol,
+};
 
 /**
  * @private
@@ -24,6 +46,65 @@ export { setEventListenersModifiers, popperInstanceSymbol };
  */
 const popperInstanceSymbol = Symbol("popperInstance");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const optionsSymbol = Symbol("options");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const referenceElementSymbol = Symbol("referenceElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const popperElementSymbol = Symbol("popperElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const autoUpdateCleanupSymbol = Symbol("autoUpdateCleanup");
+
+/**
+ * @private
+ * @param {HTMLElement} referenceElement
+ * @param {HTMLElement} popperElement
+ * @param {object} options
+ * @return {{destroy: Function, setOptions: Function, update: Function}}
+ */
+function createFloatingPopper(referenceElement, popperElement, options = {}) {
+	const instance = {
+		[referenceElementSymbol]: referenceElement,
+		[popperElementSymbol]: popperElement,
+		[optionsSymbol]: normalizeOptions(options),
+		[autoUpdateCleanupSymbol]: null,
+		destroy() {
+			stopAutoUpdate(instance);
+		},
+		setOptions(nextOptions) {
+			const normalizedOptions = isFunction(nextOptions)
+				? nextOptions(instance[optionsSymbol])
+				: nextOptions;
+
+			instance[optionsSymbol] = normalizeOptions(normalizedOptions);
+			syncAutoUpdate(instance);
+			return instance.update();
+		},
+		update() {
+			return updatePosition(instance);
+		},
+	};
+
+	syncAutoUpdate(instance);
+
+	return instance;
+}
+
 /**
  * @private
  * @this {CustomElement}
@@ -31,25 +112,252 @@ const popperInstanceSymbol = Symbol("popperInstance");
  */
 function setEventListenersModifiers(mode) {
 	const options = extend({}, this.getOption("popper"));
-	const modifiers = options?.["modifiers"];
+	const modifiers = options?.modifiers;
 
 	if (!isArray(modifiers)) {
-		options["modifiers"] = [];
+		options.modifiers = [];
 	}
 
-	if (
-		options["modifiers"].filter((entry) => {
-			if (entry?.["name"] === "eventListeners") {
-				// performance https://popper.js.org/docs/v2/tutorial/#performance
-				entry["enabled"] = validateBoolean(mode);
-			}
-		}).length === 0
-	) {
-		options["modifiers"].push({
+	const existingModifier = options.modifiers.find((entry) => {
+		return entry?.name === "eventListeners";
+	});
+
+	if (existingModifier) {
+		existingModifier.enabled = validateBoolean(mode);
+	} else {
+		options.modifiers.push({
 			name: "eventListeners",
 			enabled: validateBoolean(mode),
 		});
 	}
 
-	this[popperInstanceSymbol].setOptions(options);
+	return this[popperInstanceSymbol].setOptions(options);
+}
+
+/**
+ * @private
+ * @param {object} instance
+ * @return {Promise<void>}
+ */
+function updatePosition(instance) {
+	const referenceElement = instance[referenceElementSymbol];
+	const popperElement = instance[popperElementSymbol];
+	const options = instance[optionsSymbol];
+
+	if (!isElement(referenceElement) || !isElement(popperElement)) {
+		return Promise.resolve();
+	}
+
+	return computePosition(referenceElement, popperElement, {
+		placement: options.placement,
+		strategy: options.strategy,
+		middleware: options.middleware,
+	}).then(({ x, y, strategy }) => {
+		Object.assign(popperElement.style, {
+			position: strategy,
+			left: `${roundByDPR(x)}px`,
+			top: `${roundByDPR(y)}px`,
+			transform: "",
+		});
+	});
+}
+
+/**
+ * @private
+ * @param {object} instance
+ * @return {void}
+ */
+function syncAutoUpdate(instance) {
+	stopAutoUpdate(instance);
+
+	if (instance[optionsSymbol].eventListeners !== true) {
+		return;
+	}
+
+	instance[autoUpdateCleanupSymbol] = autoUpdate(
+		instance[referenceElementSymbol],
+		instance[popperElementSymbol],
+		() => {
+			void instance.update();
+		},
+	);
+}
+
+/**
+ * @private
+ * @param {object} instance
+ * @return {void}
+ */
+function stopAutoUpdate(instance) {
+	const cleanup = instance[autoUpdateCleanupSymbol];
+	if (typeof cleanup === "function") {
+		cleanup();
+	}
+	instance[autoUpdateCleanupSymbol] = null;
+}
+
+/**
+ * @private
+ * @param {object} options
+ * @return {object}
+ */
+function normalizeOptions(options) {
+	const config = extend(
+		{
+			placement: "bottom",
+			strategy: "absolute",
+			modifiers: [],
+		},
+		options || {},
+	);
+
+	config.eventListeners = normalizeEventListeners(config.modifiers);
+	config.middleware = normalizeMiddleware(config);
+
+	if (config.placement === "auto") {
+		config.placement = "bottom";
+		config.middleware.unshift(
+			autoPlacement({
+				crossAxis: true,
+				autoAlignment: true,
+			}),
+		);
+	}
+
+	return config;
+}
+
+/**
+ * @private
+ * @param {object[]} modifiers
+ * @return {boolean}
+ */
+function normalizeEventListeners(modifiers) {
+	if (!isArray(modifiers)) {
+		return true;
+	}
+
+	let result = true;
+
+	for (const entry of modifiers) {
+		if (entry?.name === "eventListeners") {
+			result = validateBoolean(entry.enabled);
+		}
+	}
+
+	return result;
+}
+
+/**
+ * @private
+ * @param {object} config
+ * @return {Array}
+ */
+function normalizeMiddleware(config) {
+	const result = [];
+	const middleware = [];
+
+	if (isArray(config?.middleware)) {
+		middleware.push(...config.middleware);
+	}
+
+	if (isArray(config?.modifiers)) {
+		middleware.push(...config.modifiers);
+	}
+
+	for (const entry of middleware) {
+		if (isFunction(entry)) {
+			result.push(entry);
+			continue;
+		}
+
+		if (isObject(entry) && isFunction(entry?.fn)) {
+			result.push(entry);
+			continue;
+		}
+
+		if (isObject(entry) && !isString(entry?.name)) {
+			result.push(entry);
+			continue;
+		}
+
+		if (!isObject(entry) || !isString(entry?.name)) {
+			continue;
+		}
+
+		const normalizedEntry = normalizeModifier(entry);
+		if (normalizedEntry) {
+			result.push(normalizedEntry);
+		}
+	}
+
+	return result;
+}
+
+/**
+ * @private
+ * @param {{name: string, options?: object, enabled?: boolean}} modifier
+ * @return {object|null}
+ */
+function normalizeModifier(modifier) {
+	if (modifier.enabled === false) {
+		return null;
+	}
+
+	switch (modifier.name) {
+		case "arrow":
+			if (!isElement(modifier?.options?.element)) {
+				return null;
+			}
+			return arrow(modifier.options);
+		case "autoPlacement":
+			return autoPlacement(modifier.options);
+		case "eventListeners":
+			return null;
+		case "flip":
+			return flip(modifier.options);
+		case "hide":
+			return hide(modifier.options);
+		case "offset":
+			return offset(normalizeOffset(modifier.options?.offset));
+		case "preventOverflow":
+			return shift(modifier.options);
+		case "shift":
+			return shift(modifier.options);
+		case "size":
+			return size(modifier.options);
+		default:
+			return null;
+	}
+}
+
+/**
+ * @private
+ * @param {number|Array<number>} rawOffset
+ * @return {number|object}
+ */
+function normalizeOffset(rawOffset) {
+	if (isArray(rawOffset)) {
+		const [skidding = 0, distance = 0] = rawOffset;
+		return {
+			mainAxis: distance,
+			crossAxis: skidding,
+		};
+	}
+
+	if (isNumber(rawOffset)) {
+		return rawOffset;
+	}
+
+	return 0;
+}
+
+/**
+ * @private
+ * @param {number} value
+ * @return {number}
+ */
+function roundByDPR(value) {
+	const dpr = window.devicePixelRatio || 1;
+	return Math.round(value * dpr) / dpr;
 }

package/source/components/layout/popper.mjs

@@ -169,8 +169,8 @@ class Popper extends CustomElement {
 			content: "<slot></slot>",
 			popper: {
 				placement: "top",
-				engine: "native",
-				middleware: ["autoPlacement", "shift", "offset:15", "arrow"],
+				engine: "floating",
+				middleware: ["flip", "shift", "offset:15", "arrow"],
 				contentOverflow: "both",
 			},
 			features: {

package/source/components/layout/tabs.mjs

@@ -13,7 +13,6 @@
  */
 
 import { instanceSymbol } from "../../constants.mjs";
-import { createPopper } from "@popperjs/core";
 import { extend } from "../../data/extend.mjs";
 import { Pathfinder } from "../../data/pathfinder.mjs";
 import {
@@ -56,6 +55,7 @@ import { TabsStyleSheet } from "./stylesheet/tabs.mjs";
 import { loadAndAssignContent } from "../form/util/fetch.mjs";
 import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
 import {
+	createFloatingPopper,
 	popperInstanceSymbol,
 	setEventListenersModifiers,
 } from "../form/util/popper.mjs";
@@ -189,9 +189,9 @@ class Tabs extends CustomElement {
 	 * @property {String} fetch.mode=same-origin
 	 * @property {String} fetch.credentials=same-origin
 	 * @property {Object} fetch.headers={"accept":"text/html"}}
-	 * @property {Object} popper [PopperJS Options](https://popper.js.org/docs/v2/)
-	 * @property {string} popper.placement=bottom PopperJS placement
-	 * @property {Object[]} modifiers={name:offset} PopperJS placement
+	 * @property {Object} popper Popper configuration
+	 * @property {string} popper.placement=bottom Popper placement
+	 * @property {Object[]} popper.modifiers={name:offset} Placement middleware configuration
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
@@ -473,6 +473,8 @@ class Tabs extends CustomElement {
 		for (const [, type] of Object.entries(["click", "touch"])) {
 			document.removeEventListener(type, this[closeEventHandler]);
 		}
+
+		this[popperInstanceSymbol]?.destroy();
 	}
 }
 
@@ -668,14 +670,13 @@ function attachTabChangeObserver() {
 /**
  * @private
  * @return {Select}
- * @external "external:createPopper"
  */
 function initPopper() {
 	const self = this;
 
 	const options = extend({}, self.getOption("popper"));
 
-	self[popperInstanceSymbol] = createPopper(
+	self[popperInstanceSymbol] = createFloatingPopper(
 		self[switchElementSymbol],
 		self[popperElementSymbol],
 		options,

package/source/components/layout/vertical-tabs.mjs

@@ -13,7 +13,6 @@
  */
 
 import { instanceSymbol } from "../../constants.mjs";
-import { createPopper } from "@popperjs/core";
 import { extend } from "../../data/extend.mjs";
 import { Pathfinder } from "../../data/pathfinder.mjs";
 import {
@@ -57,6 +56,7 @@ import { VerticalTabsStyleSheet } from "./stylesheet/vertical-tabs.mjs";
 import { loadAndAssignContent } from "../form/util/fetch.mjs";
 import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
 import {
+	createFloatingPopper,
 	popperInstanceSymbol,
 	setEventListenersModifiers,
 } from "../form/util/popper.mjs";
@@ -190,9 +190,9 @@ class VerticalTabs extends CustomElement {
 	 * @property {String} fetch.mode=same-origin
 	 * @property {String} fetch.credentials=same-origin
 	 * @property {Object} fetch.headers={"accept":"text/html"}}
-	 * @property {Object} popper [PopperJS Options](https://popper.js.org/docs/v2/)
-	 * @property {string} popper.placement=bottom PopperJS placement
-	 * @property {Object[]} modifiers={name:offset} PopperJS placement
+	 * @property {Object} popper Popper configuration
+	 * @property {string} popper.placement=right-start Popper placement
+	 * @property {Object[]} popper.modifiers={name:offset} Placement middleware configuration
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
@@ -474,6 +474,8 @@ class VerticalTabs extends CustomElement {
 		for (const [, type] of Object.entries(["click", "touch"])) {
 			document.removeEventListener(type, this[closeEventHandler]);
 		}
+
+		this[popperInstanceSymbol]?.destroy();
 	}
 }
 
@@ -669,14 +671,13 @@ function attachTabChangeObserver() {
 /**
  * @private
  * @return {Select}
- * @external "external:createPopper"
  */
 function initPopper() {
 	const self = this;
 
 	const options = extend({}, self.getOption("popper"));
 
-	self[popperInstanceSymbol] = createPopper(
+	self[popperInstanceSymbol] = createFloatingPopper(
 		self[switchElementSymbol],
 		self[popperElementSymbol],
 		options,

package/test/cases/components/form/login.mjs

@@ -8,6 +8,8 @@ chai.use(chaiDom);
 let Login;
 
 describe("Login", function () {
+	this.timeout(10000);
+
 	before(function (done) {
 		initJSDOM().then(() => {
 			import("element-internals-polyfill")
@@ -32,21 +34,14 @@ describe("Login", function () {
 		expect(document.createElement("monster-login")).is.instanceof(Login);
 	});
 
-	it("should respect the native hidden attribute on the host", function (done) {
+	it("should respect the native hidden attribute on the host", function () {
 		const login = document.createElement("monster-login");
 		login.setAttribute("hidden", "");
 		document.getElementById("mocks").appendChild(login);
 
-		setTimeout(() => {
-			try {
-				expect(login.hidden).to.be.true;
-				expect(login.visible).to.be.false;
-				expect(login.isVisible).to.be.false;
-				done();
-			} catch (error) {
-				done(error);
-			}
-		}, 100);
+		expect(login.hidden).to.be.true;
+		expect(login.visible).to.be.false;
+		expect(login.isVisible).to.be.false;
 	});
 
 	it("should hide and show the host with the public visibility API", function (done) {

package/test/util/jsdom.mjs

@@ -47,6 +47,7 @@ function initJSDOM(options) {
                     'CSSStyleSheet',
                     'customElements',
                     'CustomEvent',
+                    'cancelAnimationFrame',
                     'document',
                     'DOMException',
                     'DOMImplementation',