@schukai/monster 4.129.0 → 4.129.1

package/source/components/layout/popper.mjs

@@ -21,6 +21,7 @@ import {
 import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
 import {
 	assembleMethodSymbol,
+	attributeObserverSymbol,
 	CustomElement,
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
@@ -79,6 +80,13 @@ const buttonElementSymbol = Symbol("buttonElement");
  */
 const popperElementSymbol = Symbol("popperElement");
 
+/**
+ * Symbol for content element reference
+ * @private
+ * @type {symbol}
+ */
+const contentElementSymbol = Symbol("contentElement");
+
 /**
  * Symbol for arrow element reference
  * @private
@@ -143,6 +151,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 {Object} features - Feature flags
 	 * @property {boolean} features.preventOpenEventSent - Prevent open event
 	 * @returns {Object} Default options merged with parent defaults
@@ -157,6 +166,7 @@ class Popper extends CustomElement {
 			popper: {
 				placement: "top",
 				middleware: ["autoPlacement", "shift", "offset:15", "arrow"],
+				contentOverflow: "both",
 			},
 			features: {
 				preventOpenEventSent: false,
@@ -172,9 +182,24 @@ class Popper extends CustomElement {
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 		initControlReferences.call(this);
+		initOverflowObserver.call(this);
+		applyContentOverflowMode.call(this);
 		initEventHandler.call(this);
 	}
 
+	/**
+	 * @inheritdoc
+	 */
+	setOption(path, value) {
+		super.setOption(path, value);
+
+		if (path === "popper.contentOverflow") {
+			applyContentOverflowMode.call(this);
+		}
+
+		return this;
+	}
+
 	/**
 	 * Gets the custom element tag name
 	 * @return {string} The tag name
@@ -245,6 +270,16 @@ class Popper extends CustomElement {
 		return this;
 	}
 
+	/**
+	 * Resolves the effective content overflow mode for the rendered wrapper.
+	 * Subclasses can override this when the configured option is only an intermediate mode.
+	 *
+	 * @return {string}
+	 */
+	resolveContentOverflowMode() {
+		return this.getOption("popper.contentOverflow", "both");
+	}
+
 	/**
 	 * Hides the popper element
 	 * @return {Popper} The popper instance
@@ -485,6 +520,8 @@ function show() {
 		self,
 	});
 
+	applyContentOverflowMode.call(self);
+
 	popperElement.style.visibility = "hidden";
 	popperElement.style.display = STYLE_DISPLAY_MODE_BLOCK;
 
@@ -520,6 +557,8 @@ function updatePopper() {
 		return;
 	}
 
+	applyContentOverflowMode.call(this);
+
 	positionPopper.call(
 		this,
 		this[controlElementSymbol],
@@ -596,9 +635,39 @@ function initControlReferences() {
 	this[arrowElementSymbol] = this.shadowRoot.querySelector(
 		`[${ATTRIBUTE_ROLE}=arrow]`,
 	);
+	this[contentElementSymbol] = this.shadowRoot.querySelector(`[part="content"]`);
 	return this;
 }
 
+/**
+ * Keeps the rendered content wrapper in sync with the configured overflow mode
+ * @private
+ * @return {void}
+ */
+function initOverflowObserver() {
+	this[attributeObserverSymbol]["data-monster-option-popper-content-overflow"] =
+		() => {
+			applyContentOverflowMode.call(this);
+		};
+}
+
+/**
+ * Applies the current content overflow mode to the rendered wrapper element
+ * @private
+ * @return {void}
+ */
+function applyContentOverflowMode() {
+	const contentElement = this[contentElementSymbol];
+	if (!(contentElement instanceof HTMLElement)) {
+		return;
+	}
+
+	contentElement.setAttribute(
+		"data-monster-overflow-mode",
+		this.resolveContentOverflowMode(),
+	);
+}
+
 /**
  * Gets the main template HTML
  * @private
@@ -612,7 +681,9 @@ function getTemplate() {
 
             <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
                 <div data-monster-role="arrow"></div>
-                <div part="content" class="flex" data-monster-replace="path:content">
+                <div part="content"
+                     class="flex"
+                     data-monster-replace="path:content">
                 </div>
             </div>
         </div>

package/source/components/layout/stylesheet/popper.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 { PopperStyleSheet };
+export {PopperStyleSheet}
 
 /**
  * @private
@@ -22,17 +22,10 @@ export { PopperStyleSheet };
 const PopperStyleSheet = new CSSStyleSheet();
 
 try {
-	PopperStyleSheet.insertRule(
-		`
+  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] 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,
-	);
+[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} 
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

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

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

@@ -29,6 +29,16 @@ div[data-monster-role=popper] {
         max-height: var(--monster-popper-content-max-height, calc(100vh - 4.2rem));
     }
 
+    & > [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
+        );
+    }
+
     & div[data-monster-role=arrow] {
         position: absolute;
         width: calc(2 * max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance)));

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

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

@@ -32,32 +32,68 @@ function extractKeys(
 ) {
 	const resultMap = new Map();
 
-	function helper(currentObj, currentKeyPrefix, currentValuePrefix) {
+	function normalizeKeySegment(value) {
+		return String(value).toLowerCase();
+	}
+
+	function toKebabCase(value) {
+		return String(value)
+			.replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+			.toLowerCase();
+	}
+
+	function appendKeys(compactKey, kebabKey, valuePath) {
+		resultMap.set(compactKey, valuePath);
+		if (kebabKey !== compactKey) {
+			resultMap.set(kebabKey, valuePath);
+		}
+	}
+
+	function helper(
+		currentObj,
+		currentCompactKeyPrefix,
+		currentKebabKeyPrefix,
+		currentValuePrefix,
+	) {
 		for (const key in currentObj) {
+			const compactSegment = normalizeKeySegment(key);
+			const kebabSegment = toKebabCase(key);
+
 			if (
 				currentObj[key] !== null &&
 				typeof currentObj[key] === "object" &&
 				!Array.isArray(currentObj[key])
 			) {
-				const newKeyPrefix = currentKeyPrefix
-					? currentKeyPrefix + keySeparator + key.toLowerCase()
-					: key.toLowerCase();
+				const newCompactKeyPrefix = currentCompactKeyPrefix
+					? currentCompactKeyPrefix + keySeparator + compactSegment
+					: compactSegment;
+				const newKebabKeyPrefix = currentKebabKeyPrefix
+					? currentKebabKeyPrefix + keySeparator + kebabSegment
+					: kebabSegment;
 				const newValuePrefix = currentValuePrefix
 					? currentValuePrefix + valueSeparator + key
 					: key;
-				helper(currentObj[key], newKeyPrefix, newValuePrefix);
+				helper(
+					currentObj[key],
+					newCompactKeyPrefix,
+					newKebabKeyPrefix,
+					newValuePrefix,
+				);
 			} else {
-				const finalKey = currentKeyPrefix
-					? currentKeyPrefix + keySeparator + key.toLowerCase()
-					: key.toLowerCase();
+				const finalCompactKey = currentCompactKeyPrefix
+					? currentCompactKeyPrefix + keySeparator + compactSegment
+					: compactSegment;
+				const finalKebabKey = currentKebabKeyPrefix
+					? currentKebabKeyPrefix + keySeparator + kebabSegment
+					: kebabSegment;
 				const finalValue = currentValuePrefix
 					? currentValuePrefix + valueSeparator + key
 					: key;
-				resultMap.set(finalKey, finalValue);
+				appendKeys(finalCompactKey, finalKebabKey, finalValue);
 			}
 		}
 	}
 
-	helper(obj, keyPrefix, keyPrefix);
+	helper(obj, keyPrefix, keyPrefix, keyPrefix);
 	return resultMap;
 }

package/source/dom/util/init-options-from-attributes.mjs

@@ -29,8 +29,10 @@ export { initOptionsFromAttributes };
 /**
  * Initializes the given options object based on the attributes of the current DOM element.
  * The function looks for attributes with the prefix 'data-monster-option-', and maps them to
- * properties in the options object. It replaces the dashes with dots to form the property path.
- * For example, the attribute 'data-monster-option-url' maps to the 'url' property in the options object.
+ * properties in the options object. It supports both the historic compact form and kebab-case aliases
+ * for camelCase option names.
+ * For example, the attributes 'data-monster-option-url' and
+ * 'data-monster-option-popper-content-overflow' map to 'url' and 'popper.contentOverflow'.
  *
  * With the mapping parameter, the attribute value can be mapped to a different value.
  * For example, the attribute 'data-monster-option-foo' maps to the 'bar' property in the options object.

package/source/dom/util/set-option-from-attribute.mjs

@@ -30,8 +30,10 @@ export { setOptionFromAttribute };
 /**
  * Set the given options object based on the attributes of the current DOM element.
  * The function looks for attributes with the prefix 'data-monster-option-', and maps them to
- * properties in the options object. It replaces the dashes with dots to form the property path.
- * For example, the attribute 'data-monster-option-url' maps to the 'url' property in the options object.
+ * properties in the options object. It supports both the historic compact form and kebab-case aliases
+ * for camelCase option names.
+ * For example, the attributes 'data-monster-option-url' and
+ * 'data-monster-option-popper-content-overflow' map to 'url' and 'popper.contentOverflow'.
  *
  * With the mapping parameter, the attribute value can be mapped to a different value.
  * For example, the attribute 'data-monster-option-foo' maps to the 'bar' property in the options object.

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

@@ -216,4 +216,276 @@ describe("MessageStateButton", function () {
 			}, 0);
 		});
 	});
+
+	describe("popper content presentation", function () {
+		afterEach(() => {
+			let mocks = document.getElementById("mocks");
+			mocks.innerHTML = "";
+		});
+
+		it("should resolve plain prose content to default popper clipping", function (done) {
+			let mocks = document.getElementById("mocks");
+			const button = document.createElement("monster-message-state-button");
+			button.innerHTML = "Save";
+			mocks.appendChild(button);
+
+			setTimeout(() => {
+				try {
+					button.setMessage("<div><strong>Saved</strong><p>plain html</p></div>");
+					button.showMessage();
+
+					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(
+								"both",
+							);
+							expect(
+								content.getAttribute("data-monster-message-layout"),
+							).to.equal("prose");
+							expect(
+								message.getAttribute("data-monster-message-layout"),
+							).to.equal("prose");
+							done();
+						} catch (e) {
+							done(e);
+						}
+					}, 0);
+				} catch (e) {
+					done(e);
+				}
+			}, 0);
+		});
+
+		it("should resolve nested select message content to horizontal clipping only", function (done) {
+			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();
+
+					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);
+		});
+
+		it("should resolve wide plain content to the wide layout", function (done) {
+			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");
+					const line = document.createElement("div");
+					line.setAttribute(
+						"style",
+						"white-space: nowrap; overflow-x: auto;",
+					);
+					line.textContent =
+						"this is intentionally a single long line to trigger wide layout";
+					wrapper.appendChild(line);
+
+					button.setMessage(wrapper);
+					button.showMessage();
+
+					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(
+								"both",
+							);
+							expect(
+								content.getAttribute("data-monster-message-layout"),
+							).to.equal("wide");
+							expect(
+								message.getAttribute("data-monster-message-layout"),
+							).to.equal("wide");
+							done();
+						} catch (e) {
+							done(e);
+						}
+					}, 0);
+				} catch (e) {
+					done(e);
+				}
+			}, 0);
+		});
+	});
+
+	describe("message width behavior", function () {
+		let originalInnerWidth;
+		let originalGetBoundingClientRect;
+
+		beforeEach(() => {
+			originalInnerWidth = window.innerWidth;
+			originalGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
+		});
+
+		afterEach(() => {
+			Object.defineProperty(window, "innerWidth", {
+				configurable: true,
+				writable: true,
+				value: originalInnerWidth,
+			});
+			HTMLElement.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+			let mocks = document.getElementById("mocks");
+			mocks.innerHTML = "";
+		});
+
+		it("should keep prose content on a readable max width", function (done) {
+			let mocks = document.getElementById("mocks");
+			const button = document.createElement("monster-message-state-button");
+			button.innerHTML = "Save";
+			mocks.appendChild(button);
+
+			Object.defineProperty(window, "innerWidth", {
+				configurable: true,
+				writable: true,
+				value: 800,
+			});
+			HTMLElement.prototype.getBoundingClientRect = function () {
+				if (this?.getAttribute?.("data-measurement") === "true") {
+					return {
+						width: 900,
+						height: 120,
+						top: 0,
+						left: 0,
+						right: 900,
+						bottom: 120,
+					};
+				}
+
+				return {
+					width: 100,
+					height: 40,
+					top: 0,
+					left: 0,
+					right: 100,
+					bottom: 40,
+				};
+			};
+
+			setTimeout(() => {
+				try {
+					button.setMessage(
+						"<div><p>This long prose content should wrap instead of forcing the message popper to use the full viewport width.</p></div>",
+					);
+					button.showMessage();
+
+					setTimeout(() => {
+						try {
+							const popper = button.shadowRoot.querySelector(
+								'[data-monster-role="popper"]',
+							);
+							expect(popper.style.width).to.equal("512px");
+							expect(popper.style.maxWidth).to.equal("512px");
+							done();
+						} catch (e) {
+							done(e);
+						}
+					}, 0);
+				} catch (e) {
+					done(e);
+				}
+			}, 0);
+		});
+
+		it("should allow wide content to grow until the viewport limit", function (done) {
+			let mocks = document.getElementById("mocks");
+			const button = document.createElement("monster-message-state-button");
+			button.innerHTML = "Save";
+			mocks.appendChild(button);
+
+			Object.defineProperty(window, "innerWidth", {
+				configurable: true,
+				writable: true,
+				value: 800,
+			});
+			HTMLElement.prototype.getBoundingClientRect = function () {
+				if (this?.getAttribute?.("data-measurement") === "true") {
+					return {
+						width: 900,
+						height: 120,
+						top: 0,
+						left: 0,
+						right: 900,
+						bottom: 120,
+					};
+				}
+
+				return {
+					width: 100,
+					height: 40,
+					top: 0,
+					left: 0,
+					right: 100,
+					bottom: 40,
+				};
+			};
+
+			setTimeout(() => {
+				try {
+					const wrapper = document.createElement("div");
+					wrapper.setAttribute("data-monster-message-layout", "wide");
+					wrapper.textContent =
+						"wide content placeholder that should grow until the viewport edge";
+					button.setMessage(wrapper);
+					button.showMessage();
+
+					setTimeout(() => {
+						try {
+							const popper = button.shadowRoot.querySelector(
+								'[data-monster-role="popper"]',
+							);
+							expect(popper.style.width).to.equal("768px");
+							expect(popper.style.maxWidth).to.equal("768px");
+							done();
+						} catch (e) {
+							done(e);
+						}
+					}, 0);
+				} catch (e) {
+					done(e);
+				}
+			}, 0);
+		});
+	});
 });