@schukai/monster 4.129.0 → 4.129.2

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";
@@ -30,8 +31,12 @@ import {
 	getDocument,
 } from "../../dom/util.mjs";
 import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
-import { STYLE_DISPLAY_MODE_BLOCK } from "../form/constants.mjs";
-import { positionPopper } from "../form/util/floating-ui.mjs";
+import {
+	closePositionedPopper,
+	isPositionedPopperOpen,
+	openPositionedPopper,
+	positionPopper,
+} from "../form/util/floating-ui.mjs";
 import { PopperStyleSheet } from "./stylesheet/popper.mjs";
 import { isArray } from "../../types/is.mjs";
 
@@ -79,6 +84,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 +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 {Object} features - Feature flags
 	 * @property {boolean} features.preventOpenEventSent - Prevent open event
 	 * @returns {Object} Default options merged with parent defaults
@@ -156,7 +169,9 @@ class Popper extends CustomElement {
 			content: "<slot></slot>",
 			popper: {
 				placement: "top",
+				engine: "native",
 				middleware: ["autoPlacement", "shift", "offset:15", "arrow"],
+				contentOverflow: "both",
 			},
 			features: {
 				preventOpenEventSent: false,
@@ -172,9 +187,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 +275,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
@@ -259,7 +299,7 @@ class Popper extends CustomElement {
 	 * @return {Popper} The popper instance
 	 */
 	toggleDialog() {
-		if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
+		if (isPositionedPopperOpen(this[popperElementSymbol])) {
 			this.hideDialog();
 		} else {
 			this.showDialog();
@@ -275,16 +315,20 @@ class Popper extends CustomElement {
  */
 function initEventHandler() {
 	this[closeEventHandler] = (event) => {
-		const path = event.composedPath();
-
-		for (const [, element] of Object.entries(path)) {
-			if (element === this) {
-				return;
-			}
+		if (
+			isEventInsidePopperOwner(
+				this,
+				event,
+				this[controlElementSymbol],
+				this[buttonElementSymbol],
+				this[popperElementSymbol],
+			)
+		) {
+			return;
 		}
 
 		if (
-			this[popperElementSymbol].style.display === "none" &&
+			!isPositionedPopperOpen(this[popperElementSymbol]) &&
 			!containsAttributeToken(this[controlElementSymbol], "class", "open")
 		) {
 			return;
@@ -316,6 +360,45 @@ function initEventHandler() {
 	return this;
 }
 
+function isEventInsidePopperOwner(
+	owner,
+	event,
+	controlElement,
+	buttonElement,
+	popperElement,
+) {
+	const path = event.composedPath?.() || [];
+
+	for (const element of path) {
+		if (
+			element === owner ||
+			element === controlElement ||
+			element === buttonElement ||
+			element === popperElement
+		) {
+			return true;
+		}
+	}
+
+	const target = path[0] || event.target;
+	if (!(target instanceof Node)) {
+		return false;
+	}
+
+	if (owner instanceof HTMLElement && owner.contains(target)) {
+		return true;
+	}
+
+	if (
+		owner?.shadowRoot instanceof ShadowRoot &&
+		owner.shadowRoot.contains(target)
+	) {
+		return true;
+	}
+
+	return false;
+}
+
 /**
  * Sets up event handlers for specific interaction mode
  * @private
@@ -440,7 +523,7 @@ function hide() {
 	});
 
 	if (popperElement instanceof HTMLElement) {
-		popperElement.style.display = "none";
+		closePositionedPopper(popperElement);
 	}
 
 	if (controlElement instanceof HTMLElement) {
@@ -477,7 +560,7 @@ function show() {
 		return;
 	}
 
-	if (popperElement.style.display === STYLE_DISPLAY_MODE_BLOCK) {
+	if (isPositionedPopperOpen(popperElement)) {
 		return;
 	}
 
@@ -485,8 +568,14 @@ function show() {
 		self,
 	});
 
+	applyContentOverflowMode.call(self);
+
 	popperElement.style.visibility = "hidden";
-	popperElement.style.display = STYLE_DISPLAY_MODE_BLOCK;
+	openPositionedPopper(
+		self[controlElementSymbol],
+		popperElement,
+		self.getOption("popper", {}),
+	);
 
 	addAttributeToken(controlElement, "class", "open");
 	registerWithHost.call(self);
@@ -512,7 +601,7 @@ function updatePopper() {
 		return;
 	}
 
-	if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
+	if (!isPositionedPopperOpen(this[popperElementSymbol])) {
 		return;
 	}
 
@@ -520,6 +609,8 @@ function updatePopper() {
 		return;
 	}
 
+	applyContentOverflowMode.call(this);
+
 	positionPopper.call(
 		this,
 		this[controlElementSymbol],
@@ -596,9 +687,40 @@ 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 +734,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

@@ -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] 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: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,
 	);

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

@@ -26,6 +26,14 @@ div[data-monster-role="popper"] > [part="content"] {
 	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(

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

@@ -25,7 +25,7 @@ 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] 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} 
 }`,
 		0,
 	);

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.