@schukai/monster 4.95.0 → 4.97.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.97.0] - 2026-01-14
+
+### Add Features
+
+- Add innerDisabledObserver to enhance button state management
+
+
+
+## [4.96.0] - 2026-01-13
+
+### Add Features
+
+- Improve dots visibility logic in columnbar component
+
+
+
 ## [4.95.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.95.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/datatable/columnbar.mjs

@@ -502,25 +502,27 @@ function updateDotsVisibility() {
 			return;
 		}
 
-		if (maxDots >= dots.length) {
-			if (!enforceMaxVisible) {
-				return;
-			}
-		}
-
-		let visibleDots = Math.max(1, maxDots - 1);
-		if (enforceMaxVisible) {
-			visibleDots = Math.min(visibleDots, configuredMaxVisible);
+		const configLimit = enforceMaxVisible
+			? configuredMaxVisible
+			: Number.POSITIVE_INFINITY;
+		const baseLimit = Math.min(maxDots, configLimit, dots.length);
+		const needsIndicator = baseLimit < dots.length;
+
+		let visibleDots = baseLimit;
+		if (needsIndicator) {
+			visibleDots = Math.min(Math.max(1, maxDots - 1), configLimit, dots.length);
 		}
 		for (let i = visibleDots; i < dots.length; i++) {
 			dots[i].classList.add("dots-overflow-hidden");
 		}
 
 		const hiddenCount = dots.length - visibleDots;
-		const overflowIndicator = document.createElement("li");
-		overflowIndicator.className = "dots-overflow-indicator";
-		overflowIndicator.textContent = `+${hiddenCount}`;
-		dotsContainer.appendChild(overflowIndicator);
+		if (hiddenCount > 0) {
+			const overflowIndicator = document.createElement("li");
+			overflowIndicator.className = "dots-overflow-indicator";
+			overflowIndicator.textContent = `+${hiddenCount}`;
+			dotsContainer.appendChild(overflowIndicator);
+		}
 	} finally {
 		this[dotsUpdateInProgressSymbol] = false;
 	}

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