@schukai/monster 4.137.4 → 4.137.5

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.137.4"}
+{"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.137.5"}

package/source/components/datatable/pagination.mjs

@@ -89,6 +89,7 @@ const layoutApplySymbol = Symbol("layoutApply");
  */
 const labelStateSymbol = Symbol("labelState");
 const layoutModeSymbol = Symbol("layoutMode");
+const layoutMeasurementCacheSymbol = Symbol("layoutMeasurementCache");
 const lastNavClickTimeSymbol = Symbol("lastNavClickTime");
 const lastNavClickTargetSymbol = Symbol("lastNavClickTarget");
 
@@ -919,43 +920,38 @@ function applyPaginationLayout() {
 			return;
 		}
 
-		list.classList.add("pagination-no-wrap");
-		list.setAttribute("data-monster-adaptive-ready", "false");
-
 		const prevLink = this.shadowRoot.querySelector(
 			"a[data-monster-role=pagination-prev]",
 		);
 		const nextLink = this.shadowRoot.querySelector(
 			"a[data-monster-role=pagination-next]",
 		);
+		const signature = getPaginationLayoutSignature.call(this, list);
+		const cache = getPaginationLayoutCache.call(this);
 
-		const widthFull = applyPaginationMode.call(
-			this,
-			list,
-			prevLink,
-			nextLink,
-			"full",
-		);
-		const widthNoNumbers = applyPaginationMode.call(
-			this,
-			list,
-			prevLink,
-			nextLink,
-			"no-numbers",
-		);
-		const widthCompactSummary = applyPaginationMode.call(
-			this,
-			list,
-			prevLink,
-			nextLink,
-			"compact-summary",
-		);
-		const widthCompact = applyPaginationMode.call(
+		if (
+			cache.lastAppliedSignature === signature &&
+			cache.lastAvailableWidth === availableWidth &&
+			cache.lastAppliedMode === this[layoutModeSymbol] &&
+			list.getAttribute("data-monster-adaptive-ready") === "true"
+		) {
+			return;
+		}
+
+		setClassEnabled(list, "pagination-no-wrap", true);
+		setAttributeValue(list, "data-monster-adaptive-ready", "false");
+
+		const {
+			widthFull,
+			widthNoNumbers,
+			widthCompactSummary,
+			widthCompact,
+		} = measurePaginationModeWidths.call(
 			this,
 			list,
 			prevLink,
 			nextLink,
-			"compact",
+			signature,
 		);
 
 		const nextMode = choosePaginationMode.call(this, {
@@ -967,7 +963,10 @@ function applyPaginationLayout() {
 		});
 
 		applyPaginationMode.call(this, list, prevLink, nextLink, nextMode);
-		list.setAttribute("data-monster-adaptive-ready", "true");
+		setAttributeValue(list, "data-monster-adaptive-ready", "true");
+		cache.lastAppliedSignature = signature;
+		cache.lastAvailableWidth = availableWidth;
+		cache.lastAppliedMode = nextMode;
 	} finally {
 		this[layoutApplySymbol] = false;
 	}
@@ -998,7 +997,7 @@ function setNumberItemsVisible(list, visible) {
 	for (const item of numberItems) {
 		const container = item.parentElement;
 		if (!container) continue;
-		container.style.display = visible ? "" : "none";
+		setStyleValue(container, "display", visible ? "" : "none");
 	}
 }
 
@@ -1014,7 +1013,7 @@ function setSummaryVisible(list, visible) {
 	if (!summaryItem) {
 		return;
 	}
-	summaryItem.style.display = visible ? "flex" : "none";
+	setStyleValue(summaryItem, "display", visible ? "flex" : "none");
 }
 
 /**
@@ -1047,11 +1046,11 @@ function setCompactLabels(compact, prevLink, nextLink) {
 	if (!state) return;
 
 	if (compact) {
-		if (prevLink) prevLink.innerHTML = compactPrevIcon;
-		if (nextLink) nextLink.innerHTML = compactNextIcon;
+		setInnerHTML(prevLink, compactPrevIcon);
+		setInnerHTML(nextLink, compactNextIcon);
 	} else {
-		if (prevLink) prevLink.innerHTML = state.previous;
-		if (nextLink) nextLink.innerHTML = state.next;
+		setInnerHTML(prevLink, state.previous);
+		setInnerHTML(nextLink, state.next);
 	}
 }
 
@@ -1161,29 +1160,29 @@ function getEmbeddedAvailableWidth(parentNode) {
 function applyPaginationMode(list, prevLink, nextLink, mode) {
 	switch (mode) {
 		case "compact":
-			list.classList.add("pagination-numbers-hidden");
-			list.classList.add("pagination-compact");
+			setClassEnabled(list, "pagination-numbers-hidden", true);
+			setClassEnabled(list, "pagination-compact", true);
 			setNumberItemsVisible(list, false);
 			setSummaryVisible(list, true);
 			setCompactLabels.call(this, true, prevLink, nextLink);
 			break;
 		case "compact-summary":
-			list.classList.add("pagination-numbers-hidden");
-			list.classList.add("pagination-compact");
+			setClassEnabled(list, "pagination-numbers-hidden", true);
+			setClassEnabled(list, "pagination-compact", true);
 			setNumberItemsVisible(list, false);
 			setSummaryVisible(list, true);
 			setCompactLabels.call(this, true, prevLink, nextLink);
 			break;
 		case "no-numbers":
-			list.classList.add("pagination-numbers-hidden");
-			list.classList.remove("pagination-compact");
+			setClassEnabled(list, "pagination-numbers-hidden", true);
+			setClassEnabled(list, "pagination-compact", false);
 			setNumberItemsVisible(list, false);
 			setSummaryVisible(list, true);
 			setCompactLabels.call(this, false, prevLink, nextLink);
 			break;
 		default:
-			list.classList.remove("pagination-numbers-hidden");
-			list.classList.remove("pagination-compact");
+			setClassEnabled(list, "pagination-numbers-hidden", false);
+			setClassEnabled(list, "pagination-compact", false);
 			setNumberItemsVisible(list, true);
 			setSummaryVisible(list, false);
 			setCompactLabels.call(this, false, prevLink, nextLink);
@@ -1193,6 +1192,172 @@ function applyPaginationMode(list, prevLink, nextLink, mode) {
 	return list.scrollWidth;
 }
 
+/**
+ * @private
+ * @param {HTMLElement} list
+ * @param {HTMLElement|null} prevLink
+ * @param {HTMLElement|null} nextLink
+ * @param {string} signature
+ * @return {object}
+ */
+function measurePaginationModeWidths(list, prevLink, nextLink, signature) {
+	const cache = getPaginationLayoutCache.call(this);
+	if (cache.widthSignature === signature && cache.widths) {
+		return cache.widths;
+	}
+
+	const widths = {
+		widthFull: applyPaginationMode.call(
+			this,
+			list,
+			prevLink,
+			nextLink,
+			"full",
+		),
+		widthNoNumbers: applyPaginationMode.call(
+			this,
+			list,
+			prevLink,
+			nextLink,
+			"no-numbers",
+		),
+		widthCompactSummary: applyPaginationMode.call(
+			this,
+			list,
+			prevLink,
+			nextLink,
+			"compact-summary",
+		),
+		widthCompact: applyPaginationMode.call(
+			this,
+			list,
+			prevLink,
+			nextLink,
+			"compact",
+		),
+	};
+
+	cache.widthSignature = signature;
+	cache.widths = widths;
+	return widths;
+}
+
+/**
+ * @private
+ * @return {object}
+ */
+function getPaginationLayoutCache() {
+	if (!this[layoutMeasurementCacheSymbol]) {
+		this[layoutMeasurementCacheSymbol] = {
+			lastAppliedMode: null,
+			lastAppliedSignature: null,
+			lastAvailableWidth: null,
+			widthSignature: null,
+			widths: null,
+		};
+	}
+
+	return this[layoutMeasurementCacheSymbol];
+}
+
+/**
+ * @private
+ * @param {HTMLElement} list
+ * @return {string}
+ */
+function getPaginationLayoutSignature(list) {
+	const pagination = this.getOption("pagination", {});
+	const itemSignature = Array.isArray(pagination.items)
+		? pagination.items
+				.map((item) => {
+					return [
+						item?.class || "",
+						item?.href || "",
+						item?.label || "",
+						item?.no ?? "",
+					].join(":");
+				})
+				.join("|")
+		: "";
+
+	return [
+		pagination.current ?? "",
+		pagination.pages ?? "",
+		pagination.summary ?? "",
+		pagination.prevClass ?? "",
+		pagination.prevHref ?? "",
+		pagination.prevNo ?? "",
+		pagination.nextClass ?? "",
+		pagination.nextHref ?? "",
+		pagination.nextNo ?? "",
+		itemSignature,
+		list.children.length,
+	].join("::");
+}
+
+/**
+ * @private
+ * @param {HTMLElement|null} element
+ * @param {string} className
+ * @param {boolean} enabled
+ * @return {void}
+ */
+function setClassEnabled(element, className, enabled) {
+	if (!(element instanceof HTMLElement)) {
+		return;
+	}
+	if (element.classList.contains(className) !== enabled) {
+		element.classList.toggle(className, enabled);
+	}
+}
+
+/**
+ * @private
+ * @param {HTMLElement|null} element
+ * @param {string} name
+ * @param {string} value
+ * @return {void}
+ */
+function setAttributeValue(element, name, value) {
+	if (!(element instanceof HTMLElement)) {
+		return;
+	}
+	if (element.getAttribute(name) !== value) {
+		element.setAttribute(name, value);
+	}
+}
+
+/**
+ * @private
+ * @param {HTMLElement|null} element
+ * @param {string} property
+ * @param {string} value
+ * @return {void}
+ */
+function setStyleValue(element, property, value) {
+	if (!(element instanceof HTMLElement)) {
+		return;
+	}
+	if (element.style[property] !== value) {
+		element.style[property] = value;
+	}
+}
+
+/**
+ * @private
+ * @param {HTMLElement|null} element
+ * @param {string} value
+ * @return {void}
+ */
+function setInnerHTML(element, value) {
+	if (!(element instanceof HTMLElement)) {
+		return;
+	}
+	if (element.innerHTML !== value) {
+		element.innerHTML = value;
+	}
+}
+
 /**
  * @private
  * @param {object} params

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

@@ -129,6 +129,14 @@ const switchElementSymbol = Symbol("switchElement");
 const layoutStateSymbol = Symbol("layoutState");
 const layoutFrameSymbol = Symbol("layoutFrame");
 const layoutTokenSymbol = Symbol("layoutToken");
+const observedLayoutNodesSignatureSymbol = Symbol("observedLayoutNodesSignature");
+
+/**
+ * @private
+ * @type {WeakMap<HTMLElement, number>}
+ */
+const layoutNodeIds = new WeakMap();
+let layoutNodeId = 0;
 
 /**
  * @private
@@ -209,6 +217,7 @@ class ButtonBar extends CustomElement {
 			needsLayout: true,
 			needsObserve: true,
 			suppressSlotChange: false,
+			suppressMutation: false,
 		};
 
 		initControlReferences.call(this);
@@ -385,6 +394,10 @@ function initEventHandler() {
 	const self = this;
 
 	const mutationCallback = (mutationList) => {
+		if (self[layoutStateSymbol]?.suppressMutation) {
+			return;
+		}
+
 		let needsRecalc = false;
 		for (const mutation of mutationList) {
 			if (mutation.type === "attributes") {
@@ -572,7 +585,6 @@ function runLayout() {
  * @return {Object}
  */
 function rearrangeButtons() {
-	const state = this[layoutStateSymbol];
 	let space = 0;
 	try {
 		space = this[dimensionsSymbol].getVia("data.space");
@@ -660,28 +672,22 @@ function rearrangeButtons() {
 	const shouldShowSwitch =
 		layout.buttonsToMoveToPopper.length > 0 && hasButtons;
 
-	if (state) {
-		state.suppressSlotChange = true;
-	}
+	suppressLayoutFeedback.call(this);
 
 	for (const button of layout.buttonsToMoveToPopper) {
-		button.setAttribute("slot", "popper");
+		if (button.getAttribute("slot") !== "popper") {
+			button.setAttribute("slot", "popper");
+		}
 	}
 
 	for (const button of layout.visibleButtonsInMainSlot) {
-		button.removeAttribute("slot");
-	}
-
-	if (state) {
-		state.suppressSlotChange = false;
+		if (button.hasAttribute("slot")) {
+			button.removeAttribute("slot");
+		}
 	}
 
-	if (shouldShowSwitch) {
-		this[switchElementSymbol].removeAttribute("hidden");
-		this[switchElementSymbol].classList.remove("hidden");
-	} else {
-		this[switchElementSymbol].setAttribute("hidden", "");
-		this[switchElementSymbol].classList.add("hidden");
+	setSwitchVisible.call(this, shouldShowSwitch);
+	if (!shouldShowSwitch) {
 		hide.call(this);
 	}
 }
@@ -831,34 +837,123 @@ function calculateButtonBarDimensions() {
  * @private
  */
 function updateResizeObserverObservation() {
+	const observedNodes = getLayoutObservedNodes.call(this);
+	const signature = getLayoutObservedNodesSignature(observedNodes);
+	if (this[observedLayoutNodesSignatureSymbol] === signature) {
+		return;
+	}
+	this[observedLayoutNodesSignatureSymbol] = signature;
+
 	this[resizeObserverSymbol].disconnect();
 	if (this[mutationObserverSymbol]) {
 		this[mutationObserverSymbol].disconnect();
 	}
 
-	const slottedNodes = getSlottedElements.call(this);
-	slottedNodes.forEach((node) => {
+	observedNodes.forEach((node) => {
 		this[resizeObserverSymbol].observe(node);
-		if (this[mutationObserverSymbol]) {
+		if (node !== this.parentElement && this[mutationObserverSymbol]) {
 			this[mutationObserverSymbol].observe(node, {
 				attributes: true,
 				attributeFilter: ["style", "class", "hidden"],
 			});
 		}
 	});
+}
 
-	requestAnimationFrame(() => {
-		let parent = this.parentNode;
-		while (!(parent instanceof HTMLElement) && parent !== null) {
-			parent = parent.parentNode;
+/**
+ * @private
+ * @return {HTMLElement[]}
+ */
+function getLayoutObservedNodes() {
+	const observedNodes = [];
+	const slottedNodes = getSlottedElements.call(this);
+	slottedNodes.forEach((node) => {
+		if (node instanceof HTMLElement) {
+			observedNodes.push(node);
 		}
+	});
 
-		if (parent instanceof HTMLElement) {
-			this[resizeObserverSymbol].observe(parent);
-		}
+	let parent = this.parentNode;
+	while (!(parent instanceof HTMLElement) && parent !== null) {
+		parent = parent.parentNode;
+	}
+
+	if (parent instanceof HTMLElement) {
+		observedNodes.push(parent);
+	}
+
+	return observedNodes;
+}
+
+/**
+ * @private
+ * @param {HTMLElement[]} nodes
+ * @return {string}
+ */
+function getLayoutObservedNodesSignature(nodes) {
+	return nodes.map(getLayoutNodeId).join("|");
+}
+
+/**
+ * @private
+ * @param {HTMLElement} node
+ * @return {number}
+ */
+function getLayoutNodeId(node) {
+	let id = layoutNodeIds.get(node);
+	if (id === undefined) {
+		id = ++layoutNodeId;
+		layoutNodeIds.set(node, id);
+	}
+	return id;
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function suppressLayoutFeedback() {
+	const state = this[layoutStateSymbol];
+	if (!state) {
+		return;
+	}
+
+	state.suppressSlotChange = true;
+	state.suppressMutation = true;
+	queueMicrotask(() => {
+		state.suppressSlotChange = false;
+		state.suppressMutation = false;
 	});
 }
 
+/**
+ * @private
+ * @param {boolean} visible
+ * @return {void}
+ */
+function setSwitchVisible(visible) {
+	if (!(this[switchElementSymbol] instanceof HTMLElement)) {
+		return;
+	}
+
+	if (visible) {
+		if (this[switchElementSymbol].hasAttribute("hidden")) {
+			this[switchElementSymbol].removeAttribute("hidden");
+		}
+		if (this[switchElementSymbol].classList.contains("hidden")) {
+			this[switchElementSymbol].classList.remove("hidden");
+		}
+		return;
+	}
+
+	if (!this[switchElementSymbol].hasAttribute("hidden")) {
+		this[switchElementSymbol].setAttribute("hidden", "");
+	}
+	if (!this[switchElementSymbol].classList.contains("hidden")) {
+		this[switchElementSymbol].classList.add("hidden");
+	}
+}
+
 /**
  * @private
  */
@@ -866,6 +961,7 @@ function disconnectResizeObserver() {
 	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
 		this[resizeObserverSymbol].disconnect();
 	}
+	this[observedLayoutNodesSignatureSymbol] = null;
 }
 
 /**

package/source/components/navigation/site-navigation.mjs

@@ -43,6 +43,12 @@ const instanceSymbol = Symbol("instanceSymbol");
 const activeSubmenuHiderSymbol = Symbol("activeSubmenuHider");
 const hideHamburgerMenuSymbol = Symbol("hideHamburgerMenu");
 const hamburgerCloseButtonSymbol = Symbol("hamburgerCloseButton");
+const layoutFrameSymbol = Symbol("layoutFrame");
+const layoutSignatureSymbol = Symbol("layoutSignature");
+const measurementCacheSymbol = Symbol("measurementCache");
+
+const navigationItemIds = new WeakMap();
+let navigationItemId = 0;
 
 function getAutoUpdateOptions() {
 	return {
@@ -115,14 +121,16 @@ class SiteNavigation extends CustomElement {
 	connectedCallback() {
 		super.connectedCallback();
 		attachResizeObserver.call(this);
-		requestAnimationFrame(() => {
-			populateTabs.call(this);
-		});
+		schedulePopulateTabs.call(this);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		detachResizeObserver.call(this);
+		if (typeof this[layoutFrameSymbol] === "number") {
+			cancelAnimationFrame(this[layoutFrameSymbol]);
+		}
+		this[layoutFrameSymbol] = null;
 	}
 }
 
@@ -300,14 +308,28 @@ function attachResizeObserver() {
 			}
 		}
 		this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
-			requestAnimationFrame(() => {
-				populateTabs.call(this);
-			});
+			schedulePopulateTabs.call(this);
 		});
 	});
 	this[resizeObserverSymbol].observe(this);
 }
 
+/**
+ * @private
+ * @this {SiteNavigation}
+ * @return {void}
+ */
+function schedulePopulateTabs() {
+	if (typeof this[layoutFrameSymbol] === "number") {
+		return;
+	}
+
+	this[layoutFrameSymbol] = requestAnimationFrame(() => {
+		this[layoutFrameSymbol] = null;
+		populateTabs.call(this);
+	});
+}
+
 /**
  * Disconnects and cleans up the ResizeObserver instance.
  * @private
@@ -595,6 +617,156 @@ function cloneNavItem(item) {
 	return liClone;
 }
 
+/**
+ * @private
+ * @param {HTMLElement} hamburgerButton
+ * @return {number}
+ */
+function measureHamburgerWidth(hamburgerButton) {
+	const originalDisplay = hamburgerButton.style.display;
+	const originalVisibility = hamburgerButton.style.visibility;
+	setStyleValue(hamburgerButton, "visibility", "hidden");
+	setStyleValue(hamburgerButton, "display", "flex");
+	const width = Math.ceil(hamburgerButton.getBoundingClientRect().width) || 0;
+	setStyleValue(hamburgerButton, "display", originalDisplay);
+	setStyleValue(hamburgerButton, "visibility", originalVisibility);
+	return width;
+}
+
+/**
+ * @private
+ * @param {HTMLElement[]} sourceItems
+ * @param {string} sourceSignature
+ * @param {HTMLElement} visibleList
+ * @param {HTMLElement} navEl
+ * @return {object}
+ */
+function getNavigationMeasurements(
+	sourceItems,
+	sourceSignature,
+	visibleList,
+	navEl,
+) {
+	const cache = this[measurementCacheSymbol];
+	if (cache?.sourceSignature === sourceSignature && cache.items.length > 0) {
+		return cache;
+	}
+
+	const originalOverflow = navEl.style.overflow;
+	const originalFlexWrap = visibleList.style.flexWrap;
+	const originalVisibility = visibleList.style.visibility;
+
+	setStyleValue(navEl, "overflow", "hidden");
+	setStyleValue(visibleList, "flexWrap", "nowrap");
+	setStyleValue(visibleList, "visibility", "hidden");
+
+	const clones = sourceItems.map(cloneNavItem);
+	visibleList.replaceChildren(...clones);
+
+	const items = clones.map((clone) => {
+		const submenu = clone.querySelector("ul, div[part='mega-menu']");
+		if (submenu instanceof HTMLElement) {
+			setStyleValue(submenu, "display", "none");
+		}
+		return {
+			requiredWidth: clone.offsetLeft + clone.offsetWidth,
+			width: clone.getBoundingClientRect().width || clone.offsetWidth || 0,
+		};
+	});
+	const gap = parseFloat(getComputedStyle(visibleList).gap || "0") || 0;
+
+	visibleList.replaceChildren();
+	setStyleValue(navEl, "overflow", originalOverflow);
+	setStyleValue(visibleList, "flexWrap", originalFlexWrap);
+	setStyleValue(visibleList, "visibility", originalVisibility);
+
+	this[measurementCacheSymbol] = {
+		gap,
+		items,
+		sourceSignature,
+	};
+	return this[measurementCacheSymbol];
+}
+
+/**
+ * @private
+ * @param {HTMLElement[]} sourceItems
+ * @return {string}
+ */
+function getSourceItemsSignature(sourceItems) {
+	return sourceItems
+		.map((item) => {
+			return [
+				getNavigationItemId(item),
+				item.className || "",
+				item.textContent || "",
+				item.querySelectorAll("li").length,
+			].join(":");
+		})
+		.join("|");
+}
+
+/**
+ * @private
+ * @param {HTMLElement} item
+ * @return {number}
+ */
+function getNavigationItemId(item) {
+	let id = navigationItemIds.get(item);
+	if (id === undefined) {
+		id = ++navigationItemId;
+		navigationItemIds.set(item, id);
+	}
+	return id;
+}
+
+/**
+ * @private
+ * @param {object} params
+ * @return {string}
+ */
+function getLayoutSignature({ fit, navWidth, rest }) {
+	return [
+		navWidth,
+		fit.map(getNavigationItemId).join(","),
+		rest.map(getNavigationItemId).join(","),
+	].join("::");
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @param {string} property
+ * @param {string} value
+ * @return {void}
+ */
+function setStyleValue(element, property, value) {
+	if (!(element instanceof HTMLElement)) {
+		return;
+	}
+	if (element.style[property] !== value) {
+		element.style[property] = value;
+	}
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @param {HTMLElement[]} children
+ * @return {void}
+ */
+function replaceChildrenIfChanged(element, children) {
+	const currentSignature = Array.from(element.children)
+		.map((child) => [child.className || "", child.textContent || ""].join(":"))
+		.join("|");
+	const nextSignature = children
+		.map((child) => [child.className || "", child.textContent || ""].join(":"))
+		.join("|");
+	if (currentSignature !== nextSignature) {
+		element.replaceChildren(...children);
+	}
+}
+
 /**
  * Measures available space and distributes slotted navigation items between
  * the visible list and the hidden hamburger menu list.
@@ -618,12 +790,12 @@ function populateTabs() {
 		(ul) => ul.parentElement === this,
 	);
 
-	visibleList.innerHTML = "";
-	hiddenList.innerHTML = "";
-	hamburgerButton.style.display = "none";
 	this.style.visibility = "hidden";
 
 	if (!topLevelUl) {
+		replaceChildrenIfChanged.call(this, visibleList, []);
+		replaceChildrenIfChanged.call(this, hiddenList, []);
+		setStyleValue(hamburgerButton, "display", "none");
 		this.style.visibility = "visible";
 		return; // Nichts zu tun
 	}
@@ -631,27 +803,29 @@ function populateTabs() {
 		(n) => n.tagName === "LI",
 	);
 	if (sourceItems.length === 0) {
+		replaceChildrenIfChanged.call(this, visibleList, []);
+		replaceChildrenIfChanged.call(this, hiddenList, []);
+		setStyleValue(hamburgerButton, "display", "none");
 		this.style.visibility = "visible";
 		return;
 	}
 
 	const navWidth = navEl.clientWidth;
-
-	const originalDisplay = hamburgerButton.style.display;
-	hamburgerButton.style.visibility = "hidden";
-	hamburgerButton.style.display = "flex";
-	const hamburgerWidth =
-		Math.ceil(hamburgerButton.getBoundingClientRect().width) || 0;
-	hamburgerButton.style.display = originalDisplay;
-	hamburgerButton.style.visibility = "visible";
-
-	navEl.style.overflow = "hidden";
-	visibleList.style.flexWrap = "nowrap";
-	visibleList.style.visibility = "hidden"; // Inhalt der Liste während Manipulation ausblenden
+	const sourceSignature = getSourceItemsSignature(sourceItems);
+	const hamburgerWidth = measureHamburgerWidth(hamburgerButton);
+	const measurements = getNavigationMeasurements.call(
+		this,
+		sourceItems,
+		sourceSignature,
+		visibleList,
+		navEl,
+	);
 
 	const fit = [];
 	const rest = [];
 	let hasOverflow = false;
+	const availableWidth = navWidth - hamburgerWidth;
+	const SAFETY_MARGIN = 1;
 
 	for (let i = 0; i < sourceItems.length; i++) {
 		const item = sourceItems[i];
@@ -661,12 +835,7 @@ function populateTabs() {
 			continue;
 		}
 
-		const liClone = cloneNavItem(item);
-		visibleList.appendChild(liClone);
-
-		const requiredWidth = liClone.offsetLeft + liClone.offsetWidth;
-		const availableWidth = navWidth - hamburgerWidth;
-		const SAFETY_MARGIN = 1; // 1px Sicherheitsmarge für Subpixel-Rendering
+		const requiredWidth = measurements.items[i]?.requiredWidth || 0;
 
 		if (requiredWidth > availableWidth + SAFETY_MARGIN) {
 			hasOverflow = true;
@@ -677,49 +846,40 @@ function populateTabs() {
 	}
 
 	if (fit.length > 0 && rest.length > 0) {
-		const lastVisibleItem = visibleList.children[fit.length - 1];
-		const visibleItemsWidth =
-			lastVisibleItem.offsetLeft + lastVisibleItem.offsetWidth;
-
-		const firstHiddenItemClone = cloneNavItem(rest[0]);
-		const submenu = firstHiddenItemClone.querySelector(
-			"ul, div[part='mega-menu']",
-		);
-		if (submenu) submenu.style.display = "none";
-
-		visibleList.appendChild(firstHiddenItemClone);
-		const firstHiddenItemWidth =
-			firstHiddenItemClone.getBoundingClientRect().width;
-		visibleList.removeChild(firstHiddenItemClone);
-
-		const gap = parseFloat(getComputedStyle(visibleList).gap || "0") || 0;
-		if (visibleItemsWidth + gap + firstHiddenItemWidth <= navWidth) {
+		const visibleItemsWidth = measurements.items[fit.length - 1]?.requiredWidth || 0;
+		const firstHiddenIndex = sourceItems.indexOf(rest[0]);
+		const firstHiddenItemWidth = measurements.items[firstHiddenIndex]?.width || 0;
+		if (
+			visibleItemsWidth + measurements.gap + firstHiddenItemWidth <=
+			navWidth
+		) {
 			fit.push(rest.shift());
 		}
 	}
 
-	navEl.style.overflow = "";
-	visibleList.style.flexWrap = "";
-	visibleList.innerHTML = "";
-
-	if (fit.length) {
-		const clonedVisible = fit.map(cloneNavItem);
-		visibleList.append(...clonedVisible);
-		visibleList
-			.querySelectorAll(":scope > li")
-			.forEach((li) => setupSubmenu.call(this, li, "visible", 1));
+	const layoutSignature = getLayoutSignature({ fit, navWidth, rest });
+	if (this[layoutSignatureSymbol] === layoutSignature) {
+		setStyleValue(visibleList, "visibility", "visible");
+		this.style.visibility = "visible";
+		return;
 	}
+	this[layoutSignatureSymbol] = layoutSignature;
 
-	if (rest.length) {
-		const clonedHidden = rest.map(cloneNavItem);
-		hiddenList.append(...clonedHidden);
-		hamburgerButton.style.display = "flex";
-		hiddenList
-			.querySelectorAll(":scope > li")
-			.forEach((li) => setupSubmenu.call(this, li, "hidden", 1));
-	}
+	const clonedVisible = fit.map(cloneNavItem);
+	const clonedHidden = rest.map(cloneNavItem);
+	replaceChildrenIfChanged.call(this, visibleList, clonedVisible);
+	replaceChildrenIfChanged.call(this, hiddenList, clonedHidden);
+
+	visibleList
+		.querySelectorAll(":scope > li")
+		.forEach((li) => setupSubmenu.call(this, li, "visible", 1));
+
+	setStyleValue(hamburgerButton, "display", rest.length ? "flex" : "none");
+	hiddenList
+		.querySelectorAll(":scope > li")
+		.forEach((li) => setupSubmenu.call(this, li, "hidden", 1));
 
-	visibleList.style.visibility = "visible";
+	setStyleValue(visibleList, "visibility", "visible");
 	this.style.visibility = "visible";
 	fireCustomEvent(this, "monster-layout-change", {
 		visibleItems: fit,

package/test/cases/components/datatable/pagination.mjs

@@ -123,6 +123,16 @@ describe('Pagination', function () {
                         expect(list).to.exist;
 
                         list.setAttribute('data-monster-adaptive-ready', 'true');
+                        control.refreshLayout();
+                        list.setAttribute('data-monster-adaptive-ready', 'true');
+                        let adaptiveReadyResetCount = 0;
+                        const originalSetAttribute = list.setAttribute.bind(list);
+                        list.setAttribute = (name, value) => {
+                            if (name === 'data-monster-adaptive-ready' && value === 'false') {
+                                adaptiveReadyResetCount++;
+                            }
+                            return originalSetAttribute(name, value);
+                        };
                         control.setPaginationState({currentPage: 2, totalPages: 5});
 
                         expect(list.getAttribute('data-monster-adaptive-ready')).to.equal('true');
@@ -130,6 +140,7 @@ describe('Pagination', function () {
                         setTimeout(() => {
                             try {
                                 expect(list.getAttribute('data-monster-adaptive-ready')).to.equal('true');
+                                expect(adaptiveReadyResetCount).to.equal(0);
                                 done();
                             } catch (e) {
                                 done(e);

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

@@ -1,6 +1,7 @@
 import * as chai from "chai";
 import { chaiDom } from "../../../util/chai-dom.mjs";
 import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
 
 let expect = chai.expect;
 chai.use(chaiDom);
@@ -94,4 +95,92 @@ describe("ButtonBar", function () {
       }
     }, 50);
   });
+
+  it("should coalesce resize layouts and avoid unchanged 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 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="button-bar-wrapper">
+          <monster-button-bar id="overflow-bar"></monster-button-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("button-bar-wrapper");
+      const bar = document.getElementById("overflow-bar");
+
+      wrapper.style.boxSizing = "border-box";
+      wrapper.style.width = "50px";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 50,
+      });
+
+      const switchButton = bar.shadowRoot.querySelector(
+        '[data-monster-role="switch"]',
+      );
+      Object.defineProperty(switchButton, "offsetWidth", {
+        configurable: true,
+        value: 20,
+      });
+
+      await flushFrames();
+
+      const resizeObserver = TrackingResizeObserver.instances.find((observer) =>
+        observer.elements.includes(wrapper),
+      );
+      expect(resizeObserver).to.exist;
+
+      let hiddenWriteCount = 0;
+      const originalSetAttribute = switchButton.setAttribute.bind(switchButton);
+      switchButton.setAttribute = (name, value) => {
+        if (name === "hidden") hiddenWriteCount++;
+        return originalSetAttribute(name, value);
+      };
+
+      resizeObserver.triggerResize([]);
+      resizeObserver.triggerResize([]);
+
+      expect(scheduledCallbacks.length).to.equal(1);
+      await flushFrames();
+
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(scheduledCallbacks.length).to.equal(0);
+      expect(hiddenWriteCount).to.equal(0);
+    } finally {
+      window.ResizeObserver = OriginalResizeObserver;
+      globalThis.ResizeObserver = originalGlobalResizeObserver;
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
 });

package/test/cases/components/navigation/site-navigation.mjs

@@ -0,0 +1,104 @@
+import * as chai from "chai";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
+
+const expect = chai.expect;
+
+describe("SiteNavigation", function () {
+	let SiteNavigation;
+
+	before(function (done) {
+		initJSDOM()
+			.then(() => {
+				import("../../../../source/components/navigation/site-navigation.mjs")
+					.then((m) => {
+						SiteNavigation = m.SiteNavigation;
+						done();
+					})
+					.catch((e) => done(e));
+			})
+			.catch((e) => done(e));
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	it("should register monster-site-navigation", function () {
+		expect(document.createElement("monster-site-navigation")).to.be.instanceof(
+			SiteNavigation,
+		);
+	});
+
+	it("should coalesce resize layout updates", function (done) {
+		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 = [];
+
+		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 = `
+				<monster-site-navigation id="nav">
+					<ul>
+						<li><a href="#one">One</a></li>
+						<li><a href="#two">Two</a></li>
+					</ul>
+				</monster-site-navigation>
+			`;
+
+			const nav = document.getElementById("nav");
+			const resizeObserver = TrackingResizeObserver.instances.find((observer) =>
+				observer.elements.includes(nav),
+			);
+			expect(resizeObserver).to.exist;
+
+			while (scheduledCallbacks.length > 0) {
+				scheduledCallbacks.shift()();
+			}
+			resizeObserver.triggerResize([]);
+			resizeObserver.triggerResize([]);
+
+			setTimeout(() => {
+				try {
+					expect(scheduledCallbacks.length).to.equal(1);
+					scheduledCallbacks.shift()();
+					done();
+				} catch (e) {
+					done(e);
+				} finally {
+					window.ResizeObserver = OriginalResizeObserver;
+					globalThis.ResizeObserver = originalGlobalResizeObserver;
+					window.requestAnimationFrame = originalRequestAnimationFrame;
+					globalThis.requestAnimationFrame =
+						originalGlobalRequestAnimationFrame;
+				}
+			}, 260);
+		} catch (e) {
+			window.ResizeObserver = OriginalResizeObserver;
+			globalThis.ResizeObserver = originalGlobalResizeObserver;
+			window.requestAnimationFrame = originalRequestAnimationFrame;
+			globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+			done(e);
+		}
+	});
+});

package/test/web/import.js

@@ -3,6 +3,7 @@ import "./prepare.js";
 import "../cases/components/layout/tabs.mjs";
 import "../cases/components/layout/slit-panel.mjs";
 import "../cases/components/layout/panel.mjs";
+import "../cases/components/navigation/site-navigation.mjs";
 import "../cases/components/content/viewer.mjs";
 import "../cases/components/content/image-editor.mjs";
 import "../cases/components/form/buy-box.mjs";