@schukai/monster 4.148.7 → 4.148.8

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.148.7"}
+{"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.148.8"}

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

@@ -43,7 +43,6 @@ import { positionPopper } from "./util/floating-ui.mjs";
 import { convertToPixels } from "../../dom/dimension.mjs";
 import { addErrorAttribute } from "../../dom/error.mjs";
 import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
-import { Processing } from "../../util/processing.mjs";
 export { ControlBar };
 
 /**
@@ -217,7 +216,7 @@ const EVENT_LAYOUT_CHANGED = "monster-control-bar-layout-changed";
  * @type {number}
  */
 const LAYOUT_CHANGED_EVENT_DELAY = 20;
-const LAYOUT_SWITCH_HYSTERESIS = 16;
+const LAYOUT_RESIZE_EPSILON = 0.5;
 
 /**
  * @private
@@ -332,6 +331,8 @@ class ControlBar extends CustomElement {
 			suppressSlotChange: false,
 			suppressMutation: false,
 			suppressResize: false,
+			itemInlineSizes: new WeakMap(),
+			joinedInlineOffsets: new WeakMap(),
 		};
 
 		initControlReferences.call(this);
@@ -643,7 +644,7 @@ function initEventHandler() {
 		if (self[layoutStateSymbol]?.suppressResize) {
 			return;
 		}
-		if (!hasContainerResizeEntry.call(self, entries)) {
+		if (!hasLayoutResizeEntry.call(self, entries)) {
 			return;
 		}
 		scheduleLayout.call(self, { measure: true, layout: true });
@@ -721,7 +722,8 @@ function runLayout() {
 	state.needsLayout = false;
 	state.running = true;
 
-	new Processing(() => {
+	let popperUpdate;
+	try {
 		syncEmptyVisibility.call(this);
 
 		if (needsObserve) {
@@ -741,7 +743,17 @@ function runLayout() {
 
 		if (needsLayout) {
 			try {
-				rearrangeItems.call(this);
+				let shouldStabilize = rearrangeItems.call(this);
+				let stabilizationPass = 0;
+				const maximumStabilizationPasses = this.children.length + 1;
+				while (
+					shouldStabilize &&
+					stabilizationPass < maximumStabilizationPasses
+				) {
+					calculateControlBarDimensions.call(this);
+					shouldStabilize = rearrangeItems.call(this);
+					stabilizationPass++;
+				}
 			} catch (error) {
 				addErrorAttribute(
 					this,
@@ -750,27 +762,40 @@ function runLayout() {
 			}
 		}
 
-		return updatePopper.call(this);
-	})
-		.run()
-		.catch((error) => {
+		try {
+			popperUpdate = updatePopper.call(this);
+		} catch (error) {
 			addErrorAttribute(
 				this,
-				error?.message ||
-					"An error occurred while running the control bar layout",
+				error?.message || "An error occurred while updating the popper",
+			);
+		}
+	} catch (error) {
+		addErrorAttribute(
+			this,
+			error?.message ||
+				"An error occurred while running the control bar layout",
+		);
+	} finally {
+		state.running = false;
+		if (state.needsObserve || state.needsMeasure || state.needsLayout) {
+			scheduleLayoutFrame.call(this);
+		}
+	}
+
+	if (popperUpdate instanceof Promise) {
+		popperUpdate.catch((error) => {
+			addErrorAttribute(
+				this,
+				error?.message || "An error occurred while updating the popper",
 			);
-		})
-		.finally(() => {
-			state.running = false;
-			if (state.needsObserve || state.needsMeasure || state.needsLayout) {
-				scheduleLayoutFrame.call(this);
-			}
 		});
+	}
 }
 
 /**
  * @private
- * @return {Object}
+ * @return {boolean}
  */
 function rearrangeItems() {
 	let space = 0;
@@ -825,7 +850,7 @@ function rearrangeItems() {
 		});
 	}
 
-	const switchWidth = this[dimensionsSymbol].getVia("data.switchWidth") || 2;
+	const switchWidth = this[dimensionsSymbol].getVia("data.switchWidth") || 0;
 
 	const layoutItems = (availableSpace) => {
 		if (availableSpace < 0) {
@@ -854,67 +879,52 @@ function rearrangeItems() {
 		return { visibleItemsInMainSlot, itemsToMoveToPopper };
 	};
 
-	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);
-		}
-	}
+	const totalItemWidth = itemEntries.reduce((sum, entry) => {
+		return entry.hidden ? sum : sum + entry.width;
+	}, 0);
+	const shouldOverflow = totalItemWidth > space;
+	let layout = layoutItems(shouldOverflow ? space - switchWidth : 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);
+	let layoutChanged = false;
 
