@schukai/monster 4.129.9 → 4.130.0

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

package/source/components/content/image-editor.mjs

@@ -274,6 +274,7 @@ const rotateResetButtonElementSymbol = Symbol("rotateResetButtonElement");
  * An Image Editor Component
  *
  * @fragments /fragments/components/content/image-editor/
+ * @example /examples/components/content/image-editor-basic Basic editor workflow
  *
  * @since 4.68.0
  * @copyright Volker Schukai

package/source/components/datatable/change-button.mjs

@@ -187,7 +187,7 @@ function initControlReferences() {
 	const selector2 = this.getOption("overlay.selector");
 
 	if (isString(selector2)) {
-		const element = findElementWithSelectorUpwards(this, selector);
+		const element = findElementWithSelectorUpwards(this, selector2);
 		if (element === null) {
 			throw new Error("the selector must match exactly one element");
 		}

package/source/components/datatable/pagination.mjs

@@ -102,7 +102,8 @@ const compactNextIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" heig
  *
  * @fragments /fragments/components/datatable/pagination
  *
- * @example /examples/components/datatable/pagination-simple Pagination
+ * @example /examples/components/datatable/pagination-simple Datasource pagination
+ * @example /examples/components/datatable/pagination-programmatic Programmatic pagination state
  *
  * @copyright Volker Schukai
  * @summary The Pagination component is used to show the current page and the total number of pages.

package/source/components/datatable/save-button.mjs

@@ -84,6 +84,7 @@ const internalDisableVersionSymbol = Symbol("internalDisableVersion");
  * @fragments /fragments/components/datatable/save-button
  *
  * @example /examples/components/datatable/save-button-simple Simple example
+ * @example /examples/components/datatable/save-button-workflow Draft changes workflow
  *
  * @issue https://localhost.alvine.dev:8440/development/issues/closed/274.html
  *

package/source/components/files/file-manager.mjs

@@ -137,6 +137,7 @@ const saveAllButtonSymbol = Symbol("saveAllButton");
  * A file manager for navigating and editing files.
  *
  * @fragments /fragments/components/files/file-manager/
+ * @example /examples/components/files/file-manager-basic Basic file manager workflow
  *
  * @since 4.44.0
  * @summary A file manager control that builds a tree navigation from an API and opens files in tabs.

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

@@ -57,10 +57,11 @@ const containerElementSymbol = Symbol("containerElement");
  * @fragments /fragments/components/form/api-button/
  *
  * @example /examples/components/form/api-button-simple API Button
+ * @example /examples/components/form/api-button-workflow API workflow with events
  *
  * @since 3.32.0
  * @copyright Volker Schukai
- * @summary A api button control
+ * @summary An API button that loads actions dynamically and executes follow-up requests
  * @fires monster-button-set
  * @fires monster-api-button-click
  * @fires monster-api-button-successful

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

@@ -60,6 +60,7 @@ const iconElementSymbol = Symbol("iconElement");
  * @fragments /fragments/components/form/context-error
  *
  * @example /examples/components/form/context-error-simple
+ * @example /examples/components/form/context-error-live-validation
  *
  * @since 3.55.0
  * @copyright Volker Schukai

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

@@ -25,6 +25,7 @@ export { ContextHelp };
  * @fragments /fragments/components/form/context-help
  *
  * @example /examples/components/form/context-help-simple
+ * @example /examples/components/form/context-help-inline-guidance
  *
  * @since 3.29.0
  * @copyright Volker Schukai

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

@@ -53,6 +53,7 @@ const passwordWiredSymbol = Symbol("passwordWired");
  * @fragments /fragments/components/form/credential-button/
  *
  * @example /examples/components/form/credential-button-simple
+ * @example /examples/components/form/credential-button-retry
  *
  * @since 3.91.0
  * @copyright Volker Schukai

package/source/components/form/field-set.mjs

@@ -75,7 +75,8 @@ const extendedSwitchElementSymbol = Symbol("extendedSwitchElement");
  *
  * @fragments /fragments/components/form/field-set/
  *
- * @example /examples/components/form/field-set-simple
+ * @example /examples/components/form/field-set-simple Shipping field set
+ * @example /examples/components/form/field-set-preferences Compact settings field set
  *
  * @since 3.65.0
  * @copyright Volker Schukai

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

@@ -160,6 +160,9 @@ class PopperButton extends Popper {
 			},
 			mode: "click",
 			value: null,
+			popper: Object.assign({}, super.defaults.popper, {
+				contentOverflow: "smart",
+			}),
 
 			aria: {
 				role: null,

package/source/components/form/quantity.mjs

@@ -53,7 +53,8 @@ const holdIntervalSymbol = Symbol("holdInterval");
  *
  * @fragments /fragments/components/form/quantity/
  *
- * @example /examples/components/form/quantity-simple
+ * @example /examples/components/form/quantity-simple Basic quantity control
+ * @example /examples/components/form/quantity-decimal Decimal pricing stepper
  *
  * @since 4.41.0
  * @copyright Volker Schukai

package/source/components/form/repeat-field-set.mjs

@@ -70,6 +70,7 @@ const itemDefaultsSymbol = Symbol("itemDefaults");
  * A repeatable field-set control that manages array data.
  *
  * @fragments /fragments/components/form/repeat-field-set/
+ * @example /examples/components/form/repeat-field-set-simple Repeatable contacts
  *
  * @since 3.78.0
  * @summary A repeatable field-set control

package/source/components/form/toggle-switch.mjs

@@ -58,6 +58,7 @@ export const STATE_OFF = "off";
  * @fragments /fragments/components/form/toggle-switch
  *
  * @example /examples/components/form/toggle-switch-simple Simple example
+ * @example /examples/components/form/toggle-switch-custom-values Custom values and labels
  *
  * @since 3.57.0
  * @copyright Volker Schukai

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

@@ -309,7 +309,8 @@ function findNearestClippingContainer(element) {
 	while (current) {
 		if (
 			current instanceof HTMLElement &&
-			isClippingContainer(getComputedStyle(current))
+			isClippingContainer(getComputedStyle(current)) &&
+			!shouldIgnoreClippingContainer(current)
 		) {
 			return current;
 		}
@@ -341,6 +342,41 @@ function getComposedParent(node) {
 	return node.parentNode || null;
 }
 
+function shouldIgnoreClippingContainer(element) {
+	if (!(element instanceof HTMLElement)) {
+		return false;
+	}
+
+	if (!isPopperContentWrapper(element)) {
+		return false;
+	}
+
+	const parent = getComposedParent(element);
+	return (
+		parent instanceof HTMLElement &&
+		parent.getAttribute("data-monster-role") === "popper"
+	);
+}
+
+function isPopperContentWrapper(element) {
+	if (!(element instanceof HTMLElement)) {
+		return false;
+	}
+
+	if (!element.hasAttribute("data-monster-overflow-mode")) {
+		return false;
+	}
+
+	const part = element.getAttribute("part");
+	return (
+		isString(part) &&
+		part
+			.split(/\s+/)
+			.filter((token) => token.length > 0)
+			.includes("content")
+	);
+}
+
 function isClippingContainer(style) {
 	if (!style) {
 		return false;

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|visible
+	 * @property {string} popper.contentOverflow - Content clipping mode: both|horizontal|visible|smart
 	 * @property {Object} features - Feature flags
 	 * @property {boolean} features.preventOpenEventSent - Prevent open event
 	 * @returns {Object} Default options merged with parent defaults
@@ -200,6 +200,10 @@ class Popper extends CustomElement {
 
 		if (path === "popper.contentOverflow") {
 			applyContentOverflowMode.call(this);
+		} else if (path === "content") {
+			queueMicrotask(() => {
+				applyContentOverflowMode.call(this);
+			});
 		}
 
 		return this;
@@ -282,7 +286,16 @@ class Popper extends CustomElement {
 	 * @return {string}
 	 */
 	resolveContentOverflowMode() {
-		return this.getOption("popper.contentOverflow", "both");
+		const configuredMode = this.getOption("popper.contentOverflow", "both");
+		if (configuredMode !== "smart") {
+			return configuredMode;
+		}
+
+		if (containsNestedOverlayContent(this.getOption("content"))) {
+			return "horizontal";
+		}
+
+		return "both";
 	}
 
 	/**
@@ -702,6 +715,9 @@ function initOverflowObserver() {
 		() => {
 			applyContentOverflowMode.call(this);
 		};
+	this[attributeObserverSymbol]["data-monster-option-content"] = () => {
+		applyContentOverflowMode.call(this);
+	};
 }
 
 /**
@@ -743,4 +759,31 @@ function getTemplate() {
     `;
 }
 
+function containsNestedOverlayContent(content) {
+	const selector = [
+		"monster-details",
+		"monster-message-state-button",
+		"monster-popper",
+		"monster-popper-button",
+		"monster-select",
+		"details",
+	].join(",");
+
+	if (typeof content === "string") {
+		const container = document.createElement("div");
+		container.innerHTML = content;
+		return container.querySelector(selector) instanceof HTMLElement;
+	}
+
+	if (!(content instanceof HTMLElement)) {
+		return false;
+	}
+
+	if (content.matches(selector)) {
+		return true;
+	}
+
+	return content.querySelector(selector) instanceof HTMLElement;
+}
+
 registerCustomElement(Popper);

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]>[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} 
+[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: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]{display:flex;position:relative} 
 }`,
 		0,
 	);

package/source/components/notify/monitor-attribute-errors.mjs

@@ -47,7 +47,7 @@ const mutationObserversSymbol = Symbol("mutationObservers");
  *
  * @since 3.98.0
  * @copyright Volker Schukai
- * @summary A beautiful MonitorAttributeErrors that can make your life easier and also looks good.
+ * @summary Watches the DOM for `data-monster-error` attributes and can forward them to `monster-notify`.
  */
 class MonitorAttributeErrors extends CustomElement {
 	/**

package/source/components/state/log.mjs

@@ -58,6 +58,7 @@ const timeAgoIntervalSymbol = Symbol("timeAgoInterval");
  * @fragments /fragments/components/state/log
  *
  * @example /examples/components/state/log-simple Log
+ * @example /examples/components/state/log-live-feed Live deployment feed
  *
  * @issue https://localhost.alvine.dev:8444/development/issues/closed/270.html
  *

package/source/components/state/state.mjs

@@ -28,6 +28,7 @@ export { State };
  * @fragments /fragments/components/state/state
  *
  * @example /examples/components/state/state-simple State
+ * @example /examples/components/state/state-actionable Actionable empty state
  *
  * @since 1.5.0
  * @copyright Volker Schukai

package/source/components/state/thread.mjs

@@ -54,6 +54,7 @@ const timeAgoIntervalSymbol = Symbol("timeAgoInterval");
  * @fragments /fragments/components/state/thread
  *
  * @example /examples/components/state/thread-simple Thread
+ * @example /examples/components/state/thread-review Review thread with nested replies
  *
  * @issue https://localhost.alvine.dev:8444/development/issues/open/374.html
  *

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

@@ -1,2 +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]>[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}
+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: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}

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

@@ -31,12 +31,7 @@ div[data-monster-role=popper] {
 
     & > [part=content][data-monster-overflow-mode=horizontal] {
         overflow: visible;
-        clip-path: inset(
-            calc(-1 * var(--monster-popper-content-block-overflow, 100vh))
-            0
-            calc(-1 * var(--monster-popper-content-block-overflow, 100vh))
-            0
-        );
+        clip-path: none;
     }
 
     & > [part=content][data-monster-overflow-mode=visible] {

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

@@ -24,7 +24,7 @@ const FloatingUiStyleSheet = new CSSStyleSheet();
 try {
   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]>[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} 
+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: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} 
 }`, 0);
 } catch (e) {
   addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");

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

@@ -0,0 +1,61 @@
+import * as chai from "chai";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+
+let resolveClippingBoundaryElement;
+
+describe("form floating-ui boundary resolution", function () {
+	before(function (done) {
+		initJSDOM()
+			.then(() => {
+				return import(
+					"../../../../source/components/form/util/floating-ui.mjs"
+				);
+			})
+			.then((m) => {
+				resolveClippingBoundaryElement = m.resolveClippingBoundaryElement;
+				done();
+			})
+			.catch((e) => done(e));
+	});
+
+	afterEach(() => {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = "";
+	});
+
+	it("should ignore parent popper content wrappers as clipping boundaries for nested controls", function () {
+		const mocks = document.getElementById("mocks");
+		const wrapper = document.createElement("div");
+		const popperHost = document.createElement("div");
+		const selectHost = document.createElement("div");
+
+		wrapper.style.overflow = "hidden";
+		mocks.appendChild(wrapper);
+		wrapper.appendChild(popperHost);
+
+		const popperShadow = popperHost.attachShadow({ mode: "open" });
+		popperShadow.innerHTML = `
+            <div data-monster-role="popper">
+                <div part="content"
+                     data-monster-overflow-mode="both"
+                     style="overflow: auto;">
+                </div>
+            </div>
+        `;
+
+		popperShadow.querySelector('[part="content"]').appendChild(selectHost);
+
+		const selectShadow = selectHost.attachShadow({ mode: "open" });
+		selectShadow.innerHTML = `
+            <div data-monster-role="control"></div>
+            <div data-monster-role="popper"></div>
+        `;
+
+		const control = selectShadow.querySelector('[data-monster-role="control"]');
+		const popper = selectShadow.querySelector('[data-monster-role="popper"]');
+
+		expect(resolveClippingBoundaryElement(control, popper)).to.equal(wrapper);
+	});
+});

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

@@ -62,6 +62,37 @@ describe("PopperButton", function () {
 		}, 0);
 	});
 
+	it("should resolve nested overlay content to horizontal overflow by default", 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(
+					"content",
+					"<div><monster-select></monster-select></div>",
+				);
+
+				setTimeout(() => {
+					try {
+						expect(
+							content.getAttribute("data-monster-overflow-mode"),
+						).to.equal("horizontal");
+						done();
+					} catch (e) {
+						done(e);
+					}
+				}, 0);
+			} catch (e) {
+				done(e);
+			}
+		}, 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");