@schukai/monster 4.152.0 → 4.153.1

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/source/dom/slotted.mjs

@@ -27,37 +27,33 @@ export { getSlottedElements, getSlottedNodes };
  * @since 3.33.0
  * @throws {Error} query must be a string
  */
-function getSlottedNodes(query, name) {
+function getSlottedNodes(query, name, managedShadowRoot) {
 	const result = new Set();
+	const shadowRoot = getShadowRoot(this, managedShadowRoot);
 
-	if (!this.shadowRoot) {
+	if (!(shadowRoot instanceof ShadowRoot)) {
 		return result;
 	}
 
-	let selector = "slot";
-	if (name !== undefined) {
-		if (name === null) {
-			selector += ":not([name])";
-		} else {
-			selector += `[name=${validateString(name)}]`;
-		}
-	}
-
-	const slots = this.shadowRoot.querySelectorAll(selector);
+	const slots = getSlotsByName(shadowRoot, name);
 
-	for (const [, slot] of Object.entries(slots)) {
+	for (const slot of slots) {
 		slot.assignedNodes().forEach(function (node) {
 			if (node === null || node === undefined) {
 				return;
 			}
 
 			if (isString(query)) {
-				node.querySelectorAll(query).forEach(function (n) {
-					result.add(n);
-				});
-
-				if (node.matches(query)) {
+				if (query.length === 0) {
 					result.add(node);
+				} else if (node instanceof Element) {
+					node.querySelectorAll(query).forEach(function (n) {
+						result.add(n);
+					});
+
+					if (node.matches(query)) {
+						result.add(node);
+					}
 				}
 			} else if (query !== undefined) {
 				throw new Error("query must be a string");
@@ -80,25 +76,17 @@ function getSlottedNodes(query, name) {
  * @since 1.23.0
  * @throws {Error} query must be a string
  */
-function getSlottedElements(query, name) {
+function getSlottedElements(query, name, managedShadowRoot) {
 	const result = new Set();
+	const shadowRoot = getShadowRoot(this, managedShadowRoot);
 
-	if (!(this.shadowRoot instanceof ShadowRoot)) {
+	if (!(shadowRoot instanceof ShadowRoot)) {
 		return result;
 	}
 
-	let selector = "slot";
-	if (name !== undefined) {
-		if (name === null) {
-			selector += ":not([name])";
-		} else {
-			selector += `[name=${validateString(name)}]`;
-		}
-	}
-
-	const slots = this.shadowRoot.querySelectorAll(selector);
+	const slots = getSlotsByName(shadowRoot, name);
 
-	for (const [, slot] of Object.entries(slots)) {
+	for (const slot of slots) {
 		slot.assignedElements().forEach(function (node) {
 			if (
 				!(node instanceof HTMLElement) &&
@@ -129,3 +117,30 @@ function getSlottedElements(query, name) {
 
 	return result;
 }
+
+/**
+ * @param {*} host
+ * @param {*} managedShadowRoot
+ * @return {ShadowRoot|null}
+ * @private
+ */
+function getShadowRoot(host, managedShadowRoot) {
+	if (managedShadowRoot instanceof ShadowRoot) return managedShadowRoot;
+	return host?.shadowRoot instanceof ShadowRoot ? host.shadowRoot : null;
+}
+
+/**
+ * Filter slots by their DOM name instead of interpolating an unsafe selector.
+ * @param {ShadowRoot} shadowRoot
+ * @param {string|undefined|null} name
+ * @return {HTMLSlotElement[]}
+ * @private
+ */
+function getSlotsByName(shadowRoot, name) {
+	if (name !== undefined && name !== null) validateString(name);
+	return Array.from(shadowRoot.querySelectorAll("slot")).filter((slot) => {
+		if (name === undefined) return true;
+		if (name === null) return slot.name === "";
+		return slot.name === name;
+	});
+}

package/source/dom/template.mjs

@@ -156,7 +156,10 @@ export function findDocumentTemplate(id, currentNode) {
 		)
 	) {
 		if (currentNode instanceof Node) {
-			if (currentNode.hasAttribute(ATTRIBUTE_TEMPLATE_PREFIX)) {
+			if (
+				currentNode instanceof Element &&
+				currentNode.hasAttribute(ATTRIBUTE_TEMPLATE_PREFIX)
+			) {
 				prefixID = currentNode.getAttribute(ATTRIBUTE_TEMPLATE_PREFIX);
 			}
 

package/source/dom/updater.mjs

@@ -803,17 +803,34 @@ function parseIntArray(val) {
  * @private
  */
 function retrieveFromBindings() {
-	if (this[internalSymbol].element.matches(`[${ATTRIBUTE_UPDATER_BIND}]`)) {
+	if (
+		this[internalSymbol].element.matches(`[${ATTRIBUTE_UPDATER_BIND}]`) &&
+		!isUncheckedRadio(this[internalSymbol].element)
+	) {
 		retrieveAndSetValue.call(this, this[internalSymbol].element);
 	}
 
 	for (const [, element] of this[internalSymbol].element
 		.querySelectorAll(`[${ATTRIBUTE_UPDATER_BIND}]`)
 		.entries()) {
+		if (isUncheckedRadio(element)) continue;
 		retrieveAndSetValue.call(this, element);
 	}
 }
 
+/**
+ * @param {HTMLElement} element
+ * @return {boolean}
+ * @private
+ */
+function isUncheckedRadio(element) {
+	return (
+		element instanceof HTMLInputElement &&
+		element.type === "radio" &&
+		element.checked === false
+	);
+}
+
 /**
  * @private
  * @license AGPLv3
@@ -1201,7 +1218,10 @@ function getSlots(container, cache) {
 		return cache.get(container);
 	}
 
-	const slots = container.querySelectorAll("slot");
+	const slots = Array.from(container.querySelectorAll("slot"));
+	if (container.localName === "slot") {
+		slots.unshift(container);
+	}
 	cache.set(container, slots);
 	return slots;
 }
@@ -1565,6 +1585,9 @@ function replaceKeyedPatchedChildren(
 			const nextNode = preparePatchedNode(reused, renderedValue);
 			nextNode[patchNodeKeySymbol] = normalizedKey;
 			if (nextNode !== reused && reused.parentNode === element) {
+				if (reused instanceof HTMLElement) {
+					teardownManagedSubtree(reused);
+				}
 				element.replaceChild(nextNode, reused);
 			}
 			nextNodes.push(nextNode);
@@ -1591,15 +1614,11 @@ function replaceKeyedPatchedChildren(
 		}
 	}
 
-	for (const node of nextNodes) {
-		if (node.parentNode !== element) {
-			element.appendChild(node);
-			continue;
-		}
-
-		if (element.lastChild !== node) {
-			element.appendChild(node);
-		}
+	for (let index = 0; index < nextNodes.length; index++) {
+		const node = nextNodes[index];
+		const current = element.childNodes[index] ?? null;
+		if (current === node) continue;
+		element.insertBefore(node, current);
 	}
 }
 
@@ -1851,8 +1870,7 @@ function runUpdateAttributes(
 			if (
 				!element.hasAttribute(ATTRIBUTE_UPDATER_SELECT_THIS) &&
 				!attributes.includes(`path:${current}`) &&
-				!attributes.startsWith("static:") &&
-				!attributes.startsWith("i18n:")
+				!hasUnconditionalBinding(attributes)
 			) {
 				continue;
 			}
@@ -1933,8 +1951,7 @@ function runUpdateProperties(
 			if (
 				!element.hasAttribute(ATTRIBUTE_UPDATER_SELECT_THIS) &&
 				!properties.includes(`path:${current}`) &&
-				!properties.startsWith("static:") &&
-				!properties.startsWith("i18n:")
+				!hasUnconditionalBinding(properties)
 			) {
 				continue;
 			}
@@ -1981,6 +1998,9 @@ function runUpdateProperties(
 
 function handleInputControlAttributeUpdate(element, name, value) {
 	if (element instanceof HTMLSelectElement) {
+		if (name !== "value") {
+			return;
+		}
 		switch (element.type) {
 			case "select-multiple":
 				const selectedValues = isArray(value)
@@ -2054,6 +2074,22 @@ function handleInputControlAttributeUpdate(element, name, value) {
 	}
 }
 
+/**
+ * Check whether an attribute/property definition contains a command that is
+ * independent from the changed subject path.
+ * @param {string} definitions
+ * @return {boolean}
+ * @private
+ */
+function hasUnconditionalBinding(definitions) {
+	return definitions.split(",").some((definition) => {
+		const separator = definition.indexOf(" ");
+		if (separator < 0) return false;
+		const command = trimSpaces(definition.substring(separator + 1));
+		return command.startsWith("static:") || command.startsWith("i18n:");
+	});
+}
+
 /**
  * @private
  * @param {HTMLElement|*} element

package/source/types/node.mjs

@@ -199,8 +199,6 @@ class Node extends Base {
  * @return {setChildLevelAndParent}
  */
 function setChildLevelAndParent(node, operand, visitedNodes) {
-	const self = this;
-
 	if (visitedNodes.has(node)) {
 		throw new Error(
 			"the node has already been visited and cannot be traversed again",
@@ -217,7 +215,7 @@ function setChildLevelAndParent(node, operand, visitedNodes) {
 		child[treeStructureSymbol].parent = node;
 		child[treeStructureSymbol].level =
 			node[treeStructureSymbol].level + operand;
-		setChildLevelAndParent.call(self, child, operand, visitedNodes);
+		setChildLevelAndParent.call(node, child, operand, visitedNodes);
 	});
 	return this;
 }

package/source/types/proxyobserver.mjs

@@ -156,6 +156,15 @@ function getHandler() {
 			}
 
 			const value = Reflect.get(target, key, receiver);
+			const descriptor = Reflect.getOwnPropertyDescriptor(target, key);
+			if (
+				descriptor &&
+				descriptor.configurable === false &&
+				"value" in descriptor &&
+				descriptor.writable === false
+			) {
+				return value;
+			}
 
 			if (typeof key === "symbol") {
 				return value;
@@ -233,16 +242,12 @@ function getHandler() {
 
 		// https://262.ecma-international.org/9.0/#sec-proxy-object-internal-methods-and-internal-slots-delete-p
 		deleteProperty: function (target, key) {
-			if (key in target) {
-				delete target[key];
-
-				if (typeof key !== "symbol") {
-					proxy.observers.notify(proxy);
-				}
-
-				return true;
+			const hadOwnProperty = Object.hasOwn(target, key);
+			const result = Reflect.deleteProperty(target, key);
+			if (result && hadOwnProperty && typeof key !== "symbol") {
+				proxy.observers.notify(proxy);
 			}
-			return false;
+			return result;
 		},
 
 		// https://262.ecma-international.org/9.0/#sec-proxy-object-internal-methods-and-internal-slots-defineownproperty-p-desc
@@ -277,5 +282,22 @@ function getHandler() {
  * @private
  */
 function isNativeObjectWithInternalSlots(value) {
-	return value instanceof Date || value instanceof Map || value instanceof Set;
+	if (
+		value instanceof Date ||
+		value instanceof RegExp ||
+		value instanceof Map ||
+		value instanceof Set ||
+		value instanceof WeakMap ||
+		value instanceof WeakSet ||
+		value instanceof Promise ||
+		value instanceof ArrayBuffer ||
+		ArrayBuffer.isView(value)
+	) {
+		return true;
+	}
+
+	return (
+		typeof SharedArrayBuffer === "function" &&
+		value instanceof SharedArrayBuffer
+	);
 }

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)');