-	suppressLayoutFeedback.call(this);
 	setLayoutStackedState.call(this, shouldUseStackedLayout);
 
 	for (const item of layout.itemsToMoveToPopper) {
 		if (item.getAttribute("slot") !== "popper") {
 			item.setAttribute("slot", "popper");
+			layoutChanged = true;
 		}
 	}
 
 	for (const item of layout.visibleItemsInMainSlot) {
 		if (item.hasAttribute("slot")) {
 			item.removeAttribute("slot");
+			layoutChanged = true;
 		}
 	}
 
 	setSwitchVisible.call(this, shouldShowSwitch);
-	updateControlSizing.call(this, layout, shouldShowSwitch);
-	updateJoinedBorders.call(this, layout, shouldShowSwitch);
+	layoutChanged =
+		updateControlSizing.call(this, layout, shouldShowSwitch) || layoutChanged;
+	layoutChanged =
+		updateJoinedBorders.call(this, layout, shouldShowSwitch) || layoutChanged;
 	applyLayoutAlignment.call(this);
 	if (!shouldShowSwitch) {
 		hide.call(this);
 	}
 	syncEmptyVisibility.call(this);
+	if (layoutChanged) {
+		suppressLayoutFeedback.call(this);
+	}
+	return layoutChanged;
 }
 
 /**
@@ -1007,88 +1017,6 @@ function isControlItemVisible(item) {
 	});
 }
 
-/**
- * @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
@@ -1160,15 +1088,15 @@ function calcBoxWidth(node) {
 		throw new Error("no computed style");
 	}
 	const bounding = node.getBoundingClientRect();
+	this[layoutStateSymbol]?.itemInlineSizes?.set(node, bounding.width);
+	const joinedInlineOffset =
+		this[layoutStateSymbol]?.joinedInlineOffsets?.get(node) || 0;
 
 	return (
-		getComputedCssPixels(dim["border-left-width"]) +
-		getComputedCssPixels(dim["padding-left"]) +
 		getComputedCssPixels(dim["margin-left"]) +
 		bounding["width"] +
-		getComputedCssPixels(dim["border-right-width"]) +
-		getComputedCssPixels(dim["margin-right"]) +
-		getComputedCssPixels(dim["padding-right"])
+		getComputedCssPixels(dim["margin-right"]) -
+		joinedInlineOffset
 	);
 }
 
@@ -1197,7 +1125,7 @@ function getComputedCssPixels(value) {
  * @private
  * @param {Object} layout
  * @param {boolean} shouldShowSwitch
- * @return {void}
+ * @return {boolean}
  */
 function updateControlSizing(layout, shouldShowSwitch) {
 	const mainItems = [...layout.visibleItemsInMainSlot];
@@ -1206,42 +1134,50 @@ function updateControlSizing(layout, shouldShowSwitch) {
 	}
 
 	const controlItems = [...mainItems, ...layout.itemsToMoveToPopper];
+	let changed = false;
 	for (const element of controlItems) {
-		applyControlSizing.call(this, element);
+		changed = applyControlSizing.call(this, element) || changed;
 	}
+	return changed;
 }
 
 /**
  * @private
  * @param {HTMLElement} element
- * @return {void}
+ * @return {boolean}
  */
 function applyControlSizing(element) {
-	setStylePropertyIfChanged(element, "boxSizing", "border-box");
-	setStylePropertyIfChanged(
-		element,
-		"height",
-		"var(--monster-control-bar-height)",
-	);
-	setStylePropertyIfChanged(
-		element,
-		"minHeight",
-		"var(--monster-control-bar-height)",
-	);
+	let changed = setStylePropertyIfChanged(element, "boxSizing", "border-box");
+	changed =
+		setStylePropertyIfChanged(
+			element,
+			"height",
+			"var(--monster-control-bar-height)",
+		) || changed;
+	changed =
+		setStylePropertyIfChanged(
+			element,
+			"minHeight",
+			"var(--monster-control-bar-height)",
+		) || changed;
 	if (isWrapperElement(element)) {
-		setStylePropertyIfChanged(element, "display", "flex");
-		setStylePropertyIfChanged(element, "alignItems", "stretch");
+		changed = setStylePropertyIfChanged(element, "display", "flex") || changed;
+		changed =
+			setStylePropertyIfChanged(element, "alignItems", "stretch") || changed;
 	}
 
 	for (const control of getContainedControlElements(element)) {
-		setStylePropertyIfChanged(control, "display", "flex");
-		setStylePropertyIfChanged(control, "boxSizing", "border-box");
-		setStylePropertyIfChanged(control, "height", "100%");
-		setStylePropertyIfChanged(control, "minHeight", "0px");
+		changed = setStylePropertyIfChanged(control, "display", "flex") || changed;
+		changed =
+			setStylePropertyIfChanged(control, "boxSizing", "border-box") || changed;
+		changed = setStylePropertyIfChanged(control, "height", "100%") || changed;
+		changed = setStylePropertyIfChanged(control, "minHeight", "0px") || changed;
 		if (control.tagName === "MONSTER-INPUT-GROUP") {
-			setStylePropertyIfChanged(control, "flex", "1 1 auto");
+			changed =
+				setStylePropertyIfChanged(control, "flex", "1 1 auto") || changed;
 		}
 	}
+	return changed;
 }
 
 /**
@@ -1295,7 +1231,7 @@ function isTopLevelContainedControl(container, control) {
  * @private
  * @param {Object} layout
  * @param {boolean} shouldShowSwitch
- * @return {void}
+ * @return {boolean}
  */
 function updateJoinedBorders(layout, shouldShowSwitch) {
 	const mainItems = [...layout.visibleItemsInMainSlot];
@@ -1331,7 +1267,11 @@ function updateJoinedBorders(layout, shouldShowSwitch) {
 		"bottom",
 		"top",
 	);
-	applyJoinedBorderOffsets.call(this, marginLeftByElement, marginTopByElement);
+	return applyJoinedBorderOffsets.call(
+		this,
+		marginLeftByElement,
+		marginTopByElement,
+	);
 }
 
 /**
@@ -1432,21 +1372,26 @@ function collectBlockJoinedBorders(elements, marginTopByElement) {
  * @private
  * @param {Map<HTMLElement, string>} marginLeftByElement
  * @param {Map<HTMLElement, string>} marginTopByElement
- * @return {void}
+ * @return {boolean}
  */
 function applyJoinedBorderOffsets(marginLeftByElement, marginTopByElement) {
+	let changed = false;
 	for (const element of getJoinedBorderOffsetElements.call(this)) {
-		setStylePropertyIfChanged(
+		const marginLeft = marginLeftByElement.get(element) || "";
+		changed =
+			setStylePropertyIfChanged(element, "marginLeft", marginLeft) || changed;
+		this[layoutStateSymbol]?.joinedInlineOffsets?.set(
 			element,
-			"marginLeft",
-			marginLeftByElement.get(element) || "",
-		);
-		setStylePropertyIfChanged(
-			element,
-			"marginTop",
-			marginTopByElement.get(element) || "",
+			getComputedCssPixels(marginLeft),
 		);
+		changed =
+			setStylePropertyIfChanged(
+				element,
+				"marginTop",
+				marginTopByElement.get(element) || "",
+			) || changed;
 	}
+	return changed;
 }
 
 /**
@@ -1472,7 +1417,7 @@ function getJoinedBorderOffsetElements() {
  * @param {HTMLElement} element
  * @param {"marginLeft"|"marginTop"} property
  * @param {string} value
- * @return {void}
+ * @return {boolean}
  */
 function setStylePropertyIfChanged(element, property, value) {
 	if (property.startsWith("--")) {
@@ -1482,13 +1427,16 @@ function setStylePropertyIfChanged(element, property, value) {
 			} else {
 				element.style.setProperty(property, value);
 			}
+			return true;
 		}
-		return;
+		return false;
 	}
 
 	if (element.style[property] !== value) {
 		element.style[property] = value;
+		return true;
 	}
+	return false;
 }
 
 /**
@@ -1667,10 +1615,13 @@ function calculateControlBarDimensions() {
 	}
 
 	if (this[switchElementSymbol]) {
-		this[dimensionsSymbol].setVia(
-			"data.switchWidth",
-			this[switchElementSymbol].offsetWidth,
-		);
+		let cachedSwitchWidth = 0;
+		try {
+			cachedSwitchWidth =
+				this[dimensionsSymbol].getVia("data.switchWidth") || 0;
+		} catch {}
+		const switchWidth = measureSwitchWidth.call(this, cachedSwitchWidth);
+		this[dimensionsSymbol].setVia("data.switchWidth", switchWidth);
 	}
 
 	this[dimensionsSymbol].setVia("data.calculated", true);
@@ -1836,17 +1787,101 @@ function suppressLayoutFeedback() {
  * @param {ResizeObserverEntry[]} entries
  * @return {boolean}
  */
