@mono-lit/helper 0.0.2 → 0.0.4

package/dist/ui/dropdown-table.js

@@ -1,22 +1,23 @@
-import { f as monoPendingGrace, l as monoHostChildNodes } from "../mono-ui-CPV7rrdo.js";
-import { n as detachEventHandlers, t as applyProps } from "../element-props-CLB6yvbm.js";
-import { t as monoDataDropdown } from "../mono-data-dropdown-Wnoke6zO.js";
-import { t as customElement } from "../mono-element-B0kP_96P.js";
-import { a as defineHybridPropAliases, i as defineHybridPropAlias, o as numberStringConverter, r as booleanStringConverter, s as optionalNumberConverter, t as __decorate } from "../decorate-DEXtNagw.js";
-import { t as dispatchMonoEvent } from "../mono-event-Bi1qP9uN.js";
-import { i as guardHostTextContent, s as placeSlotNode } from "../light-slots-DW1WgfgT.js";
-import { n as toCssSize, t as buildSizeStyle } from "../css-size-DhHSVZJK.js";
-import { n as applyPopupPlacement, r as computePopupPlacement, t as PopupPortalController } from "../popup-portal-BziRX1yG.js";
-import { n as chevronIcon, r as closeIcon, t as caretIcon } from "../field-icons-DELrSdqJ.js";
-import { t as MonoFormControlCore } from "../form-control-core-eeRr0zLU.js";
-import { n as visibleChipCap, r as ChipStripController, t as resolveChipLimit } from "../chip-limits-BMoO31JM.js";
+import { f as monoPendingGrace, l as monoHostChildNodes } from "../mono-ui-BwUc0L6B.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 { 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-HWhkd7oy.js";
+import { n as chevronIcon, r as closeIcon, t as caretIcon } from "../field-icons-FmyBWa0g.js";
+import { t as MonoFormControlCore } from "../form-control-core-CRZPZ1ru.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 { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
+
 //#region src/components/dropdown-table/dropdown-table-core.ts
 /** Sentinel so an initial `model-value === our last emit` guard never matches by accident. */
-var SYMBOL_INIT = Symbol("init");
+const SYMBOL_INIT = Symbol("init");
 /**
 * `MonoDropdownTableCore` — the field + popup shell for `<mono-dropdown-table>`. The
 * FIELD mirrors `<mono-select>` (same size/color/variant/validation/label props and
@@ -27,7 +28,7 @@ var SYMBOL_INIT = Symbol("init");
 * object (`matchWidth` is intentionally off). Reuses `PopupPortalController`,
 * `buildSizeStyle`, and the global `.mono-chip` classes.
 */
