@schukai/monster 4.141.1 → 4.141.2

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.","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.141.1"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"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.141.2"}

package/source/components/form/control-bar.mjs

@@ -266,11 +266,14 @@ class ControlBar extends CustomElement {
 			needsMeasure: true,
 			needsLayout: true,
 			needsObserve: true,
+			initialLayoutPending: true,
+			initialLayoutOpacity: undefined,
 			suppressSlotChange: false,
 			suppressMutation: false,
 		};
 
 		initControlReferences.call(this);
+		hideControlBarUntilInitialLayout.call(this);
 		initEventHandler.call(this);
 
 		// setup structure
@@ -462,6 +465,44 @@ function isElementSelfHidden(element) {
 	);
 }
 
+/**
+ * @private
+ * @return {void}
+ */
+function hideControlBarUntilInitialLayout() {
+	const state = this[layoutStateSymbol];
+	if (!state || !(this[controlBarElementSymbol] instanceof HTMLElement)) {
+		return;
+	}
+
+	state.initialLayoutOpacity = this[controlBarElementSymbol].style.opacity;
+	this[controlBarElementSymbol].style.opacity = "0";
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function revealControlBarAfterInitialLayout() {
+	const state = this[layoutStateSymbol];
+	if (
+		!state ||
+		state.initialLayoutPending !== true ||
+		!(this[controlBarElementSymbol] instanceof HTMLElement)
+	) {
+		return;
+	}
+
+	state.initialLayoutPending = false;
+	const initialOpacity = state.initialLayoutOpacity;
+	if (typeof initialOpacity === "string" && initialOpacity !== "") {
+		this[controlBarElementSymbol].style.opacity = initialOpacity;
+		return;
+	}
+
+	this[controlBarElementSymbol].style.removeProperty("opacity");
+}
+
 /**
  * @private
  */
@@ -664,6 +705,7 @@ function runLayout() {
 		})
 		.finally(() => {
 			state.running = false;
+			revealControlBarAfterInitialLayout.call(this);
 			if (state.needsObserve || state.needsMeasure || state.needsLayout) {
 				scheduleLayoutFrame.call(this);
 			}

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

@@ -734,12 +734,15 @@ describe("ControlBar", function () {
         value: 20,
       });
 
+      expect(controlBar.style.opacity).to.equal("0");
+
       await flushFrames();
       await new Promise((resolve) => setTimeout(resolve, 0));
       await new Promise((resolve) => setTimeout(resolve, 0));
 
       expect(switchButton.hasAttribute("hidden")).to.be.true;
       expect(button.hasAttribute("slot")).to.be.false;
+      expect(controlBar.style.opacity).to.equal("");
       expect(controlBar.getAttribute("data-monster-layout-stacked")).to.equal(
         "true",
       );