@schukai/monster 4.136.2 → 4.136.4

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.4"}

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/select.mjs

@@ -1765,55 +1765,20 @@ function getTranslations() {
  */
 function lookupSelection() {
 	const self = this;
+	const IntersectionObserverImplementation =
+		getGlobal().IntersectionObserver;
 
-	const observer = new IntersectionObserver(
+	if (!(IntersectionObserverImplementation instanceof Function)) {
+		runSelectionLookupWhenVisible(self);
+		return;
+	}
+
+	const observer = new IntersectionObserverImplementation(
 		(entries, obs) => {
 			for (const entry of entries) {
 				if (entry.isIntersecting) {
 					obs.disconnect();
-
-					setTimeout(() => {
-						const selection = self.getOption("selection");
-						if (
-							selection.length === 0 ||
-							self[isLoadingSymbol] ||
-							self[lazyLoadDoneSymbol]
-						) {
-							return;
-						}
-
-						let url = self.getOption("lookup.url") || self.getOption("url");
-						self[cleanupOptionsListSymbol] = false;
-
-						if (self.getOption("lookup.grouping") === true) {
-							const values = selection
-								.map((s) => s?.["value"])
-								.filter(
-									(value) => isEmptyLookupValue.call(self, value) === false,
-								);
-							if (values.length === 0) {
-								return;
-							}
-							filterFromRemoteByValue
-								.call(self, url, { filter: values.join(",") })
-								.catch((e) => {
-									addErrorAttribute(self, e);
-								});
-							return;
-						}
-
-						for (const s of selection) {
-							const value = s?.["value"];
-							if (isEmptyLookupValue.call(self, value)) {
-								continue;
-							}
-							filterFromRemoteByValue
-								.call(self, url, { filter: value })
-								.catch((e) => {
-									addErrorAttribute(self, e);
-								});
-						}
-					}, 100);
+					runSelectionLookupWhenVisible(self);
 				}
 			}
 		},
@@ -1823,6 +1788,49 @@ function lookupSelection() {
 	observer.observe(self);
 }
 
+function runSelectionLookupWhenVisible(self) {
+	setTimeout(() => {
+		const selection = self.getOption("selection");
+		if (
+			selection.length === 0 ||
+			self[isLoadingSymbol] ||
+			self[lazyLoadDoneSymbol]
+		) {
+			return;
+		}
+
+		let url = self.getOption("lookup.url") || self.getOption("url");
+		self[cleanupOptionsListSymbol] = false;
+
+		if (self.getOption("lookup.grouping") === true) {
+			const values = selection
+				.map((s) => s?.["value"])
+				.filter((value) => isEmptyLookupValue.call(self, value) === false);
+			if (values.length === 0) {
+				return;
+			}
+			filterFromRemoteByValue
+				.call(self, url, { filter: values.join(",") })
+				.catch((e) => {
+					addErrorAttribute(self, e);
+				});
+			return;
+		}
+
+		for (const s of selection) {
+			const value = s?.["value"];
+			if (isEmptyLookupValue.call(self, value)) {
+				continue;
+			}
+			filterFromRemoteByValue
+				.call(self, url, { filter: value })
+				.catch((e) => {
+					addErrorAttribute(self, e);
+				});
+		}
+	}, 100);
+}
+
 /**
  * @private
  * @param {*} value

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)) {
@@ -398,8 +467,12 @@ function syncNestedScrollContainerHeight(contentElement, contentMaxHeight) {
 	}
 
 	if (Number.isFinite(contentMaxHeight) && contentMaxHeight > 0) {
-		nestedScrollableElement.style.height = `${contentMaxHeight}px`;
-		nestedScrollableElement.style.maxHeight = `${contentMaxHeight}px`;
+		const nextNestedHeight = resolveNestedScrollContainerHeight(
+			nestedScrollableElement,
+			contentMaxHeight,
+		);
+		nestedScrollableElement.style.height = `${nextNestedHeight}px`;
+		nestedScrollableElement.style.maxHeight = `${nextNestedHeight}px`;
 		return;
 	}
 
@@ -407,6 +480,41 @@ function syncNestedScrollContainerHeight(contentElement, contentMaxHeight) {
 	nestedScrollableElement.style.maxHeight = "";
 }
 
+function resolveNestedScrollContainerHeight(
+	nestedScrollableElement,
+	contentMaxHeight,
+) {
+	const declaredHeight = readDeclaredDimension(nestedScrollableElement, "height");
+	const declaredMaxHeight = readDeclaredDimension(
+		nestedScrollableElement,
+		"maxHeight",
+	);
+	const scrollHeight = nestedScrollableElement.scrollHeight;
+	const preferredHeightCandidates = [
+		declaredHeight,
+		declaredMaxHeight,
+		scrollHeight,
+	];
+	const preferredHeight = preferredHeightCandidates.find((value) => {
+		return Number.isFinite(value) && value > 0;
+	});
+
+	if (Number.isFinite(preferredHeight) && preferredHeight > 0) {
+		return Math.min(contentMaxHeight, preferredHeight);
+	}
+
+	return contentMaxHeight;
+}
+
+function readDeclaredDimension(element, property) {
+	if (!(element instanceof HTMLElement)) {
+		return NaN;
+	}
+
+	const value = Number.parseFloat(element.style?.[property] || "");
+	return Number.isFinite(value) ? value : NaN;
+}
+
 function syncPreferredFloatingWidth(floatingElement, maxWidth) {
 	const preferredWidth = Number.parseFloat(
 		floatingElement.dataset.monsterPreferredWidth || "",
@@ -539,6 +647,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 +676,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,106 @@ 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");
+	});
+
+	it("should respect a smaller nested scroll container height", function () {
+		const mocks = document.getElementById("mocks");
+		const popper = document.createElement("div");
+		const content = document.createElement("div");
+		const options = document.createElement("div");
+
+		content.setAttribute("part", "content");
+		content.style.overflowY = "hidden";
+		options.style.overflowY = "auto";
+		options.style.height = "72px";
+		options.style.maxHeight = "72px";
+		Object.defineProperty(options, "scrollHeight", {
+			configurable: true,
+			value: 72,
+		});
+
+		content.appendChild(options);
+		popper.appendChild(content);
+		mocks.appendChild(popper);
+
+		applyAdaptiveFloatingElementSize(popper, {
+			availableWidth: 220,
+			availableHeight: 180,
+		});
+
+		expect(content.style.maxHeight).to.equal("180px");
+		expect(options.style.height).to.equal("72px");
+		expect(options.style.maxHeight).to.equal("72px");
+	});
 });

package/test/cases/components/form/message-state-button.mjs

@@ -261,44 +261,39 @@ describe("MessageStateButton", function () {
 			}, 0);
 		});
 
-		it("should resolve nested select message content to horizontal clipping only", function (done) {
+		it("should resolve nested select message content to horizontal clipping only", async function () {
 			let mocks = document.getElementById("mocks");
 			const button = document.createElement("monster-message-state-button");
 			button.innerHTML = "Save";
 			mocks.appendChild(button);
 
-			setTimeout(() => {
-				try {
-					const wrapper = document.createElement("div");
-					wrapper.appendChild(document.createElement("monster-select"));
-					button.setMessage(wrapper);
-					button.showMessage();
+			const wrapper = document.createElement("div");
+			wrapper.appendChild(document.createElement("monster-select"));
+			button.setMessage(wrapper);
+			button.showMessage();
+
+			await waitForCondition(() => {
+				const content = button.shadowRoot?.querySelector('[part="content"]');
+				return (
+					content?.getAttribute("data-monster-overflow-mode") === "horizontal"
+				);
+			});
 
-					setTimeout(() => {
-						try {
-							const content = button.shadowRoot.querySelector('[part="content"]');
-							const message = button.shadowRoot.querySelector(
-								'[data-monster-role="message"]',
-							);
-							expect(content).to.exist;
-							expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
-								"horizontal",
-							);
-							expect(
-								content.getAttribute("data-monster-message-layout"),
-							).to.equal("overlay");
-							expect(
-								message.getAttribute("data-monster-message-layout"),
-							).to.equal("overlay");
-							done();
-						} catch (e) {
-							done(e);
-						}
-					}, 0);
-				} catch (e) {
-					done(e);
-				}
-			}, 0);
+			const content = button.shadowRoot.querySelector('[part="content"]');
+			const message = button.shadowRoot.querySelector(
+				'[data-monster-role="message"]',
+			);
+
+			expect(content).to.exist;
+			expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
+				"horizontal",
+			);
+			expect(content.getAttribute("data-monster-message-layout")).to.equal(
+				"overlay",
+			);
+			expect(message.getAttribute("data-monster-message-layout")).to.equal(
+				"overlay",
+			);
 		});
 
 		it("should resolve wide plain content to the wide layout", function (done) {
@@ -489,3 +484,30 @@ describe("MessageStateButton", function () {
 		});
 	});
 });
+
+function waitForCondition(check, { timeout = 4000, interval = 25 } = {}) {
+	return new Promise((resolve, reject) => {
+		const start = Date.now();
+
+		const poll = () => {
+			try {
+				if (check()) {
+					resolve();
+					return;
+				}
+			} catch (error) {
+				reject(error);
+				return;
+			}
+
+			if (Date.now() - start >= timeout) {
+				reject(new Error("Timed out while waiting for test condition."));
+				return;
+			}
+
+			setTimeout(poll, interval);
+		};
+
+		poll();
+	});
+}

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

@@ -549,6 +549,46 @@ describe('Select', function () {
             }, 50);
         });
 
+        it('should not throw when IntersectionObserver is unavailable', function (done) {
+            this.timeout(2000);
+
+            let mocks = document.getElementById('mocks');
+            const savedIntersectionObserver = global.IntersectionObserver;
+            global.IntersectionObserver = undefined;
+            window.IntersectionObserver = undefined;
+            const failures = [];
+            const onError = (event) => {
+                failures.push(event?.error || event);
+            };
+            window.addEventListener('error', onError);
+
+            const select = document.createElement('monster-select');
+            select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+            select.setOption('filter.mode', 'remote');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('mapping.total', 'pagination.total');
+            select.setOption('mapping.currentPage', 'pagination.page');
+            select.setOption('mapping.objectsPerPage', 'pagination.perPage');
+            select.setOption('selection', [{value: 'alpha'}]);
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                try {
+                    expect(failures).to.have.length(0);
+                } catch (e) {
+                    return done(e);
+                } finally {
+                    window.removeEventListener('error', onError);
+                    global.IntersectionObserver = savedIntersectionObserver;
+                    window.IntersectionObserver = savedIntersectionObserver;
+                }
+
+                done();
+            }, 250);
+        });
+
     });
 
 

package/test/util/intersection-mock.mjs

@@ -14,6 +14,7 @@ export function setupIntersectionObserverMock(
     } = {}) {
 
     const savedImplementation = window.IntersectionObserver;
+    const savedGlobalImplementation = global.IntersectionObserver;
 
     let lastObject;
 
@@ -61,9 +62,10 @@ export function setupIntersectionObserverMock(
     return {
         restore: function () {
             window.IntersectionObserver = savedImplementation;
+            global.IntersectionObserver = savedGlobalImplementation;
         },
         getInstance: function () {
             return lastObject;
         }
     }
-}
+}