-var MonoDropdownTableCore = (superClass) => {
+const MonoDropdownTableCore = (superClass) => {
 	class MonoDropdownTableCoreClass extends MonoFormControlCore(superClass) {
 		static {
 			this.monoPendingAuto = "data";
@@ -587,14 +588,15 @@ var MonoDropdownTableCore = (superClass) => {
 			const anchor = root.querySelector(".mono-dropdown-table-more-chip");
 			if (!panel || !anchor) return;
 			const o = this._morePlacementOpts();
-			applyPopupPlacement(panel, computePopupPlacement(anchor, panel, {
+			const placement = computePopupPlacement(anchor, panel, {
 				side: o.side(),
 				align: o.align(),
 				offset: o.offset(),
 				flip: o.flip(),
 				shift: o.shift(),
 				constrain: true
-			}), true);
+			});
+			applyPopupPlacement(panel, placement, true);
 		}
 		updated(changed) {
 			super.updated(changed);
@@ -607,15 +609,18 @@ var MonoDropdownTableCore = (superClass) => {
 				this._panelObserver?.disconnect();
 				this._panelObserver = void 0;
 			}
-			if (this._moreOpen) if (!this._overflowItems(this._dd?.selectedItems() ?? []).length) {
-				this._moreOpen = false;
-				this.requestUpdate();
-			} else this._positionMorePanel();
+			if (this._moreOpen) {
+				if (!this._overflowItems(this._dd?.selectedItems() ?? []).length) {
+					this._moreOpen = false;
+					this.requestUpdate();
+				} else this._positionMorePanel();
+			}
 			const selectedCount = this._dd?.selectedItems?.()?.length ?? 0;
 			const capChanged = changed.has("maxVisible") || changed.has("minVisible") || changed.has("chip");
-			if (selectedCount !== this._lastSelectedCount) if (this._isOpen && selectedCount > this._lastSelectedCount && this._inlineChips) this._chipStrip.scrollToEnd();
-			else this._chipStrip.invalidate();
-			else if (capChanged) this._chipStrip.invalidate();
+			if (selectedCount !== this._lastSelectedCount) {
+				if (this._isOpen && selectedCount > this._lastSelectedCount && this._inlineChips) this._chipStrip.scrollToEnd();
+				else this._chipStrip.invalidate();
+			} else if (capChanged) this._chipStrip.invalidate();
 			this._lastSelectedCount = selectedCount;
 			if (this._isOpen !== this._wasOpen) {
 				this._wasOpen = this._isOpen;
@@ -969,7 +974,8 @@ var MonoDropdownTableCore = (superClass) => {
 		* conditional render (Lit's ChildPart no longer contains it).
 		*/
 		_renderMore(items) {
-			return html`<div class="mono-dropdown-table-more" mono-dd-more>${(this._moreOpen ? this._overflowItems(items) : []).map((it) => this._renderChip(it))}</div>`;
+			const overflow = this._moreOpen ? this._overflowItems(items) : [];
+			return html`<div class="mono-dropdown-table-more" mono-dd-more>${overflow.map((it) => this._renderChip(it))}</div>`;
 		}
 		_renderLabel() {
 			if (!this.label) return nothing;
@@ -1221,12 +1227,14 @@ var MonoDropdownTableCore = (superClass) => {
 	__decorate([property({ attribute: false })], MonoDropdownTableCoreClass.prototype, "cssClassName", void 0);
 	return MonoDropdownTableCoreClass;
 };
+
 //#endregion
-//#region src/components/dropdown-table/dropdown-table.css?raw
-var dropdown_table_default = "/* LEGACY CLASS ALIASES — every `[mono-x]` below is wrapped as `:is([mono-x], .legacy)`\r\n   by `scripts/legacy-class-alias.mjs` (`.mono-dropdown-table-region.body`,\r\n   `tr.mono-dd-row-selected`, …), so host CSS and hand-written markup on the pre-port\r\n   class contract keep painting. Author with the attribute only; re-run the script. */\r\n/* =========================================================================\r\n   mono-dropdown-table — a dropdown whose panel is a native `<table>` for\r\n   picking row(s). An EXTENSION: Basecoat has no table picker, so the FIELD is\r\n   the multi-select combobox's chip box (`.combobox-chips` + `.combobox-chip`,\r\n   basecoat-css@1.0.2, vega style) on the `.field` / `.label` chrome, and the\r\n   PANEL is the combobox's `[data-popover]` holding a ported `<table mono-table>`\r\n   instead of a listbox — so the rows are the table's own rows.\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-table size=\"sm\" color=\"danger\" label=\"Owner\" clearable multiple>\r\n     <div mono-dropdown-table mono-size=\"sm\" mono-color=\"danger\" mono-clearable mono-multiple>\r\n       <label mono-dd-label>Owner</label>\r\n       <div mono-dd-control>\r\n         <div mono-dd-trigger role=\"combobox\">\r\n           <span mono-dd-value>\r\n             <div mono-dd-chip mono-dd-removable><span mono-dd-chip-main><span mono-dd-chip-content>\r\n               <span mono-dd-chip-label>Ada</span><button mono-dd-chip-close>…</button></span></span></div>\r\n           </span>\r\n           <span mono-dd-actions><span mono-dd-arrow>…</span></span>\r\n         </div>\r\n       </div>\r\n       <div mono-dd-panel><div mono-dd-region=\"body\"><table mono-table>…</table></div></div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary, `:not([mono-variant])` = outlined). The element\r\n   renders these attributes on its wrapper (both builds) plus the STATES\r\n   `mono-open` / `mono-more-open` / `mono-has-value` / `mono-side`; the old\r\n   classes (`.mono-dropdown-table.sm.open`) are still emitted as inert hooks until\r\n   2.0 but no rule here reads them. The chips are NOT `.mono-chip`s any more: they\r\n   are Basecoat combobox chips painted here, and chip.css never sees them.\r\n\r\n   THE PARTS ARE FAMILY-UNIQUE (`mono-dd-*`), never the bare `mono-chip` /\r\n   `mono-panel` / `mono-actions` the field components use: the panel holds a whole\r\n   `<table mono-table>` whose cells may carry a consumer's `<mono-chip>`, and a\r\n   `[mono-dropdown-table] [mono-chip]` rule would repaint it.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-dropdown-table]                          ≡ .field (gap-3, as margins) + .combobox (position: relative)\r\n     [mono-dropdown-table] > [mono-dd-label]        ≡ .field > label / .label\r\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)\r\n     [mono-dd-value]                                ≡ the chip row; EXTENSION: the single value / placeholder text\r\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)\r\n     [mono-dd-chip] [mono-dd-chip-close]            ≡ .combobox-chip-remove (-ms-1 opacity-50 hover:100, svg size-3.5)\r\n     [mono-dd-chip][mono-dd-more]                   ≡ EXTENSION (the \"+N more\" counter chip, same box)\r\n     [mono-dd-actions] > [mono-dd-arrow] > svg      ≡ .combobox-trigger-icon (size-4 text-muted-foreground)\r\n     [mono-dd-actions] > [mono-dd-clear]            ≡ .combobox [data-clear] (size-6, painted as .btn[data-variant='ghost'])\r\n     [mono-dd-actions] > [mono-dd-scroll]           ≡ EXTENSION (the inline strip's ‹ › pager, same box)\r\n     [mono-dd-panel]                                ≡ .combobox [data-popover] (bg-popover ring-1 rounded-md shadow-md); EXTENSION: a flex column of regions\r\n     [mono-dd-region=\"search|body|foot\"]            ≡ EXTENSION (search box / the scrolling table / the pager)\r\n     [mono-dd-more]                                 ≡ [data-popover] holding the overflow chips\r\n     [mono-table] tbody tr[mono-selected]           ≡ .table tr data-[state=selected] — the TABLE's own rule paints it\r\n     [mono-table] tbody tr[mono-dd-active]          ≡ .combobox [role='option'].active (bg-muted) — the keyboard cursor\r\n     [mono-dd-message=\"…\"]                          ≡ .field > p / .field [role='alert']\r\n     [mono-validation-state=\"invalid\"]              ≡ .combobox-chips:has([aria-invalid=true]) + .field[data-invalid]\r\n     [mono-validation-state=\"valid|warning\"]        ≡ EXTENSION (the invalid pattern in --success / --warning)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                  ≡ EXTENSION (the --mono-control-height-* ladder)\r\n     [mono-variant=\"filled\"]                        ≡ EXTENSION (luma's .combobox-chips)\r\n     [mono-variant=\"underlined\"]                    ≡ EXTENSION (sera's .combobox-chips: bottom edge only, no ring)\r\n\r\n   FLAVORS: the field IS the tag-input's chip box and the panel IS its popover, so\r\n   every metric here resolves `--mono-dropdown-table-<k>` → `--mono-tag-input-<k>`\r\n   → the base, through the SAME per-size chains tag-input.css uses — a flavour\r\n   that retunes the tag-input retunes this field for free, and no flavour file\r\n   carries a dropdown-table entry. Every fallback is vega's value.\r\n\r\n   THE PANELS ARE PORTALED (light build): [mono-dd-panel] and [mono-dd-more]\r\n   move into a `<div data-mono-popup-portal>` under <body> while open, and the\r\n   portal mirrors the wrapper's class AND mono-* attributes, so every rule here\r\n   is scoped under `[mono-dropdown-table]` and never relies on the panel being\r\n   inside the field. The shadow build keeps its panel in the shadow root and\r\n   SLOTS the consumer's light-DOM `<table>` into it — the row rules therefore\r\n   come in two forms: the portaled table, and the slotted one under the host.\r\n   ========================================================================= */\r\n\r\nmono-dropdown-table {\r\n  display: block;\r\n  width: 100%;\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) {\r\n  /* ── palette: each slot is a public knob over the tag-input's, over a Basecoat token ── */\r\n  --_mono-dropdown-table-text: var(--mono-dropdown-table-text, var(--mono-tag-input-text, var(--foreground)));\r\n  --_mono-dropdown-table-placeholder: var(--mono-dropdown-table-placeholder, var(--mono-tag-input-placeholder, var(--muted-foreground)));\r\n  --_mono-dropdown-table-muted: var(--mono-dropdown-table-muted, var(--mono-tag-input-muted, var(--muted-foreground)));\r\n  --_mono-dropdown-table-primary: var(--mono-dropdown-table-primary, var(--mono-tag-input-primary, var(--ring)));\r\n  --_mono-dropdown-table-secondary: var(--mono-dropdown-table-secondary, var(--mono-tag-input-secondary, var(--muted-foreground)));\r\n  --_mono-dropdown-table-success: var(--mono-dropdown-table-success, var(--mono-tag-input-success, var(--success)));\r\n  --_mono-dropdown-table-danger: var(--mono-dropdown-table-danger, var(--mono-tag-input-danger, var(--destructive)));\r\n  --_mono-dropdown-table-warning: var(--mono-dropdown-table-warning, var(--mono-tag-input-warning, var(--warning)));\r\n  --_mono-dropdown-table-info: var(--mono-dropdown-table-info, var(--mono-tag-input-info, var(--info)));\r\n  --_mono-dropdown-table-teal: var(--mono-dropdown-table-teal, var(--mono-tag-input-teal, var(--teal)));\r\n  --_mono-dropdown-table-purple: var(--mono-dropdown-table-purple, var(--mono-tag-input-purple, var(--purple)));\r\n  --_mono-dropdown-table-neutral: var(--mono-dropdown-table-neutral, var(--mono-tag-input-neutral, var(--neutral)));\r\n  --_mono-dropdown-table-dark: var(--mono-dropdown-table-dark, var(--mono-tag-input-dark, var(--dark)));\r\n  --_mono-dropdown-table-valid: var(--mono-dropdown-table-valid, var(--mono-tag-input-valid, var(--success)));\r\n  --_mono-dropdown-table-invalid: var(--mono-dropdown-table-invalid, var(--mono-tag-input-invalid, var(--destructive)));\r\n\r\n  /* ── the painted result — three tiers, base = .combobox-chips (vega) ──── */\r\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))));\r\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))));\r\n  --_mono-dropdown-table-ring-alpha: var(--mono-dropdown-table-ring-alpha, var(--mono-tag-input-ring-alpha, var(--mono-ring-alpha)));\r\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))))))));\r\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))))));\r\n  --_mono-dropdown-table-shadow: var(--mono-dropdown-table-shadow, var(--mono-tag-input-shadow, var(--_mono-dropdown-table-shadow-preset, 0 0 #0000)));\r\n  --_mono-dropdown-table-icon: var(--mono-dropdown-table-icon-size, var(--mono-tag-input-icon-size, calc(var(--mono-spacing) * 4)));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\r\n        `<div mono-dropdown-table>` that names no size renders exactly like\r\n        size=\"md\". basecoat@1.0.2 styles/vega.css .combobox-chips — min-h-9\r\n        gap-1.5 rounded-md px-1.5 py-1.5 text-sm; .combobox-chip h-5.5 ── */\r\n  --_mono-dropdown-table-height: var(--mono-dropdown-table-height-md, var(--mono-tag-input-height-md, var(--mono-control-height-md)));\r\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))))));\r\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))))));\r\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)))));\r\n  --_mono-dropdown-table-gap: var(--mono-dropdown-table-chip-gap, var(--mono-tag-input-chip-gap, calc(var(--mono-spacing) * 1.5)));\r\n  --_mono-dropdown-table-font-size: var(--mono-dropdown-table-font-md, var(--mono-tag-input-font-md, var(--mono-text-sm)));\r\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)))));\r\n  /* Same cap as tag-input's (see tag-input.css): one row of chips never outgrows the field's height. */\r\n  --_mono-dropdown-table-chip-fit: calc(var(--_mono-dropdown-table-height) - 2 * var(--_mono-dropdown-table-padding-y) - 2 * var(--mono-border-width));\r\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))));\r\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)));\r\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)));\r\n  --_mono-dropdown-table-action: calc(var(--mono-spacing) * 6);\r\n  --_mono-dropdown-table-clear-glyph: calc(var(--mono-spacing) * 3.5);\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3; mono:\r\n     BLOCK flow with the gap as margins (see tag-input.css) */\r\n  --_mono-dropdown-table-gap-y: var(--mono-dropdown-table-gap, var(--mono-tag-input-gap, calc(var(--mono-spacing) * 3)));\r\n  position: relative;\r\n  display: block;\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-dropdown-table-text);\r\n}\r\n\r\n/* The page's global `* { box-sizing: border-box }` does NOT cross the shadow\r\n   boundary; without this the trigger's `min-height` would be its CONTENT height\r\n   there (40px → 56px). Rewrites to `:host, :host *` in the shadow sheet. */\r\nmono-dropdown-table,\r\nmono-dropdown-table *,\r\n:is([mono-dropdown-table],.mono-dropdown-table),\r\n:is([mono-dropdown-table],.mono-dropdown-table) *,\r\n:is([mono-dropdown-table],.mono-dropdown-table) *::before,\r\n:is([mono-dropdown-table],.mono-dropdown-table) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\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] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — an EMPTY field's painted height IS the token (tests/perf/field-heights);\r\n   a second row of chips grows it. The same chains as tag-input.css, one tier up.\r\n   ========================================= */\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-size=\"xs\"],:where(.mono-dropdown-table.xs)) {\r\n  --_mono-dropdown-table-height: var(--mono-dropdown-table-height-xs, var(--mono-tag-input-height-xs, var(--mono-control-height-xs)));\r\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))))));\r\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))))));\r\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)))));\r\n  --_mono-dropdown-table-gap: var(--mono-dropdown-table-chip-gap, var(--mono-tag-input-chip-gap, var(--mono-spacing)));\r\n  --_mono-dropdown-table-font-size: var(--mono-dropdown-table-font-xs, var(--mono-tag-input-font-xs, var(--mono-text-xs)));\r\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)))));\r\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))));\r\n  --_mono-dropdown-table-icon: var(--mono-dropdown-table-icon-size, var(--mono-tag-input-icon-size, calc(var(--mono-spacing) * 3.5)));\r\n  --_mono-dropdown-table-action: calc(var(--mono-spacing) * 4);\r\n  --_mono-dropdown-table-clear-glyph: calc(var(--mono-spacing) * 3);\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-size=\"sm\"],:where(.mono-dropdown-table.sm)) {\r\n  --_mono-dropdown-table-height: var(--mono-dropdown-table-height-sm, var(--mono-tag-input-height-sm, var(--mono-control-height-sm)));\r\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))))));\r\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))))));\r\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)))));\r\n  --_mono-dropdown-table-gap: var(--mono-dropdown-table-chip-gap, var(--mono-tag-input-chip-gap, var(--mono-spacing)));\r\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)))));\r\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)))));\r\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))));\r\n  --_mono-dropdown-table-action: calc(var(--mono-spacing) * 5);\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-size=\"lg\"],:where(.mono-dropdown-table.lg)) {\r\n  --_mono-dropdown-table-height: var(--mono-dropdown-table-height-lg, var(--mono-tag-input-height-lg, var(--mono-control-height-lg)));\r\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))))));\r\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))))));\r\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)))));\r\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)))));\r\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)))));\r\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))));\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-size=\"xl\"],:where(.mono-dropdown-table.xl)) {\r\n  --_mono-dropdown-table-height: var(--mono-dropdown-table-height-xl, var(--mono-tag-input-height-xl, var(--mono-control-height-xl)));\r\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))))));\r\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))))));\r\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)))));\r\n  --_mono-dropdown-table-gap: var(--mono-dropdown-table-chip-gap, var(--mono-tag-input-chip-gap, calc(var(--mono-spacing) * 2)));\r\n  --_mono-dropdown-table-font-size: var(--mono-dropdown-table-font-xl, var(--mono-tag-input-font-xl, var(--mono-text-base)));\r\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)))));\r\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))));\r\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)));\r\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)));\r\n  --_mono-dropdown-table-icon: var(--mono-dropdown-table-icon-size, var(--mono-tag-input-icon-size, calc(var(--mono-spacing) * 5)));\r\n  --_mono-dropdown-table-action: calc(var(--mono-spacing) * 7);\r\n  --_mono-dropdown-table-clear-glyph: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-size=\"xxl\"],:where(.mono-dropdown-table.xxl)) {\r\n  --_mono-dropdown-table-height: var(--mono-dropdown-table-height-xxl, var(--mono-tag-input-height-xxl, var(--mono-control-height-xxl)));\r\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))))));\r\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))))));\r\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)))));\r\n  --_mono-dropdown-table-gap: var(--mono-dropdown-table-chip-gap, var(--mono-tag-input-chip-gap, calc(var(--mono-spacing) * 2)));\r\n  --_mono-dropdown-table-font-size: var(--mono-dropdown-table-font-xxl, var(--mono-tag-input-font-xxl, var(--mono-text-lg)));\r\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)))));\r\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))));\r\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)));\r\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)));\r\n  --_mono-dropdown-table-icon: var(--mono-dropdown-table-icon-size, var(--mono-tag-input-icon-size, calc(var(--mono-spacing) * 5)));\r\n  --_mono-dropdown-table-action: calc(var(--mono-spacing) * 8);\r\n  --_mono-dropdown-table-clear-glyph: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n/* =========================================\r\n   Variants — each writes only `*-preset` slots, read from the dropdown-table's\r\n   knob first and the tag-input's second (a flavour writes the latter)\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chips — rounded-md border border-input\r\n   bg-transparent shadow-xs (dark:bg-input/30 via --mono-mode-surface) */\r\n:is([mono-dropdown-table],.mono-dropdown-table):is(:not([mono-variant]), :is([mono-variant=\"outlined\"],:where(.mono-dropdown-table.outlined))) {\r\n  --_mono-dropdown-table-bg-preset: var(--mono-dropdown-table-outline-bg, var(--mono-tag-input-outline-bg));\r\n  --_mono-dropdown-table-border-color-preset: var(--mono-dropdown-table-outline-border-color, var(--mono-tag-input-outline-border-color));\r\n  --_mono-dropdown-table-side-border-color-preset: var(--mono-dropdown-table-outline-side-border-color, var(--mono-tag-input-outline-side-border-color));\r\n  --_mono-dropdown-table-shadow-preset: var(--mono-dropdown-table-outline-shadow, var(--mono-tag-input-outline-shadow, var(--mono-shadow-xs)));\r\n  --_mono-dropdown-table-ring-width-preset: var(--mono-dropdown-table-outline-ring-width, var(--mono-tag-input-outline-ring-width));\r\n  --_mono-dropdown-table-radius-preset: var(--mono-dropdown-table-outline-radius, var(--mono-tag-input-outline-radius));\r\n  --_mono-dropdown-table-padding-x-preset: var(--mono-dropdown-table-outline-padding-x, var(--mono-tag-input-outline-padding-x));\r\n}\r\n\r\n/* EXTENSION — filled ≡ basecoat@1.0.2 styles/luma.css .combobox-chips */\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-variant=\"filled\"],:where(.mono-dropdown-table.filled)) {\r\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)));\r\n  --_mono-dropdown-table-border-color-preset: transparent;\r\n  --_mono-dropdown-table-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* EXTENSION — underlined ≡ basecoat@1.0.2 styles/sera.css .combobox-chips */\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-variant=\"underlined\"],:where(.mono-dropdown-table.underlined)) {\r\n  --_mono-dropdown-table-bg-preset: transparent;\r\n  --_mono-dropdown-table-side-border-color-preset: transparent;\r\n  --_mono-dropdown-table-shadow-preset: 0 0 #0000;\r\n  --_mono-dropdown-table-ring-width-preset: 0px;\r\n  --_mono-dropdown-table-radius-preset: 0;\r\n  --_mono-dropdown-table-padding-x-preset: 0;\r\n}\r\n\r\n/* =========================================\r\n   Colours — the `color` prop is the FOCUS colour (ring + focused border)\r\n   ========================================= */\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table):is(:not([mono-color]), :is([mono-color=\"primary\"],:where(.mono-dropdown-table.primary))) {\r\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-primary);\r\n}\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"secondary\"],:where(.mono-dropdown-table.secondary)) {\r\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-secondary);\r\n}\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"success\"],:where(.mono-dropdown-table.success)) {\r\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-success);\r\n}\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"danger\"],:where(.mono-dropdown-table.danger)) {\r\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-danger);\r\n}\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"warning\"],:where(.mono-dropdown-table.warning)) {\r\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-warning);\r\n}\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"info\"],:where(.mono-dropdown-table.info)) {\r\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-info);\r\n}\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"teal\"],:where(.mono-dropdown-table.teal)) {\r\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-teal);\r\n}\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"purple\"],:where(.mono-dropdown-table.purple)) {\r\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-purple);\r\n}\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"neutral\"],:where(.mono-dropdown-table.neutral)) {\r\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-neutral);\r\n}\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"dark\"],:where(.mono-dropdown-table.dark)) {\r\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-dark);\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > label, .label — flex items-center\r\n   gap-2 text-sm leading-none font-medium select-none w-fit */\r\n:is([mono-dropdown-table],.mono-dropdown-table) > :is([mono-dd-label],.mono-dropdown-table-label) {\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  margin: 0 0 var(--_mono-dropdown-table-gap-y);\r\n  gap: var(--mono-dropdown-table-label-gap, var(--mono-tag-input-label-gap, calc(var(--mono-spacing) * 2)));\r\n  font-size: var(--mono-dropdown-table-label-font-size, var(--mono-tag-input-label-font-size, var(--mono-text-sm)));\r\n  line-height: var(--mono-dropdown-table-label-line-height, var(--mono-tag-input-label-line-height, 1));\r\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))));\r\n  text-transform: var(--mono-dropdown-table-label-text-transform, var(--mono-tag-input-label-text-transform, none));\r\n  letter-spacing: var(--mono-dropdown-table-label-letter-spacing, var(--mono-tag-input-label-letter-spacing, normal));\r\n  color: var(--_mono-dropdown-table-text);\r\n  user-select: none;\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-disabled],.disabled) > :is([mono-dd-label],.mono-dropdown-table-label) {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field — data-invalid:text-destructive */\r\n: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) {\r\n  color: var(--_mono-dropdown-table-invalid);\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-required-mark],.mono-dropdown-table-required) {\r\n  color: var(--_mono-dropdown-table-danger);\r\n}\r\n\r\n/* =========================================\r\n   The field — the chip box (role=\"combobox\"; the search box lives in the panel)\r\n   ========================================= */\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) > :is([mono-dd-control],.mono-dropdown-table-control) {\r\n  position: relative;\r\n}\r\n\r\n/* The control is a grid/flex item in a host layout; once the value stops\r\n   wrapping (inline strip) its automatic minimum is the full strip — pin it. */\r\n:is([mono-dropdown-table],.mono-dropdown-table) > :is([mono-dd-control],.mono-dropdown-table-control):is([mono-inline],.is-inline) {\r\n  min-width: 0;\r\n}\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox-chips — flex w-full min-w-0\r\n   flex-wrap items-center */\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chips — min-h-9 gap-1.5 rounded-md\r\n   border border-input bg-transparent bg-clip-padding px-1.5 py-1.5 text-sm\r\n   shadow-xs transition-[color,box-shadow] focus-within:border-ring\r\n   focus-within:ring-3 focus-within:ring-ring/50 has-[[aria-invalid=true]]:…;\r\n   mono: one row — the value area wraps INSIDE it and the actions stay centred */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-trigger],.mono-dropdown-table-trigger) {\r\n  --_mono-dropdown-table-bc: var(--_mono-dropdown-table-border-color);\r\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))));\r\n  --_mono-dropdown-table-ring: 0 0 #0000;\r\n\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-dropdown-table-gap);\r\n  width: 100%;\r\n  min-width: 0;\r\n  min-height: var(--_mono-dropdown-table-height);\r\n  padding-block: var(--_mono-dropdown-table-padding-y);\r\n  padding-inline: var(--_mono-dropdown-table-padding-x);\r\n  outline-style: none;\r\n  border: var(--mono-border-width) solid var(--_mono-dropdown-table-bc);\r\n  border-top-color: var(--_mono-dropdown-table-side-bc);\r\n  border-inline-color: var(--_mono-dropdown-table-side-bc);\r\n  border-radius: var(--_mono-dropdown-table-radius);\r\n  background: var(--_mono-dropdown-table-bg);\r\n  background-clip: padding-box;\r\n  color: var(--_mono-dropdown-table-text);\r\n  box-shadow: var(--_mono-dropdown-table-ring), var(--_mono-dropdown-table-shadow);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-dropdown-table-font-size);\r\n  line-height: var(--_mono-dropdown-table-line-height);\r\n  cursor: pointer;\r\n  transition-property: color, box-shadow, border-color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n/* focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 — and\r\n   the OPEN state, which keeps the ring while the keyboard is in the panel */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-trigger],.mono-dropdown-table-trigger):focus-visible,\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-open],.open) :is([mono-dd-trigger],.mono-dropdown-table-trigger) {\r\n  --_mono-dropdown-table-bc: var(--_mono-dropdown-table-ring-color);\r\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);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chips — has-[[aria-invalid=true]]:border-destructive\r\n   has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive/20 */\r\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) {\r\n  --_mono-dropdown-table-bc: var(--mono-mode-invalid-border);\r\n  --_mono-dropdown-table-ring: 0 0 0 var(--_mono-dropdown-table-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* EXTENSION — valid / warning are the invalid pattern in the role's colour */\r\n: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) {\r\n  --_mono-dropdown-table-bc: color-mix(in oklab, var(--_mono-dropdown-table-valid) var(--mono-mode-state-border-alpha), transparent);\r\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);\r\n}\r\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) {\r\n  --_mono-dropdown-table-bc: color-mix(in oklab, var(--_mono-dropdown-table-warning) var(--mono-mode-state-border-alpha), transparent);\r\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);\r\n}\r\n\r\n/* EXTENSION — readonly: a muted surface */\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-readonly],.readonly) :is([mono-dd-trigger],.mono-dropdown-table-trigger) {\r\n  background: var(--mono-dropdown-table-readonly-bg, var(--mono-tag-input-readonly-bg, var(--muted)));\r\n  cursor: default;\r\n}\r\n\r\n/* .combobox-chips > input:disabled — opacity-50 (on the box, so the chips fade\r\n   with it). The strip's ‹ › pager opts back in so the chips can still be read. */\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-disabled],.disabled) :is([mono-dd-trigger],.mono-dropdown-table-trigger) {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n  background: var(--mono-dropdown-table-disabled-bg, var(--mono-tag-input-disabled-bg, var(--_mono-dropdown-table-bg)));\r\n}\r\n\r\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)) {\r\n  pointer-events: auto;\r\n  cursor: pointer;\r\n}\r\n\r\n/* ── the value area: chips (multi) or one line of text ────────────────── */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-value],.mono-dropdown-table-value) {\r\n  flex: 1 1 auto;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: var(--_mono-dropdown-table-gap);\r\n  min-width: 0;\r\n  /* the chip row is the box's height; an empty value never exceeds it */\r\n  min-height: var(--_mono-dropdown-table-chip-height);\r\n  overflow: hidden;\r\n  color: var(--_mono-dropdown-table-text);\r\n}\r\n\r\n/* EXTENSION — a text value (single select, or the placeholder) sits where a\r\n   `.select` puts its text (px-3), not where a chip does (px-1.5): the inset is\r\n   what keeps this field's text in line with a `<mono-select>` beside it. */\r\n:is([mono-dropdown-table],.mono-dropdown-table):not([mono-multiple][mono-has-value]) :is([mono-dd-value],.mono-dropdown-table-value) {\r\n  padding-inline-start: var(--mono-dropdown-table-text-inset, calc(var(--mono-spacing) * 1.5));\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-value],.mono-dropdown-table-value):is([mono-dd-placeholder],.mono-dropdown-table-placeholder) {\r\n  color: var(--_mono-dropdown-table-placeholder);\r\n  white-space: nowrap;\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-value],.mono-dropdown-table-value) > span {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* =========================================\r\n   Chips\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox-chip — inline-flex w-fit\r\n   shrink-0 items-center whitespace-nowrap */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) {\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  max-width: 100%;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  white-space: nowrap;\r\n  vertical-align: middle;\r\n  line-height: 1;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chip — h-5.5 gap-1 rounded-sm bg-muted\r\n   px-1.5 text-xs font-medium text-foreground, has-[>.combobox-chip-remove]:pe-0 */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) > [mono-dd-chip-main] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  height: var(--_mono-dropdown-table-chip-height);\r\n  max-width: 100%;\r\n  gap: var(--mono-dropdown-table-chip-content-gap, var(--mono-tag-input-chip-content-gap, var(--mono-spacing)));\r\n  margin: 0;\r\n  padding-inline: var(--mono-dropdown-table-chip-padding-x, var(--mono-tag-input-chip-padding-x, calc(var(--mono-spacing) * 1.5)));\r\n  border: 0;\r\n  border-radius: var(--mono-dropdown-table-chip-radius, var(--mono-tag-input-chip-radius, var(--mono-radius-sm)));\r\n  background: var(--mono-dropdown-table-chip-bg, var(--mono-tag-input-chip-bg, var(--muted)));\r\n  color: var(--mono-dropdown-table-chip-color, var(--mono-tag-input-chip-color, var(--_mono-dropdown-table-text)));\r\n  font-family: inherit;\r\n  font-size: var(--_mono-dropdown-table-chip-font-size);\r\n  line-height: var(--_mono-dropdown-table-chip-line-height);\r\n  font-weight: var(--mono-dropdown-table-chip-font-weight, var(--mono-tag-input-chip-font-weight, var(--mono-font-weight-medium)));\r\n  text-decoration: none;\r\n  cursor: default;\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip)[mono-dd-removable] > [mono-dd-chip-main] {\r\n  padding-inline-end: 0;\r\n}\r\n\r\n/* EXTENSION — `chip.rounded`: the chip's own corner scale over the combobox\r\n   chip's rounded-sm (the same words `<mono-chip rounded>` takes) */\r\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; }\r\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); }\r\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); }\r\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); }\r\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); }\r\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); }\r\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); }\r\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); }\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) [mono-dd-chip-content] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: inherit;\r\n  min-width: 0;\r\n  max-width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) [mono-dd-chip-label] {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* EXTENSION — `chip.dot`: a coloured dot before the label (the badge's dot idiom) */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) [mono-dd-chip-dot] {\r\n  flex: 0 0 auto;\r\n  width: calc(var(--mono-spacing) * 1.5);\r\n  height: calc(var(--mono-spacing) * 1.5);\r\n  border-radius: var(--mono-radius-full);\r\n  background: currentColor;\r\n}\r\n\r\n/* EXTENSION — `chip.color` pins a hue: the tonal pattern (bg-x/10 text-x, dark 20).\r\n   Without one the chips follow the field's `color` — the ring colour — the way\r\n   they always did here. */\r\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] {\r\n  background: color-mix(in oklab, var(--_mono-dropdown-table-ring-color) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-dropdown-table-ring-color);\r\n}\r\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); }\r\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); }\r\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); }\r\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); }\r\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); }\r\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); }\r\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); }\r\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); }\r\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); }\r\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); }\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox-chip-remove — inline-flex\r\n   shrink-0 items-center justify-center */\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chip-remove — -ms-1 opacity-50\r\n   hover:opacity-100, svg size-3.5 */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) [mono-dd-chip-close] {\r\n  display: inline-flex;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  /* explicit: the element still carries chip.css's `.chip-close` class as a hook,\r\n     which pins a 1rem box — the raw markup has no such class */\r\n  width: auto;\r\n  height: 100%;\r\n  min-width: 0;\r\n  margin: 0;\r\n  transform: none;\r\n  margin-inline-start: calc(var(--mono-spacing) * -1);\r\n  padding: 0 var(--mono-spacing);\r\n  border: 0;\r\n  border-radius: inherit;\r\n  background: transparent;\r\n  color: inherit;\r\n  font: inherit;\r\n  line-height: 1;\r\n  opacity: 0.5;\r\n  cursor: pointer;\r\n  outline-style: none;\r\n  transition-property: opacity;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) [mono-dd-chip-close]:focus-visible {\r\n  opacity: 1;\r\n}\r\n\r\n@media (hover: hover) {\r\n  :is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) [mono-dd-chip-close]:hover {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\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)) {\r\n  display: block;\r\n  width: calc(var(--mono-spacing) * 3.5);\r\n  height: calc(var(--mono-spacing) * 3.5);\r\n  pointer-events: none;\r\n}\r\n\r\n/* EXTENSION — the \"+N more\" counter chip is a control */\r\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] {\r\n  cursor: pointer;\r\n  outline-style: none;\r\n}\r\n\r\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 {\r\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);\r\n}\r\n\r\n@media (hover: hover) {\r\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 {\r\n    background: var(--mono-mode-surface-hover);\r\n  }\r\n}\r\n\r\n/* ── the inline chip strip (`chip.behaviour: 'inline'`) ──────────────────\r\n   One line that never grows: the value stops wrapping, the chips live in their\r\n   own strip, and the strip absorbs the overflow instead of the field.\r\n\r\n   `overflow-x: hidden` — NOT `auto` — is the whole scroll contract. Hidden still\r\n   honours a programmatic `scrollLeft`, so `ChipStripController` can page the\r\n   strip while the browser paints no scrollbar and refuses to scroll it from the\r\n   wheel, a click-drag or the arrow keys. */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-value],.mono-dropdown-table-value):is([mono-inline],.is-inline) {\r\n  flex-wrap: nowrap;\r\n}\r\n\r\n/* Two attributes deliberately: the strip is a direct `span` child of the value\r\n   area, so the `[mono-dd-value] > span` ellipsis rule above matches it too. */\r\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) {\r\n  display: flex;\r\n  flex-wrap: nowrap;\r\n  align-items: center;\r\n  gap: var(--_mono-dropdown-table-gap);\r\n  flex: 0 1 auto;\r\n  min-width: 0;\r\n  overflow-x: hidden;\r\n  overflow-y: hidden;\r\n  text-overflow: clip;\r\n  /* NO `scroll-behavior: smooth` — see ChipStripController (one scroll event per\r\n     frame would reposition every open popup). */\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip-strip],.mono-dropdown-table-chip-strip) > * {\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* =========================================\r\n   Actions — ‹ › pager, clear, caret\r\n   ========================================= */\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-actions],.mono-dropdown-table-actions) {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--mono-spacing);\r\n  flex: 0 0 auto;\r\n  line-height: 1;\r\n  /* The row's buttons are size-6 — 2px taller than a chip — and they sit IN the\r\n     flex row (centred beside a wrapping value, unlike tag-input's pinned corner),\r\n     so on their own they would floor the field 2px above the token. A negative\r\n     block margin folds that back: the row costs exactly one chip height. */\r\n  margin-block: calc((var(--_mono-dropdown-table-chip-height) - var(--_mono-dropdown-table-action)) / 2);\r\n}\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox [data-clear] — size-6 border-0\r\n   bg-transparent p-0 text-current; the caret ≡ .combobox-trigger-icon (size-4\r\n   text-muted-foreground), the pager the same box. Painted as .btn[data-variant='ghost']. */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-clear],.mono-dropdown-table-clear),\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-arrow],.mono-dropdown-table-arrow),\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-scroll],.mono-dropdown-table-scroll) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: 0 0 auto;\r\n  width: var(--_mono-dropdown-table-action);\r\n  height: var(--_mono-dropdown-table-action);\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--mono-dropdown-table-clear-radius, var(--mono-tag-input-clear-radius, calc(var(--radius) - 5px)));\r\n  background: transparent;\r\n  color: var(--_mono-dropdown-table-muted);\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  outline-style: none;\r\n  transition-property: color, background-color, transform;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n: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)) {\r\n  display: block;\r\n  width: var(--_mono-dropdown-table-icon);\r\n  height: var(--_mono-dropdown-table-icon);\r\n  pointer-events: none;\r\n  transition-property: transform;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\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)) {\r\n  width: var(--_mono-dropdown-table-clear-glyph);\r\n  height: var(--_mono-dropdown-table-clear-glyph);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted hover:text-foreground */\r\n@media (hover: hover) {\r\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 {\r\n    background: var(--mono-mode-ghost-hover);\r\n    color: var(--_mono-dropdown-table-text);\r\n  }\r\n}\r\n\r\n/* EXTENSION — the caret turns while the panel is open */\r\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)) {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n/* At an end of the strip the pager keeps its box but disappears — hiding it with\r\n   `display: none` would shrink the row and shove the strip sideways mid-click. */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-scroll],.mono-dropdown-table-scroll):is([mono-idle],.is-idle) {\r\n  visibility: hidden;\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   The \"+N more\" overflow panel — a popover holding the overflow chips\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox [data-popover] — bg-popover ring-1\r\n   ring-foreground/10 rounded-md shadow-md; EXTENSION: p-1.5 gap-1.5 flex-wrap.\r\n   Portaled to <body> and placed `fixed` from the \"+N more\" chip by its own\r\n   popup controller in the light build; in the shadow build `_positionMorePanel`\r\n   runs the same math in place — the absolute rule is the pre-placement fallback. */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-more],.mono-dropdown-table-more) {\r\n  position: absolute;\r\n  top: calc(100% + calc(var(--mono-spacing) * 1.5));\r\n  left: 0;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  display: none;\r\n  flex-wrap: wrap;\r\n  align-items: flex-start;\r\n  gap: var(--_mono-dropdown-table-gap);\r\n  max-width: 20rem;\r\n  /* `--mono-popup-avail-h` = the room left on the side the panel opened on. */\r\n  max-height: min(14rem, var(--mono-popup-avail-h, 100vh));\r\n  overflow: auto;\r\n  /* Portaled + anchored: a chained scroll would drag this panel off-screen. */\r\n  overscroll-behavior: contain;\r\n  padding: calc(var(--mono-spacing) * 1.5);\r\n  border-radius: var(--mono-dropdown-table-dropdown-radius, var(--mono-tag-input-dropdown-radius, var(--mono-radius-md)));\r\n  background: var(--mono-dropdown-table-dropdown-bg, var(--mono-tag-input-dropdown-bg, var(--popover)));\r\n  color: var(--mono-dropdown-table-dropdown-color, var(--mono-tag-input-dropdown-color, var(--popover-foreground)));\r\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)));\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-more-open],.more-open) :is([mono-dd-more],.mono-dropdown-table-more) {\r\n  display: flex;\r\n}\r\n\r\n/* =========================================\r\n   The panel — sized by the `dropdown` prop, NOT the field\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] — absolute z-50 overflow;\r\n   mono: `display: none` while closed, `position: fixed` (the popup controller\r\n   sets top/left), `--mono-popup-z` from the shared stack */\r\n/* basecoat@1.0.2 styles/vega.css .combobox [data-popover] — bg-popover\r\n   text-popover-foreground ring-foreground/10 rounded-md p-0 shadow-md ring-1;\r\n   EXTENSION: a flex column of three regions, the middle one scrolling */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-panel],.mono-dropdown-table-panel) {\r\n  display: none;\r\n  position: fixed;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  flex-direction: column;\r\n  width: max-content;\r\n  min-width: var(--mono-dropdown-table-dropdown-min-width, 18rem);\r\n  max-width: min(90vw, 60rem);\r\n  /* Two independent caps, combined so neither can clobber the other:\r\n     --_mono-dropdown-table-panel-max-h  the consumer's `:dropdown.prop=\"{ maxHeight }\"` (else 60vh)\r\n     --mono-popup-avail-h                the room actually left between the field and the\r\n                                         viewport edge on the side the panel opened on */\r\n  max-height: min(var(--_mono-dropdown-table-panel-max-h, 60vh), var(--mono-popup-avail-h, 100vh));\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n  border-radius: var(--mono-dropdown-table-dropdown-radius, var(--mono-tag-input-dropdown-radius, var(--mono-radius-md)));\r\n  background: var(--mono-dropdown-table-dropdown-bg, var(--mono-tag-input-dropdown-bg, var(--popover)));\r\n  color: var(--mono-dropdown-table-dropdown-color, var(--mono-tag-input-dropdown-color, var(--popover-foreground)));\r\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)));\r\n  font-size: var(--_mono-dropdown-table-font-size);\r\n  line-height: var(--_mono-dropdown-table-line-height);\r\n  outline-style: none;\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-open],.open) :is([mono-dd-panel],.mono-dropdown-table-panel) {\r\n  display: flex;\r\n}\r\n\r\n/* The panel is a container; its own ring would just outline the whole popup. */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-panel],.mono-dropdown-table-panel):focus,\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-panel],.mono-dropdown-table-panel):focus-visible {\r\n  outline: none;\r\n}\r\n\r\n/* EXTENSION — the search box above the rows, the pager below, on hairlines */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-region=\"search\"],:where(.mono-dropdown-table-region.search)) {\r\n  flex: 0 0 auto;\r\n  padding: var(--mono-dropdown-table-region-padding, calc(var(--mono-spacing) * 2));\r\n  border-bottom: var(--mono-border-width) solid var(--border);\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-region=\"body\"],:where(.mono-dropdown-table-region.body)) {\r\n  flex: 1 1 auto;\r\n  /* `min-height: 0` lets the body shrink below its content height inside the flex\r\n     column — without it the region floors at its intrinsic size and the panel\r\n     overflows its own max-height instead of scrolling the table. */\r\n  min-height: 0;\r\n  overflow: auto;\r\n  overscroll-behavior: contain;\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-region=\"foot\"],:where(.mono-dropdown-table-region.foot)) {\r\n  flex: 0 0 auto;\r\n  padding: var(--mono-dropdown-table-region-padding, calc(var(--mono-spacing) * 2));\r\n  border-top: var(--mono-border-width) solid var(--border);\r\n}\r\n\r\n/* light: a region with nothing captured is `:empty`; shadow: regions wrap a\r\n   `<slot>` (never `:empty`), so the element marks an unassigned one `mono-empty` */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-region],.mono-dropdown-table-region):empty,\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-region],.mono-dropdown-table-region)[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   The rows — the ported table's own rows, in TWO contexts\r\n   -----------------------------------------\r\n   light:  the captured `<table mono-table>` inside the (portaled) body region;\r\n   shadow: the SLOTTED table — a light-DOM child of the host, so the host tag is\r\n           the scope (these rules reach it from the page sheet, not the shadow one).\r\n\r\n   A picked row is the TABLE's `mono-selected` row (the element sets it, the same\r\n   attribute `<mono-table-checkbox>` sets), so the table's own wash + rail paint\r\n   it and a flavour that retunes `--mono-table-selected-bg` retunes it here. The\r\n   keyboard cursor is Basecoat's `.active` option — the `--muted` row, like hover.\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .table tr — hover:bg-muted/50; the table ships\r\n   with hover off, the picker turns it on through the table's PUBLIC knob */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-region=\"body\"],:where(.mono-dropdown-table-region.body)),\r\nmono-shadow-dropdown-table {\r\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))));\r\n}\r\n\r\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],\r\nmono-shadow-dropdown-table :is([mono-table],.mono-table) tbody tr[data-row-key] {\r\n  cursor: pointer;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='option'].active, .select:not(select) [role='option']:focus-visible — bg-muted text-foreground\r\n   Written the way table.css asks a row state to be written:\r\n   the row-colour variable AND the paint, so a pinned cell follows. */\r\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),\r\nmono-shadow-dropdown-table :is([mono-table],.mono-table) tbody tr:is([mono-dd-active],.mono-dd-row-active) {\r\n  --_mono-table-row-bg: var(--mono-dropdown-table-row-active-bg, var(--mono-tag-input-option-active-bg, var(--muted)));\r\n  background: var(--_mono-table-row-bg);\r\n}\r\n\r\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,\r\nmono-shadow-dropdown-table :is([mono-table],.mono-table) tbody tr:is([mono-selected],.mono-dd-row-selected) > td {\r\n  font-weight: var(--mono-font-weight-medium);\r\n}\r\n\r\n/* =========================================\r\n   Message\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p */\r\n:is([mono-dropdown-table],.mono-dropdown-table) > :is([mono-dd-message],.mono-dropdown-table-message) {\r\n  display: block;\r\n  margin-top: var(--_mono-dropdown-table-gap-y);\r\n  font-size: var(--mono-dropdown-table-message-font-size, var(--mono-tag-input-message-font-size, var(--mono-text-sm)));\r\n  line-height: var(--mono-dropdown-table-message-line-height, var(--mono-tag-input-message-line-height, var(--mono-leading-normal)));\r\n  font-weight: var(--mono-font-weight-normal);\r\n  text-align: start;\r\n  color: var(--_mono-dropdown-table-muted);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field [role=\"alert\"] — text-destructive text-sm */\r\n:is([mono-dropdown-table],.mono-dropdown-table) > :is([mono-dd-message=\"invalid\"],:where(.mono-dropdown-table-message.invalid)) {\r\n  color: var(--_mono-dropdown-table-invalid);\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) > :is([mono-dd-message=\"valid\"],:where(.mono-dropdown-table-message.valid)) {\r\n  color: var(--_mono-dropdown-table-valid);\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) > :is([mono-dd-message=\"warning\"],:where(.mono-dropdown-table-message.warning)) {\r\n  color: var(--_mono-dropdown-table-warning);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-trigger],.mono-dropdown-table-trigger),\r\n  :is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-clear],.mono-dropdown-table-clear),\r\n  :is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-arrow],.mono-dropdown-table-arrow),\r\n  :is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-scroll],.mono-dropdown-table-scroll),\r\n  :is([mono-dropdown-table],.mono-dropdown-table) [mono-dd-chip-close] {\r\n    transition: none;\r\n  }\r\n}\r\n";
+//#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)`\r\n   by `scripts/legacy-class-alias.mjs` (`.mono-dropdown-table-region.body`,\r\n   `tr.mono-dd-row-selected`, …), so host CSS and hand-written markup on the pre-port\r\n   class contract keep painting. Author with the attribute only; re-run the script. */\r\n/* =========================================================================\r\n   mono-dropdown-table — a dropdown whose panel is a native `<table>` for\r\n   picking row(s). An EXTENSION: Basecoat has no table picker, so the FIELD is\r\n   the multi-select combobox's chip box (`.combobox-chips` + `.combobox-chip`,\r\n   basecoat-css@1.0.2, vega style) on the `.field` / `.label` chrome, and the\r\n   PANEL is the combobox's `[data-popover]` holding a ported `<table mono-table>`\r\n   instead of a listbox — so the rows are the table's own rows.\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-table size=\"sm\" color=\"danger\" label=\"Owner\" clearable multiple>\r\n     <div mono-dropdown-table mono-size=\"sm\" mono-color=\"danger\" mono-clearable mono-multiple>\r\n       <label mono-dd-label>Owner</label>\r\n       <div mono-dd-control>\r\n         <div mono-dd-trigger role=\"combobox\">\r\n           <span mono-dd-value>\r\n             <div mono-dd-chip mono-dd-removable><span mono-dd-chip-main><span mono-dd-chip-content>\r\n               <span mono-dd-chip-label>Ada</span><button mono-dd-chip-close>…</button></span></span></div>\r\n           </span>\r\n           <span mono-dd-actions><span mono-dd-arrow>…</span></span>\r\n         </div>\r\n       </div>\r\n       <div mono-dd-panel><div mono-dd-region=\"body\"><table mono-table>…</table></div></div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary, `:not([mono-variant])` = outlined). The element\r\n   renders these attributes on its wrapper (both builds) plus the STATES\r\n   `mono-open` / `mono-more-open` / `mono-has-value` / `mono-side`; the old\r\n   classes (`.mono-dropdown-table.sm.open`) are still emitted as inert hooks until\r\n   2.0 but no rule here reads them. The chips are NOT `.mono-chip`s any more: they\r\n   are Basecoat combobox chips painted here, and chip.css never sees them.\r\n\r\n   THE PARTS ARE FAMILY-UNIQUE (`mono-dd-*`), never the bare `mono-chip` /\r\n   `mono-panel` / `mono-actions` the field components use: the panel holds a whole\r\n   `<table mono-table>` whose cells may carry a consumer's `<mono-chip>`, and a\r\n   `[mono-dropdown-table] [mono-chip]` rule would repaint it.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-dropdown-table]                          ≡ .field (gap-3, as margins) + .combobox (position: relative)\r\n     [mono-dropdown-table] > [mono-dd-label]        ≡ .field > label / .label\r\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)\r\n     [mono-dd-value]                                ≡ the chip row; EXTENSION: the single value / placeholder text\r\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)\r\n     [mono-dd-chip] [mono-dd-chip-close]            ≡ .combobox-chip-remove (-ms-1 opacity-50 hover:100, svg size-3.5)\r\n     [mono-dd-chip][mono-dd-more]                   ≡ EXTENSION (the \"+N more\" counter chip, same box)\r\n     [mono-dd-actions] > [mono-dd-arrow] > svg      ≡ .combobox-trigger-icon (size-4 text-muted-foreground)\r\n     [mono-dd-actions] > [mono-dd-clear]            ≡ .combobox [data-clear] (size-6, painted as .btn[data-variant='ghost'])\r\n     [mono-dd-actions] > [mono-dd-scroll]           ≡ EXTENSION (the inline strip's ‹ › pager, same box)\r\n     [mono-dd-panel]                                ≡ .combobox [data-popover] (bg-popover ring-1 rounded-md shadow-md); EXTENSION: a flex column of regions\r\n     [mono-dd-region=\"search|body|foot\"]            ≡ EXTENSION (search box / the scrolling table / the pager)\r\n     [mono-dd-more]                                 ≡ [data-popover] holding the overflow chips\r\n     [mono-table] tbody tr[mono-selected]           ≡ .table tr data-[state=selected] — the TABLE's own rule paints it\r\n     [mono-table] tbody tr[mono-dd-active]          ≡ .combobox [role='option'].active (bg-muted) — the keyboard cursor\r\n     [mono-dd-message=\"…\"]                          ≡ .field > p / .field [role='alert']\r\n     [mono-validation-state=\"invalid\"]              ≡ .combobox-chips:has([aria-invalid=true]) + .field[data-invalid]\r\n     [mono-validation-state=\"valid|warning\"]        ≡ EXTENSION (the invalid pattern in --success / --warning)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                  ≡ EXTENSION (the --mono-control-height-* ladder)\r\n     [mono-variant=\"filled\"]                        ≡ EXTENSION (luma's .combobox-chips)\r\n     [mono-variant=\"underlined\"]                    ≡ EXTENSION (sera's .combobox-chips: bottom edge only, no ring)\r\n\r\n   FLAVORS: the field IS the tag-input's chip box and the panel IS its popover, so\r\n   every metric here resolves `--mono-dropdown-table-<k>` → `--mono-tag-input-<k>`\r\n   → the base, through the SAME per-size chains tag-input.css uses — a flavour\r\n   that retunes the tag-input retunes this field for free, and no flavour file\r\n   carries a dropdown-table entry. Every fallback is vega's value.\r\n\r\n   THE PANELS ARE PORTALED (light build): [mono-dd-panel] and [mono-dd-more]\r\n   move into a `<div data-mono-popup-portal>` under <body> while open, and the\r\n   portal mirrors the wrapper's class AND mono-* attributes, so every rule here\r\n   is scoped under `[mono-dropdown-table]` and never relies on the panel being\r\n   inside the field. The shadow build keeps its panel in the shadow root and\r\n   SLOTS the consumer's light-DOM `<table>` into it — the row rules therefore\r\n   come in two forms: the portaled table, and the slotted one under the host.\r\n   ========================================================================= */\r\n\r\nmono-dropdown-table {\r\n  display: block;\r\n  width: 100%;\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) {\r\n  /* ── palette: each slot is a public knob over the tag-input's, over a Basecoat token ── */\r\n  --_mono-dropdown-table-text: var(--mono-dropdown-table-text, var(--mono-tag-input-text, var(--foreground)));\r\n  --_mono-dropdown-table-placeholder: var(--mono-dropdown-table-placeholder, var(--mono-tag-input-placeholder, var(--muted-foreground)));\r\n  --_mono-dropdown-table-muted: var(--mono-dropdown-table-muted, var(--mono-tag-input-muted, var(--muted-foreground)));\r\n  --_mono-dropdown-table-primary: var(--mono-dropdown-table-primary, var(--mono-tag-input-primary, var(--ring)));\r\n  --_mono-dropdown-table-secondary: var(--mono-dropdown-table-secondary, var(--mono-tag-input-secondary, var(--muted-foreground)));\r\n  --_mono-dropdown-table-success: var(--mono-dropdown-table-success, var(--mono-tag-input-success, var(--success)));\r\n  --_mono-dropdown-table-danger: var(--mono-dropdown-table-danger, var(--mono-tag-input-danger, var(--destructive)));\r\n  --_mono-dropdown-table-warning: var(--mono-dropdown-table-warning, var(--mono-tag-input-warning, var(--warning)));\r\n  --_mono-dropdown-table-info: var(--mono-dropdown-table-info, var(--mono-tag-input-info, var(--info)));\r\n  --_mono-dropdown-table-teal: var(--mono-dropdown-table-teal, var(--mono-tag-input-teal, var(--teal)));\r\n  --_mono-dropdown-table-purple: var(--mono-dropdown-table-purple, var(--mono-tag-input-purple, var(--purple)));\r\n  --_mono-dropdown-table-neutral: var(--mono-dropdown-table-neutral, var(--mono-tag-input-neutral, var(--neutral)));\r\n  --_mono-dropdown-table-dark: var(--mono-dropdown-table-dark, var(--mono-tag-input-dark, var(--dark)));\r\n  --_mono-dropdown-table-valid: var(--mono-dropdown-table-valid, var(--mono-tag-input-valid, var(--success)));\r\n  --_mono-dropdown-table-invalid: var(--mono-dropdown-table-invalid, var(--mono-tag-input-invalid, var(--destructive)));\r\n\r\n  /* ── the painted result — three tiers, base = .combobox-chips (vega) ──── */\r\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))));\r\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))));\r\n  --_mono-dropdown-table-ring-alpha: var(--mono-dropdown-table-ring-alpha, var(--mono-tag-input-ring-alpha, var(--mono-ring-alpha)));\r\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))))))));\r\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))))));\r\n  --_mono-dropdown-table-shadow: var(--mono-dropdown-table-shadow, var(--mono-tag-input-shadow, var(--_mono-dropdown-table-shadow-preset, 0 0 #0000)));\r\n  --_mono-dropdown-table-icon: var(--mono-dropdown-table-icon-size, var(--mono-tag-input-icon-size, calc(var(--mono-spacing) * 4)));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\r\n        `<div mono-dropdown-table>` that names no size renders exactly like\r\n        size=\"md\". basecoat@1.0.2 styles/vega.css .combobox-chips — min-h-9\r\n        gap-1.5 rounded-md px-1.5 py-1.5 text-sm; .combobox-chip h-5.5 ── */\r\n  --_mono-dropdown-table-height: var(--mono-dropdown-table-height-md, var(--mono-tag-input-height-md, var(--mono-control-height-md)));\r\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))))));\r\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))))));\r\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)))));\r\n  --_mono-dropdown-table-gap: var(--mono-dropdown-table-chip-gap, var(--mono-tag-input-chip-gap, calc(var(--mono-spacing) * 1.5)));\r\n  --_mono-dropdown-table-font-size: var(--mono-dropdown-table-font-md, var(--mono-tag-input-font-md, var(--mono-text-sm)));\r\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)))));\r\n  /* Same cap as tag-input's (see tag-input.css): one row of chips never outgrows the field's height. */\r\n  --_mono-dropdown-table-chip-fit: calc(var(--_mono-dropdown-table-height) - 2 * var(--_mono-dropdown-table-padding-y) - 2 * var(--mono-border-width));\r\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))));\r\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)));\r\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)));\r\n  --_mono-dropdown-table-action: calc(var(--mono-spacing) * 6);\r\n  --_mono-dropdown-table-clear-glyph: calc(var(--mono-spacing) * 3.5);\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3; mono:\r\n     BLOCK flow with the gap as margins (see tag-input.css) */\r\n  --_mono-dropdown-table-gap-y: var(--mono-dropdown-table-gap, var(--mono-tag-input-gap, calc(var(--mono-spacing) * 3)));\r\n  position: relative;\r\n  display: block;\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-dropdown-table-text);\r\n}\r\n\r\n/* The page's global `* { box-sizing: border-box }` does NOT cross the shadow\r\n   boundary; without this the trigger's `min-height` would be its CONTENT height\r\n   there (40px → 56px). Rewrites to `:host, :host *` in the shadow sheet. */\r\nmono-dropdown-table,\r\nmono-dropdown-table *,\r\n:is([mono-dropdown-table],.mono-dropdown-table),\r\n:is([mono-dropdown-table],.mono-dropdown-table) *,\r\n:is([mono-dropdown-table],.mono-dropdown-table) *::before,\r\n:is([mono-dropdown-table],.mono-dropdown-table) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\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] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — an EMPTY field's painted height IS the token (tests/perf/field-heights);\r\n   a second row of chips grows it. The same chains as tag-input.css, one tier up.\r\n   ========================================= */\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-size=\"xs\"],:where(.mono-dropdown-table.xs)) {\r\n  --_mono-dropdown-table-height: var(--mono-dropdown-table-height-xs, var(--mono-tag-input-height-xs, var(--mono-control-height-xs)));\r\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))))));\r\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))))));\r\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)))));\r\n  --_mono-dropdown-table-gap: var(--mono-dropdown-table-chip-gap, var(--mono-tag-input-chip-gap, var(--mono-spacing)));\r\n  --_mono-dropdown-table-font-size: var(--mono-dropdown-table-font-xs, var(--mono-tag-input-font-xs, var(--mono-text-xs)));\r\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)))));\r\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))));\r\n  --_mono-dropdown-table-icon: var(--mono-dropdown-table-icon-size, var(--mono-tag-input-icon-size, calc(var(--mono-spacing) * 3.5)));\r\n  --_mono-dropdown-table-action: calc(var(--mono-spacing) * 4);\r\n  --_mono-dropdown-table-clear-glyph: calc(var(--mono-spacing) * 3);\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-size=\"sm\"],:where(.mono-dropdown-table.sm)) {\r\n  --_mono-dropdown-table-height: var(--mono-dropdown-table-height-sm, var(--mono-tag-input-height-sm, var(--mono-control-height-sm)));\r\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))))));\r\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))))));\r\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)))));\r\n  --_mono-dropdown-table-gap: var(--mono-dropdown-table-chip-gap, var(--mono-tag-input-chip-gap, var(--mono-spacing)));\r\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)))));\r\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)))));\r\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))));\r\n  --_mono-dropdown-table-action: calc(var(--mono-spacing) * 5);\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-size=\"lg\"],:where(.mono-dropdown-table.lg)) {\r\n  --_mono-dropdown-table-height: var(--mono-dropdown-table-height-lg, var(--mono-tag-input-height-lg, var(--mono-control-height-lg)));\r\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))))));\r\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))))));\r\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)))));\r\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)))));\r\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)))));\r\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))));\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-size=\"xl\"],:where(.mono-dropdown-table.xl)) {\r\n  --_mono-dropdown-table-height: var(--mono-dropdown-table-height-xl, var(--mono-tag-input-height-xl, var(--mono-control-height-xl)));\r\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))))));\r\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))))));\r\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)))));\r\n  --_mono-dropdown-table-gap: var(--mono-dropdown-table-chip-gap, var(--mono-tag-input-chip-gap, calc(var(--mono-spacing) * 2)));\r\n  --_mono-dropdown-table-font-size: var(--mono-dropdown-table-font-xl, var(--mono-tag-input-font-xl, var(--mono-text-base)));\r\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)))));\r\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))));\r\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)));\r\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)));\r\n  --_mono-dropdown-table-icon: var(--mono-dropdown-table-icon-size, var(--mono-tag-input-icon-size, calc(var(--mono-spacing) * 5)));\r\n  --_mono-dropdown-table-action: calc(var(--mono-spacing) * 7);\r\n  --_mono-dropdown-table-clear-glyph: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-size=\"xxl\"],:where(.mono-dropdown-table.xxl)) {\r\n  --_mono-dropdown-table-height: var(--mono-dropdown-table-height-xxl, var(--mono-tag-input-height-xxl, var(--mono-control-height-xxl)));\r\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))))));\r\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))))));\r\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)))));\r\n  --_mono-dropdown-table-gap: var(--mono-dropdown-table-chip-gap, var(--mono-tag-input-chip-gap, calc(var(--mono-spacing) * 2)));\r\n  --_mono-dropdown-table-font-size: var(--mono-dropdown-table-font-xxl, var(--mono-tag-input-font-xxl, var(--mono-text-lg)));\r\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)))));\r\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))));\r\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)));\r\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)));\r\n  --_mono-dropdown-table-icon: var(--mono-dropdown-table-icon-size, var(--mono-tag-input-icon-size, calc(var(--mono-spacing) * 5)));\r\n  --_mono-dropdown-table-action: calc(var(--mono-spacing) * 8);\r\n  --_mono-dropdown-table-clear-glyph: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n/* =========================================\r\n   Variants — each writes only `*-preset` slots, read from the dropdown-table's\r\n   knob first and the tag-input's second (a flavour writes the latter)\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chips — rounded-md border border-input\r\n   bg-transparent shadow-xs (dark:bg-input/30 via --mono-mode-surface) */\r\n:is([mono-dropdown-table],.mono-dropdown-table):is(:not([mono-variant]), :is([mono-variant=\"outlined\"],:where(.mono-dropdown-table.outlined))) {\r\n  --_mono-dropdown-table-bg-preset: var(--mono-dropdown-table-outline-bg, var(--mono-tag-input-outline-bg));\r\n  --_mono-dropdown-table-border-color-preset: var(--mono-dropdown-table-outline-border-color, var(--mono-tag-input-outline-border-color));\r\n  --_mono-dropdown-table-side-border-color-preset: var(--mono-dropdown-table-outline-side-border-color, var(--mono-tag-input-outline-side-border-color));\r\n  --_mono-dropdown-table-shadow-preset: var(--mono-dropdown-table-outline-shadow, var(--mono-tag-input-outline-shadow, var(--mono-shadow-xs)));\r\n  --_mono-dropdown-table-ring-width-preset: var(--mono-dropdown-table-outline-ring-width, var(--mono-tag-input-outline-ring-width));\r\n  --_mono-dropdown-table-radius-preset: var(--mono-dropdown-table-outline-radius, var(--mono-tag-input-outline-radius));\r\n  --_mono-dropdown-table-padding-x-preset: var(--mono-dropdown-table-outline-padding-x, var(--mono-tag-input-outline-padding-x));\r\n}\r\n\r\n/* EXTENSION — filled ≡ basecoat@1.0.2 styles/luma.css .combobox-chips */\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-variant=\"filled\"],:where(.mono-dropdown-table.filled)) {\r\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)));\r\n  --_mono-dropdown-table-border-color-preset: transparent;\r\n  --_mono-dropdown-table-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* EXTENSION — underlined ≡ basecoat@1.0.2 styles/sera.css .combobox-chips */\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-variant=\"underlined\"],:where(.mono-dropdown-table.underlined)) {\r\n  --_mono-dropdown-table-bg-preset: transparent;\r\n  --_mono-dropdown-table-side-border-color-preset: transparent;\r\n  --_mono-dropdown-table-shadow-preset: 0 0 #0000;\r\n  --_mono-dropdown-table-ring-width-preset: 0px;\r\n  --_mono-dropdown-table-radius-preset: 0;\r\n  --_mono-dropdown-table-padding-x-preset: 0;\r\n}\r\n\r\n/* =========================================\r\n   Colours — the `color` prop is the FOCUS colour (ring + focused border)\r\n   ========================================= */\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table):is(:not([mono-color]), :is([mono-color=\"primary\"],:where(.mono-dropdown-table.primary))) {\r\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-primary);\r\n}\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"secondary\"],:where(.mono-dropdown-table.secondary)) {\r\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-secondary);\r\n}\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"success\"],:where(.mono-dropdown-table.success)) {\r\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-success);\r\n}\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"danger\"],:where(.mono-dropdown-table.danger)) {\r\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-danger);\r\n}\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"warning\"],:where(.mono-dropdown-table.warning)) {\r\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-warning);\r\n}\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"info\"],:where(.mono-dropdown-table.info)) {\r\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-info);\r\n}\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"teal\"],:where(.mono-dropdown-table.teal)) {\r\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-teal);\r\n}\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"purple\"],:where(.mono-dropdown-table.purple)) {\r\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-purple);\r\n}\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"neutral\"],:where(.mono-dropdown-table.neutral)) {\r\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-neutral);\r\n}\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-color=\"dark\"],:where(.mono-dropdown-table.dark)) {\r\n  --_mono-dropdown-table-ring-color-preset: var(--_mono-dropdown-table-dark);\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > label, .label — flex items-center\r\n   gap-2 text-sm leading-none font-medium select-none w-fit */\r\n:is([mono-dropdown-table],.mono-dropdown-table) > :is([mono-dd-label],.mono-dropdown-table-label) {\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  margin: 0 0 var(--_mono-dropdown-table-gap-y);\r\n  gap: var(--mono-dropdown-table-label-gap, var(--mono-tag-input-label-gap, calc(var(--mono-spacing) * 2)));\r\n  font-size: var(--mono-dropdown-table-label-font-size, var(--mono-tag-input-label-font-size, var(--mono-text-sm)));\r\n  line-height: var(--mono-dropdown-table-label-line-height, var(--mono-tag-input-label-line-height, 1));\r\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))));\r\n  text-transform: var(--mono-dropdown-table-label-text-transform, var(--mono-tag-input-label-text-transform, none));\r\n  letter-spacing: var(--mono-dropdown-table-label-letter-spacing, var(--mono-tag-input-label-letter-spacing, normal));\r\n  color: var(--_mono-dropdown-table-text);\r\n  user-select: none;\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-disabled],.disabled) > :is([mono-dd-label],.mono-dropdown-table-label) {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field — data-invalid:text-destructive */\r\n: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) {\r\n  color: var(--_mono-dropdown-table-invalid);\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-required-mark],.mono-dropdown-table-required) {\r\n  color: var(--_mono-dropdown-table-danger);\r\n}\r\n\r\n/* =========================================\r\n   The field — the chip box (role=\"combobox\"; the search box lives in the panel)\r\n   ========================================= */\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) > :is([mono-dd-control],.mono-dropdown-table-control) {\r\n  position: relative;\r\n}\r\n\r\n/* The control is a grid/flex item in a host layout; once the value stops\r\n   wrapping (inline strip) its automatic minimum is the full strip — pin it. */\r\n:is([mono-dropdown-table],.mono-dropdown-table) > :is([mono-dd-control],.mono-dropdown-table-control):is([mono-inline],.is-inline) {\r\n  min-width: 0;\r\n}\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox-chips — flex w-full min-w-0\r\n   flex-wrap items-center */\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chips — min-h-9 gap-1.5 rounded-md\r\n   border border-input bg-transparent bg-clip-padding px-1.5 py-1.5 text-sm\r\n   shadow-xs transition-[color,box-shadow] focus-within:border-ring\r\n   focus-within:ring-3 focus-within:ring-ring/50 has-[[aria-invalid=true]]:…;\r\n   mono: one row — the value area wraps INSIDE it and the actions stay centred */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-trigger],.mono-dropdown-table-trigger) {\r\n  --_mono-dropdown-table-bc: var(--_mono-dropdown-table-border-color);\r\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))));\r\n  --_mono-dropdown-table-ring: 0 0 #0000;\r\n\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-dropdown-table-gap);\r\n  width: 100%;\r\n  min-width: 0;\r\n  min-height: var(--_mono-dropdown-table-height);\r\n  padding-block: var(--_mono-dropdown-table-padding-y);\r\n  padding-inline: var(--_mono-dropdown-table-padding-x);\r\n  outline-style: none;\r\n  border: var(--mono-border-width) solid var(--_mono-dropdown-table-bc);\r\n  border-top-color: var(--_mono-dropdown-table-side-bc);\r\n  border-inline-color: var(--_mono-dropdown-table-side-bc);\r\n  border-radius: var(--_mono-dropdown-table-radius);\r\n  background: var(--_mono-dropdown-table-bg);\r\n  background-clip: padding-box;\r\n  color: var(--_mono-dropdown-table-text);\r\n  box-shadow: var(--_mono-dropdown-table-ring), var(--_mono-dropdown-table-shadow);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-dropdown-table-font-size);\r\n  line-height: var(--_mono-dropdown-table-line-height);\r\n  cursor: pointer;\r\n  transition-property: color, box-shadow, border-color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n/* focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 — and\r\n   the OPEN state, which keeps the ring while the keyboard is in the panel */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-trigger],.mono-dropdown-table-trigger):focus-visible,\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-open],.open) :is([mono-dd-trigger],.mono-dropdown-table-trigger) {\r\n  --_mono-dropdown-table-bc: var(--_mono-dropdown-table-ring-color);\r\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);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chips — has-[[aria-invalid=true]]:border-destructive\r\n   has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive/20 */\r\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) {\r\n  --_mono-dropdown-table-bc: var(--mono-mode-invalid-border);\r\n  --_mono-dropdown-table-ring: 0 0 0 var(--_mono-dropdown-table-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* EXTENSION — valid / warning are the invalid pattern in the role's colour */\r\n: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) {\r\n  --_mono-dropdown-table-bc: color-mix(in oklab, var(--_mono-dropdown-table-valid) var(--mono-mode-state-border-alpha), transparent);\r\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);\r\n}\r\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) {\r\n  --_mono-dropdown-table-bc: color-mix(in oklab, var(--_mono-dropdown-table-warning) var(--mono-mode-state-border-alpha), transparent);\r\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);\r\n}\r\n\r\n/* EXTENSION — readonly: a muted surface */\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-readonly],.readonly) :is([mono-dd-trigger],.mono-dropdown-table-trigger) {\r\n  background: var(--mono-dropdown-table-readonly-bg, var(--mono-tag-input-readonly-bg, var(--muted)));\r\n  cursor: default;\r\n}\r\n\r\n/* .combobox-chips > input:disabled — opacity-50 (on the box, so the chips fade\r\n   with it). The strip's ‹ › pager opts back in so the chips can still be read. */\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-disabled],.disabled) :is([mono-dd-trigger],.mono-dropdown-table-trigger) {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n  background: var(--mono-dropdown-table-disabled-bg, var(--mono-tag-input-disabled-bg, var(--_mono-dropdown-table-bg)));\r\n}\r\n\r\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)) {\r\n  pointer-events: auto;\r\n  cursor: pointer;\r\n}\r\n\r\n/* ── the value area: chips (multi) or one line of text ────────────────── */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-value],.mono-dropdown-table-value) {\r\n  flex: 1 1 auto;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: var(--_mono-dropdown-table-gap);\r\n  min-width: 0;\r\n  /* the chip row is the box's height; an empty value never exceeds it */\r\n  min-height: var(--_mono-dropdown-table-chip-height);\r\n  overflow: hidden;\r\n  color: var(--_mono-dropdown-table-text);\r\n}\r\n\r\n/* EXTENSION — a text value (single select, or the placeholder) sits where a\r\n   `.select` puts its text (px-3), not where a chip does (px-1.5): the inset is\r\n   what keeps this field's text in line with a `<mono-select>` beside it. */\r\n:is([mono-dropdown-table],.mono-dropdown-table):not([mono-multiple][mono-has-value]) :is([mono-dd-value],.mono-dropdown-table-value) {\r\n  padding-inline-start: var(--mono-dropdown-table-text-inset, calc(var(--mono-spacing) * 1.5));\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-value],.mono-dropdown-table-value):is([mono-dd-placeholder],.mono-dropdown-table-placeholder) {\r\n  color: var(--_mono-dropdown-table-placeholder);\r\n  white-space: nowrap;\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-value],.mono-dropdown-table-value) > span {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* =========================================\r\n   Chips\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox-chip — inline-flex w-fit\r\n   shrink-0 items-center whitespace-nowrap */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) {\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  max-width: 100%;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  white-space: nowrap;\r\n  vertical-align: middle;\r\n  line-height: 1;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chip — h-5.5 gap-1 rounded-sm bg-muted\r\n   px-1.5 text-xs font-medium text-foreground, has-[>.combobox-chip-remove]:pe-0 */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) > [mono-dd-chip-main] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  height: var(--_mono-dropdown-table-chip-height);\r\n  max-width: 100%;\r\n  gap: var(--mono-dropdown-table-chip-content-gap, var(--mono-tag-input-chip-content-gap, var(--mono-spacing)));\r\n  margin: 0;\r\n  padding-inline: var(--mono-dropdown-table-chip-padding-x, var(--mono-tag-input-chip-padding-x, calc(var(--mono-spacing) * 1.5)));\r\n  border: 0;\r\n  border-radius: var(--mono-dropdown-table-chip-radius, var(--mono-tag-input-chip-radius, var(--mono-radius-sm)));\r\n  background: var(--mono-dropdown-table-chip-bg, var(--mono-tag-input-chip-bg, var(--muted)));\r\n  color: var(--mono-dropdown-table-chip-color, var(--mono-tag-input-chip-color, var(--_mono-dropdown-table-text)));\r\n  font-family: inherit;\r\n  font-size: var(--_mono-dropdown-table-chip-font-size);\r\n  line-height: var(--_mono-dropdown-table-chip-line-height);\r\n  font-weight: var(--mono-dropdown-table-chip-font-weight, var(--mono-tag-input-chip-font-weight, var(--mono-font-weight-medium)));\r\n  text-decoration: none;\r\n  cursor: default;\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip)[mono-dd-removable] > [mono-dd-chip-main] {\r\n  padding-inline-end: 0;\r\n}\r\n\r\n/* EXTENSION — `chip.rounded`: the chip's own corner scale over the combobox\r\n   chip's rounded-sm (the same words `<mono-chip rounded>` takes) */\r\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; }\r\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); }\r\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); }\r\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); }\r\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); }\r\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); }\r\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); }\r\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); }\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) [mono-dd-chip-content] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: inherit;\r\n  min-width: 0;\r\n  max-width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) [mono-dd-chip-label] {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* EXTENSION — `chip.dot`: a coloured dot before the label (the badge's dot idiom) */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) [mono-dd-chip-dot] {\r\n  flex: 0 0 auto;\r\n  width: calc(var(--mono-spacing) * 1.5);\r\n  height: calc(var(--mono-spacing) * 1.5);\r\n  border-radius: var(--mono-radius-full);\r\n  background: currentColor;\r\n}\r\n\r\n/* EXTENSION — `chip.color` pins a hue: the tonal pattern (bg-x/10 text-x, dark 20).\r\n   Without one the chips follow the field's `color` — the ring colour — the way\r\n   they always did here. */\r\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] {\r\n  background: color-mix(in oklab, var(--_mono-dropdown-table-ring-color) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-dropdown-table-ring-color);\r\n}\r\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); }\r\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); }\r\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); }\r\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); }\r\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); }\r\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); }\r\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); }\r\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); }\r\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); }\r\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); }\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox-chip-remove — inline-flex\r\n   shrink-0 items-center justify-center */\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chip-remove — -ms-1 opacity-50\r\n   hover:opacity-100, svg size-3.5 */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) [mono-dd-chip-close] {\r\n  display: inline-flex;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  /* explicit: the element still carries chip.css's `.chip-close` class as a hook,\r\n     which pins a 1rem box — the raw markup has no such class */\r\n  width: auto;\r\n  height: 100%;\r\n  min-width: 0;\r\n  margin: 0;\r\n  transform: none;\r\n  margin-inline-start: calc(var(--mono-spacing) * -1);\r\n  padding: 0 var(--mono-spacing);\r\n  border: 0;\r\n  border-radius: inherit;\r\n  background: transparent;\r\n  color: inherit;\r\n  font: inherit;\r\n  line-height: 1;\r\n  opacity: 0.5;\r\n  cursor: pointer;\r\n  outline-style: none;\r\n  transition-property: opacity;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) [mono-dd-chip-close]:focus-visible {\r\n  opacity: 1;\r\n}\r\n\r\n@media (hover: hover) {\r\n  :is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip],.mono-dropdown-table-chip) [mono-dd-chip-close]:hover {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\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)) {\r\n  display: block;\r\n  width: calc(var(--mono-spacing) * 3.5);\r\n  height: calc(var(--mono-spacing) * 3.5);\r\n  pointer-events: none;\r\n}\r\n\r\n/* EXTENSION — the \"+N more\" counter chip is a control */\r\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] {\r\n  cursor: pointer;\r\n  outline-style: none;\r\n}\r\n\r\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 {\r\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);\r\n}\r\n\r\n@media (hover: hover) {\r\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 {\r\n    background: var(--mono-mode-surface-hover);\r\n  }\r\n}\r\n\r\n/* ── the inline chip strip (`chip.behaviour: 'inline'`) ──────────────────\r\n   One line that never grows: the value stops wrapping, the chips live in their\r\n   own strip, and the strip absorbs the overflow instead of the field.\r\n\r\n   `overflow-x: hidden` — NOT `auto` — is the whole scroll contract. Hidden still\r\n   honours a programmatic `scrollLeft`, so `ChipStripController` can page the\r\n   strip while the browser paints no scrollbar and refuses to scroll it from the\r\n   wheel, a click-drag or the arrow keys. */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-value],.mono-dropdown-table-value):is([mono-inline],.is-inline) {\r\n  flex-wrap: nowrap;\r\n}\r\n\r\n/* Two attributes deliberately: the strip is a direct `span` child of the value\r\n   area, so the `[mono-dd-value] > span` ellipsis rule above matches it too. */\r\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) {\r\n  display: flex;\r\n  flex-wrap: nowrap;\r\n  align-items: center;\r\n  gap: var(--_mono-dropdown-table-gap);\r\n  flex: 0 1 auto;\r\n  min-width: 0;\r\n  overflow-x: hidden;\r\n  overflow-y: hidden;\r\n  text-overflow: clip;\r\n  /* NO `scroll-behavior: smooth` — see ChipStripController (one scroll event per\r\n     frame would reposition every open popup). */\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-chip-strip],.mono-dropdown-table-chip-strip) > * {\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* =========================================\r\n   Actions — ‹ › pager, clear, caret\r\n   ========================================= */\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-actions],.mono-dropdown-table-actions) {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--mono-spacing);\r\n  flex: 0 0 auto;\r\n  line-height: 1;\r\n  /* The row's buttons are size-6 — 2px taller than a chip — and they sit IN the\r\n     flex row (centred beside a wrapping value, unlike tag-input's pinned corner),\r\n     so on their own they would floor the field 2px above the token. A negative\r\n     block margin folds that back: the row costs exactly one chip height. */\r\n  margin-block: calc((var(--_mono-dropdown-table-chip-height) - var(--_mono-dropdown-table-action)) / 2);\r\n}\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox [data-clear] — size-6 border-0\r\n   bg-transparent p-0 text-current; the caret ≡ .combobox-trigger-icon (size-4\r\n   text-muted-foreground), the pager the same box. Painted as .btn[data-variant='ghost']. */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-clear],.mono-dropdown-table-clear),\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-arrow],.mono-dropdown-table-arrow),\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-scroll],.mono-dropdown-table-scroll) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: 0 0 auto;\r\n  width: var(--_mono-dropdown-table-action);\r\n  height: var(--_mono-dropdown-table-action);\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--mono-dropdown-table-clear-radius, var(--mono-tag-input-clear-radius, calc(var(--radius) - 5px)));\r\n  background: transparent;\r\n  color: var(--_mono-dropdown-table-muted);\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  outline-style: none;\r\n  transition-property: color, background-color, transform;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n: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)) {\r\n  display: block;\r\n  width: var(--_mono-dropdown-table-icon);\r\n  height: var(--_mono-dropdown-table-icon);\r\n  pointer-events: none;\r\n  transition-property: transform;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\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)) {\r\n  width: var(--_mono-dropdown-table-clear-glyph);\r\n  height: var(--_mono-dropdown-table-clear-glyph);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted hover:text-foreground */\r\n@media (hover: hover) {\r\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 {\r\n    background: var(--mono-mode-ghost-hover);\r\n    color: var(--_mono-dropdown-table-text);\r\n  }\r\n}\r\n\r\n/* EXTENSION — the caret turns while the panel is open */\r\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)) {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n/* At an end of the strip the pager keeps its box but disappears — hiding it with\r\n   `display: none` would shrink the row and shove the strip sideways mid-click. */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-scroll],.mono-dropdown-table-scroll):is([mono-idle],.is-idle) {\r\n  visibility: hidden;\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   The \"+N more\" overflow panel — a popover holding the overflow chips\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox [data-popover] — bg-popover ring-1\r\n   ring-foreground/10 rounded-md shadow-md; EXTENSION: p-1.5 gap-1.5 flex-wrap.\r\n   Portaled to <body> and placed `fixed` from the \"+N more\" chip by its own\r\n   popup controller in the light build; in the shadow build `_positionMorePanel`\r\n   runs the same math in place — the absolute rule is the pre-placement fallback. */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-more],.mono-dropdown-table-more) {\r\n  position: absolute;\r\n  top: calc(100% + calc(var(--mono-spacing) * 1.5));\r\n  left: 0;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  display: none;\r\n  flex-wrap: wrap;\r\n  align-items: flex-start;\r\n  gap: var(--_mono-dropdown-table-gap);\r\n  max-width: 20rem;\r\n  /* `--mono-popup-avail-h` = the room left on the side the panel opened on. */\r\n  max-height: min(14rem, var(--mono-popup-avail-h, 100vh));\r\n  overflow: auto;\r\n  /* Portaled + anchored: a chained scroll would drag this panel off-screen. */\r\n  overscroll-behavior: contain;\r\n  padding: calc(var(--mono-spacing) * 1.5);\r\n  border-radius: var(--mono-dropdown-table-dropdown-radius, var(--mono-tag-input-dropdown-radius, var(--mono-radius-md)));\r\n  background: var(--mono-dropdown-table-dropdown-bg, var(--mono-tag-input-dropdown-bg, var(--popover)));\r\n  color: var(--mono-dropdown-table-dropdown-color, var(--mono-tag-input-dropdown-color, var(--popover-foreground)));\r\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)));\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-more-open],.more-open) :is([mono-dd-more],.mono-dropdown-table-more) {\r\n  display: flex;\r\n}\r\n\r\n/* =========================================\r\n   The panel — sized by the `dropdown` prop, NOT the field\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] — absolute z-50 overflow;\r\n   mono: `display: none` while closed, `position: fixed` (the popup controller\r\n   sets top/left), `--mono-popup-z` from the shared stack */\r\n/* basecoat@1.0.2 styles/vega.css .combobox [data-popover] — bg-popover\r\n   text-popover-foreground ring-foreground/10 rounded-md p-0 shadow-md ring-1;\r\n   EXTENSION: a flex column of three regions, the middle one scrolling */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-panel],.mono-dropdown-table-panel) {\r\n  display: none;\r\n  position: fixed;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  flex-direction: column;\r\n  width: max-content;\r\n  min-width: var(--mono-dropdown-table-dropdown-min-width, 18rem);\r\n  max-width: min(90vw, 60rem);\r\n  /* Two independent caps, combined so neither can clobber the other:\r\n     --_mono-dropdown-table-panel-max-h  the consumer's `:dropdown.prop=\"{ maxHeight }\"` (else 60vh)\r\n     --mono-popup-avail-h                the room actually left between the field and the\r\n                                         viewport edge on the side the panel opened on */\r\n  max-height: min(var(--_mono-dropdown-table-panel-max-h, 60vh), var(--mono-popup-avail-h, 100vh));\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n  border-radius: var(--mono-dropdown-table-dropdown-radius, var(--mono-tag-input-dropdown-radius, var(--mono-radius-md)));\r\n  background: var(--mono-dropdown-table-dropdown-bg, var(--mono-tag-input-dropdown-bg, var(--popover)));\r\n  color: var(--mono-dropdown-table-dropdown-color, var(--mono-tag-input-dropdown-color, var(--popover-foreground)));\r\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)));\r\n  font-size: var(--_mono-dropdown-table-font-size);\r\n  line-height: var(--_mono-dropdown-table-line-height);\r\n  outline-style: none;\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table):is([mono-open],.open) :is([mono-dd-panel],.mono-dropdown-table-panel) {\r\n  display: flex;\r\n}\r\n\r\n/* The panel is a container; its own ring would just outline the whole popup. */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-panel],.mono-dropdown-table-panel):focus,\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-panel],.mono-dropdown-table-panel):focus-visible {\r\n  outline: none;\r\n}\r\n\r\n/* EXTENSION — the search box above the rows, the pager below, on hairlines */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-region=\"search\"],:where(.mono-dropdown-table-region.search)) {\r\n  flex: 0 0 auto;\r\n  padding: var(--mono-dropdown-table-region-padding, calc(var(--mono-spacing) * 2));\r\n  border-bottom: var(--mono-border-width) solid var(--border);\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-region=\"body\"],:where(.mono-dropdown-table-region.body)) {\r\n  flex: 1 1 auto;\r\n  /* `min-height: 0` lets the body shrink below its content height inside the flex\r\n     column — without it the region floors at its intrinsic size and the panel\r\n     overflows its own max-height instead of scrolling the table. */\r\n  min-height: 0;\r\n  overflow: auto;\r\n  overscroll-behavior: contain;\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-region=\"foot\"],:where(.mono-dropdown-table-region.foot)) {\r\n  flex: 0 0 auto;\r\n  padding: var(--mono-dropdown-table-region-padding, calc(var(--mono-spacing) * 2));\r\n  border-top: var(--mono-border-width) solid var(--border);\r\n}\r\n\r\n/* light: a region with nothing captured is `:empty`; shadow: regions wrap a\r\n   `<slot>` (never `:empty`), so the element marks an unassigned one `mono-empty` */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-region],.mono-dropdown-table-region):empty,\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-region],.mono-dropdown-table-region)[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   The rows — the ported table's own rows, in TWO contexts\r\n   -----------------------------------------\r\n   light:  the captured `<table mono-table>` inside the (portaled) body region;\r\n   shadow: the SLOTTED table — a light-DOM child of the host, so the host tag is\r\n           the scope (these rules reach it from the page sheet, not the shadow one).\r\n\r\n   A picked row is the TABLE's `mono-selected` row (the element sets it, the same\r\n   attribute `<mono-table-checkbox>` sets), so the table's own wash + rail paint\r\n   it and a flavour that retunes `--mono-table-selected-bg` retunes it here. The\r\n   keyboard cursor is Basecoat's `.active` option — the `--muted` row, like hover.\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .table tr — hover:bg-muted/50; the table ships\r\n   with hover off, the picker turns it on through the table's PUBLIC knob */\r\n:is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-region=\"body\"],:where(.mono-dropdown-table-region.body)),\r\nmono-shadow-dropdown-table {\r\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))));\r\n}\r\n\r\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],\r\nmono-shadow-dropdown-table :is([mono-table],.mono-table) tbody tr[data-row-key] {\r\n  cursor: pointer;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='option'].active, .select:not(select) [role='option']:focus-visible — bg-muted text-foreground\r\n   Written the way table.css asks a row state to be written:\r\n   the row-colour variable AND the paint, so a pinned cell follows. */\r\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),\r\nmono-shadow-dropdown-table :is([mono-table],.mono-table) tbody tr:is([mono-dd-active],.mono-dd-row-active) {\r\n  --_mono-table-row-bg: var(--mono-dropdown-table-row-active-bg, var(--mono-tag-input-option-active-bg, var(--muted)));\r\n  background: var(--_mono-table-row-bg);\r\n}\r\n\r\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,\r\nmono-shadow-dropdown-table :is([mono-table],.mono-table) tbody tr:is([mono-selected],.mono-dd-row-selected) > td {\r\n  font-weight: var(--mono-font-weight-medium);\r\n}\r\n\r\n/* =========================================\r\n   Message\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p */\r\n:is([mono-dropdown-table],.mono-dropdown-table) > :is([mono-dd-message],.mono-dropdown-table-message) {\r\n  display: block;\r\n  margin-top: var(--_mono-dropdown-table-gap-y);\r\n  font-size: var(--mono-dropdown-table-message-font-size, var(--mono-tag-input-message-font-size, var(--mono-text-sm)));\r\n  line-height: var(--mono-dropdown-table-message-line-height, var(--mono-tag-input-message-line-height, var(--mono-leading-normal)));\r\n  font-weight: var(--mono-font-weight-normal);\r\n  text-align: start;\r\n  color: var(--_mono-dropdown-table-muted);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field [role=\"alert\"] — text-destructive text-sm */\r\n:is([mono-dropdown-table],.mono-dropdown-table) > :is([mono-dd-message=\"invalid\"],:where(.mono-dropdown-table-message.invalid)) {\r\n  color: var(--_mono-dropdown-table-invalid);\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) > :is([mono-dd-message=\"valid\"],:where(.mono-dropdown-table-message.valid)) {\r\n  color: var(--_mono-dropdown-table-valid);\r\n}\r\n\r\n:is([mono-dropdown-table],.mono-dropdown-table) > :is([mono-dd-message=\"warning\"],:where(.mono-dropdown-table-message.warning)) {\r\n  color: var(--_mono-dropdown-table-warning);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-trigger],.mono-dropdown-table-trigger),\r\n  :is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-clear],.mono-dropdown-table-clear),\r\n  :is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-arrow],.mono-dropdown-table-arrow),\r\n  :is([mono-dropdown-table],.mono-dropdown-table) :is([mono-dd-scroll],.mono-dropdown-table-scroll),\r\n  :is([mono-dropdown-table],.mono-dropdown-table) [mono-dd-chip-close] {\r\n    transition: none;\r\n  }\r\n}\r\n";
+
 //#endregion
 //#region src/components/dropdown-table/mono-dropdown-table.ts
-var MonoDropdownTable = class MonoDropdownTable extends MonoDropdownTableCore(LitElement) {
+let MonoDropdownTable = class MonoDropdownTable extends MonoDropdownTableCore(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._slotsCaptured = false;
@@ -1235,7 +1243,7 @@ var MonoDropdownTable = class MonoDropdownTable extends MonoDropdownTableCore(Li
 		this._slotFooter = [];
 	}
 	static {
-		this.styles = [unsafeCSS(dropdown_table_default)];
+		this.styles = [unsafeCSS(dropdown_table_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -1269,7 +1277,7 @@ var MonoDropdownTable = class MonoDropdownTable extends MonoDropdownTableCore(Li
 			taken.add(node);
 		}
 		for (const node of taken) if (node.parentNode === this) this.removeChild(node);
-		guardHostTextContent(this, new Map([
+		guardHostTextContent(this, /* @__PURE__ */ new Map([
 			["search", this._slotSearch],
 			["body", this._slotBody],
 			["footer", this._slotFooter]
@@ -1287,5 +1295,6 @@ var MonoDropdownTable = class MonoDropdownTable extends MonoDropdownTableCore(Li
 	}
 };
 MonoDropdownTable = __decorate([customElement("mono-dropdown-table")], MonoDropdownTable);
+
 //#endregion
-export { MonoDropdownTable, monoDataDropdown as controlMonoDataDropdown, monoDataDropdown };
+export { MonoDropdownTable, monoDataDropdown as controlMonoDataDropdown, monoDataDropdown };