@schukai/monster 4.96.0 → 4.97.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.97.0] - 2026-01-14
+
+### Add Features
+
+- Add innerDisabledObserver to enhance button state management
+
+
+
 ## [4.96.0] - 2026-01-13
 
 ### 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.96.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.97.0"}

package/source/components/form/message-state-button.mjs

@@ -35,6 +35,7 @@ export { MessageStateButton };
  * @type {symbol}
  */
 const buttonElementSymbol = Symbol("buttonElement");
+const innerDisabledObserverSymbol = Symbol("innerDisabledObserver");
 
 /**
  * A specialized button component that combines state management with message display capabilities.
@@ -407,17 +408,44 @@ function initControlReferences() {
  */
 function initDisabledSync() {
 	const self = this;
+	const attachInnerObserver = (button) => {
+		if (!button || !isFunction(button.attachObserver)) {
+			return;
+		}
+
+		const existing = self[innerDisabledObserverSymbol];
+		if (existing?.button === button) {
+			return;
+		}
+
+		if (
+			existing?.button &&
+			isFunction(existing.button.detachObserver) &&
+			existing.observer
+		) {
+			existing.button.detachObserver(existing.observer);
+		}
+
+		const observer = new Observer(syncDisabled);
+		button.attachObserver(observer);
+		self[innerDisabledObserverSymbol] = { button, observer };
+	};
+
 	const syncDisabled = () => {
 		const disabled = self.getOption("disabled", false);
 		if (self.getOption("features.disableButton", false) !== disabled) {
 			self.setOption("features.disableButton", disabled);
 		}
 
-		const button = self[buttonElementSymbol];
+		const button =
+			self.shadowRoot?.querySelector(`[${ATTRIBUTE_ROLE}=button]`) ??
+			self[buttonElementSymbol];
 		if (!button) {
 			return;
 		}
 
+		self[buttonElementSymbol] = button;
+
 		if (disabled) {
 			button.setAttribute(ATTRIBUTE_DISABLED, "");
 		} else {
@@ -427,6 +455,8 @@ function initDisabledSync() {
 		if (isFunction(button.setOption)) {
 			button.setOption("disabled", disabled);
 		}
+
+		attachInnerObserver(button);
 	};
 
 	syncDisabled();