@mono-lit/helper 0.0.8 → 0.0.10

package/dist/ui/select.js

@@ -1,2102 +1,10 @@
-import { t as getFieldValue } from "../field-path-BabiMrrA.js";
-import { a as errorTitle, f as MonoSourceSearch, i as errorText, n as describeError, x as searchRowPredicate, y as resolveSearchFields } from "../normalize-error-D93O4q8g.js";
-import { n as unwrapReactive } from "../reactive-Dtd-esHO.js";
-import { d as buildSizeStyle, f as toCssSize, g as monoHostChildNodes } from "../mono-ui-kvLVIf1V.js";
+import { g as monoHostChildNodes } from "../mono-ui-kvLVIf1V.js";
 import { t as customElement } from "../mono-element-CKcT0rwv.js";
-import { a as defineHybridPropAliases, n as arrayHasChanged, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
-import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
-import { s as placeSlotNode, t as LateSlotWatcher } from "../light-slots-B5Ck0t_E.js";
-import { a as rateLimitHasChanged } from "../rate-limit-e9Jlpl5l.js";
-import { t as PopupPortalController } from "../popup-portal-CINuVjNY.js";
-import { c as spinnerIcon, s as refreshIcon } from "../field-icons-t8rXRCKs.js";
-import { t as MonoFormControlCore } from "../form-control-core-CRZPZ1ru.js";
-import { t as FieldTooltipController } from "../field-tooltip-Csk4s2ve.js";
-import { t as FieldValidationController } from "../field-validation-CFmUmuDx.js";
-import { t as DataSourceController } from "../data-source-controller-Dx6IQ2CN.js";
-import { LitElement, html, isServer, nothing } from "lit";
-import { property, query, state } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { styleMap } from "lit/directives/style-map.js";
+import { t as __decorate } from "../decorate-DbYFpi8R.js";
+import { s as placeSlotNode } from "../light-slots-B5Ck0t_E.js";
+import { n as MonoSelectCore, t as validateSelectProps } from "../select-utils-BgArYHk8.js";
+import { LitElement, html } from "lit";
 
-//#region src/components/select/select-core.ts
-/**
-* `MonoSelectCore` — render-mode-agnostic logic for `mono-select` (props, hybrid
-* aliases, value/model sync, DataSource paging, search, grouping, keyboard nav,
-* the popup controller, and the full `render()`). SSR-safe: every `document` /
-* `window` / focus access is `isServer`-guarded.
-*
-* Each build supplies `createRenderRoot()` + `static styles`, the slot strategy
-* (light captures children into `data-mono-slot` placeholders; shadow uses native
-* `<slot>` + a `firstUpdated` scan), and the `_slotOutlet` / `renderIcon` hooks.
-* The shared `_has*SlotState` `@state` fields back both strategies.
-*/
-const MonoSelectCore = (superClass) => {
-	class MonoSelectCoreClass extends MonoFormControlCore(superClass) {
-		constructor(...args) {
-			super(...args);
-			this.size = "md";
-			this.color = "primary";
-			this.variant = "outlined";
-			this.labelPosition = "top";
-			this.validationPosition = "bottom";
-			this.modelValue = null;
-			this.value = null;
-			this.name = "";
-			this.label = "";
-			this.placeholder = "Select option";
-			this.helperText = "";
-			this.tooltip = null;
-			this._tooltip = new FieldTooltipController(this, () => this.tooltip);
-			this._validation = new FieldValidationController(this, () => ({
-				position: this.validationPosition,
-				...this._validationNotice ?? {
-					state: void 0,
-					text: void 0
-				},
-				suppressed: this._open
-			}), () => this.renderRoot?.querySelector?.("[mono-select] > [mono-trigger]"));
-			this.validationState = "default";
-			this.validationMessage = "";
-			this.errorMessage = "";
-			this.successMessage = "";
-			this.disabled = false;
-			this.readonly = false;
-			this.required = false;
-			this.clearable = false;
-			this.items = [];
-			this.dataSource = null;
-			this.immediate = true;
-			this.pageSize = 10;
-			this.dropdownHeight = "";
-			this.dropdownMaxHeight = "";
-			this.flip = true;
-			this.shift = true;
-			this.keyValue = "";
-			this.displayValue = "";
-			this.displayGroup = [];
-			this.groupKey = "key";
-			this.groupItems = "items";
-			this.group = false;
-			this.groupSticky = false;
-			this.searchable = false;
-			this.stayOpen = false;
-			this.searchValue = "";
-			this.searchOperation = "contains";
-			this.searchDebounce = 300;
-			this.searchPlaceholder = "";
-			this.loadingText = "Loading…";
-			this.retryLabel = "Retry";
-			this.loading = false;
-			this.loadingError = null;
-			this.cssClass = {};
-			this.cssClassName = "";
-			this._open = false;
-			this._query = "";
-			this._searchActive = false;
-			this._activeIndex = -1;
-			this._cursorPending = false;
-			this._sourceSearch = new MonoSourceSearch();
-			this._searchVersion = 0;
-			this._scrollAutoMaxHeight = "";
-			this._hasLabelSlotState = false;
-			this._hasHelperSlotState = false;
-			this._hasPrefixSlotState = false;
-			this._hasSuffixSlotState = false;
-			this._hasListSlotState = false;
-			this._popup = new PopupPortalController(this, {
-				getPanel: () => this.renderRoot.querySelector(".mono-select-dropdown"),
-				getAnchor: () => this.renderRoot.querySelector(".mono-select-trigger"),
-				getStyleScope: () => this.renderRoot.querySelector(".mono-select"),
-				isOpen: () => this._open,
-				matchWidth: () => !toCssSize(this.dropdown?.width),
-				offset: () => 6,
-				flip: () => this.flip,
-				shift: () => this.shift,
-				constrainSize: () => true
-			});
-			this._selectId = `mono-select-${Math.random().toString(36).slice(2)}`;
-			this._messageId = `${this._selectId}-message`;
-			this._listboxId = `${this._selectId}-listbox`;
-			this._lateListSlot = new LateSlotWatcher(this, "list", () => this._onLateListSlot());
-			this._docListenersBound = false;
-			this._itemsEpoch = 0;
-			this._handleDropdownScroll = (event) => {
-				if (this._loadMoreMode !== "scroll") return;
-				if (this._ds.loadingMore || this._ds.atLastPage) return;
-				const el = event.currentTarget;
-				if (!el) return;
-				if (el.scrollHeight - el.scrollTop - el.clientHeight <= 24) this._ds.loadMore();
-			};
-			this._appliedQuery = "";
-			this._appFailure = null;
-			this._retry = (event) => {
-				event.preventDefault();
-				event.stopPropagation();
-				const error = this._failure;
-				if (this.disabled || this._busy || !error) return;
-				const fromApp = !!this._appFailure;
-				dispatchMonoEvent(this, "retry", {
-					error,
-					source: fromApp ? "app" : "dataSource"
-				});
-				if (fromApp || !this.dataSource || !this._ds.error) return;
-				const clearSearch = !!this._appliedQuery && this._serverSearch();
-				this._ds.retry(clearSearch ? () => this._pushSearch("") : void 0);
-			};
-			this._handleDocumentClick = (event) => {
-				if (!this._open || this.stayOpen) return;
-				const path = event.composedPath();
-				if (path.includes(this) || this._popup.containsInPath(path)) return;
-				this._close();
-			};
-			this._handleDocumentFocusIn = (event) => {
-				if (!this._open || this.stayOpen) return;
-				const path = event.composedPath();
-				if (path.includes(this) || this._popup.containsInPath(path)) return;
-				this._close();
-			};
-			this._handleDocumentKeydown = (event) => {
-				if (!this._open) return;
-				if (event.key === "Escape") {
-					if (this._popup.inLayerAbove(event.composedPath())) return;
-					event.preventDefault();
-					this._close();
-					this._triggerEl?.focus();
-				}
-			};
-			this._publishedEntries = [];
-			this._onListSlotClick = (event) => {
-				if (this._inert) return;
-				const target = event.target;
-				const item = target ? this._entryFromNode(target)?.item : void 0;
-				if (!item || item.disabled) return;
-				this._selectItem(item, event);
-			};
-			defineHybridPropAliases(this, [
-				"labelPosition",
-				"validationPosition",
-				"modelValue",
-				"loadingText",
-				"loadingError",
-				"helperText",
-				"validationState",
-				"validationMessage",
-				"errorMessage",
-				"successMessage",
-				"ariaLabelText",
-				"cssClass",
-				"keyValue",
-				"displayValue",
-				"displayGroup",
-				"groupKey",
-				"groupItems",
-				"groupSticky",
-				"searchValue",
-				"searchOperation",
-				"searchDebounce",
-				"searchPlaceholder",
-				"dataSource",
-				"loadMore",
-				"pageSize",
-				"dropdownHeight",
-				"dropdownMaxHeight",
-				"minWidth",
-				"maxWidth",
-				"minHeight",
-				"maxHeight",
-				"stayOpen"
-			]);
-			/**
-			* Makes these Vue usages work:
-			*
-			* <mono-select :cssClass="{}" />
-			* <mono-select :css-class="{}" />
-			* <mono-select :cssclass="{}" />
-			*/
-			Object.defineProperty(this, "css-class", {
-				get: () => this.cssClass,
-				set: (value) => {
-					this._setCssClass(value);
-				},
-				configurable: true,
-				enumerable: false
-			});
-			Object.defineProperty(this, "cssclass", {
-				get: () => this.cssClass,
-				set: (value) => {
-					this._setCssClass(value);
-				},
-				configurable: true,
-				enumerable: false
-			});
-			Object.defineProperty(this, "ariaLabel", {
-				get: () => this.ariaLabelText,
-				set: (value) => {
-					this.ariaLabelText = value == null ? void 0 : String(value);
-				},
-				configurable: true,
-				enumerable: false
-			});
-			Object.defineProperty(this, "aria-label", {
-				get: () => this.ariaLabelText,
-				set: (value) => {
-					this.ariaLabelText = value == null ? void 0 : String(value);
-				},
-				configurable: true,
-				enumerable: false
-			});
-			Object.defineProperty(this, "arialabel", {
-				get: () => this.ariaLabelText,
-				set: (value) => {
-					this.ariaLabelText = value == null ? void 0 : String(value);
-				},
-				configurable: true,
-				enumerable: false
-			});
-			this._ds = new DataSourceController(this, {
-				getDataSource: () => this.dataSource,
-				getItems: () => this.items,
-				getImmediate: () => this.immediate,
-				getLoadMoreMode: () => this._loadMoreMode,
-				getPageSize: () => this._pageSize
-			});
-		}
-		static {
-			this.monoPendingAuto = "data";
-		}
-		_monoPendingReady() {
-			return !this.dataSource || !this._ds.loading;
-		}
-		static get observedAttributes() {
-			return [
-				...super.observedAttributes ?? [],
-				"modelvalue",
-				"loadingtext",
-				"loadingerror",
-				"model-value",
-				"helpertext",
-				"validationstate",
-				"validationmessage",
-				"errormessage",
-				"successmessage",
-				"arialabeltext",
-				"arialabel",
-				"css-class",
-				"cssclass",
-				"keyvalue",
-				"displayvalue",
-				"display-value",
-				"stayopen"
-			];
-		}
-		attributeChangedCallback(name, oldValue, newValue) {
-			super.attributeChangedCallback(name, oldValue, newValue);
-			if (oldValue === newValue) return;
-			if (name === "modelvalue" || name === "model-value") {
-				this.modelValue = this._toSelectValue(newValue);
-				return;
-			}
-			if (name === "loadingtext") {
-				this.loadingText = newValue ?? "Loading…";
-				return;
-			}
-			if (name === "loadingerror") {
-				this.loadingError = newValue;
-				return;
-			}
-			if (name === "helpertext") {
-				this.helperText = newValue ?? "";
-				return;
-			}
-			if (name === "validationstate") {
-				this.validationState = newValue ?? "default";
-				return;
-			}
-			if (name === "validationmessage") {
-				this.validationMessage = newValue ?? "";
-				return;
-			}
-			if (name === "errormessage") {
-				this.errorMessage = newValue ?? "";
-				return;
-			}
-			if (name === "successmessage") {
-				this.successMessage = newValue ?? "";
-				return;
-			}
-			if (name === "arialabeltext" || name === "arialabel") {
-				this.ariaLabelText = newValue ?? void 0;
-				return;
-			}
-			if (name === "keyvalue") {
-				this.keyValue = newValue ?? "";
-				return;
-			}
-			if (name === "displayvalue" || name === "display-value") {
-				if (typeof this.displayValue === "function") return;
-				const next = newValue ?? "";
-				if (this._looksLikeSerializedFunction(next)) return;
-				this.displayValue = next;
-				return;
-			}
-			if (name === "stayopen") {
-				this.stayOpen = this._toBoolean(newValue);
-				return;
-			}
-			if (name === "css-class" || name === "cssclass") this._setCssClass(newValue);
-		}
-		/** The validation message and its state — the same precedence the message row uses. */
-		get _validationNotice() {
-			if (this.validationMessage) return {
-				state: this._resolvedValidationState,
-				text: this.validationMessage
-			};
-			if (this.errorMessage) return {
-				state: "invalid",
-				text: this.errorMessage
-			};
-			if (this.successMessage) return {
-				state: "valid",
-				text: this.successMessage
-			};
-			return null;
-		}
-		/** The message that moved to the icon / float bubble, kept for assistive tech only. */
-		_renderMovedMessage() {
-			const notice = this._validationNotice;
-			return html`<div
-      class=${`${this._cls("mono-select-message", "message")} ${notice.state}`}
-      mono-message=${notice.state}
-      mono-sr-only
-      role=${notice.state === "invalid" ? "alert" : nothing}
-    >${notice.text}</div>`;
-		}
-		/**
-		* The scroll body lives inside the dropdown panel, which the portal
-		* controller relocates into a `<body>` portal while open — query it through
-		* `panelRoot` (the portal when adopted, else the host render root).
-		*/
-		get _dropdownBodyEl() {
-			return this._popup.panelRoot.querySelector(".mono-select-dropdown-body");
-		}
-		/**
-		* Where the consumer's list wrapper is parked — through the SAME portal-aware root as the panel,
-		* since while the dropdown is open it lives in a body portal a host query would miss.
-		*/
-		get _listSlotTarget() {
-			return this._popup.panelRoot.querySelector("[data-mono-slot=\"list\"]");
-		}
-		/** A late wrapper arrived. Overridden per build — one adopts it, the other rescans. */
-		_onLateListSlot() {}
-		connectedCallback() {
-			super.connectedCallback();
-			this._lateListSlot.start();
-			if (isServer) return;
-			if (this._open) this._bindDocumentListeners();
-		}
-		/**
-		* Outside-dismiss listeners, bound on OPEN rather than on connect.
-		*
-		* All three handlers begin with `if (!this._open) return`, so binding them only
-		* while open is behaviour-preserving — the cost they carried was pure event
-		* DISPATCH. Every mounted select used to hold three `document` listeners, two of
-		* them capture-phase, so a grid with one select per row put 600 handlers (400 in
-		* capture) in the path of every click, focus move and keystroke on the page.
-		* Measured on the 200-row fixture: 600 listeners before, 0 at rest after.
-		*
-		* Same change, and the same reasoning, as the popup viewport listeners in
-		* `popup-portal.ts` — which this file was explicitly the remaining example of.
-		*/
-		_bindDocumentListeners() {
-			if (this._docListenersBound) return;
-			this._docListenersBound = true;
-			document.addEventListener("click", this._handleDocumentClick, true);
-			document.addEventListener("focusin", this._handleDocumentFocusIn, true);
-			document.addEventListener("keydown", this._handleDocumentKeydown);
-		}
-		_unbindDocumentListeners() {
-			if (!this._docListenersBound) return;
-			this._docListenersBound = false;
-			document.removeEventListener("click", this._handleDocumentClick, true);
-			document.removeEventListener("focusin", this._handleDocumentFocusIn, true);
-			document.removeEventListener("keydown", this._handleDocumentKeydown);
-		}
-		disconnectedCallback() {
-			if (this._searchTimer) {
-				clearTimeout(this._searchTimer);
-				this._searchTimer = void 0;
-			}
-			this._sourceSearch.clear(this.dataSource);
-			this._lateListSlot.stop();
-			this._stopWatchingListChrome();
-			if (!isServer) this._unbindDocumentListeners();
-			super.disconnectedCallback();
-		}
-		willUpdate(changed) {
-			this._itemsEpoch++;
-			for (const key of [
-				"disabled",
-				"loading",
-				"readonly",
-				"required",
-				"clearable",
-				"immediate",
-				"group",
-				"groupSticky",
-				"searchable",
-				"stayOpen"
-			]) {
-				const v = this[key];
-				if (typeof v !== "boolean") this[key] = this._toBoolean(v);
-			}
-			if (changed.has("loadingError")) {
-				const v = this.loadingError;
-				this._appFailure = v == null || v === false || v === "" ? null : describeError(v === true ? void 0 : v);
-			}
-			if (this._open && this._dsInert) {
-				this._open = false;
-				this._dropQuery();
-			}
-			if (changed.has("modelValue") && !this._isSameValue(this.value, this.modelValue)) this.value = unwrapReactive(this.modelValue);
-			if (changed.has("value") && !this._isSameValue(this.modelValue, this.value)) this.modelValue = unwrapReactive(this.value);
-			if (this.group && (changed.has("dataSource") || changed.has("displayGroup") || changed.has("group"))) {
-				const fields = this._groupSortFields();
-				if (fields.length) this.dataSource?.sort?.(fields);
-			}
-			if (changed.has("dataSource")) {
-				this._ds.bind(this.dataSource);
-				this._sourceSearch.bind(this.dataSource);
-			}
-			if (changed.has("searchValue") || changed.has("searchOperation") || changed.has("displayValue") || changed.has("keyValue") || changed.has("dataSource") || changed.has("items")) this._searchVersion++;
-			if (changed.has("immediate")) this._ds.maybeImmediateLoad();
-			if (changed.has("loadMore")) this._ds.onLoadMoreModeChange();
-			if (changed.has("items") || changed.has("loadMore") || changed.has("pageSize")) this._ds.resetVisible();
-			if (changed.has("_open")) {
-				this._cursorPending = this._open;
-				if (!this._open) this._activeIndex = -1;
-			}
-			if (this._cursorPending && this._open && this._filteredItems.length) {
-				this._activeIndex = this._initialActiveIndex();
-				this._cursorPending = false;
-			}
-		}
-		updated(changed) {
-			super.updated(changed);
-			this._syncListEntries();
-			if (isServer) return;
-			if (changed.has("_open") && this._open && this.searchable) this._searchFieldEl?.focus();
-			if (changed.has("_activeIndex") && this._open && this._activeIndex >= 0) (this._popup.panelRoot?.querySelectorAll?.(".mono-select-item")?.[this._activeIndex])?.scrollIntoView?.({ block: "nearest" });
-			this._updateScrollAutoHeight();
-			if (this._open) this._bindDocumentListeners();
-			else this._unbindDocumentListeners();
-		}
-		/**
-		* Scroll-mode ergonomics: a short page (e.g. 5 items) won't overflow the
-		* default dropdown height, so there's nothing to scroll and the next page
-		* could never be triggered. Rather than eagerly fetching another page on
-		* open, cap the list height to the loaded rows minus a sliver — enough to
-		* show a scrollbar so the user scrolls to load more. No height is forced
-		* when the consumer set `dropdown-height`/`dropdown-max-height`, when the
-		* last page is reached, or when the rows already overflow.
-		*/
-		_updateScrollAutoHeight() {
-			const userSetHeight = this._toCssLength(this.dropdownHeight) != null || this._toCssLength(this.dropdownMaxHeight) != null || toCssSize(this.dropdown?.height) != null || toCssSize(this.dropdown?.maxHeight) != null;
-			if (!(this._loadMoreMode === "scroll" && this._open && !this._ds.atLastPage && !userSetHeight && this._visibleItems.length > 0)) {
-				this._setScrollAutoMaxHeight("");
-				return;
-			}
-			const el = this._dropdownBodyEl;
-			const rowH = (el?.querySelector(".mono-select-item"))?.offsetHeight ?? 0;
-			if (!el || !rowH) return;
-			const CAP_ROWS = 7;
-			const rows = this._visibleItems.length;
-			let visible = Math.min(rows, CAP_ROWS);
-			if (rows <= CAP_ROWS) visible -= .5;
-			this._setScrollAutoMaxHeight(`${Math.round(visible * rowH)}px`);
-		}
-		_setScrollAutoMaxHeight(value) {
-			if (value === this._scrollAutoMaxHeight) return;
-			queueMicrotask(() => {
-				this._scrollAutoMaxHeight = value;
-			});
-		}
-		_setCssClass(value) {
-			if (value == null) {
-				this.cssClass = {};
-				this.cssClassName = "";
-				return;
-			}
-			if (typeof value === "object") {
-				this.cssClass = value;
-				return;
-			}
-			if (typeof value === "string") {
-				const trimmed = value.trim();
-				if (!trimmed) {
-					this.cssClass = {};
-					this.cssClassName = "";
-					return;
-				}
-				/**
-				* Optional HTML object support:
-				* <mono-select css-class='{"root":"...", "trigger":"..."}'>
-				*/
-				if (trimmed.startsWith("{") && trimmed.endsWith("}")) try {
-					this.cssClass = JSON.parse(trimmed);
-					return;
-				} catch {}
-				this.cssClassName = trimmed;
-			}
-		}
-		_toSelectValue(value) {
-			if (value === void 0 || value === null) return null;
-			if (typeof value !== "string") return value;
-			const trimmed = value.trim();
-			if (!trimmed) return null;
-			if (/^-?\d+(?:\.\d+)?$/.test(trimmed) || trimmed === "true" || trimmed === "false" || trimmed === "null" || trimmed[0] === "{" && trimmed[trimmed.length - 1] === "}" || trimmed[0] === "[" && trimmed[trimmed.length - 1] === "]" || trimmed[0] === "\"" && trimmed[trimmed.length - 1] === "\"") try {
-				return JSON.parse(trimmed);
-			} catch {}
-			return trimmed;
-		}
-		/**
-		* Wrap bare primitives so every row is an object, and pass objects through.
-		*
-		* The `.map()` used to be unconditional, which made this an ALLOCATION on the
-		* overwhelmingly common path (an array of objects, where the map is an identity
-		* function). It is read through `_normalizedItems` / `_visibleItems` / `_leafItems`
-		* several times per render, so at one select per table row it was the single
-		* hottest allocation in the component. The scan below is O(n) reads with no
-		* allocation, and returns the SAME array when nothing needs wrapping.
-		*
-		* Returning the input array is safe: every caller only reads
-		* (`find`/`filter`/`map`/`findIndex`/`length`), and `resolveSearchFields` takes its
-		* rows as `readonly unknown[]`. It also makes item identity STABLE across calls for
-		* primitive lists, which is the safe direction — see the note on
-		* `_initialActiveIndex`, which explains why it deliberately does not rely on that
-		* identity holding.
-		*/
-		_normalizeItems(items) {
-			if (Array.isArray(items)) {
-				let needsWrap = false;
-				for (const item of items) if (typeof item !== "object" || item === null) {
-					needsWrap = true;
-					break;
-				}
-				if (!needsWrap) return items;
-				return items.map((item) => {
-					if (typeof item === "object" && item !== null) return item;
-					return { value: item };
-				});
-			}
-			if (typeof items === "string") try {
-				const parsed = JSON.parse(items);
-				return this._normalizeItems(parsed);
-			} catch {
-				return [];
-			}
-			return [];
-		}
-		/**
-		* Read `field` off an option row — PATH-AWARE, like every other field name in
-		* the library.
-		*
-		* A plain `field in item` was the old test, and it silently produced
-		* `undefined` for any nested accessor: an option list grouped by a navigation
-		* property (`$apply=groupby((PostBudget/Nama))` returns
-		* `{ PostBudget: { Nama: … } }`) has no top-level `"PostBudget.Nama"` key, so
-		* every option resolved to no value at all — selectable in appearance, inert in
-		* practice. `searchExpr`, table columns and summaries have always accepted
-		* these paths; a select's `key-value` / `display-value` now do too.
-		*
-		* The LITERAL key is still tried first, so a row that genuinely carries a
-		* dotted PROPERTY NAME keeps resolving exactly as it did — only a key that is
-		* absent falls through to being read as a path, which previously could only
-		* have yielded `undefined` anyway. Nothing that worked before changes.
-		*/
-		_readField(item, field) {
-			if (field in item) return item[field];
-			return getFieldValue(item, field);
-		}
-		_resolveItemValue(item) {
-			if (item == null) return item;
-			if (typeof item !== "object") return item;
-			if (this.keyValue) return this._readField(item, this.keyValue);
-			return item;
-		}
-		_resolveItemDisplay(item) {
-			if (item == null) return "";
-			if (typeof this.displayValue === "function") return String(this.displayValue(item));
-			if (typeof this.displayValue === "string" && this.displayValue) {
-				if (typeof item !== "object") return "";
-				const value = this._readField(item, this.displayValue);
-				return value == null ? "" : String(value);
-			}
-			if (typeof item === "object" && "label" in item) {
-				const label = item.label;
-				return label == null ? "" : String(label);
-			}
-			if (typeof item === "object" && "value" in item) {
-				const value = item.value;
-				return value == null ? "" : String(value);
-			}
-			return String(item);
-		}
-		_looksLikeSerializedFunction(value) {
-			const trimmed = value.trim();
-			if (!trimmed) return false;
-			return /^(?:async\s+)?(?:function\b|\([^)]*\)\s*=>|[A-Za-z_$][\w$]*\s*=>)/.test(trimmed);
-		}
-		/**
-		* Value equality. With no `key-value` the whole item IS the value, so this is
-		* identity — with one correction that is load-bearing under Vue.
-		*
-		* The model round-trips through the consumer's `ref`, which hands the item back
-		* wrapped in a **reactive Proxy**; `items` normally stays raw, so `proxy === row`
-		* is false and the selected row stops resolving (blank field, no highlight).
-		* Comparing the raw targets restores it. Still identity, not deep equality:
-		* two distinct rows with equal contents remain different values.
-		*/
-		_isSameValue(a, b) {
-			if (a === b) return true;
-			if (a == null || b == null) return false;
-			const rawA = unwrapReactive(a);
-			const rawB = unwrapReactive(b);
-			if (rawA === rawB) return true;
-			if (typeof rawA !== "object" || typeof rawB !== "object") return false;
-			return false;
-		}
-		_cls(base, key) {
-			const extra = this.cssClass?.[key];
-			return extra ? `${base} ${extra}` : base;
-		}
-		_toCssLength(value) {
-			if (value == null || value === "") return void 0;
-			if (typeof value === "number") return `${value}px`;
-			const trimmed = String(value).trim();
-			if (!trimmed) return void 0;
-			return /^-?\d+(?:\.\d+)?$/.test(trimmed) ? `${trimmed}px` : trimmed;
-		}
-		/**
-		* The WIDTH half of `dropdown`, on the panel.
-		*
-		* Split from the heights below because this component's popup is two elements: the panel owns
-		* the box and the border, its body does the scrolling. That split is also why select needs no
-		* `--_…-panel-max-h` custom property the way tag-input does — the popup controller's own cap
-		* (`--mono-popup-avail-h`) lives on the panel and the author's on the body, so the two writers
-		* never meet on one declaration.
-		*
-		* The panel is positioned `left: 0; right: 0` against the field, and a width on top of that is
-		* the over-constrained case, which CSS resolves by dropping `right` — so the panel keeps its
-		* left edge and takes this size.
-		*/
-		get _dropdownPanelStyle() {
-			const style = {};
-			const panel = this.dropdown;
-			const width = toCssSize(panel?.width);
-			if (width) style.width = width;
-			const minWidth = toCssSize(panel?.minWidth);
-			if (minWidth) style["min-width"] = minWidth;
-			const maxWidth = toCssSize(panel?.maxWidth);
-			if (maxWidth) style["max-width"] = maxWidth;
-			return style;
-		}
-		/** The HEIGHT half of `dropdown`, on the scrolling body — see `_dropdownPanelStyle`. */
-		get _dropdownBodyStyle() {
-			const style = {};
-			const panel = this.dropdown;
-			const minHeight = toCssSize(panel?.minHeight);
-			if (minHeight) style.minHeight = minHeight;
-			const height = toCssSize(panel?.height) ?? this._toCssLength(this.dropdownHeight);
-			if (height) style.height = height;
-			const maxHeight = toCssSize(panel?.maxHeight) ?? this._toCssLength(this.dropdownMaxHeight);
-			if (maxHeight) style.maxHeight = maxHeight;
-			else if (height) style.maxHeight = height;
-			else if (this._scrollAutoMaxHeight) style.maxHeight = this._scrollAutoMaxHeight;
-			return style;
-		}
-		get _normalizedItems() {
-			if (this._normalizedMemo?.epoch !== this._itemsEpoch) this._normalizedMemo = {
-				epoch: this._itemsEpoch,
-				items: this._normalizeItems(this._ds.sourceItems)
-			};
-			return this._normalizedMemo.items;
-		}
-		/** Sanitised chunk size for array-mode paging (>= 1). */
-		get _pageSize() {
-			const n = Math.floor(Number(this.pageSize));
-			return Number.isFinite(n) && n > 0 ? n : 10;
-		}
-		/**
-		* The effective load-more mode. Off when unset/false; otherwise 'button' only
-		* for the explicit `load-more="button"`, and 'scroll' for everything else that
-		* enables it (bare attribute, empty string, `true`, or `"scroll"`). Scroll is
-		* the default so enabling load-more "just works" without picking a mode.
-		*/
-		get _loadMoreMode() {
-			const v = this.loadMore;
-			if (v === void 0 || v === null || v === false) return void 0;
-			return v === "button" ? "button" : "scroll";
-		}
-		/**
-		* The rows to actually render — the controller's visible slice, normalized.
-		* (Array load-more reveals a chunk; DataSource mode accumulates pages.)
-		*/
-		get _visibleItems() {
-			if (this._visibleMemo?.epoch !== this._itemsEpoch) this._visibleMemo = {
-				epoch: this._itemsEpoch,
-				items: this._normalizeItems(this._ds.visibleItems)
-			};
-			return this._visibleMemo.items;
-		}
-		get _selectedItem() {
-			return this._leafItems.find((item) => this._isSameValue(this._resolveItemValue(item), this.value));
-		}
-		/** Grouping is active when at least one display-group accessor is given. */
-		get _grouped() {
-			return Array.isArray(this.displayGroup) && this.displayGroup.length > 0;
-		}
-		/** A node is a group when its `groupItems` field holds an array. */
-		_isGroupNode(x) {
-			return !!x && typeof x === "object" && Array.isArray(x[this.groupItems]);
-		}
-		/** Descend `groupItems[0]` to the first leaf row — the group's representative. */
-		_firstLeaf(node) {
-			let cur = node;
-			let guard = 0;
-			while (this._isGroupNode(cur) && guard++ < 50) cur = cur[this.groupItems]?.[0];
-			return cur ?? void 0;
-		}
-		/** Resolve a group header's label from `displayGroup[level]` over a leaf row. */
-		_resolveGroupLabel(node, level) {
-			const accessor = this.displayGroup[level];
-			const leaf = this._firstLeaf(node);
-			if (typeof accessor === "function") return String(accessor(leaf ?? {}) ?? "");
-			if (typeof accessor === "string" && leaf && accessor in leaf) return String(leaf[accessor] ?? "");
-			const key = node[this.groupKey];
-			return key == null ? "" : String(key);
-		}
-		/** The string `display-group` entries — usable as server group/sort fields. */
-		_groupSortFields() {
-			return (this.displayGroup ?? []).filter((a) => typeof a === "string");
-		}
-		/** A `display-group` level's key for a row (string → field, function → call). */
-		_groupKeyOf(row, level) {
-			const accessor = this.displayGroup[level];
-			if (typeof accessor === "function") return accessor(row);
-			if (typeof accessor === "string") return row[accessor];
-		}
-		/**
-		* `group` mode: bucket flat rows into the nested `{ [groupKey], [groupItems] }`
-		* shape client-side, by `display-group` level. Buckets keep first-appearance
-		* order, so each group is contiguous and grows in place as more pages load.
-		*/
-		_buildClientTree(rows) {
-			const build = (items, level) => {
-				if (level >= this.displayGroup.length) return items;
-				const buckets = /* @__PURE__ */ new Map();
-				for (const row of items) {
-					const key = this._groupKeyOf(row, level);
-					const ks = String(key);
-					let bucket = buckets.get(ks);
-					if (!bucket) buckets.set(ks, bucket = {
-						key,
-						rows: []
-					});
-					bucket.rows.push(row);
-				}
-				return [...buckets.values()].map((b) => ({
-					[this.groupKey]: b.key,
-					[this.groupItems]: build(b.rows, level + 1)
-				}));
-			};
-			return build(rows, 0);
-		}
-		/** The nested group nodes to render — built client-side in `group` mode. */
-		_groupNodes() {
-			if (this.group) {
-				const leaves = this._visibleItems.filter((it) => this._searchMatches(it));
-				return this._buildClientTree(leaves);
-			}
-			return this._ds.visibleItems ?? [];
-		}
-		/** Every leaf row — for value/display lookup. */
-		get _leafItems() {
-			if (this._leafMemo?.epoch === this._itemsEpoch) return this._leafMemo.items;
-			const items = this._computeLeafItems();
-			this._leafMemo = {
-				epoch: this._itemsEpoch,
-				items
-			};
-			return items;
-		}
-		_computeLeafItems() {
-			if (!this._grouped) return this._normalizedItems;
-			if (this.group) return [...this._ds.sourceItems];
-			const out = [];
-			const walk = (nodes) => {
-				for (const n of nodes) if (this._isGroupNode(n)) walk(n[this.groupItems]);
-				else if (n != null) out.push(n);
-			};
-			walk(this._ds.sourceItems ?? []);
-			return out;
-		}
-		/**
-		* Flatten the visible group tree into ordered header / item render rows.
-		* Leaves are search-filtered (client mode); empty groups are dropped.
-		*/
-		_groupRows() {
-			const filterLeaves = !this.group;
-			const build = (nodes, level, parentKey) => {
-				const rows = [];
-				nodes.forEach((node, i) => {
-					if (!this._isGroupNode(node)) {
-						const item = node;
-						if (item == null) return;
-						if (filterLeaves && !this._searchMatches(item)) return;
-						rows.push({
-							kind: "item",
-							item,
-							index: -1
-						});
-						return;
-					}
-					const rec = node;
-					const path = `${parentKey}/${String(rec[this.groupKey])}#${i}`;
-					const children = build(rec[this.groupItems] ?? [], level + 1, path);
-					if (!children.length) return;
-					rows.push({
-						kind: "group",
-						level,
-						label: this._resolveGroupLabel(rec, level),
-						key: `g:${level}:${path}`
-					});
-					rows.push(...children);
-				});
-				return rows;
-			};
-			let idx = 0;
-			return build(this._groupNodes(), 0, "").map((r) => r.kind === "item" ? {
-				...r,
-				index: idx++
-			} : r);
-		}
-		/** Whether `search-value` names anything explicitly (vs falling back). */
-		get _hasSearchValue() {
-			const sv = this.searchValue;
-			if (Array.isArray(sv)) return sv.length > 0;
-			return typeof sv === "string" && !!sv.trim();
-		}
-		/**
-		* The natural fields searched alongside the `'*'` default when `search-value` is
-		* empty — the safety net, not the whole list.
-		*
-		* `'*'` resolves against loaded rows, so on a bound DataSource it expands to
-		* NOTHING until the first page lands (nothing loads on open, and a query can
-		* fire inside the debounce) — these keep that first query working. They are also
-		* exempt from the remote string-only rule, so a numeric `key-value` stays
-		* searchable. `display-value` contributes only when it's a string; a function
-		* builds text that no field expression can reach, which is why `_searchMatches`
-		* keeps matching the rendered display separately.
-		*/
-		_fallbackSearchFields() {
-			return [typeof this.displayValue === "string" ? this.displayValue : void 0, this.keyValue];
-		}
-		/**
-		* A cheap signature of the rows' SHAPE, for the memo keys below.
-		*
-		* Row count alone isn't enough once `'*'` is in play: the resolved field list
-		* depends on the rows' keys, and a remote source paging from one full page to
-		* the next keeps the same length while the shape can differ. Sampling the first
-		* and last row keeps this O(1) while catching that case.
-		*/
-		_rowsShapeKey(rows) {
-			const keysOf = (row) => row && typeof row === "object" ? Object.keys(row).join(",") : typeof row;
-			if (!rows.length) return "0";
-			return `${rows.length}:${keysOf(rows[0])}|${keysOf(rows[rows.length - 1])}`;
-		}
-		/**
-		* `search-value` resolved to concrete entries — `*` patterns expanded against
-		* the loaded rows. Memoized: a pattern samples up to 20 rows, so resolving per
-		* item (this feeds `_searchMatches`) would be O(items × fields) per keystroke.
-		*
-		* With no `search-value` this defaults to `'*'` (every top-level field) plus the
-		* natural fallbacks — see {@link _fallbackSearchFields}.
-		*/
-		_searchEntries(remote) {
-			const rows = this._normalizedItems;
-			const key = `${this._searchVersion} ${remote ? 1 : 0} ${this._rowsShapeKey(rows)}`;
-			if (this._entriesCache?.key === key) return this._entriesCache.entries;
-			const entries = resolveSearchFields({
-				searchValue: this.searchValue,
-				fallbackFields: this._fallbackSearchFields(),
-				rows,
-				remote,
-				defaultToWildcard: true
-			});
-			this._entriesCache = {
-				key,
-				entries
-			};
-			return entries;
-		}
-		/** The compiled client-side predicate for the current query (memoized). */
-		_searchPredicate() {
-			const query = this._query.trim();
-			const operation = this.searchOperation || "contains";
-			const rows = this._normalizedItems;
-			const key = `${this._searchVersion} ${operation} ${this._rowsShapeKey(rows)} ${query}`;
-			if (this._predicateCache?.key === key) return this._predicateCache.pred;
-			const pred = searchRowPredicate(this._searchEntries(false), query, operation);
-			this._predicateCache = {
-				key,
-				pred
-			};
-			return pred;
-		}
-		/** A bound DataSource is searched on the server; a plain array, client-side. */
-		_serverSearch() {
-			return !!this.dataSource;
-		}
-		/** Client-side match test (server mode already filtered → always true). */
-		_searchMatches(item) {
-			if (this._serverSearch()) return true;
-			if (!this._searchActive) return true;
-			const q = this._query.trim().toLowerCase();
-			if (!q) return true;
-			if (this._hasSearchValue) {
-				const pred = this._searchPredicate();
-				return pred ? pred(item) : true;
-			}
-			const display = this._resolveItemDisplay(item).toLowerCase();
-			const val = this._resolveItemValue(item);
-			const valStr = val == null ? "" : String(val).toLowerCase();
-			const pred = this._searchPredicate();
-			return display.includes(q) || valStr.includes(q) || (pred ? pred(item) : false);
-		}
-		_onSearchInput(event) {
-			if (this._inert) return;
-			this._query = event.target.value;
-			this._searchActive = true;
-			this._open = true;
-			this._activeIndex = 0;
-			this._cursorPending = false;
-			this.requestUpdate();
-			if (this._searchTimer) clearTimeout(this._searchTimer);
-			if (!this._serverSearch()) {
-				this._searchTimer = void 0;
-				return;
-			}
-			const wait = Math.max(0, Number(this.searchDebounce) || 0);
-			this._searchTimer = setTimeout(() => void this._applySearch(this._query), wait);
-		}
-		/** Run the search: server query (debounced) or just re-render for client filter. */
-		async _applySearch(query) {
-			if (!this._serverSearch()) {
-				this.requestUpdate();
-				return;
-			}
-			await this._pushSearch(query).catch((err) => {
-				this._ds.setError(err);
-			});
-		}
-		/** Push `query` onto the source and reload it; rejects when the load fails. */
-		_pushSearch(query) {
-			this._appliedQuery = query;
-			return this._sourceSearch.apply(this.dataSource, {
-				query,
-				searchValue: this.searchValue,
-				fallbackFields: this._fallbackSearchFields(),
-				rows: this._normalizedItems,
-				remote: true,
-				defaultToWildcard: true,
-				operation: this.searchOperation || "contains"
-			});
-		}
-		/** Forget the typed query without touching the source. */
-		_dropQuery() {
-			if (this._searchTimer) {
-				clearTimeout(this._searchTimer);
-				this._searchTimer = void 0;
-			}
-			this._query = "";
-			this._searchActive = false;
-			this._activeIndex = -1;
-		}
-		/** Loading: the app says so (`loading`), or the bound source's first load / retry. */
-		get _busy() {
-			return this.loading || !!this.dataSource && this._ds.busy;
-		}
-		/** The failure to paint: the app's `loading-error`, else the source's own; none while busy. */
-		get _failure() {
-			if (this._busy) return null;
-			return this._appFailure ?? (this.dataSource ? this._ds.error : null);
-		}
-		/** Enter / Space on the focused field retries a failure. */
-		_retryKey(event) {
-			if (event.key !== "Enter" && event.key !== " ") return false;
-			if (!this._failure || this.disabled) return false;
-			this._retry(event);
-			return true;
-		}
-		/** Loading, or failed: the field refuses every gesture but ↻. */
-		get _dsInert() {
-			return this._busy || !!this._failure;
-		}
-		/** Every interaction is off: disabled, read-only, or the source isn't usable. */
-		get _inert() {
-			return this.disabled || this.readonly || this._dsInert;
-		}
-		/** Clear the typed query (and the source query, on close / select). */
-		_resetSearch() {
-			if (this._searchTimer) {
-				clearTimeout(this._searchTimer);
-				this._searchTimer = void 0;
-			}
-			const had = this._searchActive && !!this._query;
-			this._query = "";
-			this._searchActive = false;
-			this._activeIndex = -1;
-			if (had && this._serverSearch()) this._applySearch("");
-		}
-		/** The label shown in the field while not actively typing a query. */
-		get _displayText() {
-			const item = this._selectedItem;
-			return item ? this._resolveItemDisplay(item) : "";
-		}
-		/** Placeholder for the search field — a search hint while open, else the prompt. */
-		get _fieldPlaceholder() {
-			if (this._busy) return this.loadingText;
-			if (this._failure) return errorText(this._failure);
-			if ((this._open || this._searchActive) && this.searchPlaceholder) return this.searchPlaceholder;
-			return this.placeholder;
-		}
-		/**
-		* The selectable rows in render order — drives keyboard nav (`_activeIndex`)
-		* for the searchable combobox. Mirrors what `_renderItems` paints.
-		*/
-		/**
-		* Where the keyboard cursor goes when the list opens: the row matching the
-		* current value, else the first row.
-		*
-		* Deliberately runs the SAME predicate that paints `.selected` in
-		* `_renderOption`, over `_filteredItems` — the very list ↑/↓ and Enter index
-		* into — so the cursor is guaranteed to land on the row drawn as selected.
-		* Going via `_selectedItem` + `indexOf` would not work: that searches
-		* `_leafItems`, an unfiltered/unpaged array whose `_normalizeItems` wraps
-		* primitives in fresh objects per call, so identity would not hold. Grouping
-		* needs no special case — `_groupRows()` numbers leaf rows only, which is
-		* exactly what `_filteredItems` reconstructs.
-		*
-		* `-1` when the list is empty; `0` when the selected row is not in it (a page
-		* the user hasn't scrolled to, or a server query that didn't return it), which
-		* is the behaviour this component has always had.
-		*/
-		_initialActiveIndex() {
-			const items = this._filteredItems;
-			if (!items.length) return -1;
-			const index = items.findIndex((item) => this._isSameValue(this._resolveItemValue(item), this.value));
-			return index >= 0 ? index : 0;
-		}
-		get _filteredItems() {
-			if (this._grouped) return this._groupRows().filter((r) => r.kind === "item").map((r) => r.item);
-			return this._visibleItems.filter((item) => this._searchMatches(item));
-		}
-		get _hasValue() {
-			return this.value !== null && this.value !== void 0 && this.value !== "";
-		}
-		get _hasLabelSlot() {
-			return this._hasLabelSlotState;
-		}
-		get _hasHelperSlot() {
-			return this._hasHelperSlotState;
-		}
-		get _hasPrefixSlot() {
-			return this._hasPrefixSlotState;
-		}
-		get _hasSuffixSlot() {
-			return this._hasSuffixSlotState;
-		}
-		get _resolvedValidationState() {
-			if (this.validationState && this.validationState !== "default") return this.validationState;
-			if (this.errorMessage) return "invalid";
-			if (this.successMessage) return "valid";
-			return "default";
-		}
-		get _wrapperClasses() {
-			return [
-				"mono-select",
-				this.size,
-				this.color,
-				this.variant,
-				this._open ? "open" : "",
-				this.disabled ? "disabled" : "",
-				this.readonly ? "readonly" : "",
-				this._resolvedValidationState !== "default" ? `is-${this._resolvedValidationState}` : "",
-				this._hasValue ? "has-value" : "",
-				this._hasPrefixSlot ? "has-prefix" : "",
-				this._hasSuffixSlot ? "has-suffix" : "",
-				this.cssClassName,
-				this.cssClass?.root
-			].filter(Boolean).join(" ");
-		}
-		get _triggerClasses() {
-			return [
-				this._cls("mono-select-trigger", "trigger"),
-				this.size,
-				this.color,
-				this.variant,
-				this.disabled ? "disabled" : "",
-				this.readonly ? "readonly" : ""
-			].filter(Boolean).join(" ");
-		}
-		_createModelDetail(args) {
-			return {
-				modelValue: args.modelValue,
-				currentValue: args.modelValue,
-				oldValue: args.oldValue,
-				value: args.modelValue,
-				selectedItem: this._leafItems.find((item) => this._isSameValue(this._resolveItemValue(item), args.modelValue)),
-				sourceEvent: args.sourceEvent
-			};
-		}
-		_emitChange(detail) {
-			dispatchMonoEvent(this, "change", detail);
-		}
-		_emitClear(detail) {
-			dispatchMonoEvent(this, "clear", detail);
-		}
-		_toggleOpen(event) {
-			event?.stopPropagation();
-			if (this._inert) return;
-			if (this._open) this._close();
-			else this._open = true;
-		}
-		_close() {
-			this._open = false;
-			this._resetSearch();
-		}
-		_handleTriggerKeydown(event) {
-			if (this._retryKey(event)) return;
-			if (this._inert) return;
-			if (!this._open) {
-				if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
-					event.preventDefault();
-					this._open = true;
-					return;
-				}
-				if (event.key === "Escape") {
-					event.preventDefault();
-					this._close();
-				}
-				return;
-			}
-			this._handleListKeydown(event);
-		}
-		/**
-		* ↑/↓/Enter/Esc against the rendered list, shared by the trigger and the
-		* search field so both modes navigate identically.
-		*/
-		_handleListKeydown(event) {
-			const items = this._filteredItems;
-			if (event.key === "ArrowDown") {
-				event.preventDefault();
-				this._open = true;
-				this._activeIndex = items.length ? Math.min(this._activeIndex + 1, items.length - 1) : -1;
-				return true;
-			}
-			if (event.key === "ArrowUp") {
-				event.preventDefault();
-				this._activeIndex = items.length ? Math.max(this._activeIndex - 1, 0) : -1;
-				return true;
-			}
-			if (event.key === "Enter") {
-				const active = this._activeIndex >= 0 ? items[this._activeIndex] : void 0;
-				if (!active) return false;
-				event.preventDefault();
-				if (!active.disabled) this._selectItem(active, event);
-				return true;
-			}
-			if (event.key === "Escape") {
-				event.preventDefault();
-				this._close();
-				return true;
-			}
-			return false;
-		}
-		/**
-		* Focusing the field selects the shown label so the first keystroke replaces
-		* it (type to filter). It does NOT open the dropdown: a Tab into the field is
-		* not a request to see the list — typing, ↓, a click in the field or the
-		* chevron are.
-		*/
-		_handleSearchFocus(event) {
-			if (this._inert) return;
-			event.target.select();
-		}
-		/**
-		* Clicking anywhere in a SEARCHABLE field opens it and focuses the input.
-		* Opens only — a click in a text input while the list is open is caret
-		* placement or text selection, never a toggle; the chevron, Escape and an
-		* outside click close. (The plain trigger is a button that toggles instead:
-		* nothing to type there, so a second click means "close".)
-		*/
-		_handleFieldClick(event) {
-			event.stopPropagation();
-			if (this._inert) return;
-			this._open = true;
-			this._searchFieldEl?.focus();
-		}
-		/** Keyboard nav for the search field: arrows move, Enter selects, Esc closes. */
-		_handleSearchKeydown(event) {
-			if (this._retryKey(event)) return;
-			if (this._inert) return;
-			this._handleListKeydown(event);
-		}
-		_selectItem(item, event) {
-			event?.preventDefault();
-			event?.stopPropagation();
-			if (this._inert || item.disabled) return;
-			const oldValue = this.modelValue;
-			const nextValue = this._resolveItemValue(item);
-			this.value = nextValue;
-			this.modelValue = nextValue;
-			this._open = false;
-			this._resetSearch();
-			const detail = this._createModelDetail({
-				modelValue: nextValue,
-				oldValue,
-				sourceEvent: event
-			});
-			this._emitChange(detail);
-			if (this.searchable) this.updateComplete.then(() => this._searchFieldEl?.select());
-			else this._triggerEl?.focus();
-		}
-		_clear(event) {
-			event.preventDefault();
-			event.stopPropagation();
-			if (this._inert) return;
-			const oldValue = this.modelValue;
-			const nextValue = null;
-			this.value = nextValue;
-			this.modelValue = nextValue;
-			this._open = false;
-			this._resetSearch();
-			const detail = this._createModelDetail({
-				modelValue: nextValue,
-				oldValue,
-				sourceEvent: event
-			});
-			this._emitChange(detail);
-			this._emitClear(detail);
-			if (this.searchable) this._searchFieldEl?.focus();
-		}
-		_renderLabel() {
-			const hasContent = !!this.label || this._hasLabelSlot;
-			if (!hasContent && !this._slotsAlwaysRender) return nothing;
-			return html`
-      <label
-        class=${this._cls("mono-select-label", "label")}
-        mono-label
-        for=${this._selectId}
-        ?mono-empty=${!hasContent}
-      >
-        ${this._slotOutlet("label", this.label)}
-
-        ${this.required ? html`
-              <span class=${this._cls("mono-select-required", "required")} mono-required-mark>
-                *
-              </span>
-            ` : nothing}
-        ${this._tooltip.render()}
-      </label>
-    `;
-		}
-		_renderValue() {
-			if (this._dsInert) {
-				const err = this._failure;
-				return html`
-        <span
-          class=${`${this._cls("mono-select-value", "value")} ${this._cls("mono-select-placeholder", "placeholder")}`}
-          mono-value
-          mono-placeholder
-          ?mono-ds-error-text=${!!err}
-          title=${ifDefined(err ? errorTitle(err) : void 0)}
-        >
-          ${err ? errorText(err) : this.loadingText}
-        </span>
-      `;
-			}
-			if (this._hasValue && this._selectedItem) return html`
-        <span class=${this._cls("mono-select-value", "value")} mono-value>
-          ${this._hasPrefixSlot || this._slotsAlwaysRender ? this._slotOutlet("prefix") : nothing}
-
-          <span>${this._resolveItemDisplay(this._selectedItem)}</span>
-
-          ${this._hasSuffixSlot || this._slotsAlwaysRender ? this._slotOutlet("suffix") : nothing}
-        </span>
-      `;
-			return html`
-      <span
-        class=${`${this._cls("mono-select-value", "value")} ${this._cls("mono-select-placeholder", "placeholder")}`}
-        mono-value
-        mono-placeholder
-      >
-        ${this.placeholder}
-      </span>
-    `;
-		}
-		/** A single selectable option button. `index` drives the keyboard-active highlight. */
-		_renderOption(item, index = -1) {
-			const selected = this._isSameValue(this._resolveItemValue(item), this.value);
-			const active = index >= 0 && index === this._activeIndex;
-			const itemClass = [
-				this._cls("mono-select-item", "item"),
-				active ? `active ${this.cssClass?.itemActive ?? ""}` : "",
-				selected ? `selected ${this.cssClass?.itemSelected ?? ""}` : "",
-				item.disabled ? `disabled ${this.cssClass?.itemDisabled ?? ""}` : ""
-			].filter(Boolean).join(" ");
-			return html`
-      <button
-        type="button"
-        role="option"
-        class=${itemClass}
-        mono-item
-        ?mono-active=${active}
-        ?mono-selected=${selected}
-        ?mono-disabled=${!!item.disabled}
-        aria-selected=${selected ? "true" : "false"}
-        ?disabled=${item.disabled}
-        @mousedown=${(event) => event.preventDefault()}
-        @click=${(event) => this._selectItem(item, event)}
-      >
-        ${this._resolveItemDisplay(item)}
-      </button>
-    `;
-		}
-		/**
-		* The flat entry list published to `form.items()[key].list`.
-		*
-		* The SAME sequence the component renders — group headers interleaved with their leaves — so a
-		* consumer looping it produces one node per row, in order, with nothing to pair up by hand.
-		*
-		* `key` is `item[keyValue]` via `_resolveItemValue`, the same value selection is keyed by, so
-		* the feature introduces no second notion of a key.
-		*/
-		_listEntries() {
-			const rowEntry = (item, level, index) => ({
-				type: "row",
-				key: String(this._resolveItemValue(item) ?? ""),
-				item,
-				level,
-				selected: this._isSameValue(this._resolveItemValue(item), this.value),
-				active: index >= 0 && index === this._activeIndex
-			});
-			if (this._grouped) {
-				const rows = this._groupRows();
-				const leavesFrom = (start, level) => {
-					const out = [];
-					for (let i = start + 1; i < rows.length; i++) {
-						const row = rows[i];
-						if (row.kind === "group") {
-							if (row.level <= level) break;
-							continue;
-						}
-						out.push(row.item);
-					}
-					return out;
-				};
-				let rowLevel = 0;
-				return rows.map((row, i) => {
-					if (row.kind === "group") {
-						rowLevel = row.level + 1;
-						return {
-							type: "group",
-							key: row.key,
-							label: row.label,
-							level: row.level,
-							items: leavesFrom(i, row.level)
-						};
-					}
-					return rowEntry(row.item, rowLevel, row.index);
-				});
-			}
-			return this._filteredItems.map((item, index) => rowEntry(item, 0, index));
-		}
-		/**
-		* Hand the form the current entries — but only a NEW array when they actually moved.
-		*
-		* This runs from `updated()`, so it fires on every render; the controller notifies on a changed
-		* list, and that notify re-renders this control. Returning the same array reference is what keeps
-		* that from looping forever. Identity of `item` counts as a change: a reloaded DataSource hands
-		* back fresh row objects under the same keys, and a consumer reading `e.item.Nama` must see them.
-		*/
-		_syncListEntries() {
-			if (!this.dataForm || !this.keyForm) return;
-			const next = this._listEntries();
-			const prev = this._publishedEntries;
-			let same = prev.length === next.length;
-			if (same) for (let i = 0; i < next.length; i++) {
-				const a = prev[i];
-				const b = next[i];
-				if (a.type !== b.type || a.key !== b.key || a.item !== b.item || a.selected !== b.selected || a.active !== b.active) {
-					same = false;
-					break;
-				}
-			}
-			if (same) return;
-			this._publishedEntries = next;
-			this._publishList(next);
-		}
-		/**
-		* Where the consumer's `slot="list"` content goes — overridden per build.
-		*
-		* mono places that content as ONE block and never reaches inside it. Moving a `v-for`'s children
-		* is not survivable: Vue inserts a new row with `parent.insertBefore(node, anchor)` where the
-		* anchor is the existing node at that position, so relocating one makes the consumer's next
-		* insert throw `NotFoundError`. Hence one block, and hence `data-mono-item-key` — with the rows
-		* out of reach, a delegated click is the only way back to the item.
-		*/
-		renderListSlot() {
-			return html``;
-		}
-		/**
-		* The entry a click landed on — by POSITION, so a consumer writes a plain `v-for` and nothing else.
-		*
-		* mono cannot read a node's item off the node: it published the list, but the DOM was built by
-		* someone else. What it CAN do is count. The wrapper's Nth element child is the Nth published
-		* entry, because that is the contract the slot already states — one flat loop, one node per entry,
-		* in order — and here that contract is CHECKED rather than assumed: if the two lengths disagree,
-		* this refuses the click instead of picking the wrong row.
-		*
-		* Position is resolved at CLICK time, never cached. That is what makes it safe with no observer
-		* and no re-stamping: by the time a human clicks, the framework has long finished patching, so
-		* there is no window where a stale pairing could be consulted.
-		*
-		* `data-mono-item-key` still wins when present — the escape hatch for a wrapper that cannot emit
-		* exactly one element per entry (a sticky header of your own, a row that renders as a fragment).
-		*/
-		/**
-		* The consumer's `slot="list"` wrapper, wherever the build keeps it.
-		*
-		* The shadow build never moves it — it stays a light child of the host and is PROJECTED — so
-		* that is the default. The light build moves it into the panel and overrides this with the node
-		* it captured, which is also findable while the panel is closed and the wrapper parked.
-		*/
-		get _listSlotWrapper() {
-			return this._lateListSlot.find();
-		}
-		/**
-		* Re-decorate whenever the consumer re-renders their rows.
-		*
-		* `_syncListChrome()` runs from `updated()`, but a framework patches the wrapper on ITS next
-		* tick — so a row the search box just revealed would be born undecorated and stay that way until
-		* something else made mono render. This closes that gap.
-		*
-		* `childList` on the WRAPPER, which is exactly the churn {@link LateSlotWatcher} refuses on the
-		* host: there the consumer's row traffic is noise, here it IS the signal. No `subtree`, so
-		* mono's own attribute writes cannot re-trigger it.
-		*/
-		_watchListChrome() {
-			if (typeof MutationObserver === "undefined") return;
-			const wrapper = this._listSlotWrapper;
-			if (!wrapper || wrapper === this._observedListWrapper) return;
-			this._listChromeObserver?.disconnect();
-			this._observedListWrapper = wrapper;
-			this._listChromeObserver = new MutationObserver(() => this._syncListChrome());
-			this._listChromeObserver.observe(wrapper, { childList: true });
-		}
-		_stopWatchingListChrome() {
-			this._listChromeObserver?.disconnect();
-			this._listChromeObserver = void 0;
-			this._observedListWrapper = void 0;
-		}
-		/**
-		* Decorate the lines the consumer rendered — the half of this feature that keeps the SLOT about
-		* markup and mono about behaviour.
-		*
-		* Your template says what a line LOOKS like; the state it is in is stamped here, as `data-*`
-		* attributes, so nothing in that template has to bind `e.selected` or `e.active` to say so.
-		*
-		* Where the tag input also injects a checkbox, this stops at the stamp: a select carries no
-		* checkbox and no select-all, so there is no chrome to put anywhere.
-		*
-		* Three rules keep this safe beside a framework:
-		*   · children are ANNOTATED only, never moved, reordered or removed — every `insertBefore`
-		*     anchor a `v-for` patches against stays valid;
-		*   · `data-*` only, never `class` — `class` is the consumer's binding and would be clobbered;
-		*   · nothing is stamped unless the lines and the published entries match 1:1.
-		*/
-		_syncListChrome() {
-			if (!this._hasListSlotState) return;
-			const wrapper = this._listSlotWrapper;
-			if (!wrapper) return;
-			const children = Array.from(wrapper.children);
-			const entries = this._publishedEntries;
-			if (children.length !== entries.length) return;
-			for (let i = 0; i < children.length; i++) {
-				const node = children[i];
-				const entry = entries[i];
-				node.setAttribute("data-mono-type", entry.type);
-				node.setAttribute("data-mono-level", String(entry.level ?? 0));
-				node.setAttribute("data-mono-key", entry.key);
-				if (entry.type === "group") continue;
-				node.toggleAttribute("data-mono-selected", !!entry.selected);
-				node.toggleAttribute("data-mono-active", !!entry.active);
-			}
-		}
-		_entryFromNode(node) {
-			const keyed = node.closest?.("[data-mono-item-key]");
-			if (keyed) {
-				const key = keyed.getAttribute("data-mono-item-key");
-				return this._publishedEntries.find((e) => e.type === "row" && e.key === key);
-			}
-			const wrapper = node.closest?.("[slot=\"list\"]");
-			if (!wrapper) return void 0;
-			let row = node;
-			while (row && row.parentElement !== wrapper) row = row.parentElement;
-			if (!row) return void 0;
-			const children = Array.from(wrapper.children);
-			if (children.length !== this._publishedEntries.length) {
-				console.warn(`[mono-select] slot="list" rendered ${children.length} element(s) for ${this._publishedEntries.length} option(s), so a click cannot be paired with its row. Render exactly one element per entry, or put data-mono-item-key="<entry.key>" on each row.`);
-				return;
-			}
-			const entry = this._publishedEntries[children.indexOf(row)];
-			return entry?.type === "row" ? entry : void 0;
-		}
-		_emptyRow() {
-			const text = this.dataSource && this._ds.loading ? this.loadingText : this._query ? "No matches" : "No items";
-			return html`<div class=${this._cls("mono-select-item disabled", "itemDisabled")} mono-empty-row>${text}</div>`;
-		}
-		_renderItems() {
-			if (this._hasListSlotState) return html`
-        ${this._filteredItems.length ? nothing : this._emptyRow()}
-        ${this.renderListSlot()}
-      `;
-			if (this._grouped) {
-				const rows = this._groupRows();
-				if (!rows.some((r) => r.kind === "item")) return this._emptyRow();
-				return html`
-        ${rows.map((row) => row.kind === "group" ? html`<div
-                class=${`${this._cls("mono-select-group", "group")}${this.groupSticky ? " sticky" : ""}`}
-                mono-group
-                mono-level=${row.level}
-                ?mono-sticky=${this.groupSticky}
-                data-level=${row.level}
-                role="presentation"
-              >
-                ${row.label}
-              </div>` : this._renderOption(row.item, row.index))}
-      `;
-			}
-			const items = this._visibleItems.filter((item) => this._searchMatches(item));
-			if (!items.length) return this._emptyRow();
-			return html`${items.map((item, index) => this._renderOption(item, index))}`;
-		}
-		_renderLoadMore() {
-			if (!this._loadMoreMode) return nothing;
-			if (!this._normalizedItems.length || this._ds.atLastPage) return nothing;
-			if (this._ds.loadingMore) return html`
-        <div class=${`${this._cls("mono-select-load-more", "loadMore")} loading`} mono-load-more mono-loading>
-          Loading…
-        </div>
-      `;
-			if (this._loadMoreMode !== "button") return nothing;
-			return html`
-      <button
-        type="button"
-        class=${this._cls("mono-select-load-more", "loadMore")}
-        mono-load-more
-        @click=${(event) => {
-				event.preventDefault();
-				event.stopPropagation();
-				this._ds.loadMore();
-			}}
-      >
-        Load more
-      </button>
-    `;
-		}
-		_renderHelper() {
-			const base = this._cls("mono-select-message", "message");
-			if (this._validation.moved) return html`${this._renderHelperText()}${this._renderMovedMessage()}`;
-			if (this.validationMessage) {
-				const state = this._resolvedValidationState;
-				return html`
-        <div class=${`${base} ${state}`} mono-message=${state} role=${state === "invalid" ? "alert" : nothing}>
-          ${this.validationMessage}
-        </div>
-      `;
-			}
-			if (this.errorMessage) return html`
-        <div class=${`${base} invalid`} mono-message="invalid" role="alert">
-          ${this.errorMessage}
-        </div>
-      `;
-			if (this.successMessage) return html`
-        <div class=${`${base} valid`} mono-message="valid">
-          ${this.successMessage}
-        </div>
-      `;
-			return this._renderHelperText();
-		}
-		_renderHelperText() {
-			const base = this._cls("mono-select-message", "message");
-			if (this.helperText || this._hasHelperSlot || this._slotsAlwaysRender) return html`
-        <div
-          class=${`${base} helper`}
-          mono-message="helper"
-          ?mono-empty=${!this.helperText && !this._hasHelperSlot}
-        >
-          ${this._slotOutlet("helper", this.helperText)}
-        </div>
-      `;
-			return nothing;
-		}
-		/** Shared clear (×) / chevron action. `toggleArrow` lets the chevron close an
-		* already-open dropdown in the searchable field (the plain button toggles itself).
-		*
-		* ONE glyph, matching `<mono-tag-input>` and `<mono-dropdown-table>`: with a
-		* clearable value the corner shows `✕` alone — clearing is the useful action
-		* then, and the chevron would only say what the value already says. Without a
-		* value (or `clearable` off) the chevron is alone. `disabled` / `readonly`
-		* show NEITHER: the field refuses every gesture, so a chevron would promise an
-		* open it never delivers. The actions span still renders so the gutter — and
-		* the text beside it — stays put when the state toggles.
-		*
-		* THE VALUE WINS over the open state. On a searchable field the chevron is the
-		* only mouse way to CLOSE — the body OPENS but never closes there (a click in a
-		* text input is caret placement, not a toggle) — and it was once kept beside
-		* `✕` for exactly that reason. The rule now is the simpler one: while there is
-		* something to clear there is no chevron, open or closed; a searchable field
-		* with a value closes by picking, Escape or an outside click. `role="button"`
-		* on a span, not a `<button>`: the plain trigger is itself a button and buttons
-		* do not nest. `mousedown.preventDefault` keeps focus where it is (the search
-		* input); `_toggleOpen` stops propagation so the plain trigger does not toggle
-		* a second time. */
-		_renderActions() {
-			if (this._busy) return html`
-        <span class=${this._cls("mono-select-actions", "actions")} mono-actions>
-          <span mono-ds-spinner role="status" aria-label=${this.loadingText}>${spinnerIcon()}</span>
-        </span>
-      `;
-			if (this._failure && !this.disabled) return html`
-        <span class=${this._cls("mono-select-actions", "actions")} mono-actions>
-          <span
-            role="button"
-            tabindex="-1"
-            mono-ds-retry
-            aria-label=${this.retryLabel}
-            title=${this.retryLabel}
-            @mousedown=${(event) => event.preventDefault()}
-            @click=${this._retry}
-          >
-            ${refreshIcon()}
-          </span>
-        </span>
-      `;
-			const inert = this._inert;
-			const canClear = this.clearable && this._hasValue && !inert;
-			const showArrow = !inert && !canClear;
-			return html`
-      <span class=${this._cls("mono-select-actions", "actions")} mono-actions>
-        ${canClear ? html`
-              <span
-                role="button"
-                tabindex="-1"
-                class=${this._cls("mono-select-clear", "clear")}
-                mono-clear
-                aria-label="Clear select"
-                @mousedown=${(event) => event.preventDefault()}
-                @click=${this._clear}
-              >
-                ${this.renderIcon("close")}
-              </span>
-            ` : nothing}
-        ${showArrow ? html`
-              <span
-                role="button"
-                tabindex="-1"
-                class=${this._cls("mono-select-arrow", "arrow")}
-                mono-arrow
-                aria-label="Toggle options"
-                aria-expanded=${this._open ? "true" : "false"}
-                @mousedown=${(event) => event.preventDefault()}
-                @click=${this._toggleOpen}
-              >
-                ${this.renderIcon("chevron")}
-              </span>
-            ` : nothing}
-      </span>
-    `;
-		}
-		/** Plain trigger: a button showing the selected value (non-searchable). */
-		_renderButtonTrigger(ariaLabel, describedBy) {
-			return html`
-      <button
-        id=${this._selectId}
-        type="button"
-        class=${this._triggerClasses}
-        mono-trigger
-        ?disabled=${this.disabled}
-        aria-haspopup="listbox"
-        aria-expanded=${this._open ? "true" : "false"}
-        aria-controls=${this._listboxId}
-        aria-label=${ifDefined(ariaLabel)}
-        aria-describedby=${ifDefined(describedBy)}
-        @click=${this._toggleOpen}
-        @keydown=${this._handleTriggerKeydown}
-      >
-        ${this._renderValue()}
-        ${this._validation.renderIcon()}
-        ${this._renderActions()}
-      </button>
-    `;
-		}
-		/** Searchable trigger: the field itself is a search input (combobox). */
-		_renderSearchTrigger(ariaLabel, describedBy) {
-			return html`
-      <div class=${this._triggerClasses} mono-trigger @click=${this._handleFieldClick}>
-        <input
-          id=${this._selectId}
-          class=${this._cls("mono-select-search-field", "searchField")}
-          mono-search-field
-          type="text"
-          role="combobox"
-          autocomplete="off"
-          aria-haspopup="listbox"
-          aria-expanded=${this._open ? "true" : "false"}
-          aria-controls=${this._listboxId}
-          aria-label=${ifDefined(ariaLabel)}
-          aria-describedby=${ifDefined(describedBy)}
-          .value=${this._dsInert ? "" : this._searchActive ? this._query : this._displayText}
-          placeholder=${this._fieldPlaceholder}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readonly || this._dsInert}
-          @input=${this._onSearchInput}
-          @focus=${this._handleSearchFocus}
-          @keydown=${this._handleSearchKeydown}
-        />
-        ${this._validation.renderIcon()}
-        ${this._renderActions()}
-      </div>
-    `;
-		}
-		/** Inline sizing applied to the root wrapper. */
-		_sizeStyle() {
-			return buildSizeStyle(this);
-		}
-		render() {
-			const describedBy = this.validationMessage || this.errorMessage || this.successMessage || this.helperText || this._hasHelperSlot ? this._messageId : void 0;
-			const ariaLabel = this.ariaLabelText || this.label || this.placeholder || void 0;
-			const state = this._resolvedValidationState;
-			return html`
-      <div
-        class=${this._wrapperClasses}
-        style=${styleMap(this._sizeStyle())}
-        mono-select
-        mono-size=${this.size === "md" ? nothing : this.size}
-        mono-color=${this.color === "primary" ? nothing : this.color}
-        mono-variant=${this.variant === "outlined" ? nothing : this.variant}
-        mono-label-position=${this.labelPosition === "top" ? nothing : this.labelPosition}
-        mono-validation-position=${this.validationPosition === "bottom" ? nothing : this.validationPosition}
-        mono-validation-state=${state === "default" ? nothing : state}
-        ?mono-open=${this._open}
-        ?mono-disabled=${this.disabled}
-        ?mono-readonly=${this.readonly}
-        ?mono-required=${this.required}
-        ?mono-clearable=${this.clearable}
-        ?mono-searchable=${this.searchable}
-        ?mono-ds-loading=${this._busy}
-        ?mono-ds-error=${!!this._failure}
-        aria-busy=${this._busy ? "true" : nothing}
-      >
-        ${this._renderLabel()}
-
-        ${this.searchable ? this._renderSearchTrigger(ariaLabel, describedBy) : this._renderButtonTrigger(ariaLabel, describedBy)}
-
-        <div
-          id=${this._listboxId}
-          role="listbox"
-          class=${this._cls("mono-select-dropdown", "dropdown")}
-          mono-dropdown
-          style=${styleMap(this._dropdownPanelStyle)}
-        >
-          <div
-            class=${this._cls("mono-select-dropdown-body", "dropdownBody")}
-            mono-dropdown-body
-            style=${styleMap(this._dropdownBodyStyle)}
-            @scroll=${this._handleDropdownScroll}
-          >
-            ${this._open ? this._renderItems() : nothing}
-            ${this._open ? this._renderLoadMore() : nothing}
-          </div>
-        </div>
-
-        <div id=${this._messageId} class=${this.cssClass?.messageWrap ?? ""} mono-message-wrap>
-          ${this._renderHelper()}
-        </div>
-
-        ${this._validation.renderFloat()}
-      </div>
-    `;
-		}
-		focus(options) {
-			if (this.searchable) this._searchFieldEl?.focus(options);
-			else this._triggerEl?.focus(options);
-		}
-		blur() {
-			if (this.searchable) this._searchFieldEl?.blur();
-			else this._triggerEl?.blur();
-		}
-		/** Whether the dropdown panel is currently open. */
-		get isOpen() {
-			return this._open;
-		}
-		open() {
-			if (this._inert) return;
-			this._open = true;
-		}
-		close() {
-			this._close();
-		}
-		toggle() {
-			if (this._inert) return;
-			if (this._open) this._close();
-			else this._open = true;
-		}
-		/** Coerce a possibly-stringy SSR value to a real boolean (matches
-		*  `booleanStringConverter`: a bare / empty attribute means present → true). */
-		_toBoolean(value) {
-			if (typeof value === "boolean") return value;
-			if (value == null) return false;
-			const s = String(value).toLowerCase().trim();
-			return s === "" || s === "true";
-		}
-		/** Whether the slot regions render even when empty. Light: no (omit empty
-		*  regions). Shadow: yes — the native `<slot>`s must exist to project DSD
-		*  content + be scanned (hidden via `[mono-empty]` when empty). */
-		get _slotsAlwaysRender() {
-			return false;
-		}
-		_hasSlot(name) {
-			return name === "label" ? this._hasLabelSlotState : name === "helper" ? this._hasHelperSlotState : name === "prefix" ? this._hasPrefixSlotState : name === "suffix" ? this._hasSuffixSlotState : this._hasListSlotState;
-		}
-		_setSlotState(name, has) {
-			if (name === "label") this._hasLabelSlotState = has;
-			else if (name === "helper") this._hasHelperSlotState = has;
-			else if (name === "prefix") this._hasPrefixSlotState = has;
-			else if (name === "suffix") this._hasSuffixSlotState = has;
-			else this._hasListSlotState = has;
-		}
-		/**
-		* Slot outlet. Light build (default): a `data-mono-slot` placeholder the
-		* captured light-DOM nodes are re-parented into when present, else the prop
-		* `fallback`. Shadow build overrides this with a native `<slot name>` that
-		* carries the fallback as native slot content.
-		*/
-		_slotOutlet(name, fallback = nothing) {
-			return this._hasSlot(name) ? html`<span data-mono-slot=${name}></span>` : html`${fallback}`;
-		}
-		/**
-		* Icon hook. Light build (default): the global `.mono-icon` / `i-mdi-*` UnoCSS
-		* icon. Shadow overrides with inline SVG (UnoCSS can't reach a shadow root).
-		*/
-		renderIcon(name) {
-			return html`<span class=${`mono-icon ${name === "close" ? "i-mdi-close" : "i-mdi-chevron-down"}`} mono-icon aria-hidden="true"></span>`;
-		}
-	}
-	__decorate([property({ type: String })], MonoSelectCoreClass.prototype, "size", void 0);
-	__decorate([property({ type: String })], MonoSelectCoreClass.prototype, "color", void 0);
-	__decorate([property({ type: String })], MonoSelectCoreClass.prototype, "variant", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "label-position"
-	})], MonoSelectCoreClass.prototype, "labelPosition", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "validation-position"
-	})], MonoSelectCoreClass.prototype, "validationPosition", void 0);
-	__decorate([property({ attribute: false })], MonoSelectCoreClass.prototype, "modelValue", void 0);
-	__decorate([property({ attribute: false })], MonoSelectCoreClass.prototype, "value", void 0);
-	__decorate([property({ type: String })], MonoSelectCoreClass.prototype, "name", void 0);
-	__decorate([property({ type: String })], MonoSelectCoreClass.prototype, "label", void 0);
-	__decorate([property({ type: String })], MonoSelectCoreClass.prototype, "placeholder", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "helper-text"
-	})], MonoSelectCoreClass.prototype, "helperText", void 0);
-	__decorate([property()], MonoSelectCoreClass.prototype, "tooltip", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "validation-state"
-	})], MonoSelectCoreClass.prototype, "validationState", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "validation-message"
-	})], MonoSelectCoreClass.prototype, "validationMessage", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "error-message"
-	})], MonoSelectCoreClass.prototype, "errorMessage", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "success-message"
-	})], MonoSelectCoreClass.prototype, "successMessage", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "aria-label"
-	})], MonoSelectCoreClass.prototype, "ariaLabelText", void 0);
-	__decorate([property({
-		reflect: true,
-		converter: booleanStringConverter
-	})], MonoSelectCoreClass.prototype, "disabled", void 0);
-	__decorate([property({
-		reflect: true,
-		converter: booleanStringConverter
-	})], MonoSelectCoreClass.prototype, "readonly", void 0);
-	__decorate([property({
-		reflect: true,
-		converter: booleanStringConverter
-	})], MonoSelectCoreClass.prototype, "required", void 0);
-	__decorate([property({
-		reflect: true,
-		converter: booleanStringConverter
-	})], MonoSelectCoreClass.prototype, "clearable", void 0);
-	__decorate([property({
-		attribute: false,
-		hasChanged: arrayHasChanged
-	})], MonoSelectCoreClass.prototype, "items", void 0);
-	__decorate([property({ attribute: false })], MonoSelectCoreClass.prototype, "dataSource", void 0);
-	__decorate([property({
-		attribute: "immediate",
-		reflect: true,
-		converter: booleanStringConverter
-	})], MonoSelectCoreClass.prototype, "immediate", void 0);
-	__decorate([property({
-		attribute: "load-more",
-		reflect: true
-	})], MonoSelectCoreClass.prototype, "loadMore", void 0);
-	__decorate([property({
-		attribute: "page-size",
-		reflect: true,
-		type: Number
-	})], MonoSelectCoreClass.prototype, "pageSize", void 0);
-	__decorate([property({ attribute: false })], MonoSelectCoreClass.prototype, "dropdown", void 0);
-	__decorate([property({
-		attribute: "dropdown-height",
-		reflect: true
-	})], MonoSelectCoreClass.prototype, "dropdownHeight", void 0);
-	__decorate([property({
-		attribute: "dropdown-max-height",
-		reflect: true
-	})], MonoSelectCoreClass.prototype, "dropdownMaxHeight", void 0);
-	__decorate([property({ converter: booleanStringConverter })], MonoSelectCoreClass.prototype, "flip", void 0);
-	__decorate([property({ converter: booleanStringConverter })], MonoSelectCoreClass.prototype, "shift", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "key-value",
-		reflect: true
-	})], MonoSelectCoreClass.prototype, "keyValue", void 0);
-	__decorate([property({ attribute: false })], MonoSelectCoreClass.prototype, "displayValue", void 0);
-	__decorate([property({
-		attribute: false,
-		hasChanged: arrayHasChanged
-	})], MonoSelectCoreClass.prototype, "displayGroup", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "group-key",
-		reflect: true
-	})], MonoSelectCoreClass.prototype, "groupKey", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "group-items",
-		reflect: true
-	})], MonoSelectCoreClass.prototype, "groupItems", void 0);
-	__decorate([property({
-		attribute: "group",
-		reflect: true,
-		converter: booleanStringConverter
-	})], MonoSelectCoreClass.prototype, "group", void 0);
-	__decorate([property({
-		attribute: "group-sticky",
-		reflect: true,
-		converter: booleanStringConverter
-	})], MonoSelectCoreClass.prototype, "groupSticky", void 0);
-	__decorate([property({
-		attribute: "searchable",
-		reflect: true,
-		converter: booleanStringConverter
-	})], MonoSelectCoreClass.prototype, "searchable", void 0);
-	__decorate([property({
-		attribute: "stay-open",
-		reflect: true,
-		converter: booleanStringConverter
-	})], MonoSelectCoreClass.prototype, "stayOpen", void 0);
-	__decorate([property({
-		attribute: "search-value",
-		hasChanged: arrayHasChanged
-	})], MonoSelectCoreClass.prototype, "searchValue", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "search-operation"
-	})], MonoSelectCoreClass.prototype, "searchOperation", void 0);
-	__decorate([property({
-		attribute: "search-debounce",
-		type: Number
-	})], MonoSelectCoreClass.prototype, "searchDebounce", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "search-placeholder"
-	})], MonoSelectCoreClass.prototype, "searchPlaceholder", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "loading-text"
-	})], MonoSelectCoreClass.prototype, "loadingText", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "retry-label"
-	})], MonoSelectCoreClass.prototype, "retryLabel", void 0);
-	__decorate([property({ converter: booleanStringConverter })], MonoSelectCoreClass.prototype, "loading", void 0);
-	__decorate([property({ attribute: "loading-error" })], MonoSelectCoreClass.prototype, "loadingError", void 0);
-	__decorate([property({
-		attribute: false,
-		hasChanged: rateLimitHasChanged
-	})], MonoSelectCoreClass.prototype, "cssClass", void 0);
-	__decorate([property({ attribute: false })], MonoSelectCoreClass.prototype, "cssClassName", void 0);
-	__decorate([state()], MonoSelectCoreClass.prototype, "_open", void 0);
-	__decorate([state()], MonoSelectCoreClass.prototype, "_query", void 0);
-	__decorate([state()], MonoSelectCoreClass.prototype, "_searchActive", void 0);
-	__decorate([state()], MonoSelectCoreClass.prototype, "_activeIndex", void 0);
-	__decorate([state()], MonoSelectCoreClass.prototype, "_scrollAutoMaxHeight", void 0);
-	__decorate([state()], MonoSelectCoreClass.prototype, "_hasLabelSlotState", void 0);
-	__decorate([state()], MonoSelectCoreClass.prototype, "_hasHelperSlotState", void 0);
-	__decorate([state()], MonoSelectCoreClass.prototype, "_hasPrefixSlotState", void 0);
-	__decorate([state()], MonoSelectCoreClass.prototype, "_hasSuffixSlotState", void 0);
-	__decorate([state()], MonoSelectCoreClass.prototype, "_hasListSlotState", void 0);
-	__decorate([query(".mono-select-search-field")], MonoSelectCoreClass.prototype, "_searchFieldEl", void 0);
-	__decorate([query(".mono-select-trigger")], MonoSelectCoreClass.prototype, "_triggerEl", void 0);
-	__decorate([property({ type: String })], MonoSelectCoreClass.prototype, "width", void 0);
-	__decorate([property({ type: String })], MonoSelectCoreClass.prototype, "height", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "min-width"
-	})], MonoSelectCoreClass.prototype, "minWidth", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "max-width"
-	})], MonoSelectCoreClass.prototype, "maxWidth", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "min-height"
-	})], MonoSelectCoreClass.prototype, "minHeight", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "max-height"
-	})], MonoSelectCoreClass.prototype, "maxHeight", void 0);
-	return MonoSelectCoreClass;
-};
-
-//#endregion
 //#region src/components/select/mono-select.ts
 let MonoSelect = class MonoSelect extends MonoSelectCore(LitElement) {
 	constructor(..._args) {
@@ -2222,46 +130,5 @@ let MonoSelect = class MonoSelect extends MonoSelectCore(LitElement) {
 };
 MonoSelect = __decorate([customElement("mono-select")], MonoSelect);
 
-//#endregion
-//#region src/components/select/select-utils.ts
-function validateSelectProps(props) {
-	const validSizes = [
-		"xs",
-		"sm",
-		"md",
-		"lg",
-		"xl",
-		"xxl"
-	];
-	const validColors = [
-		"primary",
-		"secondary",
-		"success",
-		"danger",
-		"warning",
-		"info",
-		"teal",
-		"purple",
-		"neutral",
-		"dark"
-	];
-	const validVariants = [
-		"outlined",
-		"filled",
-		"underlined"
-	];
-	const validStates = [
-		"default",
-		"valid",
-		"invalid",
-		"warning"
-	];
-	if (props.size && !validSizes.includes(props.size)) return false;
-	if (props.color && !validColors.includes(props.color)) return false;
-	if (props.variant && !validVariants.includes(props.variant)) return false;
-	if (props.validationState && !validStates.includes(props.validationState)) return false;
-	return true;
-}
-
 //#endregion
 export { MonoSelect, validateSelectProps };