@schukai/monster 4.148.9 → 4.149.0

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

@@ -15,6 +15,7 @@
 import { instanceSymbol } from "../../constants.mjs";
 import { registerCustomElement } from "../../dom/customelement.mjs";
 import { ContextHelpStyleSheet } from "./stylesheet/context-help.mjs";
+import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
 import { ContextBase } from "./context-base.mjs";
 
 export { ContextHelp };
@@ -62,6 +63,9 @@ class ContextHelp extends ContextBase {
 				main: getTemplate(),
 			},
 			mode: "auto",
+			classes: {
+				button: "monster-theme-primary-1 monster-theme-background-inherit",
+			},
 		});
 	}
 
@@ -76,7 +80,7 @@ class ContextHelp extends ContextBase {
 	 * @return {CSSStyleSheet[]}
 	 */
 	static getCSSStyleSheet() {
-		return [ContextHelpStyleSheet];
+		return [ContextHelpStyleSheet, ThemeStyleSheet];
 	}
 }
 
@@ -89,13 +93,15 @@ function getTemplate() {
 	return `
         <div data-monster-role="control" part="control">
             
-            <div data-monster-role="button" part="button"><svg class="hidden" 
+            <div data-monster-role="button"
+                 data-monster-attributes="class path:classes.button"
+                 part="button"><svg class="hidden"
 				xmlns="http://www.w3.org/2000/svg" 
 				width="1.2em" 
 				height="1.2em" 
+				fill="currentColor"
 				viewBox="0 0 16 16">
-                <path fill="var(--monster-color-primary-1)" 
-					  d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/>
+                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/>
             </svg></div>
 
             <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">

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

@@ -64,7 +64,7 @@ class ContextHint extends ContextBase {
 			},
 			mode: "auto",
 			classes: {
-				button: "monster-theme-tertiary-2",
+				button: "monster-theme-tertiary-2 monster-theme-background-inherit",
 			},
 		});
 	}

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

@@ -64,7 +64,7 @@ class ContextInfo extends ContextBase {
 			},
 			mode: "auto",
 			classes: {
-				button: "monster-theme-primary-2",
+				button: "monster-theme-primary-2 monster-theme-background-inherit",
 			},
 		});
 	}

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

@@ -64,7 +64,7 @@ class ContextNote extends ContextBase {
 			},
 			mode: "auto",
 			classes: {
-				button: "monster-theme-secondary-2",
+				button: "monster-theme-secondary-2 monster-theme-background-inherit",
 			},
 		});
 	}

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

@@ -64,7 +64,7 @@ class ContextSuccess extends ContextBase {
 			},
 			mode: "auto",
 			classes: {
-				button: "monster-theme-success-2",
+				button: "monster-theme-success-2 monster-theme-background-inherit",
 			},
 		});
 	}

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

@@ -64,7 +64,7 @@ class ContextWarning extends ContextBase {
 			},
 			mode: "auto",
 			classes: {
-				button: "monster-theme-warning-2",
+				button: "monster-theme-warning-2 monster-theme-background-inherit",
 			},
 		});
 	}

package/source/components/form/control-bar.mjs

@@ -98,6 +98,7 @@ const popperElementSymbol = Symbol("popperElement");
  * @type {symbol}
  */
 const closeEventHandler = Symbol("closeEventHandler");
+const escapeEventHandler = Symbol("escapeEventHandler");
 
 /**
  * @private
@@ -281,6 +282,7 @@ class ControlBar extends CustomElement {
 	 * @property {Object} templates Template definitions
 	 * @property {string} templates.main Main template
 	 * @property {Object} labels
+	 * @property {string} labels.moreActions="More actions" Accessible label for the responsive overflow switch
 	 * @property {Object} layout Responsive layout configuration.
 	 * @property {string} layout.alignment=left Main-row alignment. Supported values are `left`, `right` and `center`.
 	 * @property {string|undefined} layout.stackedAlignment Alignment used while the configured stacked breakpoint matches.
@@ -296,7 +298,9 @@ class ControlBar extends CustomElement {
 			templates: {
 				main: getTemplate(),
 			},
-			labels: {},
+			labels: {
+				moreActions: "More actions",
+			},
 			layout: {
 				alignment: "left",
 				stackedAlignment: undefined,
@@ -333,6 +337,7 @@ class ControlBar extends CustomElement {
 			suppressResize: false,
 			itemInlineSizes: new WeakMap(),
 			joinedInlineOffsets: new WeakMap(),
+			joinedBorderRadiusStyles: new Map(),
 		};
 
 		initControlReferences.call(this);
@@ -406,6 +411,7 @@ class ControlBar extends CustomElement {
 			// close on outside ui-events
 			document.addEventListener(type, this[closeEventHandler]);
 		}
+		document.addEventListener("keydown", this[escapeEventHandler]);
 
 		scheduleLayout.call(this, { measure: true, layout: true, observe: true });
 	}
@@ -440,6 +446,7 @@ class ControlBar extends CustomElement {
 		for (const [, type] of Object.entries(["click", "touch"])) {
 			document.removeEventListener(type, this[closeEventHandler]);
 		}
+		document.removeEventListener("keydown", this[escapeEventHandler]);
 
 		if (typeof this[layoutFrameSymbol] === "number") {
 			cancelAnimationFrame(this[layoutFrameSymbol]);
@@ -449,6 +456,7 @@ class ControlBar extends CustomElement {
 		if (this[layoutStateSymbol]) {
 			this[layoutStateSymbol].scheduled = false;
 		}
+		restoreJoinedBorderRadii.call(this);
 
 		disconnectResizeObserver.call(this);
 		defuseLayoutChangedEvent.call(this);
@@ -528,11 +536,17 @@ function isElementSelfHidden(element) {
 	}
 
 	const computedStyle = getComputedStyle(element);
+	// A positioned popper is hidden until Floating UI has placed it. Slotted
+	// controls inherit that temporary visibility and are not self-hidden.
+	const visibilityIsInheritedFromSlot =
+		computedStyle.visibility === "hidden" &&
+		element.assignedSlot instanceof HTMLSlotElement &&
+		getComputedStyle(element.assignedSlot).visibility === "hidden";
 	return (
 		element.hidden === true ||
 		element.hasAttribute("hidden") ||
 		computedStyle.display === "none" ||
-		computedStyle.visibility === "hidden"
+		(computedStyle.visibility === "hidden" && !visibilityIsInheritedFromSlot)
 	);
 }
 
@@ -583,6 +597,18 @@ function initEventHandler() {
 		}
 		hide.call(self);
 	};
+	self[escapeEventHandler] = (event) => {
+		if (
+			event.key !== "Escape" ||
+			self[popperElementSymbol]?.style.display !== STYLE_DISPLAY_MODE_BLOCK
+		) {
+			return;
+		}
+
+		event.preventDefault();
+		hide.call(self);
+		self[switchElementSymbol]?.focus();
+	};
 
 	if (self[controlBarSlotElementSymbol]) {
 		self[controlBarSlotElementSymbol].addEventListener("slotchange", () => {
@@ -1025,9 +1051,7 @@ function isControlItemVisible(item) {
  */
 function normalizeSpacerOverflowLayout(layout, orderedItems) {
 	if (
-		!layout.itemsToMoveToPopper.some(
-			(item) => !isControlBarSpacerElement(item),
-		)
+		!layout.itemsToMoveToPopper.some((item) => !isControlBarSpacerElement(item))
 	) {
 		return layout;
 	}
@@ -1245,8 +1269,14 @@ function updateJoinedBorders(layout, shouldShowSwitch) {
 
 	const marginLeftByElement = new Map();
 	const marginTopByElement = new Map();
+	const hasMainSpacing = hasButtonBarSpacing.call(
+		this,
+		"--monster-button-bar-gap",
+	);
 
-	collectInlineJoinedBorders.call(this, mainItems, marginLeftByElement);
+	if (!hasMainSpacing) {
+		collectInlineJoinedBorders.call(this, mainItems, marginLeftByElement);
+	}
 	for (const item of [...mainItems, ...layout.itemsToMoveToPopper]) {
 		collectInlineJoinedBorders.call(
 			this,
@@ -1254,11 +1284,13 @@ function updateJoinedBorders(layout, shouldShowSwitch) {
 			marginLeftByElement,
 		);
 	}
-	collectBlockJoinedBorders.call(
-		this,
-		layout.itemsToMoveToPopper,
-		marginTopByElement,
-	);
+	if (!hasButtonBarSpacing.call(this, "--monster-button-bar-popper-gap")) {
+		collectBlockJoinedBorders.call(
+			this,
+			layout.itemsToMoveToPopper,
+			marginTopByElement,
+		);
+	}
 	updateSpacerLineWidths.call(this, mainItems, "inline", "right", "left");
 	updateSpacerLineWidths.call(
 		this,
@@ -1267,11 +1299,38 @@ function updateJoinedBorders(layout, shouldShowSwitch) {
 		"bottom",
 		"top",
 	);
-	return applyJoinedBorderOffsets.call(
+	const offsetsChanged = applyJoinedBorderOffsets.call(
 		this,
 		marginLeftByElement,
 		marginTopByElement,
 	);
+	const radiiChanged = updateJoinedBorderRadii.call(
+		this,
+		mainItems,
+		[...mainItems, ...layout.itemsToMoveToPopper],
+		!hasMainSpacing,
+	);
+	return offsetsChanged || radiiChanged;
+}
+
+/**
+ * Keep joined-border behavior as the default while allowing a spaced modern
+ * button bar to clear the layout engine's negative overlap offsets.
+ *
+ * @private
+ * @param {string} property
+ * @return {boolean}
+ */
+function hasButtonBarSpacing(property) {
+	if (this.tagName !== "MONSTER-BUTTON-BAR") {
+		return false;
+	}
+
+	return (
+		getComputedCssPixels(
+			getComputedStyle(this).getPropertyValue(property).trim(),
+		) > 0
+	);
 }
 
 /**
@@ -1347,6 +1406,198 @@ function collectInlineJoinedBorders(elements, marginLeftByElement) {
 	}
 }
 
+/**
+ * Remove only the touching corner radii of horizontally joined controls.
+ * Outer corners and controls separated by a configured button-bar gap keep
+ * their component-defined radius.
+ *
+ * @private
+ * @param {HTMLElement[]} mainItems
+ * @param {HTMLElement[]} allItems
+ * @param {boolean} joinMainItems
+ * @return {boolean}
+ */
+function updateJoinedBorderRadii(mainItems, allItems, joinMainItems) {
+	const propertiesByElement = new Map();
+
+	if (joinMainItems) {
+		collectInlineJoinedBorderRadii.call(this, mainItems, propertiesByElement);
+	}
+
+	for (const item of allItems) {
+		collectInlineJoinedBorderRadii.call(
+			this,
+			getContainedControlElements(item),
+			propertiesByElement,
+		);
+	}
+
+	return applyJoinedBorderRadii.call(this, propertiesByElement);
+}
+
+/**
+ * @private
+ * @param {HTMLElement[]} elements
+ * @param {Map<HTMLElement, Set<string>>} propertiesByElement
+ * @return {void}
+ */
+function collectInlineJoinedBorderRadii(elements, propertiesByElement) {
+	const visibleElements = elements.filter(
+		(element) =>
+			element instanceof HTMLElement && !isElementSelfHidden(element),
+	);
+
+	for (let i = 1; i < visibleElements.length; i++) {
+		const previous = visibleElements[i - 1];
+		const current = visibleElements[i];
+		const overlap = getBorderOverlap(
+			getVisualBorderWidth.call(this, previous, "right"),
+			getVisualBorderWidth.call(this, current, "left"),
+		);
+
+		if (overlap <= 0) {
+			continue;
+		}
+
+		addJoinedBorderRadiusProperties(
+			propertiesByElement,
+			getVisualBorderElement.call(this, previous, "right"),
+			["border-top-right-radius", "border-bottom-right-radius"],
+		);
+		addJoinedBorderRadiusProperties(
+			propertiesByElement,
+			getVisualBorderElement.call(this, current, "left"),
+			["border-top-left-radius", "border-bottom-left-radius"],
+		);
+	}
+}
+
+/**
+ * @private
+ * @param {Map<HTMLElement, Set<string>>} propertiesByElement
+ * @param {HTMLElement} element
+ * @param {string[]} properties
+ * @return {void}
+ */
+function addJoinedBorderRadiusProperties(
+	propertiesByElement,
+	element,
+	properties,
+) {
+	if (!(element instanceof HTMLElement)) {
+		return;
+	}
+
+	let elementProperties = propertiesByElement.get(element);
+	if (!(elementProperties instanceof Set)) {
+		elementProperties = new Set();
+		propertiesByElement.set(element, elementProperties);
+	}
+
+	for (const property of properties) {
+		elementProperties.add(property);
+	}
+}
+
+/**
+ * @private
+ * @param {Map<HTMLElement, Set<string>>} propertiesByElement
+ * @return {boolean}
+ */
+function applyJoinedBorderRadii(propertiesByElement) {
+	const originals = this[layoutStateSymbol]?.joinedBorderRadiusStyles;
+	if (!(originals instanceof Map)) {
+		return false;
+	}
+
+	let changed = false;
+
+	for (const [element, elementOriginals] of [...originals]) {
+		const desiredProperties = propertiesByElement.get(element);
+		for (const [property, original] of [...elementOriginals]) {
+			if (desiredProperties?.has(property)) {
+				continue;
+			}
+
+			changed =
+				restoreInlineStyleProperty(element, property, original) || changed;
+			elementOriginals.delete(property);
+		}
+		if (elementOriginals.size === 0) {
+			originals.delete(element);
+		}
+	}
+
+	for (const [element, properties] of propertiesByElement) {
+		let elementOriginals = originals.get(element);
+		if (!(elementOriginals instanceof Map)) {
+			elementOriginals = new Map();
+			originals.set(element, elementOriginals);
+		}
+
+		for (const property of properties) {
+			if (!elementOriginals.has(property)) {
+				elementOriginals.set(property, {
+					value: element.style.getPropertyValue(property),
+					priority: element.style.getPropertyPriority(property),
+				});
+			}
+			if (
+				element.style.getPropertyValue(property) !== "0px" ||
+				element.style.getPropertyPriority(property) !== ""
+			) {
+				element.style.setProperty(property, "0px");
+				changed = true;
+			}
+		}
+	}
+
+	return changed;
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function restoreJoinedBorderRadii() {
+	const originals = this[layoutStateSymbol]?.joinedBorderRadiusStyles;
+	if (!(originals instanceof Map)) {
+		return;
+	}
+
+	for (const [element, elementOriginals] of originals) {
+		for (const [property, original] of elementOriginals) {
+			restoreInlineStyleProperty(element, property, original);
+		}
+	}
+	originals.clear();
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @param {string} property
+ * @param {{value: string, priority: string}} original
+ * @return {boolean}
+ */
+function restoreInlineStyleProperty(element, property, original) {
+	const currentValue = element.style.getPropertyValue(property);
+	const currentPriority = element.style.getPropertyPriority(property);
+	if (
+		currentValue === original.value &&
+		currentPriority === original.priority
+	) {
+		return false;
+	}
+
+	if (original.value === "") {
+		element.style.removeProperty(property);
+	} else {
+		element.style.setProperty(property, original.value, original.priority);
+	}
+	return true;
+}
+
 /**
  * @private
  * @param {HTMLElement[]} elements
@@ -1555,6 +1806,15 @@ function calculateControlBarDimensions() {
 		);
 	}
 
+	const hostContentWidth = getElementContentWidth(this);
+	if (hostContentWidth > 0) {
+		const measuredSpace = this[dimensionsSymbol].getVia("data.space", 0);
+		this[dimensionsSymbol].setVia(
+			"data.space",
+			Math.min(measuredSpace, hostContentWidth),
+		);
+	}
+
 	this[dimensionsSymbol].setVia("data.visible", !(containerWidth === 0));
 	this[dimensionsSymbol].setVia("data.containerWidth", containerWidth);
 	this[dimensionsSymbol].setVia(
@@ -1628,6 +1888,25 @@ function calculateControlBarDimensions() {
 	this[dimensionsSymbol].setVia("data.itemReferences", itemReferences);
 }
 
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @return {number}
+ */
+function getElementContentWidth(element) {
+	if (!(element instanceof HTMLElement) || element.clientWidth <= 0) {
+		return 0;
+	}
+
+	const computedStyle = getComputedStyle(element);
+	return Math.max(
+		0,
+		element.clientWidth -
+			getComputedCssPixels(computedStyle.paddingLeft) -
+			getComputedCssPixels(computedStyle.paddingRight),
+	);
+}
+
 /**
  * @private
  * @return {number}
@@ -1936,6 +2215,7 @@ function toggle() {
  */
 function hide() {
 	this[popperElementSymbol].style.display = "none";
+	this[switchElementSymbol]?.setAttribute("aria-expanded", "false");
 	removeAttributeToken(this[controlElementSymbol], "class", "open");
 }
 
@@ -1954,6 +2234,7 @@ function show() {
 
 	this[popperElementSymbol].style.visibility = "hidden";
 	this[popperElementSymbol].style.display = STYLE_DISPLAY_MODE_BLOCK;
+	this[switchElementSymbol]?.setAttribute("aria-expanded", "true");
 
 	addAttributeToken(this[controlElementSymbol], "class", "open");
 
@@ -2303,7 +2584,12 @@ function getTemplate() {
                 <div part="popper-nav" data-monster-role="popper-nav"
                      tabindex="-1">
                     <button part="popper-switch" data-monster-role="switch"
-                            class="monster-button-outline-tertiary hidden" hidden>
+                            class="monster-button-outline-tertiary hidden"
+                            type="button"
+                            aria-controls="monster-control-bar-popper"
+                            aria-expanded="false"
+                            data-monster-attributes="aria-label path:labels.moreActions"
+                            hidden>
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                              viewBox="0 0 16 16">
                             <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
@@ -2311,7 +2597,7 @@ function getTemplate() {
                     </button>
                 </div>
             </div>
-            <div data-monster-role="popper">
+            <div id="monster-control-bar-popper" data-monster-role="popper">
                 <slot name="popper"></slot>
             </div>
         </div>`;

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

@@ -130,7 +130,8 @@ class CredentialButton extends PopperButton {
 				label: labels.button,
 			}),
 			layout: {
-				containerStyle: "width: 20rem;",
+				containerStyle:
+					"box-sizing: border-box; width: min(24rem, calc(100vw - 2rem));",
 				submitStyle: "margin-top: var(--monster-space-4);",
 			},
 			url: "",
