@schukai/monster 4.113.0 → 4.114.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.114.0] - 2026-01-30
+
+### Add Features
+
+- Improve validation error handling and context management
+
+
+
 ## [4.113.0] - 2026-01-30
 
 ### Add Features

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","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.113.0"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","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.114.0"}

package/source/components/form/form.mjs

@@ -424,18 +424,56 @@ function getOrCreateValidationErrorElement(target, key) {
 	let errorElement = label.querySelector(
 		`monster-context-error[data-monster-validation-for="${marker}"]`,
 	);
+	const contextEndContainer = getOrCreateContextEndContainer(label);
 	if (errorElement) {
+		if (errorElement.parentElement !== contextEndContainer) {
+			contextEndContainer.appendChild(errorElement);
+		}
+		errorElement.style.marginInlineStart = "";
 		return errorElement;
 	}
 
 	errorElement = document.createElement("monster-context-error");
 	errorElement.setAttribute("data-monster-validation-for", marker);
-	errorElement.style.marginInlineStart = "auto";
-	label.appendChild(errorElement);
+	contextEndContainer.appendChild(errorElement);
 
 	return errorElement;
 }
 
+/**
+ * @private
+ * @param {HTMLLabelElement} label
+ * @return {HTMLSpanElement}
+ */
+function getOrCreateContextEndContainer(label) {
+	let container = label.querySelector('[data-monster-role="context-end"]');
+	if (container) {
+		return container;
+	}
+
+	container = document.createElement("span");
+	container.setAttribute("data-monster-role", "context-end");
+	container.style.display = "inline-flex";
+	container.style.alignItems = "center";
+	container.style.marginInlineStart = "auto";
+
+	const contextSelectors =
+		":scope > monster-context-help," +
+		":scope > monster-context-error," +
+		":scope > monster-context-note," +
+		":scope > monster-context-hint," +
+		":scope > monster-context-warning," +
+		":scope > monster-context-info," +
+		":scope > monster-context-success";
+	const contextElements = label.querySelectorAll(contextSelectors);
+	for (const contextElement of contextElements) {
+		container.appendChild(contextElement);
+	}
+
+	label.appendChild(container);
+	return container;
+}
+
 /**
  * @private
  * @param {HTMLElement} target