@schukai/monster 4.136.5 → 4.136.7

package/CHANGELOG.md

@@ -17,11 +17,13 @@
 - **popper:** guard show/hide/update flows against disconnected hosts and missing internal elements
 - **message-state-button:** distinguish overlay, prose, and wide message layouts for smart popper sizing and overflow ([#401](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/401))
 - **popper:** support kebab-case camelCase option attributes such as `data-monster-option-popper-content-overflow` ([#401](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/401))
+- **popper/select:** let nested `monster-select` poppers escape parent popper content wrappers without shrinking normal parent content sizing ([#416](https://gitlab.schukai.com/oss/libraries/javascript/monster/-/work_items/416))
 
 ### Changes
 
 - document lifecycle ownership rules for Updater-driven and stateful custom element implementations
 - document smart message popper layout behavior for forms and feedback flows ([#401](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/401))
+- document and add an issue repro for nested `monster-select` overflow behavior in `monster-popper-button` ([#416](https://gitlab.schukai.com/oss/libraries/javascript/monster/-/work_items/416))
 
 
 

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

package/source/components/form/select.mjs

@@ -71,6 +71,7 @@ import {
 	openPositionedPopper,
 	positionPopper,
 	resolveClippingBoundaryElement,
+	resolveParentPopperContentBoundary,
 } from "./util/floating-ui.mjs";
 import { Pathfinder } from "../../data/pathfinder.mjs";
 import { TokenList } from "../../types/tokenlist.mjs";
@@ -261,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");
@@ -300,16 +297,6 @@ const debounceOptionsMutationObserverSymbol = Symbol(
  */
 const currentPageSymbol = Symbol("currentPage");
 
-/**
- * @private
- * @type {symbol}
- */
-const remoteFilterFirstOpendSymbol = Symbol("remoteFilterFirstOpend");
-
-/**
- * @private
- * @type {symbol}
- */
 const lookupCacheSymbol = Symbol("lookupCache");
 
 /**
@@ -317,6 +304,7 @@ const lookupCacheSymbol = Symbol("lookupCache");
  * @type {symbol}
  */
 const lookupInProgressSymbol = Symbol("lookupInProgress");
+const unresolvedSelectionValuesSymbol = Symbol("unresolvedSelectionValues");
 const fetchRequestVersionSymbol = Symbol("fetchRequestVersion");
 
 /**
@@ -398,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);
@@ -480,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").
@@ -490,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.
@@ -513,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., `}`).
@@ -544,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.
@@ -625,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",
@@ -681,6 +672,7 @@ class Select extends CustomControl {
 			// Clear the lookup cache
 			this[lookupCacheSymbol].clear();
 			this[lookupInProgressSymbol].clear();
+			this[unresolvedSelectionValuesSymbol].clear();
 
 			setSelection
 				.call(this, null)
@@ -702,7 +694,6 @@ class Select extends CustomControl {
 					resetErrorAttribute(this);
 
 					this[lazyLoadDoneSymbol] = false;
-					this[runLookupOnceSymbol] = false;
 
 					checkOptionState.call(this);
 					calcAndSetOptionsDimension.call(this);
@@ -753,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()
@@ -1776,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() {
@@ -1817,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) {
@@ -2237,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.
@@ -2278,6 +2375,7 @@ async function lookupValueAndCache(value) {
 
 	let hasError = false;
 	let found = false;
+	let refreshSelection = false;
 	try {
 		this[lookupInProgressSymbol].set(value, true);
 
@@ -2309,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 {
@@ -2932,6 +3049,17 @@ function getSelectPopperPositionOptions() {
 			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;
 }
 
@@ -3178,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;
 
@@ -3207,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);
 }
 
@@ -3216,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)) {
@@ -3244,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) {
@@ -3284,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);
@@ -3400,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
  */
@@ -3519,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;
@@ -3539,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));
 		}
 	}
 
@@ -3821,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(",");
@@ -3955,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;
@@ -3973,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;
@@ -4016,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";
 
@@ -4178,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;
@@ -4206,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);
@@ -4280,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
  */
@@ -4915,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>

package/source/components/form/style/select.pcss

@@ -262,9 +262,9 @@ div[data-monster-role=selection] {
     max-width: 100%;
     min-width: 0;
     flex-grow: 1;
+    scrollbar-gutter: stable;
     scrollbar-color: var(--monster-color-primary-1) var(--monster-bg-color-primary-1);
     scrollbar-width: thin;
-    transition: height 0.3s ease;
     overflow-x: hidden;
 }
 

package/source/components/form/stylesheet/select.mjs

@@ -24,7 +24,7 @@ const SelectStyleSheet = new CSSStyleSheet();
 try {
   SelectStyleSheet.insertRule(`
 @layer select { 
-.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=control]{width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}.monster-badge-primary{padding:.25em .4em}.monster-badge-primary,.monster-badge-primary-pill{background-color:var(--monster-bg-color-primary-4);border-radius:.25rem;color:var(--monster-color-primary-4);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-primary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-secondary{padding:.25em .4em}.monster-badge-secondary,.monster-badge-secondary-pill{background-color:var(--monster-bg-color-secondary-3);border-radius:.25rem;color:var(--monster-color-secondary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-secondary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-tertiary{padding:.25em .4em}.monster-badge-tertiary,.monster-badge-tertiary-pill{background-color:var(--monster-bg-color-tertiary-3);border-radius:.25rem;color:var(--monster-color-tertiary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-tertiary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-destructive{padding:.25em .4em}.monster-badge-destructive,.monster-badge-destructive-pill{background-color:var(--monster-bg-color-destructive-1);border-radius:.25rem;color:var(--monster-color-destructive-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-destructive-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-success{padding:.25em .4em}.monster-badge-success,.monster-badge-success-pill{background-color:var(--monster-bg-color-success-1);border-radius:.25rem;color:var(--monster-color-success-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-success-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-warning{padding:.25em .4em}.monster-badge-warning,.monster-badge-warning-pill{background-color:var(--monster-bg-color-warning-1);border-radius:.25rem;color:var(--monster-color-warning-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-warning-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-error{padding:.25em .4em}.monster-badge-error,.monster-badge-error-pill{background-color:var(--monster-bg-color-error-1);border-radius:.25rem;color:var(--monster-color-error-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-error-pill{border-radius:10rem;padding:.25em .6em}.monster-margin-0{margin:var(--monster-space-0)}.monster-margin-top-0{margin-top:var(--monster-space-0)}.monster-margin-end-0{margin-right:var(--monster-space-0)}.monster-margin-bottom-0{margin-bottom:var(--monster-space-0)}.monster-margin-start-0{margin-left:var(--monster-space-0)}.monster-padding-0{padding:var(--monster-space-0)}.monster-padding-top-0{padding-top:var(--monster-space-0)}.monster-padding-end-0{padding-right:var(--monster-space-0)}.monster-padding-bottom-0{padding-bottom:var(--monster-space-0)}.monster-padding-start-0{padding-left:var(--monster-space-0)}.monster-margin-1{margin:var(--monster-space-1)}.monster-margin-top-1{margin-top:var(--monster-space-1)}.monster-margin-end-1{margin-right:var(--monster-space-1)}.monster-margin-bottom-1{margin-bottom:var(--monster-space-1)}.monster-margin-start-1{margin-left:var(--monster-space-1)}.monster-padding-1{padding:var(--monster-space-1)}.monster-padding-top-1{padding-top:var(--monster-space-1)}.monster-padding-end-1{padding-right:var(--monster-space-1)}.monster-padding-bottom-1{padding-bottom:var(--monster-space-1)}.monster-padding-start-1{padding-left:var(--monster-space-1)}.monster-margin-2{margin:var(--monster-space-2)}.monster-margin-top-2{margin-top:var(--monster-space-2)}.monster-margin-end-2{margin-right:var(--monster-space-2)}.monster-margin-bottom-2{margin-bottom:var(--monster-space-2)}.monster-margin-start-2{margin-left:var(--monster-space-2)}.monster-padding-2{padding:var(--monster-space-2)}.monster-padding-top-2{padding-top:var(--monster-space-2)}.monster-padding-end-2{padding-right:var(--monster-space-2)}.monster-padding-bottom-2{padding-bottom:var(--monster-space-2)}.monster-padding-start-2{padding-left:var(--monster-space-2)}.monster-margin-3{margin:var(--monster-space-3)}.monster-margin-top-3{margin-top:var(--monster-space-3)}.monster-margin-end-3{margin-right:var(--monster-space-3)}.monster-margin-bottom-3{margin-bottom:var(--monster-space-3)}.monster-margin-start-3{margin-left:var(--monster-space-3)}.monster-padding-3{padding:var(--monster-space-3)}.monster-padding-top-3{padding-top:var(--monster-space-3)}.monster-padding-end-3{padding-right:var(--monster-space-3)}.monster-padding-bottom-3{padding-bottom:var(--monster-space-3)}.monster-padding-start-3{padding-left:var(--monster-space-3)}.monster-margin-4{margin:var(--monster-space-4)}.monster-margin-top-4{margin-top:var(--monster-space-4)}.monster-margin-end-4{margin-right:var(--monster-space-4)}.monster-margin-bottom-4{margin-bottom:var(--monster-space-4)}.monster-margin-start-4{margin-left:var(--monster-space-4)}.monster-padding-4{padding:var(--monster-space-4)}.monster-padding-top-4{padding-top:var(--monster-space-4)}.monster-padding-end-4{padding-right:var(--monster-space-4)}.monster-padding-bottom-4{padding-bottom:var(--monster-space-4)}.monster-padding-start-4{padding-left:var(--monster-space-4)}.monster-margin-5{margin:var(--monster-space-5)}.monster-margin-top-5{margin-top:var(--monster-space-5)}.monster-margin-end-5{margin-right:var(--monster-space-5)}.monster-margin-bottom-5{margin-bottom:var(--monster-space-5)}.monster-margin-start-5{margin-left:var(--monster-space-5)}.monster-padding-5{padding:var(--monster-space-5)}.monster-padding-top-5{padding-top:var(--monster-space-5)}.monster-padding-end-5{padding-right:var(--monster-space-5)}.monster-padding-bottom-5{padding-bottom:var(--monster-space-5)}.monster-padding-start-5{padding-left:var(--monster-space-5)}.monster-margin-6{margin:var(--monster-space-6)}.monster-margin-top-6{margin-top:var(--monster-space-6)}.monster-margin-end-6{margin-right:var(--monster-space-6)}.monster-margin-bottom-6{margin-bottom:var(--monster-space-6)}.monster-margin-start-6{margin-left:var(--monster-space-6)}.monster-padding-6{padding:var(--monster-space-6)}.monster-padding-top-6{padding-top:var(--monster-space-6)}.monster-padding-end-6{padding-right:var(--monster-space-6)}.monster-padding-bottom-6{padding-bottom:var(--monster-space-6)}.monster-padding-start-6{padding-left:var(--monster-space-6)}.monster-margin-7{margin:var(--monster-space-7)}.monster-margin-top-7{margin-top:var(--monster-space-7)}.monster-margin-end-7{margin-right:var(--monster-space-7)}.monster-margin-bottom-7{margin-bottom:var(--monster-space-7)}.monster-margin-start-7{margin-left:var(--monster-space-7)}.monster-padding-7{padding:var(--monster-space-7)}.monster-padding-top-7{padding-top:var(--monster-space-7)}.monster-padding-end-7{padding-right:var(--monster-space-7)}.monster-padding-bottom-7{padding-bottom:var(--monster-space-7)}.monster-padding-start-7{padding-left:var(--monster-space-7)}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:none;overflow:visible}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=visible]{clip-path:none;max-height:none;max-width:none;overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:4 0 90%;min-height:1.4em;overflow:auto;scrollbar-color:var(--monster-color-primary-1) var(--monster-bg-color-primary-1);scrollbar-width:thin;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;width:100%}.d-none{display:none!important}div[data-monster-role=no-options] span,div[data-monster-role=remote-info] span{text-wrap:balance}div[data-monster-role=control]{display:flex;height:100%;position:relative}[data-monster-role=container].open{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\")}[data-monster-role=container].clear,[data-monster-role=container].open{background-color:var(--monster-bg-color-primary-2);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:.8em;mask-size:.8em}[data-monster-role=container].clear{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}[data-monster-role=control]{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);-o-border-image:initial;border-image:initial;border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);display:flex;font-family:inherit;font-size:100%;margin:0;outline:none;padding:.4rem .6rem;width:-webkit-fill-available;width:-moz-available;width:fill-available}@media (prefers-color-scheme:light){[data-monster-role=control]{background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-1)}[data-monster-role=control]:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}}[data-monster-role=control]:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}:host([disabled]) [data-monster-role=control]{cursor:not-allowed}:host([disabled]) [data-monster-role=status-or-remove-badges],[data-monster-role=control][disabled] [data-monster-role=status-or-remove-badges]{display:none}div[data-monster-role=selection]{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;justify-content:flex-start;margin:5px}[data-monster-role=option-control]{margin-right:8px}[data-monster-role=badge]{display:inline-flex}[data-monster-role=badge-label]{align-content:center;align-items:center;display:flex;flex-direction:row;gap:7px;justify-content:space-between}[data-monster-role=filter],[data-monster-role=popper-filter]{display:flex;flex-grow:200;order:99999999;visibility:hidden}[data-monster-role=filter].active{background-color:var(--monster-bg-color-primary-2);border:0;border-color:var(--monster-bg-color-primary-3);border-bottom:1px solid var(--monster-bg-color-primary-3);color:var(--monster-color-primary-2);min-width:40%;outline:none;visibility:visible}.active[data-monster-role=filter][name=popper-filter]{height:1.5em;margin:2.5em;padding:2px;width:calc(100% - var(--monster-border-width)*2)}.option-filter-control{align-items:center;background-color:var(--monster-bg-color-primary-2);display:flex;height:2.5em;margin:-1.1em -1.1em .3em}[data-monster-role=remove-badge]{background-color:var(--monster-bg-color-primary-2);height:16px;margin-left:5px;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");order:2}[data-monster-role=remove-badge],[data-monster-role=status-or-remove-badges]{-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:.8em;mask-size:.8em;min-height:16px;width:16px}[data-monster-role=status-or-remove-badges]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}.open[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\")}.empty[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E\")}.clear[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}.error[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-error-1);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\")}@media (prefers-color-scheme:dark){.error[data-monster-role=status-or-remove-badges]{background-color:var(--monster-color-error-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\")}}.loading[data-monster-role=status-or-remove-badges]{animation-duration:1s;animation-iteration-count:infinite;animation-name:activity;animation-timing-function:cubic-bezier(0,0,.2,1);background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='activity' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='activity' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E\")}@keyframes activity{0%{transform:scale(1)}50%{transform:scale(.1)}to{transform:scale(1)}}[data-monster-role=options]{flex-direction:column;flex-grow:1;overflow-x:hidden;scrollbar-color:var(--monster-color-primary-1) var(--monster-bg-color-primary-1);scrollbar-width:thin;transition:height .3s ease}[data-monster-role=option],[data-monster-role=options]{box-sizing:border-box;display:flex;max-width:100%;min-width:0;width:100%}[data-monster-role=option]{align-items:center;padding:6px 5px}[data-monster-role=option] label{justify-content:flex-start}[data-monster-role=option] label,[data-monster-role=option] label>div{align-items:center;display:flex;flex-direction:row;max-width:100%;min-width:0;width:100%}[data-monster-role=option] label>div{justify-content:space-between;outline:none}[part=option-label]{max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word}.selected{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=option][data-monster-filtered=true],[data-monster-role=option][data-monster-visibility=hidden]{display:none}[data-monster-role=option][data-monster-focused=true]{outline:1px dashed var(--monster-color-selection-2);outline-offset:-2px}@media (prefers-color-scheme:dark){[data-monster-role=option][data-monster-focused=true]{outline:1px dashed var(--monster-color-selection-4)}}[data-monster-role=filter]::-moz-placeholder{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=filter]::placeholder{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=option]>input:focus,[data-monster-role=option]>label:focus{outline:none}[data-monster-role=selection-messages]:empty:before,[data-monster-role=summary-messages]:empty:before{content:\"\u00A0\"}.in-button-bar{border-color:var(--monster-bg-color-primary-4)!important;border-style:var(--monster-border-style)!important;border-width:var(--monster-border-width)!important}[data-monster-role=pagination]::part(nav){justify-content:flex-start}[data-monster-role=pagination]::part(list){margin-bottom:0;margin-top:0} 
+.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=control]{width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}.monster-badge-primary{padding:.25em .4em}.monster-badge-primary,.monster-badge-primary-pill{background-color:var(--monster-bg-color-primary-4);border-radius:.25rem;color:var(--monster-color-primary-4);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-primary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-secondary{padding:.25em .4em}.monster-badge-secondary,.monster-badge-secondary-pill{background-color:var(--monster-bg-color-secondary-3);border-radius:.25rem;color:var(--monster-color-secondary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-secondary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-tertiary{padding:.25em .4em}.monster-badge-tertiary,.monster-badge-tertiary-pill{background-color:var(--monster-bg-color-tertiary-3);border-radius:.25rem;color:var(--monster-color-tertiary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-tertiary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-destructive{padding:.25em .4em}.monster-badge-destructive,.monster-badge-destructive-pill{background-color:var(--monster-bg-color-destructive-1);border-radius:.25rem;color:var(--monster-color-destructive-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-destructive-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-success{padding:.25em .4em}.monster-badge-success,.monster-badge-success-pill{background-color:var(--monster-bg-color-success-1);border-radius:.25rem;color:var(--monster-color-success-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-success-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-warning{padding:.25em .4em}.monster-badge-warning,.monster-badge-warning-pill{background-color:var(--monster-bg-color-warning-1);border-radius:.25rem;color:var(--monster-color-warning-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-warning-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-error{padding:.25em .4em}.monster-badge-error,.monster-badge-error-pill{background-color:var(--monster-bg-color-error-1);border-radius:.25rem;color:var(--monster-color-error-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-error-pill{border-radius:10rem;padding:.25em .6em}.monster-margin-0{margin:var(--monster-space-0)}.monster-margin-top-0{margin-top:var(--monster-space-0)}.monster-margin-end-0{margin-right:var(--monster-space-0)}.monster-margin-bottom-0{margin-bottom:var(--monster-space-0)}.monster-margin-start-0{margin-left:var(--monster-space-0)}.monster-padding-0{padding:var(--monster-space-0)}.monster-padding-top-0{padding-top:var(--monster-space-0)}.monster-padding-end-0{padding-right:var(--monster-space-0)}.monster-padding-bottom-0{padding-bottom:var(--monster-space-0)}.monster-padding-start-0{padding-left:var(--monster-space-0)}.monster-margin-1{margin:var(--monster-space-1)}.monster-margin-top-1{margin-top:var(--monster-space-1)}.monster-margin-end-1{margin-right:var(--monster-space-1)}.monster-margin-bottom-1{margin-bottom:var(--monster-space-1)}.monster-margin-start-1{margin-left:var(--monster-space-1)}.monster-padding-1{padding:var(--monster-space-1)}.monster-padding-top-1{padding-top:var(--monster-space-1)}.monster-padding-end-1{padding-right:var(--monster-space-1)}.monster-padding-bottom-1{padding-bottom:var(--monster-space-1)}.monster-padding-start-1{padding-left:var(--monster-space-1)}.monster-margin-2{margin:var(--monster-space-2)}.monster-margin-top-2{margin-top:var(--monster-space-2)}.monster-margin-end-2{margin-right:var(--monster-space-2)}.monster-margin-bottom-2{margin-bottom:var(--monster-space-2)}.monster-margin-start-2{margin-left:var(--monster-space-2)}.monster-padding-2{padding:var(--monster-space-2)}.monster-padding-top-2{padding-top:var(--monster-space-2)}.monster-padding-end-2{padding-right:var(--monster-space-2)}.monster-padding-bottom-2{padding-bottom:var(--monster-space-2)}.monster-padding-start-2{padding-left:var(--monster-space-2)}.monster-margin-3{margin:var(--monster-space-3)}.monster-margin-top-3{margin-top:var(--monster-space-3)}.monster-margin-end-3{margin-right:var(--monster-space-3)}.monster-margin-bottom-3{margin-bottom:var(--monster-space-3)}.monster-margin-start-3{margin-left:var(--monster-space-3)}.monster-padding-3{padding:var(--monster-space-3)}.monster-padding-top-3{padding-top:var(--monster-space-3)}.monster-padding-end-3{padding-right:var(--monster-space-3)}.monster-padding-bottom-3{padding-bottom:var(--monster-space-3)}.monster-padding-start-3{padding-left:var(--monster-space-3)}.monster-margin-4{margin:var(--monster-space-4)}.monster-margin-top-4{margin-top:var(--monster-space-4)}.monster-margin-end-4{margin-right:var(--monster-space-4)}.monster-margin-bottom-4{margin-bottom:var(--monster-space-4)}.monster-margin-start-4{margin-left:var(--monster-space-4)}.monster-padding-4{padding:var(--monster-space-4)}.monster-padding-top-4{padding-top:var(--monster-space-4)}.monster-padding-end-4{padding-right:var(--monster-space-4)}.monster-padding-bottom-4{padding-bottom:var(--monster-space-4)}.monster-padding-start-4{padding-left:var(--monster-space-4)}.monster-margin-5{margin:var(--monster-space-5)}.monster-margin-top-5{margin-top:var(--monster-space-5)}.monster-margin-end-5{margin-right:var(--monster-space-5)}.monster-margin-bottom-5{margin-bottom:var(--monster-space-5)}.monster-margin-start-5{margin-left:var(--monster-space-5)}.monster-padding-5{padding:var(--monster-space-5)}.monster-padding-top-5{padding-top:var(--monster-space-5)}.monster-padding-end-5{padding-right:var(--monster-space-5)}.monster-padding-bottom-5{padding-bottom:var(--monster-space-5)}.monster-padding-start-5{padding-left:var(--monster-space-5)}.monster-margin-6{margin:var(--monster-space-6)}.monster-margin-top-6{margin-top:var(--monster-space-6)}.monster-margin-end-6{margin-right:var(--monster-space-6)}.monster-margin-bottom-6{margin-bottom:var(--monster-space-6)}.monster-margin-start-6{margin-left:var(--monster-space-6)}.monster-padding-6{padding:var(--monster-space-6)}.monster-padding-top-6{padding-top:var(--monster-space-6)}.monster-padding-end-6{padding-right:var(--monster-space-6)}.monster-padding-bottom-6{padding-bottom:var(--monster-space-6)}.monster-padding-start-6{padding-left:var(--monster-space-6)}.monster-margin-7{margin:var(--monster-space-7)}.monster-margin-top-7{margin-top:var(--monster-space-7)}.monster-margin-end-7{margin-right:var(--monster-space-7)}.monster-margin-bottom-7{margin-bottom:var(--monster-space-7)}.monster-margin-start-7{margin-left:var(--monster-space-7)}.monster-padding-7{padding:var(--monster-space-7)}.monster-padding-top-7{padding-top:var(--monster-space-7)}.monster-padding-end-7{padding-right:var(--monster-space-7)}.monster-padding-bottom-7{padding-bottom:var(--monster-space-7)}.monster-padding-start-7{padding-left:var(--monster-space-7)}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:none;overflow:visible}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=visible]{clip-path:none;max-height:none;max-width:none;overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:4 0 90%;min-height:1.4em;overflow:auto;scrollbar-color:var(--monster-color-primary-1) var(--monster-bg-color-primary-1);scrollbar-width:thin;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;width:100%}.d-none{display:none!important}div[data-monster-role=no-options] span,div[data-monster-role=remote-info] span{text-wrap:balance}div[data-monster-role=control]{display:flex;height:100%;position:relative}[data-monster-role=container].open{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\")}[data-monster-role=container].clear,[data-monster-role=container].open{background-color:var(--monster-bg-color-primary-2);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:.8em;mask-size:.8em}[data-monster-role=container].clear{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}[data-monster-role=control]{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);-o-border-image:initial;border-image:initial;border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);display:flex;font-family:inherit;font-size:100%;margin:0;outline:none;padding:.4rem .6rem;width:-webkit-fill-available;width:-moz-available;width:fill-available}@media (prefers-color-scheme:light){[data-monster-role=control]{background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-1)}[data-monster-role=control]:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}}[data-monster-role=control]:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}:host([disabled]) [data-monster-role=control]{cursor:not-allowed}:host([disabled]) [data-monster-role=status-or-remove-badges],[data-monster-role=control][disabled] [data-monster-role=status-or-remove-badges]{display:none}div[data-monster-role=selection]{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;justify-content:flex-start;margin:5px}[data-monster-role=option-control]{margin-right:8px}[data-monster-role=badge]{display:inline-flex}[data-monster-role=badge-label]{align-content:center;align-items:center;display:flex;flex-direction:row;gap:7px;justify-content:space-between}[data-monster-role=filter],[data-monster-role=popper-filter]{display:flex;flex-grow:200;order:99999999;visibility:hidden}[data-monster-role=filter].active{background-color:var(--monster-bg-color-primary-2);border:0;border-color:var(--monster-bg-color-primary-3);border-bottom:1px solid var(--monster-bg-color-primary-3);color:var(--monster-color-primary-2);min-width:40%;outline:none;visibility:visible}.active[data-monster-role=filter][name=popper-filter]{height:1.5em;margin:2.5em;padding:2px;width:calc(100% - var(--monster-border-width)*2)}.option-filter-control{align-items:center;background-color:var(--monster-bg-color-primary-2);display:flex;height:2.5em;margin:-1.1em -1.1em .3em}[data-monster-role=remove-badge]{background-color:var(--monster-bg-color-primary-2);height:16px;margin-left:5px;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");order:2}[data-monster-role=remove-badge],[data-monster-role=status-or-remove-badges]{-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:.8em;mask-size:.8em;min-height:16px;width:16px}[data-monster-role=status-or-remove-badges]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}.open[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\")}.empty[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E\")}.clear[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}.error[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-error-1);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\")}@media (prefers-color-scheme:dark){.error[data-monster-role=status-or-remove-badges]{background-color:var(--monster-color-error-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\")}}.loading[data-monster-role=status-or-remove-badges]{animation-duration:1s;animation-iteration-count:infinite;animation-name:activity;animation-timing-function:cubic-bezier(0,0,.2,1);background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='activity' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='activity' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E\")}@keyframes activity{0%{transform:scale(1)}50%{transform:scale(.1)}to{transform:scale(1)}}[data-monster-role=options]{flex-direction:column;flex-grow:1;overflow-x:hidden;scrollbar-color:var(--monster-color-primary-1) var(--monster-bg-color-primary-1);scrollbar-gutter:stable;scrollbar-width:thin}[data-monster-role=option],[data-monster-role=options]{box-sizing:border-box;display:flex;max-width:100%;min-width:0;width:100%}[data-monster-role=option]{align-items:center;padding:6px 5px}[data-monster-role=option] label{justify-content:flex-start}[data-monster-role=option] label,[data-monster-role=option] label>div{align-items:center;display:flex;flex-direction:row;max-width:100%;min-width:0;width:100%}[data-monster-role=option] label>div{justify-content:space-between;outline:none}[part=option-label]{max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word}.selected{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=option][data-monster-filtered=true],[data-monster-role=option][data-monster-visibility=hidden]{display:none}[data-monster-role=option][data-monster-focused=true]{outline:1px dashed var(--monster-color-selection-2);outline-offset:-2px}@media (prefers-color-scheme:dark){[data-monster-role=option][data-monster-focused=true]{outline:1px dashed var(--monster-color-selection-4)}}[data-monster-role=filter]::-moz-placeholder{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=filter]::placeholder{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=option]>input:focus,[data-monster-role=option]>label:focus{outline:none}[data-monster-role=selection-messages]:empty:before,[data-monster-role=summary-messages]:empty:before{content:\"\u00A0\"}.in-button-bar{border-color:var(--monster-bg-color-primary-4)!important;border-style:var(--monster-border-style)!important;border-width:var(--monster-border-width)!important}[data-monster-role=pagination]::part(nav){justify-content:flex-start}[data-monster-role=pagination]::part(list){margin-bottom:0;margin-top:0} 
 }`, 0);
 } catch (e) {
   addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");

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

@@ -375,7 +375,8 @@ function applyAdaptiveFloatingContentSize(floatingElement, maxHeight) {
 		return;
 	}
 
-	if (contentElement.dataset.monsterOverflowMode === "visible") {
+	const overflowMode = contentElement.dataset.monsterOverflowMode;
+	if (overflowMode === "visible") {
 		return;
 	}
 
@@ -392,6 +393,20 @@ function applyAdaptiveFloatingContentSize(floatingElement, maxHeight) {
 		Number.isFinite(contentMaxHeight) && contentMaxHeight > 0
 			? Math.max(contentMaxHeight, minimumReadableHeight)
 			: contentMaxHeight;
+	const preferredContentHeight = getRequiredContentHeight(contentElement);
+
+	if (overflowMode === "horizontal" || overflowMode === "both") {
+		// Overlay-aware modes keep the parent wrapper sized to the real inline content.
+		// Nested poppers may still escape, but they must not inflate the outer popper height.
+		applyOverlayAwareContentHeight(
+			contentElement,
+			preferredContentHeight,
+			nextContentMaxHeight,
+			minimumReadableHeight,
+		);
+		syncNestedScrollContainerHeight(contentElement, nextContentMaxHeight);
+		return;
+	}
 
 	if (Number.isFinite(nextContentMaxHeight) && nextContentMaxHeight > 0) {
 		contentElement.style.maxHeight = `${nextContentMaxHeight}px`;
@@ -402,6 +417,39 @@ function applyAdaptiveFloatingContentSize(floatingElement, maxHeight) {
 	syncNestedScrollContainerHeight(contentElement, nextContentMaxHeight);
 }
 
+function applyOverlayAwareContentHeight(
+	contentElement,
+	preferredContentHeight,
+	contentMaxHeight,
+	minimumReadableHeight,
+) {
+	const preferredHeight =
+		Number.isFinite(preferredContentHeight) && preferredContentHeight > 0
+			? Math.max(preferredContentHeight, minimumReadableHeight)
+			: minimumReadableHeight;
+	const constrainedHeight =
+		Number.isFinite(contentMaxHeight) && contentMaxHeight > 0
+			? Math.min(preferredHeight, contentMaxHeight)
+			: preferredHeight;
+	const isConstrained =
+		Number.isFinite(contentMaxHeight) &&
+		contentMaxHeight > 0 &&
+		preferredHeight > contentMaxHeight;
+
+	contentElement.style.removeProperty("overflow");
+	contentElement.style.overflowX = "visible";
+	contentElement.style.overflowY = isConstrained ? "auto" : "visible";
+
+	if (Number.isFinite(constrainedHeight) && constrainedHeight > 0) {
+		contentElement.style.height = `${constrainedHeight}px`;
+		contentElement.style.maxHeight = `${constrainedHeight}px`;
+		return;
+	}
+
+	contentElement.style.removeProperty("height");
+	contentElement.style.removeProperty("maxHeight");
+}
+
 function getFloatingContentElement(floatingElement) {
 	for (const child of floatingElement.children) {
 		if (!(child instanceof HTMLElement)) {
@@ -628,7 +676,11 @@ function resetAdaptiveFloatingElementSize(floatingElement) {
 		return;
 	}
 
+	contentElement.style.removeProperty("height");
 	contentElement.style.removeProperty("maxHeight");
+	contentElement.style.removeProperty("overflow");
+	contentElement.style.removeProperty("overflowX");
+	contentElement.style.removeProperty("overflowY");
 
 	const nestedScrollableElement = getNestedScrollableElement(contentElement);
 	if (!(nestedScrollableElement instanceof HTMLElement)) {
@@ -659,6 +711,22 @@ function getRequiredContentWidth(contentElement) {
 	return Math.max(contentElement.scrollWidth, contentElement.clientWidth);
 }
 
+function getRequiredContentHeight(contentElement) {
+	const nestedScrollableElement = getNestedScrollableElement(contentElement);
+	if (nestedScrollableElement instanceof HTMLElement) {
+		const contentRect = contentElement.getBoundingClientRect();
+		const nestedRect = nestedScrollableElement.getBoundingClientRect();
+		const reservedHeight = Math.max(0, contentRect.height - nestedRect.height);
+		return Math.max(
+			contentElement.scrollHeight,
+			nestedScrollableElement.scrollHeight + reservedHeight,
+			contentElement.clientHeight,
+		);
+	}
+
+	return Math.max(contentElement.scrollHeight, contentElement.clientHeight);
+}
+
 function getNestedScrollableElement(contentElement) {
 	for (const child of contentElement.children) {
 		if (!(child instanceof HTMLElement)) {

package/source/components/layout/popper.mjs

@@ -293,6 +293,8 @@ class Popper extends CustomElement {
 	/**
 	 * Resolves the effective content overflow mode for the rendered wrapper.
 	 * Subclasses can override this when the configured option is only an intermediate mode.
+	 * `smart` keeps regular content measurable inside the popper while nested overlays
+	 * are allowed to escape horizontally without forcing the parent wrapper to size to them.
 	 *
 	 * @return {string}
 	 */
@@ -742,10 +744,27 @@ function applyContentOverflowMode() {
 		return;
 	}
 
-	contentElement.setAttribute(
-		"data-monster-overflow-mode",
-		this.resolveContentOverflowMode(),
-	);
+	const overflowMode = this.resolveContentOverflowMode();
+	contentElement.setAttribute("data-monster-overflow-mode", overflowMode);
+
+	switch (overflowMode) {
+		case "horizontal":
+			contentElement.style.overflow = "visible";
+			contentElement.style.removeProperty("max-height");
+			contentElement.style.removeProperty("max-width");
+			break;
+		case "both":
+		case "visible":
+			contentElement.style.overflow = "visible";
+			contentElement.style.maxHeight = "none";
+			contentElement.style.maxWidth = "none";
+			break;
+		default:
+			contentElement.style.removeProperty("overflow");
+			contentElement.style.removeProperty("max-height");
+			contentElement.style.removeProperty("max-width");
+			break;
+	}
 }
 
 /**

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

@@ -33,7 +33,49 @@ let html2 = `
     </div>
 `;
 
+function createJsonResponse(data, status = 200) {
+    let headers = new Map();
+    headers.set('content-type', 'application/json');
+
+    return Promise.resolve({
+        ok: status >= 200 && status < 300,
+        status,
+        headers,
+        text: function () {
+            return Promise.resolve(JSON.stringify(data));
+        }
+    });
+}
+
+function waitForCondition(check, {timeout = 4000, interval = 25} = {}) {
+    return new Promise((resolve, reject) => {
+        const start = Date.now();
+
+        const poll = () => {
+            try {
+                if (check()) {
+                    resolve();
+                    return;
+                }
+            } catch (e) {
+                reject(e);
+                return;
+            }
+
+            if (Date.now() - start >= timeout) {
+                reject(new Error('Timed out while waiting for test condition.'));
+                return;
+            }
+
+            setTimeout(poll, interval);
+        };
+
+        poll();
+    });
+}
+
 let Select,
+    SelectStyleSheet,
     getDefaultSelectPopperPositionProfile,
     resolveSelectListDimension,
     resolveSelectPopperWidthConstraints,
@@ -61,6 +103,9 @@ describe('Select', function () {
                 resolveSelectPopperWidthConstraints = m['resolveSelectPopperWidthConstraints'];
                 resolveSelectVisibleRect = m['resolveSelectVisibleRect'];
                 resolveSelectViewportMetrics = m['resolveSelectViewportMetrics'];
+                return import("../../../../source/components/form/stylesheet/select.mjs");
+            }).then((m) => {
+                SelectStyleSheet = m['SelectStyleSheet'];
                 done()
             }).catch(e => done(e))
 
@@ -197,6 +242,8 @@ describe('Select', function () {
     });
 
     describe('Popper sizing', function () {
+        this.timeout(5000);
+
         afterEach(() => {
             let mocks = document.getElementById('mocks');
             mocks.innerHTML = "";
@@ -260,6 +307,16 @@ describe('Select', function () {
             expect(result.overflowY).to.equal('hidden');
         });
 
+        it('should keep option list scroll layout stable while overflow toggles', function () {
+            const cssText = Array.from(SelectStyleSheet.cssRules)
+                .map((rule) => rule.cssText)
+                .join('\n')
+                .replace(/\s+/g, '');
+
+            expect(cssText).to.contain('scrollbar-gutter:stable');
+            expect(cssText).to.not.contain('transition:height');
+        });
+
         it('should refresh the content max height when the available popper height grows again', function (done) {
             const mocks = document.getElementById('mocks');
             const select = document.createElement('monster-select');
@@ -722,25 +779,251 @@ describe('Select', function () {
 
             setTimeout(() => {
                 try {
-                    const observer = mockIntersectionObserver.getInstance();
-                    observer.enterNode();
+                    expect(lookupCount).to.equal(0);
                 } catch (e) {
                     mockIntersectionObserver.restore();
                     return done(e);
                 }
 
+                mockIntersectionObserver.restore();
+                done();
+            }, 150);
+        });
+
+        it('should not refetch after selecting an already loaded remote option', function (done) {
+            this.timeout(3000);
+
+            let mocks = document.getElementById('mocks');
+            const requests = [];
+
+            global['fetch'] = function (url) {
+                requests.push(String(url));
+                return createJsonResponse({
+                    items: [
+                        {id: 'alpha', name: 'Alpha'}
+                    ],
+                    pagination: {
+                        total: 1,
+                        page: 1,
+                        perPage: 1
+                    }
+                });
+            };
+
+            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.defaultValue', '*');
+            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);
+
+            setTimeout(() => {
+                select.fetch('https://example.com/items?filter=*&page=1')
+                    .then(() => {
+                        try {
+                            expect(requests).to.deep.equal([
+                                'https://example.com/items?filter=*&page=1'
+                            ]);
+
+                            select.value = 'alpha';
+                        } catch (e) {
+                            return done(e);
+                        }
+
+                        setTimeout(() => {
+                            try {
+                                expect(requests).to.deep.equal([
+                                    'https://example.com/items?filter=*&page=1'
+                                ]);
+                            } catch (e) {
+                                return done(e);
+                            }
+
+                            done();
+                        }, 200);
+                    })
+                    .catch((e) => done(e));
+            }, 50);
+        });
+
+        it('should reuse defaultOptionsUrl after clearing the filter and reopening', async function () {
+            this.timeout(5000);
+
+            let mocks = document.getElementById('mocks');
+            const requests = [];
+
+            global['fetch'] = function (url) {
+                const requestUrl = String(url);
+                requests.push(requestUrl);
+
+                if (requestUrl.indexOf('/defaults') !== -1) {
+                    return createJsonResponse({
+                        items: [
+                            {id: 'seed', name: 'Seed'}
+                        ],
+                        pagination: {
+                            total: 1,
+                            page: 1,
+                            perPage: 1
+                        }
+                    });
+                }
+
+                return createJsonResponse({
+                    items: [
+                        {id: 'match', name: 'Match'}
+                    ],
+                    pagination: {
+                        total: 1,
+                        page: 1,
+                        perPage: 1
+                    }
+                });
+            };
+
+            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('filter.defaultOptionsUrl', 'https://example.com/defaults?page={page}');
+            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);
+
+            const dispatchFilterKey = (input, code, key) => {
+                input.dispatchEvent(new KeyboardEvent('keydown', {
+                    bubbles: true,
+                    composed: true,
+                    code,
+                    key
+                }));
+            };
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=container]') instanceof HTMLElement;
+            });
+
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            const filterInput = select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]');
+
+            container.click();
+            await waitForCondition(() => requests.length >= 1);
+            expect(requests[0]).to.equal('https://example.com/defaults?page=1');
+
+            filterInput.value = 'alpha';
+            dispatchFilterKey(filterInput, 'KeyA', 'a');
+            await waitForCondition(() => requests.length >= 2);
+            expect(requests[1]).to.equal('https://example.com/items?filter=alpha&page=1');
+
+            filterInput.value = '';
+            dispatchFilterKey(filterInput, 'Backspace', 'Backspace');
+            await waitForCondition(() => requests.length >= 3);
+            expect(requests[2]).to.equal('https://example.com/defaults?page=1');
+
+            container.click();
+            await waitForCondition(() => select.shadowRoot.querySelector('[data-monster-role=popper]').style.display === 'none');
+
+            container.click();
+            await waitForCondition(() => requests.length >= 4);
+            expect(requests[3]).to.equal('https://example.com/defaults?page=1');
+        });
+
+        it('should keep unresolved lookup values visible and mark their badge', function (done) {
+            this.timeout(3000);
+
+            let mocks = document.getElementById('mocks');
+            global['fetch'] = function () {
+                return createJsonResponse({
+                    items: [],
+                    pagination: {
+                        total: 0,
+                        page: 1,
+                        perPage: 1
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('lookup.url', 'https://example.com/items?filter={filter}');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('selection', [{value: 'missing-key'}]);
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                try {
+                    const badge = select.shadowRoot.querySelector('[data-monster-role=badge]');
+                    const badgeLabel = select.shadowRoot.querySelector('[data-monster-role=badge-label]');
+
+                    expect(badge).to.be.instanceof(HTMLDivElement);
+                    expect(badgeLabel).to.be.instanceof(HTMLDivElement);
+                    expect(badgeLabel.textContent.trim()).to.equal('missing-key');
+                    expect(badge.className).to.contain('monster-badge-warning');
+                    expect(badge.className).to.not.contain('monster-badge-primary');
+                    expect(badge.getAttribute('data-monster-unresolved')).to.equal('true');
+                    expect(badgeLabel.textContent).to.not.contain(select.getOption('labels.cannot-be-loaded'));
+                } catch (e) {
+                    return done(e);
+                }
+
+                done();
+            }, 250);
+        });
+
+        it('should clear the unresolved badge state once a local option can resolve the value', function (done) {
+            this.timeout(4000);
+
+            let mocks = document.getElementById('mocks');
+            global['fetch'] = function () {
+                return createJsonResponse({
+                    items: [],
+                    pagination: {
+                        total: 0,
+                        page: 1,
+                        perPage: 1
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('lookup.url', 'https://example.com/items?filter={filter}');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('selection', [{value: 'missing-key'}]);
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                select.setOption('options', [{label: 'Resolved Label', value: 'missing-key'}]);
+                select.value = 'missing-key';
+
                 setTimeout(() => {
                     try {
-                        expect(lookupCount).to.equal(0);
+                        const badge = select.shadowRoot.querySelector('[data-monster-role=badge]');
+                        const badgeLabel = select.shadowRoot.querySelector('[data-monster-role=badge-label]');
+
+                        expect(badge).to.be.instanceof(HTMLDivElement);
+                        expect(badgeLabel.textContent.trim()).to.equal('Resolved Label');
+                        expect(badge.className).to.contain('monster-badge-primary');
+                        expect(badge.className).to.not.contain('monster-badge-warning');
+                        expect(badge.getAttribute('data-monster-unresolved')).to.not.equal('true');
                     } catch (e) {
-                        mockIntersectionObserver.restore();
                         return done(e);
                     }
 
-                    mockIntersectionObserver.restore();
                     done();
                 }, 150);
-            }, 50);
+            }, 250);
         });
 
         it('should not throw when IntersectionObserver is unavailable', function (done) {