@mono-lit/helper 0.0.4 → 0.0.5

package/dist/ui/shadow/select.js

@@ -2,13 +2,16 @@ import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as
 import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
 import { n as toCssSize, t as buildSizeStyle } from "../../css-size-DWAPgQdT.js";
 import { t as MonoFormControlCore } from "../../form-control-core-CIdMLXMo.js";
-import { t as PopupPortalController } from "../../popup-portal-HWhkd7oy.js";
+import { c as spinnerIcon, s as refreshIcon } from "../../field-icons-t8rXRCKs.js";
+import { n as FieldTooltipController, t as field_tooltip_css_raw_default } from "../../field-tooltip.css_raw-DEctHXKm.js";
+import { n as label_position_css_raw_default, r as FieldValidationController, t as field_validation_css_raw_default } from "../../field-validation.css_raw-B3Iu33rS.js";
+import { t as PopupPortalController } from "../../popup-portal-C8ttHDRX.js";
 import { a as rateLimitHasChanged } from "../../rate-limit-e9Jlpl5l.js";
 import { t as getFieldValue } from "../../field-path-BabiMrrA.js";
-import { _ as searchRowPredicate, a as describeError, c as errorTitle, g as resolveSearchFields, m as MonoSourceSearch, n as unwrapReactive, s as errorText } from "../../reactive-DFCdZbH9.js";
+import { a as errorTitle, d as MonoSourceSearch, i as errorText, m as searchRowPredicate, n as describeError, p as resolveSearchFields } from "../../normalize-error-BmLbgANw.js";
 import { t as LateSlotWatcher } from "../../light-slots-4ZCjOcBg.js";
-import { a as spinnerIcon, i as refreshIcon } from "../../field-icons-FmyBWa0g.js";
-import { t as DataSourceController } from "../../data-source-controller-Cf_sMxEh.js";
+import { n as unwrapReactive } from "../../reactive-Dtd-esHO.js";
+import { t as DataSourceController } from "../../data-source-controller-C6C4ej_M.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -33,12 +36,24 @@ const MonoSelectCore = (superClass) => {
 			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 = "";
