@schukai/monster 4.129.7 → 4.129.9

package/package.json

@@ -1 +1 @@
-{"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.7"}
+{"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.9"}

package/source/components/form/context-base.mjs

@@ -50,6 +50,9 @@ class ContextBase extends Popper {
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
+			popper: Object.assign({}, super.defaults.popper, {
+				contentOverflow: "visible",
+			}),
 			features: Object.assign({}, super.defaults.features, {
 				showIconWithoutContent: false,
 			}),

package/source/components/form/context-error.mjs

@@ -114,6 +114,10 @@ class ContextError extends Popper {
 
 			content: "<slot></slot>",
 
+			popper: Object.assign({}, super.defaults.popper, {
+				contentOverflow: "visible",
+			}),
+
 			classes: {
 				button: "monster-theme-error-2",
 			},

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

@@ -28,6 +28,7 @@ import { Processing } from "../../../util/processing.mjs";
 
 export {
 	closePositionedPopper,
+	resolveClippingBoundaryElement,
 	isPositionedPopperOpen,
 	openPositionedPopper,
 	positionPopper,
@@ -43,7 +44,7 @@ const autoUpdateCleanupMap = new WeakMap();
  * @return {Promise|*}
  */
 function positionPopper(controlElement, popperElement, options) {
-	const config = normalizePopperConfig(options);
+	const config = normalizePopperConfig(options, controlElement, popperElement);
 
 	return new Processing(() => {
 		enableFloatingPositioning(controlElement, popperElement, config);
@@ -51,7 +52,7 @@ function positionPopper(controlElement, popperElement, options) {
 }
 
 function openPositionedPopper(controlElement, popperElement, options) {
-	const config = normalizePopperConfig(options);
+	const config = normalizePopperConfig(options, controlElement, popperElement);
 
 	stopAutoUpdate(popperElement);
 	popperElement.style.display = "block";
@@ -115,7 +116,7 @@ function isPositionedPopperOpen(popperElement) {
 	return popperElement.style.display === "block";
 }
 
-function normalizePopperConfig(options) {
+function normalizePopperConfig(options, controlElement, popperElement) {
 	const config = Object.assign(
 		{},
 		{
@@ -126,13 +127,28 @@ function normalizePopperConfig(options) {
 		options,
 	);
 
+	config.boundaryElement = resolveClippingBoundaryElement(
+		controlElement,
+		popperElement,
+	);
+	config.detectOverflowOptions = buildDetectOverflowOptions(
+		config.boundaryElement,
+	);
 	config.middleware = normalizeMiddleware(config);
 	config.middlewareTokens = config.middleware.filter((line) => isString(line));
 	config.floatingMiddleware = buildFloatingMiddleware(
 		config.middleware,
 		config.placement,
+		config.detectOverflowOptions,
+		popperElement,
 	);
 
+	if (!config.middlewareTokens.includes("size")) {
+		config.floatingMiddleware.push(
+			createAdaptiveSizeMiddleware(config.detectOverflowOptions, popperElement),
+		);
+	}
+
 	return config;
 }
 
@@ -149,7 +165,12 @@ function normalizeMiddleware(config) {
 	return [];
 }
 
-function buildFloatingMiddleware(middleware, placement) {
+function buildFloatingMiddleware(
+	middleware,
+	placement,
+	detectOverflowOptions,
+	popperElement,
+) {
 	const result = [...middleware];
 
 	for (const key in result) {
@@ -169,10 +190,10 @@ function buildFloatingMiddleware(middleware, placement) {
 
 		switch (fn) {
 			case "flip":
-				result[key] = flip();
+				result[key] = flip(detectOverflowOptions);
 				break;
 			case "shift":
-				result[key] = shift();
+				result[key] = shift(detectOverflowOptions);
 				break;
 			case "autoPlacement":
 				let defaultAllowedPlacements = ["top", "bottom", "left", "right"];
@@ -192,31 +213,28 @@ function buildFloatingMiddleware(middleware, placement) {
 				}
 				defaultAllowedPlacements.unshift(placement);
 
-				result[key] = autoPlacement({
-					crossAxis: true,
-					autoAlignment: true,
-					allowedPlacements: defaultAllowedPlacements,
-				});
+				result[key] = autoPlacement(
+					Object.assign({}, detectOverflowOptions, {
+						crossAxis: true,
+						autoAlignment: true,
+						allowedPlacements: defaultAllowedPlacements,
+					}),
+				);
 				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`,
-						});
-					},
-				});
+				result[key] = createAdaptiveSizeMiddleware(
+					detectOverflowOptions,
+					popperElement,
+				);
 				break;
 			case "offset":
 				result[key] = offset(parseInt(kv?.shift()) || 10);
 				break;
 			case "hide":
-				result[key] = hide();
+				result[key] = hide(detectOverflowOptions);
 				break;
 			default:
 				throw new Error(`Unknown function: ${fn}`);
@@ -226,6 +244,135 @@ function buildFloatingMiddleware(middleware, placement) {
 	return result.filter(Boolean);
 }
 
+function createAdaptiveSizeMiddleware(detectOverflowOptions, popperElement) {
+	return size(
+		Object.assign({}, detectOverflowOptions, {
+			apply({ availableWidth, availableHeight, elements }) {
+				const floatingElement = elements?.floating || popperElement;
+				if (!(floatingElement instanceof HTMLElement)) {
+					return;
+				}
+
+				const maxWidth = clampAvailableDimension(
+					availableWidth,
+					readMaxDimension(floatingElement, "maxWidth"),
+				);
+				const maxHeight = clampAvailableDimension(
+					availableHeight,
+					readMaxDimension(floatingElement, "maxHeight"),
+				);
+				const nextStyle = {
+					boxSizing: "border-box",
+				};
+
+				if (Number.isFinite(maxWidth) && maxWidth > 0) {
+					nextStyle.maxWidth = `${maxWidth}px`;
+				}
+
+				if (Number.isFinite(maxHeight) && maxHeight > 0) {
+					nextStyle.maxHeight = `${maxHeight}px`;
+				}
+
+				Object.assign(floatingElement.style, nextStyle);
+			},
+		}),
+	);
+}
+
+function buildDetectOverflowOptions(boundaryElement) {
+	const result = {
+		rootBoundary: "viewport",
+		padding: 0,
+	};
+
+	if (boundaryElement instanceof HTMLElement) {
+		result.boundary = boundaryElement;
+	}
+
+	return result;
+}
+
+function resolveClippingBoundaryElement(...elements) {
+	for (const element of elements) {
+		const clippingBoundary = findNearestClippingContainer(element);
+		if (clippingBoundary instanceof HTMLElement) {
+			return clippingBoundary;
+		}
+	}
+
+	return null;
+}
+
+function findNearestClippingContainer(element) {
+	let current = getComposedParent(element);
+
+	while (current) {
+		if (
+			current instanceof HTMLElement &&
+			isClippingContainer(getComputedStyle(current))
+		) {
+			return current;
+		}
+
+		current = getComposedParent(current);
+	}
+
+	return null;
+}
+
+function getComposedParent(node) {
+	if (!node) {
+		return null;
+	}
+
+	if (node instanceof ShadowRoot) {
+		return node.host || null;
+	}
+
+	if (node.parentElement instanceof HTMLElement) {
+		return node.parentElement;
+	}
+
+	const rootNode = node.getRootNode?.();
+	if (rootNode instanceof ShadowRoot) {
+		return rootNode.host || null;
+	}
+
+	return node.parentNode || null;
+}
+
+function isClippingContainer(style) {
+	if (!style) {
+		return false;
+	}
+
+	return [style.overflow, style.overflowX, style.overflowY].some((value) => {
+		return ["hidden", "auto", "scroll", "clip"].includes(value);
+	});
+}
+
+function readMaxDimension(element, property) {
+	const rawValue = getComputedStyle(element)?.[property];
+	if (!rawValue || rawValue === "none") {
+		return Infinity;
+	}
+
+	const value = Number.parseFloat(rawValue);
+	return Number.isFinite(value) ? value : Infinity;
+}
+
+function clampAvailableDimension(available, configuredMax) {
+	if (!Number.isFinite(available) || available <= 0) {
+		return null;
+	}
+
+	if (!Number.isFinite(configuredMax)) {
+		return available;
+	}
+
+	return Math.min(available, configuredMax);
+}
+
 function startAutoUpdate(controlElement, popperElement, callback) {
 	stopAutoUpdate(popperElement);
 	autoUpdateCleanupMap.set(

package/source/components/layout/popper.mjs

@@ -155,7 +155,7 @@ class Popper extends CustomElement {
 	 * @property {Object} popper - Positioning options
 	 * @property {string} popper.placement - Placement: top|bottom|left|right
 	 * @property {Array} popper.middleware - Positioning middleware functions
-	 * @property {string} popper.contentOverflow - Content clipping mode: both|horizontal
+	 * @property {string} popper.contentOverflow - Content clipping mode: both|horizontal|visible
 	 * @property {Object} features - Feature flags
 	 * @property {boolean} features.preventOpenEventSent - Prevent open event
 	 * @returns {Object} Default options merged with parent defaults

package/source/components/layout/stylesheet/popper.mjs

@@ -25,7 +25,7 @@ try {
 	PopperStyleSheet.insertRule(
 		`
 @layer popper { 
-[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:inset(calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0 calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0);overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=control]{display:flex;position:relative} 
+[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:inset(calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0 calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0);overflow:visible}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=visible]{clip-path:none;max-height:none;max-width:none;overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=control]{display:flex;position:relative} 
 }`,
 		0,
 	);

package/source/components/style/floating-ui.css

@@ -1,58 +1,2 @@
 /** generated from floating-ui.pcss **/
-div[data-monster-role="popper"] {
-	align-content: center;
-	background: var(--monster-bg-color-primary-1);
-	border-color: var(--monster-bg-color-primary-4);
-	border-radius: var(--monster-border-radius);
-	border-style: var(--monster-border-style);
-	border-width: var(--monster-border-width);
-	box-shadow: var(--monster-box-shadow-1);
-	box-sizing: border-box;
-	color: var(--monster-color-primary-1);
-	display: none;
-	justify-content: space-between;
-	left: 0;
-	max-height: var(--monster-popper-max-height, calc(100vh - 2rem));
-	max-width: var(--monster-popper-max-width, calc(100vw - 2rem));
-	padding: 1.1em;
-	position: absolute;
-	top: 0;
-	width: -moz-max-content;
-	width: max-content;
-	z-index: var(--monster-z-index-modal);
-}
-div[data-monster-role="popper"] > [part="content"] {
-	max-height: var(--monster-popper-content-max-height, calc(100vh - 4.2rem));
-	max-width: 100%;
-	overflow: auto;
-}
-div[data-monster-role="popper"]
-	> [part="content"][data-monster-overflow-mode="horizontal"] {
-	clip-path: inset(
-		calc(var(--monster-popper-content-block-overflow, 100vh) * -1) 0
-			calc(var(--monster-popper-content-block-overflow, 100vh) * -1) 0
-	);
-	overflow: visible;
-}
-div[data-monster-role="popper"] div[data-monster-role="arrow"] {
-	background: var(--monster-bg-color-primary-1);
-	height: calc(
-		max(
-			var(--monster-popper-witharrrow-distance),
-			-1 *
-			var(--monster-popper-witharrrow-distance)
-		) *
-		2
-	);
-	pointer-events: none;
-	position: absolute;
-	width: calc(
-		max(
-			var(--monster-popper-witharrrow-distance),
-			-1 *
-			var(--monster-popper-witharrrow-distance)
-		) *
-		2
-	);
-	z-index: -1;
-}
+div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:inset(calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0 calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0);overflow:visible}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=visible]{clip-path:none;max-height:none;max-width:none;overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}

package/source/components/style/floating-ui.pcss

@@ -39,6 +39,13 @@ div[data-monster-role=popper] {
         );
     }
 
+    & > [part=content][data-monster-overflow-mode=visible] {
+        overflow: visible;
+        clip-path: none;
+        max-width: none;
+        max-height: none;
+    }
+
     & div[data-monster-role=arrow] {
         position: absolute;
         width: calc(2 * max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance)));

package/source/components/stylesheet/floating-ui.mjs

@@ -10,10 +10,10 @@
  * For more information about purchasing a commercial license, please contact Volker Schukai.
  */
 
-import { addAttributeToken } from "../../dom/attributes.mjs";
-import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
+import {addAttributeToken} from "../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs";
 
-export { FloatingUiStyleSheet };
+export {FloatingUiStyleSheet}
 
 /**
  * @private
@@ -22,17 +22,10 @@ export { FloatingUiStyleSheet };
 const FloatingUiStyleSheet = new CSSStyleSheet();
 
 try {
-	FloatingUiStyleSheet.insertRule(
-		`
+  FloatingUiStyleSheet.insertRule(`
 @layer floatingui { 
-div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:inset(calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0 calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0);overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1} 
-}`,
-		0,
-	);
+div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:inset(calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0 calc(var(--monster-popper-content-block-overflow, 100vh)*-1) 0);overflow:visible}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=visible]{clip-path:none;max-height:none;max-width:none;overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1} 
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

package/test/cases/components/form/context-error.mjs

@@ -0,0 +1,48 @@
+import * as chai from "chai";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+let ContextError;
+
+describe("ContextError", function () {
+	before(function (done) {
+		initJSDOM()
+			.then(() => {
+				return import("../../../../source/components/form/context-error.mjs");
+			})
+			.then((m) => {
+				ContextError = m["ContextError"];
+				done();
+			})
+			.catch((e) => done(e));
+	});
+
+	afterEach(() => {
+		let mocks = document.getElementById("mocks");
+		mocks.innerHTML = "";
+	});
+
+	it("should default to visible content overflow", function (done) {
+		let mocks = document.getElementById("mocks");
+		const error = document.createElement("monster-context-error");
+		error.innerHTML = "<p>Error message</p>";
+		mocks.appendChild(error);
+
+		setTimeout(() => {
+			try {
+				expect(error).to.be.instanceof(ContextError);
+				const content = error.shadowRoot.querySelector('[part="content"]');
+				expect(error.getOption("popper.contentOverflow")).to.equal("visible");
+				expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
+					"visible",
+				);
+				done();
+			} catch (e) {
+				done(e);
+			}
+		}, 0);
+	});
+});

package/test/cases/components/form/context-help.mjs

@@ -0,0 +1,91 @@
+import { getGlobal } from "../../../../source/types/global.mjs";
+import * as chai from "chai";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+const global = getGlobal();
+
+let ContextHelp;
+let resolveClippingBoundaryElement;
+
+describe("ContextHelp", function () {
+	before(function (done) {
+		initJSDOM().then(() => {
+			import("element-internals-polyfill").catch((e) => done(e));
+
+			if (!global.ResizeObserver) {
+				global.ResizeObserver = ResizeObserverMock;
+			}
+
+			Promise.all([
+				import("../../../../source/components/form/context-help.mjs"),
+				import("../../../../source/components/form/util/floating-ui.mjs"),
+			])
+				.then(([contextHelpModule, floatingUiModule]) => {
+					ContextHelp = contextHelpModule.ContextHelp;
+					resolveClippingBoundaryElement =
+						floatingUiModule.resolveClippingBoundaryElement;
+					done();
+				})
+				.catch((e) => done(e));
+		});
+	});
+
+	afterEach(() => {
+		let mocks = document.getElementById("mocks");
+		mocks.innerHTML = "";
+	});
+
+	it("should resolve the nearest clipping parent across the shadow boundary", function (done) {
+		let mocks = document.getElementById("mocks");
+		const outer = document.createElement("div");
+		const wrapper = document.createElement("div");
+		const help = document.createElement("monster-context-help");
+
+		outer.style.overflow = "visible";
+		wrapper.style.overflow = "hidden";
+		wrapper.appendChild(help);
+		outer.appendChild(wrapper);
+		mocks.appendChild(outer);
+		help.innerHTML = "<p>Inline help</p>";
+
+		setTimeout(() => {
+			try {
+				expect(help).to.be.instanceof(ContextHelp);
+
+				const popper = help.shadowRoot.querySelector(
+					'[data-monster-role="popper"]',
+				);
+				expect(popper).to.exist;
+				expect(resolveClippingBoundaryElement(help, popper)).to.equal(wrapper);
+				done();
+			} catch (e) {
+				done(e);
+			}
+		}, 0);
+	});
+
+	it("should default to visible content overflow", function (done) {
+		let mocks = document.getElementById("mocks");
+		const help = document.createElement("monster-context-help");
+		help.innerHTML = "<p>Inline help</p>";
+		mocks.appendChild(help);
+
+		setTimeout(() => {
+			try {
+				const content = help.shadowRoot.querySelector('[part="content"]');
+				expect(help.getOption("popper.contentOverflow")).to.equal("visible");
+				expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
+					"visible",
+				);
+				done();
+			} catch (e) {
+				done(e);
+			}
+		}, 0);
+	});
+});

package/test/cases/components/form/popper-button.mjs

@@ -62,6 +62,37 @@ describe("PopperButton", function () {
 		}, 0);
 	});
 
+	it("should apply visible content overflow mode to the rendered content wrapper", function (done) {
+		let mocks = document.getElementById("mocks");
+		const button = document.createElement("monster-popper-button");
+		mocks.appendChild(button);
+
+		setTimeout(() => {
+			try {
+				const content = button.shadowRoot.querySelector('[part="content"]');
+				expect(content).to.exist;
+
+				button.setOption("popper.contentOverflow", "visible");
+
+				setTimeout(() => {
+					try {
+						expect(
+							button.getOption("popper.contentOverflow"),
+						).to.equal("visible");
+						expect(
+							content.getAttribute("data-monster-overflow-mode"),
+						).to.equal("visible");
+						done();
+					} catch (e) {
+						done(e);
+					}
+				}, 0);
+			} catch (e) {
+				done(e);
+			}
+		}, 0);
+	});
+
 	it("should apply content overflow mode from the HTML attribute", function (done) {
 		let mocks = document.getElementById("mocks");
 		mocks.innerHTML = `
@@ -87,6 +118,31 @@ describe("PopperButton", function () {
 		}, 0);
 	});
 
+	it("should apply visible content overflow mode from the HTML attribute", function (done) {
+		let mocks = document.getElementById("mocks");
+		mocks.innerHTML = `
+            <monster-popper-button
+                data-monster-option-popper-content-overflow="visible"
+            ></monster-popper-button>
+        `;
+
+		setTimeout(() => {
+			try {
+				const button = mocks.querySelector("monster-popper-button");
+				const content = button.shadowRoot.querySelector('[part="content"]');
+				expect(button.getOption("popper.contentOverflow")).to.equal(
+					"visible",
+				);
+				expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
+					"visible",
+				);
+				done();
+			} catch (e) {
+				done(e);
+			}
+		}, 0);
+	});
+
 	it("should use absolute positioning by default", function (done) {
 		let mocks = document.getElementById("mocks");
 		const button = document.createElement("monster-popper-button");