@schukai/monster 4.145.1 → 4.145.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.145.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.145.3"}

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

@@ -219,6 +219,35 @@ const EVENT_LAYOUT_CHANGED = "monster-control-bar-layout-changed";
 const LAYOUT_CHANGED_EVENT_DELAY = 20;
 const LAYOUT_SWITCH_HYSTERESIS = 16;
 
+/**
+ * @private
+ * @type {string}
+ */
+const CONTAINED_CONTROL_SELECTOR = [
+	"monster-input-group",
+	"monster-select",
+	"monster-button",
+	"monster-state-button",
+	"monster-message-state-button",
+	"monster-action-button",
+	"monster-api-button",
+	"monster-confirm-button",
+	"monster-popper-button",
+].join(",");
+
+/**
+ * @private
+ * @type {string}
+ */
+const VISUAL_BORDER_CONTROL_SELECTOR = [
+	"button",
+	"input",
+	"select",
+	"textarea",
+	CONTAINED_CONTROL_SELECTOR,
+	"[data-monster-role=control]",
+].join(",");
+
 /**
  * A control bar control.
  *
@@ -503,6 +532,12 @@ function initEventHandler() {
 
 	const mutationCallback = (mutationList) => {
 		if (self[layoutStateSymbol]?.suppressMutation) {
+			mutationList = mutationList.filter(
+				(mutation) => mutation.attributeName !== "style",
+			);
+		}
+
+		if (mutationList.length === 0) {
 			return;
 		}
 
@@ -1213,24 +1248,36 @@ function isWrapperElement(element) {
  * @return {HTMLElement[]}
  */
 function getContainedControlElements(element) {
-	if (!isWrapperElement(element)) {
+	if (element.matches(CONTAINED_CONTROL_SELECTOR)) {
 		return [];
 	}
 
 	return Array.from(
-		element.querySelectorAll(
-			[
-				"monster-input-group",
-				"monster-select",
-				"monster-button",
-				"monster-state-button",
-				"monster-message-state-button",
-				"monster-action-button",
-				"monster-api-button",
-				"monster-confirm-button",
-			].join(","),
-		),
-	).filter((control) => control instanceof HTMLElement);
+		element.querySelectorAll(CONTAINED_CONTROL_SELECTOR),
+	).filter((control) => {
+		return (
+			control instanceof HTMLElement &&
+			isTopLevelContainedControl(element, control)
+		);
+	});
+}
+
+/**
+ * @private
+ * @param {HTMLElement} container
+ * @param {HTMLElement} control
+ * @return {boolean}
+ */
+function isTopLevelContainedControl(container, control) {
+	let parent = control.parentElement;
+	while (parent instanceof HTMLElement && parent !== container) {
+		if (parent.matches(CONTAINED_CONTROL_SELECTOR)) {
+			return false;
+		}
+		parent = parent.parentElement;
+	}
+
+	return true;
 }
 
 /**
@@ -1253,6 +1300,13 @@ function updateJoinedBorders(layout, shouldShowSwitch) {
 	const marginTopByElement = new Map();
 
 	collectInlineJoinedBorders.call(this, mainItems, marginLeftByElement);
+	for (const item of [...mainItems, ...layout.itemsToMoveToPopper]) {
+		collectInlineJoinedBorders.call(
+			this,
+			getContainedControlElements(item),
+			marginLeftByElement,
+		);
+	}
 	collectBlockJoinedBorders.call(
 		this,
 		layout.itemsToMoveToPopper,
@@ -1392,6 +1446,9 @@ function getJoinedBorderOffsetElements() {
 	const elements = Array.from(this.children).filter(
 		(element) => element instanceof HTMLElement,
 	);
+	for (const element of [...elements]) {
+		elements.push(...getContainedControlElements(element));
+	}
 	if (this[popperNavElementSymbol] instanceof HTMLElement) {
 		elements.push(this[popperNavElementSymbol]);
 	}
@@ -1458,22 +1515,6 @@ function getVisualBorderElement(element, side) {
 		return this[switchElementSymbol] || element;
 	}
 
-	const selector = [
-		"button",
-		"input",
-		"select",
-		"textarea",
-		"monster-input-group",
-		"monster-select",
-		"monster-button",
-		"monster-state-button",
-		"monster-message-state-button",
-		"monster-action-button",
-		"monster-api-button",
-		"monster-confirm-button",
-		"monster-popper-button",
-		"[data-monster-role=control]",
-	].join(",");
 	if (element.shadowRoot instanceof ShadowRoot) {
 		const primaryControl = element.shadowRoot.querySelector(
 			"[data-monster-role=button],button,input,select,textarea",
@@ -1482,7 +1523,9 @@ function getVisualBorderElement(element, side) {
 			return getVisualBorderElement.call(this, primaryControl, side);
 		}
 
-		const control = element.shadowRoot.querySelector(selector);
+		const control = element.shadowRoot.querySelector(
+			VISUAL_BORDER_CONTROL_SELECTOR,
+		);
 		if (control instanceof HTMLElement && control !== element) {
 			return getVisualBorderElement.call(this, control, side);
 		}
@@ -1490,9 +1533,9 @@ function getVisualBorderElement(element, side) {
 		return element;
 	}
 
-	const candidates = Array.from(element.querySelectorAll(selector)).filter(
-		(candidate) => candidate instanceof HTMLElement,
-	);
+	const candidates = Array.from(
+		element.querySelectorAll(VISUAL_BORDER_CONTROL_SELECTOR),
+	).filter((candidate) => candidate instanceof HTMLElement);
 	if (candidates.length === 0) {
 		return element;
 	}

package/source/components/layout/tabs.mjs

@@ -86,6 +86,12 @@ const controlElementSymbol = Symbol("controlElement");
  * @type {symbol}
  */
 const navElementSymbol = Symbol("navElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const measurementNavElementSymbol = Symbol("measurementNavElement");
 /**
  * @private
  * @type {symbol}
@@ -154,6 +160,28 @@ const resizeObserverSymbol = Symbol("resizeObserver");
  */
 const activeReferenceSymbol = Symbol("activeReference");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const rearrangeFrameSymbol = Symbol("rearrangeFrame");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const buttonCollectionsSignatureSymbol = Symbol("buttonCollectionsSignature");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const layoutSignatureHistorySymbol = Symbol("layoutSignatureHistory");
+
+const LAYOUT_SWITCH_HYSTERESIS = 16;
+const LAYOUT_OSCILLATION_HISTORY_LIMIT = 4;
+const LAYOUT_OSCILLATION_TIME_WINDOW_MS = 1000;
+
 /**
  * A Tabs Control
  *
@@ -553,6 +581,13 @@ class Tabs extends CustomElement {
 
 		this[popperInstanceSymbol]?.destroy();
 		this[tabListMutationObserverSymbol]?.disconnect();
+		this[resizeObserverSymbol]?.disconnect();
+		if (this[rearrangeFrameSymbol] !== undefined) {
+			getWindow().cancelAnimationFrame(this[rearrangeFrameSymbol]);
+			delete this[rearrangeFrameSymbol];
+		}
+		this[measurementNavElementSymbol]?.remove();
+		delete this[measurementNavElementSymbol];
 	}
 }
 
@@ -1327,6 +1362,8 @@ function initTabButtons() {
 		throw new Error("no shadow-root is defined");
 	}
 
+	resetLayoutSignatureHistory.call(this);
+
 	let activeReference;
 	let invalidActive = false;
 	const previousActiveReference = this[activeReferenceSymbol] || null;
@@ -1408,8 +1445,11 @@ function initTabButtons() {
 		});
 	}
 
-	setButtonCollections.call(this, buttons, []);
+	const { standardButtons, popperButtons } =
+		splitButtonsByCurrentPopperReferences.call(this, buttons);
+	setButtonCollections.call(this, standardButtons, popperButtons);
 	this.setOption("marker", random());
+	this[dimensionsSymbol].setVia("data.calculated", false);
 
 	return adjustButtonVisibility.call(this).then(() => {
 		if (
@@ -1491,7 +1531,9 @@ function adjustButtonVisibility() {
 		const runIfRendered = () => {
 			if (resolved === true) return;
 
-			const defCount = self.getOption("buttons.standard").length;
+			const defCount =
+				self.getOption("buttons.standard").length +
+				self.getOption("buttons.popper").length;
 			const domCount = self[navElementSymbol].querySelectorAll(
 				'button[data-monster-role="button"][data-monster-tab-reference]',
 			).length;
@@ -1529,7 +1571,7 @@ function getDimValue(value) {
 		return 0;
 	}
 
-	const valueAsInt = parseInt(value, 10);
+	const valueAsInt = parseFloat(value);
 
 	if (isNaN(valueAsInt)) {
 		return 0;
@@ -1554,7 +1596,7 @@ function calcBoxWidth(node) {
 		getDimValue(bounding["width"]) +
 		getDimValue(dim["border-right-width"]) +
 		getDimValue(dim["margin-right"]) +
-		getDimValue(dim["padding-left"])
+		getDimValue(dim["padding-right"])
 	);
 }
 
@@ -1563,10 +1605,13 @@ function calcBoxWidth(node) {
  * @return {Object}
  */
 function rearrangeButtons() {
-	getWindow().requestAnimationFrame(() => {
-		const standardButtons = [];
-		const popperButtons = [];
-		let sum = 0;
+	if (this[rearrangeFrameSymbol] !== undefined) {
+		return;
+	}
+
+	this[rearrangeFrameSymbol] = getWindow().requestAnimationFrame(() => {
+		delete this[rearrangeFrameSymbol];
+
 		const space = this[dimensionsSymbol].getVia("data.space");
 
 		if (space <= 0) {
@@ -1576,16 +1621,30 @@ function rearrangeButtons() {
 		const buttons = this.getOption("buttons.standard").concat(
 			this.getOption("buttons.popper"),
 		);
-		for (const [, button] of buttons.entries()) {
-			const ref = button?.reference;
-
-			sum += resolveButtonWidth.call(this, ref);
+		const widths = buttons.map((button) =>
+			resolveButtonWidth.call(this, button?.reference),
+		);
+		const switchWidth = resolveSwitchWidth.call(this);
+		const switchCurrentlyVisible =
+			this[switchElementSymbol] instanceof HTMLElement &&
+			!this[switchElementSymbol].classList.contains("hidden");
+		const { standardButtons, popperButtons } = resolveOverflowButtonLayout({
+			buttons,
+			widths,
+			space,
+			switchWidth,
+			switchCurrentlyVisible,
+		});
 
-			if (sum > space) {
-				popperButtons.push(clone(button));
-			} else {
-				standardButtons.push(clone(button));
-			}
+		if (
+			shouldSuppressOscillatingTabLayout.call(
+				this,
+				space,
+				standardButtons,
+				popperButtons,
+			)
+		) {
+			return;
 		}
 
 		setButtonCollections.call(this, standardButtons, popperButtons);
@@ -1594,6 +1653,74 @@ function rearrangeButtons() {
 	});
 }
 
+/**
+ * @private
+ * @param {Object} options
+ * @param {Object[]} options.buttons
+ * @param {number[]} options.widths
+ * @param {number} options.space
+ * @param {number} options.switchWidth
+ * @param {boolean} options.switchCurrentlyVisible
+ * @return {{standardButtons: Object[], popperButtons: Object[]}}
+ */
+function resolveOverflowButtonLayout({
+	buttons,
+	widths,
+	space,
+	switchWidth,
+	switchCurrentlyVisible,
+}) {
+	let layout;
+	if (switchCurrentlyVisible) {
+		layout = fitButtonsIntoSpace(
+			buttons,
+			widths,
+			space - switchWidth - LAYOUT_SWITCH_HYSTERESIS,
+		);
+		if (layout.popperButtons.length === 0) {
+			layout = fitButtonsIntoSpace(buttons, widths, space);
+		}
+		return layout;
+	}
+
+	layout = fitButtonsIntoSpace(
+		buttons,
+		widths,
+		space - LAYOUT_SWITCH_HYSTERESIS,
+	);
+	if (layout.popperButtons.length > 0) {
+		return fitButtonsIntoSpace(buttons, widths, space - switchWidth);
+	}
+
+	return fitButtonsIntoSpace(buttons, widths, space);
+}
+
+/**
+ * @private
+ * @param {Object[]} buttons
+ * @param {number[]} widths
+ * @param {number} availableSpace
+ * @return {{standardButtons: Object[], popperButtons: Object[]}}
+ */
+function fitButtonsIntoSpace(buttons, widths, availableSpace) {
+	let sum = 0;
+	const standardButtons = [];
+	const popperButtons = [];
+	const boundedSpace = Math.max(0, availableSpace);
+
+	for (const [index, button] of buttons.entries()) {
+		const width = widths[index];
+		if (popperButtons.length > 0 || sum + width > boundedSpace) {
+			popperButtons.push(clone(button));
+		} else {
+			sum += width;
+			standardButtons.push(clone(button));
+		}
+	}
+
+	return { standardButtons, popperButtons };
+}
+
 /**
  * @private
  */
@@ -1625,11 +1752,131 @@ function resolveButtonWidth(ref) {
 		return 0;
 	}
 
-	width = calcBoxWidth.call(this, element);
-	this[dimensionsSymbol].setVia(`data.button.${ref}`, width);
+	width = measureButtonWidth.call(this, element);
+	if (width > 0) {
+		this[dimensionsSymbol].setVia(`data.button.${ref}`, width);
+	}
+	return width;
+}
+
+/**
+ * @private
+ * @param {boolean} force
+ * @return {number}
+ */
+function resolveSwitchWidth(force = false) {
+	let width = this[dimensionsSymbol].getVia("data.switchWidth", 0);
+	if (force !== true && width > 0) {
+		return width;
+	}
+
+	if (!(this[switchElementSymbol] instanceof HTMLElement)) {
+		return 0;
+	}
+
+	width = measureElementWidthInNavigation.call(this, this[switchElementSymbol], {
+		removeHiddenClass: true,
+	});
+	this[dimensionsSymbol].setVia("data.switchWidth", width);
+	return width;
+}
+
+/**
+ * @private
+ * @param {HTMLButtonElement} element
+ * @return {number}
+ */
+function measureButtonWidth(element) {
+	if (
+		element.closest(`[${ATTRIBUTE_ROLE}=popper-nav]`) instanceof HTMLElement
+	) {
+		return measureButtonWidthInNavigation.call(this, element);
+	}
+
+	const width = calcBoxWidth.call(this, element);
+	if (width > 0) {
+		return width;
+	}
+
+	return measureButtonWidthInNavigation.call(this, element);
+}
+
+/**
+ * @private
+ * @param {HTMLButtonElement} element
+ * @return {number}
+ */
+function measureButtonWidthInNavigation(element) {
+	return measureElementWidthInNavigation.call(this, element);
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @param {{removeHiddenClass?: boolean}} options
+ * @return {number}
+ */
+function measureElementWidthInNavigation(element, options = {}) {
+	const measurementNav = ensureMeasurementNav.call(this);
+	const cloneElement = element.cloneNode(true);
+	prepareMeasurementElement(cloneElement, options);
+
+	measurementNav.appendChild(cloneElement);
+	const width = calcBoxWidth.call(this, cloneElement);
+	cloneElement.remove();
+
 	return width;
 }
 
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @param {{removeHiddenClass?: boolean}} options
+ * @return {void}
+ */
+function prepareMeasurementElement(element, options = {}) {
+	element.setAttribute("aria-hidden", "true");
+	element.setAttribute("tabindex", "-1");
+	element.removeAttribute("data-monster-tab-reference");
+	element.removeAttribute("id");
+	element.dataset.monsterMeasurement = "true";
+
+	if (options.removeHiddenClass === true) {
+		element.classList.remove("hidden");
+	}
+
+	element.style.position = "";
+	element.style.visibility = "";
+	element.style.pointerEvents = "";
+	element.style.inset = "";
+}
+
+/**
+ * @private
+ * @return {HTMLElement}
+ */
+function ensureMeasurementNav() {
+	if (this[measurementNavElementSymbol] instanceof HTMLElement) {
+		return this[measurementNavElementSymbol];
+	}
+
+	const nav = getDocument().createElement("nav");
+	nav.setAttribute(ATTRIBUTE_ROLE, "nav");
+	nav.setAttribute("aria-hidden", "true");
+	nav.dataset.monsterMeasurement = "true";
+	nav.style.position = "absolute";
+	nav.style.visibility = "hidden";
+	nav.style.pointerEvents = "none";
+	nav.style.inset = "0 auto auto 0";
+	nav.style.width = "max-content";
+	nav.style.height = "auto";
+	nav.style.overflow = "visible";
+
+	this[controlElementSymbol].appendChild(nav);
+	this[measurementNavElementSymbol] = nav;
+	return nav;
+}
+
 /**
  * Keep the main navigation and popper navigation models in sync with one update.
  *
@@ -1641,12 +1888,86 @@ function resolveButtonWidth(ref) {
  * @param {Object[]} popperButtons
  */
 function setButtonCollections(standardButtons, popperButtons) {
+	const signature = getButtonCollectionsSignature(standardButtons, popperButtons);
+	if (this[buttonCollectionsSignatureSymbol] === signature) {
+		return;
+	}
+
+	const currentSignature = getButtonCollectionsSignature(
+		this.getOption("buttons.standard", []),
+		this.getOption("buttons.popper", []),
+	);
+	if (currentSignature === signature) {
+		this[buttonCollectionsSignatureSymbol] = signature;
+		return;
+	}
+
+	this[buttonCollectionsSignatureSymbol] = signature;
 	this.setOption("buttons", {
 		standard: clone(standardButtons),
 		popper: clone(popperButtons),
 	});
 }
 
+/**
+ * @private
+ * @param {Object[]} standardButtons
+ * @param {Object[]} popperButtons
+ * @return {string}
+ */
+function getButtonCollectionsSignature(standardButtons, popperButtons) {
+	return JSON.stringify({
+		standard: standardButtons.map(getButtonSignature),
+		popper: popperButtons.map(getButtonSignature),
+	});
+}
+
+/**
+ * @private
+ * @param {Object} button
+ * @return {Object}
+ */
+function getButtonSignature(button) {
+	return {
+		reference: button?.reference,
+		name: button?.name,
+		tab: button?.tab,
+		label: button?.label,
+		error: button?.error,
+		state: button?.state,
+		class: button?.class,
+		disabled: button?.disabled,
+		title: button?.title,
+		"aria-label": button?.["aria-label"],
+		remove: button?.remove,
+		kind: button?.kind,
+		priority: button?.priority,
+		group: button?.group,
+	};
+}
+
+/**
+ * @private
+ * @param {Object[]} buttons
+ * @return {{standardButtons: Object[], popperButtons: Object[]}}
+ */
+function splitButtonsByCurrentPopperReferences(buttons) {
+	const popperReferences = new Set(
+		this.getOption("buttons.popper", []).map((button) => button.reference),
+	);
+	const standardButtons = [];
+	const popperButtons = [];
+	for (const button of buttons) {
+		if (popperReferences.has(button.reference)) {
+			popperButtons.push(button);
+		} else {
+			standardButtons.push(button);
+		}
+	}
+
+	return { standardButtons, popperButtons };
+}
+
 /**
  * @private
  * @return {Object}
@@ -1676,10 +1997,10 @@ function calculateNavigationButtonsDimensions() {
 		const element = findButtonElement.call(this, ref);
 		if (!(element instanceof HTMLButtonElement)) continue;
 
-		this[dimensionsSymbol].setVia(
-			`data.button.${ref}`,
-			calcBoxWidth.call(this, element),
-		);
+		const width = measureButtonWidth.call(this, element);
+		if (width > 0) {
+			this[dimensionsSymbol].setVia(`data.button.${ref}`, width);
+		}
 		button["class"] = new TokenList(button["class"])
 			.remove("invisible")
 			.toString();
@@ -1692,13 +2013,81 @@ function calculateNavigationButtonsDimensions() {
 		slot.classList.remove("invisible");
 	}
 
-	setButtonCollections.call(this, buttons, []);
+	const { standardButtons, popperButtons } =
+		splitButtonsByCurrentPopperReferences.call(this, buttons);
+
+	resolveSwitchWidth.call(this, true);
+	setButtonCollections.call(this, standardButtons, popperButtons);
 
 	getWindow().requestAnimationFrame(() => {
 		this[dimensionsSymbol].setVia("data.calculated", true);
 	});
 }
 
+/**
+ * @private
+ * @param {number} space
+ * @param {Object[]} standardButtons
+ * @param {Object[]} popperButtons
+ * @return {boolean}
+ */
+function shouldSuppressOscillatingTabLayout(
+	space,
+	standardButtons,
+	popperButtons,
+) {
+	const signature = [
+		Math.round(space),
+		standardButtons.map((button) => button.reference).join(","),
+		popperButtons.map((button) => button.reference).join(","),
+	].join("|");
+
+	const history = this[layoutSignatureHistorySymbol] || [];
+	history.push({
+		signature,
+		time: performanceNow(),
+	});
+	while (history.length > LAYOUT_OSCILLATION_HISTORY_LIMIT) {
+		history.shift();
+	}
+	this[layoutSignatureHistorySymbol] = history;
+
+	if (history.length < LAYOUT_OSCILLATION_HISTORY_LIMIT) {
+		return false;
+	}
+
+	const [first, second, third, fourth] = history;
+	if (fourth.time - first.time > LAYOUT_OSCILLATION_TIME_WINDOW_MS) {
+		return false;
+	}
+
+	return (
+		first.signature !== second.signature &&
+		first.signature === third.signature &&
+		second.signature === fourth.signature
+	);
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function resetLayoutSignatureHistory() {
+	delete this[layoutSignatureHistorySymbol];
+}
+
+/**
+ * @private
+ * @return {number}
+ */
+function performanceNow() {
+	const globalObject = getGlobal();
+	if (globalObject?.performance?.now instanceof Function) {
+		return globalObject.performance.now();
+	}
+	return Date.now();
+}
+
 /**
  * @private
  * @param {string} ref

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

@@ -140,15 +140,17 @@ describe("ButtonBar", function () {
     const bar = document.getElementById("dynamic-auto-hidden-button-bar");
     const button = document.getElementById("dynamic-auto-hidden-button");
 
-    await waitForLayout();
-
-    expect(bar.hasAttribute("hidden")).to.be.true;
+    await waitForCondition(() => {
+      return bar.hasAttribute("hidden");
+    });
 
     button.removeAttribute("hidden");
-    await waitForLayout();
-
-    expect(bar.hasAttribute("hidden")).to.be.false;
-    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.false;
+    await waitForCondition(() => {
+      return (
+        !bar.hasAttribute("hidden") &&
+        !bar.hasAttribute("data-monster-empty-hidden")
+      );
+    });
   });
 
   it("should keep an auto-hidden button bar visible when buttons overflow into the popper", async function () {

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

@@ -633,6 +633,123 @@ describe("ControlBar", function () {
     }
   });
 
+  it("should size and join popper buttons inside custom control wrappers", 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="custom-wrapper-border-bar-wrapper">
+          <monster-control-bar id="custom-wrapper-border-bar">
+            <nucleus-workflow-transition-control id="custom-wrapper-workflow">
+              <monster-popper-button id="custom-wrapper-release">
+                <span slot="button">Release order</span>
+              </monster-popper-button>
+              <monster-popper-button id="custom-wrapper-cancel">
+                <span slot="button">Cancel order</span>
+              </monster-popper-button>
+            </nucleus-workflow-transition-control>
+            <nucleus-follow-ups-action id="custom-wrapper-follow-up">
+              <monster-popper-button id="custom-wrapper-follow-up-button">
+                <span slot="button">Create follow-up</span>
+                <monster-message-state-button id="custom-wrapper-follow-up-submit">
+                  Create follow-up
+                </monster-message-state-button>
+              </monster-popper-button>
+            </nucleus-follow-ups-action>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById(
+        "custom-wrapper-border-bar-wrapper",
+      );
+      const workflow = document.getElementById("custom-wrapper-workflow");
+      const followUp = document.getElementById("custom-wrapper-follow-up");
+      const release = document.getElementById("custom-wrapper-release");
+      const cancel = document.getElementById("custom-wrapper-cancel");
+      const followUpButton = document.getElementById(
+        "custom-wrapper-follow-up-button",
+      );
+      const followUpSubmit = document.getElementById(
+        "custom-wrapper-follow-up-submit",
+      );
+
+      wrapper.style.boxSizing = "border-box";
+      wrapper.style.width = "500px";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 500,
+      });
+
+      for (const control of [workflow, followUp]) {
+        Object.defineProperty(control, "offsetWidth", {
+          configurable: true,
+          value: 160,
+        });
+        Object.defineProperty(control, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        control.getBoundingClientRect = () => ({
+          width: 160,
+          height: 30,
+          top: 0,
+          right: 160,
+          bottom: 30,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+      }
+
+      const releaseInnerButton = release.shadowRoot?.querySelector(
+        '[data-monster-role="button"]',
+      );
+      const cancelInnerButton = cancel.shadowRoot?.querySelector(
+        '[data-monster-role="button"]',
+      );
+      const followUpInnerButton = followUpButton.shadowRoot?.querySelector(
+        '[data-monster-role="button"]',
+      );
+
+      releaseInnerButton.style.borderRightWidth = "3px";
+      cancelInnerButton.style.borderLeftWidth = "3px";
+      cancelInnerButton.style.borderRightWidth = "2px";
+      followUpInnerButton.style.borderLeftWidth = "2px";
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(release.style.height).to.equal("100%");
+      expect(cancel.style.height).to.equal("100%");
+      expect(followUpButton.style.height).to.equal("100%");
+      expect(cancel.style.marginLeft).to.equal("-3px");
+      expect(followUp.style.marginLeft).to.equal("-2px");
+      expect(followUpSubmit.style.height).to.equal("");
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
   it("should join borders between message state and confirm buttons", async function () {
     const originalRequestAnimationFrame = window.requestAnimationFrame;
     const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;

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

@@ -292,6 +292,52 @@ describe('Select', function () {
         expect(mutateCount).to.equal(2);
     });
 
+    it('should suppress repeated safe floating layout oscillation', async function () {
+        const popper = document.createElement('div');
+        const rects = [
+            {x: 0, y: 0, width: 100, height: 40},
+            {x: 0, y: 0, width: 120, height: 40},
+            {x: 0, y: 0, width: 100, height: 40},
+            {x: 0, y: 0, width: 120, height: 40},
+            {x: 0, y: 0, width: 100, height: 40},
+        ];
+        let mutateCount = 0;
+
+        popper.getBoundingClientRect = () => {
+            const rect = rects[Math.min(mutateCount - 1, rects.length - 1)];
+            return {
+                ...rect,
+                top: rect.y,
+                left: rect.x,
+                right: rect.x + rect.width,
+                bottom: rect.y + rect.height,
+            };
+        };
+
+        const mutate = () => {
+            mutateCount += 1;
+            enqueueFloatingLayout({
+                popperElement: popper,
+                reason: FLOATING_LAYOUT_REASON.SETTLE,
+                mutate,
+            });
+        };
+
+        enqueueFloatingLayout({
+            popperElement: popper,
+            reason: FLOATING_LAYOUT_REASON.RESIZE,
+            mutate,
+        });
+
+        await flushFloatingLayoutQueueForTests();
+        await flushFloatingLayoutQueueForTests();
+        await flushFloatingLayoutQueueForTests();
+        await flushFloatingLayoutQueueForTests();
+        await flushFloatingLayoutQueueForTests();
+
+        expect(mutateCount).to.equal(4);
+    });
+
     it('should flush floating layout queue jobs when requestAnimationFrame stalls', async function () {
         const originalRequestAnimationFrame = global.requestAnimationFrame;
         const originalCancelAnimationFrame = global.cancelAnimationFrame;

package/test/cases/components/layout/tabs.mjs

@@ -207,6 +207,48 @@ function waitForCondition(check, {timeout = 4000, interval = 10} = {}) {
 	});
 }
 
+function createRect({width, height = 40, x = 0, y = 0}) {
+	return {
+		width,
+		height,
+		top: y,
+		left: x,
+		right: x + width,
+		bottom: y + height,
+		x,
+		y,
+	};
+}
+
+function installOverflowTabGeometryMock({navWidth = 480, switchWidth = 44} = {}) {
+	const originalGetBoundingClientRect =
+		global.HTMLElement.prototype.getBoundingClientRect;
+
+	global.HTMLElement.prototype.getBoundingClientRect = function () {
+		const role = this.getAttribute?.('data-monster-role');
+		const label = this.textContent?.trim() || '';
+
+		if (role === 'nav') {
+			return createRect({width: navWidth});
+		}
+
+		if (role === 'button') {
+			return createRect({width: Math.max(70, label.length * 11)});
+		}
+
+		if (role === 'switch') {
+			return createRect({width: switchWidth});
+		}
+
+		return originalGetBoundingClientRect.call(this);
+	};
+
+	return () => {
+		global.HTMLElement.prototype.getBoundingClientRect =
+			originalGetBoundingClientRect;
+	};
+}
+
 describe('Tabs', function () {
 
     before(function (done) {
@@ -398,44 +440,7 @@ describe('Tabs', function () {
 				window.ResizeObserver = OriginalResizeObserver;
 				global.ResizeObserver = originalGlobalResizeObserver;
 			};
-			const originalGetBoundingClientRect =
-				global.HTMLElement.prototype.getBoundingClientRect;
-			restoreBoundingClientRect = () => {
-				global.HTMLElement.prototype.getBoundingClientRect =
-					originalGetBoundingClientRect;
-			};
-			global.HTMLElement.prototype.getBoundingClientRect = function () {
-				const role = this.getAttribute?.('data-monster-role');
-				const label = this.textContent?.trim() || '';
-
-				if (role === 'nav') {
-					return {
-						width: 480,
-						height: 40,
-						top: 0,
-						left: 0,
-						right: 480,
-						bottom: 40,
-						x: 0,
-						y: 0,
-					};
-				}
-
-				if (role === 'button') {
-					return {
-						width: Math.max(70, label.length * 11),
-						height: 40,
-						top: 0,
-						left: 0,
-						right: 0,
-						bottom: 40,
-						x: 0,
-						y: 0,
-					};
-				}
-
-				return originalGetBoundingClientRect.call(this);
-			};
+			restoreBoundingClientRect = installOverflowTabGeometryMock();
 
             mocks.innerHTML = htmlOverflow;
 
@@ -456,8 +461,10 @@ describe('Tabs', function () {
 					switchButton.classList.contains('hidden') === false
 				);
 			}).then(() => {
+				let tabs;
+				let originalSetOption;
 				try {
-					const tabs = document.getElementById('overflow-tabs');
+					tabs = document.getElementById('overflow-tabs');
 					expect(tabs).is.instanceof(Tabs);
 					const switchButton = tabs.shadowRoot.querySelector(
 						'[data-monster-role="switch"]',
@@ -475,29 +482,43 @@ describe('Tabs', function () {
 						(observer) => observer.elements.includes(tabs.shadowRoot.querySelector('[data-monster-role="nav"]')),
 					);
 					expect(resizeObserver).to.not.equal(undefined);
+
+					originalSetOption = tabs.setOption.bind(tabs);
+					let resetAllTabsDuringResize = false;
+					tabs.setOption = function (path, value) {
+						if (
+							path === 'buttons' &&
+							value?.standard?.length === 11 &&
+							value?.popper?.length === 0
+						) {
+							resetAllTabsDuringResize = true;
+						}
+						return originalSetOption(path, value);
+					};
+
 					resizeObserver.triggerResize([]);
 
 					return waitForCondition(() => {
-						return (
-							TrackingResizeObserver.callbackCount > 0 &&
-							tabs.getOption('buttons.standard').length === 11 &&
-							tabs.getOption('buttons.popper').length === 0
-						);
+						return TrackingResizeObserver.callbackCount > 0;
 					}).then(() => {
-						return waitForCondition(() => {
-							standardButtons = tabs.getOption('buttons.standard');
-							popperButtons = tabs.getOption('buttons.popper');
-							return (
-								standardButtons.length > 0 &&
-								popperButtons.length > 0 &&
-								standardButtons.length + popperButtons.length === 11 &&
-								new Set(
-									standardButtons
-										.concat(popperButtons)
-										.map((button) => button.reference),
-								).size === 11
-							);
-						});
+						return new Promise((resolve) => setTimeout(resolve, 260));
+					}).then(() => {
+						return new Promise((resolve) => requestAnimationFrame(resolve));
+					}).then(() => {
+						tabs.setOption = originalSetOption;
+						expect(resetAllTabsDuringResize).to.equal(false);
+						standardButtons = tabs.getOption('buttons.standard');
+						popperButtons = tabs.getOption('buttons.popper');
+						expect(standardButtons.length).to.be.greaterThan(0);
+						expect(popperButtons.length).to.be.greaterThan(0);
+						expect(standardButtons.length + popperButtons.length).to.equal(11);
+						expect(
+							new Set(
+								standardButtons
+									.concat(popperButtons)
+									.map((button) => button.reference),
+							).size,
+						).to.equal(11);
 					}).then(() => {
 						restoreBoundingClientRect();
 						restoreBoundingClientRect = null;
@@ -506,6 +527,9 @@ describe('Tabs', function () {
 						done();
 					});
 				} catch (e) {
+					if (tabs && originalSetOption) {
+						tabs.setOption = originalSetOption;
+					}
 					restoreBoundingClientRect();
 					restoreBoundingClientRect = null;
 					restoreResizeObserver();
@@ -513,6 +537,13 @@ describe('Tabs', function () {
 					return done(e);
                 }
 			}).catch((e) => {
+				const tabs = document.getElementById('overflow-tabs');
+				if (
+					tabs &&
+					Object.prototype.hasOwnProperty.call(tabs, 'setOption')
+				) {
+					delete tabs.setOption;
+				}
 				if (restoreBoundingClientRect instanceof Function) {
 					restoreBoundingClientRect();
 					restoreBoundingClientRect = null;
@@ -525,6 +556,86 @@ describe('Tabs', function () {
 			});
         });
 
+		it('should preserve the overflow split and recalculate widths while rebuilding tab buttons', async function () {
+			this.timeout(5000);
+
+			const mocks = document.getElementById('mocks');
+			restoreBoundingClientRect = installOverflowTabGeometryMock();
+
+			let tabs;
+			let originalSetOption;
+
+			try {
+				mocks.innerHTML = htmlOverflow;
+
+				await waitForCondition(() => {
+					tabs = document.getElementById('overflow-tabs');
+					const standardButtons = tabs?.getOption?.('buttons.standard') || [];
+					const popperButtons = tabs?.getOption?.('buttons.popper') || [];
+
+					return (
+						tabs instanceof Tabs &&
+						standardButtons.length > 0 &&
+						popperButtons.length > 0 &&
+						standardButtons.length + popperButtons.length === 11
+					);
+				});
+
+				const initialPopperCount = tabs.getOption('buttons.popper').length;
+				const standardReference = tabs.getOption('buttons.standard.0.reference');
+				const panel = document.getElementById(standardReference);
+				expect(panel).to.not.equal(null);
+
+				originalSetOption = tabs.setOption.bind(tabs);
+				let resetAllTabsDuringRebuild = false;
+				tabs.setOption = function (path, value) {
+					if (
+						path === 'buttons' &&
+						value?.standard?.length === 11 &&
+						value?.popper?.length === 0
+					) {
+						resetAllTabsDuringRebuild = true;
+					}
+					return originalSetOption(path, value);
+				};
+
+				panel.setAttribute(
+					'data-monster-button-label',
+					'Aktualisierte sehr lange Tab Beschriftung mit viel mehr Platzbedarf',
+				);
+
+				await waitForCondition(() => {
+					return tabs
+						.getOption('buttons.standard', [])
+						.concat(tabs.getOption('buttons.popper', []))
+						.some((button) => {
+							return (
+								button.reference === standardReference &&
+								button.label.includes('Aktualisierte')
+							);
+						});
+				});
+				await waitForCondition(() => {
+					return tabs.getOption('buttons.popper').length > initialPopperCount;
+				});
+
+				tabs.setOption = originalSetOption;
+				expect(resetAllTabsDuringRebuild).to.equal(false);
+				expect(tabs.getOption('buttons.popper').length).to.be.greaterThan(0);
+				expect(
+					tabs
+						.getOption('buttons.standard')
+						.concat(tabs.getOption('buttons.popper')).length,
+				).to.equal(11);
+			} finally {
+				if (tabs && originalSetOption) {
+					tabs.setOption = originalSetOption;
+				}
+				restoreBoundingClientRect();
+				restoreBoundingClientRect = null;
+			}
+		});
+
 		it('should ignore unavailable panels when creating tabs and buttons', function (done) {
 			let mocks = document.getElementById('mocks');
 			mocks.innerHTML = htmlAvailability;