@schukai/monster 4.136.4 → 4.136.5

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.136.4"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.136.5"}

package/source/components/form/select.mjs

@@ -41,6 +41,7 @@ import { getLocaleOfDocument } from "../../dom/locale.mjs";
 import {
 	findElementWithSelectorUpwards,
 	getDocument,
+	getWindow,
 } from "../../dom/util.mjs";
 import {
 	getDocumentTranslations,
@@ -69,6 +70,7 @@ import {
 	isPositionedPopperOpen,
 	openPositionedPopper,
 	positionPopper,
+	resolveClippingBoundaryElement,
 } from "./util/floating-ui.mjs";
 import { Pathfinder } from "../../data/pathfinder.mjs";
 import { TokenList } from "../../types/tokenlist.mjs";
@@ -76,9 +78,14 @@ import { TokenList } from "../../types/tokenlist.mjs";
 import "../datatable/pagination.mjs";
 
 export {
+	getDefaultSelectPopperPositionProfile,
 	getSelectionTemplate,
 	getSummaryTemplate,
 	popperElementSymbol,
+	resolveSelectPopperWidthConstraints,
+	resolveSelectListDimension,
+	resolveSelectVisibleRect,
+	resolveSelectViewportMetrics,
 	Select,
 };
 
@@ -129,6 +136,14 @@ const clearOptionEventHandler = Symbol("clearOptionEventHandler");
  * @type {Symbol}
  */
 const resizeObserverSymbol = Symbol("resizeObserver");
+const resizeObserverFrameSymbol = Symbol("resizeObserverFrame");
+const visualViewportResizeHandlerSymbol = Symbol("visualViewportResizeHandler");
+const visualViewportScrollHandlerSymbol = Symbol("visualViewportScrollHandler");
+const visibilityChangeHandlerSymbol = Symbol("visibilityChangeHandler");
+const windowResizeHandlerSymbol = Symbol("windowResizeHandler");
+const windowOrientationChangeHandlerSymbol = Symbol(
+	"windowOrientationChangeHandler",
+);
 
 /**
  * local symbol
@@ -343,6 +358,9 @@ const FILTER_POSITION_POPPER = "popper";
  * @type {string}
  */
 const FILTER_POSITION_INLINE = "inline";
+const SELECT_MIN_POPPER_WIDTH = 240;
+const SELECT_MAX_POPPER_HEIGHT = 500;
+const SELECT_VIEWPORT_PADDING = 12;
 
 /**
  * A select control that can be used to select o
@@ -1975,21 +1993,8 @@ function initOptionsFromArguments() {
  * @private
  */
 function attachResizeObserver() {
-	// against flickering
-	this[resizeObserverSymbol] = new ResizeObserver((entries) => {
-		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
-			try {
-				this[timerCallbackSymbol].touch();
-				return;
-			} catch (e) {
-				delete this[timerCallbackSymbol];
-			}
-		}
-
-		this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
-			updatePopper.call(this);
-			delete this[timerCallbackSymbol];
-		});
+	this[resizeObserverSymbol] = new ResizeObserver(() => {
+		scheduleResizeObserverPopperUpdate.call(this);
 	});
 
 	let parent = this.parentNode;
@@ -2000,6 +2005,70 @@ function attachResizeObserver() {
 	if (parent instanceof HTMLElement) {
 		this[resizeObserverSymbol].observe(parent);
 	}
+
+	for (const element of [
+		this,
+		this[controlElementSymbol],
+		this[popperElementSymbol],
+		this[popperFilterContainerElementSymbol],
+		this[optionsElementSymbol],
+		this[paginationElementSymbol],
+	]) {
+		if (element instanceof HTMLElement) {
+			this[resizeObserverSymbol].observe(element);
+		}
+	}
+
+	const boundaryElement = resolveClippingBoundaryElement(
+		this[controlElementSymbol],
+		this[popperElementSymbol],
+	);
+	if (boundaryElement instanceof HTMLElement) {
+		this[resizeObserverSymbol].observe(boundaryElement);
+	}
+
+	const viewport = getGlobal().visualViewport;
+	const windowObject = getWindow();
+	this[visualViewportResizeHandlerSymbol] = () => {
+		updatePopper.call(this);
+	};
+	this[visualViewportScrollHandlerSymbol] = () => {
+		updatePopper.call(this);
+	};
+	this[visibilityChangeHandlerSymbol] = () => {
+		if (document.visibilityState === "visible") {
+			updatePopper.call(this);
+		}
+	};
+	this[windowResizeHandlerSymbol] = () => {
+		updatePopper.call(this);
+	};
+	this[windowOrientationChangeHandlerSymbol] = () => {
+		updatePopper.call(this);
+	};
+
+	if (viewport) {
+		viewport.addEventListener(
+			"resize",
+			this[visualViewportResizeHandlerSymbol],
+		);
+		viewport.addEventListener(
+			"scroll",
+			this[visualViewportScrollHandlerSymbol],
+		);
+	}
+
+	document.addEventListener(
+		"visibilitychange",
+		this[visibilityChangeHandlerSymbol],
+	);
+	if (windowObject?.addEventListener instanceof Function) {
+		windowObject.addEventListener("resize", this[windowResizeHandlerSymbol]);
+		windowObject.addEventListener(
+			"orientationchange",
+			this[windowOrientationChangeHandlerSymbol],
+		);
+	}
 }
 
 /**
@@ -2009,6 +2078,83 @@ function disconnectResizeObserver() {
 	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
 		this[resizeObserverSymbol].disconnect();
 	}
+	cancelScheduledResizeObserverPopperUpdate.call(this);
+
+	const viewport = getGlobal().visualViewport;
+	if (
+		viewport &&
+		this[visualViewportResizeHandlerSymbol] instanceof Function
+	) {
+		viewport.removeEventListener(
+			"resize",
+			this[visualViewportResizeHandlerSymbol],
+		);
+	}
+	if (
+		viewport &&
+		this[visualViewportScrollHandlerSymbol] instanceof Function
+	) {
+		viewport.removeEventListener(
+			"scroll",
+			this[visualViewportScrollHandlerSymbol],
+		);
+	}
+	if (this[visibilityChangeHandlerSymbol] instanceof Function) {
+		document.removeEventListener(
+			"visibilitychange",
+			this[visibilityChangeHandlerSymbol],
+		);
+	}
+	const windowObject = getWindow();
+	if (
+		windowObject?.removeEventListener instanceof Function &&
+		this[windowResizeHandlerSymbol] instanceof Function
+	) {
+		windowObject.removeEventListener("resize", this[windowResizeHandlerSymbol]);
+	}
+	if (
+		windowObject?.removeEventListener instanceof Function &&
+		this[windowOrientationChangeHandlerSymbol] instanceof Function
+	) {
+		windowObject.removeEventListener(
+			"orientationchange",
+			this[windowOrientationChangeHandlerSymbol],
+		);
+	}
+}
+
+function scheduleResizeObserverPopperUpdate() {
+	const globalObject = getGlobal();
+	if (typeof this[resizeObserverFrameSymbol] === "number") {
+		return;
+	}
+
+	const schedule =
+		globalObject?.requestAnimationFrame instanceof Function
+			? globalObject.requestAnimationFrame.bind(globalObject)
+			: (callback) => {
+					return globalObject.setTimeout(callback, 16);
+			  };
+
+	this[resizeObserverFrameSymbol] = schedule(() => {
+		delete this[resizeObserverFrameSymbol];
+		updatePopper.call(this);
+	});
+}
+
+function cancelScheduledResizeObserverPopperUpdate() {
+	const globalObject = getGlobal();
+	const frameId = this[resizeObserverFrameSymbol];
+	if (typeof frameId !== "number") {
+		return;
+	}
+
+	if (globalObject?.cancelAnimationFrame instanceof Function) {
+		globalObject.cancelAnimationFrame(frameId);
+	} else {
+		globalObject.clearTimeout(frameId);
+	}
+	delete this[resizeObserverFrameSymbol];
 }
 
 /**
@@ -2468,10 +2614,9 @@ function calcAndSetOptionsDimension() {
 	}
 
 	let visible = 0;
-	let optionHeight = 0;
+	const visibleOptionHeights = [];
 	const max = this.getOption("showMaxOptions", 10);
 
-	let scrollFlag = false;
 	for (const [, option] of Object.entries(options)) {
 		const computedStyle = getGlobal().getComputedStyle(option);
 		if (computedStyle.display === "none") continue;
@@ -2479,18 +2624,8 @@ function calcAndSetOptionsDimension() {
 		let h = option.getBoundingClientRect().height;
 		h += parseInt(computedStyle.getPropertyValue("margin-top"), 10);
 		h += parseInt(computedStyle.getPropertyValue("margin-bottom"), 10);
-		optionHeight += h;
-
+		visibleOptionHeights.push(h);
 		visible++;
-
-		if (visible > max) {
-			break;
-		}
-	}
-
-	if (visible > max) {
-		visible = max;
-		scrollFlag = true;
 	}
 
 	if (visible === 0) {
@@ -2535,61 +2670,299 @@ function calcAndSetOptionsDimension() {
 	let margin = parseInt(styles.getPropertyValue("margin-top"), 10);
 	margin += parseInt(styles.getPropertyValue("margin-bottom"), 10);
 
-	let containerHeight = optionHeight + padding + margin;
-	const maxViewportHeight = Math.floor(getVisibleHeightLimit(this) / 3);
-	if (containerHeight > maxViewportHeight) {
-		containerHeight = maxViewportHeight;
-	}
+	const geometry = getSelectPopperGeometry.call(this);
+	const listDimension = resolveSelectListDimension({
+		visibleOptionHeights,
+		maxVisibleOptions: max,
+		availableHeight: geometry.availableHeight,
+		padding,
+		margin,
+	});
+	const widthConstraints = resolveSelectPopperWidthConstraints({
+		controlWidth: this[controlElementSymbol].getBoundingClientRect().width,
+		availableWidth: geometry.availableWidth,
+	});
 
-	container.style.height = `${containerHeight}px`;
+	container.style.height =
+		listDimension.desiredHeight > 0 ? `${listDimension.desiredHeight}px` : "0px";
+	container.style.maxHeight =
+		listDimension.maxHeight > 0 ? `${listDimension.maxHeight}px` : "0px";
+	container.style.overflowY = listDimension.overflowY;
 
-	if (scrollFlag === true) {
-		container.style.overflowY = "scroll";
+	this[popperElementSymbol].dataset.monsterPreferredWidth = `${Math.ceil(
+		widthConstraints.preferredWidth,
+	)}`;
+	if (
+		Number.isFinite(widthConstraints.maxWidth) &&
+		widthConstraints.maxWidth > 0
+	) {
+		this[popperElementSymbol].dataset.monsterPreferredMaxWidth = `${Math.ceil(
+			widthConstraints.maxWidth,
+		)}`;
+		this[popperElementSymbol].style.maxWidth = `${Math.ceil(
+			widthConstraints.maxWidth,
+		)}px`;
 	} else {
-		container.style.overflowY = "auto";
+		delete this[popperElementSymbol].dataset.monsterPreferredMaxWidth;
+		this[popperElementSymbol].style.removeProperty("maxWidth");
+	}
+	this[popperElementSymbol].style.width = "";
+	this[popperElementSymbol].style.removeProperty("minWidth");
+	this[popperElementSymbol].style.maxHeight = `${Math.ceil(
+		Math.min(geometry.availableHeight, SELECT_MAX_POPPER_HEIGHT),
+	)}px`;
+	container.style.overflowX = "hidden";
+
+	if (content instanceof HTMLElement) {
+		content.style.overflow = "hidden";
+		content.style.maxHeight =
+			listDimension.maxHeight > 0 ? `${listDimension.maxHeight}px` : "";
 	}
+}
 
-	const domRect = this[controlElementSymbol].getBoundingClientRect();
+function resolveSelectPopperPreferredWidth(controlWidth) {
+	return Math.max(Math.ceil(controlWidth), SELECT_MIN_POPPER_WIDTH);
+}
 
-	this[popperElementSymbol].dataset.monsterPreferredWidth = `${Math.ceil(
-		domRect.width,
-	)}`;
-	this[popperElementSymbol].style.width = `${domRect.width}px`;
-	this[popperElementSymbol].style.minWidth = `${domRect.width}px`;
-	container.style.overflowX = "auto";
+function resolveSelectPopperWidthConstraints({
+	controlWidth = 0,
+	availableWidth = 0,
+}) {
+	const preferredWidth = resolveSelectPopperPreferredWidth(controlWidth);
+	const maxWidth = Math.max(0, availableWidth);
 
-	if (content instanceof HTMLElement) {
-		content.style.overflowX = "hidden";
-		content.style.overflowY = "hidden";
+	return {
+		preferredWidth,
+		maxWidth: maxWidth > 0 ? maxWidth : Infinity,
+	};
+}
+
+function resolveSelectListDimension({
+	visibleOptionHeights = [],
+	maxVisibleOptions = 10,
+	availableHeight,
+	padding = 0,
+	margin = 0,
+}) {
+	const visibleHeights = visibleOptionHeights.filter((height) => {
+		return Number.isFinite(height) && height > 0;
+	});
+	const naturalListHeight =
+		visibleHeights
+			.slice(0, Math.max(0, maxVisibleOptions))
+			.reduce((sum, height) => {
+				return sum + height;
+			}, 0) +
+		padding +
+		margin;
+	const fullListHeight =
+		visibleHeights.reduce((sum, height) => {
+			return sum + height;
+		}, 0) +
+		padding +
+		margin;
+	const maxHeight = resolveSelectListMaxHeight({
+		availableHeight,
+	});
+	const desiredHeight = Math.min(
+		maxHeight,
+		fullListHeight > 0 ? naturalListHeight : 0,
+	);
+
+	return {
+		desiredHeight,
+		fullHeight: fullListHeight,
+		maxHeight,
+		overflowY: fullListHeight > desiredHeight ? "auto" : "hidden",
+	};
+}
+
+function resolveSelectListMaxHeight(geometry) {
+	if (!geometry || !Number.isFinite(geometry.availableHeight)) {
+		return SELECT_MAX_POPPER_HEIGHT;
 	}
+
+	return Math.max(
+		0,
+		Math.min(geometry.availableHeight, SELECT_MAX_POPPER_HEIGHT),
+	);
 }
 
-/**
- * @private
- */
-function getVisibleHeightLimit(startEl) {
-	let el = startEl;
-	const gcs = getGlobal().getComputedStyle;
+function getViewportMetrics() {
+	const globalObject = getGlobal();
+	const documentElement = globalObject.document?.documentElement;
+	const viewport = globalObject.visualViewport;
+	const metrics = resolveSelectViewportMetrics({
+		layoutWidth: Math.max(
+			documentElement?.clientWidth || 0,
+			globalObject.innerWidth || 0,
+		),
+		layoutHeight: Math.max(
+			documentElement?.clientHeight || 0,
+			globalObject.innerHeight || 0,
+		),
+		visualWidth: viewport?.width || 0,
+		visualHeight: viewport?.height || 0,
+		offsetLeft: viewport?.offsetLeft || 0,
+		offsetTop: viewport?.offsetTop || 0,
+		padding: SELECT_VIEWPORT_PADDING,
+	});
 
-	while (el) {
-		const style = gcs(el);
-		const overflowY = style.overflowY;
+	return {
+		width: metrics.width,
+		height: metrics.height,
+		left: metrics.left,
+		top: metrics.top,
+		padding: metrics.padding,
+	};
+}
 
-		const isScrollable = ["auto", "scroll", "hidden"].includes(overflowY);
+function resolveSelectViewportMetrics({
+	layoutWidth = 0,
+	layoutHeight = 0,
+	visualWidth = 0,
+	visualHeight = 0,
+	offsetLeft = 0,
+	offsetTop = 0,
+	padding = SELECT_VIEWPORT_PADDING,
+}) {
+	return {
+		width: Math.max(layoutWidth, visualWidth),
+		height: Math.max(layoutHeight, visualHeight),
+		left: offsetLeft,
+		top: offsetTop,
+		padding,
+	};
+}
 
-		if (isScrollable && el.clientHeight > 0) {
-			return el.clientHeight;
-		}
+function resolveSelectVisibleRect({
+	viewportMetrics,
+	boundaryRect = null,
+}) {
+	const viewportLeft = (viewportMetrics?.left || 0) + (viewportMetrics?.padding || 0);
+	const viewportTop = (viewportMetrics?.top || 0) + (viewportMetrics?.padding || 0);
+	const viewportRight =
+		(viewportMetrics?.left || 0) +
+		(viewportMetrics?.width || 0) -
+		(viewportMetrics?.padding || 0);
+	const viewportBottom =
+		(viewportMetrics?.top || 0) +
+		(viewportMetrics?.height || 0) -
+		(viewportMetrics?.padding || 0);
+
+	const left = boundaryRect
+		? Math.max(viewportLeft, boundaryRect.left)
+		: viewportLeft;
+	const top = boundaryRect
+		? Math.max(viewportTop, boundaryRect.top)
+		: viewportTop;
+	const right = boundaryRect
+		? Math.min(viewportRight, boundaryRect.right)
+		: viewportRight;
+	const bottom = boundaryRect
+		? Math.min(viewportBottom, boundaryRect.bottom)
+		: viewportBottom;
 
-		const root = el.getRootNode?.();
-		if (root instanceof ShadowRoot && root.host) {
-			el = root.host;
-		} else {
-			el = el.parentElement;
-		}
+	return {
+		left,
+		top,
+		right,
+		bottom,
+		width: Math.max(0, right - left),
+		height: Math.max(0, bottom - top),
+	};
+}
+
+function getSelectPopperGeometry() {
+	const viewport = getViewportMetrics();
+	const boundaryElement = resolveClippingBoundaryElement(
+		this[controlElementSymbol],
+		this[popperElementSymbol],
+	);
+	const controlRect = this[controlElementSymbol].getBoundingClientRect();
+	const boundaryRect =
+		boundaryElement instanceof HTMLElement
+			? boundaryElement.getBoundingClientRect()
+			: null;
+	const visibleRect = resolveSelectVisibleRect({
+		viewportMetrics: viewport,
+		boundaryRect,
+	});
+	const spaceAbove = Math.max(
+		0,
+		controlRect.top - visibleRect.top,
+	);
+	const spaceBelow = Math.max(
+		0,
+		visibleRect.bottom - controlRect.bottom,
+	);
+	const availableHeight = Math.max(spaceAbove, spaceBelow, 0);
+
+	return {
+		spaceAbove,
+		spaceBelow,
+		availableHeight,
+		availableWidth: visibleRect.width,
+		boundaryElement,
+	};
+}
+
+function getSelectPopperPositionOptions() {
+	const popperOptions = Object.assign({}, this.getOption("popper", {}));
+	const middleware = popperOptions.middleware;
+	const usesLegacyDefaultMiddleware =
+		isArray(middleware) &&
+		middleware.length === 2 &&
+		middleware[0] === "flip" &&
+		middleware[1] === "offset:1";
+
+	if (
+		!isArray(middleware) ||
+		middleware.length === 0 ||
+		usesLegacyDefaultMiddleware
+	) {
+		popperOptions.middleware = getDefaultSelectPopperPositionProfile().middleware;
+	}
+
+	if (
+		!isString(popperOptions.placement) ||
+		popperOptions.placement === "bottom"
+	) {
+		popperOptions.placement =
+			getDefaultSelectPopperPositionProfile().placement;
 	}
 
-	return window.innerHeight;
+	return popperOptions;
+}
+
+function getDefaultSelectPopperPositionProfile() {
+	return {
+		placement: "bottom-start",
+		middleware: ["flip", "offset:4", "shift:crossAxis", "size"],
+	};
+}
+
+function resetSelectPopperDimensionStyles() {
+	if (!(this[popperElementSymbol] instanceof HTMLElement)) {
+		return;
+	}
+
+	delete this[popperElementSymbol].dataset.monsterPreferredWidth;
+	delete this[popperElementSymbol].dataset.monsterPreferredMaxWidth;
+	this[popperElementSymbol].style.removeProperty("width");
+	this[popperElementSymbol].style.removeProperty("minWidth");
+	this[popperElementSymbol].style.removeProperty("maxWidth");
+	this[popperElementSymbol].style.removeProperty("maxHeight");
+
+	const content = this[popperElementSymbol].querySelector('[part="content"]');
+	if (content instanceof HTMLElement) {
+		content.style.removeProperty("maxHeight");
+	}
+
+	if (this[optionsElementSymbol] instanceof HTMLElement) {
+		this[optionsElementSymbol].style.removeProperty("height");
+		this[optionsElementSymbol].style.removeProperty("maxHeight");
+	}
 }
 
 /**
@@ -3751,6 +4124,7 @@ function fetchData(url) {
  * @private
  */
 function hide() {
+	resetSelectPopperDimensionStyles.call(this);
 	closePositionedPopper(this[popperElementSymbol]);
 	setStatusOrRemoveBadges.call(this, "closed");
 	removeAttributeToken(this[controlElementSymbol], "class", "open");
@@ -3819,11 +4193,12 @@ function show() {
 		return;
 	}
 
+	resetSelectPopperDimensionStyles.call(this);
 	this[popperElementSymbol].style.visibility = "hidden";
 	openPositionedPopper(
 		this[controlElementSymbol],
 		this[popperElementSymbol],
-		this.getOption("popper", {}),
+		getSelectPopperPositionOptions.call(this),
 	);
 	setStatusOrRemoveBadges.call(this, "open");
 
@@ -4493,7 +4868,7 @@ function updatePopper() {
 			this,
 			this[controlElementSymbol],
 			this[popperElementSymbol],
-			this.getOption("popper", {}),
+			getSelectPopperPositionOptions.call(this),
 		);
 		requestAnimationFrame(() => {
 			refreshSelectPaginationLayout.call(this);

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

@@ -258,10 +258,14 @@ div[data-monster-role=selection] {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
     flex-grow: 1;
     scrollbar-color: var(--monster-color-primary-1) var(--monster-bg-color-primary-1);
     scrollbar-width: thin;
     transition: height 0.3s ease;
+    overflow-x: hidden;
 }
 
 [data-monster-role=option] {
@@ -269,6 +273,9 @@ div[data-monster-role=selection] {
     align-items: center;
     display: flex;
     box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
 }
 
 [data-monster-role=option] label {
@@ -277,6 +284,8 @@ div[data-monster-role=selection] {
     justify-content: flex-start;
     align-items: center;
     width: 100%;
+    max-width: 100%;
+    min-width: 0;
 }
 
 
@@ -286,9 +295,18 @@ div[data-monster-role=selection] {
     flex-direction: row;
     align-items: center;
     width: 100%;
+    max-width: 100%;
+    min-width: 0;
     outline: none;
 }
 
+[part=option-label] {
+    max-width: 100%;
+    min-width: 0;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+}
+
 [data-monster-role="no-options"] {
 }
 

package/source/components/form/stylesheet/context-error.mjs

@@ -10,10 +10,10 @@
  * For more information about purchasing a commercial license, please contact Volker Schukai.
  */
 
-import {addAttributeToken} from "../../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+import { addAttributeToken } from "../../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
 
-export {ContextErrorStyleSheet}
+export { ContextErrorStyleSheet };
 
 /**
  * @private
@@ -22,10 +22,17 @@ export {ContextErrorStyleSheet}
 const ContextErrorStyleSheet = new CSSStyleSheet();
 
 try {
-  ContextErrorStyleSheet.insertRule(`
+	ContextErrorStyleSheet.insertRule(
+		`
 @layer contexterror { 
 [data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}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));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=control]{line-height:1em;margin:0;padding:0;position:relative}[data-monster-role=control] [data-monster-role=button]{display:inline-block;position:relative}:is([data-monster-role=control] [data-monster-role=button]) svg{cursor:pointer}:is([data-monster-role=control] [data-monster-role=button]) svg.hidden{cursor:default;pointer-events:none;visibility:hidden}:host{display:inline-block;margin:0 .2em;padding:0;position:relative;vertical-align:bottom}div[data-monster-role=popper]{max-width:min(var(--monster-popper-max-width,calc(100vw - 2rem)),32rem)}div[data-monster-role=popper]>[part=content]{display:block;max-width:100%;overflow-wrap:anywhere;text-wrap:pretty;white-space:normal;word-break:break-word}:host([disabled]) [data-monster-role=button] svg{cursor:default;pointer-events:none} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }

package/source/components/form/stylesheet/context-help.mjs

@@ -10,10 +10,10 @@
  * For more information about purchasing a commercial license, please contact Volker Schukai.
  */
 
-import {addAttributeToken} from "../../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+import { addAttributeToken } from "../../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
 
-export {ContextHelpStyleSheet}
+export { ContextHelpStyleSheet };
 
 /**
  * @private
@@ -22,10 +22,17 @@ export {ContextHelpStyleSheet}
 const ContextHelpStyleSheet = new CSSStyleSheet();
 
 try {
-  ContextHelpStyleSheet.insertRule(`
+	ContextHelpStyleSheet.insertRule(
+		`
 @layer contexthelp { 
 [data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}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));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=control]{line-height:1em;margin:0;padding:0;position:relative}[data-monster-role=control] [data-monster-role=button]{display:inline-block;position:relative}:is([data-monster-role=control] [data-monster-role=button]) svg{cursor:pointer}:is([data-monster-role=control] [data-monster-role=button]) svg.hidden{cursor:default;pointer-events:none;visibility:hidden}div[data-monster-role=popper]{max-width:min(var(--monster-popper-max-width,calc(100vw - 2rem)),32rem);z-index:var(--monster-z-index-tooltip-overlay)}div[data-monster-role=popper]>[part=content]{display:block;max-width:100%;overflow-wrap:anywhere;text-wrap:pretty;white-space:normal;word-break:break-word}:host{display:inline-block;margin:0 .2em;padding:0;position:relative;vertical-align:bottom}:host([disabled]) [data-monster-role=button] svg{cursor:default;pointer-events:none} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }

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

@@ -10,10 +10,10 @@
  * For more information about purchasing a commercial license, please contact Volker Schukai.
  */
 
-import { addAttributeToken } from "../../../dom/attributes.mjs";
-import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
+import {addAttributeToken} from "../../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
 
-export { SelectStyleSheet };
+export {SelectStyleSheet}
 
 /**
  * @private
@@ -22,17 +22,10 @@ export { SelectStyleSheet };
 const SelectStyleSheet = new CSSStyleSheet();
 
 try {
-	SelectStyleSheet.insertRule(
-		`
+  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]{box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;scrollbar-color:var(--monster-color-primary-1) var(--monster-bg-color-primary-1);scrollbar-width:thin;transition:height .3s ease}[data-monster-role=option]{align-items:center;box-sizing:border-box;display:flex;padding:6px 5px}[data-monster-role=option] label{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;width:100%}[data-monster-role=option] label>div{align-items:center;display:flex;flex-direction:row;justify-content:space-between;outline:none;width:100%}.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,
-	);
+.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} 
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

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

@@ -39,6 +39,7 @@ export {
 const autoUpdateCleanupMap = new WeakMap();
 const settlingFrameMap = new WeakMap();
 const floatingResizeObserverMap = new WeakMap();
+const floatingSyncCycleMap = new WeakMap();
 
 /**
  * @private
@@ -87,7 +88,14 @@ function syncFloatingPopover(
 	allowSettlingPass = true,
 ) {
 	const arrowElement = popperElement.querySelector("[data-monster-role=arrow]");
-	const floatingMiddleware = [...config.floatingMiddleware];
+	const syncCycleId = claimFloatingSyncCycle(popperElement);
+	const floatingMiddleware = buildFloatingMiddleware(
+		config.middleware,
+		config.placement,
+		config.detectOverflowOptions,
+		popperElement,
+		syncCycleId,
+	);
 
 	resetAdaptiveFloatingElementSize(popperElement);
 
@@ -98,6 +106,16 @@ function syncFloatingPopover(
 		floatingMiddleware.push(arrow({ element: arrowElement }));
 	}
 
+	if (!config.middlewareTokens.includes("size")) {
+		floatingMiddleware.push(
+			createAdaptiveSizeMiddleware(
+				config.detectOverflowOptions,
+				popperElement,
+				syncCycleId,
+			),
+		);
+	}
+
 	computePosition(
 		controlElement,
 		popperElement,
@@ -105,6 +123,10 @@ function syncFloatingPopover(
 			middleware: floatingMiddleware,
 		}),
 	).then(({ x, y, placement, middlewareData }) => {
+		if (!isActiveFloatingSyncCycle(popperElement, syncCycleId)) {
+			return;
+		}
+
 		Object.assign(popperElement.style, {
 			top: "0",
 			left: "0",
@@ -156,18 +178,6 @@ function normalizePopperConfig(options, controlElement, popperElement) {
 	);
 	config.middleware = normalizeMiddleware(config);
 	config.middlewareTokens = config.middleware.filter((line) => isString(line));
-	config.floatingMiddleware = buildFloatingMiddleware(
-		config.middleware,
-		config.placement,
-		config.detectOverflowOptions,
-		popperElement,
-	);
-
-	if (!config.middlewareTokens.includes("size")) {
-		config.floatingMiddleware.push(
-			createAdaptiveSizeMiddleware(config.detectOverflowOptions, popperElement),
-		);
-	}
 
 	return config;
 }
@@ -190,6 +200,7 @@ function buildFloatingMiddleware(
 	placement,
 	detectOverflowOptions,
 	popperElement,
+	syncCycleId = null,
 ) {
 	const result = [...middleware];
 
@@ -208,13 +219,15 @@ function buildFloatingMiddleware(
 		const kv = line.split(":");
 		const fn = kv.shift();
 
-		switch (fn) {
-			case "flip":
-				result[key] = flip(detectOverflowOptions);
-				break;
-			case "shift":
-				result[key] = shift(detectOverflowOptions);
-				break;
+			switch (fn) {
+				case "flip":
+					result[key] = flip(detectOverflowOptions);
+					break;
+				case "shift":
+					result[key] = shift(
+						normalizeShiftOptions(kv, detectOverflowOptions),
+					);
+					break;
 			case "autoPlacement":
 				let defaultAllowedPlacements = ["top", "bottom", "left", "right"];
 
@@ -248,6 +261,7 @@ function buildFloatingMiddleware(
 				result[key] = createAdaptiveSizeMiddleware(
 					detectOverflowOptions,
 					popperElement,
+					syncCycleId,
 				);
 				break;
 			case "offset":
@@ -264,7 +278,35 @@ function buildFloatingMiddleware(
 	return result.filter(Boolean);
 }
 
-function createAdaptiveSizeMiddleware(detectOverflowOptions, popperElement) {
+function normalizeShiftOptions(tokens, detectOverflowOptions) {
+	const options = Object.assign({}, detectOverflowOptions);
+	const normalizedTokens = tokens
+		.join(":")
+		.split(",")
+		.map((token) => token.trim())
+		.filter((token) => token.length > 0);
+
+	for (const token of normalizedTokens) {
+		switch (token) {
+			case "crossAxis":
+				options.crossAxis = true;
+				break;
+			case "mainAxis=false":
+				options.mainAxis = false;
+				break;
+			default:
+				throw new Error(`Unknown shift option: ${token}`);
+		}
+	}
+
+	return options;
+}
+
+function createAdaptiveSizeMiddleware(
+	detectOverflowOptions,
+	popperElement,
+	syncCycleId = null,
+) {
 	return size(
 		Object.assign({}, detectOverflowOptions, {
 			apply({ availableWidth, availableHeight, elements }) {
@@ -272,6 +314,12 @@ function createAdaptiveSizeMiddleware(detectOverflowOptions, popperElement) {
 				if (!(floatingElement instanceof HTMLElement)) {
 					return;
 				}
+				if (
+					syncCycleId !== null &&
+					!isActiveFloatingSyncCycle(floatingElement, syncCycleId)
+				) {
+					return;
+				}
 
 				applyAdaptiveFloatingElementSize(floatingElement, {
 					availableWidth,
@@ -484,7 +532,10 @@ function resolveNestedScrollContainerHeight(
 	nestedScrollableElement,
 	contentMaxHeight,
 ) {
-	const declaredHeight = readDeclaredDimension(nestedScrollableElement, "height");
+	const declaredHeight = readDeclaredDimension(
+		nestedScrollableElement,
+		"height",
+	);
 	const declaredMaxHeight = readDeclaredDimension(
 		nestedScrollableElement,
 		"maxHeight",
@@ -850,6 +901,16 @@ function scheduleSettlingPass(controlElement, popperElement, config) {
 	settlingFrameMap.set(popperElement, frameId);
 }
 
+function claimFloatingSyncCycle(popperElement) {
+	const nextCycleId = (floatingSyncCycleMap.get(popperElement) || 0) + 1;
+	floatingSyncCycleMap.set(popperElement, nextCycleId);
+	return nextCycleId;
+}
+
+function isActiveFloatingSyncCycle(popperElement, syncCycleId) {
+	return floatingSyncCycleMap.get(popperElement) === syncCycleId;
+}
+
 function cancelSettlingPass(popperElement) {
 	const frameId = settlingFrameMap.get(popperElement);
 	if (typeof frameId === "number") {

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

@@ -33,7 +33,13 @@ let html2 = `
     </div>
 `;
 
-let Select, fetchReference;
+let Select,
+    getDefaultSelectPopperPositionProfile,
+    resolveSelectListDimension,
+    resolveSelectPopperWidthConstraints,
+    resolveSelectVisibleRect,
+    resolveSelectViewportMetrics,
+    fetchReference;
 
 describe('Select', function () {
 
@@ -50,6 +56,11 @@ describe('Select', function () {
 
             import("../../../../source/components/form/select.mjs").then((m) => {
                 Select = m['Select'];
+                getDefaultSelectPopperPositionProfile = m['getDefaultSelectPopperPositionProfile'];
+                resolveSelectListDimension = m['resolveSelectListDimension'];
+                resolveSelectPopperWidthConstraints = m['resolveSelectPopperWidthConstraints'];
+                resolveSelectVisibleRect = m['resolveSelectVisibleRect'];
+                resolveSelectViewportMetrics = m['resolveSelectViewportMetrics'];
                 done()
             }).catch(e => done(e))
 
@@ -185,6 +196,189 @@ describe('Select', function () {
 
     });
 
+    describe('Popper sizing', function () {
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+        });
+
+        it('should allow the popper to become wider than a narrow control', function (done) {
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+
+            select.setOption('options', [
+                {label: 'Alpha', value: 'alpha'},
+                {label: 'Beta', value: 'beta'}
+            ]);
+
+            mocks.appendChild(select);
+
+            const shadowRoot = select.shadowRoot;
+            const control = shadowRoot.querySelector('[data-monster-role=control]');
+            const popper = shadowRoot.querySelector('[data-monster-role=popper]');
+
+            control.getBoundingClientRect = () => ({
+                width: 120,
+                height: 36,
+                top: 100,
+                left: 40,
+                right: 160,
+                bottom: 136,
+                x: 40,
+                y: 100
+            });
+
+            setTimeout(() => {
+                try {
+                    shadowRoot.querySelector('[data-monster-role=container]').click();
+                    setTimeout(() => {
+                        try {
+                            expect(popper.style.minWidth).to.equal('');
+                            expect(popper.dataset.monsterPreferredWidth).to.equal('240');
+                            done();
+                        } catch (e) {
+                            done(e);
+                        }
+                    }, 80);
+                } catch (e) {
+                    done(e);
+                }
+            }, 20);
+        });
+
+        it('should keep the option list height tight for short lists', function () {
+            const result = resolveSelectListDimension({
+                visibleOptionHeights: [28, 28],
+                maxVisibleOptions: 20,
+                availableHeight: 500,
+                padding: 0,
+                margin: 0
+            });
+
+            expect(result.desiredHeight).to.equal(56);
+            expect(result.maxHeight).to.equal(500);
+            expect(result.overflowY).to.equal('hidden');
+        });
+
+        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');
+
+            select.setOption('options', Array.from({length: 24}, (_, index) => ({
+                label: `Option ${index + 1}`,
+                value: `${index + 1}`
+            })));
+
+            mocks.appendChild(select);
+
+            const shadowRoot = select.shadowRoot;
+            const control = shadowRoot.querySelector('[data-monster-role=control]');
+            const popper = shadowRoot.querySelector('[data-monster-role=popper]');
+            const content = shadowRoot.querySelector('[part=content]');
+            const options = shadowRoot.querySelector('[data-monster-role=options]');
+
+            control.getBoundingClientRect = () => ({
+                width: 200,
+                height: 36,
+                top: 100,
+                left: 40,
+                right: 240,
+                bottom: 136,
+                x: 40,
+                y: 100
+            });
+
+            setTimeout(() => {
+                try {
+                    shadowRoot.querySelector('[data-monster-role=container]').click();
+                    setTimeout(() => {
+                        try {
+                            content.style.maxHeight = '20px';
+                            options.style.height = '20px';
+                            options.style.maxHeight = '20px';
+
+                            select.calcAndSetOptionsDimension();
+
+                            expect(parseFloat(content.style.maxHeight)).to.be.greaterThan(20);
+                            expect(content.style.maxHeight).to.equal(options.style.maxHeight);
+                            expect(parseFloat(popper.style.maxHeight)).to.be.at.least(parseFloat(content.style.maxHeight));
+                            done();
+                        } catch (e) {
+                            done(e);
+                        }
+                    }, 80);
+                } catch (e) {
+                    done(e);
+                }
+            }, 20);
+        });
+
+        it('should clamp preferred width to the visible viewport width', function () {
+            const result = resolveSelectPopperWidthConstraints({
+                controlWidth: 120,
+                availableWidth: 176
+            });
+
+            expect(result.preferredWidth).to.equal(240);
+            expect(result.maxWidth).to.equal(176);
+        });
+
+        it('should keep start placement while enabling cross-axis shifting', function () {
+            const result = getDefaultSelectPopperPositionProfile();
+
+            expect(result.placement).to.equal('bottom-start');
+            expect(result.middleware).to.deep.equal([
+                'flip',
+                'offset:4',
+                'shift:crossAxis',
+                'size'
+            ]);
+        });
+
+        it('should prefer the larger live viewport metrics after a resize', function () {
+            const result = resolveSelectViewportMetrics({
+                layoutWidth: 1400,
+                layoutHeight: 900,
+                visualWidth: 1024,
+                visualHeight: 700,
+                offsetLeft: 20,
+                offsetTop: 30,
+                padding: 12
+            });
+
+            expect(result.width).to.equal(1400);
+            expect(result.height).to.equal(900);
+            expect(result.left).to.equal(20);
+            expect(result.top).to.equal(30);
+            expect(result.padding).to.equal(12);
+        });
+
+        it('should intersect viewport and split container for the visible rect', function () {
+            const result = resolveSelectVisibleRect({
+                viewportMetrics: {
+                    width: 1400,
+                    height: 900,
+                    left: 0,
+                    top: 0,
+                    padding: 12
+                },
+                boundaryRect: {
+                    left: 100,
+                    top: 80,
+                    right: 620,
+                    bottom: 700
+                }
+            });
+
+            expect(result.left).to.equal(100);
+            expect(result.top).to.equal(80);
+            expect(result.right).to.equal(620);
+            expect(result.bottom).to.equal(700);
+            expect(result.width).to.equal(520);
+            expect(result.height).to.equal(620);
+        });
+    });
+
     describe('Remote filter pagination', function () {
         let requestCount = 0;