@schukai/monster 4.136.4 → 4.136.6

package/source/components/form/select.mjs

@@ -41,6 +41,7 @@ import { getLocaleOfDocument } from "../../dom/locale.mjs";
 import {
 	findElementWithSelectorUpwards,
 	getDocument,
+	getWindow,
 } from "../../dom/util.mjs";
 import {
 	getDocumentTranslations,
@@ -69,6 +70,8 @@ import {
 	isPositionedPopperOpen,
 	openPositionedPopper,
 	positionPopper,
+	resolveClippingBoundaryElement,
+	resolveParentPopperContentBoundary,
 } from "./util/floating-ui.mjs";
 import { Pathfinder } from "../../data/pathfinder.mjs";
 import { TokenList } from "../../types/tokenlist.mjs";
@@ -76,9 +79,14 @@ import { TokenList } from "../../types/tokenlist.mjs";
 import "../datatable/pagination.mjs";
 
 export {
+	getDefaultSelectPopperPositionProfile,
 	getSelectionTemplate,
 	getSummaryTemplate,
 	popperElementSymbol,
+	resolveSelectPopperWidthConstraints,
+	resolveSelectListDimension,
+	resolveSelectVisibleRect,
+	resolveSelectViewportMetrics,
 	Select,
 };
 
@@ -129,6 +137,14 @@ const clearOptionEventHandler = Symbol("clearOptionEventHandler");
  * @type {Symbol}
  */
 const resizeObserverSymbol = Symbol("resizeObserver");
+const resizeObserverFrameSymbol = Symbol("resizeObserverFrame");
+const visualViewportResizeHandlerSymbol = Symbol("visualViewportResizeHandler");
+const visualViewportScrollHandlerSymbol = Symbol("visualViewportScrollHandler");
+const visibilityChangeHandlerSymbol = Symbol("visibilityChangeHandler");
+const windowResizeHandlerSymbol = Symbol("windowResizeHandler");
+const windowOrientationChangeHandlerSymbol = Symbol(
+	"windowOrientationChangeHandler",
+);
 
 /**
  * local symbol
@@ -246,21 +262,17 @@ const remoteInfoElementSymbol = Symbol("remoteInfoElement");
 const areOptionsAvailableAndInitSymbol = Symbol("@@areOptionsAvailableAndInit");
 
 /**
+ * Internal sentinel used to suppress a remote request after URL formatting.
+ *
+ * This is currently inserted only when `filter.defaultValue` resolves to
+ * `undefined` or `null`. An empty string is treated as a real filter value and
+ * therefore still produces a request.
+ *
  * @private
  * @type {symbol}
  */
 const disabledRequestMarker = Symbol("@@disabledRequestMarker");
 
-/**
- * @private
- * @type {symbol}
- */
-const runLookupOnceSymbol = Symbol("runLookupOnce");
-
-/**
- * @private
- * @type {symbol}
- */
 const cleanupOptionsListSymbol = Symbol("cleanupOptionsList");
 const optionsVersionSymbol = Symbol("optionsVersion");
 const pendingSelectionSymbol = Symbol("pendingSelection");
@@ -285,16 +297,6 @@ const debounceOptionsMutationObserverSymbol = Symbol(
  */
 const currentPageSymbol = Symbol("currentPage");
 
-/**
- * @private
- * @type {symbol}
- */
-const remoteFilterFirstOpendSymbol = Symbol("remoteFilterFirstOpend");
-
-/**
- * @private
- * @type {symbol}
- */
 const lookupCacheSymbol = Symbol("lookupCache");
 
 /**
@@ -302,6 +304,7 @@ const lookupCacheSymbol = Symbol("lookupCache");
  * @type {symbol}
  */
 const lookupInProgressSymbol = Symbol("lookupInProgress");
+const unresolvedSelectionValuesSymbol = Symbol("unresolvedSelectionValues");
 const fetchRequestVersionSymbol = Symbol("fetchRequestVersion");
 
 /**
@@ -343,6 +346,9 @@ const FILTER_POSITION_POPPER = "popper";
  * @type {string}
  */
 const FILTER_POSITION_INLINE = "inline";
+const SELECT_MIN_POPPER_WIDTH = 240;
+const SELECT_MAX_POPPER_HEIGHT = 500;
+const SELECT_VIEWPORT_PADDING = 12;
 
 /**
  * A select control that can be used to select o
@@ -380,6 +386,7 @@ class Select extends CustomControl {
 		this[currentPageSymbol] = 1;
 		this[lookupCacheSymbol] = new Map();
 		this[lookupInProgressSymbol] = new Map();
+		this[unresolvedSelectionValuesSymbol] = new Set();
 		this[optionsMapSymbol] = new Map();
 		this[closeOnSelectAutoSymbol] = true;
 		initOptionObserver.call(this);
@@ -462,8 +469,8 @@ class Select extends CustomControl {
 	 * @property {string} name - Name of the hidden form field for form submission.
 	 * @property {string|null} url - URL to dynamically fetch options via HTTP when opening or filtering.
 	 * @property {number|null} total - Total number of available options, useful for pagination with remote data.
-	 * @property {Object} lookup - Configuration for fetching initially selected values.
-	 * @property {string|null} lookup.url - URL template with a `${filter}` placeholder to look up selected entries on initialization. Used when `url` is set and either `features.lazyLoad` is active or `filter.mode` is `"remote"`.
+	 * @property {Object} lookup - Configuration for hydrating already selected values.
+	 * @property {string|null} lookup.url - URL template with a `${filter}` placeholder to look up selected entries. Prefer a stable value-based lookup endpoint. This is used for initial hydration and for resolving labels of externally assigned selections that are not yet present in the local option map.
 	 * @property {boolean} lookup.grouping - If `true`, all selected values are fetched in a single request; otherwise, a separate request is sent for each value.
 	 * @property {Object} fetch - Configuration for HTTP requests via `fetch`.
 	 * @property {string} fetch.redirect - Fetch redirect mode (e.g., "error", "follow").
@@ -472,7 +479,7 @@ class Select extends CustomControl {
 	 * @property {string} fetch.credentials - Credentials policy for fetch (e.g., "include", "same-origin").
 	 * @property {Object.<string, string>} fetch.headers - HTTP headers to be sent with every request.
 	 * @property {Object} labels - Text labels for various states and UI elements.
-	 * @property {string} labels.cannot-be-loaded - Message displayed when options cannot be loaded.
+	 * @property {string} labels.cannot-be-loaded - Message displayed when options cannot be loaded. Unresolved selected values keep their raw key instead of replacing it with this label.
 	 * @property {string} labels.no-options-available - Message displayed when no static options are provided.
 	 * @property {string} labels.click-to-load-options - Prompt to load options when `features.lazyLoad` is enabled.
 	 * @property {string} labels.select-an-option - Placeholder text when no selection has been made.
@@ -495,10 +502,10 @@ class Select extends CustomControl {
 	 * @property {Object} placeholder - Placeholder texts for input fields.
 	 * @property {string} placeholder.filter - Placeholder text for the filter input field.
 	 * @property {Object} filter - Configuration for the filtering functionality.
-	 * @property {string|null} filter.defaultValue - Default filter value for remote requests. An empty string will prevent the initial request.
+	 * @property {string|null} filter.defaultValue - Default filter value for remote requests. In the current implementation only `undefined` or `null` suppress the request by inserting an internal disabled marker. An empty string `""` is still formatted into the URL and therefore does not prevent the request.
 	 * @property {"options"|"remote"|"disabled"} filter.mode - Filter mode: `"options"` (client-side), `"remote"` (server-side, `lazyLoad` is ignored), or `"disabled"`.
 	 * @property {"inline"|"popper"} filter.position - Position of the filter input: `"inline"` (inside the control) or `"popper"` (inside the dropdown).
-	 * @property {string|null} filter.defaultOptionsUrl - URL to load an initial list of options when `filter.mode` is `"remote"` and no filter value has been entered.
+	 * @property {string|null} filter.defaultOptionsUrl - URL to load options when `filter.mode` is `"remote"` and no filter value has been entered. This is used as the empty-filter source both on open and after the filter is cleared again.
 	 * @property {Object} filter.marker - Markers for embedding the filter value into the `url` for server-side filtering.
 	 * @property {string} filter.marker.open - Opening marker (e.g., `{`).
 	 * @property {string} filter.marker.close - Closing marker (e.g., `}`).
@@ -526,6 +533,7 @@ class Select extends CustomControl {
 	 * @property {Function} formatter.selection - Callback `(value, option) => string` to format the display text of selected values.
 	 * @property {Object} classes - CSS classes for various elements.
 	 * @property {string} classes.badge - CSS class for selection badges.
+	 * @property {string} classes.badgeUnresolved - CSS class used for selection badges whose value could not be hydrated. By default this swaps the badge into a warning style while keeping the raw key visible.
 	 * @property {string} classes.statusOrRemoveBadge - CSS class for the status or remove badge.
 	 * @property {string} classes.remoteInfo - CSS class for the remote info badge.
 	 * @property {string} classes.noOptions - CSS class for the "no options" message.
@@ -607,6 +615,7 @@ class Select extends CustomControl {
 
 				classes: {
 					badge: "monster-badge-primary",
+					badgeUnresolved: "monster-badge-warning",
 					statusOrRemoveBadge: "empty",
 					remoteInfo: "monster-margin-start-4 monster-margin-top-4",
 					noOptions: "monster-margin-top-4 monster-margin-start-4",
@@ -663,6 +672,7 @@ class Select extends CustomControl {
 			// Clear the lookup cache
 			this[lookupCacheSymbol].clear();
 			this[lookupInProgressSymbol].clear();
+			this[unresolvedSelectionValuesSymbol].clear();
 
 			setSelection
 				.call(this, null)
@@ -684,7 +694,6 @@ class Select extends CustomControl {
 					resetErrorAttribute(this);
 
 					this[lazyLoadDoneSymbol] = false;
-					this[runLookupOnceSymbol] = false;
 
 					checkOptionState.call(this);
 					calcAndSetOptionsDimension.call(this);
@@ -735,7 +744,9 @@ class Select extends CustomControl {
 
 		if (self.getOption("url") !== null) {
 			if (lazyLoadFlag || remoteFilterFlag) {
-				lookupSelection.call(self);
+				if (self.getOption("lookup.url")) {
+					lookupSelection.call(self);
+				}
 			} else {
 				self
 					.fetch()
@@ -1758,9 +1769,12 @@ function getTranslations() {
 }
 
 /**
- * @private
- */
-/**
+ * Hydrates the current selection once the component becomes visible.
+ *
+ * This path is used for initial hydration when remote or lazy-loaded options
+ * are not yet present locally. It is intentionally limited to `lookup.url`
+ * and does not fall back to the main remote option source.
+ *
  * @private
  */
 function lookupSelection() {
@@ -1799,7 +1813,10 @@ function runSelectionLookupWhenVisible(self) {
 			return;
 		}
 
-		let url = self.getOption("lookup.url") || self.getOption("url");
+		const url = self.getOption("lookup.url");
+		if (!url) {
+			return;
+		}
 		self[cleanupOptionsListSymbol] = false;
 
 		if (self.getOption("lookup.grouping") === true) {
@@ -1975,21 +1992,8 @@ function initOptionsFromArguments() {
  * @private
  */
 function attachResizeObserver() {
-	// against flickering
-	this[resizeObserverSymbol] = new ResizeObserver((entries) => {
-		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
-			try {
-				this[timerCallbackSymbol].touch();
-				return;
-			} catch (e) {
-				delete this[timerCallbackSymbol];
-			}
-		}
-
-		this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
-			updatePopper.call(this);
-			delete this[timerCallbackSymbol];
-		});
+	this[resizeObserverSymbol] = new ResizeObserver(() => {
+		scheduleResizeObserverPopperUpdate.call(this);
 	});
 
 	let parent = this.parentNode;
@@ -2000,6 +2004,70 @@ function attachResizeObserver() {
 	if (parent instanceof HTMLElement) {
 		this[resizeObserverSymbol].observe(parent);
 	}
+
+	for (const element of [
+		this,
+		this[controlElementSymbol],
+		this[popperElementSymbol],
+		this[popperFilterContainerElementSymbol],
+		this[optionsElementSymbol],
+		this[paginationElementSymbol],
+	]) {
+		if (element instanceof HTMLElement) {
+			this[resizeObserverSymbol].observe(element);
+		}
+	}
+
+	const boundaryElement = resolveClippingBoundaryElement(
+		this[controlElementSymbol],
+		this[popperElementSymbol],
+	);
+	if (boundaryElement instanceof HTMLElement) {
+		this[resizeObserverSymbol].observe(boundaryElement);
+	}
+
+	const viewport = getGlobal().visualViewport;
+	const windowObject = getWindow();
+	this[visualViewportResizeHandlerSymbol] = () => {
+		updatePopper.call(this);
+	};
+	this[visualViewportScrollHandlerSymbol] = () => {
+		updatePopper.call(this);
+	};
+	this[visibilityChangeHandlerSymbol] = () => {
+		if (document.visibilityState === "visible") {
+			updatePopper.call(this);
+		}
+	};
+	this[windowResizeHandlerSymbol] = () => {
+		updatePopper.call(this);
+	};
+	this[windowOrientationChangeHandlerSymbol] = () => {
+		updatePopper.call(this);
+	};
+
+	if (viewport) {
+		viewport.addEventListener(
+			"resize",
+			this[visualViewportResizeHandlerSymbol],
+		);
+		viewport.addEventListener(
+			"scroll",
+			this[visualViewportScrollHandlerSymbol],
+		);
+	}
+
+	document.addEventListener(
+		"visibilitychange",
+		this[visibilityChangeHandlerSymbol],
+	);
+	if (windowObject?.addEventListener instanceof Function) {
+		windowObject.addEventListener("resize", this[windowResizeHandlerSymbol]);
+		windowObject.addEventListener(
+			"orientationchange",
+			this[windowOrientationChangeHandlerSymbol],
+		);
+	}
 }
 
 /**
@@ -2009,6 +2077,83 @@ function disconnectResizeObserver() {
 	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
 		this[resizeObserverSymbol].disconnect();
 	}
+	cancelScheduledResizeObserverPopperUpdate.call(this);
+
+	const viewport = getGlobal().visualViewport;
+	if (
+		viewport &&
+		this[visualViewportResizeHandlerSymbol] instanceof Function
+	) {
+		viewport.removeEventListener(
+			"resize",
+			this[visualViewportResizeHandlerSymbol],
+		);
+	}
+	if (
+		viewport &&
+		this[visualViewportScrollHandlerSymbol] instanceof Function
+	) {
+		viewport.removeEventListener(
+			"scroll",
+			this[visualViewportScrollHandlerSymbol],
+		);
+	}
+	if (this[visibilityChangeHandlerSymbol] instanceof Function) {
+		document.removeEventListener(
+			"visibilitychange",
+			this[visibilityChangeHandlerSymbol],
+		);
+	}
+	const windowObject = getWindow();
+	if (
+		windowObject?.removeEventListener instanceof Function &&
+		this[windowResizeHandlerSymbol] instanceof Function
+	) {
+		windowObject.removeEventListener("resize", this[windowResizeHandlerSymbol]);
+	}
+	if (
+		windowObject?.removeEventListener instanceof Function &&
+		this[windowOrientationChangeHandlerSymbol] instanceof Function
+	) {
+		windowObject.removeEventListener(
+			"orientationchange",
+			this[windowOrientationChangeHandlerSymbol],
+		);
+	}
+}
+
+function scheduleResizeObserverPopperUpdate() {
+	const globalObject = getGlobal();
+	if (typeof this[resizeObserverFrameSymbol] === "number") {
+		return;
+	}
+
+	const schedule =
+		globalObject?.requestAnimationFrame instanceof Function
+			? globalObject.requestAnimationFrame.bind(globalObject)
+			: (callback) => {
+					return globalObject.setTimeout(callback, 16);
+			  };
+
+	this[resizeObserverFrameSymbol] = schedule(() => {
+		delete this[resizeObserverFrameSymbol];
+		updatePopper.call(this);
+	});
+}
+
+function cancelScheduledResizeObserverPopperUpdate() {
+	const globalObject = getGlobal();
+	const frameId = this[resizeObserverFrameSymbol];
+	if (typeof frameId !== "number") {
+		return;
+	}
+
+	if (globalObject?.cancelAnimationFrame instanceof Function) {
+		globalObject.cancelAnimationFrame(frameId);
+	} else {
+		globalObject.clearTimeout(frameId);
+	}
+	delete this[resizeObserverFrameSymbol];
 }
 
 /**
@@ -2091,22 +2236,120 @@ function parseSlotsToOptions() {
  * @return {*}
  */
 function buildSelectionLabel(value) {
-	// First, check the lookup cache.
-	if (this[lookupCacheSymbol].has(value)) {
-		return this[lookupCacheSymbol].get(value);
-	}
-
 	const strict = this.getOption("features.useStrictValueComparison") === true;
 	const map = this[optionsMapSymbol];
 	const key = strict ? value : String(value);
 
 	if (map && map.has(key)) {
+		if (clearUnresolvedSelectionValue.call(this, value)) {
+			this[lookupCacheSymbol].delete(value);
+		}
 		return map.get(key);
 	}
 
+	if (this[lookupCacheSymbol].has(value)) {
+		return this[lookupCacheSymbol].get(value);
+	}
+
 	return undefined;
 }
 
+/**
+ * @private
+ * @param {*} value
+ * @returns {*}
+ */
+function getSelectionStateKey(value) {
+	return this.getOption("features.useStrictValueComparison") === true
+		? value
+		: String(value);
+}
+
+/**
+ * @private
+ * @param {*} value
+ * @returns {boolean}
+ */
+function markSelectionAsUnresolved(value) {
+	const key = getSelectionStateKey.call(this, value);
+	if (this[unresolvedSelectionValuesSymbol].has(key)) {
+		return false;
+	}
+
+	this[unresolvedSelectionValuesSymbol].add(key);
+	return true;
+}
+
+/**
+ * @private
+ * @param {*} value
+ * @returns {boolean}
+ */
+function clearUnresolvedSelectionValue(value) {
+	const key = getSelectionStateKey.call(this, value);
+	return this[unresolvedSelectionValuesSymbol].delete(key);
+}
+
+/**
+ * @private
+ * @param {*} value
+ * @returns {boolean}
+ */
+function isSelectionValueUnresolved(value) {
+	const key = getSelectionStateKey.call(this, value);
+	return this[unresolvedSelectionValuesSymbol].has(key);
+}
+
+/**
+ * @private
+ * @param {*} value
+ * @returns {string}
+ */
+function getSelectionBadgeClass(value) {
+	const classes = new TokenList(this.getOption("classes.badge"));
+	if (!isSelectionValueUnresolved.call(this, value)) {
+		return classes.toString();
+	}
+
+	const unresolvedClasses = new TokenList(
+		this.getOption("classes.badgeUnresolved"),
+	);
+	for (const token of classes.entries()) {
+		if (token.startsWith("monster-badge-")) {
+			classes.remove(token);
+		}
+	}
+
+	classes.add(unresolvedClasses.entries());
+	return classes.toString();
+}
+
+/**
+ * @private
+ * @param {*} value
+ * @param {string} [preferredLabel]
+ * @returns {{class: string, label: string, unresolved: boolean, value: *}}
+ */
+function buildSelectionItem(value, preferredLabel) {
+	let label = getSelectionLabel.call(this, value);
+	const unresolved = isSelectionValueUnresolved.call(this, value);
+	if (
+		!unresolved &&
+		`${label}` === `${value}` &&
+		isString(preferredLabel) &&
+		preferredLabel.length > 0
+	) {
+		label = preferredLabel;
+	}
+
+	return {
+		label,
+		value,
+		class: getSelectionBadgeClass.call(this, value),
+		unresolved,
+	};
+}
+
 /**
  * @private
  * @param {string} value The value to look up.
@@ -2132,6 +2375,7 @@ async function lookupValueAndCache(value) {
 
 	let hasError = false;
 	let found = false;
+	let refreshSelection = false;
 	try {
 		this[lookupInProgressSymbol].set(value, true);
 
@@ -2163,28 +2407,47 @@ async function lookupValueAndCache(value) {
 			}
 
 			// The lookup might return more than the requested value, so we cache all of them.
-			if (!this[lookupCacheSymbol].has(itemValue)) {
+			if (this[lookupCacheSymbol].get(itemValue) !== itemLabel) {
 				this[lookupCacheSymbol].set(itemValue, itemLabel);
-				if (`${itemValue}` === `${value}`) {
-					found = true;
-				}
+				refreshSelection = true;
+			}
+
+			if (clearUnresolvedSelectionValue.call(this, itemValue)) {
+				refreshSelection = true;
+			}
+
+			if (`${itemValue}` === `${value}`) {
+				found = true;
 			}
 		}
 
 		if (!found && !this[lookupCacheSymbol].has(value)) {
-			const fallback = this.getOption("labels.cannot-be-loaded", value);
-			this[lookupCacheSymbol].set(value, `${fallback}`);
+			this[lookupCacheSymbol].set(value, `${value}`);
+			refreshSelection = true;
 		}
 
-		// If the specific value was found, trigger a re-render of the selection.
-		if (found) {
-			await setSelection.call(this, this.getOption("selection"));
+		if (!found && markSelectionAsUnresolved.call(this, value)) {
+			refreshSelection = true;
 		}
 	} catch (e) {
 		hasError = true;
 		addErrorAttribute(this, e);
+
+		if (!this[lookupCacheSymbol].has(value)) {
+			this[lookupCacheSymbol].set(value, `${value}`);
+			refreshSelection = true;
+		}
+
+		if (markSelectionAsUnresolved.call(this, value)) {
+			refreshSelection = true;
+		}
 	} finally {
 		this[lookupInProgressSymbol].delete(value);
+
+		if (refreshSelection) {
+			await setSelection.call(this, this.getOption("selection"));
+		}
+
 		if (hasError) {
 			setStatusOrRemoveBadges.call(this, "error");
 		} else {
@@ -2468,10 +2731,9 @@ function calcAndSetOptionsDimension() {
 	}
 
 	let visible = 0;
-	let optionHeight = 0;
+	const visibleOptionHeights = [];
 	const max = this.getOption("showMaxOptions", 10);
 
-	let scrollFlag = false;
 	for (const [, option] of Object.entries(options)) {
 		const computedStyle = getGlobal().getComputedStyle(option);
 		if (computedStyle.display === "none") continue;
@@ -2479,18 +2741,8 @@ function calcAndSetOptionsDimension() {
 		let h = option.getBoundingClientRect().height;
 		h += parseInt(computedStyle.getPropertyValue("margin-top"), 10);
 		h += parseInt(computedStyle.getPropertyValue("margin-bottom"), 10);
-		optionHeight += h;
-
+		visibleOptionHeights.push(h);
 		visible++;
-
-		if (visible > max) {
-			break;
-		}
-	}
-
-	if (visible > max) {
-		visible = max;
-		scrollFlag = true;
 	}
 
 	if (visible === 0) {
@@ -2535,61 +2787,310 @@ function calcAndSetOptionsDimension() {
 	let margin = parseInt(styles.getPropertyValue("margin-top"), 10);
 	margin += parseInt(styles.getPropertyValue("margin-bottom"), 10);
 
-	let containerHeight = optionHeight + padding + margin;
-	const maxViewportHeight = Math.floor(getVisibleHeightLimit(this) / 3);
-	if (containerHeight > maxViewportHeight) {
-		containerHeight = maxViewportHeight;
-	}
+	const geometry = getSelectPopperGeometry.call(this);
+	const listDimension = resolveSelectListDimension({
+		visibleOptionHeights,
+		maxVisibleOptions: max,
+		availableHeight: geometry.availableHeight,
+		padding,
+		margin,
+	});
+	const widthConstraints = resolveSelectPopperWidthConstraints({
+		controlWidth: this[controlElementSymbol].getBoundingClientRect().width,
+		availableWidth: geometry.availableWidth,
+	});
 
-	container.style.height = `${containerHeight}px`;
+	container.style.height =
+		listDimension.desiredHeight > 0 ? `${listDimension.desiredHeight}px` : "0px";
+	container.style.maxHeight =
+		listDimension.maxHeight > 0 ? `${listDimension.maxHeight}px` : "0px";
+	container.style.overflowY = listDimension.overflowY;
 
-	if (scrollFlag === true) {
-		container.style.overflowY = "scroll";
+	this[popperElementSymbol].dataset.monsterPreferredWidth = `${Math.ceil(
+		widthConstraints.preferredWidth,
+	)}`;
+	if (
+		Number.isFinite(widthConstraints.maxWidth) &&
+		widthConstraints.maxWidth > 0
+	) {
+		this[popperElementSymbol].dataset.monsterPreferredMaxWidth = `${Math.ceil(
+			widthConstraints.maxWidth,
+		)}`;
+		this[popperElementSymbol].style.maxWidth = `${Math.ceil(
+			widthConstraints.maxWidth,
+		)}px`;
 	} else {
-		container.style.overflowY = "auto";
+		delete this[popperElementSymbol].dataset.monsterPreferredMaxWidth;
+		this[popperElementSymbol].style.removeProperty("maxWidth");
 	}
+	this[popperElementSymbol].style.width = "";
+	this[popperElementSymbol].style.removeProperty("minWidth");
+	this[popperElementSymbol].style.maxHeight = `${Math.ceil(
+		Math.min(geometry.availableHeight, SELECT_MAX_POPPER_HEIGHT),
+	)}px`;
+	container.style.overflowX = "hidden";
 
-	const domRect = this[controlElementSymbol].getBoundingClientRect();
+	if (content instanceof HTMLElement) {
+		content.style.overflow = "hidden";
+		content.style.maxHeight =
+			listDimension.maxHeight > 0 ? `${listDimension.maxHeight}px` : "";
+	}
+}
 
-	this[popperElementSymbol].dataset.monsterPreferredWidth = `${Math.ceil(
-		domRect.width,
-	)}`;
-	this[popperElementSymbol].style.width = `${domRect.width}px`;
-	this[popperElementSymbol].style.minWidth = `${domRect.width}px`;
-	container.style.overflowX = "auto";
+function resolveSelectPopperPreferredWidth(controlWidth) {
+	return Math.max(Math.ceil(controlWidth), SELECT_MIN_POPPER_WIDTH);
+}
 
-	if (content instanceof HTMLElement) {
-		content.style.overflowX = "hidden";
-		content.style.overflowY = "hidden";
+function resolveSelectPopperWidthConstraints({
+	controlWidth = 0,
+	availableWidth = 0,
+}) {
+	const preferredWidth = resolveSelectPopperPreferredWidth(controlWidth);
+	const maxWidth = Math.max(0, availableWidth);
+
+	return {
+		preferredWidth,
+		maxWidth: maxWidth > 0 ? maxWidth : Infinity,
+	};
+}
+
+function resolveSelectListDimension({
+	visibleOptionHeights = [],
+	maxVisibleOptions = 10,
+	availableHeight,
+	padding = 0,
+	margin = 0,
+}) {
+	const visibleHeights = visibleOptionHeights.filter((height) => {
+		return Number.isFinite(height) && height > 0;
+	});
+	const naturalListHeight =
+		visibleHeights
+			.slice(0, Math.max(0, maxVisibleOptions))
+			.reduce((sum, height) => {
+				return sum + height;
+			}, 0) +
+		padding +
+		margin;
+	const fullListHeight =
+		visibleHeights.reduce((sum, height) => {
+			return sum + height;
+		}, 0) +
+		padding +
+		margin;
+	const maxHeight = resolveSelectListMaxHeight({
+		availableHeight,
+	});
+	const desiredHeight = Math.min(
+		maxHeight,
+		fullListHeight > 0 ? naturalListHeight : 0,
+	);
+
+	return {
+		desiredHeight,
+		fullHeight: fullListHeight,
+		maxHeight,
+		overflowY: fullListHeight > desiredHeight ? "auto" : "hidden",
+	};
+}
+
+function resolveSelectListMaxHeight(geometry) {
+	if (!geometry || !Number.isFinite(geometry.availableHeight)) {
+		return SELECT_MAX_POPPER_HEIGHT;
 	}
+
+	return Math.max(
+		0,
+		Math.min(geometry.availableHeight, SELECT_MAX_POPPER_HEIGHT),
+	);
 }
 
-/**
- * @private
- */
-function getVisibleHeightLimit(startEl) {
-	let el = startEl;
-	const gcs = getGlobal().getComputedStyle;
+function getViewportMetrics() {
+	const globalObject = getGlobal();
+	const documentElement = globalObject.document?.documentElement;
+	const viewport = globalObject.visualViewport;
+	const metrics = resolveSelectViewportMetrics({
+		layoutWidth: Math.max(
+			documentElement?.clientWidth || 0,
+			globalObject.innerWidth || 0,
+		),
+		layoutHeight: Math.max(
+			documentElement?.clientHeight || 0,
+			globalObject.innerHeight || 0,
+		),
+		visualWidth: viewport?.width || 0,
+		visualHeight: viewport?.height || 0,
+		offsetLeft: viewport?.offsetLeft || 0,
+		offsetTop: viewport?.offsetTop || 0,
+		padding: SELECT_VIEWPORT_PADDING,
+	});
 
-	while (el) {
-		const style = gcs(el);
-		const overflowY = style.overflowY;
+	return {
+		width: metrics.width,
+		height: metrics.height,
+		left: metrics.left,
+		top: metrics.top,
+		padding: metrics.padding,
+	};
+}
 
-		const isScrollable = ["auto", "scroll", "hidden"].includes(overflowY);
+function resolveSelectViewportMetrics({
+	layoutWidth = 0,
+	layoutHeight = 0,
+	visualWidth = 0,
+	visualHeight = 0,
+	offsetLeft = 0,
+	offsetTop = 0,
+	padding = SELECT_VIEWPORT_PADDING,
+}) {
+	return {
+		width: Math.max(layoutWidth, visualWidth),
+		height: Math.max(layoutHeight, visualHeight),
+		left: offsetLeft,
+		top: offsetTop,
+		padding,
+	};
+}
 
-		if (isScrollable && el.clientHeight > 0) {
-			return el.clientHeight;
-		}
+function resolveSelectVisibleRect({
+	viewportMetrics,
+	boundaryRect = null,
+}) {
+	const viewportLeft = (viewportMetrics?.left || 0) + (viewportMetrics?.padding || 0);
+	const viewportTop = (viewportMetrics?.top || 0) + (viewportMetrics?.padding || 0);
+	const viewportRight =
+		(viewportMetrics?.left || 0) +
+		(viewportMetrics?.width || 0) -
+		(viewportMetrics?.padding || 0);
+	const viewportBottom =
+		(viewportMetrics?.top || 0) +
+		(viewportMetrics?.height || 0) -
+		(viewportMetrics?.padding || 0);
+
+	const left = boundaryRect
+		? Math.max(viewportLeft, boundaryRect.left)
+		: viewportLeft;
+	const top = boundaryRect
+		? Math.max(viewportTop, boundaryRect.top)
+		: viewportTop;
+	const right = boundaryRect
+		? Math.min(viewportRight, boundaryRect.right)
+		: viewportRight;
+	const bottom = boundaryRect
+		? Math.min(viewportBottom, boundaryRect.bottom)
+		: viewportBottom;
 
-		const root = el.getRootNode?.();
-		if (root instanceof ShadowRoot && root.host) {
-			el = root.host;
-		} else {
-			el = el.parentElement;
-		}
+	return {
+		left,
+		top,
+		right,
+		bottom,
+		width: Math.max(0, right - left),
+		height: Math.max(0, bottom - top),
+	};
+}
+
+function getSelectPopperGeometry() {
+	const viewport = getViewportMetrics();
+	const boundaryElement = resolveClippingBoundaryElement(
+		this[controlElementSymbol],
+		this[popperElementSymbol],
+	);
+	const controlRect = this[controlElementSymbol].getBoundingClientRect();
+	const boundaryRect =
+		boundaryElement instanceof HTMLElement
+			? boundaryElement.getBoundingClientRect()
+			: null;
+	const visibleRect = resolveSelectVisibleRect({
+		viewportMetrics: viewport,
+		boundaryRect,
+	});
+	const spaceAbove = Math.max(
+		0,
+		controlRect.top - visibleRect.top,
+	);
+	const spaceBelow = Math.max(
+		0,
+		visibleRect.bottom - controlRect.bottom,
+	);
+	const availableHeight = Math.max(spaceAbove, spaceBelow, 0);
+
+	return {
+		spaceAbove,
+		spaceBelow,
+		availableHeight,
+		availableWidth: visibleRect.width,
+		boundaryElement,
+	};
+}
+
+function getSelectPopperPositionOptions() {
+	const popperOptions = Object.assign({}, this.getOption("popper", {}));
+	const middleware = popperOptions.middleware;
+	const usesLegacyDefaultMiddleware =
+		isArray(middleware) &&
+		middleware.length === 2 &&
+		middleware[0] === "flip" &&
+		middleware[1] === "offset:1";
+
+	if (
+		!isArray(middleware) ||
+		middleware.length === 0 ||
+		usesLegacyDefaultMiddleware
+	) {
+		popperOptions.middleware = getDefaultSelectPopperPositionProfile().middleware;
+	}
+
+	if (
+		!isString(popperOptions.placement) ||
+		popperOptions.placement === "bottom"
+	) {
+		popperOptions.placement =
+			getDefaultSelectPopperPositionProfile().placement;
+	}
+
+	if (
+		resolveParentPopperContentBoundary(
+			this[controlElementSymbol],
+			this[popperElementSymbol],
+		)
+	) {
+		// Nested selects inside another popper must position against the viewport
+		// so the parent content wrapper does not become their clipping boundary.
+		popperOptions.strategy = "fixed";
+	}
+
+	return popperOptions;
+}
+
+function getDefaultSelectPopperPositionProfile() {
+	return {
+		placement: "bottom-start",
+		middleware: ["flip", "offset:4", "shift:crossAxis", "size"],
+	};
+}
+
+function resetSelectPopperDimensionStyles() {
+	if (!(this[popperElementSymbol] instanceof HTMLElement)) {
+		return;
+	}
+
+	delete this[popperElementSymbol].dataset.monsterPreferredWidth;
+	delete this[popperElementSymbol].dataset.monsterPreferredMaxWidth;
+	this[popperElementSymbol].style.removeProperty("width");
+	this[popperElementSymbol].style.removeProperty("minWidth");
+	this[popperElementSymbol].style.removeProperty("maxWidth");
+	this[popperElementSymbol].style.removeProperty("maxHeight");
+
+	const content = this[popperElementSymbol].querySelector('[part="content"]');
+	if (content instanceof HTMLElement) {
+		content.style.removeProperty("maxHeight");
 	}
 
-	return window.innerHeight;
+	if (this[optionsElementSymbol] instanceof HTMLElement) {
+		this[optionsElementSymbol].style.removeProperty("height");
+		this[optionsElementSymbol].style.removeProperty("maxHeight");
+	}
 }
 
 /**
@@ -2805,12 +3306,6 @@ function filterFromRemote() {
 		return Promise.reject(new Error("Missing Filter Element."));
 	}
 
-	const url = this.getOption("url");
-	if (!url) {
-		addErrorAttribute(this, "Missing URL for Remote Filter.");
-		return Promise.reject(new Error("Missing URL for Remote Filter."));
-	}
-
 	let filterValue;
 	let showFlag = false;
 
@@ -2834,6 +3329,16 @@ function filterFromRemote() {
 		page: this[currentPageSymbol] || 1,
 	};
 
+	if (shouldUseDefaultOptionsUrl.call(this, filterValue)) {
+		return loadDefaultOptionsFromUrl.call(this, showFlag);
+	}
+
+	const url = this.getOption("url");
+	if (!url) {
+		addErrorAttribute(this, "Missing URL for Remote Filter.");
+		return Promise.reject(new Error("Missing URL for Remote Filter."));
+	}
+
 	return filterFromRemoteByValue.call(this, url, params, showFlag);
 }
 
@@ -2843,7 +3348,8 @@ function filterFromRemote() {
  * @param {object} params
  * @returns {string}
  */
-function formatURL(url, params = {}) {
+function formatURL(url, params = {}, formatOptions = {}) {
+	const preserveEmptyFilter = formatOptions?.preserveEmptyFilter === true;
 	const paramsDefaults = this.getOption("filter.paramsDefaults");
 	const externalParams = this.getOption("filter.params");
 	if (isObject(paramsDefaults) || isObject(externalParams)) {
@@ -2871,7 +3377,7 @@ function formatURL(url, params = {}) {
 	if (
 		params.filter === undefined ||
 		params.filter === null ||
-		params.filter === ""
+		(params.filter === "" && preserveEmptyFilter !== true)
 	) {
 		const defaultValue = this.getOption("filter.defaultValue");
 		if (defaultValue === undefined || defaultValue === null) {
@@ -2911,9 +3417,14 @@ function formatURL(url, params = {}) {
  * @param {boolean} [openPopper] Flag indicating whether to open the popper.
  * @return {string} The formatted URL with the applied filters and markers.
  */
-function filterFromRemoteByValue(optionUrl, params, openPopper) {
+function filterFromRemoteByValue(
+	optionUrl,
+	params,
+	openPopper,
+	formatOptions = {},
+) {
 	return new Processing(() => {
-		let url = formatURL.call(this, optionUrl, params);
+		let url = formatURL.call(this, optionUrl, params, formatOptions);
 
 		if (url.indexOf(disabledRequestMarker.toString()) !== -1) {
 			this.setOption("total", null);
@@ -3027,6 +3538,51 @@ function getCurrentFilterValue() {
 	return "";
 }
 
+function shouldUseDefaultOptionsUrl(filterValue) {
+	if (!isString(this.getOption("filter.defaultOptionsUrl"))) {
+		return false;
+	}
+
+	if (filterValue === undefined || filterValue === null) {
+		return true;
+	}
+
+	if (isString(filterValue)) {
+		return filterValue.trim() === "";
+	}
+
+	return false;
+}
+
+function loadDefaultOptionsFromUrl(openPopper = false) {
+	const url = this.getOption("filter.defaultOptionsUrl");
+	if (!isString(url)) {
+		return Promise.resolve(false);
+	}
+
+	this[cleanupOptionsListSymbol] = true;
+
+	return filterFromRemoteByValue
+		.call(
+			this,
+			url,
+			{
+				filter: "",
+				page: this[currentPageSymbol] || 1,
+			},
+			openPopper,
+			{
+				preserveEmptyFilter: true,
+			},
+		)
+		.then(() => {
+			if (isPositionedPopperOpen(this[popperElementSymbol])) {
+				setStatusOrRemoveBadges.call(this, "open");
+			}
+			return true;
+		});
+}
+
 /**
  * @private
  */
@@ -3146,10 +3702,7 @@ function gatherState() {
 		);
 
 		for (const e of elements) {
-			selection.push({
-				label: getSelectionLabel.call(this, e.value),
-				value: e.value,
-			});
+			selection.push(buildSelectionItem.call(this, e.value));
 		}
 
 		filteredSelection = selection;
@@ -3166,10 +3719,7 @@ function gatherState() {
 			(sel) => !currentInputValues.has(sel.value),
 		);
 		for (const input of checkedElements) {
-			filteredSelection.push({
-				label: getSelectionLabel.call(this, input.value),
-				value: input.value,
-			});
+			filteredSelection.push(buildSelectionItem.call(this, input.value));
 		}
 	}
 
@@ -3448,16 +3998,10 @@ function convertValueToSelection(value) {
 	}
 
 	if (isString(value) || isInteger(value)) {
-		selection.push({
-			label: getSelectionLabel.call(this, value),
-			value: value,
-		});
+		selection.push(buildSelectionItem.call(this, value));
 	} else if (isArray(value)) {
 		for (const v of value) {
-			selection.push({
-				label: getSelectionLabel.call(this, v),
-				value: v,
-			});
+			selection.push(buildSelectionItem.call(this, v));
 		}
 
 		value = value.join(",");
@@ -3582,8 +4126,6 @@ function areSelectionValuesEqual(current, next) {
  * @returns {Promise<unknown | void>}
  */
 function setSelection(selection) {
-	const self = this;
-
 	if (isString(selection) || isInteger(selection)) {
 		const result = convertValueToSelection.call(this, selection);
 		selection = result?.selection;
@@ -3600,15 +4142,9 @@ function setSelection(selection) {
 			continue;
 		}
 
-		let l = getSelectionLabel.call(this, selection[i].value);
-		if (l === selection[i].value) {
-			l = selection[i].label;
-		}
-
-		resultSelection.push({
-			label: l,
-			value: selection[i].value,
-		});
+		resultSelection.push(
+			buildSelectionItem.call(this, selection[i].value, selection[i].label),
+		);
 	}
 
 	selection = resultSelection;
@@ -3643,17 +4179,6 @@ function setSelection(selection) {
 		fireEvent(this, "change"); // https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/291
 	}
 
-	if (this[runLookupOnceSymbol] !== true && selection.length > 0) {
-		this[runLookupOnceSymbol] = true;
-
-		const lazyLoadFlag =
-			this.getOption("features.lazyLoad") && this[lazyLoadDoneSymbol] !== true;
-		const remoteFilterFlag = getFilterMode.call(this) === FILTER_MODE_REMOTE;
-		if (lazyLoadFlag || remoteFilterFlag) {
-			lookupSelection.call(self);
-		}
-	}
-
 	return new Processing(() => {
 		const CLASSNAME = "selected";
 
@@ -3751,6 +4276,7 @@ function fetchData(url) {
  * @private
  */
 function hide() {
+	resetSelectPopperDimensionStyles.call(this);
 	closePositionedPopper(this[popperElementSymbol]);
 	setStatusOrRemoveBadges.call(this, "closed");
 	removeAttributeToken(this[controlElementSymbol], "class", "open");
@@ -3804,12 +4330,6 @@ function show() {
 		return;
 	}
 
-	const hasDefaultOptionsUrl = isString(
-		this.getOption("filter.defaultOptionsUrl"),
-	);
-
-	initDefaultOptionsFromUrl.call(this);
-
 	const hasPopperFilterFlag =
 		this.getOption("filter.position") === FILTER_POSITION_POPPER &&
 		getFilterMode.call(this) !== FILTER_MODE_DISABLED;
@@ -3819,11 +4339,12 @@ function show() {
 		return;
 	}
 
+	resetSelectPopperDimensionStyles.call(this);
 	this[popperElementSymbol].style.visibility = "hidden";
 	openPositionedPopper(
 		this[controlElementSymbol],
 		this[popperElementSymbol],
-		this.getOption("popper", {}),
+		getSelectPopperPositionOptions.call(this),
 	);
 	setStatusOrRemoveBadges.call(this, "open");
 
@@ -3831,17 +4352,23 @@ function show() {
 	registerWithHost.call(this);
 
 	new Processing(() => {
-		if (!self?.[remoteFilterFirstOpendSymbol]) {
-			self[remoteFilterFirstOpendSymbol] = true;
+		const shouldLoadRemoteOptions =
+			getFilterMode.call(self) === FILTER_MODE_REMOTE &&
+			getOptionElements.call(self).length === 0;
 
-			if (!hasDefaultOptionsUrl) {
-				setTimeout(() => {
-					self[cleanupOptionsListSymbol] = true;
-					filterFromRemote.call(self).catch((e) => {
-						addErrorAttribute(self, e);
-					});
-				}, 0);
-			}
+		if (shouldUseDefaultOptionsUrl.call(self, getCurrentFilterValue.call(self))) {
+			setTimeout(() => {
+				loadDefaultOptionsFromUrl.call(self).catch((e) => {
+					addErrorAttribute(self, e);
+				});
+			}, 0);
+		} else if (shouldLoadRemoteOptions) {
+			setTimeout(() => {
+				self[cleanupOptionsListSymbol] = true;
+				filterFromRemote.call(self).catch((e) => {
+					addErrorAttribute(self, e);
+				});
+			}, 0);
 		}
 		calcAndSetOptionsDimension.call(this);
 		focusFilter.call(this);
@@ -3905,31 +4432,6 @@ function unregisterFromHost() {
 	this[hostElementSymbol].unregisterDismissable?.(this);
 }
 
-function initDefaultOptionsFromUrl() {
-	const url = this.getOption("filter.defaultOptionsUrl");
-	if (!url) {
-		return;
-	}
-
-	this.setOption("filter.defaultOptionsUrl", null);
-
-	fetchData
-		.call(this, url)
-		.then((data) => {
-			this[cleanupOptionsListSymbol] = false;
-			importOptionsIntern.call(this, data);
-			setStatusOrRemoveBadges.call(this, "open");
-			initTotal.call(this, data);
-		})
-		.catch((e) => {
-			addErrorAttribute(this, e);
-			setStatusOrRemoveBadges.call(this, "error");
-		});
-}
-
-/**
- * @private
- */
 /**
  * @private
  */
@@ -4493,7 +4995,7 @@ function updatePopper() {
 			this,
 			this[controlElementSymbol],
 			this[popperElementSymbol],
-			this.getOption("popper", {}),
+			getSelectPopperPositionOptions.call(this),
 		);
 		requestAnimationFrame(() => {
 			refreshSelectPaginationLayout.call(this);
@@ -4540,7 +5042,8 @@ function getTemplate() {
                  part="badge"
                  data-monster-attributes="
                  data-monster-value path:selection | index:value,
-                 class path:classes | index:badge,
+                 data-monster-unresolved path:selection | index:unresolved,
+                 class path:selection | index:class,
         part path:type | suffix:-option | prefix: form-" tabindex="-1">
                 <div data-monster-replace="path:selection | index:label" part="badge-label"
                      data-monster-role="badge-label"></div>