@@ -712,8 +713,9 @@ function getContentTemplate(labels) {
                         data-monster-attributes="data-monster-option-placeholder path:placeholder.password,
                                                 data-monster-option-autocomplete path:autocomplete.password">
                     </monster-password>
-                    <p part="description">${description}</p>
+                    <p class="grid-span-full" part="description">${description}</p>
                     <monster-message-state-button
+                        class="grid-span-full"
                         data-monster-role="submit-button"
                         part="submit-button"
                         data-monster-attributes="style path:layout.submitStyle">

package/source/components/form/digits.mjs

@@ -126,6 +126,9 @@ class Digits extends CustomControl {
 	 * @property {string} templates.main Main template
 	 * @property {number} digits Number of digits
 	 * @property {string} characterSet Character set for the digits, which are allowed
+	 * @property {Object} labels Accessible labels
+	 * @property {string} labels.group="Verification code" Label for the group
+	 * @property {string} labels.digit="Digit {index} of {count}" Label template for each digit
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
@@ -135,6 +138,10 @@ class Digits extends CustomControl {
 
 			digits: 6,
 			characterSet: "0123456789",
+			labels: {
+				group: "Verification code",
+				digit: "Digit {index} of {count}",
+			},
 
 			digitsControls: [],
 			value: null,
@@ -186,6 +193,8 @@ function initOptionObserver() {
 
 	let lastValue = this.getOption("value");
 	let lastDigits = this.getOption("digits");
+	let lastGroupLabel = this.getOption("labels.group");
+	let lastDigitLabel = this.getOption("labels.digit");
 
 	self.attachObserver(
 		new Observer(function () {
@@ -198,6 +207,15 @@ function initOptionObserver() {
 				lastDigits = self.getOption("digits");
 				updateDigitControls.call(self);
 			}
+
+			if (
+				lastGroupLabel !== self.getOption("labels.group") ||
+				lastDigitLabel !== self.getOption("labels.digit")
+			) {
+				lastGroupLabel = self.getOption("labels.group");
+				lastDigitLabel = self.getOption("labels.digit");
+				updateDigitControls.call(self);
+			}
 		}),
 	);
 }
@@ -212,6 +230,9 @@ function updateDigitControls() {
 
 	const values =
 		this.getOption("value") == null ? "" : String(this.getOption("value"));
+	const digitLabel = String(
+		this.getOption("labels.digit", "Digit {index} of {count}"),
+	);
 
 	if (this[digitsElementSymbol]) {
 		this[digitsElementSymbol].style.gridTemplateColumns =
@@ -221,6 +242,9 @@ function updateDigitControls() {
 	for (let i = 0; i < digits; i++) {
 		controls.push({
 			value: values[i] ?? "",
+			label: digitLabel
+				.replaceAll("{index}", String(i + 1))
+				.replaceAll("{count}", String(digits)),
 		});
 	}
 
@@ -392,11 +416,14 @@ function getTemplate() {
         <template id="digit">
             <input maxlength="1"
                    data-monster-attributes="
-                 value path:digit.value">
+                 value path:digit.value,
+                 aria-label path:digit.label">
         </template>
 
         <div data-monster-role="control" part="control" data-monster-attributes="class path:classes.control">
             <div part="digits" data-monster-role="digits"
+                 role="group"
+                 data-monster-attributes="aria-label path:labels.group"
                  data-monster-insert="digit path:digitsControls"
                  tabindex="-1"></div>
         </div>`;