@schukai/monster 4.152.0 → 4.153.0

package/README.md

@@ -78,6 +78,30 @@ Voilà!
 While we strive to work around some browser bugs, generally, we do not use polyfills or feature detection.
 However, many functions can be supplemented through polyfills, thus enhancing compatibility.
 
+### Content Security Policy
+
+String expressions starting with `run:` use `new Function()` and require CSP
+permission for string evaluation. Existing configurations remain supported.
+For Select sorting under a policy without `unsafe-eval`, use `call:asc`,
+`call:desc`, or set a function from your application script:
+
+```javascript
+select.setOption("mapping.sort", (a, b, control) =>
+    a[1].localeCompare(b[1])
+);
+```
+
+Each comparator argument is a `[value, label]` entry; the third argument is the
+owning Select. A `null` sort keeps the imported order. Configure function values
+through JavaScript, since JSON attributes cannot contain functions.
+
+### Browser verification
+
+The [browser test runner](test/web/README.md) builds the current checkout and runs
+Chromium, Firefox and WebKit with normal web security, including CSP and timezone
+regressions. Browser versions are pinned with the Nix environment. This does not
+establish support for older browsers or replace testing Safari on Apple devices.
+
 ## Questions
 
 For questions and commercial support, please contact [Volker Schukai](https://www.schukai.com/).
@@ -99,4 +123,3 @@ Licensed under [AGPL](https://www.gnu.org/licenses/agpl-3.0.de.html). Commercial
 
 Detailed changes for each release are documented in the
 [CHANGELOG](https://gitlab.schukai.com/oss/libraries/javascript/monster/-/blob/master/application/CHANGELOG.md).
-

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.","files":["source","test/cases","test/util","CHANGELOG.md"],"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.152.0"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","files":["source","test/cases","test/util","CHANGELOG.md"],"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.153.0"}

package/source/components/content/viewer/message.mjs

@@ -386,6 +386,7 @@ class MessageContent extends CustomElement {
 				switch (contentTransferEncoding) {
 					case "base64":
 						content = atob(content);
+						break;
 
 					case "quoted-printable":
 						content = decodeQuotedPrintable(content);

package/source/components/form/select.mjs

@@ -1414,6 +1414,8 @@ function importOptionsIntern(data) {
 		sort === "no"
 	) {
 		// no sorting
+	} else if (typeof sort === "function") {
+		entries.sort((a, b) => sort(a, b, self));
 	} else if (isString(sort)) {
 		if (sort.startsWith("run:")) {
 			const code = sort.replace("run:", "");

package/source/components/form/util/fetch.mjs

@@ -66,8 +66,12 @@ function loadAndAssignContent(element, url, options, filter) {
 		const tempDiv = document.createElement("div");
 		tempDiv.innerHTML = content;
 
-		// Extract and execute all <script> elements by appending them to the document head
+		// Extract scripts before inserting the fragment, then execute them in head.
 		const scriptElements = tempDiv.querySelectorAll("script");
+		for (const script of scriptElements) script.remove();
+		// Inline scripts run synchronously when appended. Their fragment must
+		// already exist, including any upgraded custom elements inside it.
+		validateInstance(element, HTMLElement).innerHTML = tempDiv.innerHTML;
 		scriptElements.forEach((oldScript) => {
 			const newScript = document.createElement("script");
 			if (oldScript.src) newScript.src = oldScript.src;
@@ -76,18 +80,13 @@ function loadAndAssignContent(element, url, options, filter) {
 			if (oldScript.defer) newScript.defer = oldScript.defer;
 			if (oldScript.crossOrigin) newScript.crossOrigin = oldScript.crossOrigin;
 			if (oldScript.integrity) newScript.integrity = oldScript.integrity;
+			if (oldScript.nonce) newScript.nonce = oldScript.nonce;
 			if (oldScript.referrerPolicy)
 				newScript.referrerPolicy = oldScript.referrerPolicy;
 			newScript.textContent = oldScript.textContent;
 			document.head.appendChild(newScript);
-			if (oldScript.parentNode) {
-				oldScript.parentNode.removeChild(oldScript);
-			}
 		});
 
-		// Assign the processed content to the target element
-		validateInstance(element, HTMLElement).innerHTML = tempDiv.innerHTML;
-
 		// If the element is within a Shadow DOM, use the host as the event target
 		const shadowRoot = findShadowRoot(element);
 		const eventTarget = shadowRoot !== null ? shadowRoot.host : element;

package/source/components/state/log.mjs

@@ -190,6 +190,7 @@ class Log extends CustomElement {
 	 */
 	connectedCallback() {
 		super.connectedCallback();
+		initTimeAgoTicker.call(this);
 
 		const slottedElements = getSlottedElements.call(this);
 		if (slottedElements.size > 0) {
@@ -197,6 +198,12 @@ class Log extends CustomElement {
 		}
 	}
 
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		clearInterval(this[timeAgoIntervalSymbol]);
+		this[timeAgoIntervalSymbol] = undefined;
+	}
+
 	/**
 	 * Clear the log
 	 *

package/source/components/state/thread.mjs

@@ -63,6 +63,17 @@ const timeAgoIntervalSymbol = Symbol("timeAgoInterval");
  * @summary A threaded discussion layout for nested replies, comments and conversation-like content.
  **/
 class Thread extends CustomElement {
+	connectedCallback() {
+		super.connectedCallback();
+		initTimeAgoTicker.call(this);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		clearInterval(this[timeAgoIntervalSymbol]);
+		this[timeAgoIntervalSymbol] = undefined;
+	}
+
 	/**
 	 * @return {void}
 	 */

package/source/components/time/month-calendar.mjs

@@ -31,7 +31,7 @@ import { isFunction, isString } from "../../types/is.mjs";
 
 import { fireCustomEvent } from "../../dom/events.mjs";
 import { getLocaleOfDocument } from "../../dom/locale.mjs";
-import { addErrorAttribute } from "../../dom/error.mjs";
+import { addErrorAttribute, removeErrorAttribute } from "../../dom/error.mjs";
 import { MonthCalendarStyleSheet } from "./stylesheet/month-calendar.mjs";
 import { AccessibilityStyleSheet } from "../stylesheet/accessibility.mjs";
 import {
@@ -58,6 +58,13 @@ const calendarElementSymbol = Symbol("calendarElement");
  * @type {symbol}
  */
 const calendarBodyElementSymbol = Symbol("calendarBodyElement");
+const calendarInputSymbol = Symbol("calendarInput");
+const calendarFormatSymbol = Symbol("calendarFormat");
+const calendarRefreshSymbol = Symbol("calendarRefresh");
+const lastValidDateSymbol = Symbol("lastValidDate");
+const calendarDateInvalidSymbol = Symbol("calendarDateInvalid");
+const appointmentObserverSymbol = Symbol("appointmentObserver");
+const boundDaysSymbol = Symbol("boundDays");
 
 /**
  * A Calendar
@@ -82,9 +89,17 @@ class MonthCalendar extends CustomElement {
 	[initMethodSymbol]() {
 		super[initMethodSymbol]();
 
-		const def = generateCalendarData.call(this);
-		this.setOption("calendarDays", def.calendarDays);
-		this.setOption("calendarWeekdays", def.calendarWeekdays);
+		refreshCalendar.call(this);
+		this.attachObserver(
+			new Observer(() => {
+				if (this[calendarRefreshSymbol]) return;
+				this[calendarRefreshSymbol] = true;
+				queueMicrotask(() => {
+					this[calendarRefreshSymbol] = false;
+					refreshCalendar.call(this);
+				});
+			}),
+		);
 	}
 
 	/**
@@ -93,6 +108,7 @@ class MonthCalendar extends CustomElement {
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
+		refreshCalendar.call(this);
 
 		setTimeout(() => {
 			initControlReferences.call(this);
@@ -797,35 +813,28 @@ function calcHeaderAndFooterHeight() {
  *                   - calendarWeekdays: Array of seven objects, each representing a weekday header.
  */
 function generateCalendarData() {
-	let selectedDate = this.getOption("startDate");
-	if (!(selectedDate instanceof Date)) {
-		if (typeof selectedDate === "string") {
-			try {
-				selectedDate = new Date(selectedDate);
-			} catch (e) {
-				addErrorAttribute(this, "Invalid calendar date");
-				return { calendarDays, calendarWeekdays };
-			}
-		} else {
+	let selectedDate = parseCalendarDate(this.getOption("startDate"));
+	this[calendarDateInvalidSymbol] = selectedDate === null;
+	if (selectedDate) this[lastValidDateSymbol] = selectedDate;
+	else selectedDate = this[lastValidDateSymbol] || new Date();
+	// Constructors must not add attributes. Report after construction and use
+	// the latest state if options changed again during the same turn.
+	queueMicrotask(() => {
+		if (this[calendarDateInvalidSymbol])
 			addErrorAttribute(this, "Invalid calendar date");
-			return { calendarDays, calendarWeekdays };
-		}
-	}
-
+		else if (this.hasAttribute(ATTRIBUTE_ERRORMESSAGE))
+			removeErrorAttribute(this, "Invalid calendar date");
+	});
 	const calendarDays = [];
 	let calendarWeekdays = [];
 
-	if (!(selectedDate instanceof Date)) {
-		addErrorAttribute(this, "Invalid calendar date");
-		return { calendarDays, calendarWeekdays };
-	}
-
-	// Get the year and month from the provided date
-	const year = selectedDate.getFullYear();
+	// Get the local month from the provided date.
 	const month = selectedDate.getMonth(); // 0-based index (0 = January)
 
 	// Create a Date object for the 1st of the given month
-	const firstDayOfMonth = new Date(year, month, 1);
+	const firstDayOfMonth = new Date(selectedDate);
+	firstDayOfMonth.setDate(1);
+	firstDayOfMonth.setHours(0, 0, 0, 0);
 
 	// Determine the weekday index of the 1st day, ensuring Monday = 0
 	const weekdayIndex = (firstDayOfMonth.getDay() + 6) % 7;
@@ -888,6 +897,43 @@ function generateCalendarData() {
 	return { calendarDays, calendarWeekdays };
 }
 
+function parseCalendarDate(value) {
+	if (value instanceof Date)
+		return Number.isNaN(value.getTime()) ? null : new Date(value.getTime());
+	if (typeof value !== "string") return null;
+	const parts = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value.trim());
+	if (parts) {
+		const [, year, month, day] = parts.map(Number);
+		const date = new Date(0);
+		date.setHours(0, 0, 0, 0);
+		date.setFullYear(year, month - 1, day);
+		return date.getFullYear() === year &&
+			date.getMonth() === month - 1 &&
+			date.getDate() === day
+			? date
+			: null;
+	}
+	const date = new Date(value);
+	return Number.isNaN(date.getTime()) ? null : date;
+}
+
+function refreshCalendar() {
+	const value = this.getOption("startDate");
+	const input = value instanceof Date ? value.getTime() : value;
+	const format = this.getOption("locale.weekdayFormat");
+	if (
+		Object.is(input, this[calendarInputSymbol]) &&
+		format === this[calendarFormatSymbol]
+	)
+		return;
+	this[calendarInputSymbol] = input;
+	this[calendarFormatSymbol] = format;
+	const data = generateCalendarData.call(this);
+	this.setOption("calendarDays", data.calendarDays);
+	this.setOption("calendarWeekdays", data.calendarWeekdays);
+	if (this[calendarElementSymbol]) initEventHandler.call(this);
+}
+
 /**
  * Generates a map that contains an array of appointments for each day within the calendar range.
  * Multi-day appointments will appear on each day they span.
@@ -947,15 +993,19 @@ function initEventHandler() {
 	const self = this;
 
 	setTimeout(() => {
-		this.attachObserver(
-			new Observer(() => {
+		if (!this[appointmentObserverSymbol]) {
+			this[appointmentObserverSymbol] = new Observer(() => {
 				placeAppointments.call(this);
-			}),
-		);
+			});
+			this.attachObserver(this[appointmentObserverSymbol]);
+		}
+		this[boundDaysSymbol] ??= new WeakSet();
 
 		this[calendarElementSymbol]
 			.querySelectorAll("[data-monster-role='day-cell']")
 			.forEach((element) => {
+				if (this[boundDaysSymbol].has(element)) return;
+				this[boundDaysSymbol].add(element);
 				element.addEventListener("click", (event) => {
 					const hoveredElement = this.shadowRoot.elementFromPoint(
 						event.clientX,

package/source/dom/resource.mjs

@@ -175,17 +175,31 @@ class Resource extends BaseWithOptions {
 		}
 
 		return new Promise(function (resolve, reject) {
+			let settled = false;
+			const cleanup = () => {
+				settled = true;
+				clearTimeout(timeout);
+				self[internalStateSymbol].detachObserver(observer);
+			};
 			const timeout = setTimeout(() => {
+				cleanup();
 				reject("timeout");
 			}, self.getOption("timeout"));
 
-			const observer = new Observer(() => {
-				clearTimeout(timeout);
-				self[internalStateSymbol].detachObserver(observer);
-				resolve();
-			});
+			const check = () => {
+				if (settled) return;
+				const state = self[internalStateSymbol].getSubject();
+				if (state.loaded !== true) return;
+				cleanup();
+				if (state.error !== undefined) reject(state.error);
+				else resolve();
+			};
+			// setSubject updates several properties. Observe its final state and
+			// avoid removing observers while their notification list is iterating.
+			const observer = new Observer(() => queueMicrotask(check));
 
 			self[internalStateSymbol].attachObserver(observer);
+			queueMicrotask(check);
 		});
 	}
 

package/source/dom/sanitize-html.mjs

@@ -16,39 +16,44 @@ export function sanitizeHtml(htmlString, options = {}) {
 	);
 
 	const blockedTags = options.blockedTags || [];
-
-	blockedTags.forEach((tag) => {
-		doc.querySelectorAll(tag).forEach((el) => el.remove());
-	});
-
-	// remove dangerous attributes
-	const dangerousAttr = /^on/i;
-	const urlAttrs = ["xlink:href", "action", "formaction"];
-
-	doc.querySelectorAll("*").forEach((el) => {
-		// remove dangerous attributes
-		[...el.attributes].forEach((attr) => {
-			const name = attr.name;
-			const value = attr.value;
-
-			// remove attributes that start with "on" (event handlers)
-			if (dangerousAttr.test(name)) {
-				el.removeAttribute(name);
+	const animationTags = new Set([
+		"animate",
+		"set",
+		"animatemotion",
+		"animatetransform",
+		"animatecolor",
+		"discard",
+	]);
+	const urlAttrs = new Set(["href", "xlink:href", "action", "formaction"]);
+	// biome-ignore lint/suspicious/noControlCharactersInRegex: URL schemes must be checked after removing control characters.
+	const urlControlCharacters = /[\u0000-\u0020\u007f-\u009f]/g;
+
+	function sanitizeTree(root) {
+		for (const tag of blockedTags) {
+			for (const el of root.querySelectorAll(tag)) el.remove();
+		}
+		for (const el of root.querySelectorAll("*")) {
+			// SVG animations can change a safe URL after the attribute check.
+			if (animationTags.has(el.localName.toLowerCase())) {
+				el.remove();
+				continue;
 			}
-
-			// remove URL attributes that start with javascript:, data:, or vbscript:
-			if (urlAttrs.includes(name)) {
-				const val = value.trim().toLowerCase();
-				if (
-					val.startsWith("javascript:") ||
-					val.startsWith("data:") ||
-					val.startsWith("vbscript:")
-				) {
+			for (const { name, value } of [...el.attributes]) {
+				if (/^on/i.test(name)) {
 					el.removeAttribute(name);
+				} else if (urlAttrs.has(name.toLowerCase())) {
+					const normalized = value.replace(urlControlCharacters, "").toLowerCase();
+					if (/^(javascript|data|vbscript):/.test(normalized)) {
+						el.removeAttribute(name);
+					}
 				}
 			}
-		});
-	});
+			if (el.localName === "template" && el.content) {
+				sanitizeTree(el.content);
+			}
+		}
+	}
+	sanitizeTree(doc);
 
 	return doc.body.innerHTML;
 }

package/test/cases/components/datatable/drag-scroll.mjs

@@ -6,6 +6,21 @@ import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
 const expect = chai.expect;
 chai.use(chaiDom);
 
+// Supply geometry before the first layout can populate the measurement cache.
+function installColumnBarGeometry(parentWidth) {
+	const original = HTMLElement.prototype.getBoundingClientRect;
+	HTMLElement.prototype.getBoundingClientRect = function () {
+		if (this.localName === "monster-column-bar") return {width:0};
+		if (this.getRootNode().host?.localName === "monster-column-bar") {
+			const role = this.getAttribute("data-monster-role");
+			if (role === "control") return {width:parentWidth()};
+			if (role === "settings-button" || this.localName === "li") return {width:20};
+		}
+		return original.call(this);
+	};
+	return () => { HTMLElement.prototype.getBoundingClientRect = original; };
+}
+
 function dispatchPointerEvent(target, type, options = {}) {
 	const event = new Event(type, {
 		bubbles: true,
@@ -35,6 +50,9 @@ function dispatchPointerEvent(target, type, options = {}) {
 
 function mockScrollableElement(element, { clientWidth, scrollWidth, scrollLeft = 0 }) {
 	let currentScrollLeft = scrollLeft;
+	// Synthetic events have no browser-owned active pointer to capture.
+	element.setPointerCapture = () => {};
+	element.releasePointerCapture = () => {};
 
 	Object.defineProperty(element, "clientWidth", {
 		configurable: true,
@@ -447,6 +465,7 @@ describe("Datatable drag scroll", function () {
 	});
 
 	it("defers column bar resize updates to the next animation frame", async function () {
+		let restoreGeometry = () => {};
 		const OriginalResizeObserver = window.ResizeObserver;
 		const originalGlobalResizeObserver = globalThis.ResizeObserver;
 		const originalRequestAnimationFrame = window.requestAnimationFrame;
@@ -468,6 +487,7 @@ describe("Datatable drag scroll", function () {
 			const mocks = document.getElementById("mocks");
 			const wrapper = document.createElement("div");
 			let parentWidth = 400;
+			restoreGeometry = installColumnBarGeometry(() => parentWidth);
 
 			Object.defineProperty(wrapper, "getBoundingClientRect", {
 				configurable: true,
@@ -499,6 +519,7 @@ describe("Datatable drag scroll", function () {
 				"[data-monster-role=dots]",
 			);
 			const dots = Array.from(dotsContainer.querySelectorAll("li"));
+			dots.forEach(dot => { dot.style.margin = "0"; });
 
 			expect(control).to.exist;
 			expect(settingsButton).to.exist;
@@ -519,7 +540,7 @@ describe("Datatable drag scroll", function () {
 				});
 			});
 
-			await new Promise((resolve) => setTimeout(resolve, 0));
+			await new Promise((resolve) => setTimeout(resolve, 30));
 
 			expect(
 				dotsContainer.querySelector(".dots-overflow-indicator"),
@@ -551,6 +572,7 @@ describe("Datatable drag scroll", function () {
 				dotsContainer.querySelector(".dots-overflow-indicator"),
 			).to.exist;
 		} finally {
+			restoreGeometry();
 			window.ResizeObserver = OriginalResizeObserver;
 			globalThis.ResizeObserver = originalGlobalResizeObserver;
 			window.requestAnimationFrame = originalRequestAnimationFrame;
@@ -559,6 +581,7 @@ describe("Datatable drag scroll", function () {
 	});
 
 	it("coalesces column bar dot updates and ignores overflow indicator mutations", async function () {
+		let restoreGeometry = () => {};
 		const OriginalResizeObserver = window.ResizeObserver;
 		const originalGlobalResizeObserver = globalThis.ResizeObserver;
 		const originalRequestAnimationFrame = window.requestAnimationFrame;
@@ -580,6 +603,7 @@ describe("Datatable drag scroll", function () {
 			const mocks = document.getElementById("mocks");
 			const wrapper = document.createElement("div");
 			let parentWidth = 80;
+			restoreGeometry = installColumnBarGeometry(() => parentWidth);
 
 			Object.defineProperty(wrapper, "getBoundingClientRect", {
 				configurable: true,
@@ -612,6 +636,7 @@ describe("Datatable drag scroll", function () {
 					"[data-monster-role=dots]",
 				);
 				const dots = Array.from(dotsContainer.querySelectorAll("li"));
+				dots.forEach(dot => { dot.style.margin = "0"; });
 
 				Object.defineProperty(control, "getBoundingClientRect", {
 					configurable: true,
@@ -628,6 +653,7 @@ describe("Datatable drag scroll", function () {
 					});
 				});
 
+				await new Promise((resolve) => setTimeout(resolve, 30));
 				return { columnBar, control, dotsContainer };
 			};
 
@@ -669,6 +695,7 @@ describe("Datatable drag scroll", function () {
 
 			expect(scheduledCallbacks.length).to.equal(0);
 		} finally {
+			restoreGeometry();
 			window.ResizeObserver = OriginalResizeObserver;
 			globalThis.ResizeObserver = originalGlobalResizeObserver;
 			window.requestAnimationFrame = originalRequestAnimationFrame;

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

@@ -104,6 +104,9 @@ describe("ButtonBar", function () {
       "Weitere Aktionen",
     );
 
+    // The empty fixture has no overflow; expose the switch for the focus check.
+    switchButton.hidden = false;
+    switchButton.classList.remove("hidden");
     bar.showDialog();
     expect(switchButton.getAttribute("aria-expanded")).to.equal("true");
     switchButton.dispatchEvent(
@@ -403,7 +406,7 @@ describe("ButtonBar", function () {
   it("should allow themes to space main and overflow button groups", function () {
     const cssText = ButtonBar.getCSSStyleSheet()
       .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
-      .map((rule) => rule.cssText)
+      .map((rule) => rule.cssText.replace(/="([\w-]+)"/g, "=$1").replace(/>\s+\[/g, ">["))
       .join("\n");
 
     expect(cssText).to.contain("slot[name=popper]");
@@ -424,7 +427,7 @@ describe("ButtonBar", function () {
   it("should stack a nested button bar inside a parent overflow item", function () {
     const cssText = ButtonBar.getCSSStyleSheet()
       .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
-      .map((rule) => rule.cssText)
+      .map((rule) => rule.cssText.replace(/="([\w-]+)"/g, "=$1").replace(/>\s+\[/g, ">["))
       .join("\n");
 
     expect(cssText).to.match(
@@ -517,11 +520,11 @@ describe("ButtonBar", function () {
 
       expect(buttons[1].style.marginLeft).to.equal("");
       expect(buttons[0].style.borderRadius).to.equal("8px");
-      expect(buttons[0].style.borderTopRightRadius).to.equal("");
-      expect(buttons[0].style.borderBottomRightRadius).to.equal("");
+      expect(buttons[0].style.borderTopRightRadius || buttons[0].style.borderRadius).to.equal("8px");
+      expect(buttons[0].style.borderBottomRightRadius || buttons[0].style.borderRadius).to.equal("8px");
       expect(buttons[1].style.borderRadius).to.equal("8px");
-      expect(buttons[1].style.borderTopLeftRadius).to.equal("");
-      expect(buttons[1].style.borderBottomLeftRadius).to.equal("");
+      expect(buttons[1].style.borderTopLeftRadius || buttons[1].style.borderRadius).to.equal("8px");
+      expect(buttons[1].style.borderBottomLeftRadius || buttons[1].style.borderRadius).to.equal("8px");
     } finally {
       window.requestAnimationFrame = originalRequestAnimationFrame;
       globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;

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

@@ -150,7 +150,7 @@ describe('ConfirmButton', function () {
 
             const cssText = ConfirmButton.getCSSStyleSheet()
                 .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
-                .map((rule) => rule.cssText)
+                .map((rule) => rule.cssText.replace(/="([\w-]+)"/g, "=$1").replace(/>\s+\[/g, ">["))
                 .join("\n");
 
             expect(cssText).to.contain('div[data-monster-role=decision]');
@@ -162,14 +162,14 @@ describe('ConfirmButton', function () {
 
             const cssText = ConfirmButton.getCSSStyleSheet()
                 .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
-                .map((rule) => rule.cssText)
+                .map((rule) => rule.cssText.replace(/="([\w-]+)"/g, "=$1").replace(/>\s+\[/g, ">["))
                 .join("\n");
 
             expect(cssText).to.contain('div[data-monster-role=decision]');
             expect(cssText).to.contain('max-width: 100%');
             expect(cssText).to.contain('min-width: 0px');
             expect(cssText).to.contain('flex-wrap: wrap');
-            expect(cssText).to.contain('div[data-monster-role=decision]>*');
+            expect(cssText.replace(/\s*>\s*/g, '>')).to.contain('div[data-monster-role=decision]>*');
             expect(cssText).to.contain('flex: 1 1 max-content');
 
         });
@@ -178,7 +178,7 @@ describe('ConfirmButton', function () {
 
             const cssText = ConfirmButton.getCSSStyleSheet()
                 .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
-                .map((rule) => rule.cssText)
+                .map((rule) => rule.cssText.replace(/="([\w-]+)"/g, "=$1").replace(/>\s+\[/g, ">["))
                 .join("\n");
 
             expect(cssText).to.contain(':host(monster-confirm-button)');