@mono-lit/helper 0.0.5 → 0.0.7

package/dist/ui/dropdown-table.js

@@ -1,18 +1,17 @@
-import { f as monoPendingGrace, l as monoHostChildNodes } from "../mono-ui-BwUc0L6B.js";
+import { d as buildSizeStyle, f as toCssSize, g as monoHostChildNodes, y as monoPendingGrace } from "../mono-ui-kvLVIf1V.js";
 import { n as detachEventHandlers, t as applyProps } from "../element-props-xvw0EB7H.js";
-import { t as monoDataDropdown } from "../mono-data-dropdown-DxpUUk2y.js";
-import { t as customElement } from "../mono-element-C7vCschg.js";
+import { t as monoDataDropdown } from "../mono-data-dropdown-BsY5IuIo.js";
+import { t as customElement } from "../mono-element-CKcT0rwv.js";
 import { a as defineHybridPropAliases, i as defineHybridPropAlias, o as numberStringConverter, r as booleanStringConverter, s as optionalNumberConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
 import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
-import { i as guardHostTextContent, s as placeSlotNode } from "../light-slots-DdDdZ6zs.js";
-import { n as toCssSize, t as buildSizeStyle } from "../css-size-DWAPgQdT.js";
-import { n as applyPopupPlacement, r as computePopupPlacement, t as PopupPortalController } from "../popup-portal-C8ttHDRX.js";
+import { i as guardHostTextContent, s as placeSlotNode } from "../light-slots-B5Ck0t_E.js";
+import { n as applyPopupPlacement, r as computePopupPlacement, t as PopupPortalController } from "../popup-portal-CINuVjNY.js";
 import { a as closeIcon, i as chevronIcon, n as caretIcon } from "../field-icons-t8rXRCKs.js";
 import { t as MonoFormControlCore } from "../form-control-core-CRZPZ1ru.js";
-import { t as FieldTooltipController } from "../field-tooltip-FyMi9vNM.js";
-import { t as FieldValidationController } from "../field-validation-CHHQi1zl.js";
+import { t as FieldTooltipController } from "../field-tooltip-Csk4s2ve.js";
+import { t as FieldValidationController } from "../field-validation-CFmUmuDx.js";
 import { n as visibleChipCap, r as ChipStripController, t as resolveChipLimit } from "../chip-limits-CFABydIL.js";
-import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
+import { LitElement, html, isServer, nothing } from "lit";
 import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
@@ -148,9 +147,16 @@ const MonoDropdownTableCore = (superClass) => {
 				this._reflectSelection();
 			};
 			this._onViewportChange = () => {
-				if (this._isOpen) this._positionPanel();
-				if (this._moreOpen) this._positionMorePanel();
+				if (!this._isOpen && !this._moreOpen || this._viewportFrame) return;
+				this._viewportFrame = requestAnimationFrame(() => {
+					this._viewportFrame = 0;
+					if (this._isOpen) this._positionPanel();
+					if (this._moreOpen) this._positionMorePanel();
+				});
 			};
+			this._viewportBound = false;
+			this._viewportFrame = 0;
+			this._docBound = false;
 			this._wasOpen = false;
 			this._lastSelectedCount = 0;
 			this._searchFocused = false;
@@ -403,14 +409,7 @@ const MonoDropdownTableCore = (superClass) => {
 			super.connectedCallback();
 			this._subscribe();
 			this._wireDropdown();
-			if (!isServer) {
-				document.addEventListener("pointerdown", this._onDocPointer, true);
-				document.addEventListener("keydown", this._onDocKey, true);
-				if (this._isShadowHost) {
-					window.addEventListener("scroll", this._onViewportChange, true);
-					window.addEventListener("resize", this._onViewportChange);
-				}
-			}
+			if (!isServer) this._syncViewportListeners();
 		}
 		disconnectedCallback() {
 			this._off?.();
@@ -421,8 +420,12 @@ const MonoDropdownTableCore = (superClass) => {
 			if (!isServer) {
 				document.removeEventListener("pointerdown", this._onDocPointer, true);
 				document.removeEventListener("keydown", this._onDocKey, true);
+				this._docBound = false;
 				window.removeEventListener("scroll", this._onViewportChange, true);
 				window.removeEventListener("resize", this._onViewportChange);
+				if (this._viewportFrame) cancelAnimationFrame(this._viewportFrame);
+				this._viewportFrame = 0;
+				this._viewportBound = false;
 			}
 			super.disconnectedCallback();
 		}
@@ -553,11 +556,9 @@ const MonoDropdownTableCore = (superClass) => {
 		get _rowScope() {
 			return this.renderRoot === this ? this._popup.panelRoot : this;
 		}
-		_reflectSelection() {
+		_reflectSelection(rows = this._rowEls()) {
 			const dd = this._dd;
-			const root = this._rowScope;
-			if (!dd || !root?.querySelectorAll) return;
-			const rows = Array.from(root.querySelectorAll("[data-row-key]"));
+			if (!dd) return;
 			if ((this._focusZone === "list" || this._activeRowKey != null) && rows.length && !rows.some((el) => el.getAttribute("data-row-key") === this._activeRowKey)) this._activeRowKey = rows[0].getAttribute("data-row-key");
 			rows.forEach((el) => {
 				const key = el.getAttribute("data-row-key");
@@ -568,15 +569,27 @@ const MonoDropdownTableCore = (superClass) => {
 				el.toggleAttribute("mono-selected", on);
 				el.toggleAttribute("mono-dd-selected", on);
 				el.toggleAttribute("mono-dd-active", active);
-				if (on) el.setAttribute("aria-selected", "true");
-				else el.removeAttribute("aria-selected");
+				if (on !== el.hasAttribute("aria-selected")) {
+					if (on) el.setAttribute("aria-selected", "true");
+					else el.removeAttribute("aria-selected");
+				}
 			});
 		}
 		/** Re-reflect after the consumer's Vue re-renders rows (paging/search). */
 		_observePanel() {
 			const root = this._rowScope;
 			if (!root || this._panelObserver) return;
-			this._panelObserver = new MutationObserver(() => this._reflectSelection());
+			const touchesRows = (nodes) => {
+				for (const n of Array.from(nodes)) {
+					if (n.nodeType !== 1) continue;
+					const el = n;
+					if (el.matches("[data-row-key]") || el.querySelector("[data-row-key]")) return true;
+				}
+				return false;
+			};
+			this._panelObserver = new MutationObserver((records) => {
+				if (records.some((r) => touchesRows(r.addedNodes) || touchesRows(r.removedNodes))) this._reflectSelection();
+			});
 			this._panelObserver.observe(root, {
 				childList: true,
 				subtree: true
@@ -631,9 +644,52 @@ const MonoDropdownTableCore = (superClass) => {
 			});
 			applyPopupPlacement(panel, placement, true);
 		}
+		/**
+		* Outside-dismiss listeners, both builds, bound while a panel is OPEN only (select's rule).
+		* Both handlers bail when the list and "+N more" panels are closed, so at rest they cost
+		* only dispatch — two capture-phase `document` listeners per field.
+		*/
+		_syncDocListeners() {
+			const want = this.isConnected && (this._isOpen || this._moreOpen);
+			if (want === this._docBound) return;
+			this._docBound = want;
+			if (want) {
+				document.addEventListener("pointerdown", this._onDocPointer, true);
+				document.addEventListener("keydown", this._onDocKey, true);
+			} else {
+				document.removeEventListener("pointerdown", this._onDocPointer, true);
+				document.removeEventListener("keydown", this._onDocKey, true);
+			}
+		}
+		/**
+		* Shadow build only, and only while a panel is OPEN — the popup controller's rule. They used
+		* to be bound at connect for every shadow instance: a capture-phase, non-passive `scroll`
+		* listener on `window` per field, open or not, which also keeps the page's scrolling off the
+		* compositor thread.
+		*/
+		_syncViewportListeners() {
+			if (isServer) return;
+			this._syncDocListeners();
+			const want = this._isShadowHost && this.isConnected && (this._isOpen || this._moreOpen);
+			if (want === this._viewportBound) return;
+			if (want) {
+				window.addEventListener("scroll", this._onViewportChange, {
+					capture: true,
+					passive: true
+				});
+				window.addEventListener("resize", this._onViewportChange, { passive: true });
+			} else {
+				window.removeEventListener("scroll", this._onViewportChange, true);
+				window.removeEventListener("resize", this._onViewportChange);
+				if (this._viewportFrame) cancelAnimationFrame(this._viewportFrame);
+				this._viewportFrame = 0;
+			}
+			this._viewportBound = want;
+		}
 		updated(changed) {
 			super.updated(changed);
 			if (isServer) return;
+			this._syncViewportListeners();
 			if (this._isOpen) {
 				this._observePanel();
 				this._reflectSelection();
@@ -734,18 +790,20 @@ const MonoDropdownTableCore = (superClass) => {
 		_panelEl() {
 			return (this._popup.panelRoot ?? this.renderRoot)?.querySelector?.(".mono-dropdown-table-panel") ?? null;
 		}
-		_setActiveRow(key, reveal = false) {
+		/** `rows`: the caller's own `_rowEls()` — one query per arrow key, not three. */
+		_setActiveRow(key, reveal = false, rows = this._rowEls()) {
 			this._activeRowKey = key;
-			this._reflectSelection();
+			this._reflectSelection(rows);
 			if (!reveal || key == null) return;
-			this._rowEls().find((r) => r.getAttribute("data-row-key") === key)?.scrollIntoView?.({ block: "nearest" });
+			rows.find((r) => r.getAttribute("data-row-key") === key)?.scrollIntoView?.({ block: "nearest" });
 		}
 		_moveActiveRow(delta) {
-			const keys = this._rowEls().map((r) => r.getAttribute("data-row-key") ?? "");
+			const rows = this._rowEls();
+			const keys = rows.map((r) => r.getAttribute("data-row-key") ?? "");
 			if (!keys.length) return;
 			const i = this._activeRowKey == null ? -1 : keys.indexOf(this._activeRowKey);
 			const next = i < 0 ? delta > 0 ? 0 : keys.length - 1 : Math.min(Math.max(i + delta, 0), keys.length - 1);
-			this._setActiveRow(keys[next], true);
+			this._setActiveRow(keys[next], true, rows);
 		}
 		/** Move the keyboard into the row list, highlighting the first row. */
 		_enterList() {
@@ -1283,10 +1341,6 @@ const MonoDropdownTableCore = (superClass) => {
 	return MonoDropdownTableCoreClass;
 };
 
-//#endregion
-//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\dropdown-table\dropdown-table.css?raw.js
-var dropdown_table_css_raw_default = "/* LEGACY CLASS ALIASES — every `[mono-x]` below is wrapped as `:is([mono-x], .legacy)`\n   by `scripts/legacy-class-alias.mjs` (`.mono-dropdown-table-region.body`,\n   `tr.mono-dd-row-selected`, …), so host CSS and hand-written markup on the pre-port\n   class contract keep painting. Author with the attribute only; re-run the script. */\n/* =========================================================================\n   mono-dropdown-table — a dropdown whose panel is a native `<table>` for\n   picking row(s). An EXTENSION: Basecoat has no table picker, so the FIELD is\n   the multi-select combobox's chip box (`.combobox-chips` + `.combobox-chip`,\n   basecoat-css@1.0.2, vega style) on the `.field` / `.label` chrome, and the\n   PANEL is the combobox's `[data-popover]` holding a ported `<table mono-table>`\n   instead of a listbox — so the rows are the table's own rows.\n\n   Styled by ATTRIBUTE, like Basecoat — and the attributes mirror the element's\n   props one for one, so hand-written markup reads like the Lit / Vue tag:\n\n     <mono-dropdown-table size=\"sm\" color=\"danger\" label=\"Owner\" clearable multiple>\n     <div mono-dropdown-table mono-size=\"sm\" mono-color=\"danger\" mono-clearable mono-multiple>\n       <label mono-dd-label>Owner</label>\n       <div mono-dd-control>\n         <div mono-dd-trigger role=\"combobox\">\n           <span mono-dd-value>\n             <div mono-dd-chip mono-dd-removable><span mono-dd-chip-main><span mono-dd-chip-content>\n               <span mono-dd-chip-label>Ada</span><button mono-dd-chip-close>…</button></span></span></div>\n           </span>\n           <span mono-dd-actions><span mono-dd-arrow>…</span></span>\n         </div>\n       </div>\n       <div mono-dd-panel><div mono-dd-region=\"body\"><table mono-table>…</table></div></div>\n     </div>\n\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\n   `:not([mono-color])` = primary, `:not([mono-variant])` = outlined). The element\n   renders these attributes on its wrapper (both builds) plus the STATES\n   `mono-open` / `mono-more-open` / `mono-has-value` / `mono-side`; the old\n   classes (`.mono-dropdown-table.sm.open`) are still emitted as inert hooks until\n   2.0 but no rule here reads them. The chips are NOT `.mono-chip`s any more: they\n   are Basecoat combobox chips painted here, and chip.css never sees them.\n\n   THE PARTS ARE FAMILY-UNIQUE (`mono-dd-*`), never the bare `mono-chip` /\n   `mono-panel` / `mono-actions` the field components use: the panel holds a whole\n   `<table mono-table>` whose cells may carry a consumer's `<mono-chip>`, and a\n   `[mono-dropdown-table] [mono-chip]` rule would repaint it.\n\n   Selector map (ours ≡ upstream):\n     [mono-dropdown-table]                          ≡ .field (gap-3, as margins) + .combobox (position: relative)\n     [mono-dropdown-table] > [mono-dd-label]        ≡ .field > label / .label\n     [mono-dd-trigger]                              ≡ .combobox-chips (min-h-9 gap-1.5 rounded-md border-input px-1.5 py-1.5 text-sm shadow-xs)\n     [mono-dd-value]                                ≡ the chip row; EXTENSION: the single value / placeholder text\n     [mono-dd-chip] > [mono-dd-chip-main]           ≡ .combobox-chip (h-5.5 gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium)\n     [mono-dd-chip] [mono-dd-chip-close]            ≡ .combobox-chip-remove (-ms-1 opacity-50 hover:100, svg size-3.5)\n     [mono-dd-chip][mono-dd-more]                   ≡ EXTENSION (the \"+N more\" counter chip, same box)\n     [mono-dd-actions] > [mono-dd-arrow] > svg      ≡ .combobox-trigger-icon (size-4 text-muted-foreground)\n     [mono-dd-actions] > [mono-dd-clear]            ≡ .combobox [data-clear] (size-6, painted as .btn[data-variant='ghost'])\n     [mono-dd-actions] > [mono-dd-scroll]           ≡ EXTENSION (the inline strip's ‹ › pager, same box)\n     [mono-dd-panel]                                ≡ .combobox [data-popover] (bg-popover ring-1 rounded-md shadow-md); EXTENSION: a flex column of regions\n     [mono-dd-region=\"search|body|foot\"]            ≡ EXTENSION (search box / the scrolling table / the pager)\n     [mono-dd-more]                                 ≡ [data-popover] holding the overflow chips\n     [mono-table] tbody tr[mono-selected]           ≡ .table tr data-[state=selected] — the TABLE's own rule paints it\n     [mono-table] tbody tr[mono-dd-active]          ≡ .combobox [role='option'].active (bg-muted) — the keyboard cursor\n     [mono-dd-message=\"…\"]                          ≡ .field > p / .field [role='alert']\n     [mono-validation-state=\"invalid\"]              ≡ .combobox-chips:has([aria-invalid=true]) + .field[data-invalid]\n     [mono-validation-state=\"valid|warning\"]        ≡ EXTENSION (the invalid pattern in --success / --warning)\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                  ≡ EXTENSION (the --mono-control-height-* ladder)\n     [mono-variant=\"filled\"]                        ≡ EXTENSION (luma's .combobox-chips)\n     [mono-variant=\"underlined\"]                    ≡ EXTENSION (sera's .combobox-chips: bottom edge only, no ring)\n\n   FLAVORS: the field IS the tag-input's chip box and the panel IS its popover, so\n   every metric here resolves `--mono-dropdown-table-<k>` → `--mono-tag-input-<k>`\n   → the base, through the SAME per-size chains tag-input.css uses — a flavour\n   that retunes the tag-input retunes this field for free, and no flavour file\n   carries a dropdown-table entry. Every fallback is vega's value.\n\n   THE PANELS ARE PORTALED (light build): [mono-dd-panel] and [mono-dd-more]\n   move into a `<div data-mono-popup-portal>` under <body> while open, and the\n   portal mirrors the wrapper's class AND mono-* attributes, so every rule here\n   is scoped under `[mono-dropdown-table]` and never relies on the panel being\n   inside the field. The shadow build keeps its panel in the shadow root and\n   SLOTS the consumer's light-DOM `<table>` into it — the row rules therefore\n   come in two forms: the portaled table, and the slotted one under the host.\n   ========================================================================= */\n\nmono-dropdown-table {\n  display: block;\n  width: 100%;\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table) {\n  /* ── palette: each slot is a public knob over the tag-input's, over a Basecoat token ── */\n  --_mono-dropdown-table-text: var(--mono-dropdown-table-text, var(--mono-tag-input-text, var(--foreground)));\n  --_mono-dropdown-table-placeholder: var(--mono-dropdown-table-placeholder, var(--mono-tag-input-placeholder, var(--muted-foreground)));\n  --_mono-dropdown-table-muted: var(--mono-dropdown-table-muted, var(--mono-tag-input-muted, var(--muted-foreground)));\n  --_mono-dropdown-table-primary: var(--mono-dropdown-table-primary, var(--mono-tag-input-primary, var(--ring)));\n  --_mono-dropdown-table-secondary: var(--mono-dropdown-table-secondary, var(--mono-tag-input-secondary, var(--muted-foreground)));\n  --_mono-dropdown-table-success: var(--mono-dropdown-table-success, var(--mono-tag-input-success, var(--success)));\n  --_mono-dropdown-table-danger: var(--mono-dropdown-table-danger, var(--mono-tag-input-danger, var(--destructive)));\n  --_mono-dropdown-table-warning: var(--mono-dropdown-table-warning, var(--mono-tag-input-warning, var(--warning)));\n  --_mono-dropdown-table-info: var(--mono-dropdown-table-info, var(--mono-tag-input-info, var(--info)));\n  --_mono-dropdown-table-teal: var(--mono-dropdown-table-teal, var(--mono-tag-input-teal, var(--teal)));\n  --_mono-dropdown-table-purple: var(--mono-dropdown-table-purple, var(--mono-tag-input-purple, var(--purple)));\n  --_mono-dropdown-table-neutral: var(--mono-dropdown-table-neutral, var(--mono-tag-input-neutral, var(--neutral)));\n  --_mono-dropdown-table-dark: var(--mono-dropdown-table-dark, var(--mono-tag-input-dark, var(--dark)));\n  --_mono-dropdown-table-valid: var(--mono-dropdown-table-valid, var(--mono-tag-input-valid, var(--success)));\n  --_mono-dropdown-table-invalid: var(--mono-dropdown-table-invalid, var(--mono-tag-input-invalid, var(--destructive)));\n\n  /* ── the painted result — three tiers, base = .combobox-chips (vega) ──── */\n  --_mono-dropdown-table-ring-color: var(--mono-dropdown-table-ring-color, var(--mono-dropdown-table-focus-color, var(--_mono-dropdown-table-ring-color-preset, var(--_mono-dropdown-table-primary))));\n  --_mono-dropdown-table-ring-width: var(--mono-dropdown-table-ring-width, var(--mono-tag-input-ring-width, var(--_mono-dropdown-table-ring-width-preset, var(--mono-ring-width))));\n  --_mono-dropdown-table-ring-alpha: var(--mono-dropdown-table-ring-alpha, var(--mono-tag-input-ring-alpha, var(--mono-ring-alpha)));\n  --_mono-dropdown-table-border-color: var(--mono-dropdown-table-rest-border, var(--mono-dropdown-table-border-color, var(--mono-dropdown-table-border, var(--mono-tag-input-rest-border, var(--mono-tag-input-border-color, var(--mono-tag-input-border, var(--_mono-dropdown-table-border-color-preset, var(--input))))))));\n  --_mono-dropdown-table-bg: var(--mono-dropdown-table-bg, var(--mono-dropdown-table-surface, var(--mono-tag-input-bg, var(--mono-tag-input-surface, var(--_mono-dropdown-table-bg-preset, var(--mono-mode-surface))))));\n  --_mono-dropdown-table-shadow: var(--mono-dropdown-table-shadow, var(--mono-tag-input-shadow, var(--_mono-dropdown-table-shadow-preset, 0 0 #0000)));\n  --_mono-dropdown-table-icon: var(--mono-dropdown-table-icon-size, var(--mono-tag-input-icon-size, calc(var(--mono-spacing) * 4)));\n\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\n        `<div mono-dropdown-table>` that names no size renders exactly like\n        size=\"md\". basecoat@1.0.2 styles/vega.css .combobox-chips — min-h-9\n        gap-1.5 rounded-md px-1.5 py-1.5 text-sm; .combobox-chip h-5.5 ── */\n  --_mono-dropdown-table-height: var(--mono-dropdown-table-height-md, var(--mono-tag-input-height-md, var(--mono-control-height-md)));\n  --_mono-dropdown-table-radius: var(--mono-dropdown-table-radius-md, var(--mono-tag-input-radius-md, var(--_mono-dropdown-table-radius-preset, var(--mono-dropdown-table-radius, var(--mono-tag-input-radius, var(--mono-radius-md))))));\n  --_mono-dropdown-table-padding-x: var(--mono-dropdown-table-padding-x-md, var(--mono-tag-input-padding-x-md, var(--mono-dropdown-table-padding-x, var(--mono-tag-input-padding-x, var(--_mono-dropdown-table-padding-x-preset, calc(var(--mono-spacing) * 1.5))))));\n  --_mono-dropdown-table-padding-y: var(--mono-dropdown-table-padding-y-md, var(--mono-tag-input-padding-y-md, var(--mono-dropdown-table-padding-y, var(--mono-tag-input-padding-y, calc(var(--mono-spacing) * 1.5)))));\n  --_mono-dropdown-table-gap: var(--mono-dropdown-table-chip-gap, var(--mono-tag-input-chip-gap, calc(var(--mono-spacing) * 1.5)));\n  --_mono-dropdown-table-font-size: var(--mono-dropdown-table-font-md, var(--mono-tag-input-font-md, var(--mono-text-sm)));\n  --_mono-dropdown-table-line-height: var(--mono-dropdown-table-line-height, var(--mono-tag-input-line-height, var(--mono-dropdown-table-line-height-md, var(--mono-tag-input-line-height-md, var(--mono-text-sm--lh)))));\n  /* Same cap as tag-input's (see tag-input.css): one row of chips never outgrows the field's height. */\n  --_mono-dropdown-table-chip-fit: calc(var(--_mono-dropdown-table-height) - 2 * var(--_mono-dropdown-table-padding-y) - 2 * var(--mono-border-width));\n  --_mono-dropdown-table-chip-height: var(--mono-dropdown-table-chip-height-md, var(--mono-tag-input-chip-height-md, min(calc(var(--mono-spacing) * 5.5), var(--_mono-dropdown-table-chip-fit))));\n  --_mono-dropdown-table-chip-font-size: var(--mono-dropdown-table-chip-font-size, var(--mono-tag-input-chip-font-size, var(--mono-text-xs)));\n  --_mono-dropdown-table-chip-line-height: var(--mono-dropdown-table-chip-line-height, var(--mono-tag-input-chip-line-height, var(--mono-text-xs--lh)));\n  --_mono-dropdown-table-action: calc(var(--mono-spacing) * 6);\n  --_mono-dropdown-table-clear-glyph: calc(var(--mono-spacing) * 3.5);\n\n  /* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3; mono:\n     BLOCK flow with the gap as margins (see tag-input.css) */\n  --_mono-dropdown-table-gap-y: var(--mono-dropdown-table-gap, var(--mono-tag-input-gap, calc(var(--mono-spacing) * 3)));\n  position: relative;\n  display: block;\n  width: 100%;\n  font-family: inherit;\n  color: var(--_mono-dropdown-table-text);\n}\n\n/* The page's global `* { box-sizing: border-box }` does NOT cross the shadow\n   boundary; without this the trigger's `min-height` would be its CONTENT height\n   there (40px → 56px). Rewrites to `:host, :host *` in the shadow sheet. */\nmono-dropdown-table,\nmono-dropdown-table *,\n:is([mono-dropdown-table],.mono-dropdown-table),\n:is([mono-dropdown-table],.mono-dropdown-table) *,\n:is([mono-dropdown-table],.mono-dropdown-table) *::before,\n:is([mono-dropdown-table],.mono-dropdown-table) *::after {\n  box-sizing: border-box;\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table) :is(:is([mono-dd-label],.mono-dropdown-table-label), :is([mono-dd-message],.mono-dropdown-table-message))[mono-empty] {\n  display: none;\n}\n\n/* =========================================\n   Sizes — an EMPTY field's painted height IS the token (tests/perf/field-heights);\n   a second row of chips grows it. The same chains as tag-input.css, one tier up.\n   ========================================= */\n\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-size=\"xs\"],:where(.mono-dropdown-table.xs)) {\n  --_mono-dropdown-table-height: var(--mono-dropdown-table-height-xs, var(--mono-tag-input-height-xs, var(--mono-control-height-xs)));\n  --_mono-dropdown-table-radius: var(--mono-dropdown-table-radius-xs, var(--mono-tag-input-radius-xs, var(--_mono-dropdown-table-radius-preset, var(--mono-dropdown-table-radius, var(--mono-tag-input-radius, var(--mono-radius-md))))));\n  --_mono-dropdown-table-padding-x: var(--mono-dropdown-table-padding-x-xs, var(--mono-tag-input-padding-x-xs, var(--mono-dropdown-table-padding-x, var(--mono-tag-input-padding-x, var(--_mono-dropdown-table-padding-x-preset, var(--mono-spacing))))));\n  --_mono-dropdown-table-padding-y: var(--mono-dropdown-table-padding-y-xs, var(--mono-tag-input-padding-y-xs, var(--mono-dropdown-table-padding-y, var(--mono-tag-input-padding-y, calc(var(--mono-spacing) * 0.5)))));\n  --_mono-dropdown-table-gap: var(--mono-dropdown-table-chip-gap, var(--mono-tag-input-chip-gap, var(--mono-spacing)));\n  --_mono-dropdown-table-font-size: var(--mono-dropdown-table-font-xs, var(--mono-tag-input-font-xs, var(--mono-text-xs)));\n  --_mono-dropdown-table-line-height: var(--mono-dropdown-table-line-height, var(--mono-tag-input-line-height, var(--mono-dropdown-table-line-height-xs, var(--mono-tag-input-line-height-xs, var(--mono-text-xs--lh)))));\n  --_mono-dropdown-table-chip-height: var(--mono-dropdown-table-chip-height-xs, var(--mono-tag-input-chip-height-xs, min(calc(var(--mono-spacing) * 4.5), var(--_mono-dropdown-table-chip-fit))));\n  --_mono-dropdown-table-icon: var(--mono-dropdown-table-icon-size, var(--mono-tag-input-icon-size, calc(var(--mono-spacing) * 3.5)));\n  --_mono-dropdown-table-action: calc(var(--mono-spacing) * 4);\n  --_mono-dropdown-table-clear-glyph: calc(var(--mono-spacing) * 3);\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-size=\"sm\"],:where(.mono-dropdown-table.sm)) {\n  --_mono-dropdown-table-height: var(--mono-dropdown-table-height-sm, var(--mono-tag-input-height-sm, var(--mono-control-height-sm)));\n  --_mono-dropdown-table-radius: var(--mono-dropdown-table-radius-sm, var(--mono-tag-input-radius-sm, var(--_mono-dropdown-table-radius-preset, var(--mono-dropdown-table-radius, var(--mono-tag-input-radius, var(--mono-radius-md))))));\n  --_mono-dropdown-table-padding-x: var(--mono-dropdown-table-padding-x-sm, var(--mono-tag-input-padding-x-sm, var(--mono-dropdown-table-padding-x, var(--mono-tag-input-padding-x, var(--_mono-dropdown-table-padding-x-preset, var(--mono-spacing))))));\n  --_mono-dropdown-table-padding-y: var(--mono-dropdown-table-padding-y-sm, var(--mono-tag-input-padding-y-sm, var(--mono-dropdown-table-padding-y, var(--mono-tag-input-padding-y, var(--mono-spacing)))));\n  --_mono-dropdown-table-gap: var(--mono-dropdown-table-chip-gap, var(--mono-tag-input-chip-gap, var(--mono-spacing)));\n  --_mono-dropdown-table-font-size: var(--mono-dropdown-table-font-sm, var(--mono-tag-input-font-sm, var(--mono-dropdown-table-font-md, var(--mono-tag-input-font-md, var(--mono-text-sm)))));\n  --_mono-dropdown-table-line-height: var(--mono-dropdown-table-line-height, var(--mono-tag-input-line-height, var(--mono-dropdown-table-line-height-sm, var(--mono-tag-input-line-height-sm, var(--mono-text-sm--lh)))));\n  --_mono-dropdown-table-chip-height: var(--mono-dropdown-table-chip-height-sm, var(--mono-tag-input-chip-height-sm, min(calc(var(--mono-spacing) * 5), var(--_mono-dropdown-table-chip-fit))));\n  --_mono-dropdown-table-action: calc(var(--mono-spacing) * 5);\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-size=\"lg\"],:where(.mono-dropdown-table.lg)) {\n  --_mono-dropdown-table-height: var(--mono-dropdown-table-height-lg, var(--mono-tag-input-height-lg, var(--mono-control-height-lg)));\n  --_mono-dropdown-table-radius: var(--mono-dropdown-table-radius-lg, var(--mono-tag-input-radius-lg, var(--_mono-dropdown-table-radius-preset, var(--mono-dropdown-table-radius, var(--mono-tag-input-radius, var(--mono-radius-md))))));\n  --_mono-dropdown-table-padding-x: var(--mono-dropdown-table-padding-x-lg, var(--mono-tag-input-padding-x-lg, var(--mono-dropdown-table-padding-x, var(--mono-tag-input-padding-x, var(--_mono-dropdown-table-padding-x-preset, calc(var(--mono-spacing) * 1.5))))));\n  --_mono-dropdown-table-padding-y: var(--mono-dropdown-table-padding-y-lg, var(--mono-tag-input-padding-y-lg, var(--mono-dropdown-table-padding-y, var(--mono-tag-input-padding-y, calc(var(--mono-spacing) * 1.5)))));\n  --_mono-dropdown-table-font-size: var(--mono-dropdown-table-font-lg, var(--mono-tag-input-font-lg, var(--mono-dropdown-table-font-md, var(--mono-tag-input-font-md, var(--mono-text-sm)))));\n  --_mono-dropdown-table-line-height: var(--mono-dropdown-table-line-height, var(--mono-tag-input-line-height, var(--mono-dropdown-table-line-height-lg, var(--mono-tag-input-line-height-lg, var(--mono-text-sm--lh)))));\n  --_mono-dropdown-table-chip-height: var(--mono-dropdown-table-chip-height-lg, var(--mono-tag-input-chip-height-lg, min(calc(var(--mono-spacing) * 6), var(--_mono-dropdown-table-chip-fit))));\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-size=\"xl\"],:where(.mono-dropdown-table.xl)) {\n  --_mono-dropdown-table-height: var(--mono-dropdown-table-height-xl, var(--mono-tag-input-height-xl, var(--mono-control-height-xl)));\n  --_mono-dropdown-table-radius: var(--mono-dropdown-table-radius-xl, var(--mono-tag-input-radius-xl, var(--_mono-dropdown-table-radius-preset, var(--mono-dropdown-table-radius, var(--mono-tag-input-radius, var(--mono-radius-md))))));\n  --_mono-dropdown-table-padding-x: var(--mono-dropdown-table-padding-x-xl, var(--mono-tag-input-padding-x-xl, var(--mono-dropdown-table-padding-x, var(--mono-tag-input-padding-x, var(--_mono-dropdown-table-padding-x-preset, calc(var(--mono-spacing) * 2))))));\n  --_mono-dropdown-table-padding-y: var(--mono-dropdown-table-padding-y-xl, var(--mono-tag-input-padding-y-xl, var(--mono-dropdown-table-padding-y, var(--mono-tag-input-padding-y, calc(var(--mono-spacing) * 2)))));\n  --_mono-dropdown-table-gap: var(--mono-dropdown-table-chip-gap, var(--mono-tag-input-chip-gap, calc(var(--mono-spacing) * 2)));\n  --_mono-dropdown-table-font-size: var(--mono-dropdown-table-font-xl, var(--mono-tag-input-font-xl, var(--mono-text-base)));\n  --_mono-dropdown-table-line-height: var(--mono-dropdown-table-line-height, var(--mono-tag-input-line-height, var(--mono-dropdown-table-line-height-xl, var(--mono-tag-input-line-height-xl, var(--mono-text-base--lh)))));\n  --_mono-dropdown-table-chip-height: var(--mono-dropdown-table-chip-height-xl, var(--mono-tag-input-chip-height-xl, min(calc(var(--mono-spacing) * 6.5), var(--_mono-dropdown-table-chip-fit))));\n  --_mono-dropdown-table-chip-font-size: var(--mono-dropdown-table-chip-font-size, var(--mono-tag-input-chip-font-size, var(--mono-text-sm)));\n  --_mono-dropdown-table-chip-line-height: var(--mono-dropdown-table-chip-line-height, var(--mono-tag-input-chip-line-height, var(--mono-text-sm--lh)));\n  --_mono-dropdown-table-icon: var(--mono-dropdown-table-icon-size, var(--mono-tag-input-icon-size, calc(var(--mono-spacing) * 5)));\n  --_mono-dropdown-table-action: calc(var(--mono-spacing) * 7);\n  --_mono-dropdown-table-clear-glyph: calc(var(--mono-spacing) * 4);\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-size=\"xxl\"],:where(.mono-dropdown-table.xxl)) {\n  --_mono-dropdown-table-height: var(--mono-dropdown-table-height-xxl, var(--mono-tag-input-height-xxl, var(--mono-control-height-xxl)));\n  --_mono-dropdown-table-radius: var(--mono-dropdown-table-radius-xxl, var(--mono-tag-input-radius-xxl, var(--_mono-dropdown-table-radius-preset, var(--mono-dropdown-table-radius, var(--mono-tag-input-radius, var(--mono-radius-md))))));\n  --_mono-dropdown-table-padding-x: var(--mono-dropdown-table-padding-x-xxl, var(--mono-tag-input-padding-x-xxl, var(--mono-dropdown-table-padding-x, var(--mono-tag-input-padding-x, var(--_mono-dropdown-table-padding-x-preset, calc(var(--mono-spacing) * 2.5))))));\n  --_mono-dropdown-table-padding-y: var(--mono-dropdown-table-padding-y-xxl, var(--mono-tag-input-padding-y-xxl, var(--mono-dropdown-table-padding-y, var(--mono-tag-input-padding-y, calc(var(--mono-spacing) * 2)))));\n  --_mono-dropdown-table-gap: var(--mono-dropdown-table-chip-gap, var(--mono-tag-input-chip-gap, calc(var(--mono-spacing) * 2)));\n  --_mono-dropdown-table-font-size: var(--mono-dropdown-table-font-xxl, var(--mono-tag-input-font-xxl, var(--mono-text-lg)));\n  --_mono-dropdown-table-line-height: var(--mono-dropdown-table-line-height, var(--mono-tag-input-line-height, var(--mono-dropdown-table-line-height-xxl, var(--mono-tag-input-line-height-xxl, var(--mono-text-lg--lh)))));\n  --_mono-dropdown-table-chip-height: var(--mono-dropdown-table-chip-height-xxl, var(--mono-tag-input-chip-height-xxl, min(calc(var(--mono-spacing) * 7), var(--_mono-dropdown-table-chip-fit))));\n  --_mono-dropdown-table-chip-font-size: var(--mono-dropdown-table-chip-font-size, var(--mono-tag-input-chip-font-size, var(--mono-text-sm)));\n  --_mono-dropdown-table-chip-line-height: var(--mono-dropdown-table-chip-line-height, var(--mono-tag-input-chip-line-height, var(--mono-text-sm--lh)));\n  --_mono-dropdown-table-icon: var(--mono-dropdown-table-icon-size, var(--mono-tag-input-icon-size, calc(var(--mono-spacing) * 5)));\n  --_mono-dropdown-table-action: calc(var(--mono-spacing) * 8);\n  --_mono-dropdown-table-clear-glyph: calc(var(--mono-spacing) * 4);\n}\n\n/* =========================================\n   Variants — each writes only `*-preset` slots, read from the dropdown-table's\n   knob first and the tag-input's second (a flavour writes the latter)\n   ========================================= */\n\n/* basecoat@1.0.2 styles/vega.css .combobox-chips — rounded-md border border-input\n   bg-transparent shadow-xs (dark:bg-input/30 via --mono-mode-surface) */\n:is([mono-dropdown-table],.mono-dropdown-table):is(:not([mono-variant]), :is([mono-variant=\"outlined\"],:where(.mono-dropdown-table.outlined))) {\n  --_mono-dropdown-table-bg-preset: var(--mono-dropdown-table-outline-bg, var(--mono-tag-input-outline-bg));\n  --_mono-dropdown-table-border-color-preset: var(--mono-dropdown-table-outline-border-color, var(--mono-tag-input-outline-border-color));\n  --_mono-dropdown-table-side-border-color-preset: var(--mono-dropdown-table-outline-side-border-color, var(--mono-tag-input-outline-side-border-color));\n  --_mono-dropdown-table-shadow-preset: var(--mono-dropdown-table-outline-shadow, var(--mono-tag-input-outline-shadow, var(--mono-shadow-xs)));\n  --_mono-dropdown-table-ring-width-preset: var(--mono-dropdown-table-outline-ring-width, var(--mono-tag-input-outline-ring-width));\n  --_mono-dropdown-table-radius-preset: var(--mono-dropdown-table-outline-radius, var(--mono-tag-input-outline-radius));\n  --_mono-dropdown-table-padding-x-preset: var(--mono-dropdown-table-outline-padding-x, var(--mono-tag-input-outline-padding-x));\n}\n\n/* EXTENSION — filled ≡ basecoat@1.0.2 styles/luma.css .combobox-chips */\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-variant=\"filled\"],:where(.mono-dropdown-table.filled)) {\n  --_mono-dropdown-table-bg-preset: var(--mono-dropdown-table-filled-bg, var(--mono-tag-input-filled-bg, color-mix(in oklab, var(--input) 50%, transparent)));\n  --_mono-dropdown-table-border-color-preset: transparent;\n  --_mono-dropdown-table-shadow-preset: 0 0 #0000;\n}\n\n/* EXTENSION — underlined ≡ basecoat@1.0.2 styles/sera.css .combobox-chips */\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-variant=\"underlined\"],:where(.mono-dropdown-table.underlined)) {\n  --_mono-dropdown-table-bg-preset: transparent;\n  --_mono-dropdown-table-side-border-color-preset: transparent;\n  --_mono-dropdown-table-shadow-preset: 0 0 #0000;\n  --_mono-dropdown-table-ring-width-preset: 0px;\n  --_mono-dropdown-table-radius-preset: 0;\n  --_mono-dropdown-table-padding-x-preset: 0;\n}\n\n/* =========================================\n   Colours — the `color` prop is the FOCUS colour (ring + focused border)\n   ========================================= */\n\n:is([mono-dropdown-table],.mono-dropdown-table):is(:not([mono-color]), :is([mono-color=\"primary\"],:where(.mono-dropdown-table.primary))) {\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-primary);\n}\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"secondary\"],:where(.mono-dropdown-table.secondary)) {\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-secondary);\n}\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"success\"],:where(.mono-dropdown-table.success)) {\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-success);\n}\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"danger\"],:where(.mono-dropdown-table.danger)) {\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-danger);\n}\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"warning\"],:where(.mono-dropdown-table.warning)) {\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-warning);\n}\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"info\"],:where(.mono-dropdown-table.info)) {\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-info);\n}\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"teal\"],:where(.mono-dropdown-table.teal)) {\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-teal);\n}\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"purple\"],:where(.mono-dropdown-table.purple)) {\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-purple);\n}\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"neutral\"],:where(.mono-dropdown-table.neutral)) {\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-neutral);\n}\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"dark\"],:where(.mono-dropdown-table.dark)) {\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-dark);\n}\n\n/* =========================================\n   Label\n   ========================================= */\n\n/* basecoat@1.0.2 styles/vega.css .field > label, .label — flex items-center\n   gap-2 text-sm leading-none font-medium select-none w-fit */\n:is([mono-dropdown-table],.mono-dropdown-table) > :is([mono-dd-label],.mono-dropdown-table-label) {\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  margin: 0 0 var(--_mono-dropdown-table-gap-y);\n  gap: var(--mono-dropdown-table-label-gap, var(--mono-tag-input-label-gap, calc(var(--mono-spacing) * 2)));\n  font-size: var(--mono-dropdown-table-label-font-size, var(--mono-tag-input-label-font-size, var(--mono-text-sm)));\n  line-height: var(--mono-dropdown-table-label-line-height, var(--mono-tag-input-label-line-height, 1));\n  font-weight: var(--mono-dropdown-table-label-font-weight, var(--mono-tag-input-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium))));\n  text-transform: var(--mono-dropdown-table-label-text-transform, var(--mono-tag-input-label-text-transform, none));\n  letter-spacing: var(--mono-dropdown-table-label-letter-spacing, var(--mono-tag-input-label-letter-spacing, normal));\n  color: var(--_mono-dropdown-table-text);\n  user-select: none;\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-disabled],.disabled) > :is([mono-dd-label],.mono-dropdown-table-label) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* basecoat@1.0.2 styles/vega.css .field — data-invalid:text-destructive */\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-validation-state=\"invalid\"],:where(.mono-dropdown-table.is-invalid)) > :is([mono-dd-label],.mono-dropdown-table-label) {\n  color: var(--_mono-dropdown-table-invalid);\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-required-mark],.mono-dropdown-table-required) {\n  color: var(--_mono-dropdown-table-danger);\n}\n\n/* `tooltip` prop — the info icon at the end of the label row (the label's\n   flex gap spaces it). `pointer-events` is restored because a disabled field\n   switches its label's off, and a disabled field is exactly where the reason\n   is worth a hover. Knobs: --mono-dropdown-table-label-tooltip-size / -color / -opacity. */\n:where(:is([mono-dropdown-table],.mono-dropdown-table)) > :is([mono-dd-label],.mono-dropdown-table-label) > [mono-label-tooltip] {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--mono-dropdown-table-label-tooltip-size, 1.1em);\n  color: var(--mono-dropdown-table-label-tooltip-color, currentColor);\n  opacity: var(--mono-dropdown-table-label-tooltip-opacity, 0.6);\n  border-radius: 9999px;\n  cursor: help;\n  pointer-events: auto;\n  outline: none;\n  transition: opacity 150ms ease;\n}\n\n:where(:is([mono-dropdown-table],.mono-dropdown-table)) > :is([mono-dd-label],.mono-dropdown-table-label) > [mono-label-tooltip]:is(:hover, :focus-visible) {\n  opacity: 1;\n}\n\n:where(:is([mono-dropdown-table],.mono-dropdown-table)) > :is([mono-dd-label],.mono-dropdown-table-label) > [mono-label-tooltip]:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}\n\n:where(:is([mono-dropdown-table],.mono-dropdown-table)) > :is([mono-dd-label],.mono-dropdown-table-label) > [mono-label-tooltip] > [mono-icon] {\n  width: 1em;\n  height: 1em;\n}\n\n/* =========================================\n   The field — the chip box (role=\"combobox\"; the search box lives in the panel)\n   ========================================= */\n\n:is([mono-dropdown-table],.mono-dropdown-table) > :is([mono-dd-control],.mono-dropdown-table-control) {\n  position: relative;\n}\n\n/* The control is a grid/flex item in a host layout; once the value stops\n   wrapping (inline strip) its automatic minimum is the full strip — pin it. */\n:is([mono-dropdown-table],.mono-dropdown-table) > :is([mono-dd-control],.mono-dropdown-table-control):is([mono-inline],.is-inline) {\n  min-width: 0;\n}\n\n/* basecoat@1.0.2 components/combobox.css .combobox-chips — flex w-full min-w-0\n   flex-wrap items-center */\n/* basecoat@1.0.2 styles/vega.css .combobox-chips — min-h-9 gap-1.5 rounded-md\n   border border-input bg-transparent bg-clip-padding px-1.5 py-1.5 text-sm\n   shadow-xs transition-[color,box-shadow] focus-within:border-ring\n   focus-within:ring-3 focus-within:ring-ring/50 has-[[aria-invalid=true]]:…;\n   mono: one row — the value area wraps INSIDE it and the actions stay centred */\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-trigger],.mono-dropdown-table-trigger) {\n  --_mono-dropdown-table-bc: var(--_mono-dropdown-table-border-color);\n  --_mono-dropdown-table-side-bc: var(--mono-dropdown-table-side-border-color, var(--mono-tag-input-side-border-color, var(--_mono-dropdown-table-side-border-color-preset, var(--_mono-dropdown-table-bc))));\n  --_mono-dropdown-table-ring: 0 0 #0000;\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--_mono-dropdown-table-gap);\n  width: 100%;\n  min-width: 0;\n  min-height: var(--_mono-dropdown-table-height);\n  padding-block: var(--_mono-dropdown-table-padding-y);\n  padding-inline: var(--_mono-dropdown-table-padding-x);\n  outline-style: none;\n  border: var(--mono-border-width) solid var(--_mono-dropdown-table-bc);\n  border-top-color: var(--_mono-dropdown-table-side-bc);\n  border-inline-color: var(--_mono-dropdown-table-side-bc);\n  border-radius: var(--_mono-dropdown-table-radius);\n  background: var(--_mono-dropdown-table-bg);\n  background-clip: padding-box;\n  color: var(--_mono-dropdown-table-text);\n  box-shadow: var(--_mono-dropdown-table-ring), var(--_mono-dropdown-table-shadow);\n  font-family: inherit;\n  font-size: var(--_mono-dropdown-table-font-size);\n  line-height: var(--_mono-dropdown-table-line-height);\n  cursor: pointer;\n  transition-property: color, box-shadow, border-color, background-color;\n  transition-timing-function: var(--mono-ease);\n  transition-duration: var(--mono-duration);\n}\n\n/* focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 — and\n   the OPEN state, which keeps the ring while the keyboard is in the panel */\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-trigger],.mono-dropdown-table-trigger):focus-visible,\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-open],.open) :is([mono-dd-trigger],.mono-dropdown-table-trigger) {\n  --_mono-dropdown-table-bc: var(--_mono-dropdown-table-ring-color);\n  --_mono-dropdown-table-ring: 0 0 0 var(--_mono-dropdown-table-ring-width) color-mix(in oklab, var(--_mono-dropdown-table-ring-color) var(--_mono-dropdown-table-ring-alpha), transparent);\n}\n\n/* basecoat@1.0.2 styles/vega.css .combobox-chips — has-[[aria-invalid=true]]:border-destructive\n   has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive/20 */\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-validation-state=\"invalid\"],:where(.mono-dropdown-table.is-invalid)) :is([mono-dd-trigger],.mono-dropdown-table-trigger) {\n  --_mono-dropdown-table-bc: var(--mono-mode-invalid-border);\n  --_mono-dropdown-table-ring: 0 0 0 var(--_mono-dropdown-table-ring-width) var(--mono-mode-invalid-ring);\n}\n\n/* EXTENSION — valid / warning are the invalid pattern in the role's colour */\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-validation-state=\"valid\"],:where(.mono-dropdown-table.is-valid)) :is([mono-dd-trigger],.mono-dropdown-table-trigger) {\n  --_mono-dropdown-table-bc: color-mix(in oklab, var(--_mono-dropdown-table-valid) var(--mono-mode-state-border-alpha), transparent);\n  --_mono-dropdown-table-ring: 0 0 0 var(--_mono-dropdown-table-ring-width) color-mix(in oklab, var(--_mono-dropdown-table-valid) var(--mono-mode-state-ring-alpha), transparent);\n}\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-validation-state=\"warning\"],:where(.mono-dropdown-table.is-warning)) :is([mono-dd-trigger],.mono-dropdown-table-trigger) {\n  --_mono-dropdown-table-bc: color-mix(in oklab, var(--_mono-dropdown-table-warning) var(--mono-mode-state-border-alpha), transparent);\n  --_mono-dropdown-table-ring: 0 0 0 var(--_mono-dropdown-table-ring-width) color-mix(in oklab, var(--_mono-dropdown-table-warning) var(--mono-mode-state-ring-alpha), transparent);\n}\n\n/* EXTENSION — readonly: a muted surface */\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-readonly],.readonly) :is([mono-dd-trigger],.mono-dropdown-table-trigger) {\n  background: var(--mono-dropdown-table-readonly-bg, var(--mono-tag-input-readonly-bg, var(--muted)));\n  cursor: default;\n}\n\n/* .combobox-chips > input:disabled — opacity-50 (on the box, so the chips fade\n   with it). The strip's ‹ › pager opts back in so the chips can still be read. */\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-disabled],.disabled) :is([mono-dd-trigger],.mono-dropdown-table-trigger) {\n  opacity: 0.5;\n  pointer-events: none;\n  cursor: not-allowed;\n  background: var(--mono-dropdown-table-disabled-bg, var(--mono-tag-input-disabled-bg, var(--_mono-dropdown-table-bg)));\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-disabled],.disabled) :is([mono-dd-scroll],.mono-dropdown-table-scroll):not(:is([mono-idle],.is-idle)) {\n  pointer-events: auto;\n  cursor: pointer;\n}\n\n/* ── the value area: chips (multi) or one line of text ────────────────── */\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-value],.mono-dropdown-table-value) {\n  flex: 1 1 auto;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--_mono-dropdown-table-gap);\n  min-width: 0;\n  /* the chip row is the box's height; an empty value never exceeds it */\n  min-height: var(--_mono-dropdown-table-chip-height);\n  overflow: hidden;\n  color: var(--_mono-dropdown-table-text);\n}\n\n/* EXTENSION — a text value (single select, or the placeholder) sits where a\n   `.select` puts its text (px-3), not where a chip does (px-1.5): the inset is\n   what keeps this field's text in line with a `<mono-select>` beside it. */\n:is([mono-dropdown-table],.mono-dropdown-table):not([mono-multiple][mono-has-value]) :is([mono-dd-value],.mono-dropdown-table-value) {\n  padding-inline-start: var(--mono-dropdown-table-text-inset, calc(var(--mono-spacing) * 1.5));\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-value],.mono-dropdown-table-value):is([mono-dd-placeholder],.mono-dropdown-table-placeholder) {\n  color: var(--_mono-dropdown-table-placeholder);\n  white-space: nowrap;\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-value],.mono-dropdown-table-value) > span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* =========================================\n   Chips\n   ========================================= */\n\n/* basecoat@1.0.2 components/combobox.css .combobox-chip — inline-flex w-fit\n   shrink-0 items-center whitespace-nowrap */\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) {\n  display: inline-flex;\n  width: fit-content;\n  max-width: 100%;\n  flex-shrink: 0;\n  align-items: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  line-height: 1;\n}\n\n/* basecoat@1.0.2 styles/vega.css .combobox-chip — h-5.5 gap-1 rounded-sm bg-muted\n   px-1.5 text-xs font-medium text-foreground, has-[>.combobox-chip-remove]:pe-0 */\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) > [mono-dd-chip-main] {\n  display: inline-flex;\n  align-items: center;\n  height: var(--_mono-dropdown-table-chip-height);\n  max-width: 100%;\n  gap: var(--mono-dropdown-table-chip-content-gap, var(--mono-tag-input-chip-content-gap, var(--mono-spacing)));\n  margin: 0;\n  padding-inline: var(--mono-dropdown-table-chip-padding-x, var(--mono-tag-input-chip-padding-x, calc(var(--mono-spacing) * 1.5)));\n  border: 0;\n  border-radius: var(--mono-dropdown-table-chip-radius, var(--mono-tag-input-chip-radius, var(--mono-radius-sm)));\n  background: var(--mono-dropdown-table-chip-bg, var(--mono-tag-input-chip-bg, var(--muted)));\n  color: var(--mono-dropdown-table-chip-color, var(--mono-tag-input-chip-color, var(--_mono-dropdown-table-text)));\n  font-family: inherit;\n  font-size: var(--_mono-dropdown-table-chip-font-size);\n  line-height: var(--_mono-dropdown-table-chip-line-height);\n  font-weight: var(--mono-dropdown-table-chip-font-weight, var(--mono-tag-input-chip-font-weight, var(--mono-font-weight-medium)));\n  text-decoration: none;\n  cursor: default;\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip)[mono-dd-removable] > [mono-dd-chip-main] {\n  padding-inline-end: 0;\n}\n\n/* EXTENSION — `chip.rounded`: the chip's own corner scale over the combobox\n   chip's rounded-sm (the same words `<mono-chip rounded>` takes) */\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip)[mono-dd-chip-rounded=\"none\"] > [mono-dd-chip-main] { border-radius: 0; }\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip)[mono-dd-chip-rounded=\"xs\"] > [mono-dd-chip-main] { border-radius: var(--mono-radius-xs); }\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip)[mono-dd-chip-rounded=\"sm\"] > [mono-dd-chip-main] { border-radius: var(--mono-radius-sm); }\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip)[mono-dd-chip-rounded=\"md\"] > [mono-dd-chip-main] { border-radius: var(--mono-radius-md); }\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip)[mono-dd-chip-rounded=\"lg\"] > [mono-dd-chip-main] { border-radius: var(--mono-radius-lg); }\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip)[mono-dd-chip-rounded=\"xl\"] > [mono-dd-chip-main] { border-radius: var(--mono-radius-xl); }\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip)[mono-dd-chip-rounded=\"xxl\"] > [mono-dd-chip-main] { border-radius: var(--mono-radius-2xl); }\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip)[mono-dd-chip-rounded=\"full\"] > [mono-dd-chip-main] { border-radius: var(--mono-radius-full); }\n\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) [mono-dd-chip-content] {\n  display: inline-flex;\n  align-items: center;\n  gap: inherit;\n  min-width: 0;\n  max-width: 100%;\n  height: 100%;\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) [mono-dd-chip-label] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* EXTENSION — `chip.dot`: a coloured dot before the label (the badge's dot idiom) */\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) [mono-dd-chip-dot] {\n  flex: 0 0 auto;\n  width: calc(var(--mono-spacing) * 1.5);\n  height: calc(var(--mono-spacing) * 1.5);\n  border-radius: var(--mono-radius-full);\n  background: currentColor;\n}\n\n/* EXTENSION — `chip.color` pins a hue: the tonal pattern (bg-x/10 text-x, dark 20).\n   Without one the chips follow the field's `color` — the ring colour — the way\n   they always did here. */\n:is([mono-dropdown-table],.mono-dropdown-table):not(:is(:not([mono-color]), :is([mono-color=\"primary\"],:where(.mono-dropdown-table.primary)))) :is([mono-dd-chip],.mono-dropdown-table-chip):not([mono-dd-chip-color]) > [mono-dd-chip-main] {\n  background: color-mix(in oklab, var(--_mono-dropdown-table-ring-color) var(--mono-mode-tint), transparent);\n  color: var(--_mono-dropdown-table-ring-color);\n}\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip)[mono-dd-chip-color=\"primary\"] > [mono-dd-chip-main] { background: color-mix(in oklab, var(--primary) var(--mono-mode-tint), transparent); color: var(--primary); }\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip)[mono-dd-chip-color=\"secondary\"] > [mono-dd-chip-main] { background: var(--secondary); color: var(--secondary-foreground); }\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip)[mono-dd-chip-color=\"success\"] > [mono-dd-chip-main] { background: color-mix(in oklab, var(--success) var(--mono-mode-tint), transparent); color: var(--success); }\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip)[mono-dd-chip-color=\"danger\"] > [mono-dd-chip-main] { background: color-mix(in oklab, var(--destructive) var(--mono-mode-tint), transparent); color: var(--destructive); }\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip)[mono-dd-chip-color=\"warning\"] > [mono-dd-chip-main] { background: color-mix(in oklab, var(--warning) var(--mono-mode-tint), transparent); color: var(--warning); }\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip)[mono-dd-chip-color=\"info\"] > [mono-dd-chip-main] { background: color-mix(in oklab, var(--info) var(--mono-mode-tint), transparent); color: var(--info); }\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip)[mono-dd-chip-color=\"teal\"] > [mono-dd-chip-main] { background: color-mix(in oklab, var(--teal) var(--mono-mode-tint), transparent); color: var(--teal); }\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip)[mono-dd-chip-color=\"purple\"] > [mono-dd-chip-main] { background: color-mix(in oklab, var(--purple) var(--mono-mode-tint), transparent); color: var(--purple); }\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip)[mono-dd-chip-color=\"neutral\"] > [mono-dd-chip-main] { background: color-mix(in oklab, var(--neutral) var(--mono-mode-tint), transparent); color: var(--neutral); }\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip)[mono-dd-chip-color=\"dark\"] > [mono-dd-chip-main] { background: var(--dark); color: var(--dark-foreground); }\n\n/* basecoat@1.0.2 components/combobox.css .combobox-chip-remove — inline-flex\n   shrink-0 items-center justify-center */\n/* basecoat@1.0.2 styles/vega.css .combobox-chip-remove — -ms-1 opacity-50\n   hover:opacity-100, svg size-3.5 */\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) [mono-dd-chip-close] {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  /* explicit: the element still carries chip.css's `.chip-close` class as a hook,\n     which pins a 1rem box — the raw markup has no such class */\n  width: auto;\n  height: 100%;\n  min-width: 0;\n  margin: 0;\n  transform: none;\n  margin-inline-start: calc(var(--mono-spacing) * -1);\n  padding: 0 var(--mono-spacing);\n  border: 0;\n  border-radius: inherit;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  line-height: 1;\n  opacity: 0.5;\n  cursor: pointer;\n  outline-style: none;\n  transition-property: opacity;\n  transition-timing-function: var(--mono-ease);\n  transition-duration: var(--mono-duration);\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) [mono-dd-chip-close]:focus-visible {\n  opacity: 1;\n}\n\n@media (hover: hover) {\n  :is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) [mono-dd-chip-close]:hover {\n    opacity: 1;\n  }\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) [mono-dd-chip-close] > :is(svg, .mono-icon, :is([mono-icon],.mono-icon)) {\n  display: block;\n  width: calc(var(--mono-spacing) * 3.5);\n  height: calc(var(--mono-spacing) * 3.5);\n  pointer-events: none;\n}\n\n/* EXTENSION — the \"+N more\" counter chip is a control */\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip):is([mono-dd-more],.mono-dropdown-table-more) > [mono-dd-chip-main] {\n  cursor: pointer;\n  outline-style: none;\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip):is([mono-dd-more],.mono-dropdown-table-more) > [mono-dd-chip-main]:focus-visible {\n  box-shadow: 0 0 0 var(--_mono-dropdown-table-ring-width) color-mix(in oklab, var(--_mono-dropdown-table-ring-color) var(--_mono-dropdown-table-ring-alpha), transparent);\n}\n\n@media (hover: hover) {\n  :is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip):is([mono-dd-more],.mono-dropdown-table-more) > [mono-dd-chip-main]:hover {\n    background: var(--mono-mode-surface-hover);\n  }\n}\n\n/* ── the inline chip strip (`chip.behaviour: 'inline'`) ──────────────────\n   One line that never grows: the value stops wrapping, the chips live in their\n   own strip, and the strip absorbs the overflow instead of the field.\n\n   `overflow-x: hidden` — NOT `auto` — is the whole scroll contract. Hidden still\n   honours a programmatic `scrollLeft`, so `ChipStripController` can page the\n   strip while the browser paints no scrollbar and refuses to scroll it from the\n   wheel, a click-drag or the arrow keys. */\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-value],.mono-dropdown-table-value):is([mono-inline],.is-inline) {\n  flex-wrap: nowrap;\n}\n\n/* Two attributes deliberately: the strip is a direct `span` child of the value\n   area, so the `[mono-dd-value] > span` ellipsis rule above matches it too. */\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-value],.mono-dropdown-table-value) > :is([mono-dd-chip-strip],.mono-dropdown-table-chip-strip) {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: var(--_mono-dropdown-table-gap);\n  flex: 0 1 auto;\n  min-width: 0;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  text-overflow: clip;\n  /* NO `scroll-behavior: smooth` — see ChipStripController (one scroll event per\n     frame would reposition every open popup). */\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip-strip],.mono-dropdown-table-chip-strip) > * {\n  flex-shrink: 0;\n}\n\n/* =========================================\n   Actions — ‹ › pager, clear, caret\n   ========================================= */\n\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-actions],.mono-dropdown-table-actions) {\n  display: flex;\n  align-items: center;\n  gap: var(--mono-spacing);\n  flex: 0 0 auto;\n  line-height: 1;\n  /* The row's buttons are size-6 — 2px taller than a chip — and they sit IN the\n     flex row (centred beside a wrapping value, unlike tag-input's pinned corner),\n     so on their own they would floor the field 2px above the token. A negative\n     block margin folds that back: the row costs exactly one chip height. */\n  margin-block: calc((var(--_mono-dropdown-table-chip-height) - var(--_mono-dropdown-table-action)) / 2);\n}\n\n/* basecoat@1.0.2 components/combobox.css .combobox [data-clear] — size-6 border-0\n   bg-transparent p-0 text-current; the caret ≡ .combobox-trigger-icon (size-4\n   text-muted-foreground), the pager the same box. Painted as .btn[data-variant='ghost']. */\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-clear],.mono-dropdown-table-clear),\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-arrow],.mono-dropdown-table-arrow),\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-scroll],.mono-dropdown-table-scroll) {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: var(--_mono-dropdown-table-action);\n  height: var(--_mono-dropdown-table-action);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: var(--mono-dropdown-table-clear-radius, var(--mono-tag-input-clear-radius, calc(var(--radius) - 5px)));\n  background: transparent;\n  color: var(--_mono-dropdown-table-muted);\n  font: inherit;\n  line-height: 1;\n  cursor: pointer;\n  outline-style: none;\n  transition-property: color, background-color, transform;\n  transition-timing-function: var(--mono-ease);\n  transition-duration: var(--mono-duration);\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table) :is(:is([mono-dd-clear],.mono-dropdown-table-clear), :is([mono-dd-arrow],.mono-dropdown-table-arrow), :is([mono-dd-scroll],.mono-dropdown-table-scroll)) > :is(svg, .mono-icon, :is([mono-icon],.mono-icon)) {\n  display: block;\n  width: var(--_mono-dropdown-table-icon);\n  height: var(--_mono-dropdown-table-icon);\n  pointer-events: none;\n  transition-property: transform;\n  transition-timing-function: var(--mono-ease);\n  transition-duration: var(--mono-duration);\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-clear],.mono-dropdown-table-clear) > :is(svg, .mono-icon, :is([mono-icon],.mono-icon)) {\n  width: var(--_mono-dropdown-table-clear-glyph);\n  height: var(--_mono-dropdown-table-clear-glyph);\n}\n\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted hover:text-foreground */\n@media (hover: hover) {\n  :is([mono-dropdown-table],.mono-dropdown-table) :is(:is([mono-dd-clear],.mono-dropdown-table-clear), :is([mono-dd-arrow],.mono-dropdown-table-arrow), :is([mono-dd-scroll],.mono-dropdown-table-scroll)):hover {\n    background: var(--mono-mode-ghost-hover);\n    color: var(--_mono-dropdown-table-text);\n  }\n}\n\n/* EXTENSION — the caret turns while the panel is open */\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-open],.open) :is([mono-dd-arrow],.mono-dropdown-table-arrow) > :is(svg, .mono-icon, :is([mono-icon],.mono-icon)) {\n  transform: rotate(180deg);\n}\n\n/* At an end of the strip the pager keeps its box but disappears — hiding it with\n   `display: none` would shrink the row and shove the strip sideways mid-click. */\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-scroll],.mono-dropdown-table-scroll):is([mono-idle],.is-idle) {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n/* =========================================\n   The \"+N more\" overflow panel — a popover holding the overflow chips\n   ========================================= */\n\n/* basecoat@1.0.2 styles/vega.css .combobox [data-popover] — bg-popover ring-1\n   ring-foreground/10 rounded-md shadow-md; EXTENSION: p-1.5 gap-1.5 flex-wrap.\n   Portaled to <body> and placed `fixed` from the \"+N more\" chip by its own\n   popup controller in the light build; in the shadow build `_positionMorePanel`\n   runs the same math in place — the absolute rule is the pre-placement fallback. */\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-more],.mono-dropdown-table-more) {\n  position: absolute;\n  top: calc(100% + calc(var(--mono-spacing) * 1.5));\n  left: 0;\n  z-index: var(--mono-popup-z, 1000);\n  display: none;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: var(--_mono-dropdown-table-gap);\n  max-width: 20rem;\n  /* `--mono-popup-avail-h` = the room left on the side the panel opened on. */\n  max-height: min(14rem, var(--mono-popup-avail-h, 100vh));\n  overflow: auto;\n  /* Portaled + anchored: a chained scroll would drag this panel off-screen. */\n  overscroll-behavior: contain;\n  padding: calc(var(--mono-spacing) * 1.5);\n  border-radius: var(--mono-dropdown-table-dropdown-radius, var(--mono-tag-input-dropdown-radius, var(--mono-radius-md)));\n  background: var(--mono-dropdown-table-dropdown-bg, var(--mono-tag-input-dropdown-bg, var(--popover)));\n  color: var(--mono-dropdown-table-dropdown-color, var(--mono-tag-input-dropdown-color, var(--popover-foreground)));\n  box-shadow: var(--mono-dropdown-table-dropdown-ring, var(--mono-tag-input-dropdown-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent))), var(--mono-dropdown-table-dropdown-shadow, var(--mono-tag-input-dropdown-shadow, var(--mono-shadow-md)));\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-more-open],.more-open) :is([mono-dd-more],.mono-dropdown-table-more) {\n  display: flex;\n}\n\n/* =========================================\n   The panel — sized by the `dropdown` prop, NOT the field\n   ========================================= */\n\n/* basecoat@1.0.2 components/popover.css [data-popover] — absolute z-50 overflow;\n   mono: `display: none` while closed, `position: fixed` (the popup controller\n   sets top/left), `--mono-popup-z` from the shared stack */\n/* basecoat@1.0.2 styles/vega.css .combobox [data-popover] — bg-popover\n   text-popover-foreground ring-foreground/10 rounded-md p-0 shadow-md ring-1;\n   EXTENSION: a flex column of three regions, the middle one scrolling */\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-panel],.mono-dropdown-table-panel) {\n  display: none;\n  position: fixed;\n  z-index: var(--mono-popup-z, 1000);\n  flex-direction: column;\n  width: max-content;\n  min-width: var(--mono-dropdown-table-dropdown-min-width, 18rem);\n  max-width: min(90vw, 60rem);\n  /* Two independent caps, combined so neither can clobber the other:\n     --_mono-dropdown-table-panel-max-h  the consumer's `:dropdown.prop=\"{ maxHeight }\"` (else 60vh)\n     --mono-popup-avail-h                the room actually left between the field and the\n                                         viewport edge on the side the panel opened on */\n  max-height: min(var(--_mono-dropdown-table-panel-max-h, 60vh), var(--mono-popup-avail-h, 100vh));\n  overflow: hidden;\n  isolation: isolate;\n  border-radius: var(--mono-dropdown-table-dropdown-radius, var(--mono-tag-input-dropdown-radius, var(--mono-radius-md)));\n  background: var(--mono-dropdown-table-dropdown-bg, var(--mono-tag-input-dropdown-bg, var(--popover)));\n  color: var(--mono-dropdown-table-dropdown-color, var(--mono-tag-input-dropdown-color, var(--popover-foreground)));\n  box-shadow: var(--mono-dropdown-table-dropdown-ring, var(--mono-tag-input-dropdown-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent))), var(--mono-dropdown-table-dropdown-shadow, var(--mono-tag-input-dropdown-shadow, var(--mono-shadow-md)));\n  font-size: var(--_mono-dropdown-table-font-size);\n  line-height: var(--_mono-dropdown-table-line-height);\n  outline-style: none;\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-open],.open) :is([mono-dd-panel],.mono-dropdown-table-panel) {\n  display: flex;\n}\n\n/* The panel is a container; its own ring would just outline the whole popup. */\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-panel],.mono-dropdown-table-panel):focus,\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-panel],.mono-dropdown-table-panel):focus-visible {\n  outline: none;\n}\n\n/* EXTENSION — the search box above the rows, the pager below, on hairlines */\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-region=\"search\"],:where(.mono-dropdown-table-region.search)) {\n  flex: 0 0 auto;\n  padding: var(--mono-dropdown-table-region-padding, calc(var(--mono-spacing) * 2));\n  border-bottom: var(--mono-border-width) solid var(--border);\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-region=\"body\"],:where(.mono-dropdown-table-region.body)) {\n  flex: 1 1 auto;\n  /* `min-height: 0` lets the body shrink below its content height inside the flex\n     column — without it the region floors at its intrinsic size and the panel\n     overflows its own max-height instead of scrolling the table. */\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-region=\"foot\"],:where(.mono-dropdown-table-region.foot)) {\n  flex: 0 0 auto;\n  padding: var(--mono-dropdown-table-region-padding, calc(var(--mono-spacing) * 2));\n  border-top: var(--mono-border-width) solid var(--border);\n}\n\n/* light: a region with nothing captured is `:empty`; shadow: regions wrap a\n   `<slot>` (never `:empty`), so the element marks an unassigned one `mono-empty` */\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-region],.mono-dropdown-table-region):empty,\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-region],.mono-dropdown-table-region)[mono-empty] {\n  display: none;\n}\n\n/* =========================================\n   The rows — the ported table's own rows, in TWO contexts\n   -----------------------------------------\n   light:  the captured `<table mono-table>` inside the (portaled) body region;\n   shadow: the SLOTTED table — a light-DOM child of the host, so the host tag is\n           the scope (these rules reach it from the page sheet, not the shadow one).\n\n   A picked row is the TABLE's `mono-selected` row (the element sets it, the same\n   attribute `<mono-table-checkbox>` sets), so the table's own wash + rail paint\n   it and a flavour that retunes `--mono-table-selected-bg` retunes it here. The\n   keyboard cursor is Basecoat's `.active` option — the `--muted` row, like hover.\n   ========================================= */\n\n/* basecoat@1.0.2 styles/vega.css .table tr — hover:bg-muted/50; the table ships\n   with hover off, the picker turns it on through the table's PUBLIC knob */\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-region=\"body\"],:where(.mono-dropdown-table-region.body)),\nmono-shadow-dropdown-table {\n  --mono-table-hover-bg: var(--mono-dropdown-table-row-hover-bg, color-mix(in oklab, var(--muted) 50%, var(--mono-table-surface, var(--background))));\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-region=\"body\"],:where(.mono-dropdown-table-region.body)) :is([mono-table],.mono-table) tbody tr[data-row-key],\nmono-shadow-dropdown-table :is([mono-table],.mono-table) tbody tr[data-row-key] {\n  cursor: pointer;\n}\n\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='option'].active, .select:not(select) [role='option']:focus-visible — bg-muted text-foreground\n   Written the way table.css asks a row state to be written:\n   the row-colour variable AND the paint, so a pinned cell follows. */\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-region=\"body\"],:where(.mono-dropdown-table-region.body)) :is([mono-table],.mono-table) tbody tr:is([mono-dd-active],.mono-dd-row-active),\nmono-shadow-dropdown-table :is([mono-table],.mono-table) tbody tr:is([mono-dd-active],.mono-dd-row-active) {\n  --_mono-table-row-bg: var(--mono-dropdown-table-row-active-bg, var(--mono-tag-input-option-active-bg, var(--muted)));\n  background: var(--_mono-table-row-bg);\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-region=\"body\"],:where(.mono-dropdown-table-region.body)) :is([mono-table],.mono-table) tbody tr:is([mono-selected],.mono-dd-row-selected) > td,\nmono-shadow-dropdown-table :is([mono-table],.mono-table) tbody tr:is([mono-selected],.mono-dd-row-selected) > td {\n  font-weight: var(--mono-font-weight-medium);\n}\n\n/* =========================================\n   Message\n   ========================================= */\n\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p */\n:is([mono-dropdown-table],.mono-dropdown-table) > :is([mono-dd-message],.mono-dropdown-table-message) {\n  display: block;\n  margin-top: var(--_mono-dropdown-table-gap-y);\n  font-size: var(--mono-dropdown-table-message-font-size, var(--mono-tag-input-message-font-size, var(--mono-text-sm)));\n  line-height: var(--mono-dropdown-table-message-line-height, var(--mono-tag-input-message-line-height, var(--mono-leading-normal)));\n  font-weight: var(--mono-font-weight-normal);\n  text-align: start;\n  color: var(--_mono-dropdown-table-muted);\n}\n\n/* basecoat@1.0.2 styles/vega.css .field [role=\"alert\"] — text-destructive text-sm */\n:is([mono-dropdown-table],.mono-dropdown-table) > :is([mono-dd-message=\"invalid\"],:where(.mono-dropdown-table-message.invalid)) {\n  color: var(--_mono-dropdown-table-invalid);\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table) > :is([mono-dd-message=\"valid\"],:where(.mono-dropdown-table-message.valid)) {\n  color: var(--_mono-dropdown-table-valid);\n}\n\n:is([mono-dropdown-table],.mono-dropdown-table) > :is([mono-dd-message=\"warning\"],:where(.mono-dropdown-table-message.warning)) {\n  color: var(--_mono-dropdown-table-warning);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-trigger],.mono-dropdown-table-trigger),\n  :is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-clear],.mono-dropdown-table-clear),\n  :is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-arrow],.mono-dropdown-table-arrow),\n  :is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-scroll],.mono-dropdown-table-scroll),\n  :is([mono-dropdown-table],.mono-dropdown-table) [mono-dd-chip-close] {\n    transition: none;\n  }\n}\n\n/* =========================================\n   label-position — the slots form/label-position.css reads\n   (top / notched / left / right; public knobs: --mono-dropdown-table-label-width,\n   -label-side-gap, -label-notch-font-size, -label-notch-bg)\n   ========================================= */\n\n[mono-dropdown-table][mono-label-position] {\n  --_mono-lp-width: var(--mono-dropdown-table-label-width, auto);\n  --_mono-lp-gap: var(--mono-dropdown-table-label-side-gap, calc(var(--mono-spacing) * 3));\n  --_mono-lp-height: var(--_mono-dropdown-table-height);\n  --_mono-lp-box-min: var(--_mono-dropdown-table-height);\n  /* + the single-value text inset (multi chips start at the padding) */\n  --_mono-lp-padding-x: calc(var(--_mono-dropdown-table-padding-x) + var(--mono-dropdown-table-text-inset, calc(var(--mono-spacing) * 1.5)));\n  --_mono-lp-padding-y: var(--_mono-dropdown-table-padding-y);\n  --_mono-lp-font: var(--mono-dropdown-table-label-notch-font-size, var(--mono-text-xs));\n  --_mono-lp-notch-bg: var(--mono-dropdown-table-label-notch-bg, var(--background));\n  --_mono-lp-field-bg: var(--_mono-dropdown-table-bg);\n}\n";
-
 //#endregion
 //#region src/components/dropdown-table/mono-dropdown-table.ts
 let MonoDropdownTable = class MonoDropdownTable extends MonoDropdownTableCore(LitElement) {
@@ -1297,9 +1351,6 @@ let MonoDropdownTable = class MonoDropdownTable extends MonoDropdownTableCore(Li
 		this._slotBody = [];
 		this._slotFooter = [];
 	}
-	static {
-		this.styles = [unsafeCSS(dropdown_table_css_raw_default)];
-	}
 	createRenderRoot() {
 		return this;
 	}

package/dist/ui/dropdown.js

@@ -1,11 +1,11 @@
-import { l as monoHostChildNodes } from "../mono-ui-BwUc0L6B.js";
-import { t as customElement } from "../mono-element-C7vCschg.js";
+import { g as monoHostChildNodes } from "../mono-ui-kvLVIf1V.js";
+import { t as customElement } from "../mono-element-CKcT0rwv.js";
 import { a as defineHybridPropAliases, o as numberStringConverter, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
 import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
-import { i as guardHostTextContent, s as placeSlotNode } from "../light-slots-DdDdZ6zs.js";
-import { n as applyPopupPlacement, r as computePopupPlacement, t as PopupPortalController } from "../popup-portal-C8ttHDRX.js";
+import { i as guardHostTextContent, s as placeSlotNode } from "../light-slots-B5Ck0t_E.js";
+import { n as applyPopupPlacement, r as computePopupPlacement, t as PopupPortalController } from "../popup-portal-CINuVjNY.js";
 import { n as cssPart, r as defineCssClassAliases, t as applyCssClass } from "../css-class-B6Tc_MAx.js";
-import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
+import { LitElement, html, isServer, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 
 //#region src/components/dropdown/dropdown-core.ts
@@ -150,6 +150,7 @@ const MonoDropdownCore = (superClass) => {
 			this._appliedHostClasses = /* @__PURE__ */ new Set();
 			this._viewportBound = false;
 			this._viewportFrame = 0;
+			this._documentBound = false;
 			this._handleTriggerClick = (event) => {
 				if (this.disabled || this.trigger !== "click") return;
 				event.stopPropagation();
@@ -220,15 +221,13 @@ const MonoDropdownCore = (superClass) => {
 			this._resolvedSide = this._sideFromPlacement(this.placement);
 			this._updateHostClasses();
 			if (isServer) return;
-			document.addEventListener("click", this._handleDocumentClick, true);
-			document.addEventListener("keydown", this._handleDocumentKeydown);
-			if (this.modelValue) this._bindViewport();
+			if (this.modelValue) {
+				this._bindViewport();
+				this._bindDocument();
+			}
 		}
 		disconnectedCallback() {
-			if (!isServer) {
-				document.removeEventListener("click", this._handleDocumentClick, true);
-				document.removeEventListener("keydown", this._handleDocumentKeydown);
-			}
+			this._unbindDocument();
 			this._unbindViewport();
 			this._detachTriggerListeners();
 			super.disconnectedCallback();
@@ -239,9 +238,30 @@ const MonoDropdownCore = (superClass) => {
 			this._syncTriggerListeners();
 			if (this.modelValue) {
 				this._bindViewport();
-				this._popup.reposition();
+				this._bindDocument();
+				if (changed.has("modelValue")) this._popup.reposition();
 				this._positionPanel();
-			} else this._unbindViewport();
+			} else {
+				this._unbindViewport();
+				this._unbindDocument();
+			}
+		}
+		/**
+		* Outside-click / Escape listeners, bound while OPEN only (select's rule). Both handlers
+		* bail when closed, so at rest they cost only dispatch — two `document` listeners per
+		* dropdown (one capture-phase) in the path of every click and keystroke on the page.
+		*/
+		_bindDocument() {
+			if (isServer || this._documentBound) return;
+			this._documentBound = true;
+			document.addEventListener("click", this._handleDocumentClick, true);
+			document.addEventListener("keydown", this._handleDocumentKeydown);
+		}
+		_unbindDocument() {
+			if (isServer || !this._documentBound) return;
+			this._documentBound = false;
+			document.removeEventListener("click", this._handleDocumentClick, true);
+			document.removeEventListener("keydown", this._handleDocumentKeydown);
 		}
 		_toBoolean(value) {
 			if (typeof value === "boolean") return value;
@@ -490,10 +510,6 @@ const MonoDropdownCore = (superClass) => {
 	return MonoDropdownCoreClass;
 };
 
-//#endregion
-//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\dropdown\dropdown.css?raw.js
-var dropdown_css_raw_default = "/* =========================================================================\r\n   mono-dropdown — a port of Basecoat's `.popover` + `[data-popover]`\r\n   (basecoat-css@1.0.2, vega style).\r\n\r\n   Styled by ATTRIBUTE, like Basecoat — and the attributes mirror the element's\r\n   props one for one, so hand-written markup reads like the Lit / Vue tag:\r\n\r\n     <mono-dropdown size=\"lg\" color=\"success\" placement=\"bottom-start\">\r\n     <div mono-dropdown mono-size=\"lg\" mono-color=\"success\"\r\n          mono-placement=\"bottom-start\" mono-side=\"bottom\" mono-align=\"start\">\r\n       <span mono-activator><button>Click me</button></span>\r\n       <div mono-panel role=\"dialog\" aria-hidden=\"false\">\r\n         <div mono-body>Any HTML goes here.</div>\r\n       </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, no `mono-side` = bottom, no `mono-align` =\r\n   start). The element writes these on its ROOT — the host in the light build,\r\n   an inner root `<div>` in the shadow one — plus the states `mono-open`,\r\n   `mono-disabled` and `mono-fixed` (set once the element takes over positioning\r\n   and writes inline top/left). The old classes (`.mono-dropdown.md.primary.open`)\r\n   are still emitted as inert hooks until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-dropdown]                ≡ .popover (relative inline-flex) — DEVIATION:\r\n                                      inline-BLOCK, because the activator wrapper is\r\n                                      `display: contents` and must not become a flex item\r\n     [mono-activator]               ≡ EXTENSION (upstream's trigger is a sibling <button>;\r\n                                      ours wraps a slotted one and stays out of layout)\r\n     [mono-panel]                   ≡ [data-popover] (absolute z-50 min-w-full w-max\r\n                                      overflow-x-hidden overflow-y-auto visible opacity-100\r\n                                      scale-100 transition-all outline-hidden, and\r\n                                      bg-popover text-popover-foreground ring-1\r\n                                      ring-foreground/10 flex flex-col gap-4 rounded-md\r\n                                      p-4 text-sm shadow-md duration-100)\r\n     [mono-panel][aria-hidden=true] ≡ [data-popover][aria-hidden='true'] (invisible\r\n                                      opacity-0 scale-95 + a 2-unit translate away from\r\n                                      the side it opens from)\r\n     [mono-side=\"…\"]                ≡ [data-popover][data-side='…'] (mt-1 top-full,\r\n                                      mb-1 bottom-full, me-1 end-full, ms-1 start-full)\r\n                                      — DEVIATION: the 1-unit margin is\r\n                                      `--mono-dropdown-offset`, a prop (`offset`)\r\n     [mono-align=\"…\"]               ≡ [data-popover][data-align='…'] (start-0 / end-0 /\r\n                                      start-1/2 -translate-x-1/2, and the top/bottom pair\r\n                                      for the two side placements)\r\n     [mono-body]                    ≡ EXTENSION (the panel's width floor, see below)\r\n     [mono-size=\"…\"]                ≡ EXTENSION (upstream ships one popover size)\r\n     [mono-color=\"…\"]               ≡ EXTENSION (the role tints the ring)\r\n     [mono-disabled]                ≡ .btn disabled:opacity-50 — DEVIATION: 0.55, the\r\n                                      pre-port value, because the activator is a\r\n                                      consumer's own control and dimming it twice reads\r\n                                      as broken\r\n\r\n   THE PANEL IS PORTALED. While open, the light build moves [mono-panel] into a\r\n   body portal; `composables/popup-portal` mirrors the root's class AND its\r\n   `mono-*` attributes onto that portal, so `[mono-dropdown] > [mono-panel]`\r\n   keeps matching there. Every panel rule is written as a CHILD of the root for\r\n   exactly that reason — and because `>` also stops these rules reaching a\r\n   `[mono-body]` that belongs to a card slotted inside the panel.\r\n\r\n   `[mono-dropdown]` IS ALSO A PART NAME: select, tag-input, date and\r\n   dropdown-table all call their popup panel `[mono-dropdown]`, scoped\r\n   `[mono-<field>] > [mono-dropdown]` = (0,2,0). This root rule is (0,1,0), so it\r\n   loses everywhere they set a property — and it deliberately sets NO paint (no\r\n   colour, no background), only layout and custom properties, so nothing it does\r\n   set can reach a field's panel visibly. Same contract as chip's root.\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING rule\r\n   is exactly one attribute strong — `:where([mono-dropdown]) > [mono-panel]` =\r\n   (0,1,0) — so a utility class handed in through `cssClass` wins by source\r\n   order, while the prop and state rules stay heavier.\r\n\r\n   FLAVORS set `--mono-dropdown-{radius,ring-color,ring-width,shadow,gap,\r\n   padding-<size>,font-<size>,min-width-<size>,max-width-<size>,offset-<size>}`;\r\n   every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"popover\"`).\r\n   ========================================================================= */\r\n\r\nmono-dropdown {\r\n  display: inline-block;\r\n}\r\n\r\n/* =========================================\r\n   Root — layout and the palette. NOTHING here paints (see the header).\r\n   ========================================= */\r\n\r\n[mono-dropdown] {\r\n  /* ── the six roles, each a public knob over a Basecoat token ───────────── */\r\n  --_mono-dropdown-primary: var(--mono-dropdown-primary, var(--primary));\r\n  --_mono-dropdown-secondary: var(--mono-dropdown-secondary, var(--secondary-foreground));\r\n  --_mono-dropdown-success: var(--mono-dropdown-success, var(--success));\r\n  --_mono-dropdown-danger: var(--mono-dropdown-danger, var(--destructive));\r\n  --_mono-dropdown-warning: var(--mono-dropdown-warning, var(--warning));\r\n  --_mono-dropdown-info: var(--mono-dropdown-info, var(--info));\r\n  --_mono-dropdown-teal: var(--mono-dropdown-teal, var(--teal));\r\n  --_mono-dropdown-purple: var(--mono-dropdown-purple, var(--purple));\r\n  --_mono-dropdown-neutral: var(--mono-dropdown-neutral, var(--neutral));\r\n  --_mono-dropdown-dark: var(--mono-dropdown-dark, var(--dark));\r\n  /* the colour in play — `primary` unless a [mono-color] rule re-points it */\r\n  --_mono-dropdown-accent: var(--mono-dropdown-accent, var(--_mono-dropdown-accent-preset, var(--_mono-dropdown-primary)));\r\n\r\n  --_mono-dropdown-bg: var(--mono-dropdown-bg, var(--mono-dropdown-surface, var(--popover)));\r\n  --_mono-dropdown-text: var(--mono-dropdown-text, var(--popover-foreground));\r\n  /* `ring-1 ring-foreground/10`, with the role mixed in so `color` is visible on\r\n     an otherwise neutral surface (EXTENSION — upstream's popover has no colour) */\r\n  --_mono-dropdown-ring-width: var(--mono-dropdown-ring-width, var(--mono-border-width));\r\n  /* the neutral half of the ring is its own knob: a flavor that wants\r\n     `ring-foreground/5` sets THAT, and the role stays mixed in on top */\r\n  --_mono-dropdown-ring-base: var(--mono-dropdown-ring-base, color-mix(in oklab, var(--foreground) 10%, transparent));\r\n  --_mono-dropdown-ring-color: var(--mono-dropdown-ring-color, var(--mono-dropdown-border,\r\n    color-mix(in oklab, var(--_mono-dropdown-accent) 18%, var(--_mono-dropdown-ring-base))));\r\n  --_mono-dropdown-shadow: var(--mono-dropdown-shadow, var(--mono-shadow-md));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css [data-popover] — gap-4 rounded-md p-4 text-sm */\r\n  --_mono-dropdown-radius: var(--mono-dropdown-radius, var(--_mono-dropdown-radius-preset, var(--mono-dropdown-radius-md, var(--mono-radius-md))));\r\n  --_mono-dropdown-pad-x: var(--mono-dropdown-pad-x, var(--_mono-dropdown-pad-x-preset, var(--mono-dropdown-pad-x-md, calc(var(--mono-spacing) * 4))));\r\n  --_mono-dropdown-pad-y: var(--mono-dropdown-pad-y, var(--_mono-dropdown-pad-y-preset, var(--mono-dropdown-pad-y-md, calc(var(--mono-spacing) * 4))));\r\n  --_mono-dropdown-gap: var(--mono-dropdown-gap, var(--_mono-dropdown-gap-preset, var(--mono-dropdown-gap-md, calc(var(--mono-spacing) * 4))));\r\n  --_mono-dropdown-font: var(--mono-dropdown-font, var(--_mono-dropdown-font-preset, var(--mono-dropdown-font-md, var(--mono-text-sm))));\r\n  --_mono-dropdown-line-height: var(--mono-dropdown-line-height, var(--_mono-dropdown-line-height-preset, var(--mono-text-sm--lh)));\r\n  --_mono-dropdown-min-width: var(--mono-dropdown-min-width, var(--_mono-dropdown-min-width-preset, var(--mono-dropdown-min-width-md, 200px)));\r\n  --_mono-dropdown-max-width: var(--mono-dropdown-max-width, var(--_mono-dropdown-max-width-preset, var(--mono-dropdown-max-width-md, 280px)));\r\n  /* `mt-1` and friends — a prop here (`offset`), so it is one knob per size */\r\n  --_mono-dropdown-offset: var(--mono-dropdown-offset, var(--_mono-dropdown-offset-preset, var(--mono-dropdown-offset-md, var(--mono-spacing))));\r\n\r\n  /* basecoat@1.0.2 components/popover.css .popover — relative inline-flex */\r\n  position: relative;\r\n  display: inline-block;\r\n  box-sizing: border-box;\r\n  font-family: inherit;\r\n}\r\n\r\n[mono-dropdown] *,\r\n[mono-dropdown] *::before,\r\n[mono-dropdown] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: Basecoat ships ONE popover; md is its `[data-popover]`\r\n   ========================================= */\r\n\r\n[mono-dropdown][mono-size=\"xs\"] {\r\n  --_mono-dropdown-radius-preset: var(--mono-dropdown-radius-xs, var(--mono-radius-sm));\r\n  --_mono-dropdown-pad-x-preset: var(--mono-dropdown-pad-x-xs, calc(var(--mono-spacing) * 2));\r\n  --_mono-dropdown-pad-y-preset: var(--mono-dropdown-pad-y-xs, calc(var(--mono-spacing) * 2));\r\n  --_mono-dropdown-gap-preset: var(--mono-dropdown-gap-xs, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-dropdown-font-preset: var(--mono-dropdown-font-xs, var(--mono-text-xs));\r\n  --_mono-dropdown-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-dropdown-min-width-preset: var(--mono-dropdown-min-width-xs, 150px);\r\n  --_mono-dropdown-max-width-preset: var(--mono-dropdown-max-width-xs, 220px);\r\n  --_mono-dropdown-offset-preset: var(--mono-dropdown-offset-xs, calc(var(--mono-spacing) * 0.75));\r\n}\r\n\r\n[mono-dropdown][mono-size=\"sm\"] {\r\n  --_mono-dropdown-radius-preset: var(--mono-dropdown-radius-sm, var(--mono-radius-md));\r\n  --_mono-dropdown-pad-x-preset: var(--mono-dropdown-pad-x-sm, calc(var(--mono-spacing) * 3));\r\n  --_mono-dropdown-pad-y-preset: var(--mono-dropdown-pad-y-sm, calc(var(--mono-spacing) * 3));\r\n  --_mono-dropdown-gap-preset: var(--mono-dropdown-gap-sm, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-dropdown-font-preset: var(--mono-dropdown-font-sm, var(--mono-text-xs));\r\n  --_mono-dropdown-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-dropdown-min-width-preset: var(--mono-dropdown-min-width-sm, 170px);\r\n  --_mono-dropdown-max-width-preset: var(--mono-dropdown-max-width-sm, 240px);\r\n  --_mono-dropdown-offset-preset: var(--mono-dropdown-offset-sm, var(--mono-spacing));\r\n}\r\n\r\n[mono-dropdown][mono-size=\"lg\"] {\r\n  --_mono-dropdown-radius-preset: var(--mono-dropdown-radius-lg, var(--mono-radius-lg));\r\n  --_mono-dropdown-pad-x-preset: var(--mono-dropdown-pad-x-lg, calc(var(--mono-spacing) * 5));\r\n  --_mono-dropdown-pad-y-preset: var(--mono-dropdown-pad-y-lg, calc(var(--mono-spacing) * 5));\r\n  --_mono-dropdown-gap-preset: var(--mono-dropdown-gap-lg, calc(var(--mono-spacing) * 5));\r\n  --_mono-dropdown-font-preset: var(--mono-dropdown-font-lg, var(--mono-text-sm));\r\n  --_mono-dropdown-line-height-preset: var(--mono-text-sm--lh);\r\n  --_mono-dropdown-min-width-preset: var(--mono-dropdown-min-width-lg, 240px);\r\n  --_mono-dropdown-max-width-preset: var(--mono-dropdown-max-width-lg, 340px);\r\n  --_mono-dropdown-offset-preset: var(--mono-dropdown-offset-lg, calc(var(--mono-spacing) * 1.5));\r\n}\r\n\r\n[mono-dropdown][mono-size=\"xl\"] {\r\n  --_mono-dropdown-radius-preset: var(--mono-dropdown-radius-xl, var(--mono-radius-xl));\r\n  --_mono-dropdown-pad-x-preset: var(--mono-dropdown-pad-x-xl, calc(var(--mono-spacing) * 6));\r\n  --_mono-dropdown-pad-y-preset: var(--mono-dropdown-pad-y-xl, calc(var(--mono-spacing) * 6));\r\n  --_mono-dropdown-gap-preset: var(--mono-dropdown-gap-xl, calc(var(--mono-spacing) * 5));\r\n  --_mono-dropdown-font-preset: var(--mono-dropdown-font-xl, var(--mono-text-base));\r\n  --_mono-dropdown-line-height-preset: var(--mono-text-base--lh);\r\n  --_mono-dropdown-min-width-preset: var(--mono-dropdown-min-width-xl, 280px);\r\n  --_mono-dropdown-max-width-preset: var(--mono-dropdown-max-width-xl, 420px);\r\n  --_mono-dropdown-offset-preset: var(--mono-dropdown-offset-xl, calc(var(--mono-spacing) * 2));\r\n}\r\n\r\n[mono-dropdown][mono-size=\"xxl\"] {\r\n  --_mono-dropdown-radius-preset: var(--mono-dropdown-radius-xxl, var(--mono-radius-xl));\r\n  --_mono-dropdown-pad-x-preset: var(--mono-dropdown-pad-x-xxl, calc(var(--mono-spacing) * 7));\r\n  --_mono-dropdown-pad-y-preset: var(--mono-dropdown-pad-y-xxl, calc(var(--mono-spacing) * 7));\r\n  --_mono-dropdown-gap-preset: var(--mono-dropdown-gap-xxl, calc(var(--mono-spacing) * 6));\r\n  --_mono-dropdown-font-preset: var(--mono-dropdown-font-xxl, var(--mono-text-lg));\r\n  --_mono-dropdown-line-height-preset: var(--mono-text-lg--lh);\r\n  --_mono-dropdown-min-width-preset: var(--mono-dropdown-min-width-xxl, 320px);\r\n  --_mono-dropdown-max-width-preset: var(--mono-dropdown-max-width-xxl, 480px);\r\n  --_mono-dropdown-offset-preset: var(--mono-dropdown-offset-xxl, calc(var(--mono-spacing) * 2.5));\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the role tints the panel's ring\r\n   ========================================= */\r\n\r\n[mono-dropdown][mono-color=\"primary\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-primary); }\r\n[mono-dropdown][mono-color=\"secondary\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-secondary); }\r\n[mono-dropdown][mono-color=\"success\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-success); }\r\n[mono-dropdown][mono-color=\"danger\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-danger); }\r\n[mono-dropdown][mono-color=\"warning\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-warning); }\r\n[mono-dropdown][mono-color=\"info\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-info); }\r\n[mono-dropdown][mono-color=\"teal\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-teal); }\r\n[mono-dropdown][mono-color=\"purple\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-purple); }\r\n[mono-dropdown][mono-color=\"neutral\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-neutral); }\r\n[mono-dropdown][mono-color=\"dark\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-dark); }\r\n\r\n/* =========================================\r\n   Activator — EXTENSION: a wrapper that stays out of layout\r\n   ========================================= */\r\n\r\n:where([mono-dropdown]) > [mono-activator] {\r\n  display: contents;\r\n}\r\n\r\n/* The activator is the consumer's own control, so it is dimmed once and gently:\r\n   0.55 is the pre-port value, kept so a disabled dropdown reads the same. */\r\n[mono-dropdown][mono-disabled] > [mono-activator] {\r\n  opacity: 0.55;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* =========================================\r\n   Panel — `[data-popover]`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] — absolute z-50 min-w-full\r\n   w-max overflow-x-hidden overflow-y-auto visible opacity-100 scale-100\r\n   transition-all outline-hidden\r\n   — DEVIATIONS: `min-w-full` is the BODY's floor here (see [mono-body]) so a\r\n   body that cannot shrink sizes the panel instead of spilling out of it, and the\r\n   z-index is the shared popup stack's `--mono-popup-z` rather than a flat z-50. */\r\n:where([mono-dropdown]) > [mono-panel] {\r\n  position: absolute;\r\n  z-index: var(--mono-popup-z, 200);\r\n  width: max-content;\r\n  min-width: min-content;\r\n  max-width: var(--_mono-dropdown-max-width);\r\n  max-height: var(--mono-popup-avail-h, none);\r\n  overflow-x: hidden;\r\n  overflow-y: auto;\r\n  visibility: visible;\r\n  opacity: 1;\r\n  scale: 1;\r\n  outline: none;\r\n  transition:\r\n    opacity var(--mono-duration) var(--mono-ease),\r\n    scale var(--mono-duration) var(--mono-ease),\r\n    translate var(--mono-duration) var(--mono-ease),\r\n    visibility var(--mono-duration) var(--mono-ease);\r\n\r\n  /* basecoat@1.0.2 styles/vega.css [data-popover] — bg-popover\r\n     text-popover-foreground ring-foreground/10 flex flex-col gap-4 rounded-md p-4\r\n     text-sm shadow-md ring-1 duration-100 */\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-dropdown-gap);\r\n  padding: var(--_mono-dropdown-pad-y) var(--_mono-dropdown-pad-x);\r\n  border-radius: var(--_mono-dropdown-radius);\r\n  background: var(--_mono-dropdown-bg);\r\n  color: var(--_mono-dropdown-text);\r\n  font-size: var(--_mono-dropdown-font);\r\n  line-height: var(--_mono-dropdown-line-height);\r\n  box-shadow:\r\n    0 0 0 var(--_mono-dropdown-ring-width) var(--_mono-dropdown-ring-color),\r\n    var(--_mono-dropdown-shadow);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[aria-hidden='true']\r\n   — invisible opacity-0 scale-95, and a 2-unit translate away from the side it\r\n   opens from. The element writes `aria-hidden` on the panel already, so the\r\n   closed state needs no class of its own. */\r\n[mono-dropdown] > [mono-panel][aria-hidden=\"true\"] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  scale: 0.95;\r\n  pointer-events: none;\r\n}\r\n\r\n[mono-dropdown][mono-side=\"top\"] > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: 0 calc(var(--mono-spacing) * 2);\r\n}\r\n\r\n[mono-dropdown]:not([mono-side]) > [mono-panel][aria-hidden=\"true\"],\r\n[mono-dropdown][mono-side=\"bottom\"] > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: 0 calc(var(--mono-spacing) * -2);\r\n}\r\n\r\n[mono-dropdown][mono-side=\"left\"] > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: calc(var(--mono-spacing) * 2) 0;\r\n}\r\n\r\n[mono-dropdown][mono-side=\"right\"] > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: calc(var(--mono-spacing) * -2) 0;\r\n}\r\n\r\n/* Once the element takes over, it positions the panel in the viewport and writes\r\n   inline top/left — so the static placement rules below must not fight it. */\r\n[mono-dropdown][mono-fixed] > [mono-panel] {\r\n  position: fixed;\r\n}\r\n\r\n/* =========================================\r\n   Static placement — `[data-side]` / `[data-align]`, verbatim\r\n   -----------------------------------------------------------------------------\r\n   These are what hand-written markup (and SSR, before the element hydrates)\r\n   positions with. The element overrides them with inline top/left once it has\r\n   measured, which is why every rule here uses only the four edges.\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &:not([data-side]), &[data-side='bottom']\r\n   — mt-1 top-full */\r\n[mono-dropdown]:not([mono-side]):not([mono-fixed]) > [mono-panel],\r\n[mono-dropdown][mono-side=\"bottom\"]:not([mono-fixed]) > [mono-panel] {\r\n  top: 100%;\r\n  margin-top: var(--_mono-dropdown-offset);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[data-side='top'] — mb-1 bottom-full */\r\n[mono-dropdown][mono-side=\"top\"]:not([mono-fixed]) > [mono-panel] {\r\n  bottom: 100%;\r\n  margin-bottom: var(--_mono-dropdown-offset);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[data-side='left'] — me-1 end-full */\r\n[mono-dropdown][mono-side=\"left\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-end: 100%;\r\n  margin-inline-end: var(--_mono-dropdown-offset);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[data-side='right'] — ms-1 start-full */\r\n[mono-dropdown][mono-side=\"right\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-start: 100%;\r\n  margin-inline-start: var(--_mono-dropdown-offset);\r\n}\r\n\r\n/* The top/bottom pair aligns on the inline axis: start-0 / end-0 / start-1/2 -translate-x-1/2 */\r\n[mono-dropdown]:is(:not([mono-side]), [mono-side=\"top\"], [mono-side=\"bottom\"]):is(:not([mono-align]), [mono-align=\"start\"]):not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-start: 0;\r\n}\r\n\r\n[mono-dropdown]:is(:not([mono-side]), [mono-side=\"top\"], [mono-side=\"bottom\"])[mono-align=\"end\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-end: 0;\r\n}\r\n\r\n[mono-dropdown]:is(:not([mono-side]), [mono-side=\"top\"], [mono-side=\"bottom\"])[mono-align=\"center\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-start: 50%;\r\n  translate: -50% 0;\r\n}\r\n\r\n/* …and the left/right pair on the block axis: top-0 / bottom-0 / top-1/2 -translate-y-1/2 */\r\n[mono-dropdown]:is([mono-side=\"left\"], [mono-side=\"right\"]):is(:not([mono-align]), [mono-align=\"start\"]):not([mono-fixed]) > [mono-panel] {\r\n  top: 0;\r\n}\r\n\r\n[mono-dropdown]:is([mono-side=\"left\"], [mono-side=\"right\"])[mono-align=\"end\"]:not([mono-fixed]) > [mono-panel] {\r\n  bottom: 0;\r\n}\r\n\r\n[mono-dropdown]:is([mono-side=\"left\"], [mono-side=\"right\"])[mono-align=\"center\"]:not([mono-fixed]) > [mono-panel] {\r\n  top: 50%;\r\n  translate: 0 -50%;\r\n}\r\n\r\n/* A centred panel keeps its centring translate while closed, and adds the\r\n   directional one — `translate` is a single property, so both go in one value. */\r\n[mono-dropdown]:is(:not([mono-side]), [mono-side=\"bottom\"])[mono-align=\"center\"]:not([mono-fixed]) > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: -50% calc(var(--mono-spacing) * -2);\r\n}\r\n\r\n[mono-dropdown][mono-side=\"top\"][mono-align=\"center\"]:not([mono-fixed]) > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: -50% calc(var(--mono-spacing) * 2);\r\n}\r\n\r\n[mono-dropdown][mono-side=\"left\"][mono-align=\"center\"]:not([mono-fixed]) > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: calc(var(--mono-spacing) * 2) -50%;\r\n}\r\n\r\n[mono-dropdown][mono-side=\"right\"][mono-align=\"center\"]:not([mono-fixed]) > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: calc(var(--mono-spacing) * -2) -50%;\r\n}\r\n\r\n/* =========================================\r\n   Body — EXTENSION: the panel's width floor\r\n   ========================================= */\r\n\r\n/* The floor lives HERE, not on the panel, so it reaches the panel as a\r\n   min-content contribution rather than as a competing `min-width` — which is\r\n   what lets slotted content that cannot shrink (a body with its own width) size\r\n   the panel instead of spilling out of it. Only the padding is subtracted\r\n   so the panel's border box lands on exactly --_mono-dropdown-min-width.\r\n   Only the padding is subtracted: the edge is Basecoat's `ring-1`, a\r\n   box-shadow, which takes no layout space (subtracting it left every panel 2px\r\n   under its preset). */\r\n:where([mono-dropdown]) > [mono-panel] > [mono-body] {\r\n  min-width: calc(var(--_mono-dropdown-min-width) - 2 * var(--_mono-dropdown-pad-x));\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-dropdown]) > [mono-panel] {\r\n    transition: none;\r\n  }\r\n}\r\n";
-
 //#endregion
 //#region src/components/dropdown/mono-dropdown.ts
 let MonoDropdown = class MonoDropdown extends MonoDropdownCore(LitElement) {
@@ -504,9 +520,6 @@ let MonoDropdown = class MonoDropdown extends MonoDropdownCore(LitElement) {
 		this._slotMain = [];
 		this._slotBody = [];
 	}
-	static {
-		this.styles = [unsafeCSS(dropdown_css_raw_default)];
-	}
 	createRenderRoot() {
 		return this;
 	}