@@ -142,6 +157,7 @@ const MonoSelectCore = (superClass) => {
 			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();
@@ -156,6 +172,8 @@ const MonoSelectCore = (superClass) => {
 				this._selectItem(item, event);
 			};
 			defineHybridPropAliases(this, [
+				"labelPosition",
+				"validationPosition",
 				"modelValue",
 				"loadingText",
 				"loadingError",
@@ -326,6 +344,32 @@ const MonoSelectCore = (superClass) => {
 			}
 			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
@@ -1258,6 +1302,7 @@ const MonoSelectCore = (superClass) => {
                 *
               </span>
             ` : nothing}
+        ${this._tooltip.render()}
       </label>
     `;
 		}
@@ -1567,6 +1612,7 @@ const MonoSelectCore = (superClass) => {
 		}
 		_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`
@@ -1585,6 +1631,10 @@ const MonoSelectCore = (superClass) => {
           ${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`}
@@ -1691,6 +1741,7 @@ const MonoSelectCore = (superClass) => {
         @keydown=${this._handleTriggerKeydown}
       >
         ${this._renderValue()}
+        ${this._validation.renderIcon()}
         ${this._renderActions()}
       </button>
     `;
@@ -1719,6 +1770,7 @@ const MonoSelectCore = (superClass) => {
           @focus=${this._handleSearchFocus}
           @keydown=${this._handleSearchKeydown}
         />
+        ${this._validation.renderIcon()}
         ${this._renderActions()}
       </div>
     `;
@@ -1739,6 +1791,8 @@ const MonoSelectCore = (superClass) => {
         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}
@@ -1775,6 +1829,8 @@ const MonoSelectCore = (superClass) => {
         <div id=${this._messageId} class=${this.cssClass?.messageWrap ?? ""} mono-message-wrap>
           ${this._renderHelper()}
         </div>
+
+        ${this._validation.renderFloat()}
       </div>
     `;
 		}
@@ -1846,6 +1902,14 @@ const MonoSelectCore = (superClass) => {
 	__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);
@@ -1855,6 +1919,7 @@ const MonoSelectCore = (superClass) => {
 		type: String,
 		attribute: "helper-text"
 	})], MonoSelectCoreClass.prototype, "helperText", void 0);
+	__decorate([property()], MonoSelectCoreClass.prototype, "tooltip", void 0);
 	__decorate([property({
 		type: String,
 		attribute: "validation-state"
@@ -2027,7 +2092,7 @@ const MonoSelectCore = (superClass) => {
 
 //#endregion
 //#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\select\select.css?raw.js
-var select_css_raw_default = "/* =========================================================================\r\n   mono-select — a port of Basecoat's `.select` (the custom one, `.select:not(select)`)\r\n   and `.combobox` (basecoat-css@1.0.2, vega style), on the `.field` / `.label`\r\n   chrome mono-input already ported.\r\n\r\n   Styled by ATTRIBUTE, like Basecoat (`.select > button`, `[role='option'].active`)\r\n   — and the attributes mirror the element's props one for one, so hand-written\r\n   markup reads like the Lit / Vue tag:\r\n\r\n     <mono-select size=\"sm\" color=\"danger\" variant=\"filled\" label=\"Fruit\">\r\n     <div mono-select mono-size=\"sm\" mono-color=\"danger\" mono-variant=\"filled\">\r\n       <label mono-label>Fruit</label>\r\n       <button mono-trigger><span mono-value mono-placeholder>Pick</span>\r\n         <span mono-actions><span mono-arrow>…</span></span></button>\r\n       <div mono-dropdown><div mono-dropdown-body><button mono-item>…</button></div></div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary, `:not([mono-variant])` = outlined). The element\r\n   renders these attributes on its wrapper (both builds) plus `mono-open` while\r\n   the panel is open; the old classes (`.mono-select.sm.open`) are still emitted\r\n   as inert hooks for consumer CSS until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-select]                                 ≡ .field (gap-3, as margins — see the root rule) + .select (position: relative)\r\n     [mono-select] > [mono-label]                  ≡ .field > label / .label\r\n     [mono-select] > [mono-trigger]                ≡ .select > button          (h-9 rounded-md border-input ps-2.5 pe-2 text-sm shadow-xs)\r\n     [mono-select][mono-searchable] > [mono-trigger] ≡ .combobox > input[role='combobox'] (same box; the input sits inside it)\r\n     [mono-trigger] > [mono-value]                 ≡ .select > button > span    (flex-1 truncate text-start)\r\n     [mono-trigger] > [mono-native]                ≡ EXTENSION — a plain <select> may stand in for the value + panel (appearance: none)\r\n     [mono-actions] > [mono-arrow] > [mono-icon]   ≡ .select > button > svg     (size-4 text-muted-foreground)\r\n     [mono-actions] > [mono-clear]                 ≡ .combobox [data-clear]     (size-6, painted as .btn[data-variant='ghost'])\r\n     [mono-dropdown]                               ≡ .select [data-popover]     (bg-popover ring-1 ring-foreground/10 rounded-md shadow-md)\r\n     [mono-dropdown-body]                          ≡ .combobox [role='listbox'] (max-h-72 overflow-y-auto p-1 scroll-py-1)\r\n     [mono-item]                                   ≡ .select [role='option']    (gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm)\r\n     [mono-item][mono-active] / :hover             ≡ [role='option'].active     (bg-muted text-foreground)\r\n     [mono-item][mono-selected]                    ≡ [role='option'][aria-selected='true'] (the --check-icon at the end)\r\n     [mono-group]                                  ≡ .select [role='heading']   (px-2 py-1.5 text-xs text-muted-foreground)\r\n     [mono-empty-row]                              ≡ .select [role='listbox']::before (py-6 text-center text-sm)\r\n     [mono-load-more]                              ≡ EXTENSION (an option-shaped ghost button)\r\n     [mono-message-wrap] > [mono-message]          ≡ .field > p / .field [role='alert']\r\n     [mono-validation-state=\"invalid\"]             ≡ .select > button[aria-invalid='true']\r\n     [mono-validation-state=\"valid|warning\"]       ≡ EXTENSION (the invalid pattern in --success / --warning)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION (Basecoat has only data-size=sm; the ladder is --mono-control-height-*)\r\n     [mono-variant=\"filled\"]                       ≡ EXTENSION (luma's .select > button: border-transparent bg-input/50)\r\n     [mono-variant=\"underlined\"]                   ≡ EXTENSION (sera's: rounded-none border-b-input px-0, no ring)\r\n\r\n   Inner parts are attributes too: [mono-label] (+ [mono-required-mark]),\r\n   [mono-trigger], [mono-value] (+ [mono-placeholder]), [mono-search-field],\r\n   [mono-native], [mono-actions], [mono-clear], [mono-arrow], [mono-icon],\r\n   [mono-dropdown], [mono-dropdown-body], [mono-item] (+ [mono-active] /\r\n   [mono-selected] / [mono-disabled]), [mono-group] (+ [mono-sticky],\r\n   [mono-level=\"n\"]), [mono-empty-row], [mono-load-more] (+ [mono-loading]),\r\n   [mono-list-slot], [mono-message-wrap] > [mono-message=\"helper|valid|invalid|warning\"].\r\n   The shadow build marks an unassigned slot wrapper [mono-empty].\r\n\r\n   THE PANEL IS PORTALED. The light build moves [mono-dropdown] into a\r\n   `<div data-mono-popup-portal>` under <body> while open (composables/popup-\r\n   portal.ts), and the portal mirrors the wrapper's class AND its mono-*\r\n   attributes — so `[mono-select] > [mono-dropdown]` keeps matching there and\r\n   the `--_mono-select-*` resolvers declared on `[mono-select]` re-resolve on\r\n   the portal. Nothing here may rely on the panel being inside the trigger's\r\n   host, and every option rule is scoped under `[mono-select]`.\r\n\r\n   Values are copied from the compiled vendor sheet (vendor/basecoat/basecoat-\r\n   vega.cdn.css) through the token layer; `dark:` variants travel as\r\n   `--mono-mode-*` tokens (a selector cannot cross a shadow boundary; an\r\n   inherited custom property can). FLAVORS set the `--mono-select-*` knobs read\r\n   below — the same set as mono-input (`--mono-select-outline-*` for the outlined\r\n   variant alone) plus `--mono-select-dropdown-{radius,padding,shadow,ring}`,\r\n   `--mono-select-option-{radius,padding-x,padding-y,font-size,line-height,gap,font-weight}`,\r\n   `--mono-select-group-*`, `--mono-select-icon-size`. Every fallback here is vega's\r\n   value (`node scripts/basecoat-styles.mjs --varying \"^(\\.select:not\\(select\\)|\\.combobox)\"`).\r\n   ========================================================================= */\r\n\r\nmono-select {\r\n  display: block;\r\n}\r\n\r\n[mono-select] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-select-text: var(--mono-select-color, var(--mono-select-text, var(--foreground)));\r\n  --_mono-select-placeholder: var(--mono-select-placeholder, var(--muted-foreground));\r\n  --_mono-select-muted: var(--mono-select-muted, var(--muted-foreground));\r\n  --_mono-select-primary: var(--mono-select-primary, var(--ring));\r\n  --_mono-select-secondary: var(--mono-select-secondary, var(--muted-foreground));\r\n  --_mono-select-success: var(--mono-select-success, var(--success));\r\n  --_mono-select-danger: var(--mono-select-danger, var(--destructive));\r\n  --_mono-select-warning: var(--mono-select-warning, var(--warning));\r\n  --_mono-select-info: var(--mono-select-info, var(--info));\r\n  --_mono-select-teal: var(--mono-select-teal, var(--teal));\r\n  --_mono-select-purple: var(--mono-select-purple, var(--purple));\r\n  --_mono-select-neutral: var(--mono-select-neutral, var(--neutral));\r\n  --_mono-select-dark: var(--mono-select-dark, var(--dark));\r\n  --_mono-select-valid: var(--mono-select-valid, var(--success));\r\n  --_mono-select-invalid: var(--mono-select-invalid, var(--destructive));\r\n\r\n  /* ── the painted result — three tiers, base = .select > button (vega) ─── */\r\n  --_mono-select-ring-color: var(--mono-select-ring-color, var(--mono-select-focus-color, var(--_mono-select-ring-color-preset, var(--_mono-select-primary))));\r\n  --_mono-select-ring-width: var(--mono-select-ring-width, var(--_mono-select-ring-width-preset, var(--mono-ring-width)));\r\n  --_mono-select-ring-alpha: var(--mono-select-ring-alpha, var(--mono-ring-alpha));\r\n  --_mono-select-border-color: var(--mono-select-rest-border, var(--mono-select-border-color, var(--mono-select-border, var(--_mono-select-border-color-preset, var(--input)))));\r\n  --_mono-select-bg: var(--mono-select-bg, var(--mono-select-surface, var(--_mono-select-bg-preset, var(--mono-mode-surface))));\r\n  --_mono-select-hover-bg: var(--mono-select-hover-bg, var(--_mono-select-hover-bg-preset, var(--_mono-select-bg)));\r\n  --_mono-select-shadow: var(--mono-select-shadow, var(--_mono-select-shadow-preset, 0 0 #0000));\r\n  --_mono-select-icon: var(--mono-select-icon-size, calc(var(--mono-spacing) * 4));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\r\n        `<div mono-select>` that names no size renders exactly like size=\"md\".\r\n        basecoat@1.0.2 styles/vega.css .select:not(select) > button — h-9 gap-1.5\r\n        rounded-md ps-2.5 pe-2 text-sm ── */\r\n  --_mono-select-height: var(--mono-select-height-md, var(--mono-control-height-md));\r\n  --_mono-select-radius: var(--mono-select-radius-md, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-md, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-md, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-select-gap: var(--mono-select-trigger-gap, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-select-font-size: var(--mono-select-font-md, var(--mono-text-sm));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-md, var(--mono-text-sm--lh)));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 6);\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3; mono: BLOCK\r\n     flow with the gap as margins, so a hand-written panel that no controller\r\n     positions lands at its static position — right under the trigger, above the\r\n     message — instead of a flex container's content-box top */\r\n  --_mono-select-gap-y: var(--mono-select-gap, calc(var(--mono-spacing) * 3));\r\n  position: relative;\r\n  display: block;\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-select-text);\r\n}\r\n\r\n/* A page-level `* { box-sizing: border-box }` reset does NOT cross a shadow\r\n   boundary; scoped here so both builds measure the same. */\r\n[mono-select],\r\n[mono-select] *,\r\n[mono-select] *::before,\r\n[mono-select] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n[mono-select] :is([mono-label], [mono-message])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — the trigger's painted height IS the token (tests/perf/field-heights)\r\n   EXTENSION: Basecoat's select has only data-size=sm; the ladder is the shared\r\n   --mono-control-height-* scale and the text follows .btn's steps.\r\n   ========================================= */\r\n\r\n[mono-select][mono-size=\"xs\"] {\r\n  --_mono-select-height: var(--mono-select-height-xs, var(--mono-control-height-xs));\r\n  --_mono-select-radius: var(--mono-select-radius-xs, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-xs, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-xs, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 1.5))));\r\n  --_mono-select-gap: var(--mono-select-trigger-gap, var(--mono-spacing));\r\n  --_mono-select-font-size: var(--mono-select-font-xs, var(--mono-text-xs));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-xs, var(--mono-text-xs--lh)));\r\n  --_mono-select-icon: var(--mono-select-icon-size, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button — data-[size=sm]:h-8 */\r\n[mono-select][mono-size=\"sm\"] {\r\n  --_mono-select-height: var(--mono-select-height-sm, var(--mono-control-height-sm));\r\n  --_mono-select-radius: var(--mono-select-radius-sm, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-sm, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-sm, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-select-font-size: var(--mono-select-font-sm, var(--mono-select-font-md, var(--mono-text-sm)));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-sm, var(--mono-text-sm--lh)));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 5);\r\n}\r\n\r\n[mono-select][mono-size=\"lg\"] {\r\n  --_mono-select-height: var(--mono-select-height-lg, var(--mono-control-height-lg));\r\n  --_mono-select-radius: var(--mono-select-radius-lg, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-lg, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-lg, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-select-font-size: var(--mono-select-font-lg, var(--mono-select-font-md, var(--mono-text-sm)));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-lg, var(--mono-text-sm--lh)));\r\n}\r\n\r\n[mono-select][mono-size=\"xl\"] {\r\n  --_mono-select-height: var(--mono-select-height-xl, var(--mono-control-height-xl));\r\n  --_mono-select-radius: var(--mono-select-radius-xl, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-xl, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 3))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-xl, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-select-gap: var(--mono-select-trigger-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-select-font-size: var(--mono-select-font-xl, var(--mono-text-base));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-xl, var(--mono-text-base--lh)));\r\n  --_mono-select-icon: var(--mono-select-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 7);\r\n}\r\n\r\n[mono-select][mono-size=\"xxl\"] {\r\n  --_mono-select-height: var(--mono-select-height-xxl, var(--mono-control-height-xxl));\r\n  --_mono-select-radius: var(--mono-select-radius-xxl, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-xxl, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 4))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-xxl, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 3))));\r\n  --_mono-select-gap: var(--mono-select-trigger-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-select-font-size: var(--mono-select-font-xxl, var(--mono-text-lg));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-xxl, var(--mono-text-lg--lh)));\r\n  --_mono-select-icon: var(--mono-select-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 8);\r\n}\r\n\r\n/* =========================================\r\n   Variants — each writes only `*-preset` slots\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button — rounded-md border\r\n   border-input bg-transparent shadow-xs (dark:bg-input/30 dark:hover:bg-input/50\r\n   via the mode tokens). `--mono-select-outline-*` restyle THIS variant alone. */\r\n[mono-select]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\r\n  --_mono-select-bg-preset: var(--mono-select-outline-bg);\r\n  --_mono-select-hover-bg-preset: var(--mono-select-outline-hover-bg, var(--mono-mode-field-hover-bg));\r\n  --_mono-select-border-color-preset: var(--mono-select-outline-border-color);\r\n  --_mono-select-side-border-color-preset: var(--mono-select-outline-side-border-color);\r\n  --_mono-select-shadow-preset: var(--mono-select-outline-shadow, var(--mono-shadow-xs));\r\n  --_mono-select-ring-width-preset: var(--mono-select-outline-ring-width);\r\n  --_mono-select-radius-preset: var(--mono-select-outline-radius);\r\n  --_mono-select-padding-x-preset: var(--mono-select-outline-padding-x);\r\n}\r\n\r\n/* EXTENSION — filled ≡ basecoat@1.0.2 styles/luma.css .select:not(select) > button:\r\n   border-transparent bg-input/50, no shadow-xs, no hover */\r\n[mono-select][mono-variant=\"filled\"] {\r\n  --_mono-select-bg-preset: var(--mono-select-filled-bg, color-mix(in oklab, var(--input) 50%, transparent));\r\n  --_mono-select-hover-bg-preset: var(--_mono-select-bg);\r\n  --_mono-select-border-color-preset: transparent;\r\n  --_mono-select-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* EXTENSION — underlined ≡ basecoat@1.0.2 styles/sera.css .select:not(select) > button:\r\n   rounded-none border-transparent border-b-input bg-transparent px-0, no shadow,\r\n   no ring, focus-visible:border-b-ring */\r\n[mono-select][mono-variant=\"underlined\"] {\r\n  --_mono-select-bg-preset: transparent;\r\n  --_mono-select-hover-bg-preset: transparent;\r\n  --_mono-select-side-border-color-preset: transparent;\r\n  --_mono-select-shadow-preset: 0 0 #0000;\r\n  --_mono-select-ring-width-preset: 0px;\r\n  --_mono-select-radius-preset: 0;\r\n  --_mono-select-padding-x-preset: 0;\r\n}\r\n\r\n/* =========================================\r\n   Colours — the `color` prop is the FOCUS colour (ring + focused border)\r\n   ========================================= */\r\n\r\n[mono-select]:is(:not([mono-color]), [mono-color=\"primary\"]) {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-primary);\r\n}\r\n[mono-select][mono-color=\"secondary\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-secondary);\r\n}\r\n[mono-select][mono-color=\"success\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-success);\r\n}\r\n[mono-select][mono-color=\"danger\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-danger);\r\n}\r\n[mono-select][mono-color=\"warning\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-warning);\r\n}\r\n[mono-select][mono-color=\"info\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-info);\r\n}\r\n[mono-select][mono-color=\"teal\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-teal);\r\n}\r\n[mono-select][mono-color=\"purple\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-purple);\r\n}\r\n[mono-select][mono-color=\"neutral\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-neutral);\r\n}\r\n[mono-select][mono-color=\"dark\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-dark);\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > label, .label — flex items-center\r\n   gap-2 text-sm leading-none font-medium select-none w-fit */\r\n[mono-select] > [mono-label] {\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  margin: 0 0 var(--_mono-select-gap-y);\r\n  gap: var(--mono-select-label-gap, calc(var(--mono-spacing) * 2));\r\n  font-size: var(--mono-select-label-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-label-line-height, 1);\r\n  font-weight: var(--mono-select-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  text-transform: var(--mono-select-label-text-transform, none);\r\n  letter-spacing: var(--mono-select-label-letter-spacing, normal);\r\n  color: var(--_mono-select-text);\r\n  user-select: none;\r\n}\r\n\r\n[mono-select][mono-disabled] > [mono-label] {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field — data-invalid:text-destructive */\r\n[mono-select][mono-validation-state=\"invalid\"] > [mono-label] {\r\n  color: var(--_mono-select-invalid);\r\n}\r\n\r\n[mono-select] [mono-required-mark] {\r\n  color: var(--_mono-select-danger);\r\n}\r\n\r\n/* =========================================\r\n   The trigger — the bordered box (a <button>, or a <div> holding the combobox input)\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) > button */\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button — h-9 gap-1.5\r\n   rounded-md border border-input bg-transparent py-2 ps-2.5 pe-2 text-sm shadow-xs\r\n   focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50\r\n   aria-invalid:… dark:hover:bg-input/50; mono: `--tw-ring-*` flattened to the\r\n   ring + shadow slots, the height is the control token (no block padding — the\r\n   token owns the height), the side edges read their own slot */\r\n[mono-select] > [mono-trigger] {\r\n  --_mono-select-bc: var(--_mono-select-border-color);\r\n  --_mono-select-side-bc: var(--mono-select-side-border-color, var(--_mono-select-side-border-color-preset, var(--_mono-select-bc)));\r\n  --_mono-select-ring: 0 0 #0000;\r\n\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: var(--_mono-select-gap);\r\n  width: 100%;\r\n  min-width: 0;\r\n  min-height: var(--_mono-select-height);\r\n  margin: 0;\r\n  padding-block: var(--mono-select-padding-y, 0);\r\n  padding-inline: var(--_mono-select-padding-start) var(--_mono-select-padding-end);\r\n  outline-style: none;\r\n  border: var(--mono-border-width) solid var(--_mono-select-bc);\r\n  border-top-color: var(--_mono-select-side-bc);\r\n  border-inline-color: var(--_mono-select-side-bc);\r\n  border-radius: var(--_mono-select-radius);\r\n  background: var(--_mono-select-bg);\r\n  color: var(--_mono-select-text);\r\n  box-shadow: var(--_mono-select-ring), var(--_mono-select-shadow);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-select-font-size);\r\n  line-height: var(--_mono-select-line-height);\r\n  font-weight: var(--mono-font-weight-normal);\r\n  white-space: nowrap;\r\n  text-align: start;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  transition-property: color, box-shadow, border-color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n\r\n  &:focus,\r\n  &:focus-visible,\r\n  &:focus-within {\r\n    outline: none !important;\r\n  }\r\n\r\n  /* focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 —\r\n     the combobox form is a <div> whose <input> takes focus, hence :focus-within */\r\n  &:focus-visible,\r\n  &:focus-within {\r\n    --_mono-select-bc: var(--_mono-select-ring-color);\r\n    --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) color-mix(in oklab, var(--_mono-select-ring-color) var(--_mono-select-ring-alpha), transparent);\r\n  }\r\n\r\n  & svg,\r\n  & [mono-icon] {\r\n    pointer-events: none;\r\n    flex-shrink: 0;\r\n  }\r\n}\r\n\r\n/* dark:hover:bg-input/50 (light: none) — carried by --mono-mode-field-hover-bg */\r\n@media (hover: hover) {\r\n  [mono-select]:not([mono-disabled]):not([mono-readonly]):not([mono-ds-loading]) > [mono-trigger]:hover {\r\n    background: var(--_mono-select-hover-bg);\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button — aria-invalid:border-destructive\r\n   aria-invalid:ring-3 aria-invalid:ring-destructive/20 (dark: /50, /40 via the mode tokens) */\r\n[mono-select][mono-validation-state=\"invalid\"] > [mono-trigger],\r\n[mono-select] > [mono-trigger][aria-invalid=\"true\"] {\r\n  --_mono-select-bc: var(--mono-mode-invalid-border);\r\n  --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* EXTENSION — valid / warning are the invalid pattern in the role's colour */\r\n[mono-select][mono-validation-state=\"valid\"] > [mono-trigger] {\r\n  --_mono-select-bc: color-mix(in oklab, var(--_mono-select-valid) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) color-mix(in oklab, var(--_mono-select-valid) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n[mono-select][mono-validation-state=\"warning\"] > [mono-trigger] {\r\n  --_mono-select-bc: color-mix(in oklab, var(--_mono-select-warning) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) color-mix(in oklab, var(--_mono-select-warning) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n/* EXTENSION — the bound dataSource failed: the invalid outline ONLY. Label,\r\n   message and validation state stay as they are; it is not a validation error. */\r\n[mono-select][mono-ds-error] > [mono-trigger] {\r\n  --_mono-select-bc: var(--mono-select-ds-error-border, var(--mono-mode-invalid-border));\r\n  --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) var(--mono-select-ds-error-ring, var(--mono-mode-invalid-ring));\r\n}\r\n\r\n[mono-select] [mono-value][mono-ds-error-text] {\r\n  color: var(--mono-select-ds-error-text, var(--_mono-select-invalid));\r\n}\r\n\r\n/* EXTENSION — the first load (or a retry) is in flight: read-only, no hover */\r\n[mono-select][mono-ds-loading] > [mono-trigger] {\r\n  cursor: progress;\r\n}\r\n\r\n/* EXTENSION — readonly: focusable, on a muted surface, no gestures */\r\n[mono-select][mono-readonly] > [mono-trigger] {\r\n  background: var(--mono-select-readonly-bg, var(--muted));\r\n  cursor: default;\r\n}\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) > button — disabled:\r\n   pointer-events-none cursor-not-allowed opacity-50 */\r\n[mono-select][mono-disabled] > [mono-trigger],\r\n[mono-select] > [mono-trigger]:disabled,\r\n/* a raw readonly select can only disable its native <select>; the root attribute wins */\r\n[mono-select]:not([mono-readonly]) > [mono-trigger]:has(> [mono-native]:disabled) {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n  background: var(--mono-select-disabled-bg, var(--_mono-select-bg));\r\n}\r\n\r\n/* =========================================\r\n   Value / search field / native <select>\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) > button > span —\r\n   flex flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-start */\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button > span — gap-1.5 */\r\n[mono-select] [mono-value] {\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-select-gap);\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  text-align: start;\r\n  color: var(--_mono-select-text);\r\n}\r\n\r\n[mono-select] [mono-value] > span {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n[mono-select] [mono-value][mono-placeholder] {\r\n  color: var(--_mono-select-placeholder);\r\n}\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox > input[role='combobox'] — the\r\n   search input lives INSIDE our trigger box, so it is borderless like\r\n   .input-group > input and the box around it carries the chrome */\r\n[mono-select] [mono-search-field],\r\n[mono-select] [mono-native] {\r\n  flex: 1 1 auto;\r\n  width: 100%;\r\n  min-width: 0;\r\n  align-self: stretch;\r\n  appearance: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 0;\r\n  outline: none;\r\n  background: transparent;\r\n  box-shadow: none;\r\n  color: var(--_mono-select-text);\r\n  font: inherit;\r\n  line-height: var(--_mono-select-line-height);\r\n\r\n  &:focus,\r\n  &:focus-visible {\r\n    outline: none !important;\r\n  }\r\n\r\n  &::placeholder {\r\n    color: var(--_mono-select-placeholder);\r\n  }\r\n\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n}\r\n\r\n[mono-select] [mono-search-field] {\r\n  cursor: text;\r\n}\r\n\r\n[mono-select] [mono-native] {\r\n  cursor: inherit;\r\n}\r\n\r\n[mono-select] [mono-native] option {\r\n  color: var(--_mono-select-text);\r\n  background: var(--popover);\r\n}\r\n\r\n/* =========================================\r\n   Actions — the chevron and the clear button\r\n   ========================================= */\r\n\r\n[mono-select] [mono-actions] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--mono-spacing);\r\n  flex-shrink: 0;\r\n  line-height: 1;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button > svg — size-4\r\n   text-muted-foreground; mono: the glyph sits in a square action box so the\r\n   chevron and the clear button occupy the same gutter */\r\n/* basecoat@1.0.2 components/combobox.css .combobox [data-clear] — size-6 border-0\r\n   bg-transparent p-0 text-current */\r\n[mono-select] [mono-arrow],\r\n[mono-select] [mono-clear],\r\n[mono-select] [mono-ds-retry],\r\n[mono-select] [mono-ds-spinner] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  width: var(--_mono-select-action);\r\n  height: var(--_mono-select-action);\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--mono-select-clear-radius, calc(var(--radius) - 5px));\r\n  background: transparent;\r\n  color: var(--_mono-select-muted);\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  transition-property: color, background-color, transform;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n[mono-select] :is([mono-arrow], [mono-clear], [mono-ds-retry], [mono-ds-spinner]) > :is(svg, .mono-icon, [mono-icon]) {\r\n  display: block;\r\n  width: var(--_mono-select-icon);\r\n  height: var(--_mono-select-icon);\r\n  pointer-events: none;\r\n}\r\n\r\n/* EXTENSION — the chevron turns while the panel is open */\r\n[mono-select][mono-open] [mono-arrow] > :is(svg, .mono-icon, [mono-icon]) {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted\r\n   hover:text-foreground (dark:hover:bg-muted/50 via --mono-mode-ghost-hover) */\r\n@media (hover: hover) {\r\n  [mono-select] :is([mono-arrow], [mono-clear], [mono-ds-retry]):hover {\r\n    background: var(--mono-mode-ghost-hover);\r\n    color: var(--_mono-select-text);\r\n  }\r\n}\r\n\r\n/* EXTENSION — dataSource state glyphs: the busy arc spins, the ↻ wears the\r\n   error colour so it reads as the way out of the red field */\r\n[mono-select] [mono-ds-spinner] {\r\n  cursor: progress;\r\n}\r\n\r\n[mono-select] [mono-ds-spinner] > svg {\r\n  animation: mono-select-spin 0.7s linear infinite;\r\n}\r\n\r\n[mono-select] [mono-ds-retry] {\r\n  color: var(--mono-select-ds-error-text, var(--_mono-select-invalid));\r\n}\r\n\r\n@keyframes mono-select-spin {\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-select] [mono-ds-spinner] > svg {\r\n    animation-duration: 2.4s;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   The panel\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] — absolute z-50 min-w-full\r\n   overflow-x-hidden; mono: `display: none` while closed (the contents are only\r\n   rendered while open), `--mono-popup-z` from the shared popup stack and\r\n   `--mono-popup-avail-h` from the portal controller cap the whole panel */\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [data-popover] — bg-popover\r\n   text-popover-foreground rounded-md shadow-md ring-1 ring-foreground/10; the\r\n   `p-1` moves to the scrolling body (the combobox layout), so the scrollbar\r\n   never paints over the padding */\r\n[mono-select] > [mono-dropdown] {\r\n  position: absolute;\r\n  /* `top: auto` = the static position: the panel follows the trigger in the DOM,\r\n     so in block flow it lands right under it (the popup controller overrides\r\n     this inline for the element; hand-written markup relies on it). */\r\n  top: auto;\r\n  /* the 6px offset as a transform: the controller writes `transform: none` inline\r\n     with its fixed position, so only the hand-written panel is pushed down */\r\n  transform: translateY(calc(var(--mono-spacing) * 1.5));\r\n  /* Both edges pinned, so the panel matches the field by default. An inline\r\n     `width` from `:dropdown.prop=\"{ width }\"` is then the over-constrained case,\r\n     which CSS resolves by ignoring `right` — the panel keeps this left edge and\r\n     takes the given width. */\r\n  left: 0;\r\n  right: 0;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  display: none;\r\n  /* Basecoat's `min-w-[max(100%,9rem)]` is relative to the .select box; a portaled\r\n     panel is position: fixed, where 100% would be the viewport — the controller\r\n     writes the anchor's width inline instead, so only the floor stays. */\r\n  min-width: var(--mono-select-dropdown-min-width, 9rem);\r\n  max-height: var(--mono-popup-avail-h, none);\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n  border-radius: var(--mono-select-dropdown-radius, var(--mono-radius-md));\r\n  background: var(--mono-select-dropdown-bg, var(--popover));\r\n  color: var(--mono-select-dropdown-color, var(--popover-foreground));\r\n  box-shadow: var(--mono-select-dropdown-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)), var(--mono-select-dropdown-shadow, var(--mono-shadow-md));\r\n  font-size: var(--mono-select-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-option-line-height, var(--mono-text-sm--lh));\r\n}\r\n\r\n[mono-select][mono-open] > [mono-dropdown] {\r\n  /* A flex column (not `block`) so the body can shrink past its own height when\r\n     the panel is clamped above. */\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox [role='listbox'] — max-h-[min(18rem,\r\n   var(--available-height,18rem))] scroll-py-1 overflow-y-auto p-1 */\r\n[mono-select] [mono-dropdown-body] {\r\n  flex: 1 1 auto;\r\n  min-height: 0;\r\n  max-height: 18rem;\r\n  padding: var(--mono-select-dropdown-padding, var(--mono-spacing));\r\n  overflow: auto;\r\n  overscroll-behavior: contain;\r\n  scroll-padding-block: var(--mono-select-dropdown-padding, var(--mono-spacing));\r\n  outline-style: none;\r\n}\r\n\r\n/* =========================================\r\n   Options\r\n   -----------------------------------------\r\n   Each rule also lists the stamped twin of a row rendered through `slot=\"list\"`\r\n   (`[data-mono-type='row']`, `[data-mono-active]`, `[data-mono-selected]`), so\r\n   the two can never drift: what you render in the slot IS an option. `:where()`\r\n   wraps only the CONTAINER, keeping the twin at attribute weight.\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) [role='option'] — relative\r\n   flex w-full cursor-default items-center overflow-hidden text-ellipsis whitespace-\r\n   nowrap outline-none select-none; disabled: pointer-events-none opacity-50 */\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='option'] — gap-2\r\n   rounded-sm py-1.5 ps-2 pe-8 text-sm, svg size-4 */\r\n[mono-select] [mono-item],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row'] {\r\n  position: relative;\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  gap: var(--mono-select-option-gap, calc(var(--mono-spacing) * 2));\r\n  margin: 0;\r\n  padding-block: var(--mono-select-option-padding-y, calc(var(--mono-spacing) * 1.5));\r\n  padding-inline: var(--mono-select-option-padding-x, calc(var(--mono-spacing) * 2)) var(--mono-select-option-padding-end, calc(var(--mono-spacing) * 8));\r\n  min-height: var(--mono-select-option-min-height, 0);\r\n  border: 0;\r\n  border-radius: var(--mono-select-option-radius, var(--mono-radius-sm));\r\n  /* longhands, so the selected row's check (a background-image) survives the\r\n     active / hover background */\r\n  background-color: transparent;\r\n  background-image: none;\r\n  color: var(--_mono-select-text);\r\n  font-family: inherit;\r\n  font-size: var(--mono-select-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-option-line-height, var(--mono-text-sm--lh));\r\n  font-weight: var(--mono-select-option-font-weight, var(--mono-font-weight-normal));\r\n  text-align: start;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  outline-style: none;\r\n  user-select: none;\r\n  cursor: default;\r\n  transition-property: color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration-fast);\r\n}\r\n\r\n/* EXTENSION: a hair of air between rows. Upstream stacks its options flush, so an\r\n   active row directly under the selected one read as ONE tall highlight; a 2px\r\n   seam keeps the two rounded-sm washes apart. `--mono-select-option-spacing`. */\r\n[mono-select] [mono-item] + [mono-item],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row'] + [data-mono-type='row'] {\r\n  margin-top: var(--mono-select-option-spacing, 2px);\r\n}\r\n\r\n[mono-select] [mono-item] svg:not([class*='size-']),\r\n[mono-select] [mono-item] .mono-icon {\r\n  width: var(--_mono-select-icon);\r\n  height: var(--_mono-select-icon);\r\n  flex-shrink: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='option'].active, .select:not(select) [role='option']:focus-visible\r\n   — bg-muted text-foreground. The keyboard cursor and the pointer share one look. */\r\n[mono-select] [mono-item][mono-active]:not([mono-disabled]):not(:disabled),\r\n[mono-select] [mono-item]:focus-visible,\r\n[mono-select] :where([mono-list-slot]) [data-mono-active] {\r\n  background-color: var(--mono-select-option-active-bg, var(--muted));\r\n  color: var(--mono-select-option-active-color, var(--_mono-select-text));\r\n}\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select):not([data-select-initialized]) [role='option']:not([aria-disabled='true']):not(:disabled):hover, .select:not(select) [role='option'].active\r\n   — the pointer highlight is NOT behind (hover: hover) upstream */\r\n[mono-select] [mono-item]:hover:not([mono-disabled]):not(:disabled),\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row']:hover {\r\n  background-color: var(--mono-select-option-active-bg, var(--muted));\r\n  color: var(--mono-select-option-active-color, var(--_mono-select-text));\r\n}\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) [role='option'][aria-selected='true']\r\n   — the --check-icon at the end (bg-size .875rem, center right .5rem) */\r\n[mono-select] [mono-item][mono-selected],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row'][data-mono-selected] {\r\n  background-image: var(--mono-select-check-icon, var(--check-icon));\r\n  background-size: var(--mono-select-check-size, 0.875rem);\r\n  background-position: center right calc(var(--mono-spacing) * 2);\r\n  background-repeat: no-repeat;\r\n  font-weight: var(--mono-select-option-selected-font-weight, var(--mono-select-option-font-weight, var(--mono-font-weight-normal)));\r\n}\r\n\r\n[mono-select] [mono-item][mono-selected]:dir(rtl),\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row'][data-mono-selected]:dir(rtl) {\r\n  background-position: center left calc(var(--mono-spacing) * 2);\r\n}\r\n\r\n[mono-select] [mono-item][mono-disabled],\r\n[mono-select] [mono-item]:disabled {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before\r\n   — py-6 text-center text-sm (the \"No results found\" row) */\r\n[mono-select] [mono-empty-row] {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding-block: calc(var(--mono-spacing) * 6);\r\n  padding-inline: calc(var(--mono-spacing) * 3);\r\n  font-size: var(--mono-select-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-option-line-height, var(--mono-text-sm--lh));\r\n  color: var(--_mono-select-muted);\r\n  text-align: center;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  cursor: default;\r\n  user-select: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='heading'] — px-2 py-1.5\r\n   text-xs text-muted-foreground; EXTENSION: one indent step per nesting level */\r\n[mono-select] [mono-group],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='group'] {\r\n  --_ms-group-level: 0;\r\n  padding-block: var(--mono-select-group-padding-y, calc(var(--mono-spacing) * 1.5));\r\n  padding-inline: var(--mono-select-group-padding-x, calc(var(--mono-spacing) * 2));\r\n  padding-inline-start: calc(var(--mono-select-group-padding-x, calc(var(--mono-spacing) * 2)) + var(--_ms-group-level) * calc(var(--mono-spacing) * 2));\r\n  font-size: var(--mono-select-group-font-size, var(--mono-text-xs));\r\n  line-height: var(--mono-select-group-line-height, var(--mono-text-xs--lh));\r\n  font-weight: var(--mono-select-group-font-weight, var(--mono-font-weight-normal));\r\n  text-transform: var(--mono-select-group-text-transform, none);\r\n  letter-spacing: var(--mono-select-group-letter-spacing, normal);\r\n  color: var(--_mono-select-muted);\r\n  cursor: default;\r\n  user-select: none;\r\n}\r\n\r\n[mono-select] [mono-group][mono-level='1'],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='group'][data-mono-level='1'] { --_ms-group-level: 1; }\r\n[mono-select] [mono-group][mono-level='2'],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='group'][data-mono-level='2'] { --_ms-group-level: 2; }\r\n[mono-select] [mono-group][mono-level='3'],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='group'][data-mono-level='3'] { --_ms-group-level: 3; }\r\n\r\n/* group-sticky: pin headers while their rows scroll; nested levels stack on the\r\n   panel's own surface so options scroll cleanly underneath. */\r\n[mono-select] [mono-group][mono-sticky] {\r\n  position: sticky;\r\n  top: calc(var(--_ms-group-level) * 1.5rem);\r\n  z-index: calc(5 - var(--_ms-group-level));\r\n  background: var(--mono-select-dropdown-bg, var(--popover));\r\n}\r\n\r\n/* EXTENSION — the load-more affordance: an option-shaped ghost button */\r\n[mono-select] [mono-load-more] {\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: var(--mono-select-option-gap, calc(var(--mono-spacing) * 2));\r\n  margin: 0;\r\n  padding-block: var(--mono-select-option-padding-y, calc(var(--mono-spacing) * 1.5));\r\n  padding-inline: var(--mono-select-option-padding-x, calc(var(--mono-spacing) * 2));\r\n  border: 0;\r\n  border-radius: var(--mono-select-option-radius, var(--mono-radius-sm));\r\n  background: transparent;\r\n  color: var(--_mono-select-muted);\r\n  font-family: inherit;\r\n  font-size: var(--mono-select-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-option-line-height, var(--mono-text-sm--lh));\r\n  font-weight: var(--mono-font-weight-medium);\r\n  cursor: pointer;\r\n  transition-property: color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration-fast);\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-select] [mono-load-more]:hover:not([mono-loading]) {\r\n    background-color: var(--mono-select-option-active-bg, var(--muted));\r\n    color: var(--_mono-select-text);\r\n  }\r\n}\r\n\r\n[mono-select] [mono-load-more][mono-loading] {\r\n  cursor: default;\r\n  opacity: 0.7;\r\n}\r\n\r\n/* Consumer-rendered option rows (slot=\"list\"). `display: contents` so mono's own\r\n   placement wrapper generates no box: the rows the consumer writes lay out as if\r\n   they were direct children of the panel. */\r\n[mono-select] [mono-list-slot] {\r\n  display: contents;\r\n}\r\n\r\n/* =========================================\r\n   Message — helper / validation text under the field\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p\r\n   — text-sm text-muted-foreground leading-normal font-normal */\r\n[mono-select] > [mono-message-wrap] {\r\n  display: block;\r\n  margin-top: var(--_mono-select-gap-y);\r\n}\r\n\r\n[mono-select] > [mono-message-wrap]:not(:has([mono-message]:not([mono-empty]))) {\r\n  display: none;\r\n}\r\n\r\n[mono-select] [mono-message] {\r\n  font-size: var(--mono-select-message-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-message-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-font-weight-normal);\r\n  text-align: start;\r\n  color: var(--_mono-select-muted);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field [role=\"alert\"] — text-destructive text-sm */\r\n[mono-select] [mono-message=\"invalid\"] {\r\n  color: var(--_mono-select-invalid);\r\n}\r\n\r\n[mono-select] [mono-message=\"valid\"] {\r\n  color: var(--_mono-select-valid);\r\n}\r\n\r\n[mono-select] [mono-message=\"warning\"] {\r\n  color: var(--_mono-select-warning);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-select] > [mono-trigger],\r\n  [mono-select] [mono-arrow],\r\n  [mono-select] [mono-clear],\r\n  [mono-select] [mono-item] {\r\n    transition: none;\r\n  }\r\n}\r\n";
+var select_css_raw_default = "/* =========================================================================\r\n   mono-select — a port of Basecoat's `.select` (the custom one, `.select:not(select)`)\r\n   and `.combobox` (basecoat-css@1.0.2, vega style), on the `.field` / `.label`\r\n   chrome mono-input already ported.\r\n\r\n   Styled by ATTRIBUTE, like Basecoat (`.select > button`, `[role='option'].active`)\r\n   — and the attributes mirror the element's props one for one, so hand-written\r\n   markup reads like the Lit / Vue tag:\r\n\r\n     <mono-select size=\"sm\" color=\"danger\" variant=\"filled\" label=\"Fruit\">\r\n     <div mono-select mono-size=\"sm\" mono-color=\"danger\" mono-variant=\"filled\">\r\n       <label mono-label>Fruit</label>\r\n       <button mono-trigger><span mono-value mono-placeholder>Pick</span>\r\n         <span mono-actions><span mono-arrow>…</span></span></button>\r\n       <div mono-dropdown><div mono-dropdown-body><button mono-item>…</button></div></div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary, `:not([mono-variant])` = outlined). The element\r\n   renders these attributes on its wrapper (both builds) plus `mono-open` while\r\n   the panel is open; the old classes (`.mono-select.sm.open`) are still emitted\r\n   as inert hooks for consumer CSS until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-select]                                 ≡ .field (gap-3, as margins — see the root rule) + .select (position: relative)\r\n     [mono-select] > [mono-label]                  ≡ .field > label / .label\r\n     [mono-select] > [mono-trigger]                ≡ .select > button          (h-9 rounded-md border-input ps-2.5 pe-2 text-sm shadow-xs)\r\n     [mono-select][mono-searchable] > [mono-trigger] ≡ .combobox > input[role='combobox'] (same box; the input sits inside it)\r\n     [mono-trigger] > [mono-value]                 ≡ .select > button > span    (flex-1 truncate text-start)\r\n     [mono-trigger] > [mono-native]                ≡ EXTENSION — a plain <select> may stand in for the value + panel (appearance: none)\r\n     [mono-actions] > [mono-arrow] > [mono-icon]   ≡ .select > button > svg     (size-4 text-muted-foreground)\r\n     [mono-actions] > [mono-clear]                 ≡ .combobox [data-clear]     (size-6, painted as .btn[data-variant='ghost'])\r\n     [mono-dropdown]                               ≡ .select [data-popover]     (bg-popover ring-1 ring-foreground/10 rounded-md shadow-md)\r\n     [mono-dropdown-body]                          ≡ .combobox [role='listbox'] (max-h-72 overflow-y-auto p-1 scroll-py-1)\r\n     [mono-item]                                   ≡ .select [role='option']    (gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm)\r\n     [mono-item][mono-active] / :hover             ≡ [role='option'].active     (bg-muted text-foreground)\r\n     [mono-item][mono-selected]                    ≡ [role='option'][aria-selected='true'] (the --check-icon at the end)\r\n     [mono-group]                                  ≡ .select [role='heading']   (px-2 py-1.5 text-xs text-muted-foreground)\r\n     [mono-empty-row]                              ≡ .select [role='listbox']::before (py-6 text-center text-sm)\r\n     [mono-load-more]                              ≡ EXTENSION (an option-shaped ghost button)\r\n     [mono-message-wrap] > [mono-message]          ≡ .field > p / .field [role='alert']\r\n     [mono-validation-state=\"invalid\"]             ≡ .select > button[aria-invalid='true']\r\n     [mono-validation-state=\"valid|warning\"]       ≡ EXTENSION (the invalid pattern in --success / --warning)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION (Basecoat has only data-size=sm; the ladder is --mono-control-height-*)\r\n     [mono-variant=\"filled\"]                       ≡ EXTENSION (luma's .select > button: border-transparent bg-input/50)\r\n     [mono-variant=\"underlined\"]                   ≡ EXTENSION (sera's: rounded-none border-b-input px-0, no ring)\r\n\r\n   Inner parts are attributes too: [mono-label] (+ [mono-required-mark]),\r\n   [mono-trigger], [mono-value] (+ [mono-placeholder]), [mono-search-field],\r\n   [mono-native], [mono-actions], [mono-clear], [mono-arrow], [mono-icon],\r\n   [mono-dropdown], [mono-dropdown-body], [mono-item] (+ [mono-active] /\r\n   [mono-selected] / [mono-disabled]), [mono-group] (+ [mono-sticky],\r\n   [mono-level=\"n\"]), [mono-empty-row], [mono-load-more] (+ [mono-loading]),\r\n   [mono-list-slot], [mono-message-wrap] > [mono-message=\"helper|valid|invalid|warning\"].\r\n   The shadow build marks an unassigned slot wrapper [mono-empty].\r\n\r\n   THE PANEL IS PORTALED. The light build moves [mono-dropdown] into a\r\n   `<div data-mono-popup-portal>` under <body> while open (composables/popup-\r\n   portal.ts), and the portal mirrors the wrapper's class AND its mono-*\r\n   attributes — so `[mono-select] > [mono-dropdown]` keeps matching there and\r\n   the `--_mono-select-*` resolvers declared on `[mono-select]` re-resolve on\r\n   the portal. Nothing here may rely on the panel being inside the trigger's\r\n   host, and every option rule is scoped under `[mono-select]`.\r\n\r\n   Values are copied from the compiled vendor sheet (vendor/basecoat/basecoat-\r\n   vega.cdn.css) through the token layer; `dark:` variants travel as\r\n   `--mono-mode-*` tokens (a selector cannot cross a shadow boundary; an\r\n   inherited custom property can). FLAVORS set the `--mono-select-*` knobs read\r\n   below — the same set as mono-input (`--mono-select-outline-*` for the outlined\r\n   variant alone) plus `--mono-select-dropdown-{radius,padding,shadow,ring}`,\r\n   `--mono-select-option-{radius,padding-x,padding-y,font-size,line-height,gap,font-weight}`,\r\n   `--mono-select-group-*`, `--mono-select-icon-size`. Every fallback here is vega's\r\n   value (`node scripts/basecoat-styles.mjs --varying \"^(\\.select:not\\(select\\)|\\.combobox)\"`).\r\n   ========================================================================= */\r\n\r\nmono-select {\r\n  display: block;\r\n}\r\n\r\n[mono-select] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-select-text: var(--mono-select-color, var(--mono-select-text, var(--foreground)));\r\n  --_mono-select-placeholder: var(--mono-select-placeholder, var(--muted-foreground));\r\n  --_mono-select-muted: var(--mono-select-muted, var(--muted-foreground));\r\n  --_mono-select-primary: var(--mono-select-primary, var(--ring));\r\n  --_mono-select-secondary: var(--mono-select-secondary, var(--muted-foreground));\r\n  --_mono-select-success: var(--mono-select-success, var(--success));\r\n  --_mono-select-danger: var(--mono-select-danger, var(--destructive));\r\n  --_mono-select-warning: var(--mono-select-warning, var(--warning));\r\n  --_mono-select-info: var(--mono-select-info, var(--info));\r\n  --_mono-select-teal: var(--mono-select-teal, var(--teal));\r\n  --_mono-select-purple: var(--mono-select-purple, var(--purple));\r\n  --_mono-select-neutral: var(--mono-select-neutral, var(--neutral));\r\n  --_mono-select-dark: var(--mono-select-dark, var(--dark));\r\n  --_mono-select-valid: var(--mono-select-valid, var(--success));\r\n  --_mono-select-invalid: var(--mono-select-invalid, var(--destructive));\r\n\r\n  /* ── the painted result — three tiers, base = .select > button (vega) ─── */\r\n  --_mono-select-ring-color: var(--mono-select-ring-color, var(--mono-select-focus-color, var(--_mono-select-ring-color-preset, var(--_mono-select-primary))));\r\n  --_mono-select-ring-width: var(--mono-select-ring-width, var(--_mono-select-ring-width-preset, var(--mono-ring-width)));\r\n  --_mono-select-ring-alpha: var(--mono-select-ring-alpha, var(--mono-ring-alpha));\r\n  --_mono-select-border-color: var(--mono-select-rest-border, var(--mono-select-border-color, var(--mono-select-border, var(--_mono-select-border-color-preset, var(--input)))));\r\n  --_mono-select-bg: var(--mono-select-bg, var(--mono-select-surface, var(--_mono-select-bg-preset, var(--mono-mode-surface))));\r\n  --_mono-select-hover-bg: var(--mono-select-hover-bg, var(--_mono-select-hover-bg-preset, var(--_mono-select-bg)));\r\n  --_mono-select-shadow: var(--mono-select-shadow, var(--_mono-select-shadow-preset, 0 0 #0000));\r\n  --_mono-select-icon: var(--mono-select-icon-size, calc(var(--mono-spacing) * 4));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\r\n        `<div mono-select>` that names no size renders exactly like size=\"md\".\r\n        basecoat@1.0.2 styles/vega.css .select:not(select) > button — h-9 gap-1.5\r\n        rounded-md ps-2.5 pe-2 text-sm ── */\r\n  --_mono-select-height: var(--mono-select-height-md, var(--mono-control-height-md));\r\n  --_mono-select-radius: var(--mono-select-radius-md, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-md, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-md, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-select-gap: var(--mono-select-trigger-gap, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-select-font-size: var(--mono-select-font-md, var(--mono-text-sm));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-md, var(--mono-text-sm--lh)));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 6);\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3; mono: BLOCK\r\n     flow with the gap as margins, so a hand-written panel that no controller\r\n     positions lands at its static position — right under the trigger, above the\r\n     message — instead of a flex container's content-box top */\r\n  --_mono-select-gap-y: var(--mono-select-gap, calc(var(--mono-spacing) * 3));\r\n  position: relative;\r\n  display: block;\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-select-text);\r\n}\r\n\r\n/* A page-level `* { box-sizing: border-box }` reset does NOT cross a shadow\r\n   boundary; scoped here so both builds measure the same. */\r\n[mono-select],\r\n[mono-select] *,\r\n[mono-select] *::before,\r\n[mono-select] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n[mono-select] :is([mono-label], [mono-message])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — the trigger's painted height IS the token (tests/perf/field-heights)\r\n   EXTENSION: Basecoat's select has only data-size=sm; the ladder is the shared\r\n   --mono-control-height-* scale and the text follows .btn's steps.\r\n   ========================================= */\r\n\r\n[mono-select][mono-size=\"xs\"] {\r\n  --_mono-select-height: var(--mono-select-height-xs, var(--mono-control-height-xs));\r\n  --_mono-select-radius: var(--mono-select-radius-xs, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-xs, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-xs, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 1.5))));\r\n  --_mono-select-gap: var(--mono-select-trigger-gap, var(--mono-spacing));\r\n  --_mono-select-font-size: var(--mono-select-font-xs, var(--mono-text-xs));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-xs, var(--mono-text-xs--lh)));\r\n  --_mono-select-icon: var(--mono-select-icon-size, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button — data-[size=sm]:h-8 */\r\n[mono-select][mono-size=\"sm\"] {\r\n  --_mono-select-height: var(--mono-select-height-sm, var(--mono-control-height-sm));\r\n  --_mono-select-radius: var(--mono-select-radius-sm, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-sm, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-sm, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-select-font-size: var(--mono-select-font-sm, var(--mono-select-font-md, var(--mono-text-sm)));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-sm, var(--mono-text-sm--lh)));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 5);\r\n}\r\n\r\n[mono-select][mono-size=\"lg\"] {\r\n  --_mono-select-height: var(--mono-select-height-lg, var(--mono-control-height-lg));\r\n  --_mono-select-radius: var(--mono-select-radius-lg, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-lg, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-lg, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-select-font-size: var(--mono-select-font-lg, var(--mono-select-font-md, var(--mono-text-sm)));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-lg, var(--mono-text-sm--lh)));\r\n}\r\n\r\n[mono-select][mono-size=\"xl\"] {\r\n  --_mono-select-height: var(--mono-select-height-xl, var(--mono-control-height-xl));\r\n  --_mono-select-radius: var(--mono-select-radius-xl, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-xl, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 3))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-xl, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-select-gap: var(--mono-select-trigger-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-select-font-size: var(--mono-select-font-xl, var(--mono-text-base));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-xl, var(--mono-text-base--lh)));\r\n  --_mono-select-icon: var(--mono-select-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 7);\r\n}\r\n\r\n[mono-select][mono-size=\"xxl\"] {\r\n  --_mono-select-height: var(--mono-select-height-xxl, var(--mono-control-height-xxl));\r\n  --_mono-select-radius: var(--mono-select-radius-xxl, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-xxl, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 4))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-xxl, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 3))));\r\n  --_mono-select-gap: var(--mono-select-trigger-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-select-font-size: var(--mono-select-font-xxl, var(--mono-text-lg));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-xxl, var(--mono-text-lg--lh)));\r\n  --_mono-select-icon: var(--mono-select-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 8);\r\n}\r\n\r\n/* =========================================\r\n   Variants — each writes only `*-preset` slots\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button — rounded-md border\r\n   border-input bg-transparent shadow-xs (dark:bg-input/30 dark:hover:bg-input/50\r\n   via the mode tokens). `--mono-select-outline-*` restyle THIS variant alone. */\r\n[mono-select]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\r\n  --_mono-select-bg-preset: var(--mono-select-outline-bg);\r\n  --_mono-select-hover-bg-preset: var(--mono-select-outline-hover-bg, var(--mono-mode-field-hover-bg));\r\n  --_mono-select-border-color-preset: var(--mono-select-outline-border-color);\r\n  --_mono-select-side-border-color-preset: var(--mono-select-outline-side-border-color);\r\n  --_mono-select-shadow-preset: var(--mono-select-outline-shadow, var(--mono-shadow-xs));\r\n  --_mono-select-ring-width-preset: var(--mono-select-outline-ring-width);\r\n  --_mono-select-radius-preset: var(--mono-select-outline-radius);\r\n  --_mono-select-padding-x-preset: var(--mono-select-outline-padding-x);\r\n}\r\n\r\n/* EXTENSION — filled ≡ basecoat@1.0.2 styles/luma.css .select:not(select) > button:\r\n   border-transparent bg-input/50, no shadow-xs, no hover */\r\n[mono-select][mono-variant=\"filled\"] {\r\n  --_mono-select-bg-preset: var(--mono-select-filled-bg, color-mix(in oklab, var(--input) 50%, transparent));\r\n  --_mono-select-hover-bg-preset: var(--_mono-select-bg);\r\n  --_mono-select-border-color-preset: transparent;\r\n  --_mono-select-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* EXTENSION — underlined ≡ basecoat@1.0.2 styles/sera.css .select:not(select) > button:\r\n   rounded-none border-transparent border-b-input bg-transparent px-0, no shadow,\r\n   no ring, focus-visible:border-b-ring */\r\n[mono-select][mono-variant=\"underlined\"] {\r\n  --_mono-select-bg-preset: transparent;\r\n  --_mono-select-hover-bg-preset: transparent;\r\n  --_mono-select-side-border-color-preset: transparent;\r\n  --_mono-select-shadow-preset: 0 0 #0000;\r\n  --_mono-select-ring-width-preset: 0px;\r\n  --_mono-select-radius-preset: 0;\r\n  --_mono-select-padding-x-preset: 0;\r\n}\r\n\r\n/* =========================================\r\n   Colours — the `color` prop is the FOCUS colour (ring + focused border)\r\n   ========================================= */\r\n\r\n[mono-select]:is(:not([mono-color]), [mono-color=\"primary\"]) {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-primary);\r\n}\r\n[mono-select][mono-color=\"secondary\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-secondary);\r\n}\r\n[mono-select][mono-color=\"success\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-success);\r\n}\r\n[mono-select][mono-color=\"danger\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-danger);\r\n}\r\n[mono-select][mono-color=\"warning\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-warning);\r\n}\r\n[mono-select][mono-color=\"info\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-info);\r\n}\r\n[mono-select][mono-color=\"teal\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-teal);\r\n}\r\n[mono-select][mono-color=\"purple\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-purple);\r\n}\r\n[mono-select][mono-color=\"neutral\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-neutral);\r\n}\r\n[mono-select][mono-color=\"dark\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-dark);\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > label, .label — flex items-center\r\n   gap-2 text-sm leading-none font-medium select-none w-fit */\r\n[mono-select] > [mono-label] {\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  margin: 0 0 var(--_mono-select-gap-y);\r\n  gap: var(--mono-select-label-gap, calc(var(--mono-spacing) * 2));\r\n  font-size: var(--mono-select-label-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-label-line-height, 1);\r\n  font-weight: var(--mono-select-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  text-transform: var(--mono-select-label-text-transform, none);\r\n  letter-spacing: var(--mono-select-label-letter-spacing, normal);\r\n  color: var(--_mono-select-text);\r\n  user-select: none;\r\n}\r\n\r\n[mono-select][mono-disabled] > [mono-label] {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field — data-invalid:text-destructive */\r\n[mono-select][mono-validation-state=\"invalid\"] > [mono-label] {\r\n  color: var(--_mono-select-invalid);\r\n}\r\n\r\n[mono-select] [mono-required-mark] {\r\n  color: var(--_mono-select-danger);\r\n}\r\n\r\n/* `tooltip` prop — the info icon at the end of the label row (the label's\r\n   flex gap spaces it). `pointer-events` is restored because a disabled field\r\n   switches its label's off, and a disabled field is exactly where the reason\r\n   is worth a hover. Knobs: --mono-select-label-tooltip-size / -color / -opacity. */\r\n:where([mono-select]) > [mono-label] > [mono-label-tooltip] {\r\n  display: inline-flex;\r\n  flex: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: var(--mono-select-label-tooltip-size, 1.1em);\r\n  color: var(--mono-select-label-tooltip-color, currentColor);\r\n  opacity: var(--mono-select-label-tooltip-opacity, 0.6);\r\n  border-radius: 9999px;\r\n  cursor: help;\r\n  pointer-events: auto;\r\n  outline: none;\r\n  transition: opacity 150ms ease;\r\n}\r\n\r\n:where([mono-select]) > [mono-label] > [mono-label-tooltip]:is(:hover, :focus-visible) {\r\n  opacity: 1;\r\n}\r\n\r\n:where([mono-select]) > [mono-label] > [mono-label-tooltip]:focus-visible {\r\n  outline: 2px solid currentColor;\r\n  outline-offset: 2px;\r\n}\r\n\r\n:where([mono-select]) > [mono-label] > [mono-label-tooltip] > [mono-icon] {\r\n  width: 1em;\r\n  height: 1em;\r\n}\r\n\r\n/* =========================================\r\n   The trigger — the bordered box (a <button>, or a <div> holding the combobox input)\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) > button */\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button — h-9 gap-1.5\r\n   rounded-md border border-input bg-transparent py-2 ps-2.5 pe-2 text-sm shadow-xs\r\n   focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50\r\n   aria-invalid:… dark:hover:bg-input/50; mono: `--tw-ring-*` flattened to the\r\n   ring + shadow slots, the height is the control token (no block padding — the\r\n   token owns the height), the side edges read their own slot */\r\n[mono-select] > [mono-trigger] {\r\n  --_mono-select-bc: var(--_mono-select-border-color);\r\n  --_mono-select-side-bc: var(--mono-select-side-border-color, var(--_mono-select-side-border-color-preset, var(--_mono-select-bc)));\r\n  --_mono-select-ring: 0 0 #0000;\r\n\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: var(--_mono-select-gap);\r\n  width: 100%;\r\n  min-width: 0;\r\n  min-height: var(--_mono-select-height);\r\n  margin: 0;\r\n  padding-block: var(--mono-select-padding-y, 0);\r\n  padding-inline: var(--_mono-select-padding-start) var(--_mono-select-padding-end);\r\n  outline-style: none;\r\n  border: var(--mono-border-width) solid var(--_mono-select-bc);\r\n  border-top-color: var(--_mono-select-side-bc);\r\n  border-inline-color: var(--_mono-select-side-bc);\r\n  border-radius: var(--_mono-select-radius);\r\n  background: var(--_mono-select-bg);\r\n  color: var(--_mono-select-text);\r\n  box-shadow: var(--_mono-select-ring), var(--_mono-select-shadow);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-select-font-size);\r\n  line-height: var(--_mono-select-line-height);\r\n  font-weight: var(--mono-font-weight-normal);\r\n  white-space: nowrap;\r\n  text-align: start;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  transition-property: color, box-shadow, border-color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n\r\n  &:focus,\r\n  &:focus-visible,\r\n  &:focus-within {\r\n    outline: none !important;\r\n  }\r\n\r\n  /* focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 —\r\n     the combobox form is a <div> whose <input> takes focus, hence :focus-within */\r\n  &:focus-visible,\r\n  &:focus-within {\r\n    --_mono-select-bc: var(--_mono-select-ring-color);\r\n    --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) color-mix(in oklab, var(--_mono-select-ring-color) var(--_mono-select-ring-alpha), transparent);\r\n  }\r\n\r\n  & svg,\r\n  & [mono-icon] {\r\n    pointer-events: none;\r\n    flex-shrink: 0;\r\n  }\r\n}\r\n\r\n/* dark:hover:bg-input/50 (light: none) — carried by --mono-mode-field-hover-bg */\r\n@media (hover: hover) {\r\n  [mono-select]:not([mono-disabled]):not([mono-readonly]):not([mono-ds-loading]) > [mono-trigger]:hover {\r\n    background: var(--_mono-select-hover-bg);\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button — aria-invalid:border-destructive\r\n   aria-invalid:ring-3 aria-invalid:ring-destructive/20 (dark: /50, /40 via the mode tokens) */\r\n[mono-select][mono-validation-state=\"invalid\"] > [mono-trigger],\r\n[mono-select] > [mono-trigger][aria-invalid=\"true\"] {\r\n  --_mono-select-bc: var(--mono-mode-invalid-border);\r\n  --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* EXTENSION — valid / warning are the invalid pattern in the role's colour */\r\n[mono-select][mono-validation-state=\"valid\"] > [mono-trigger] {\r\n  --_mono-select-bc: color-mix(in oklab, var(--_mono-select-valid) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) color-mix(in oklab, var(--_mono-select-valid) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n[mono-select][mono-validation-state=\"warning\"] > [mono-trigger] {\r\n  --_mono-select-bc: color-mix(in oklab, var(--_mono-select-warning) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) color-mix(in oklab, var(--_mono-select-warning) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n/* EXTENSION — the bound dataSource failed: the invalid outline ONLY. Label,\r\n   message and validation state stay as they are; it is not a validation error. */\r\n[mono-select][mono-ds-error] > [mono-trigger] {\r\n  --_mono-select-bc: var(--mono-select-ds-error-border, var(--mono-mode-invalid-border));\r\n  --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) var(--mono-select-ds-error-ring, var(--mono-mode-invalid-ring));\r\n}\r\n\r\n[mono-select] [mono-value][mono-ds-error-text] {\r\n  color: var(--mono-select-ds-error-text, var(--_mono-select-invalid));\r\n}\r\n\r\n/* EXTENSION — the first load (or a retry) is in flight: read-only, no hover */\r\n[mono-select][mono-ds-loading] > [mono-trigger] {\r\n  cursor: progress;\r\n}\r\n\r\n/* EXTENSION — readonly: focusable, on a muted surface, no gestures */\r\n[mono-select][mono-readonly] > [mono-trigger] {\r\n  background: var(--mono-select-readonly-bg, var(--muted));\r\n  cursor: default;\r\n}\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) > button — disabled:\r\n   pointer-events-none cursor-not-allowed opacity-50 */\r\n[mono-select][mono-disabled] > [mono-trigger],\r\n[mono-select] > [mono-trigger]:disabled,\r\n/* a raw readonly select can only disable its native <select>; the root attribute wins */\r\n[mono-select]:not([mono-readonly]) > [mono-trigger]:has(> [mono-native]:disabled) {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n  background: var(--mono-select-disabled-bg, var(--_mono-select-bg));\r\n}\r\n\r\n/* =========================================\r\n   Value / search field / native <select>\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) > button > span —\r\n   flex flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-start */\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button > span — gap-1.5 */\r\n[mono-select] [mono-value] {\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-select-gap);\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  text-align: start;\r\n  color: var(--_mono-select-text);\r\n}\r\n\r\n[mono-select] [mono-value] > span {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n[mono-select] [mono-value][mono-placeholder] {\r\n  color: var(--_mono-select-placeholder);\r\n}\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox > input[role='combobox'] — the\r\n   search input lives INSIDE our trigger box, so it is borderless like\r\n   .input-group > input and the box around it carries the chrome */\r\n[mono-select] [mono-search-field],\r\n[mono-select] [mono-native] {\r\n  flex: 1 1 auto;\r\n  width: 100%;\r\n  min-width: 0;\r\n  align-self: stretch;\r\n  appearance: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 0;\r\n  outline: none;\r\n  background: transparent;\r\n  box-shadow: none;\r\n  color: var(--_mono-select-text);\r\n  font: inherit;\r\n  line-height: var(--_mono-select-line-height);\r\n\r\n  &:focus,\r\n  &:focus-visible {\r\n    outline: none !important;\r\n  }\r\n\r\n  &::placeholder {\r\n    color: var(--_mono-select-placeholder);\r\n  }\r\n\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n}\r\n\r\n[mono-select] [mono-search-field] {\r\n  cursor: text;\r\n}\r\n\r\n[mono-select] [mono-native] {\r\n  cursor: inherit;\r\n}\r\n\r\n[mono-select] [mono-native] option {\r\n  color: var(--_mono-select-text);\r\n  background: var(--popover);\r\n}\r\n\r\n/* =========================================\r\n   Actions — the chevron and the clear button\r\n   ========================================= */\r\n\r\n[mono-select] [mono-actions] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--mono-spacing);\r\n  flex-shrink: 0;\r\n  line-height: 1;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button > svg — size-4\r\n   text-muted-foreground; mono: the glyph sits in a square action box so the\r\n   chevron and the clear button occupy the same gutter */\r\n/* basecoat@1.0.2 components/combobox.css .combobox [data-clear] — size-6 border-0\r\n   bg-transparent p-0 text-current */\r\n[mono-select] [mono-arrow],\r\n[mono-select] [mono-clear],\r\n[mono-select] [mono-ds-retry],\r\n[mono-select] [mono-ds-spinner] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  width: var(--_mono-select-action);\r\n  height: var(--_mono-select-action);\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--mono-select-clear-radius, calc(var(--radius) - 5px));\r\n  background: transparent;\r\n  color: var(--_mono-select-muted);\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  transition-property: color, background-color, transform;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n[mono-select] :is([mono-arrow], [mono-clear], [mono-ds-retry], [mono-ds-spinner]) > :is(svg, .mono-icon, [mono-icon]) {\r\n  display: block;\r\n  width: var(--_mono-select-icon);\r\n  height: var(--_mono-select-icon);\r\n  pointer-events: none;\r\n}\r\n\r\n/* EXTENSION — the chevron turns while the panel is open */\r\n[mono-select][mono-open] [mono-arrow] > :is(svg, .mono-icon, [mono-icon]) {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted\r\n   hover:text-foreground (dark:hover:bg-muted/50 via --mono-mode-ghost-hover) */\r\n@media (hover: hover) {\r\n  [mono-select] :is([mono-arrow], [mono-clear], [mono-ds-retry]):hover {\r\n    background: var(--mono-mode-ghost-hover);\r\n    color: var(--_mono-select-text);\r\n  }\r\n}\r\n\r\n/* EXTENSION — dataSource state glyphs: the busy arc spins, the ↻ wears the\r\n   error colour so it reads as the way out of the red field */\r\n[mono-select] [mono-ds-spinner] {\r\n  cursor: progress;\r\n}\r\n\r\n[mono-select] [mono-ds-spinner] > svg {\r\n  animation: mono-select-spin 0.7s linear infinite;\r\n}\r\n\r\n[mono-select] [mono-ds-retry] {\r\n  color: var(--mono-select-ds-error-text, var(--_mono-select-invalid));\r\n}\r\n\r\n@keyframes mono-select-spin {\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-select] [mono-ds-spinner] > svg {\r\n    animation-duration: 2.4s;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   The panel\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] — absolute z-50 min-w-full\r\n   overflow-x-hidden; mono: `display: none` while closed (the contents are only\r\n   rendered while open), `--mono-popup-z` from the shared popup stack and\r\n   `--mono-popup-avail-h` from the portal controller cap the whole panel */\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [data-popover] — bg-popover\r\n   text-popover-foreground rounded-md shadow-md ring-1 ring-foreground/10; the\r\n   `p-1` moves to the scrolling body (the combobox layout), so the scrollbar\r\n   never paints over the padding */\r\n[mono-select] > [mono-dropdown] {\r\n  position: absolute;\r\n  /* `top: auto` = the static position: the panel follows the trigger in the DOM,\r\n     so in block flow it lands right under it (the popup controller overrides\r\n     this inline for the element; hand-written markup relies on it). */\r\n  top: auto;\r\n  /* the 6px offset as a transform: the controller writes `transform: none` inline\r\n     with its fixed position, so only the hand-written panel is pushed down */\r\n  transform: translateY(calc(var(--mono-spacing) * 1.5));\r\n  /* Both edges pinned, so the panel matches the field by default. An inline\r\n     `width` from `:dropdown.prop=\"{ width }\"` is then the over-constrained case,\r\n     which CSS resolves by ignoring `right` — the panel keeps this left edge and\r\n     takes the given width. */\r\n  left: 0;\r\n  right: 0;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  display: none;\r\n  /* Basecoat's `min-w-[max(100%,9rem)]` is relative to the .select box; a portaled\r\n     panel is position: fixed, where 100% would be the viewport — the controller\r\n     writes the anchor's width inline instead, so only the floor stays. */\r\n  min-width: var(--mono-select-dropdown-min-width, 9rem);\r\n  max-height: var(--mono-popup-avail-h, none);\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n  border-radius: var(--mono-select-dropdown-radius, var(--mono-radius-md));\r\n  background: var(--mono-select-dropdown-bg, var(--popover));\r\n  color: var(--mono-select-dropdown-color, var(--popover-foreground));\r\n  box-shadow: var(--mono-select-dropdown-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)), var(--mono-select-dropdown-shadow, var(--mono-shadow-md));\r\n  font-size: var(--mono-select-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-option-line-height, var(--mono-text-sm--lh));\r\n}\r\n\r\n[mono-select][mono-open] > [mono-dropdown] {\r\n  /* A flex column (not `block`) so the body can shrink past its own height when\r\n     the panel is clamped above. */\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox [role='listbox'] — max-h-[min(18rem,\r\n   var(--available-height,18rem))] scroll-py-1 overflow-y-auto p-1 */\r\n[mono-select] [mono-dropdown-body] {\r\n  flex: 1 1 auto;\r\n  min-height: 0;\r\n  max-height: 18rem;\r\n  padding: var(--mono-select-dropdown-padding, var(--mono-spacing));\r\n  overflow: auto;\r\n  overscroll-behavior: contain;\r\n  scroll-padding-block: var(--mono-select-dropdown-padding, var(--mono-spacing));\r\n  outline-style: none;\r\n}\r\n\r\n/* =========================================\r\n   Options\r\n   -----------------------------------------\r\n   Each rule also lists the stamped twin of a row rendered through `slot=\"list\"`\r\n   (`[data-mono-type='row']`, `[data-mono-active]`, `[data-mono-selected]`), so\r\n   the two can never drift: what you render in the slot IS an option. `:where()`\r\n   wraps only the CONTAINER, keeping the twin at attribute weight.\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) [role='option'] — relative\r\n   flex w-full cursor-default items-center overflow-hidden text-ellipsis whitespace-\r\n   nowrap outline-none select-none; disabled: pointer-events-none opacity-50 */\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='option'] — gap-2\r\n   rounded-sm py-1.5 ps-2 pe-8 text-sm, svg size-4 */\r\n[mono-select] [mono-item],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row'] {\r\n  position: relative;\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  gap: var(--mono-select-option-gap, calc(var(--mono-spacing) * 2));\r\n  margin: 0;\r\n  padding-block: var(--mono-select-option-padding-y, calc(var(--mono-spacing) * 1.5));\r\n  padding-inline: var(--mono-select-option-padding-x, calc(var(--mono-spacing) * 2)) var(--mono-select-option-padding-end, calc(var(--mono-spacing) * 8));\r\n  min-height: var(--mono-select-option-min-height, 0);\r\n  border: 0;\r\n  border-radius: var(--mono-select-option-radius, var(--mono-radius-sm));\r\n  /* longhands, so the selected row's check (a background-image) survives the\r\n     active / hover background */\r\n  background-color: transparent;\r\n  background-image: none;\r\n  color: var(--_mono-select-text);\r\n  font-family: inherit;\r\n  font-size: var(--mono-select-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-option-line-height, var(--mono-text-sm--lh));\r\n  font-weight: var(--mono-select-option-font-weight, var(--mono-font-weight-normal));\r\n  text-align: start;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  outline-style: none;\r\n  user-select: none;\r\n  cursor: default;\r\n  transition-property: color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration-fast);\r\n}\r\n\r\n/* EXTENSION: a hair of air between rows. Upstream stacks its options flush, so an\r\n   active row directly under the selected one read as ONE tall highlight; a 2px\r\n   seam keeps the two rounded-sm washes apart. `--mono-select-option-spacing`. */\r\n[mono-select] [mono-item] + [mono-item],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row'] + [data-mono-type='row'] {\r\n  margin-top: var(--mono-select-option-spacing, 2px);\r\n}\r\n\r\n[mono-select] [mono-item] svg:not([class*='size-']),\r\n[mono-select] [mono-item] .mono-icon {\r\n  width: var(--_mono-select-icon);\r\n  height: var(--_mono-select-icon);\r\n  flex-shrink: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='option'].active, .select:not(select) [role='option']:focus-visible\r\n   — bg-muted text-foreground. The keyboard cursor and the pointer share one look. */\r\n[mono-select] [mono-item][mono-active]:not([mono-disabled]):not(:disabled),\r\n[mono-select] [mono-item]:focus-visible,\r\n[mono-select] :where([mono-list-slot]) [data-mono-active] {\r\n  background-color: var(--mono-select-option-active-bg, var(--muted));\r\n  color: var(--mono-select-option-active-color, var(--_mono-select-text));\r\n}\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select):not([data-select-initialized]) [role='option']:not([aria-disabled='true']):not(:disabled):hover, .select:not(select) [role='option'].active\r\n   — the pointer highlight is NOT behind (hover: hover) upstream */\r\n[mono-select] [mono-item]:hover:not([mono-disabled]):not(:disabled),\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row']:hover {\r\n  background-color: var(--mono-select-option-active-bg, var(--muted));\r\n  color: var(--mono-select-option-active-color, var(--_mono-select-text));\r\n}\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) [role='option'][aria-selected='true']\r\n   — the --check-icon at the end (bg-size .875rem, center right .5rem) */\r\n[mono-select] [mono-item][mono-selected],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row'][data-mono-selected] {\r\n  background-image: var(--mono-select-check-icon, var(--check-icon));\r\n  background-size: var(--mono-select-check-size, 0.875rem);\r\n  background-position: center right calc(var(--mono-spacing) * 2);\r\n  background-repeat: no-repeat;\r\n  font-weight: var(--mono-select-option-selected-font-weight, var(--mono-select-option-font-weight, var(--mono-font-weight-normal)));\r\n}\r\n\r\n[mono-select] [mono-item][mono-selected]:dir(rtl),\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row'][data-mono-selected]:dir(rtl) {\r\n  background-position: center left calc(var(--mono-spacing) * 2);\r\n}\r\n\r\n[mono-select] [mono-item][mono-disabled],\r\n[mono-select] [mono-item]:disabled {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before\r\n   — py-6 text-center text-sm (the \"No results found\" row) */\r\n[mono-select] [mono-empty-row] {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding-block: calc(var(--mono-spacing) * 6);\r\n  padding-inline: calc(var(--mono-spacing) * 3);\r\n  font-size: var(--mono-select-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-option-line-height, var(--mono-text-sm--lh));\r\n  color: var(--_mono-select-muted);\r\n  text-align: center;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  cursor: default;\r\n  user-select: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='heading'] — px-2 py-1.5\r\n   text-xs text-muted-foreground; EXTENSION: one indent step per nesting level */\r\n[mono-select] [mono-group],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='group'] {\r\n  --_ms-group-level: 0;\r\n  padding-block: var(--mono-select-group-padding-y, calc(var(--mono-spacing) * 1.5));\r\n  padding-inline: var(--mono-select-group-padding-x, calc(var(--mono-spacing) * 2));\r\n  padding-inline-start: calc(var(--mono-select-group-padding-x, calc(var(--mono-spacing) * 2)) + var(--_ms-group-level) * calc(var(--mono-spacing) * 2));\r\n  font-size: var(--mono-select-group-font-size, var(--mono-text-xs));\r\n  line-height: var(--mono-select-group-line-height, var(--mono-text-xs--lh));\r\n  font-weight: var(--mono-select-group-font-weight, var(--mono-font-weight-normal));\r\n  text-transform: var(--mono-select-group-text-transform, none);\r\n  letter-spacing: var(--mono-select-group-letter-spacing, normal);\r\n  color: var(--_mono-select-muted);\r\n  cursor: default;\r\n  user-select: none;\r\n}\r\n\r\n[mono-select] [mono-group][mono-level='1'],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='group'][data-mono-level='1'] { --_ms-group-level: 1; }\r\n[mono-select] [mono-group][mono-level='2'],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='group'][data-mono-level='2'] { --_ms-group-level: 2; }\r\n[mono-select] [mono-group][mono-level='3'],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='group'][data-mono-level='3'] { --_ms-group-level: 3; }\r\n\r\n/* group-sticky: pin headers while their rows scroll; nested levels stack on the\r\n   panel's own surface so options scroll cleanly underneath. */\r\n[mono-select] [mono-group][mono-sticky] {\r\n  position: sticky;\r\n  top: calc(var(--_ms-group-level) * 1.5rem);\r\n  z-index: calc(5 - var(--_ms-group-level));\r\n  background: var(--mono-select-dropdown-bg, var(--popover));\r\n}\r\n\r\n/* EXTENSION — the load-more affordance: an option-shaped ghost button */\r\n[mono-select] [mono-load-more] {\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: var(--mono-select-option-gap, calc(var(--mono-spacing) * 2));\r\n  margin: 0;\r\n  padding-block: var(--mono-select-option-padding-y, calc(var(--mono-spacing) * 1.5));\r\n  padding-inline: var(--mono-select-option-padding-x, calc(var(--mono-spacing) * 2));\r\n  border: 0;\r\n  border-radius: var(--mono-select-option-radius, var(--mono-radius-sm));\r\n  background: transparent;\r\n  color: var(--_mono-select-muted);\r\n  font-family: inherit;\r\n  font-size: var(--mono-select-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-option-line-height, var(--mono-text-sm--lh));\r\n  font-weight: var(--mono-font-weight-medium);\r\n  cursor: pointer;\r\n  transition-property: color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration-fast);\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-select] [mono-load-more]:hover:not([mono-loading]) {\r\n    background-color: var(--mono-select-option-active-bg, var(--muted));\r\n    color: var(--_mono-select-text);\r\n  }\r\n}\r\n\r\n[mono-select] [mono-load-more][mono-loading] {\r\n  cursor: default;\r\n  opacity: 0.7;\r\n}\r\n\r\n/* Consumer-rendered option rows (slot=\"list\"). `display: contents` so mono's own\r\n   placement wrapper generates no box: the rows the consumer writes lay out as if\r\n   they were direct children of the panel. */\r\n[mono-select] [mono-list-slot] {\r\n  display: contents;\r\n}\r\n\r\n/* =========================================\r\n   Message — helper / validation text under the field\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p\r\n   — text-sm text-muted-foreground leading-normal font-normal */\r\n[mono-select] > [mono-message-wrap] {\r\n  display: block;\r\n  margin-top: var(--_mono-select-gap-y);\r\n}\r\n\r\n[mono-select] > [mono-message-wrap]:not(:has([mono-message]:not([mono-empty]))) {\r\n  display: none;\r\n}\r\n\r\n[mono-select] [mono-message] {\r\n  font-size: var(--mono-select-message-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-message-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-font-weight-normal);\r\n  text-align: start;\r\n  color: var(--_mono-select-muted);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field [role=\"alert\"] — text-destructive text-sm */\r\n[mono-select] [mono-message=\"invalid\"] {\r\n  color: var(--_mono-select-invalid);\r\n}\r\n\r\n[mono-select] [mono-message=\"valid\"] {\r\n  color: var(--_mono-select-valid);\r\n}\r\n\r\n[mono-select] [mono-message=\"warning\"] {\r\n  color: var(--_mono-select-warning);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-select] > [mono-trigger],\r\n  [mono-select] [mono-arrow],\r\n  [mono-select] [mono-clear],\r\n  [mono-select] [mono-item] {\r\n    transition: none;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   label-position — the slots form/label-position.css reads\r\n   (top / notched / left / right; public knobs: --mono-select-label-width,\r\n   -label-side-gap, -label-notch-font-size, -label-notch-bg)\r\n   ========================================= */\r\n\r\n[mono-select][mono-label-position] {\r\n  --_mono-lp-width: var(--mono-select-label-width, auto);\r\n  --_mono-lp-gap: var(--mono-select-label-side-gap, calc(var(--mono-spacing) * 3));\r\n  --_mono-lp-height: var(--_mono-select-height);\r\n  --_mono-lp-box-min: var(--_mono-select-height);\r\n  --_mono-lp-padding-x: var(--_mono-select-padding-start);\r\n  --_mono-lp-padding-y: var(--mono-select-padding-y, 0px);\r\n  --_mono-lp-font: var(--mono-select-label-notch-font-size, var(--mono-text-xs));\r\n  --_mono-lp-notch-bg: var(--mono-select-label-notch-bg, var(--background));\r\n  --_mono-lp-field-bg: var(--_mono-select-bg);\r\n}\r\n";
 
 //#endregion
 //#region src/components/select/mono-select.shadow.ts
@@ -2042,7 +2107,7 @@ let MonoSelectShadow = class MonoSelectShadow extends withShadowUtilityStyles(Mo
 		this.disableWarning?.("change-in-update");
 	}
 	static {
-		this.styles = [unsafeCSS(toShadowCss(select_css_raw_default, {
+		this.styles = [unsafeCSS(toShadowCss(select_css_raw_default + label_position_css_raw_default + field_tooltip_css_raw_default + field_validation_css_raw_default, {
 			host: "mono-select",
 			append: SHADOW_EXTRA_CSS
 		}))];