@schukai/monster 4.142.0 → 4.142.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.142.0"}
+{"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.142.2"}

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

@@ -204,6 +204,7 @@ const EVENT_LAYOUT_CHANGED = "monster-control-bar-layout-changed";
  * @type {number}
  */
 const LAYOUT_CHANGED_EVENT_DELAY = 20;
+const LAYOUT_SWITCH_HYSTERESIS = 16;
 
 /**
  * A control bar control.
@@ -610,6 +611,9 @@ function initEventHandler() {
 	};
 
 	self[resizeObserverSymbol] = new ResizeObserver((entries) => {
+		if (self[layoutStateSymbol]?.suppressResize) {
+			return;
+		}
 		if (!hasContainerResizeEntry.call(self, entries)) {
 			return;
 		}
@@ -798,6 +802,7 @@ function rearrangeItems() {
 			availableSpace = 0;
 		}
 		let sum = 0;
+		let overflowStarted = false;
 		const visibleItemsInMainSlot = [];
 		const itemsToMoveToPopper = [];
 
@@ -807,7 +812,8 @@ function rearrangeItems() {
 				continue;
 			}
 
-			if (sum + entry.width > availableSpace) {
+			if (overflowStarted || sum + entry.width > availableSpace) {
+				overflowStarted = true;
 				itemsToMoveToPopper.push(entry.element);
 			} else {
 				sum += entry.width;
@@ -818,12 +824,41 @@ function rearrangeItems() {
 		return { visibleItemsInMainSlot, itemsToMoveToPopper };
 	};
 
-	let layout = layoutItems(space);
-	if (layout.itemsToMoveToPopper.length > 0) {
-		layout = layoutItems(space - switchWidth);
+	const switchCurrentlyVisible =
+		this[switchElementSymbol] instanceof HTMLElement &&
+		!this[switchElementSymbol].hasAttribute("hidden");
+	let layout;
+	if (switchCurrentlyVisible) {
+		layout = layoutItems(space - switchWidth - LAYOUT_SWITCH_HYSTERESIS);
+		if (layout.itemsToMoveToPopper.length === 0) {
+			layout = layoutItems(space);
+		}
+	} else {
+		layout = layoutItems(space - LAYOUT_SWITCH_HYSTERESIS);
+		if (layout.itemsToMoveToPopper.length > 0) {
+			layout = layoutItems(space - switchWidth);
+		} else {
+			layout = layoutItems(space);
+		}
 	}
 
+	layout = normalizeSpacerOverflowLayout(
+		layout,
+		itemEntries.map((entry) => entry.element),
+	);
+	layout = stabilizeOverflowBoundary.call(
+		this,
+		layout,
+		itemEntries,
+		switchCurrentlyVisible,
+	);
+
 	const shouldShowSwitch = layout.itemsToMoveToPopper.length > 0 && hasItems;
+	updateLastOverflowBoundary.call(
+		this,
+		layout,
+		itemEntries.map((entry) => entry.element),
+	);
 	const shouldUseStackedLayout =
 		shouldShowSwitch || isStackedBreakpointMatched.call(this);
 
@@ -851,6 +886,147 @@ function rearrangeItems() {
 	}
 }
 
+/**
+ * @private
+ * @param {{visibleItemsInMainSlot: HTMLElement[], itemsToMoveToPopper: HTMLElement[]}} layout
+ * @param {{element: HTMLElement, hidden: boolean}[]} itemEntries
+ * @param {boolean} switchCurrentlyVisible
+ * @return {{visibleItemsInMainSlot: HTMLElement[], itemsToMoveToPopper: HTMLElement[]}}
+ */
+function stabilizeOverflowBoundary(layout, itemEntries, switchCurrentlyVisible) {
+	const state = this[layoutStateSymbol];
+	if (!switchCurrentlyVisible || !state) {
+		return layout;
+	}
+
+	const orderedItems = itemEntries.map((entry) => entry.element);
+	const nextBoundary = getFirstOverflowIndex(layout, orderedItems);
+	const previousBoundary = state.lastOverflowStartIndex;
+	if (
+		typeof previousBoundary !== "number" ||
+		typeof nextBoundary !== "number" ||
+		nextBoundary <= previousBoundary ||
+		previousBoundary < 0 ||
+		previousBoundary >= itemEntries.length
+	) {
+		return layout;
+	}
+
+	const popperItems = new Set();
+	const mainItems = new Set();
+	for (let index = 0; index < itemEntries.length; index++) {
+		const entry = itemEntries[index];
+		if (index >= previousBoundary && !entry.hidden) {
+			popperItems.add(entry.element);
+		} else {
+			mainItems.add(entry.element);
+		}
+	}
+
+	return normalizeSpacerOverflowLayout(
+		{
+			visibleItemsInMainSlot: orderedItems.filter((item) => mainItems.has(item)),
+			itemsToMoveToPopper: orderedItems.filter((item) => popperItems.has(item)),
+		},
+		orderedItems,
+	);
+}
+
+/**
+ * @private
+ * @param {{itemsToMoveToPopper: HTMLElement[]}} layout
+ * @param {HTMLElement[]} orderedItems
+ * @return {void}
+ */
+function updateLastOverflowBoundary(layout, orderedItems) {
+	const state = this[layoutStateSymbol];
+	if (!state) {
+		return;
+	}
+
+	const boundary = getFirstOverflowIndex(layout, orderedItems);
+	if (typeof boundary === "number") {
+		state.lastOverflowStartIndex = boundary;
+		return;
+	}
+	delete state.lastOverflowStartIndex;
+}
+
+/**
+ * @private
+ * @param {{itemsToMoveToPopper: HTMLElement[]}} layout
+ * @param {HTMLElement[]} orderedItems
+ * @return {number|undefined}
+ */
+function getFirstOverflowIndex(layout, orderedItems) {
+	const popperItems = new Set(layout.itemsToMoveToPopper);
+	for (let index = 0; index < orderedItems.length; index++) {
+		if (popperItems.has(orderedItems[index])) {
+			return index;
+		}
+	}
+	return undefined;
+}
+
+/**
+ * @private
+ * @param {{visibleItemsInMainSlot: HTMLElement[], itemsToMoveToPopper: HTMLElement[]}} layout
+ * @param {HTMLElement[]} orderedItems
+ * @return {{visibleItemsInMainSlot: HTMLElement[], itemsToMoveToPopper: HTMLElement[]}}
+ */
+function normalizeSpacerOverflowLayout(layout, orderedItems) {
+	if (
+		!layout.itemsToMoveToPopper.some(
+			(item) => !isControlBarSpacerElement(item),
+		)
+	) {
+		return layout;
+	}
+
+	const popperItems = new Set(layout.itemsToMoveToPopper);
+	const mainItems = new Set(layout.visibleItemsInMainSlot);
+
+	for (let index = 0; index < orderedItems.length; index++) {
+		const item = orderedItems[index];
+		if (!isControlBarSpacerElement(item) || !mainItems.has(item)) {
+			continue;
+		}
+
+		const previous = findAdjacentNonSpacerItem(orderedItems, index, -1);
+		const next = findAdjacentNonSpacerItem(orderedItems, index, 1);
+		if (popperItems.has(previous) || popperItems.has(next)) {
+			mainItems.delete(item);
+			popperItems.add(item);
+		}
+	}
+
+	return {
+		visibleItemsInMainSlot: orderedItems.filter((item) => mainItems.has(item)),
+		itemsToMoveToPopper: orderedItems.filter((item) => popperItems.has(item)),
+	};
+}
+
+/**
+ * @private
+ * @param {HTMLElement[]} orderedItems
+ * @param {number} startIndex
+ * @param {1|-1} direction
+ * @return {HTMLElement|undefined}
+ */
+function findAdjacentNonSpacerItem(orderedItems, startIndex, direction) {
+	for (
+		let index = startIndex + direction;
+		index >= 0 && index < orderedItems.length;
+		index += direction
+	) {
+		const item = orderedItems[index];
+		if (!isControlBarSpacerElement(item)) {
+			return item;
+		}
+	}
+	return undefined;
+}
+
 /**
  * @private
  * @param {HTMLElement} node

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

@@ -211,4 +211,115 @@ describe("ButtonBar", function () {
       globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
     }
   });
+
+  it("should ignore resize feedback caused by its own layout writes", 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 flushOneFrame = async () => {
+      const callback = scheduledCallbacks.shift();
+      if (callback instanceof Function) {
+        callback();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        await flushOneFrame();
+      }
+    };
+
+    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="feedback-bar-wrapper">
+          <monster-button-bar id="feedback-bar">
+            <button type="button">One</button>
+            <button type="button">Two</button>
+            <button type="button">Three</button>
+          </monster-button-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("feedback-bar-wrapper");
+      const bar = document.getElementById("feedback-bar");
+
+      wrapper.style.boxSizing = "border-box";
+      wrapper.style.width = "80px";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 80,
+      });
+
+      const buttons = Array.from(bar.querySelectorAll("button"));
+      for (const button of buttons) {
+        Object.defineProperty(button, "offsetWidth", {
+          configurable: true,
+          value: 48,
+        });
+        button.getBoundingClientRect = () => ({
+          width: 48,
+          height: 32,
+          top: 0,
+          left: 0,
+          right: 48,
+          bottom: 32,
+          x: 0,
+          y: 0,
+        });
+      }
+
+      const switchButton = bar.shadowRoot.querySelector(
+        '[data-monster-role="switch"]',
+      );
+      Object.defineProperty(switchButton, "offsetWidth", {
+        configurable: true,
+        value: 20,
+      });
+
+      await flushOneFrame();
+
+      const resizeObserver = TrackingResizeObserver.instances.find((observer) =>
+        observer.elements.includes(wrapper),
+      );
+      expect(resizeObserver).to.exist;
+
+      const suppressedFrameCount = scheduledCallbacks.length;
+      resizeObserver.triggerResize([{ target: wrapper }]);
+      expect(scheduledCallbacks.length).to.equal(suppressedFrameCount);
+
+      await flushFrames();
+
+      resizeObserver.triggerResize([{ target: wrapper }]);
+      expect(scheduledCallbacks.length).to.equal(1);
+
+      await flushFrames();
+      expect(scheduledCallbacks.length).to.equal(0);
+    } finally {
+      window.ResizeObserver = OriginalResizeObserver;
+      globalThis.ResizeObserver = originalGlobalResizeObserver;
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
 });

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

@@ -756,6 +756,479 @@ describe("ControlBar", function () {
     }
   });
 
+  it("should keep the overflow switch stable across the switch-width threshold", 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="threshold-bar-wrapper">
+          <monster-control-bar id="threshold-bar">
+            <button id="threshold-one">One</button>
+            <button id="threshold-two">Two</button>
+            <button id="threshold-three">Three</button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("threshold-bar-wrapper");
+      const bar = document.getElementById("threshold-bar");
+      const buttons = [
+        document.getElementById("threshold-one"),
+        document.getElementById("threshold-two"),
+        document.getElementById("threshold-three"),
+      ];
+      let wrapperWidth = 90;
+
+      wrapper.style.boxSizing = "border-box";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        get: () => wrapperWidth,
+      });
+
+      for (const button of buttons) {
+        Object.defineProperty(button, "offsetWidth", {
+          configurable: true,
+          value: 50,
+        });
+        Object.defineProperty(button, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        button.getBoundingClientRect = () => ({
+          width: 50,
+          height: 30,
+          top: 0,
+          right: 50,
+          bottom: 30,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+      }
+
+      const switchButton = bar.shadowRoot.querySelector(
+        '[data-monster-role="switch"]',
+      );
+      Object.defineProperty(switchButton, "offsetWidth", {
+        configurable: true,
+        value: 20,
+      });
+
+      await flushFrames();
+      expect(switchButton.hasAttribute("hidden")).to.be.false;
+
+      const resizeObserver = TrackingResizeObserver.instances.find((observer) =>
+        observer.elements.includes(wrapper),
+      );
+      expect(resizeObserver).to.exist;
+
+      wrapperWidth = 155;
+      resizeObserver.triggerResize([{ target: wrapper }]);
+      await flushFrames();
+      expect(switchButton.hasAttribute("hidden")).to.be.false;
+      expect(document.getElementById("threshold-three").getAttribute("slot")).to
+        .equal("popper");
+
+      wrapperWidth = 175;
+      resizeObserver.triggerResize([{ target: wrapper }]);
+      await flushFrames();
+      expect(switchButton.hasAttribute("hidden")).to.be.false;
+      expect(document.getElementById("threshold-three").getAttribute("slot")).to
+        .equal("popper");
+
+      wrapperWidth = 190;
+      resizeObserver.triggerResize([{ target: wrapper }]);
+      await flushFrames();
+      expect(switchButton.hasAttribute("hidden")).to.be.true;
+      expect(document.getElementById("threshold-three").hasAttribute("slot")).to
+        .be.false;
+
+      wrapperWidth = 160;
+      resizeObserver.triggerResize([{ target: wrapper }]);
+      await flushFrames();
+      expect(switchButton.hasAttribute("hidden")).to.be.false;
+      expect(document.getElementById("threshold-three").getAttribute("slot")).to
+        .equal("popper");
+    } finally {
+      window.ResizeObserver = OriginalResizeObserver;
+      globalThis.ResizeObserver = originalGlobalResizeObserver;
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
+  it("should move spacers with adjacent overflow controls", 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="spacer-overflow-wrapper">
+          <monster-control-bar id="spacer-overflow-bar">
+            <button id="spacer-overflow-one">One</button>
+            <monster-control-bar-spacer id="spacer-overflow-spacer-one"></monster-control-bar-spacer>
+            <button id="spacer-overflow-two">Two</button>
+            <monster-control-bar-spacer id="spacer-overflow-spacer-two"></monster-control-bar-spacer>
+            <button id="spacer-overflow-three">Three</button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("spacer-overflow-wrapper");
+      const bar = document.getElementById("spacer-overflow-bar");
+      const sizes = new Map([
+        ["spacer-overflow-one", 50],
+        ["spacer-overflow-spacer-one", 10],
+        ["spacer-overflow-two", 100],
+        ["spacer-overflow-spacer-two", 10],
+        ["spacer-overflow-three", 50],
+      ]);
+
+      wrapper.style.boxSizing = "border-box";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 100,
+      });
+
+      for (const [id, width] of sizes) {
+        const element = document.getElementById(id);
+        Object.defineProperty(element, "offsetWidth", {
+          configurable: true,
+          value: width,
+        });
+        Object.defineProperty(element, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        element.getBoundingClientRect = () => ({
+          width,
+          height: 30,
+          top: 0,
+          right: width,
+          bottom: 30,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+      }
+
+      const switchButton = bar.shadowRoot.querySelector(
+        '[data-monster-role="switch"]',
+      );
+      Object.defineProperty(switchButton, "offsetWidth", {
+        configurable: true,
+        value: 20,
+      });
+
+      await flushFrames();
+      expect(document.getElementById("spacer-overflow-one").hasAttribute("slot"))
+        .to.be.false;
+      expect(
+        document.getElementById("spacer-overflow-spacer-one").getAttribute("slot"),
+      ).to.equal("popper");
+      expect(document.getElementById("spacer-overflow-two").getAttribute("slot"))
+        .to.equal("popper");
+      expect(
+        document.getElementById("spacer-overflow-spacer-two").getAttribute("slot"),
+      ).to.equal("popper");
+      expect(
+        document.getElementById("spacer-overflow-three").getAttribute("slot"),
+      ).to.equal("popper");
+
+      const resizeObserver = TrackingResizeObserver.instances.find((observer) =>
+        observer.elements.includes(wrapper),
+      );
+      expect(resizeObserver).to.exist;
+
+      resizeObserver.triggerResize([{ target: wrapper }]);
+      await flushFrames();
+      expect(
+        document.getElementById("spacer-overflow-spacer-one").getAttribute("slot"),
+      ).to.equal("popper");
+      expect(
+        document.getElementById("spacer-overflow-spacer-two").getAttribute("slot"),
+      ).to.equal("popper");
+    } finally {
+      window.ResizeObserver = OriginalResizeObserver;
+      globalThis.ResizeObserver = originalGlobalResizeObserver;
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
+  it("should keep overflow as an ordered suffix when later controls would fit", 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="ordered-overflow-wrapper">
+          <monster-control-bar id="ordered-overflow-bar">
+            <button id="ordered-overflow-one">One</button>
+            <button id="ordered-overflow-wide">Wide</button>
+            <button id="ordered-overflow-small">Small</button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("ordered-overflow-wrapper");
+      const bar = document.getElementById("ordered-overflow-bar");
+      const sizes = new Map([
+        ["ordered-overflow-one", 50],
+        ["ordered-overflow-wide", 100],
+        ["ordered-overflow-small", 20],
+      ]);
+
+      wrapper.style.boxSizing = "border-box";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 90,
+      });
+
+      for (const [id, width] of sizes) {
+        const element = document.getElementById(id);
+        Object.defineProperty(element, "offsetWidth", {
+          configurable: true,
+          value: width,
+        });
+        Object.defineProperty(element, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        element.getBoundingClientRect = () => ({
+          width,
+          height: 30,
+          top: 0,
+          right: width,
+          bottom: 30,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+      }
+
+      const switchButton = bar.shadowRoot.querySelector(
+        '[data-monster-role="switch"]',
+      );
+      Object.defineProperty(switchButton, "offsetWidth", {
+        configurable: true,
+        value: 20,
+      });
+
+      await flushFrames();
+
+      expect(document.getElementById("ordered-overflow-one").hasAttribute("slot"))
+        .to.be.false;
+      expect(document.getElementById("ordered-overflow-wide").getAttribute("slot"))
+        .to.equal("popper");
+      expect(document.getElementById("ordered-overflow-small").getAttribute("slot"))
+        .to.equal("popper");
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
+  it("should keep the previous overflow boundary while the switch remains visible", 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="sticky-overflow-wrapper">
+          <monster-control-bar id="sticky-overflow-bar">
+            <button id="sticky-overflow-one">One</button>
+            <button id="sticky-overflow-wide">Wide</button>
+            <button id="sticky-overflow-small">Small</button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("sticky-overflow-wrapper");
+      const bar = document.getElementById("sticky-overflow-bar");
+      let wrapperWidth = 90;
+      const sizes = new Map([
+        ["sticky-overflow-one", 50],
+        ["sticky-overflow-wide", 100],
+        ["sticky-overflow-small", 20],
+      ]);
+
+      wrapper.style.boxSizing = "border-box";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        get: () => wrapperWidth,
+      });
+
+      for (const [id, width] of sizes) {
+        const element = document.getElementById(id);
+        Object.defineProperty(element, "offsetWidth", {
+          configurable: true,
+          value: width,
+        });
+        Object.defineProperty(element, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        element.getBoundingClientRect = () => ({
+          width,
+          height: 30,
+          top: 0,
+          right: width,
+          bottom: 30,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+      }
+
+      const switchButton = bar.shadowRoot.querySelector(
+        '[data-monster-role="switch"]',
+      );
+      Object.defineProperty(switchButton, "offsetWidth", {
+        configurable: true,
+        value: 20,
+      });
+
+      await flushFrames();
+      expect(document.getElementById("sticky-overflow-wide").getAttribute("slot"))
+        .to.equal("popper");
+      expect(document.getElementById("sticky-overflow-small").getAttribute("slot"))
+        .to.equal("popper");
+
+      const resizeObserver = TrackingResizeObserver.instances.find((observer) =>
+        observer.elements.includes(wrapper),
+      );
+      expect(resizeObserver).to.exist;
+
+      wrapperWidth = 190;
+      resizeObserver.triggerResize([{ target: wrapper }]);
+      await flushFrames();
+      expect(switchButton.hasAttribute("hidden")).to.be.false;
+      expect(document.getElementById("sticky-overflow-wide").getAttribute("slot"))
+        .to.equal("popper");
+      expect(document.getElementById("sticky-overflow-small").getAttribute("slot"))
+        .to.equal("popper");
+
+      wrapperWidth = 220;
+      resizeObserver.triggerResize([{ target: wrapper }]);
+      await flushFrames();
+      expect(switchButton.hasAttribute("hidden")).to.be.true;
+      expect(document.getElementById("sticky-overflow-wide").hasAttribute("slot"))
+        .to.be.false;
+      expect(document.getElementById("sticky-overflow-small").hasAttribute("slot"))
+        .to.be.false;
+    } finally {
+      window.ResizeObserver = OriginalResizeObserver;
+      globalThis.ResizeObserver = originalGlobalResizeObserver;
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
   it("should match the stacked breakpoint when the content-box container width is a css string", async function () {
     const originalRequestAnimationFrame = window.requestAnimationFrame;
     const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;