@schukai/monster 4.136.20 → 4.136.21

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.136.20"}
+{"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.136.21"}

package/source/components/datatable/pagination.mjs

@@ -221,14 +221,7 @@ class Pagination extends CustomElement {
 		this.setOption("pages", totalPages);
 
 		if (stateUnchanged) {
-			if (isAdaptivePagination.call(this)) {
-				schedulePaginationLayoutUpdate.call(this);
-			} else {
-				const list = this.shadowRoot?.querySelector(".pagination-list");
-				if (list) {
-					list.setAttribute("data-monster-adaptive-ready", "true");
-				}
-			}
+			this.refreshLayout({ schedule: true });
 			return;
 		}
 
@@ -250,20 +243,35 @@ class Pagination extends CustomElement {
 		// 4. Set the 'pagination' option, which will trigger the component to re-render.
 		this.setOption("pagination", pagination);
 
-		if (isAdaptivePagination.call(this)) {
-			const list = this.shadowRoot?.querySelector(".pagination-list");
-			if (list) {
-				list.setAttribute("data-monster-adaptive-ready", "false");
-			}
-			schedulePaginationLayoutUpdate.call(this);
-		} else {
-			const list = this.shadowRoot?.querySelector(".pagination-list");
-			if (list) {
-				list.setAttribute("data-monster-adaptive-ready", "true");
+		this.refreshLayout({ schedule: true });
+
+		syncPaginationStateToDom.call(this, pagination);
+	}
+
+	refreshLayout({ schedule = false } = {}) {
+		if (schedule === true) {
+			if (isAdaptivePagination.call(this)) {
+				schedulePaginationLayoutUpdate.call(this);
+			} else {
+				const list = this.shadowRoot?.querySelector(".pagination-list");
+				if (list) {
+					list.setAttribute("data-monster-adaptive-ready", "true");
+				}
 			}
+			return this;
 		}
 
-		syncPaginationStateToDom.call(this, pagination);
+		if (isAdaptivePagination.call(this)) {
+			applyPaginationLayout.call(this);
+			return this;
+		}
+
+		const list = this.shadowRoot?.querySelector(".pagination-list");
+		if (list) {
+			list.setAttribute("data-monster-adaptive-ready", "true");
+		}
+
+		return this;
 	}
 	/**
 	 *
@@ -700,14 +708,7 @@ function handleDataSourceChanges() {
 
 	this.setOption("pagination", pagination);
 
-	if (isAdaptivePagination.call(this)) {
-		schedulePaginationLayoutUpdate.call(this);
-	} else {
-		const list = this.shadowRoot?.querySelector(".pagination-list");
-		if (list) {
-			list.setAttribute("data-monster-adaptive-ready", "true");
-		}
-	}
+	this.refreshLayout({ schedule: isAdaptivePagination.call(this) });
 }
 
 /**

package/source/components/form/select.mjs

@@ -138,6 +138,12 @@ const clearOptionEventHandler = Symbol("clearOptionEventHandler");
  */
 const resizeObserverSymbol = Symbol("resizeObserver");
 const resizeObserverFrameSymbol = Symbol("resizeObserverFrame");
+const layoutCycleFrameSymbol = Symbol("layoutCycleFrame");
+const layoutCycleTokenSymbol = Symbol("layoutCycleToken");
+const layoutCycleModeSymbol = Symbol("layoutCycleMode");
+const layoutCyclePendingFlagsSymbol = Symbol("layoutCyclePendingFlags");
+const layoutCyclePendingPrioritySymbol = Symbol("layoutCyclePendingPriority");
+const layoutCycleRunningSymbol = Symbol("layoutCycleRunning");
 const visualViewportResizeHandlerSymbol = Symbol("visualViewportResizeHandler");
 const visualViewportScrollHandlerSymbol = Symbol("visualViewportScrollHandler");
 const visibilityChangeHandlerSymbol = Symbol("visibilityChangeHandler");
@@ -307,6 +313,19 @@ const lookupInProgressSymbol = Symbol("lookupInProgress");
 const unresolvedSelectionValuesSymbol = Symbol("unresolvedSelectionValues");
 const fetchRequestVersionSymbol = Symbol("fetchRequestVersion");
 const remoteInfoRequestSymbol = Symbol("remoteInfoRequest");
+const remoteInfoStableMessageSymbol = Symbol("remoteInfoStableMessage");
+
+const SELECT_LAYOUT_PRIORITY_PASSIVE = 1;
+const SELECT_LAYOUT_PRIORITY_INTERACTIVE = 2;
+const SELECT_LAYOUT_PRIORITY_CRITICAL = 3;
+
+const SELECT_LAYOUT_REASON_OPTION_STATE = 1 << 0;
+const SELECT_LAYOUT_REASON_PAGINATION = 1 << 1;
+const SELECT_LAYOUT_REASON_POSITION = 1 << 2;
+const SELECT_LAYOUT_REASON_ALL =
+	SELECT_LAYOUT_REASON_OPTION_STATE |
+	SELECT_LAYOUT_REASON_PAGINATION |
+	SELECT_LAYOUT_REASON_POSITION;
 
 /**
  * @private
@@ -709,19 +728,21 @@ class Select extends CustomControl {
 					}
 
 					this.setOption("messages.selected", "");
-					this.setOption("messages.total", "");
+					setRemoteInfoText.call(this, "");
 					this.setOption("messages.summary", "");
 					this.setOption("total", null);
 					resetPaginationState.call(this);
 
-					resetErrorAttribute(this);
+						resetErrorAttribute(this);
 
-					this[lazyLoadDoneSymbol] = false;
+						this[lazyLoadDoneSymbol] = false;
 
-					checkOptionState.call(this);
-					calcAndSetOptionsDimension.call(this);
-					updatePopper.call(this);
-				})
+						scheduleSelectLayoutCycle.call(
+							this,
+							SELECT_LAYOUT_PRIORITY_CRITICAL,
+							SELECT_LAYOUT_REASON_ALL,
+						);
+					})
 				.catch((e) => {
 					addErrorAttribute(this, e);
 				});
@@ -1102,6 +1123,44 @@ function processAndApplyRemoteInfoTotal(data) {
 	}
 }
 
+/**
+ * @private
+ * @param {string|null|undefined} message
+ * @param {object} [options]
+ * @param {boolean} [options.reserveSpace=false]
+ * @returns {void}
+ */
+function setRemoteInfoText(message, { reserveSpace = false } = {}) {
+	const normalizedMessage =
+		message === undefined || message === null ? "" : `${message}`;
+	const previousStableMessage =
+		typeof this[remoteInfoStableMessageSymbol] === "string"
+			? this[remoteInfoStableMessageSymbol]
+			: "";
+	const renderedMessage =
+		reserveSpace === true &&
+		normalizedMessage === "" &&
+		previousStableMessage !== ""
+			? previousStableMessage
+			: normalizedMessage;
+
+	this.setOption("messages.total", renderedMessage);
+
+	if (normalizedMessage !== "") {
+		this[remoteInfoStableMessageSymbol] = normalizedMessage;
+	} else if (reserveSpace !== true) {
+		this[remoteInfoStableMessageSymbol] = "";
+	}
+
+	if (this[remoteInfoElementSymbol] instanceof HTMLElement) {
+		if (reserveSpace === true && renderedMessage !== "") {
+			this[remoteInfoElementSymbol].style.visibility = "hidden";
+		} else {
+			this[remoteInfoElementSymbol].style.removeProperty("visibility");
+		}
+	}
+}
+
 /**
  * @private
  * @returns {number}
@@ -1964,7 +2023,9 @@ function fetchIt(url, controlOptions) {
 			classes.add("d-none");
 			this.setOption("classes.noOptions", classes.toString());
 			this.setOption("messages.emptyOptions", "");
-			this.setOption("messages.total", "");
+			setRemoteInfoText.call(this, "", {
+				reserveSpace: true,
+			});
 		}
 
 		new Processing(10, () => {
@@ -2158,6 +2219,7 @@ function disconnectResizeObserver() {
 		this[resizeObserverSymbol].disconnect();
 	}
 	cancelScheduledResizeObserverPopperUpdate.call(this);
+	cancelScheduledSelectLayoutCycle.call(this);
 
 	const viewport = getGlobal().visualViewport;
 	if (
@@ -2217,7 +2279,11 @@ function scheduleResizeObserverPopperUpdate() {
 
 	this[resizeObserverFrameSymbol] = schedule(() => {
 		delete this[resizeObserverFrameSymbol];
-		updatePopper.call(this);
+		scheduleSelectLayoutCycle.call(
+			this,
+			SELECT_LAYOUT_PRIORITY_CRITICAL,
+			SELECT_LAYOUT_REASON_ALL,
+		);
 	});
 }
 
@@ -2236,6 +2302,155 @@ function cancelScheduledResizeObserverPopperUpdate() {
 	delete this[resizeObserverFrameSymbol];
 }
 
+function applySelectLayoutState(layoutReasons = 0) {
+	if (layoutReasons & SELECT_LAYOUT_REASON_OPTION_STATE) {
+		checkOptionState.call(this);
+	}
+
+	calcAndSetOptionsDimension.call(this);
+
+	if (layoutReasons & SELECT_LAYOUT_REASON_PAGINATION) {
+		refreshSelectPaginationLayout.call(this);
+	}
+}
+
+function performSelectLayoutCycle(layoutReasons = SELECT_LAYOUT_REASON_ALL) {
+	if (!isPositionedPopperOpen(this[popperElementSymbol])) {
+		return Promise.resolve();
+	}
+
+	if (this.getOption("disabled", false) === true) {
+		return Promise.resolve();
+	}
+
+	return new Processing(() => {
+		applySelectLayoutState.call(this, layoutReasons);
+		if (layoutReasons & SELECT_LAYOUT_REASON_POSITION) {
+			return positionPopper.call(
+				this,
+				this[controlElementSymbol],
+				this[popperElementSymbol],
+				getSelectPopperPositionOptions.call(this),
+			);
+		}
+	}).run();
+}
+
+function cancelScheduledSelectLayoutCycle() {
+	const globalObject = getGlobal();
+	const frameId = this[layoutCycleFrameSymbol];
+	if (typeof frameId === "number") {
+		if (globalObject?.cancelAnimationFrame instanceof Function) {
+			globalObject.cancelAnimationFrame(frameId);
+		} else {
+			globalObject.clearTimeout(frameId);
+		}
+	}
+
+	delete this[layoutCycleFrameSymbol];
+	this[layoutCycleTokenSymbol] = (this[layoutCycleTokenSymbol] || 0) + 1;
+	delete this[layoutCycleModeSymbol];
+}
+
+function flushScheduledSelectLayoutCycle() {
+	if (this[layoutCycleRunningSymbol] === true) {
+		return;
+	}
+
+	const layoutReasons =
+		this[layoutCyclePendingFlagsSymbol] || SELECT_LAYOUT_REASON_ALL;
+	const layoutPriority =
+		this[layoutCyclePendingPrioritySymbol] || SELECT_LAYOUT_PRIORITY_INTERACTIVE;
+
+	delete this[layoutCyclePendingFlagsSymbol];
+	delete this[layoutCyclePendingPrioritySymbol];
+
+	this[layoutCycleRunningSymbol] = true;
+	performSelectLayoutCycle
+		.call(this, layoutReasons)
+		.catch((e) => {
+			addErrorAttribute(this, e);
+		})
+		.finally(() => {
+			delete this[layoutCycleRunningSymbol];
+			if (this[layoutCyclePendingFlagsSymbol]) {
+				scheduleSelectLayoutCycle.call(
+					this,
+					layoutPriority,
+					this[layoutCyclePendingFlagsSymbol],
+				);
+			}
+		});
+}
+
+function scheduleSelectLayoutCycle(
+	layoutPriority = SELECT_LAYOUT_PRIORITY_INTERACTIVE,
+	layoutReasons = SELECT_LAYOUT_REASON_ALL,
+) {
+	this[layoutCyclePendingFlagsSymbol] =
+		(this[layoutCyclePendingFlagsSymbol] || 0) | layoutReasons;
+	this[layoutCyclePendingPrioritySymbol] = Math.max(
+		this[layoutCyclePendingPrioritySymbol] || 0,
+		layoutPriority,
+	);
+
+	if (this[layoutCycleRunningSymbol] === true) {
+		return;
+	}
+
+	const pendingPriority = this[layoutCyclePendingPrioritySymbol];
+	const currentMode = this[layoutCycleModeSymbol];
+	if (
+		currentMode === "microtask" ||
+		(currentMode === "frame" &&
+			pendingPriority !== SELECT_LAYOUT_PRIORITY_CRITICAL)
+	) {
+		return;
+	}
+
+	if (pendingPriority === SELECT_LAYOUT_PRIORITY_CRITICAL) {
+		cancelScheduledSelectLayoutCycle.call(this);
+		const token = this[layoutCycleTokenSymbol];
+		this[layoutCycleModeSymbol] = "microtask";
+		queueMicrotask(() => {
+			if (
+				this[layoutCycleModeSymbol] !== "microtask" ||
+				this[layoutCycleTokenSymbol] !== token
+			) {
+				return;
+			}
+
+			delete this[layoutCycleModeSymbol];
+			flushScheduledSelectLayoutCycle.call(this);
+		});
+		return;
+	}
+
+	const globalObject = getGlobal();
+	const schedule =
+		globalObject?.requestAnimationFrame instanceof Function
+			? globalObject.requestAnimationFrame.bind(globalObject)
+			: (callback) => {
+					return globalObject.setTimeout(callback, 16);
+			  };
+
+	this[layoutCycleModeSymbol] = "frame";
+	const token = (this[layoutCycleTokenSymbol] || 0) + 1;
+	this[layoutCycleTokenSymbol] = token;
+	this[layoutCycleFrameSymbol] = schedule(() => {
+		delete this[layoutCycleFrameSymbol];
+		if (
+			this[layoutCycleModeSymbol] !== "frame" ||
+			this[layoutCycleTokenSymbol] !== token
+		) {
+			return;
+		}
+
+		delete this[layoutCycleModeSymbol];
+		flushScheduledSelectLayoutCycle.call(this);
+	});
+}
+
 /**
  * @private
  * @returns {string}
@@ -2327,6 +2542,27 @@ function buildSelectionLabel(value) {
 		return map.get(key);
 	}
 
+	const options = this.getOption("options");
+	if (isArray(options)) {
+		for (const option of options) {
+			if (!isObject(option) || option.value === undefined) {
+				continue;
+			}
+
+			const optionKey = strict
+				? option.value
+				: getSelectionStateKey.call(this, option.value);
+			if (optionKey !== key) {
+				continue;
+			}
+
+			if (clearUnresolvedSelectionValue.call(this, value)) {
+				this[lookupCacheSymbol].delete(getSelectionCacheKey.call(this, value));
+			}
+			return option.label;
+		}
+	}
+
 	const cacheKey = getSelectionCacheKey.call(this, value);
 	if (this[lookupCacheSymbol].has(cacheKey)) {
 		return this[lookupCacheSymbol].get(cacheKey);
@@ -2773,19 +3009,21 @@ function setTotalText() {
 	}
 
 	if (this[isLoadingSymbol] === true) {
-		this.setOption("messages.total", "");
+		setRemoteInfoText.call(this, "", {
+			reserveSpace: true,
+		});
 		return;
 	}
 
 	const count = this.getOption("options").length;
 	if (count === 0) {
-		this.setOption("messages.total", "");
+		setRemoteInfoText.call(this, "");
 		return;
 	}
 
 	const total = Number.parseInt(this.getOption("total"));
 	if (Number.isNaN(total)) {
-		this.setOption("messages.total", "");
+		setRemoteInfoText.call(this, "");
 		return;
 	}
 
@@ -2793,7 +3031,7 @@ function setTotalText() {
 
 	const diff = total - count;
 	if (diff < 0) {
-		this.setOption("messages.total", "");
+		setRemoteInfoText.call(this, "");
 		return;
 	}
 	const text = translations.getPluralRuleText("total", diff, "");
@@ -2801,7 +3039,7 @@ function setTotalText() {
 		count: String(diff),
 	}).format(text);
 
-	this.setOption("messages.total", selectedText);
+	setRemoteInfoText.call(this, selectedText);
 }
 
 /**
@@ -3361,12 +3599,16 @@ function filterOptions() {
 			}
 		}
 	})
-		.run()
-		.then(() => {
-			new Processing(100, () => {
-				calcAndSetOptionsDimension.call(this);
-				focusFilter.call(this);
-			})
+			.run()
+			.then(() => {
+				new Processing(100, () => {
+					scheduleSelectLayoutCycle.call(
+						this,
+						SELECT_LAYOUT_PRIORITY_CRITICAL,
+						SELECT_LAYOUT_REASON_PAGINATION | SELECT_LAYOUT_REASON_POSITION,
+					);
+					focusFilter.call(this);
+				})
 				.run()
 				.catch((e) => {
 					addErrorAttribute(this, e);
@@ -4537,12 +4779,13 @@ function show() {
 		} else {
 			initTotal.call(self);
 		}
-		calcAndSetOptionsDimension.call(this);
-		focusFilter.call(this);
-		this[popperElementSymbol].style.removeProperty("visibility");
-		refreshSelectPaginationLayout.call(this);
-		updatePopper.call(this);
-	})
+			focusFilter.call(this);
+			return performSelectLayoutCycle
+				.call(this, SELECT_LAYOUT_REASON_ALL)
+				.then(() => {
+					this[popperElementSymbol].style.removeProperty("visibility");
+				});
+		})
 		.run()
 		.catch((e) => {
 			addErrorAttribute(this, e);
@@ -4627,7 +4870,9 @@ function initTotal() {
 	}
 
 	const fetchOptions = this.getOption("fetch", {});
-	this.setOption("messages.total", "");
+	setRemoteInfoText.call(this, "", {
+		reserveSpace: true,
+	});
 
 	const remoteInfoRequest = getGlobal()
 		.fetch(url, fetchOptions)
@@ -4684,7 +4929,7 @@ function resetPaginationState(clearTotalMessage = true) {
 	paginationElement.setOption("currentPage", null);
 	paginationElement.setOption("objectsPerPage", null);
 	if (clearTotalMessage === true) {
-		this.setOption("messages.total", "");
+		setRemoteInfoText.call(this, "");
 	}
 }
 
@@ -4695,13 +4940,21 @@ function clearOptionsOnError() {
 
 function refreshSelectPaginationLayout() {
 	const paginationElement = this[paginationElementSymbol];
-	if (!paginationElement || typeof paginationElement.getOption !== "function") {
+	if (!paginationElement) {
+		return;
+	}
+
+	if (typeof paginationElement.refreshLayout === "function") {
+		paginationElement.refreshLayout();
+		return;
+	}
+
+	if (typeof paginationElement.getOption !== "function") {
 		return;
 	}
 
 	const currentPage = paginationElement.getOption("currentPage");
 	const totalPages = paginationElement.getOption("pages");
-
 	if (!isInteger(currentPage) || !isInteger(totalPages)) {
 		return;
 	}
@@ -4959,15 +5212,17 @@ function initEventHandler() {
 			}
 		}
 
-		this[debounceOptionsMutationObserverSymbol] = new DeadMansSwitch(
-			100,
-			() => {
-				checkOptionState.call(self);
-				calcAndSetOptionsDimension.call(self);
-				updatePopper.call(self);
-				delete this[debounceOptionsMutationObserverSymbol];
-			},
-		);
+			this[debounceOptionsMutationObserverSymbol] = new DeadMansSwitch(
+				100,
+				() => {
+					scheduleSelectLayoutCycle.call(
+						self,
+						SELECT_LAYOUT_PRIORITY_INTERACTIVE,
+						SELECT_LAYOUT_REASON_ALL,
+					);
+					delete this[debounceOptionsMutationObserverSymbol];
+				},
+			);
 	};
 
 	const observer = new MutationObserver(callback);
@@ -5140,7 +5395,7 @@ function initControlReferences() {
 		`[${ATTRIBUTE_ROLE}=popper]`,
 	);
 	this[popperElementSymbol].monsterBeforeFloatingUpdate = () => {
-		calcAndSetOptionsDimension.call(this);
+		applySelectLayoutState.call(this, SELECT_LAYOUT_REASON_PAGINATION);
 	};
 	this[inlineFilterElementSymbol] = this.shadowRoot.querySelector(
 		`[${ATTRIBUTE_ROLE}=filter][name="inline-filter"]`,
@@ -5170,31 +5425,11 @@ function initControlReferences() {
  * @private
  */
 function updatePopper() {
-	if (!isPositionedPopperOpen(this[popperElementSymbol])) {
-		return;
-	}
-
-	if (this.getOption("disabled", false) === true) {
-		return;
-	}
-
-	new Processing(() => {
-		calcAndSetOptionsDimension.call(this);
-		positionPopper.call(
-			this,
-			this[controlElementSymbol],
-			this[popperElementSymbol],
-			getSelectPopperPositionOptions.call(this),
-		);
-		requestAnimationFrame(() => {
-			refreshSelectPaginationLayout.call(this);
-		});
-	})
-		.run()
-		.catch((e) => {
-			addErrorAttribute(this, e);
-		});
-
+	scheduleSelectLayoutCycle.call(
+		this,
+		SELECT_LAYOUT_PRIORITY_INTERACTIVE,
+		SELECT_LAYOUT_REASON_ALL,
+	);
 	return this;
 }
 

package/source/components/form/util/floating-ui.mjs

@@ -41,6 +41,7 @@ const settlingFrameMap = new WeakMap();
 const floatingResizeObserverMap = new WeakMap();
 const floatingSyncCycleMap = new WeakMap();
 const floatingAppearanceFrameMap = new WeakMap();
+const floatingAppearanceTimeoutMap = new WeakMap();
 
 /**
  * @private
@@ -1048,6 +1049,15 @@ function scheduleFloatingAppearanceOpen(popperElement) {
 		return;
 	}
 
+	const finishAppearanceOpen = () => {
+		cancelFloatingAppearanceFrame(popperElement);
+
+		if (!isPositionedPopperOpen(popperElement)) {
+			return;
+		}
+
+		popperElement.dataset.monsterAppearance = "open";
+	};
 	const schedule =
 		typeof requestAnimationFrame === "function"
 			? requestAnimationFrame
@@ -1055,35 +1065,40 @@ function scheduleFloatingAppearanceOpen(popperElement) {
 					return setTimeout(callback, 16);
 			  };
 	const frameId = schedule(() => {
-		floatingAppearanceFrameMap.delete(popperElement);
-
-		if (!isPositionedPopperOpen(popperElement)) {
-			return;
-		}
-
-		popperElement.dataset.monsterAppearance = "open";
+		finishAppearanceOpen();
 	});
+	const timeoutId = setTimeout(() => {
+		finishAppearanceOpen();
+	}, 24);
 
 	floatingAppearanceFrameMap.set(popperElement, frameId);
+	floatingAppearanceTimeoutMap.set(popperElement, timeoutId);
 }
 
 function cancelFloatingAppearanceFrame(popperElement) {
 	const frameId = floatingAppearanceFrameMap.get(popperElement);
 	if (
-		frameId === undefined ||
-		frameId === null ||
-		Number.isNaN(frameId) === true
+		frameId !== undefined &&
+		frameId !== null &&
+		Number.isNaN(frameId) === false
 	) {
-		return;
+		if (typeof cancelAnimationFrame === "function") {
+			cancelAnimationFrame(frameId);
+		} else {
+			clearTimeout(frameId);
+		}
 	}
+	floatingAppearanceFrameMap.delete(popperElement);
 
-	if (typeof cancelAnimationFrame === "function") {
-		cancelAnimationFrame(frameId);
-	} else {
-		clearTimeout(frameId);
+	const timeoutId = floatingAppearanceTimeoutMap.get(popperElement);
+	if (
+		timeoutId !== undefined &&
+		timeoutId !== null &&
+		Number.isNaN(timeoutId) === false
+	) {
+		clearTimeout(timeoutId);
 	}
-
-	floatingAppearanceFrameMap.delete(popperElement);
+	floatingAppearanceTimeoutMap.delete(popperElement);
 }
 
 function applyFloatingArrowStyles(arrowElement, placement, arrowData) {

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

@@ -235,4 +235,44 @@ describe("PopperButton", function () {
 			}
 		}, 0);
 	});
+
+	it("should finish the opening appearance state when requestAnimationFrame stalls", function (done) {
+		let mocks = document.getElementById("mocks");
+		const button = document.createElement("monster-popper-button");
+		const originalRequestAnimationFrame = globalThis.requestAnimationFrame;
+		const originalCancelAnimationFrame = globalThis.cancelAnimationFrame;
+
+		globalThis.requestAnimationFrame = () => 1;
+		globalThis.cancelAnimationFrame = () => {};
+		mocks.appendChild(button);
+
+		setTimeout(() => {
+			try {
+				button.showDialog();
+
+				const popper = button.shadowRoot.querySelector(
+					'[data-monster-role="popper"]',
+				);
+				expect(popper).to.exist;
+				expect(popper.dataset.monsterAppearance).to.equal("opening");
+
+				setTimeout(() => {
+					try {
+						expect(popper.dataset.monsterAppearance).to.equal("open");
+						button.hideDialog();
+						done();
+					} catch (e) {
+						done(e);
+					} finally {
+						globalThis.requestAnimationFrame = originalRequestAnimationFrame;
+						globalThis.cancelAnimationFrame = originalCancelAnimationFrame;
+					}
+				}, 30);
+			} catch (e) {
+				globalThis.requestAnimationFrame = originalRequestAnimationFrame;
+				globalThis.cancelAnimationFrame = originalCancelAnimationFrame;
+				done(e);
+			}
+		}, 0);
+	});
 });

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

@@ -47,6 +47,18 @@ function createJsonResponse(data, status = 200) {
     });
 }
 
+function createDeferred() {
+    let resolve;
+    let reject;
+
+    const promise = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+
+    return {promise, resolve, reject};
+}
+
 function waitForCondition(check, {timeout = 4000, interval = 25} = {}) {
     return new Promise((resolve, reject) => {
         const start = Date.now();
@@ -1141,6 +1153,195 @@ describe('Select', function () {
             expect(select.getOption('messages.total')).to.contain('No additional entries are available');
         });
 
+        it('should keep the remote-info footer height stable while a remote page request is pending', async function () {
+            this.timeout(4000);
+
+            let mocks = document.getElementById('mocks');
+            const firstRequest = createDeferred();
+            const secondRequest = createDeferred();
+            let requestCount = 0;
+
+            global['fetch'] = function () {
+                requestCount += 1;
+
+                if (requestCount === 1) {
+                    return firstRequest.promise;
+                }
+
+                if (requestCount === 2) {
+                    return secondRequest.promise;
+                }
+
+                return Promise.reject(new Error('unexpected fetch request'));
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+            select.setOption('filter.mode', 'remote');
+            select.setOption('filter.position', 'popper');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('mapping.total', 'pagination.total');
+            select.setOption('mapping.currentPage', 'pagination.page');
+            select.setOption('mapping.objectsPerPage', 'pagination.perPage');
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=container]') instanceof HTMLElement;
+            });
+
+            const firstFetch = select.fetch('https://example.com/items?filter=*&page=1');
+            firstRequest.resolve(await createJsonResponse({
+                items: [
+                    {id: 'alpha', name: 'Alpha'}
+                ],
+                pagination: {
+                    total: 12,
+                    page: 1,
+                    perPage: 1
+                }
+            }));
+            await firstFetch;
+
+            await waitForCondition(() => {
+                return select.getOption('messages.total').includes('additional entries are available');
+            });
+
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            const remoteInfoElement = select.shadowRoot.querySelector('[data-monster-role=remote-info]');
+
+            container.click();
+
+            await waitForCondition(() => {
+                return select.shadowRoot
+                    .querySelector('[data-monster-role=control]')
+                    .classList
+                    .contains('open');
+            });
+
+            expect(remoteInfoElement.style.visibility).to.equal('');
+
+            const secondFetch = select.fetch('https://example.com/items?filter=*&page=2');
+
+            await waitForCondition(() => {
+                return remoteInfoElement.style.visibility === 'hidden';
+            });
+
+            expect(select.getOption('messages.total')).to.contain('additional entries are available');
+
+            secondRequest.resolve(await createJsonResponse({
+                items: [
+                    {id: 'beta', name: 'Beta'}
+                ],
+                pagination: {
+                    total: 12,
+                    page: 2,
+                    perPage: 1
+                }
+            }));
+
+            await secondFetch;
+
+            await waitForCondition(() => {
+                return remoteInfoElement.style.visibility === '';
+            });
+
+            expect(select.getOption('messages.total')).to.contain('additional entries are available');
+        });
+
+        it('should clear preserved remote-info text after a later empty remote result settles', async function () {
+            this.timeout(4000);
+
+            let mocks = document.getElementById('mocks');
+            const firstRequest = createDeferred();
+            const secondRequest = createDeferred();
+            let requestCount = 0;
+
+            global['fetch'] = function () {
+                requestCount += 1;
+
+                if (requestCount === 1) {
+                    return firstRequest.promise;
+                }
+
+                if (requestCount === 2) {
+                    return secondRequest.promise;
+                }
+
+                return Promise.reject(new Error('unexpected fetch request'));
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+            select.setOption('filter.mode', 'remote');
+            select.setOption('filter.position', 'popper');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('mapping.total', 'pagination.total');
+            select.setOption('mapping.currentPage', 'pagination.page');
+            select.setOption('mapping.objectsPerPage', 'pagination.perPage');
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=container]') instanceof HTMLElement;
+            });
+
+            const firstFetch = select.fetch('https://example.com/items?filter=*&page=1');
+            firstRequest.resolve(await createJsonResponse({
+                items: [
+                    {id: 'alpha', name: 'Alpha'}
+                ],
+                pagination: {
+                    total: 12,
+                    page: 1,
+                    perPage: 1
+                }
+            }));
+            await firstFetch;
+
+            await waitForCondition(() => {
+                return select.getOption('messages.total').includes('additional entries are available');
+            });
+
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            const remoteInfoElement = select.shadowRoot.querySelector('[data-monster-role=remote-info]');
+
+            container.click();
+
+            await waitForCondition(() => {
+                return select.shadowRoot
+                    .querySelector('[data-monster-role=control]')
+                    .classList
+                    .contains('open');
+            });
+
+            const secondFetch = select.fetch('https://example.com/items?filter=leer&page=1');
+
+            await waitForCondition(() => {
+                return remoteInfoElement.style.visibility === 'hidden';
+            });
+
+            secondRequest.resolve(await createJsonResponse({
+                items: [],
+                pagination: {
+                    total: 0,
+                    page: 1,
+                    perPage: 1
+                }
+            }));
+
+            await secondFetch;
+
+            await waitForCondition(() => {
+                return select.getOption('messages.total') === '';
+            });
+
+            expect(remoteInfoElement.style.visibility).to.equal('');
+            expect(select.getOption('messages.total')).to.equal('');
+        });
+
         it('should avoid duplicate remote-info badges for empty remote filter results', async function () {
             this.timeout(4000);