@schukai/monster 4.141.1 → 4.141.3

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.3"}

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

@@ -186,6 +186,13 @@ const ATTRIBUTE_OPTION_LAYOUT_STACKED_ALIGNMENT =
 const ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT =
 	"data-monster-option-layout-stacked-breakpoint";
 
+/**
+ * @private
+ * @type {string}
+ */
+const ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT_CONTAINER =
+	"data-monster-option-layout-stacked-breakpoint-container";
+
 /**
  * @private
  * @type {string}
@@ -241,6 +248,7 @@ class ControlBar extends CustomElement {
 				alignment: "left",
 				stackedAlignment: undefined,
 				stackedBreakpoint: undefined,
+				stackedBreakpointContainer: undefined,
 			},
 			popper: {
 				placement: "left",
@@ -266,11 +274,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
@@ -298,9 +309,12 @@ class ControlBar extends CustomElement {
 		if (
 			path === "layout.alignment" ||
 			path === "layout.stackedAlignment" ||
-			path === "layout.stackedBreakpoint"
+			path === "layout.stackedBreakpoint" ||
+			path === "layout.stackedBreakpointContainer"
 		) {
-			syncLayoutState.call(this);
+			syncLayoutState.call(this, {
+				observe: path === "layout.stackedBreakpointContainer",
+			});
 		}
 		return this;
 	}
@@ -352,6 +366,7 @@ class ControlBar extends CustomElement {
 		attributes.push(ATTRIBUTE_OPTION_LAYOUT_ALIGNMENT);
 		attributes.push(ATTRIBUTE_OPTION_LAYOUT_STACKED_ALIGNMENT);
 		attributes.push(ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT);
+		attributes.push(ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT_CONTAINER);
 		return attributes;
 	}
 
@@ -462,6 +477,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
  */
@@ -549,6 +602,12 @@ function initEventHandler() {
 			syncLayoutState.call(self);
 		};
 
+	self[attributeObserverSymbol][
+		ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT_CONTAINER
+	] = () => {
+		syncLayoutState.call(self, { observe: true });
+	};
+
 	self[resizeObserverSymbol] = new ResizeObserver(() => {
 		scheduleLayout.call(self, { measure: true, layout: true });
 	});