-function hasContainerResizeEntry(entries) {
+function hasLayoutResizeEntry(entries) {
 	const stackedBreakpointContainer =
 		resolveStackedBreakpointContainer.call(this);
 	return entries.some((entry) => {
-		return (
+		if (
 			entry.target === this.parentElement ||
 			entry.target === stackedBreakpointContainer
+		) {
+			return true;
+		}
+
+		if (
+			!(entry.target instanceof HTMLElement) ||
+			entry.target.parentElement !== this
+		) {
+			return false;
+		}
+
+		const inlineSize = entry.target.getBoundingClientRect().width;
+		if (!(inlineSize > 0)) {
+			return false;
+		}
+
+		const itemInlineSizes = this[layoutStateSymbol]?.itemInlineSizes;
+		if (!(itemInlineSizes instanceof WeakMap)) {
+			return true;
+		}
+
+		const previousInlineSize = itemInlineSizes.get(entry.target);
+		itemInlineSizes.set(entry.target, inlineSize);
+		return (
+			typeof previousInlineSize !== "number" ||
+			Math.abs(previousInlineSize - inlineSize) > LAYOUT_RESIZE_EPSILON
 		);
 	});
 }
 
+/**
+ * Measure the overflow switch without exposing it visually. A switch hidden
+ * with `display: none` has no layout width, so it must be made measurable for
+ * the duration of the synchronous read.
+ *
+ * @private
+ * @param {number} cachedWidth
+ * @return {number}
+ */
+function measureSwitchWidth(cachedWidth = 0) {
+	const element = this[switchElementSymbol];
+	if (!(element instanceof HTMLElement)) {
+		return 0;
+	}
+
+	const visibleWidth = element.offsetWidth;
+	if (visibleWidth > 0) {
+		return visibleWidth;
+	}
+	if (cachedWidth > 0) {
+		return cachedWidth;
+	}
+
+	const hadHiddenAttribute = element.hasAttribute("hidden");
+	const hadHiddenClass = element.classList.contains("hidden");
+	const previousVisibility = element.style.getPropertyValue("visibility");
+	const previousVisibilityPriority =
+		element.style.getPropertyPriority("visibility");
+
+	element.style.setProperty("visibility", "hidden", "important");
+	if (hadHiddenAttribute) {
+		element.removeAttribute("hidden");
+	}
+	if (hadHiddenClass) {
+		element.classList.remove("hidden");
+	}
+
+	const measuredWidth = element.offsetWidth;
+
+	if (hadHiddenClass) {
+		element.classList.add("hidden");
+	}
+	if (hadHiddenAttribute) {
+		element.setAttribute("hidden", "");
+	}
+	if (previousVisibility === "") {
+		element.style.removeProperty("visibility");
+	} else {
+		element.style.setProperty(
+			"visibility",
+			previousVisibility,
+			previousVisibilityPriority,
+		);
+	}
+
+	return measuredWidth;
+}
+
 /**
  * @private
  * @param {boolean} visible

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

@@ -1439,7 +1439,7 @@ describe("ControlBar", function () {
     }
   });
 
-  it("should keep the overflow switch stable across the switch-width threshold", async function () {
+  it("should produce the same overflow layout across repeated switch-width threshold crossings", async function () {
     const OriginalResizeObserver = window.ResizeObserver;
     const originalGlobalResizeObserver = globalThis.ResizeObserver;
     const originalRequestAnimationFrame = window.requestAnimationFrame;
@@ -1524,7 +1524,11 @@ describe("ControlBar", function () {
       );
       Object.defineProperty(switchButton, "offsetWidth", {
         configurable: true,
-        value: 20,
+        get: () =>
+          switchButton.hasAttribute("hidden") ||
+          switchButton.classList.contains("hidden")
+            ? 0
+            : 20,
       });
 
       await flushFrames();
@@ -1538,25 +1542,25 @@ describe("ControlBar", function () {
       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");
+      expect(switchButton.hasAttribute("hidden")).to.be.true;
+      expect(document.getElementById("threshold-three").hasAttribute("slot")).to
+        .be.false;
 
-      wrapperWidth = 175;
+      wrapperWidth = 145;
       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;
+      wrapperWidth = 155;
       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;
+      wrapperWidth = 145;
       resizeObserver.triggerResize([{ target: wrapper }]);
       await flushFrames();
       expect(switchButton.hasAttribute("hidden")).to.be.false;
@@ -1570,6 +1574,201 @@ describe("ControlBar", function () {
     }
   });
 
+  it("should not count rendered padding and borders twice when controls 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="border-box-wrapper">
+          <monster-control-bar id="border-box-bar">
+            <button id="border-box-one" style="padding: 10px; border: 2px solid">One</button>
+            <button id="border-box-two" style="padding: 10px; border: 2px solid">Two</button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("border-box-wrapper");
+      const bar = document.getElementById("border-box-bar");
+      const buttons = [
+        document.getElementById("border-box-one"),
+        document.getElementById("border-box-two"),
+      ];
+
+      wrapper.style.boxSizing = "border-box";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 130,
+      });
+
+      for (const button of buttons) {
+        Object.defineProperty(button, "offsetWidth", {
+          configurable: true,
+          value: 60,
+        });
+        Object.defineProperty(button, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        button.getBoundingClientRect = () => ({
+          width: 60,
+          height: 30,
+          top: 0,
+          right: 60,
+          bottom: 30,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+      }
+
+      const switchButton = bar.shadowRoot.querySelector(
+        '[data-monster-role="switch"]',
+      );
+      Object.defineProperty(switchButton, "offsetWidth", {
+        configurable: true,
+        get: () =>
+          switchButton.hasAttribute("hidden") ||
+          switchButton.classList.contains("hidden")
+            ? 0
+            : 20,
+      });
+
+      await flushFrames();
+
+      expect(switchButton.hasAttribute("hidden")).to.be.true;
+      expect(buttons.every((button) => !button.hasAttribute("slot"))).to.be.true;
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
+  it("should recalculate overflow when a visible control width 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="item-resize-wrapper">
+          <monster-control-bar id="item-resize-bar">
+            <button id="item-resize-one">One</button>
+            <button id="item-resize-two">Two</button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("item-resize-wrapper");
+      const bar = document.getElementById("item-resize-bar");
+      const buttons = [
+        document.getElementById("item-resize-one"),
+        document.getElementById("item-resize-two"),
+      ];
+      const widths = [60, 60];
+
+      wrapper.style.boxSizing = "border-box";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 160,
+      });
+
+      buttons.forEach((button, index) => {
+        Object.defineProperty(button, "offsetWidth", {
+          configurable: true,
+          get: () => widths[index],
+        });
+        Object.defineProperty(button, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        button.getBoundingClientRect = () => ({
+          width: widths[index],
+          height: 30,
+          top: 0,
+          right: widths[index],
+          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(buttons.every((button) => !button.hasAttribute("slot"))).to.be.true;
+
+      const resizeObserver = TrackingResizeObserver.instances.find((observer) =>
+        observer.elements.includes(wrapper),
+      );
+      expect(resizeObserver).to.exist;
+
+      widths[0] = 110;
+      resizeObserver.triggerResize([{ target: buttons[0] }]);
+      expect(scheduledCallbacks.length).to.equal(1);
+      await flushFrames();
+
+      expect(buttons[0].hasAttribute("slot")).to.be.false;
+      expect(buttons[1].getAttribute("slot")).to.equal("popper");
+      expect(switchButton.hasAttribute("hidden")).to.be.false;
+    } 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;
@@ -1787,7 +1986,7 @@ describe("ControlBar", function () {
     }
   });
 
-  it("should keep the previous overflow boundary while the switch remains visible", async function () {
+  it("should restore the maximal fitting prefix regardless of resize direction", async function () {
     const OriginalResizeObserver = window.ResizeObserver;
     const originalGlobalResizeObserver = globalThis.ResizeObserver;
     const originalRequestAnimationFrame = window.requestAnimationFrame;
@@ -1890,13 +2089,22 @@ describe("ControlBar", function () {
       wrapperWidth = 190;
       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;
+
+      wrapperWidth = 90;
+      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;
+      wrapperWidth = 190;
       resizeObserver.triggerResize([{ target: wrapper }]);
       await flushFrames();
       expect(switchButton.hasAttribute("hidden")).to.be.true;