@schukai/monster 4.136.2 → 4.136.3

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.136.2"}
+{"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.136.3"}

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

@@ -13,7 +13,10 @@
  */
 
 import { assembleMethodSymbol } from "../../dom/customelement.mjs";
-import { resolveClippingBoundaryElement } from "./util/floating-ui.mjs";
+import {
+	resolveClippingBoundaryElement,
+	resolveParentPopperContentBoundary,
+} from "./util/floating-ui.mjs";
 import { Popper } from "../layout/popper.mjs";
 
 export { ContextBase };
@@ -85,17 +88,40 @@ class ContextBase extends Popper {
 	 */
 	resolvePopperOptions() {
 		const options = super.resolvePopperOptions();
-		const controlElement =
-			this.shadowRoot?.querySelector('[data-monster-role="control"]') || null;
-		const popperElement =
-			this.shadowRoot?.querySelector('[data-monster-role="popper"]') || null;
+		const { controlElement, popperElement } = getPopperElements.call(this);
+		const parentPopperBoundary = resolveParentPopperContentBoundary(
+			controlElement,
+			popperElement,
+		);
 
-		if (resolveClippingBoundaryElement(controlElement, popperElement)) {
+		if (
+			resolveClippingBoundaryElement(controlElement, popperElement) ||
+			parentPopperBoundary
+		) {
 			options.strategy = "fixed";
 		}
 
 		return options;
 	}
+
+	/**
+	 * Nested context poppers inside another popper need bounded height.
+	 *
+	 * @return {string}
+	 */
+	resolveContentOverflowMode() {
+		const configuredMode = super.resolveContentOverflowMode();
+		if (configuredMode !== "visible") {
+			return configuredMode;
+		}
+
+		const { controlElement, popperElement } = getPopperElements.call(this);
+		if (resolveParentPopperContentBoundary(controlElement, popperElement)) {
+			return "both";
+		}
+
+		return configuredMode;
+	}
 }
 
 /**
@@ -126,6 +152,15 @@ function initContentObserver() {
 	});
 }
 
+function getPopperElements() {
+	return {
+		controlElement:
+			this.shadowRoot?.querySelector('[data-monster-role="control"]') || null,
+		popperElement:
+			this.shadowRoot?.querySelector('[data-monster-role="popper"]') || null,
+	};
+}
+
 /**
  * @private
  * @return {void}

package/source/components/form/style/context-error.pcss

@@ -38,8 +38,6 @@ div[data-monster-role="popper"] {
     & > [part="content"] {
         display: block;
         max-width: 100%;
-        max-height: none;
-        overflow: visible;
         white-space: normal;
         text-wrap: pretty;
         word-break: break-word;

package/source/components/form/style/context-help.pcss

@@ -31,8 +31,6 @@ div[data-monster-role="popper"] {
     & > [part="content"] {
         display: block;
         max-width: 100%;
-        max-height: none;
-        overflow: visible;
         white-space: normal;
         text-wrap: pretty;
         word-break: break-word;

package/source/components/form/stylesheet/context-error.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 { ContextErrorStyleSheet };
+export {ContextErrorStyleSheet}
 
 /**
  * @private
@@ -22,17 +22,10 @@ export { ContextErrorStyleSheet };
 const ContextErrorStyleSheet = new CSSStyleSheet();
 
 try {
-	ContextErrorStyleSheet.insertRule(
-		`
+  ContextErrorStyleSheet.insertRule(`
 @layer contexterror { 
-[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));overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:none;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]{line-height:1em;margin:0;padding:0;position:relative}[data-monster-role=control] [data-monster-role=button]{display:inline-block;position:relative}:is([data-monster-role=control] [data-monster-role=button]) svg{cursor:pointer}:is([data-monster-role=control] [data-monster-role=button]) svg.hidden{cursor:default;pointer-events:none;visibility:hidden}:host{display:inline-block;margin:0 .2em;padding:0;position:relative;vertical-align:bottom}div[data-monster-role=popper]{max-width:min(var(--monster-popper-max-width,calc(100vw - 2rem)),32rem)}div[data-monster-role=popper]>[part=content]{display:block;max-height:none;max-width:100%;overflow:visible;overflow-wrap:anywhere;text-wrap:pretty;white-space:normal;word-break:break-word}:host([disabled]) [data-monster-role=button] svg{cursor:default;pointer-events:none} 
-}`,
-		0,
-	);
+[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));overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:none;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]{line-height:1em;margin:0;padding:0;position:relative}[data-monster-role=control] [data-monster-role=button]{display:inline-block;position:relative}:is([data-monster-role=control] [data-monster-role=button]) svg{cursor:pointer}:is([data-monster-role=control] [data-monster-role=button]) svg.hidden{cursor:default;pointer-events:none;visibility:hidden}:host{display:inline-block;margin:0 .2em;padding:0;position:relative;vertical-align:bottom}div[data-monster-role=popper]{max-width:min(var(--monster-popper-max-width,calc(100vw - 2rem)),32rem)}div[data-monster-role=popper]>[part=content]{display:block;max-width:100%;overflow-wrap:anywhere;text-wrap:pretty;white-space:normal;word-break:break-word}:host([disabled]) [data-monster-role=button] svg{cursor:default;pointer-events:none} 
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

package/source/components/form/stylesheet/context-help.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 { ContextHelpStyleSheet };
+export {ContextHelpStyleSheet}
 
 /**
  * @private
@@ -22,17 +22,10 @@ export { ContextHelpStyleSheet };
 const ContextHelpStyleSheet = new CSSStyleSheet();
 
 try {
-	ContextHelpStyleSheet.insertRule(
-		`
+  ContextHelpStyleSheet.insertRule(`
 @layer contexthelp { 
-[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));overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:none;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]{line-height:1em;margin:0;padding:0;position:relative}[data-monster-role=control] [data-monster-role=button]{display:inline-block;position:relative}:is([data-monster-role=control] [data-monster-role=button]) svg{cursor:pointer}:is([data-monster-role=control] [data-monster-role=button]) svg.hidden{cursor:default;pointer-events:none;visibility:hidden}div[data-monster-role=popper]{max-width:min(var(--monster-popper-max-width,calc(100vw - 2rem)),32rem);z-index:var(--monster-z-index-tooltip-overlay)}div[data-monster-role=popper]>[part=content]{display:block;max-height:none;max-width:100%;overflow:visible;overflow-wrap:anywhere;text-wrap:pretty;white-space:normal;word-break:break-word}:host{display:inline-block;margin:0 .2em;padding:0;position:relative;vertical-align:bottom}:host([disabled]) [data-monster-role=button] svg{cursor:default;pointer-events:none} 
-}`,
-		0,
-	);
+[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));overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:none;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]{line-height:1em;margin:0;padding:0;position:relative}[data-monster-role=control] [data-monster-role=button]{display:inline-block;position:relative}:is([data-monster-role=control] [data-monster-role=button]) svg{cursor:pointer}:is([data-monster-role=control] [data-monster-role=button]) svg.hidden{cursor:default;pointer-events:none;visibility:hidden}div[data-monster-role=popper]{max-width:min(var(--monster-popper-max-width,calc(100vw - 2rem)),32rem);z-index:var(--monster-z-index-tooltip-overlay)}div[data-monster-role=popper]>[part=content]{display:block;max-width:100%;overflow-wrap:anywhere;text-wrap:pretty;white-space:normal;word-break:break-word}:host{display:inline-block;margin:0 .2em;padding:0;position:relative;vertical-align:bottom}:host([disabled]) [data-monster-role=button] svg{cursor:default;pointer-events:none} 
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

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

@@ -30,6 +30,7 @@ export {
 	applyAdaptiveFloatingElementSize,
 	closePositionedPopper,
 	resolveClippingBoundaryElement,
+	resolveParentPopperContentBoundary,
 	isPositionedPopperOpen,
 	openPositionedPopper,
 	positionPopper,
@@ -144,10 +145,12 @@ function normalizePopperConfig(options, controlElement, popperElement) {
 		options,
 	);
 
-	config.boundaryElement = resolveClippingBoundaryElement(
-		controlElement,
-		popperElement,
-	);
+	if (!(config.boundaryElement instanceof HTMLElement)) {
+		config.boundaryElement = resolveClippingBoundaryElement(
+			controlElement,
+			popperElement,
+		);
+	}
 	config.detectOverflowOptions = buildDetectOverflowOptions(
 		config.boundaryElement,
 	);
@@ -283,6 +286,10 @@ function applyAdaptiveFloatingElementSize(
 	floatingElement,
 	{ availableWidth, availableHeight },
 ) {
+	const contentElement = getFloatingContentElement(floatingElement);
+	const usesVisibleOverflow =
+		contentElement instanceof HTMLElement &&
+		contentElement.dataset.monsterOverflowMode === "visible";
 	const maxWidth = clampAvailableDimension(
 		availableWidth,
 		readMaxDimension(floatingElement, "maxWidth"),
@@ -301,7 +308,7 @@ function applyAdaptiveFloatingElementSize(
 		nextStyle.maxWidth = "";
 	}
 
-	if (Number.isFinite(maxHeight) && maxHeight > 0) {
+	if (!usesVisibleOverflow && Number.isFinite(maxHeight) && maxHeight > 0) {
 		nextStyle.maxHeight = `${maxHeight}px`;
 	} else {
 		nextStyle.maxHeight = "";
@@ -332,14 +339,19 @@ function applyAdaptiveFloatingContentSize(floatingElement, maxHeight) {
 		Number.isFinite(maxHeight) ? maxHeight - reservedHeight : null,
 		readMaxDimension(contentElement, "maxHeight"),
 	);
-
-	if (Number.isFinite(contentMaxHeight) && contentMaxHeight > 0) {
-		contentElement.style.maxHeight = `${contentMaxHeight}px`;
+	const minimumReadableHeight = getMinimumReadableContentHeight(contentElement);
+	const nextContentMaxHeight =
+		Number.isFinite(contentMaxHeight) && contentMaxHeight > 0
+			? Math.max(contentMaxHeight, minimumReadableHeight)
+			: contentMaxHeight;
+
+	if (Number.isFinite(nextContentMaxHeight) && nextContentMaxHeight > 0) {
+		contentElement.style.maxHeight = `${nextContentMaxHeight}px`;
 	} else {
 		contentElement.style.maxHeight = "";
 	}
 
-	syncNestedScrollContainerHeight(contentElement, contentMaxHeight);
+	syncNestedScrollContainerHeight(contentElement, nextContentMaxHeight);
 }
 
 function getFloatingContentElement(floatingElement) {
@@ -391,6 +403,63 @@ function readBoxDimension(rawValue) {
 	return Number.isFinite(value) ? value : 0;
 }
 
+function getMinimumReadableContentHeight(contentElement) {
+	if (!(contentElement instanceof HTMLElement)) {
+		return 0;
+	}
+
+	const measurementTarget =
+		getPrimaryReadableContentElement(contentElement) || contentElement;
+	const style = getComputedStyle(measurementTarget);
+	const lineHeight = readLineHeight(style);
+	const paddingHeight =
+		readBoxDimension(getComputedStyle(contentElement).paddingTop) +
+		readBoxDimension(getComputedStyle(contentElement).paddingBottom);
+
+	return Math.max(0, lineHeight + paddingHeight);
+}
+
+function readLineHeight(style) {
+	if (!style) {
+		return 0;
+	}
+
+	const lineHeight = Number.parseFloat(style.lineHeight);
+	if (Number.isFinite(lineHeight) && lineHeight > 0) {
+		return lineHeight;
+	}
+
+	const fontSize = Number.parseFloat(style.fontSize);
+	if (Number.isFinite(fontSize) && fontSize > 0) {
+		return fontSize * 1.4;
+	}
+
+	return 0;
+}
+
+function getPrimaryReadableContentElement(contentElement) {
+	if (!(contentElement instanceof HTMLElement)) {
+		return null;
+	}
+
+	const slotElement = contentElement.querySelector("slot");
+	if (slotElement?.assignedElements instanceof Function) {
+		for (const element of slotElement.assignedElements({ flatten: true })) {
+			if (element instanceof HTMLElement) {
+				return element;
+			}
+		}
+	}
+
+	for (const child of contentElement.children) {
+		if (child instanceof HTMLElement) {
+			return child;
+		}
+	}
+
+	return null;
+}
+
 function syncNestedScrollContainerHeight(contentElement, contentMaxHeight) {
 	const nestedScrollableElement = getNestedScrollableElement(contentElement);
 	if (!(nestedScrollableElement instanceof HTMLElement)) {
@@ -539,6 +608,17 @@ function resolveClippingBoundaryElement(...elements) {
 	return null;
 }
 
+function resolveParentPopperContentBoundary(...elements) {
+	for (const element of elements) {
+		const clippingBoundary = findNearestIgnoredClippingContainer(element);
+		if (clippingBoundary instanceof HTMLElement) {
+			return clippingBoundary;
+		}
+	}
+
+	return null;
+}
+
 function findNearestClippingContainer(element) {
 	let current = getComposedParent(element);
 
@@ -557,11 +637,46 @@ function findNearestClippingContainer(element) {
 	return null;
 }
 
+function findNearestIgnoredClippingContainer(element) {
+	let current = getComposedParent(element);
+
+	while (current) {
+		if (
+			current instanceof HTMLElement &&
+			shouldIgnoreClippingContainer(current) &&
+			shouldEscapeParentPopperContentWrapper(current)
+		) {
+			return current;
+		}
+
+		current = getComposedParent(current);
+	}
+
+	return null;
+}
+
+function shouldEscapeParentPopperContentWrapper(element) {
+	if (!(element instanceof HTMLElement) || !isPopperContentWrapper(element)) {
+		return false;
+	}
+
+	const overflowMode = element.getAttribute("data-monster-overflow-mode");
+	if (overflowMode === "both") {
+		return true;
+	}
+
+	return isClippingContainer(getComputedStyle(element));
+}
+
 function getComposedParent(node) {
 	if (!node) {
 		return null;
 	}
 
+	if (node instanceof Element && node.assignedSlot) {
+		return node.assignedSlot;
+	}
+
 	if (node instanceof ShadowRoot) {
 		return node.host || null;
 	}

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

@@ -11,6 +11,7 @@ const global = getGlobal();
 
 let ContextHelp;
 let resolveClippingBoundaryElement;
+let resolveParentPopperContentBoundary;
 
 describe("ContextHelp", function () {
 	before(function (done) {
@@ -29,6 +30,8 @@ describe("ContextHelp", function () {
 					ContextHelp = contextHelpModule.ContextHelp;
 					resolveClippingBoundaryElement =
 						floatingUiModule.resolveClippingBoundaryElement;
+					resolveParentPopperContentBoundary =
+						floatingUiModule.resolveParentPopperContentBoundary;
 					done();
 				})
 				.catch((e) => done(e));
@@ -114,4 +117,48 @@ describe("ContextHelp", function () {
 			}
 		}, 0);
 	});
+
+	it("should switch to fixed positioning inside a parent popper content wrapper with overflow both", function (done) {
+		let mocks = document.getElementById("mocks");
+		const host = document.createElement("div");
+		const help = document.createElement("monster-context-help");
+
+		mocks.appendChild(host);
+		const shadowRoot = host.attachShadow({ mode: "open" });
+		shadowRoot.innerHTML = `
+			<div data-monster-role="popper">
+				<div part="content"
+					 data-monster-overflow-mode="both">
+				</div>
+			</div>
+		`;
+		shadowRoot.querySelector('[part="content"]').appendChild(help);
+		help.innerHTML = "<p>Nested help</p>";
+
+		setTimeout(() => {
+			try {
+				const control = help.shadowRoot.querySelector(
+					'[data-monster-role="control"]',
+				);
+				const popper = help.shadowRoot.querySelector(
+					'[data-monster-role="popper"]',
+				);
+
+				expect(
+					resolveParentPopperContentBoundary(control, popper),
+				).to.equal(shadowRoot.querySelector('[part="content"]'));
+
+				const content = help.shadowRoot.querySelector('[part="content"]');
+				expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
+					"both",
+				);
+
+				help.showDialog();
+				expect(popper.style.position).to.equal("fixed");
+				done();
+			} catch (e) {
+				done(e);
+			}
+		}, 0);
+	});
 });

package/test/cases/components/form/floating-ui.mjs

@@ -135,4 +135,76 @@ describe("form floating-ui boundary resolution", function () {
 		expect(content.style.maxWidth).to.equal("");
 		expect(content.style.maxHeight).to.equal("100px");
 	});
+
+	it("should not clamp the floating element height when content overflow is visible", function () {
+		const mocks = document.getElementById("mocks");
+		const popper = document.createElement("div");
+		const content = document.createElement("div");
+
+		popper.style.maxHeight = "300px";
+		content.style.maxHeight = "240px";
+		content.setAttribute("part", "content");
+		content.setAttribute("data-monster-overflow-mode", "visible");
+
+		popper.appendChild(content);
+		mocks.appendChild(popper);
+
+		applyAdaptiveFloatingElementSize(popper, {
+			availableWidth: 220,
+			availableHeight: 160,
+		});
+
+		expect(popper.style.maxHeight).to.equal("");
+		expect(content.style.maxHeight).to.equal("240px");
+	});
+
+	it("should keep at least one readable line for scrollable content", function () {
+		const mocks = document.getElementById("mocks");
+		const popper = document.createElement("div");
+		const content = document.createElement("div");
+
+		popper.style.maxHeight = "300px";
+		content.setAttribute("part", "content");
+		content.textContent = "A long help text that still needs one readable line.";
+		content.style.fontSize = "16px";
+		content.style.lineHeight = "24px";
+		popper.appendChild(content);
+		mocks.appendChild(popper);
+
+		applyAdaptiveFloatingElementSize(popper, {
+			availableWidth: 220,
+			availableHeight: 10,
+		});
+
+		expect(content.style.maxHeight).to.equal("24px");
+	});
+
+	it("should use the first slotted element line height for the minimum readable size", function () {
+		const mocks = document.getElementById("mocks");
+		const popperHost = document.createElement("div");
+		const slottedParagraph = document.createElement("p");
+		slottedParagraph.textContent = "Readable help line";
+		slottedParagraph.style.lineHeight = "26px";
+
+		mocks.appendChild(popperHost);
+		const shadowRoot = popperHost.attachShadow({ mode: "open" });
+		shadowRoot.innerHTML = `
+			<div data-monster-role="popper">
+				<div part="content">
+					<slot></slot>
+				</div>
+			</div>
+		`;
+
+		const popper = shadowRoot.querySelector('[data-monster-role="popper"]');
+		const content = shadowRoot.querySelector('[part="content"]');
+		popperHost.appendChild(slottedParagraph);
+
+		applyAdaptiveFloatingElementSize(popper, {
+			availableWidth: 220,
+			availableHeight: 10,
+		});
+
+		expect(content.style.maxHeight).to.equal("26px");
+	});
 });