@schukai/monster 4.129.8 → 4.129.10

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.8"}
+{"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.10"}

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/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/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
+	 * @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] 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/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: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,14 @@ 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] {
+        overflow: visible;
+        clip-path: none;
+        max-width: none;
+        max-height: none;
     }
 
     & div[data-monster-role=arrow] {

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: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 + "",
-	);
+  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

@@ -68,4 +68,24 @@ describe("ContextHelp", function () {
 			}
 		}, 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/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,68 @@ 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");
+		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 +149,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");

package/test/cases/dom/util/init-options-from-attributes.mjs

@@ -185,4 +185,18 @@ describe('initOptionsFromAttributes', () => {
         expect(result.message.width.viewportRatio).to.equal(0.9);
     });
 
+    it('should preserve visible for popper content overflow attributes', () => {
+        options = {
+            popper: {
+                contentOverflow: 'both',
+            },
+        };
+
+        element.setAttribute('data-monster-option-popper-content-overflow', 'visible');
+
+        const result = initOptionsFromAttributes(element, options);
+
+        expect(result.popper.contentOverflow).to.equal('visible');
+    });
+
 });