@@ -664,6 +723,7 @@ function runLayout() {
 		})
 		.finally(() => {
 			state.running = false;
+			revealControlBarAfterInitialLayout.call(this);
 			if (state.needsObserve || state.needsMeasure || state.needsLayout) {
 				scheduleLayoutFrame.call(this);
 			}
@@ -1230,6 +1290,10 @@ function calculateControlBarDimensions() {
 
 	this[dimensionsSymbol].setVia("data.visible", !(containerWidth === 0));
 	this[dimensionsSymbol].setVia("data.containerWidth", containerWidth);
+	this[dimensionsSymbol].setVia(
+		"data.stackedBreakpointContainerWidth",
+		getStackedBreakpointContainerWidth.call(this),
+	);
 
 	const itemReferences = [];
 
@@ -1294,6 +1358,65 @@ function calculateControlBarDimensions() {
 	this[dimensionsSymbol].setVia("data.itemReferences", itemReferences);
 }
 
+/**
+ * @private
+ * @return {number}
+ */
+function getStackedBreakpointContainerWidth() {
+	const container = resolveStackedBreakpointContainer.call(this);
+	if (!(container instanceof HTMLElement)) {
+		return 0;
+	}
+
+	return getElementLayoutWidth(container);
+}
+
+/**
+ * @private
+ * @return {HTMLElement|undefined}
+ */
+function resolveStackedBreakpointContainer() {
+	const selector = this.getOption("layout.stackedBreakpointContainer");
+	if (typeof selector !== "string" || selector.trim() === "") {
+		return undefined;
+	}
+
+	try {
+		const closest = this.closest(selector);
+		if (closest instanceof HTMLElement) {
+			return closest;
+		}
+
+		const root = this.getRootNode();
+		if (root && typeof root.querySelector === "function") {
+			const found = root.querySelector(selector);
+			if (found instanceof HTMLElement) {
+				return found;
+			}
+		}
+	} catch {}
+
+	return undefined;
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @return {number}
+ */
+function getElementLayoutWidth(element) {
+	const computedStyle = getComputedStyle(element);
+	if (computedStyle === null) {
+		return 0;
+	}
+
+	if (computedStyle.getPropertyValue("box-sizing") !== "border-box") {
+		return getComputedCssPixels(computedStyle.getPropertyValue("width"));
+	}
+
+	return element.clientWidth;
+}
+
 /**
  * @private
  */
@@ -1327,20 +1450,21 @@ function updateResizeObserverObservation() {
  */
 function getLayoutObservedNodes() {
 	const observedNodes = [];
-	Array.from(this.children).forEach((node) => {
-		if (node instanceof HTMLElement) {
+	const addObservedNode = (node) => {
+		if (node instanceof HTMLElement && !observedNodes.includes(node)) {
 			observedNodes.push(node);
 		}
-	});
+	};
+
+	Array.from(this.children).forEach(addObservedNode);
 
 	let parent = this.parentNode;
 	while (!(parent instanceof HTMLElement) && parent !== null) {
 		parent = parent.parentNode;
 	}
 
-	if (parent instanceof HTMLElement) {
-		observedNodes.push(parent);
-	}
+	addObservedNode(parent);
+	addObservedNode(resolveStackedBreakpointContainer.call(this));
 
 	return observedNodes;
 }
@@ -1525,11 +1649,16 @@ function applyLayoutAlignment() {
 
 /**
  * @private
+ * @param {{observe?: boolean}} options
  * @return {void}
  */
-function syncLayoutState() {
+function syncLayoutState(options = {}) {
 	applyLayoutAlignment.call(this);
-	scheduleLayout.call(this, { measure: true, layout: true });
+	scheduleLayout.call(this, {
+		measure: true,
+		layout: true,
+		observe: options.observe === true,
+	});
 }
 
 /**
@@ -1544,11 +1673,19 @@ function isStackedBreakpointMatched() {
 
 	let width = 0;
 	try {
-		width = this[dimensionsSymbol].getVia("data.containerWidth");
-	} catch {
+		width = this[dimensionsSymbol].getVia(
+			"data.stackedBreakpointContainerWidth",
+		);
+	} catch {}
+
+	if (!(width > 0)) {
 		try {
-			width = this[dimensionsSymbol].getVia("data.space");
-		} catch {}
+			width = this[dimensionsSymbol].getVia("data.containerWidth");
+		} catch {
+			try {
+				width = this[dimensionsSymbol].getVia("data.space");
+			} catch {}
+		}
 	}
 
 	if (!(width > 0)) {
@@ -1678,6 +1815,9 @@ function getLayoutChangedEventDetail() {
 		stacked,
 		stackedAlignment: this.getOption("layout.stackedAlignment"),
 		stackedBreakpoint: this.getOption("layout.stackedBreakpoint"),
+		stackedBreakpointContainer: this.getOption(
+			"layout.stackedBreakpointContainer",
+		),
 	};
 }
 

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

@@ -162,6 +162,7 @@ describe("ControlBar", function () {
       stacked: false,
       stackedAlignment: undefined,
       stackedBreakpoint: undefined,
+      stackedBreakpointContainer: undefined,
     });
   });
 
@@ -734,12 +735,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",
       );
@@ -840,4 +844,458 @@ describe("ControlBar", function () {
       globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
     }
   });
+
+  it("should keep the configured alignment when the reference container is above the stacked breakpoint", async function () {
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="headline-wide" class="page-headline-bar">
+          <div id="headline-wide-control-column">
+            <monster-control-bar
+              id="headline-wide-bar"
+              data-monster-option-layout-alignment="right"
+              data-monster-option-layout-stacked-alignment="left"
+              data-monster-option-layout-stacked-breakpoint="480px"
+              data-monster-option-layout-stacked-breakpoint-container=".page-headline-bar"
+            >
+              <button id="headline-wide-button">Run</button>
+            </monster-control-bar>
+          </div>
+        </div>
+      `;
+
+      const headline = document.getElementById("headline-wide");
+      const column = document.getElementById("headline-wide-control-column");
+      const button = document.getElementById("headline-wide-button");
+      const bar = document.getElementById("headline-wide-bar");
+      const controlBar = bar.shadowRoot.querySelector(
+        '[data-monster-role="control-bar"]',
+      );
+
+      headline.style.boxSizing = "border-box";
+      Object.defineProperty(headline, "clientWidth", {
+        configurable: true,
+        value: 640,
+      });
+      column.style.boxSizing = "border-box";
+      Object.defineProperty(column, "clientWidth", {
+        configurable: true,
+        value: 459.469,
+      });
+      Object.defineProperty(button, "offsetWidth", {
+        configurable: true,
+        value: 40,
+      });
+      Object.defineProperty(button, "offsetHeight", {
+        configurable: true,
+        value: 30,
+      });
+      button.getBoundingClientRect = () => ({
+        width: 40,
+        height: 30,
+        top: 0,
+        right: 40,
+        bottom: 30,
+        left: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      });
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(controlBar.getAttribute("data-monster-layout-stacked")).to.equal(
+        "false",
+      );
+      expect(controlBar.getAttribute("data-monster-layout-alignment")).to.equal(
+        "right",
+      );
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
+  it("should apply stacked alignment when the reference container is below the stacked breakpoint", async function () {
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="headline-narrow" class="page-headline-bar">
+          <div id="headline-narrow-control-column">
+            <monster-control-bar
+              id="headline-narrow-bar"
+              data-monster-option-layout-alignment="right"
+              data-monster-option-layout-stacked-alignment="left"
+              data-monster-option-layout-stacked-breakpoint="480px"
+              data-monster-option-layout-stacked-breakpoint-container=".page-headline-bar"
+            >
+              <button id="headline-narrow-button">Run</button>
+            </monster-control-bar>
+          </div>
+        </div>
+      `;
+
+      const headline = document.getElementById("headline-narrow");
+      const column = document.getElementById("headline-narrow-control-column");
+      const button = document.getElementById("headline-narrow-button");
+      const bar = document.getElementById("headline-narrow-bar");
+      const controlBar = bar.shadowRoot.querySelector(
+        '[data-monster-role="control-bar"]',
+      );
+
+      headline.style.boxSizing = "border-box";
+      Object.defineProperty(headline, "clientWidth", {
+        configurable: true,
+        value: 350,
+      });
+      column.style.boxSizing = "border-box";
+      Object.defineProperty(column, "clientWidth", {
+        configurable: true,
+        value: 459.469,
+      });
+      Object.defineProperty(button, "offsetWidth", {
+        configurable: true,
+        value: 40,
+      });
+      Object.defineProperty(button, "offsetHeight", {
+        configurable: true,
+        value: 30,
+      });
+      button.getBoundingClientRect = () => ({
+        width: 40,
+        height: 30,
+        top: 0,
+        right: 40,
+        bottom: 30,
+        left: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      });
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(controlBar.getAttribute("data-monster-layout-stacked")).to.equal(
+        "true",
+      );
+      expect(controlBar.getAttribute("data-monster-layout-alignment")).to.equal(
+        "left",
+      );
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
+  it("should fall back to the control bar width when the breakpoint container selector cannot resolve", async function () {
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="missing-reference-wrapper">
+          <monster-control-bar
+            id="missing-reference-bar"
+            data-monster-option-layout-alignment="right"
+            data-monster-option-layout-stacked-alignment="left"
+            data-monster-option-layout-stacked-breakpoint="480px"
+            data-monster-option-layout-stacked-breakpoint-container=".missing-reference"
+          >
+            <button id="missing-reference-button">Run</button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("missing-reference-wrapper");
+      const button = document.getElementById("missing-reference-button");
+      const bar = document.getElementById("missing-reference-bar");
+      const controlBar = bar.shadowRoot.querySelector(
+        '[data-monster-role="control-bar"]',
+      );
+
+      wrapper.style.boxSizing = "border-box";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 350,
+      });
+      Object.defineProperty(button, "offsetWidth", {
+        configurable: true,
+        value: 40,
+      });
+      Object.defineProperty(button, "offsetHeight", {
+        configurable: true,
+        value: 30,
+      });
+      button.getBoundingClientRect = () => ({
+        width: 40,
+        height: 30,
+        top: 0,
+        right: 40,
+        bottom: 30,
+        left: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      });
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(controlBar.getAttribute("data-monster-layout-stacked")).to.equal(
+        "true",
+      );
+      expect(controlBar.getAttribute("data-monster-layout-alignment")).to.equal(
+        "left",
+      );
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
+  it("should fall back without throwing when the breakpoint container selector is invalid", async function () {
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="invalid-reference-wrapper">
+          <monster-control-bar
+            id="invalid-reference-bar"
+            data-monster-option-layout-alignment="right"
+            data-monster-option-layout-stacked-alignment="left"
+            data-monster-option-layout-stacked-breakpoint="480px"
+          >
+            <button id="invalid-reference-button">Run</button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("invalid-reference-wrapper");
+      const button = document.getElementById("invalid-reference-button");
+      const bar = document.getElementById("invalid-reference-bar");
+      const controlBar = bar.shadowRoot.querySelector(
+        '[data-monster-role="control-bar"]',
+      );
+
+      bar.setOption("layout.stackedBreakpointContainer", "[");
+      wrapper.style.boxSizing = "border-box";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 350,
+      });
+      Object.defineProperty(button, "offsetWidth", {
+        configurable: true,
+        value: 40,
+      });
+      Object.defineProperty(button, "offsetHeight", {
+        configurable: true,
+        value: 30,
+      });
+      button.getBoundingClientRect = () => ({
+        width: 40,
+        height: 30,
+        top: 0,
+        right: 40,
+        bottom: 30,
+        left: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      });
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(controlBar.getAttribute("data-monster-layout-stacked")).to.equal(
+        "true",
+      );
+      expect(controlBar.getAttribute("data-monster-layout-alignment")).to.equal(
+        "left",
+      );
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
+  it("should observe the resolved breakpoint container and update observation when it changes", async function () {
+    const OriginalResizeObserver = window.ResizeObserver;
+    const originalGlobalResizeObserver = globalThis.ResizeObserver;
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    class TrackingResizeObserver extends ResizeObserverMock {
+      static instances = [];
+
+      constructor(callback) {
+        super(callback);
+        TrackingResizeObserver.instances.push(this);
+      }
+    }
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.ResizeObserver = TrackingResizeObserver;
+      globalThis.ResizeObserver = TrackingResizeObserver;
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="observed-reference-wrapper">
+          <monster-control-bar
+            id="observed-reference-bar"
+            data-monster-option-layout-stacked-breakpoint="480px"
+            data-monster-option-layout-stacked-breakpoint-container="#reference-a"
+          >
+            <button id="observed-reference-button">Run</button>
+          </monster-control-bar>
+        </div>
+        <div id="reference-a"></div>
+        <div id="reference-b"></div>
+      `;
+
+      const wrapper = document.getElementById("observed-reference-wrapper");
+      const referenceA = document.getElementById("reference-a");
+      const referenceB = document.getElementById("reference-b");
+      const button = document.getElementById("observed-reference-button");
+      const bar = document.getElementById("observed-reference-bar");
+
+      wrapper.style.boxSizing = "border-box";
+      referenceA.style.boxSizing = "border-box";
+      referenceB.style.boxSizing = "border-box";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 459,
+      });
+      Object.defineProperty(referenceA, "clientWidth", {
+        configurable: true,
+        value: 640,
+      });
+      Object.defineProperty(referenceB, "clientWidth", {
+        configurable: true,
+        value: 350,
+      });
+      Object.defineProperty(button, "offsetWidth", {
+        configurable: true,
+        value: 40,
+      });
+      Object.defineProperty(button, "offsetHeight", {
+        configurable: true,
+        value: 30,
+      });
+      button.getBoundingClientRect = () => ({
+        width: 40,
+        height: 30,
+        top: 0,
+        right: 40,
+        bottom: 30,
+        left: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      });
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      const observer = TrackingResizeObserver.instances[0];
+      expect(observer.elements).to.include(referenceA);
+
+      bar.setOption("layout.stackedBreakpointContainer", "#reference-b");
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(observer.elements).to.not.include(referenceA);
+      expect(observer.elements).to.include(referenceB);
+    } finally {
+      window.ResizeObserver = OriginalResizeObserver;
+      globalThis.ResizeObserver = originalGlobalResizeObserver;
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
 });

package/test/cases/components/form/select.mjs

@@ -1613,9 +1613,7 @@ describe('Select', function () {
             }
         });
 
-        it('should keep empty equivalent matching type-safe for numeric zero', function (done) {
-            this.timeout(2000);
-
+        it('should keep empty equivalent matching type-safe for numeric zero', async function () {
             let mocks = document.getElementById('mocks');
             const stringEquivalentSelect = document.createElement('monster-select');
             stringEquivalentSelect.setOption('empty.equivalents', ['0']);
@@ -1625,31 +1623,27 @@ describe('Select', function () {
             numericEquivalentSelect.setOption('empty.equivalents', [0]);
             mocks.appendChild(numericEquivalentSelect);
 
-            setTimeout(() => {
-                stringEquivalentSelect.value = 0;
-                numericEquivalentSelect.value = 0;
+            stringEquivalentSelect.value = 0;
+            numericEquivalentSelect.value = 0;
 
-                setTimeout(() => {
-                    try {
-                        expect(stringEquivalentSelect.value).to.equal('0');
-                        expect(stringEquivalentSelect.getOption('selection')).to.deep.equal([
-                            {
-                                label: '0',
-                                value: 0,
-                                class: 'monster-badge-primary',
-                                unresolved: false
-                            }
-                        ]);
-
-                        expect(numericEquivalentSelect.value).to.equal('');
-                        expect(numericEquivalentSelect.getOption('selection')).to.deep.equal([]);
-                    } catch (e) {
-                        return done(e);
-                    }
+            await waitForCondition(() => {
+                return stringEquivalentSelect.value === '0' &&
+                    Array.isArray(stringEquivalentSelect.getOption('selection')) &&
+                    stringEquivalentSelect.getOption('selection').length === 1 &&
+                    numericEquivalentSelect.value === '' &&
+                    Array.isArray(numericEquivalentSelect.getOption('selection')) &&
+                    numericEquivalentSelect.getOption('selection').length === 0;
+            });
 
-                    done();
-                }, 50);
-            }, 50);
+            expect(stringEquivalentSelect.getOption('selection')).to.deep.equal([
+                {
+                    label: '0',
+                    value: 0,
+                    class: 'monster-badge-primary',
+                    unresolved: false
+                }
+            ]);
+            expect(numericEquivalentSelect.getOption('selection')).to.deep.equal([]);
         });
 
         it('should not refetch after selecting an already loaded remote option', function (done) {