@mono-lit/helper 0.0.2 → 0.0.3

package/dist/ui/select.js

@@ -1,21 +1,22 @@
-import { t as getFieldValue } from "../field-path-C92eGLg3.js";
-import { a as errorTitle, f as MonoSourceSearch, i as errorText, n as describeError, x as searchRowPredicate, y as resolveSearchFields } from "../normalize-error-Gcgmgh5i.js";
-import { n as unwrapReactive } from "../reactive-D3EERqgO.js";
-import { l as monoHostChildNodes } from "../mono-ui-CPV7rrdo.js";
-import { t as customElement } from "../mono-element-B0kP_96P.js";
-import { a as defineHybridPropAliases, n as arrayHasChanged, r as booleanStringConverter, t as __decorate } from "../decorate-DEXtNagw.js";
-import { t as dispatchMonoEvent } from "../mono-event-Bi1qP9uN.js";
-import { s as placeSlotNode, t as LateSlotWatcher } from "../light-slots-DW1WgfgT.js";
-import { n as toCssSize, t as buildSizeStyle } from "../css-size-DhHSVZJK.js";
-import { a as rateLimitHasChanged } from "../rate-limit-BBa2PO79.js";
-import { t as PopupPortalController } from "../popup-portal-BziRX1yG.js";
-import { a as spinnerIcon, i as refreshIcon } from "../field-icons-DELrSdqJ.js";
-import { t as MonoFormControlCore } from "../form-control-core-eeRr0zLU.js";
-import { t as DataSourceController } from "../data-source-controller-B_rgHCjw.js";
+import { t as getFieldValue } from "../field-path-BabiMrrA.js";
+import { a as errorTitle, f as MonoSourceSearch, i as errorText, n as describeError, x as searchRowPredicate, y as resolveSearchFields } from "../normalize-error-D93O4q8g.js";
+import { n as unwrapReactive } from "../reactive-Dtd-esHO.js";
+import { l as monoHostChildNodes } from "../mono-ui-BwUc0L6B.js";
+import { t as customElement } from "../mono-element-C7vCschg.js";
+import { a as defineHybridPropAliases, n as arrayHasChanged, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
+import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
+import { s as placeSlotNode, t as LateSlotWatcher } from "../light-slots-DdDdZ6zs.js";
+import { n as toCssSize, t as buildSizeStyle } from "../css-size-DWAPgQdT.js";
+import { a as rateLimitHasChanged } from "../rate-limit-e9Jlpl5l.js";
+import { t as PopupPortalController } from "../popup-portal-HWhkd7oy.js";
+import { a as spinnerIcon, i as refreshIcon } from "../field-icons-FmyBWa0g.js";
+import { t as MonoFormControlCore } from "../form-control-core-CRZPZ1ru.js";
+import { t as DataSourceController } from "../data-source-controller-Dx6IQ2CN.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
+
 //#region src/components/select/select-core.ts
 /**
 * `MonoSelectCore` — render-mode-agnostic logic for `mono-select` (props, hybrid
@@ -28,7 +29,7 @@ import { styleMap } from "lit/directives/style-map.js";
 * `<slot>` + a `firstUpdated` scan), and the `_slotOutlet` / `renderIcon` hooks.
 * The shared `_has*SlotState` `@state` fields back both strategies.
 */
-var MonoSelectCore = (superClass) => {
+const MonoSelectCore = (superClass) => {
 	class MonoSelectCoreClass extends MonoFormControlCore(superClass) {
 		constructor(...args) {
 			super(...args);
@@ -1301,16 +1302,17 @@ var MonoSelectCore = (superClass) => {
 		_renderOption(item, index = -1) {
 			const selected = this._isSameValue(this._resolveItemValue(item), this.value);
 			const active = index >= 0 && index === this._activeIndex;
-			return html`
-      <button
-        type="button"
-        role="option"
-        class=${[
+			const itemClass = [
 				this._cls("mono-select-item", "item"),
 				active ? `active ${this.cssClass?.itemActive ?? ""}` : "",
 				selected ? `selected ${this.cssClass?.itemSelected ?? ""}` : "",
 				item.disabled ? `disabled ${this.cssClass?.itemDisabled ?? ""}` : ""
-			].filter(Boolean).join(" ")}
+			].filter(Boolean).join(" ");
+			return html`
+      <button
+        type="button"
+        role="option"
+        class=${itemClass}
         mono-item
         ?mono-active=${active}
         ?mono-selected=${selected}
@@ -2025,12 +2027,14 @@ var MonoSelectCore = (superClass) => {
 	})], MonoSelectCoreClass.prototype, "maxHeight", void 0);
 	return MonoSelectCoreClass;
 };
+
 //#endregion
-//#region src/components/select/select.css?raw
-var select_default = "/* =========================================================================\r\n   mono-select — a port of Basecoat's `.select` (the custom one, `.select:not(select)`)\r\n   and `.combobox` (basecoat-css@1.0.2, vega style), on the `.field` / `.label`\r\n   chrome mono-input already ported.\r\n\r\n   Styled by ATTRIBUTE, like Basecoat (`.select > button`, `[role='option'].active`)\r\n   — and the attributes mirror the element's props one for one, so hand-written\r\n   markup reads like the Lit / Vue tag:\r\n\r\n     <mono-select size=\"sm\" color=\"danger\" variant=\"filled\" label=\"Fruit\">\r\n     <div mono-select mono-size=\"sm\" mono-color=\"danger\" mono-variant=\"filled\">\r\n       <label mono-label>Fruit</label>\r\n       <button mono-trigger><span mono-value mono-placeholder>Pick</span>\r\n         <span mono-actions><span mono-arrow>…</span></span></button>\r\n       <div mono-dropdown><div mono-dropdown-body><button mono-item>…</button></div></div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary, `:not([mono-variant])` = outlined). The element\r\n   renders these attributes on its wrapper (both builds) plus `mono-open` while\r\n   the panel is open; the old classes (`.mono-select.sm.open`) are still emitted\r\n   as inert hooks for consumer CSS until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-select]                                 ≡ .field (gap-3, as margins — see the root rule) + .select (position: relative)\r\n     [mono-select] > [mono-label]                  ≡ .field > label / .label\r\n     [mono-select] > [mono-trigger]                ≡ .select > button          (h-9 rounded-md border-input ps-2.5 pe-2 text-sm shadow-xs)\r\n     [mono-select][mono-searchable] > [mono-trigger] ≡ .combobox > input[role='combobox'] (same box; the input sits inside it)\r\n     [mono-trigger] > [mono-value]                 ≡ .select > button > span    (flex-1 truncate text-start)\r\n     [mono-trigger] > [mono-native]                ≡ EXTENSION — a plain <select> may stand in for the value + panel (appearance: none)\r\n     [mono-actions] > [mono-arrow] > [mono-icon]   ≡ .select > button > svg     (size-4 text-muted-foreground)\r\n     [mono-actions] > [mono-clear]                 ≡ .combobox [data-clear]     (size-6, painted as .btn[data-variant='ghost'])\r\n     [mono-dropdown]                               ≡ .select [data-popover]     (bg-popover ring-1 ring-foreground/10 rounded-md shadow-md)\r\n     [mono-dropdown-body]                          ≡ .combobox [role='listbox'] (max-h-72 overflow-y-auto p-1 scroll-py-1)\r\n     [mono-item]                                   ≡ .select [role='option']    (gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm)\r\n     [mono-item][mono-active] / :hover             ≡ [role='option'].active     (bg-muted text-foreground)\r\n     [mono-item][mono-selected]                    ≡ [role='option'][aria-selected='true'] (the --check-icon at the end)\r\n     [mono-group]                                  ≡ .select [role='heading']   (px-2 py-1.5 text-xs text-muted-foreground)\r\n     [mono-empty-row]                              ≡ .select [role='listbox']::before (py-6 text-center text-sm)\r\n     [mono-load-more]                              ≡ EXTENSION (an option-shaped ghost button)\r\n     [mono-message-wrap] > [mono-message]          ≡ .field > p / .field [role='alert']\r\n     [mono-validation-state=\"invalid\"]             ≡ .select > button[aria-invalid='true']\r\n     [mono-validation-state=\"valid|warning\"]       ≡ EXTENSION (the invalid pattern in --success / --warning)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION (Basecoat has only data-size=sm; the ladder is --mono-control-height-*)\r\n     [mono-variant=\"filled\"]                       ≡ EXTENSION (luma's .select > button: border-transparent bg-input/50)\r\n     [mono-variant=\"underlined\"]                   ≡ EXTENSION (sera's: rounded-none border-b-input px-0, no ring)\r\n\r\n   Inner parts are attributes too: [mono-label] (+ [mono-required-mark]),\r\n   [mono-trigger], [mono-value] (+ [mono-placeholder]), [mono-search-field],\r\n   [mono-native], [mono-actions], [mono-clear], [mono-arrow], [mono-icon],\r\n   [mono-dropdown], [mono-dropdown-body], [mono-item] (+ [mono-active] /\r\n   [mono-selected] / [mono-disabled]), [mono-group] (+ [mono-sticky],\r\n   [mono-level=\"n\"]), [mono-empty-row], [mono-load-more] (+ [mono-loading]),\r\n   [mono-list-slot], [mono-message-wrap] > [mono-message=\"helper|valid|invalid|warning\"].\r\n   The shadow build marks an unassigned slot wrapper [mono-empty].\r\n\r\n   THE PANEL IS PORTALED. The light build moves [mono-dropdown] into a\r\n   `<div data-mono-popup-portal>` under <body> while open (composables/popup-\r\n   portal.ts), and the portal mirrors the wrapper's class AND its mono-*\r\n   attributes — so `[mono-select] > [mono-dropdown]` keeps matching there and\r\n   the `--_mono-select-*` resolvers declared on `[mono-select]` re-resolve on\r\n   the portal. Nothing here may rely on the panel being inside the trigger's\r\n   host, and every option rule is scoped under `[mono-select]`.\r\n\r\n   Values are copied from the compiled vendor sheet (vendor/basecoat/basecoat-\r\n   vega.cdn.css) through the token layer; `dark:` variants travel as\r\n   `--mono-mode-*` tokens (a selector cannot cross a shadow boundary; an\r\n   inherited custom property can). FLAVORS set the `--mono-select-*` knobs read\r\n   below — the same set as mono-input (`--mono-select-outline-*` for the outlined\r\n   variant alone) plus `--mono-select-dropdown-{radius,padding,shadow,ring}`,\r\n   `--mono-select-option-{radius,padding-x,padding-y,font-size,line-height,gap,font-weight}`,\r\n   `--mono-select-group-*`, `--mono-select-icon-size`. Every fallback here is vega's\r\n   value (`node scripts/basecoat-styles.mjs --varying \"^(\\.select:not\\(select\\)|\\.combobox)\"`).\r\n   ========================================================================= */\r\n\r\nmono-select {\r\n  display: block;\r\n}\r\n\r\n[mono-select] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-select-text: var(--mono-select-color, var(--mono-select-text, var(--foreground)));\r\n  --_mono-select-placeholder: var(--mono-select-placeholder, var(--muted-foreground));\r\n  --_mono-select-muted: var(--mono-select-muted, var(--muted-foreground));\r\n  --_mono-select-primary: var(--mono-select-primary, var(--ring));\r\n  --_mono-select-secondary: var(--mono-select-secondary, var(--muted-foreground));\r\n  --_mono-select-success: var(--mono-select-success, var(--success));\r\n  --_mono-select-danger: var(--mono-select-danger, var(--destructive));\r\n  --_mono-select-warning: var(--mono-select-warning, var(--warning));\r\n  --_mono-select-info: var(--mono-select-info, var(--info));\r\n  --_mono-select-teal: var(--mono-select-teal, var(--teal));\r\n  --_mono-select-purple: var(--mono-select-purple, var(--purple));\r\n  --_mono-select-neutral: var(--mono-select-neutral, var(--neutral));\r\n  --_mono-select-dark: var(--mono-select-dark, var(--dark));\r\n  --_mono-select-valid: var(--mono-select-valid, var(--success));\r\n  --_mono-select-invalid: var(--mono-select-invalid, var(--destructive));\r\n\r\n  /* ── the painted result — three tiers, base = .select > button (vega) ─── */\r\n  --_mono-select-ring-color: var(--mono-select-ring-color, var(--mono-select-focus-color, var(--_mono-select-ring-color-preset, var(--_mono-select-primary))));\r\n  --_mono-select-ring-width: var(--mono-select-ring-width, var(--_mono-select-ring-width-preset, var(--mono-ring-width)));\r\n  --_mono-select-ring-alpha: var(--mono-select-ring-alpha, var(--mono-ring-alpha));\r\n  --_mono-select-border-color: var(--mono-select-rest-border, var(--mono-select-border-color, var(--mono-select-border, var(--_mono-select-border-color-preset, var(--input)))));\r\n  --_mono-select-bg: var(--mono-select-bg, var(--mono-select-surface, var(--_mono-select-bg-preset, var(--mono-mode-surface))));\r\n  --_mono-select-hover-bg: var(--mono-select-hover-bg, var(--_mono-select-hover-bg-preset, var(--_mono-select-bg)));\r\n  --_mono-select-shadow: var(--mono-select-shadow, var(--_mono-select-shadow-preset, 0 0 #0000));\r\n  --_mono-select-icon: var(--mono-select-icon-size, calc(var(--mono-spacing) * 4));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\r\n        `<div mono-select>` that names no size renders exactly like size=\"md\".\r\n        basecoat@1.0.2 styles/vega.css .select:not(select) > button — h-9 gap-1.5\r\n        rounded-md ps-2.5 pe-2 text-sm ── */\r\n  --_mono-select-height: var(--mono-select-height-md, var(--mono-control-height-md));\r\n  --_mono-select-radius: var(--mono-select-radius-md, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-md, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-md, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-select-gap: var(--mono-select-trigger-gap, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-select-font-size: var(--mono-select-font-md, var(--mono-text-sm));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-md, var(--mono-text-sm--lh)));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 6);\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3; mono: BLOCK\r\n     flow with the gap as margins, so a hand-written panel that no controller\r\n     positions lands at its static position — right under the trigger, above the\r\n     message — instead of a flex container's content-box top */\r\n  --_mono-select-gap-y: var(--mono-select-gap, calc(var(--mono-spacing) * 3));\r\n  position: relative;\r\n  display: block;\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-select-text);\r\n}\r\n\r\n/* A page-level `* { box-sizing: border-box }` reset does NOT cross a shadow\r\n   boundary; scoped here so both builds measure the same. */\r\n[mono-select],\r\n[mono-select] *,\r\n[mono-select] *::before,\r\n[mono-select] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n[mono-select] :is([mono-label], [mono-message])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — the trigger's painted height IS the token (tests/perf/field-heights)\r\n   EXTENSION: Basecoat's select has only data-size=sm; the ladder is the shared\r\n   --mono-control-height-* scale and the text follows .btn's steps.\r\n   ========================================= */\r\n\r\n[mono-select][mono-size=\"xs\"] {\r\n  --_mono-select-height: var(--mono-select-height-xs, var(--mono-control-height-xs));\r\n  --_mono-select-radius: var(--mono-select-radius-xs, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-xs, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-xs, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 1.5))));\r\n  --_mono-select-gap: var(--mono-select-trigger-gap, var(--mono-spacing));\r\n  --_mono-select-font-size: var(--mono-select-font-xs, var(--mono-text-xs));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-xs, var(--mono-text-xs--lh)));\r\n  --_mono-select-icon: var(--mono-select-icon-size, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button — data-[size=sm]:h-8 */\r\n[mono-select][mono-size=\"sm\"] {\r\n  --_mono-select-height: var(--mono-select-height-sm, var(--mono-control-height-sm));\r\n  --_mono-select-radius: var(--mono-select-radius-sm, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-sm, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-sm, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-select-font-size: var(--mono-select-font-sm, var(--mono-select-font-md, var(--mono-text-sm)));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-sm, var(--mono-text-sm--lh)));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 5);\r\n}\r\n\r\n[mono-select][mono-size=\"lg\"] {\r\n  --_mono-select-height: var(--mono-select-height-lg, var(--mono-control-height-lg));\r\n  --_mono-select-radius: var(--mono-select-radius-lg, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-lg, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-lg, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-select-font-size: var(--mono-select-font-lg, var(--mono-select-font-md, var(--mono-text-sm)));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-lg, var(--mono-text-sm--lh)));\r\n}\r\n\r\n[mono-select][mono-size=\"xl\"] {\r\n  --_mono-select-height: var(--mono-select-height-xl, var(--mono-control-height-xl));\r\n  --_mono-select-radius: var(--mono-select-radius-xl, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-xl, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 3))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-xl, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-select-gap: var(--mono-select-trigger-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-select-font-size: var(--mono-select-font-xl, var(--mono-text-base));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-xl, var(--mono-text-base--lh)));\r\n  --_mono-select-icon: var(--mono-select-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 7);\r\n}\r\n\r\n[mono-select][mono-size=\"xxl\"] {\r\n  --_mono-select-height: var(--mono-select-height-xxl, var(--mono-control-height-xxl));\r\n  --_mono-select-radius: var(--mono-select-radius-xxl, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-xxl, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 4))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-xxl, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 3))));\r\n  --_mono-select-gap: var(--mono-select-trigger-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-select-font-size: var(--mono-select-font-xxl, var(--mono-text-lg));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-xxl, var(--mono-text-lg--lh)));\r\n  --_mono-select-icon: var(--mono-select-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 8);\r\n}\r\n\r\n/* =========================================\r\n   Variants — each writes only `*-preset` slots\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button — rounded-md border\r\n   border-input bg-transparent shadow-xs (dark:bg-input/30 dark:hover:bg-input/50\r\n   via the mode tokens). `--mono-select-outline-*` restyle THIS variant alone. */\r\n[mono-select]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\r\n  --_mono-select-bg-preset: var(--mono-select-outline-bg);\r\n  --_mono-select-hover-bg-preset: var(--mono-select-outline-hover-bg, var(--mono-mode-field-hover-bg));\r\n  --_mono-select-border-color-preset: var(--mono-select-outline-border-color);\r\n  --_mono-select-side-border-color-preset: var(--mono-select-outline-side-border-color);\r\n  --_mono-select-shadow-preset: var(--mono-select-outline-shadow, var(--mono-shadow-xs));\r\n  --_mono-select-ring-width-preset: var(--mono-select-outline-ring-width);\r\n  --_mono-select-radius-preset: var(--mono-select-outline-radius);\r\n  --_mono-select-padding-x-preset: var(--mono-select-outline-padding-x);\r\n}\r\n\r\n/* EXTENSION — filled ≡ basecoat@1.0.2 styles/luma.css .select:not(select) > button:\r\n   border-transparent bg-input/50, no shadow-xs, no hover */\r\n[mono-select][mono-variant=\"filled\"] {\r\n  --_mono-select-bg-preset: var(--mono-select-filled-bg, color-mix(in oklab, var(--input) 50%, transparent));\r\n  --_mono-select-hover-bg-preset: var(--_mono-select-bg);\r\n  --_mono-select-border-color-preset: transparent;\r\n  --_mono-select-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* EXTENSION — underlined ≡ basecoat@1.0.2 styles/sera.css .select:not(select) > button:\r\n   rounded-none border-transparent border-b-input bg-transparent px-0, no shadow,\r\n   no ring, focus-visible:border-b-ring */\r\n[mono-select][mono-variant=\"underlined\"] {\r\n  --_mono-select-bg-preset: transparent;\r\n  --_mono-select-hover-bg-preset: transparent;\r\n  --_mono-select-side-border-color-preset: transparent;\r\n  --_mono-select-shadow-preset: 0 0 #0000;\r\n  --_mono-select-ring-width-preset: 0px;\r\n  --_mono-select-radius-preset: 0;\r\n  --_mono-select-padding-x-preset: 0;\r\n}\r\n\r\n/* =========================================\r\n   Colours — the `color` prop is the FOCUS colour (ring + focused border)\r\n   ========================================= */\r\n\r\n[mono-select]:is(:not([mono-color]), [mono-color=\"primary\"]) {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-primary);\r\n}\r\n[mono-select][mono-color=\"secondary\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-secondary);\r\n}\r\n[mono-select][mono-color=\"success\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-success);\r\n}\r\n[mono-select][mono-color=\"danger\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-danger);\r\n}\r\n[mono-select][mono-color=\"warning\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-warning);\r\n}\r\n[mono-select][mono-color=\"info\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-info);\r\n}\r\n[mono-select][mono-color=\"teal\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-teal);\r\n}\r\n[mono-select][mono-color=\"purple\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-purple);\r\n}\r\n[mono-select][mono-color=\"neutral\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-neutral);\r\n}\r\n[mono-select][mono-color=\"dark\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-dark);\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > label, .label — flex items-center\r\n   gap-2 text-sm leading-none font-medium select-none w-fit */\r\n[mono-select] > [mono-label] {\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  margin: 0 0 var(--_mono-select-gap-y);\r\n  gap: var(--mono-select-label-gap, calc(var(--mono-spacing) * 2));\r\n  font-size: var(--mono-select-label-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-label-line-height, 1);\r\n  font-weight: var(--mono-select-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  text-transform: var(--mono-select-label-text-transform, none);\r\n  letter-spacing: var(--mono-select-label-letter-spacing, normal);\r\n  color: var(--_mono-select-text);\r\n  user-select: none;\r\n}\r\n\r\n[mono-select][mono-disabled] > [mono-label] {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field — data-invalid:text-destructive */\r\n[mono-select][mono-validation-state=\"invalid\"] > [mono-label] {\r\n  color: var(--_mono-select-invalid);\r\n}\r\n\r\n[mono-select] [mono-required-mark] {\r\n  color: var(--_mono-select-danger);\r\n}\r\n\r\n/* =========================================\r\n   The trigger — the bordered box (a <button>, or a <div> holding the combobox input)\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) > button */\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button — h-9 gap-1.5\r\n   rounded-md border border-input bg-transparent py-2 ps-2.5 pe-2 text-sm shadow-xs\r\n   focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50\r\n   aria-invalid:… dark:hover:bg-input/50; mono: `--tw-ring-*` flattened to the\r\n   ring + shadow slots, the height is the control token (no block padding — the\r\n   token owns the height), the side edges read their own slot */\r\n[mono-select] > [mono-trigger] {\r\n  --_mono-select-bc: var(--_mono-select-border-color);\r\n  --_mono-select-side-bc: var(--mono-select-side-border-color, var(--_mono-select-side-border-color-preset, var(--_mono-select-bc)));\r\n  --_mono-select-ring: 0 0 #0000;\r\n\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: var(--_mono-select-gap);\r\n  width: 100%;\r\n  min-width: 0;\r\n  min-height: var(--_mono-select-height);\r\n  margin: 0;\r\n  padding-block: var(--mono-select-padding-y, 0);\r\n  padding-inline: var(--_mono-select-padding-start) var(--_mono-select-padding-end);\r\n  outline-style: none;\r\n  border: var(--mono-border-width) solid var(--_mono-select-bc);\r\n  border-top-color: var(--_mono-select-side-bc);\r\n  border-inline-color: var(--_mono-select-side-bc);\r\n  border-radius: var(--_mono-select-radius);\r\n  background: var(--_mono-select-bg);\r\n  color: var(--_mono-select-text);\r\n  box-shadow: var(--_mono-select-ring), var(--_mono-select-shadow);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-select-font-size);\r\n  line-height: var(--_mono-select-line-height);\r\n  font-weight: var(--mono-font-weight-normal);\r\n  white-space: nowrap;\r\n  text-align: start;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  transition-property: color, box-shadow, border-color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n\r\n  &:focus,\r\n  &:focus-visible,\r\n  &:focus-within {\r\n    outline: none !important;\r\n  }\r\n\r\n  /* focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 —\r\n     the combobox form is a <div> whose <input> takes focus, hence :focus-within */\r\n  &:focus-visible,\r\n  &:focus-within {\r\n    --_mono-select-bc: var(--_mono-select-ring-color);\r\n    --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) color-mix(in oklab, var(--_mono-select-ring-color) var(--_mono-select-ring-alpha), transparent);\r\n  }\r\n\r\n  & svg,\r\n  & [mono-icon] {\r\n    pointer-events: none;\r\n    flex-shrink: 0;\r\n  }\r\n}\r\n\r\n/* dark:hover:bg-input/50 (light: none) — carried by --mono-mode-field-hover-bg */\r\n@media (hover: hover) {\r\n  [mono-select]:not([mono-disabled]):not([mono-readonly]):not([mono-ds-loading]) > [mono-trigger]:hover {\r\n    background: var(--_mono-select-hover-bg);\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button — aria-invalid:border-destructive\r\n   aria-invalid:ring-3 aria-invalid:ring-destructive/20 (dark: /50, /40 via the mode tokens) */\r\n[mono-select][mono-validation-state=\"invalid\"] > [mono-trigger],\r\n[mono-select] > [mono-trigger][aria-invalid=\"true\"] {\r\n  --_mono-select-bc: var(--mono-mode-invalid-border);\r\n  --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* EXTENSION — valid / warning are the invalid pattern in the role's colour */\r\n[mono-select][mono-validation-state=\"valid\"] > [mono-trigger] {\r\n  --_mono-select-bc: color-mix(in oklab, var(--_mono-select-valid) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) color-mix(in oklab, var(--_mono-select-valid) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n[mono-select][mono-validation-state=\"warning\"] > [mono-trigger] {\r\n  --_mono-select-bc: color-mix(in oklab, var(--_mono-select-warning) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) color-mix(in oklab, var(--_mono-select-warning) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n/* EXTENSION — the bound dataSource failed: the invalid outline ONLY. Label,\r\n   message and validation state stay as they are; it is not a validation error. */\r\n[mono-select][mono-ds-error] > [mono-trigger] {\r\n  --_mono-select-bc: var(--mono-select-ds-error-border, var(--mono-mode-invalid-border));\r\n  --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) var(--mono-select-ds-error-ring, var(--mono-mode-invalid-ring));\r\n}\r\n\r\n[mono-select] [mono-value][mono-ds-error-text] {\r\n  color: var(--mono-select-ds-error-text, var(--_mono-select-invalid));\r\n}\r\n\r\n/* EXTENSION — the first load (or a retry) is in flight: read-only, no hover */\r\n[mono-select][mono-ds-loading] > [mono-trigger] {\r\n  cursor: progress;\r\n}\r\n\r\n/* EXTENSION — readonly: focusable, on a muted surface, no gestures */\r\n[mono-select][mono-readonly] > [mono-trigger] {\r\n  background: var(--mono-select-readonly-bg, var(--muted));\r\n  cursor: default;\r\n}\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) > button — disabled:\r\n   pointer-events-none cursor-not-allowed opacity-50 */\r\n[mono-select][mono-disabled] > [mono-trigger],\r\n[mono-select] > [mono-trigger]:disabled,\r\n/* a raw readonly select can only disable its native <select>; the root attribute wins */\r\n[mono-select]:not([mono-readonly]) > [mono-trigger]:has(> [mono-native]:disabled) {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n  background: var(--mono-select-disabled-bg, var(--_mono-select-bg));\r\n}\r\n\r\n/* =========================================\r\n   Value / search field / native <select>\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) > button > span —\r\n   flex flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-start */\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button > span — gap-1.5 */\r\n[mono-select] [mono-value] {\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-select-gap);\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  text-align: start;\r\n  color: var(--_mono-select-text);\r\n}\r\n\r\n[mono-select] [mono-value] > span {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n[mono-select] [mono-value][mono-placeholder] {\r\n  color: var(--_mono-select-placeholder);\r\n}\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox > input[role='combobox'] — the\r\n   search input lives INSIDE our trigger box, so it is borderless like\r\n   .input-group > input and the box around it carries the chrome */\r\n[mono-select] [mono-search-field],\r\n[mono-select] [mono-native] {\r\n  flex: 1 1 auto;\r\n  width: 100%;\r\n  min-width: 0;\r\n  align-self: stretch;\r\n  appearance: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 0;\r\n  outline: none;\r\n  background: transparent;\r\n  box-shadow: none;\r\n  color: var(--_mono-select-text);\r\n  font: inherit;\r\n  line-height: var(--_mono-select-line-height);\r\n\r\n  &:focus,\r\n  &:focus-visible {\r\n    outline: none !important;\r\n  }\r\n\r\n  &::placeholder {\r\n    color: var(--_mono-select-placeholder);\r\n  }\r\n\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n}\r\n\r\n[mono-select] [mono-search-field] {\r\n  cursor: text;\r\n}\r\n\r\n[mono-select] [mono-native] {\r\n  cursor: inherit;\r\n}\r\n\r\n[mono-select] [mono-native] option {\r\n  color: var(--_mono-select-text);\r\n  background: var(--popover);\r\n}\r\n\r\n/* =========================================\r\n   Actions — the chevron and the clear button\r\n   ========================================= */\r\n\r\n[mono-select] [mono-actions] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--mono-spacing);\r\n  flex-shrink: 0;\r\n  line-height: 1;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button > svg — size-4\r\n   text-muted-foreground; mono: the glyph sits in a square action box so the\r\n   chevron and the clear button occupy the same gutter */\r\n/* basecoat@1.0.2 components/combobox.css .combobox [data-clear] — size-6 border-0\r\n   bg-transparent p-0 text-current */\r\n[mono-select] [mono-arrow],\r\n[mono-select] [mono-clear],\r\n[mono-select] [mono-ds-retry],\r\n[mono-select] [mono-ds-spinner] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  width: var(--_mono-select-action);\r\n  height: var(--_mono-select-action);\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--mono-select-clear-radius, calc(var(--radius) - 5px));\r\n  background: transparent;\r\n  color: var(--_mono-select-muted);\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  transition-property: color, background-color, transform;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n[mono-select] :is([mono-arrow], [mono-clear], [mono-ds-retry], [mono-ds-spinner]) > :is(svg, .mono-icon, [mono-icon]) {\r\n  display: block;\r\n  width: var(--_mono-select-icon);\r\n  height: var(--_mono-select-icon);\r\n  pointer-events: none;\r\n}\r\n\r\n/* EXTENSION — the chevron turns while the panel is open */\r\n[mono-select][mono-open] [mono-arrow] > :is(svg, .mono-icon, [mono-icon]) {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted\r\n   hover:text-foreground (dark:hover:bg-muted/50 via --mono-mode-ghost-hover) */\r\n@media (hover: hover) {\r\n  [mono-select] :is([mono-arrow], [mono-clear], [mono-ds-retry]):hover {\r\n    background: var(--mono-mode-ghost-hover);\r\n    color: var(--_mono-select-text);\r\n  }\r\n}\r\n\r\n/* EXTENSION — dataSource state glyphs: the busy arc spins, the ↻ wears the\r\n   error colour so it reads as the way out of the red field */\r\n[mono-select] [mono-ds-spinner] {\r\n  cursor: progress;\r\n}\r\n\r\n[mono-select] [mono-ds-spinner] > svg {\r\n  animation: mono-select-spin 0.7s linear infinite;\r\n}\r\n\r\n[mono-select] [mono-ds-retry] {\r\n  color: var(--mono-select-ds-error-text, var(--_mono-select-invalid));\r\n}\r\n\r\n@keyframes mono-select-spin {\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-select] [mono-ds-spinner] > svg {\r\n    animation-duration: 2.4s;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   The panel\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] — absolute z-50 min-w-full\r\n   overflow-x-hidden; mono: `display: none` while closed (the contents are only\r\n   rendered while open), `--mono-popup-z` from the shared popup stack and\r\n   `--mono-popup-avail-h` from the portal controller cap the whole panel */\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [data-popover] — bg-popover\r\n   text-popover-foreground rounded-md shadow-md ring-1 ring-foreground/10; the\r\n   `p-1` moves to the scrolling body (the combobox layout), so the scrollbar\r\n   never paints over the padding */\r\n[mono-select] > [mono-dropdown] {\r\n  position: absolute;\r\n  /* `top: auto` = the static position: the panel follows the trigger in the DOM,\r\n     so in block flow it lands right under it (the popup controller overrides\r\n     this inline for the element; hand-written markup relies on it). */\r\n  top: auto;\r\n  /* the 6px offset as a transform: the controller writes `transform: none` inline\r\n     with its fixed position, so only the hand-written panel is pushed down */\r\n  transform: translateY(calc(var(--mono-spacing) * 1.5));\r\n  /* Both edges pinned, so the panel matches the field by default. An inline\r\n     `width` from `:dropdown.prop=\"{ width }\"` is then the over-constrained case,\r\n     which CSS resolves by ignoring `right` — the panel keeps this left edge and\r\n     takes the given width. */\r\n  left: 0;\r\n  right: 0;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  display: none;\r\n  /* Basecoat's `min-w-[max(100%,9rem)]` is relative to the .select box; a portaled\r\n     panel is position: fixed, where 100% would be the viewport — the controller\r\n     writes the anchor's width inline instead, so only the floor stays. */\r\n  min-width: var(--mono-select-dropdown-min-width, 9rem);\r\n  max-height: var(--mono-popup-avail-h, none);\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n  border-radius: var(--mono-select-dropdown-radius, var(--mono-radius-md));\r\n  background: var(--mono-select-dropdown-bg, var(--popover));\r\n  color: var(--mono-select-dropdown-color, var(--popover-foreground));\r\n  box-shadow: var(--mono-select-dropdown-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)), var(--mono-select-dropdown-shadow, var(--mono-shadow-md));\r\n  font-size: var(--mono-select-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-option-line-height, var(--mono-text-sm--lh));\r\n}\r\n\r\n[mono-select][mono-open] > [mono-dropdown] {\r\n  /* A flex column (not `block`) so the body can shrink past its own height when\r\n     the panel is clamped above. */\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox [role='listbox'] — max-h-[min(18rem,\r\n   var(--available-height,18rem))] scroll-py-1 overflow-y-auto p-1 */\r\n[mono-select] [mono-dropdown-body] {\r\n  flex: 1 1 auto;\r\n  min-height: 0;\r\n  max-height: 18rem;\r\n  padding: var(--mono-select-dropdown-padding, var(--mono-spacing));\r\n  overflow: auto;\r\n  overscroll-behavior: contain;\r\n  scroll-padding-block: var(--mono-select-dropdown-padding, var(--mono-spacing));\r\n  outline-style: none;\r\n}\r\n\r\n/* =========================================\r\n   Options\r\n   -----------------------------------------\r\n   Each rule also lists the stamped twin of a row rendered through `slot=\"list\"`\r\n   (`[data-mono-type='row']`, `[data-mono-active]`, `[data-mono-selected]`), so\r\n   the two can never drift: what you render in the slot IS an option. `:where()`\r\n   wraps only the CONTAINER, keeping the twin at attribute weight.\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) [role='option'] — relative\r\n   flex w-full cursor-default items-center overflow-hidden text-ellipsis whitespace-\r\n   nowrap outline-none select-none; disabled: pointer-events-none opacity-50 */\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='option'] — gap-2\r\n   rounded-sm py-1.5 ps-2 pe-8 text-sm, svg size-4 */\r\n[mono-select] [mono-item],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row'] {\r\n  position: relative;\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  gap: var(--mono-select-option-gap, calc(var(--mono-spacing) * 2));\r\n  margin: 0;\r\n  padding-block: var(--mono-select-option-padding-y, calc(var(--mono-spacing) * 1.5));\r\n  padding-inline: var(--mono-select-option-padding-x, calc(var(--mono-spacing) * 2)) var(--mono-select-option-padding-end, calc(var(--mono-spacing) * 8));\r\n  min-height: var(--mono-select-option-min-height, 0);\r\n  border: 0;\r\n  border-radius: var(--mono-select-option-radius, var(--mono-radius-sm));\r\n  /* longhands, so the selected row's check (a background-image) survives the\r\n     active / hover background */\r\n  background-color: transparent;\r\n  background-image: none;\r\n  color: var(--_mono-select-text);\r\n  font-family: inherit;\r\n  font-size: var(--mono-select-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-option-line-height, var(--mono-text-sm--lh));\r\n  font-weight: var(--mono-select-option-font-weight, var(--mono-font-weight-normal));\r\n  text-align: start;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  outline-style: none;\r\n  user-select: none;\r\n  cursor: default;\r\n  transition-property: color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration-fast);\r\n}\r\n\r\n/* EXTENSION: a hair of air between rows. Upstream stacks its options flush, so an\r\n   active row directly under the selected one read as ONE tall highlight; a 2px\r\n   seam keeps the two rounded-sm washes apart. `--mono-select-option-spacing`. */\r\n[mono-select] [mono-item] + [mono-item],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row'] + [data-mono-type='row'] {\r\n  margin-top: var(--mono-select-option-spacing, 2px);\r\n}\r\n\r\n[mono-select] [mono-item] svg:not([class*='size-']),\r\n[mono-select] [mono-item] .mono-icon {\r\n  width: var(--_mono-select-icon);\r\n  height: var(--_mono-select-icon);\r\n  flex-shrink: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='option'].active, .select:not(select) [role='option']:focus-visible\r\n   — bg-muted text-foreground. The keyboard cursor and the pointer share one look. */\r\n[mono-select] [mono-item][mono-active]:not([mono-disabled]):not(:disabled),\r\n[mono-select] [mono-item]:focus-visible,\r\n[mono-select] :where([mono-list-slot]) [data-mono-active] {\r\n  background-color: var(--mono-select-option-active-bg, var(--muted));\r\n  color: var(--mono-select-option-active-color, var(--_mono-select-text));\r\n}\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select):not([data-select-initialized]) [role='option']:not([aria-disabled='true']):not(:disabled):hover, .select:not(select) [role='option'].active\r\n   — the pointer highlight is NOT behind (hover: hover) upstream */\r\n[mono-select] [mono-item]:hover:not([mono-disabled]):not(:disabled),\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row']:hover {\r\n  background-color: var(--mono-select-option-active-bg, var(--muted));\r\n  color: var(--mono-select-option-active-color, var(--_mono-select-text));\r\n}\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) [role='option'][aria-selected='true']\r\n   — the --check-icon at the end (bg-size .875rem, center right .5rem) */\r\n[mono-select] [mono-item][mono-selected],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row'][data-mono-selected] {\r\n  background-image: var(--mono-select-check-icon, var(--check-icon));\r\n  background-size: var(--mono-select-check-size, 0.875rem);\r\n  background-position: center right calc(var(--mono-spacing) * 2);\r\n  background-repeat: no-repeat;\r\n  font-weight: var(--mono-select-option-selected-font-weight, var(--mono-select-option-font-weight, var(--mono-font-weight-normal)));\r\n}\r\n\r\n[mono-select] [mono-item][mono-selected]:dir(rtl),\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row'][data-mono-selected]:dir(rtl) {\r\n  background-position: center left calc(var(--mono-spacing) * 2);\r\n}\r\n\r\n[mono-select] [mono-item][mono-disabled],\r\n[mono-select] [mono-item]:disabled {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before\r\n   — py-6 text-center text-sm (the \"No results found\" row) */\r\n[mono-select] [mono-empty-row] {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding-block: calc(var(--mono-spacing) * 6);\r\n  padding-inline: calc(var(--mono-spacing) * 3);\r\n  font-size: var(--mono-select-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-option-line-height, var(--mono-text-sm--lh));\r\n  color: var(--_mono-select-muted);\r\n  text-align: center;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  cursor: default;\r\n  user-select: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='heading'] — px-2 py-1.5\r\n   text-xs text-muted-foreground; EXTENSION: one indent step per nesting level */\r\n[mono-select] [mono-group],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='group'] {\r\n  --_ms-group-level: 0;\r\n  padding-block: var(--mono-select-group-padding-y, calc(var(--mono-spacing) * 1.5));\r\n  padding-inline: var(--mono-select-group-padding-x, calc(var(--mono-spacing) * 2));\r\n  padding-inline-start: calc(var(--mono-select-group-padding-x, calc(var(--mono-spacing) * 2)) + var(--_ms-group-level) * calc(var(--mono-spacing) * 2));\r\n  font-size: var(--mono-select-group-font-size, var(--mono-text-xs));\r\n  line-height: var(--mono-select-group-line-height, var(--mono-text-xs--lh));\r\n  font-weight: var(--mono-select-group-font-weight, var(--mono-font-weight-normal));\r\n  text-transform: var(--mono-select-group-text-transform, none);\r\n  letter-spacing: var(--mono-select-group-letter-spacing, normal);\r\n  color: var(--_mono-select-muted);\r\n  cursor: default;\r\n  user-select: none;\r\n}\r\n\r\n[mono-select] [mono-group][mono-level='1'],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='group'][data-mono-level='1'] { --_ms-group-level: 1; }\r\n[mono-select] [mono-group][mono-level='2'],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='group'][data-mono-level='2'] { --_ms-group-level: 2; }\r\n[mono-select] [mono-group][mono-level='3'],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='group'][data-mono-level='3'] { --_ms-group-level: 3; }\r\n\r\n/* group-sticky: pin headers while their rows scroll; nested levels stack on the\r\n   panel's own surface so options scroll cleanly underneath. */\r\n[mono-select] [mono-group][mono-sticky] {\r\n  position: sticky;\r\n  top: calc(var(--_ms-group-level) * 1.5rem);\r\n  z-index: calc(5 - var(--_ms-group-level));\r\n  background: var(--mono-select-dropdown-bg, var(--popover));\r\n}\r\n\r\n/* EXTENSION — the load-more affordance: an option-shaped ghost button */\r\n[mono-select] [mono-load-more] {\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: var(--mono-select-option-gap, calc(var(--mono-spacing) * 2));\r\n  margin: 0;\r\n  padding-block: var(--mono-select-option-padding-y, calc(var(--mono-spacing) * 1.5));\r\n  padding-inline: var(--mono-select-option-padding-x, calc(var(--mono-spacing) * 2));\r\n  border: 0;\r\n  border-radius: var(--mono-select-option-radius, var(--mono-radius-sm));\r\n  background: transparent;\r\n  color: var(--_mono-select-muted);\r\n  font-family: inherit;\r\n  font-size: var(--mono-select-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-option-line-height, var(--mono-text-sm--lh));\r\n  font-weight: var(--mono-font-weight-medium);\r\n  cursor: pointer;\r\n  transition-property: color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration-fast);\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-select] [mono-load-more]:hover:not([mono-loading]) {\r\n    background-color: var(--mono-select-option-active-bg, var(--muted));\r\n    color: var(--_mono-select-text);\r\n  }\r\n}\r\n\r\n[mono-select] [mono-load-more][mono-loading] {\r\n  cursor: default;\r\n  opacity: 0.7;\r\n}\r\n\r\n/* Consumer-rendered option rows (slot=\"list\"). `display: contents` so mono's own\r\n   placement wrapper generates no box: the rows the consumer writes lay out as if\r\n   they were direct children of the panel. */\r\n[mono-select] [mono-list-slot] {\r\n  display: contents;\r\n}\r\n\r\n/* =========================================\r\n   Message — helper / validation text under the field\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p\r\n   — text-sm text-muted-foreground leading-normal font-normal */\r\n[mono-select] > [mono-message-wrap] {\r\n  display: block;\r\n  margin-top: var(--_mono-select-gap-y);\r\n}\r\n\r\n[mono-select] > [mono-message-wrap]:not(:has([mono-message]:not([mono-empty]))) {\r\n  display: none;\r\n}\r\n\r\n[mono-select] [mono-message] {\r\n  font-size: var(--mono-select-message-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-message-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-font-weight-normal);\r\n  text-align: start;\r\n  color: var(--_mono-select-muted);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field [role=\"alert\"] — text-destructive text-sm */\r\n[mono-select] [mono-message=\"invalid\"] {\r\n  color: var(--_mono-select-invalid);\r\n}\r\n\r\n[mono-select] [mono-message=\"valid\"] {\r\n  color: var(--_mono-select-valid);\r\n}\r\n\r\n[mono-select] [mono-message=\"warning\"] {\r\n  color: var(--_mono-select-warning);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-select] > [mono-trigger],\r\n  [mono-select] [mono-arrow],\r\n  [mono-select] [mono-clear],\r\n  [mono-select] [mono-item] {\r\n    transition: none;\r\n  }\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\select\select.css?raw.js
+var select_css_raw_default = "/* =========================================================================\r\n   mono-select — a port of Basecoat's `.select` (the custom one, `.select:not(select)`)\r\n   and `.combobox` (basecoat-css@1.0.2, vega style), on the `.field` / `.label`\r\n   chrome mono-input already ported.\r\n\r\n   Styled by ATTRIBUTE, like Basecoat (`.select > button`, `[role='option'].active`)\r\n   — and the attributes mirror the element's props one for one, so hand-written\r\n   markup reads like the Lit / Vue tag:\r\n\r\n     <mono-select size=\"sm\" color=\"danger\" variant=\"filled\" label=\"Fruit\">\r\n     <div mono-select mono-size=\"sm\" mono-color=\"danger\" mono-variant=\"filled\">\r\n       <label mono-label>Fruit</label>\r\n       <button mono-trigger><span mono-value mono-placeholder>Pick</span>\r\n         <span mono-actions><span mono-arrow>…</span></span></button>\r\n       <div mono-dropdown><div mono-dropdown-body><button mono-item>…</button></div></div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary, `:not([mono-variant])` = outlined). The element\r\n   renders these attributes on its wrapper (both builds) plus `mono-open` while\r\n   the panel is open; the old classes (`.mono-select.sm.open`) are still emitted\r\n   as inert hooks for consumer CSS until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-select]                                 ≡ .field (gap-3, as margins — see the root rule) + .select (position: relative)\r\n     [mono-select] > [mono-label]                  ≡ .field > label / .label\r\n     [mono-select] > [mono-trigger]                ≡ .select > button          (h-9 rounded-md border-input ps-2.5 pe-2 text-sm shadow-xs)\r\n     [mono-select][mono-searchable] > [mono-trigger] ≡ .combobox > input[role='combobox'] (same box; the input sits inside it)\r\n     [mono-trigger] > [mono-value]                 ≡ .select > button > span    (flex-1 truncate text-start)\r\n     [mono-trigger] > [mono-native]                ≡ EXTENSION — a plain <select> may stand in for the value + panel (appearance: none)\r\n     [mono-actions] > [mono-arrow] > [mono-icon]   ≡ .select > button > svg     (size-4 text-muted-foreground)\r\n     [mono-actions] > [mono-clear]                 ≡ .combobox [data-clear]     (size-6, painted as .btn[data-variant='ghost'])\r\n     [mono-dropdown]                               ≡ .select [data-popover]     (bg-popover ring-1 ring-foreground/10 rounded-md shadow-md)\r\n     [mono-dropdown-body]                          ≡ .combobox [role='listbox'] (max-h-72 overflow-y-auto p-1 scroll-py-1)\r\n     [mono-item]                                   ≡ .select [role='option']    (gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm)\r\n     [mono-item][mono-active] / :hover             ≡ [role='option'].active     (bg-muted text-foreground)\r\n     [mono-item][mono-selected]                    ≡ [role='option'][aria-selected='true'] (the --check-icon at the end)\r\n     [mono-group]                                  ≡ .select [role='heading']   (px-2 py-1.5 text-xs text-muted-foreground)\r\n     [mono-empty-row]                              ≡ .select [role='listbox']::before (py-6 text-center text-sm)\r\n     [mono-load-more]                              ≡ EXTENSION (an option-shaped ghost button)\r\n     [mono-message-wrap] > [mono-message]          ≡ .field > p / .field [role='alert']\r\n     [mono-validation-state=\"invalid\"]             ≡ .select > button[aria-invalid='true']\r\n     [mono-validation-state=\"valid|warning\"]       ≡ EXTENSION (the invalid pattern in --success / --warning)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION (Basecoat has only data-size=sm; the ladder is --mono-control-height-*)\r\n     [mono-variant=\"filled\"]                       ≡ EXTENSION (luma's .select > button: border-transparent bg-input/50)\r\n     [mono-variant=\"underlined\"]                   ≡ EXTENSION (sera's: rounded-none border-b-input px-0, no ring)\r\n\r\n   Inner parts are attributes too: [mono-label] (+ [mono-required-mark]),\r\n   [mono-trigger], [mono-value] (+ [mono-placeholder]), [mono-search-field],\r\n   [mono-native], [mono-actions], [mono-clear], [mono-arrow], [mono-icon],\r\n   [mono-dropdown], [mono-dropdown-body], [mono-item] (+ [mono-active] /\r\n   [mono-selected] / [mono-disabled]), [mono-group] (+ [mono-sticky],\r\n   [mono-level=\"n\"]), [mono-empty-row], [mono-load-more] (+ [mono-loading]),\r\n   [mono-list-slot], [mono-message-wrap] > [mono-message=\"helper|valid|invalid|warning\"].\r\n   The shadow build marks an unassigned slot wrapper [mono-empty].\r\n\r\n   THE PANEL IS PORTALED. The light build moves [mono-dropdown] into a\r\n   `<div data-mono-popup-portal>` under <body> while open (composables/popup-\r\n   portal.ts), and the portal mirrors the wrapper's class AND its mono-*\r\n   attributes — so `[mono-select] > [mono-dropdown]` keeps matching there and\r\n   the `--_mono-select-*` resolvers declared on `[mono-select]` re-resolve on\r\n   the portal. Nothing here may rely on the panel being inside the trigger's\r\n   host, and every option rule is scoped under `[mono-select]`.\r\n\r\n   Values are copied from the compiled vendor sheet (vendor/basecoat/basecoat-\r\n   vega.cdn.css) through the token layer; `dark:` variants travel as\r\n   `--mono-mode-*` tokens (a selector cannot cross a shadow boundary; an\r\n   inherited custom property can). FLAVORS set the `--mono-select-*` knobs read\r\n   below — the same set as mono-input (`--mono-select-outline-*` for the outlined\r\n   variant alone) plus `--mono-select-dropdown-{radius,padding,shadow,ring}`,\r\n   `--mono-select-option-{radius,padding-x,padding-y,font-size,line-height,gap,font-weight}`,\r\n   `--mono-select-group-*`, `--mono-select-icon-size`. Every fallback here is vega's\r\n   value (`node scripts/basecoat-styles.mjs --varying \"^(\\.select:not\\(select\\)|\\.combobox)\"`).\r\n   ========================================================================= */\r\n\r\nmono-select {\r\n  display: block;\r\n}\r\n\r\n[mono-select] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-select-text: var(--mono-select-color, var(--mono-select-text, var(--foreground)));\r\n  --_mono-select-placeholder: var(--mono-select-placeholder, var(--muted-foreground));\r\n  --_mono-select-muted: var(--mono-select-muted, var(--muted-foreground));\r\n  --_mono-select-primary: var(--mono-select-primary, var(--ring));\r\n  --_mono-select-secondary: var(--mono-select-secondary, var(--muted-foreground));\r\n  --_mono-select-success: var(--mono-select-success, var(--success));\r\n  --_mono-select-danger: var(--mono-select-danger, var(--destructive));\r\n  --_mono-select-warning: var(--mono-select-warning, var(--warning));\r\n  --_mono-select-info: var(--mono-select-info, var(--info));\r\n  --_mono-select-teal: var(--mono-select-teal, var(--teal));\r\n  --_mono-select-purple: var(--mono-select-purple, var(--purple));\r\n  --_mono-select-neutral: var(--mono-select-neutral, var(--neutral));\r\n  --_mono-select-dark: var(--mono-select-dark, var(--dark));\r\n  --_mono-select-valid: var(--mono-select-valid, var(--success));\r\n  --_mono-select-invalid: var(--mono-select-invalid, var(--destructive));\r\n\r\n  /* ── the painted result — three tiers, base = .select > button (vega) ─── */\r\n  --_mono-select-ring-color: var(--mono-select-ring-color, var(--mono-select-focus-color, var(--_mono-select-ring-color-preset, var(--_mono-select-primary))));\r\n  --_mono-select-ring-width: var(--mono-select-ring-width, var(--_mono-select-ring-width-preset, var(--mono-ring-width)));\r\n  --_mono-select-ring-alpha: var(--mono-select-ring-alpha, var(--mono-ring-alpha));\r\n  --_mono-select-border-color: var(--mono-select-rest-border, var(--mono-select-border-color, var(--mono-select-border, var(--_mono-select-border-color-preset, var(--input)))));\r\n  --_mono-select-bg: var(--mono-select-bg, var(--mono-select-surface, var(--_mono-select-bg-preset, var(--mono-mode-surface))));\r\n  --_mono-select-hover-bg: var(--mono-select-hover-bg, var(--_mono-select-hover-bg-preset, var(--_mono-select-bg)));\r\n  --_mono-select-shadow: var(--mono-select-shadow, var(--_mono-select-shadow-preset, 0 0 #0000));\r\n  --_mono-select-icon: var(--mono-select-icon-size, calc(var(--mono-spacing) * 4));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\r\n        `<div mono-select>` that names no size renders exactly like size=\"md\".\r\n        basecoat@1.0.2 styles/vega.css .select:not(select) > button — h-9 gap-1.5\r\n        rounded-md ps-2.5 pe-2 text-sm ── */\r\n  --_mono-select-height: var(--mono-select-height-md, var(--mono-control-height-md));\r\n  --_mono-select-radius: var(--mono-select-radius-md, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-md, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-md, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-select-gap: var(--mono-select-trigger-gap, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-select-font-size: var(--mono-select-font-md, var(--mono-text-sm));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-md, var(--mono-text-sm--lh)));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 6);\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3; mono: BLOCK\r\n     flow with the gap as margins, so a hand-written panel that no controller\r\n     positions lands at its static position — right under the trigger, above the\r\n     message — instead of a flex container's content-box top */\r\n  --_mono-select-gap-y: var(--mono-select-gap, calc(var(--mono-spacing) * 3));\r\n  position: relative;\r\n  display: block;\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-select-text);\r\n}\r\n\r\n/* A page-level `* { box-sizing: border-box }` reset does NOT cross a shadow\r\n   boundary; scoped here so both builds measure the same. */\r\n[mono-select],\r\n[mono-select] *,\r\n[mono-select] *::before,\r\n[mono-select] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n[mono-select] :is([mono-label], [mono-message])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — the trigger's painted height IS the token (tests/perf/field-heights)\r\n   EXTENSION: Basecoat's select has only data-size=sm; the ladder is the shared\r\n   --mono-control-height-* scale and the text follows .btn's steps.\r\n   ========================================= */\r\n\r\n[mono-select][mono-size=\"xs\"] {\r\n  --_mono-select-height: var(--mono-select-height-xs, var(--mono-control-height-xs));\r\n  --_mono-select-radius: var(--mono-select-radius-xs, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-xs, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-xs, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 1.5))));\r\n  --_mono-select-gap: var(--mono-select-trigger-gap, var(--mono-spacing));\r\n  --_mono-select-font-size: var(--mono-select-font-xs, var(--mono-text-xs));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-xs, var(--mono-text-xs--lh)));\r\n  --_mono-select-icon: var(--mono-select-icon-size, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button — data-[size=sm]:h-8 */\r\n[mono-select][mono-size=\"sm\"] {\r\n  --_mono-select-height: var(--mono-select-height-sm, var(--mono-control-height-sm));\r\n  --_mono-select-radius: var(--mono-select-radius-sm, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-sm, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-sm, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-select-font-size: var(--mono-select-font-sm, var(--mono-select-font-md, var(--mono-text-sm)));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-sm, var(--mono-text-sm--lh)));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 5);\r\n}\r\n\r\n[mono-select][mono-size=\"lg\"] {\r\n  --_mono-select-height: var(--mono-select-height-lg, var(--mono-control-height-lg));\r\n  --_mono-select-radius: var(--mono-select-radius-lg, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-lg, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-lg, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-select-font-size: var(--mono-select-font-lg, var(--mono-select-font-md, var(--mono-text-sm)));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-lg, var(--mono-text-sm--lh)));\r\n}\r\n\r\n[mono-select][mono-size=\"xl\"] {\r\n  --_mono-select-height: var(--mono-select-height-xl, var(--mono-control-height-xl));\r\n  --_mono-select-radius: var(--mono-select-radius-xl, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-xl, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 3))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-xl, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-select-gap: var(--mono-select-trigger-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-select-font-size: var(--mono-select-font-xl, var(--mono-text-base));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-xl, var(--mono-text-base--lh)));\r\n  --_mono-select-icon: var(--mono-select-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 7);\r\n}\r\n\r\n[mono-select][mono-size=\"xxl\"] {\r\n  --_mono-select-height: var(--mono-select-height-xxl, var(--mono-control-height-xxl));\r\n  --_mono-select-radius: var(--mono-select-radius-xxl, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-xxl, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 4))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-xxl, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 3))));\r\n  --_mono-select-gap: var(--mono-select-trigger-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-select-font-size: var(--mono-select-font-xxl, var(--mono-text-lg));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-xxl, var(--mono-text-lg--lh)));\r\n  --_mono-select-icon: var(--mono-select-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 8);\r\n}\r\n\r\n/* =========================================\r\n   Variants — each writes only `*-preset` slots\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button — rounded-md border\r\n   border-input bg-transparent shadow-xs (dark:bg-input/30 dark:hover:bg-input/50\r\n   via the mode tokens). `--mono-select-outline-*` restyle THIS variant alone. */\r\n[mono-select]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\r\n  --_mono-select-bg-preset: var(--mono-select-outline-bg);\r\n  --_mono-select-hover-bg-preset: var(--mono-select-outline-hover-bg, var(--mono-mode-field-hover-bg));\r\n  --_mono-select-border-color-preset: var(--mono-select-outline-border-color);\r\n  --_mono-select-side-border-color-preset: var(--mono-select-outline-side-border-color);\r\n  --_mono-select-shadow-preset: var(--mono-select-outline-shadow, var(--mono-shadow-xs));\r\n  --_mono-select-ring-width-preset: var(--mono-select-outline-ring-width);\r\n  --_mono-select-radius-preset: var(--mono-select-outline-radius);\r\n  --_mono-select-padding-x-preset: var(--mono-select-outline-padding-x);\r\n}\r\n\r\n/* EXTENSION — filled ≡ basecoat@1.0.2 styles/luma.css .select:not(select) > button:\r\n   border-transparent bg-input/50, no shadow-xs, no hover */\r\n[mono-select][mono-variant=\"filled\"] {\r\n  --_mono-select-bg-preset: var(--mono-select-filled-bg, color-mix(in oklab, var(--input) 50%, transparent));\r\n  --_mono-select-hover-bg-preset: var(--_mono-select-bg);\r\n  --_mono-select-border-color-preset: transparent;\r\n  --_mono-select-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* EXTENSION — underlined ≡ basecoat@1.0.2 styles/sera.css .select:not(select) > button:\r\n   rounded-none border-transparent border-b-input bg-transparent px-0, no shadow,\r\n   no ring, focus-visible:border-b-ring */\r\n[mono-select][mono-variant=\"underlined\"] {\r\n  --_mono-select-bg-preset: transparent;\r\n  --_mono-select-hover-bg-preset: transparent;\r\n  --_mono-select-side-border-color-preset: transparent;\r\n  --_mono-select-shadow-preset: 0 0 #0000;\r\n  --_mono-select-ring-width-preset: 0px;\r\n  --_mono-select-radius-preset: 0;\r\n  --_mono-select-padding-x-preset: 0;\r\n}\r\n\r\n/* =========================================\r\n   Colours — the `color` prop is the FOCUS colour (ring + focused border)\r\n   ========================================= */\r\n\r\n[mono-select]:is(:not([mono-color]), [mono-color=\"primary\"]) {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-primary);\r\n}\r\n[mono-select][mono-color=\"secondary\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-secondary);\r\n}\r\n[mono-select][mono-color=\"success\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-success);\r\n}\r\n[mono-select][mono-color=\"danger\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-danger);\r\n}\r\n[mono-select][mono-color=\"warning\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-warning);\r\n}\r\n[mono-select][mono-color=\"info\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-info);\r\n}\r\n[mono-select][mono-color=\"teal\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-teal);\r\n}\r\n[mono-select][mono-color=\"purple\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-purple);\r\n}\r\n[mono-select][mono-color=\"neutral\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-neutral);\r\n}\r\n[mono-select][mono-color=\"dark\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-dark);\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > label, .label — flex items-center\r\n   gap-2 text-sm leading-none font-medium select-none w-fit */\r\n[mono-select] > [mono-label] {\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  margin: 0 0 var(--_mono-select-gap-y);\r\n  gap: var(--mono-select-label-gap, calc(var(--mono-spacing) * 2));\r\n  font-size: var(--mono-select-label-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-label-line-height, 1);\r\n  font-weight: var(--mono-select-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  text-transform: var(--mono-select-label-text-transform, none);\r\n  letter-spacing: var(--mono-select-label-letter-spacing, normal);\r\n  color: var(--_mono-select-text);\r\n  user-select: none;\r\n}\r\n\r\n[mono-select][mono-disabled] > [mono-label] {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field — data-invalid:text-destructive */\r\n[mono-select][mono-validation-state=\"invalid\"] > [mono-label] {\r\n  color: var(--_mono-select-invalid);\r\n}\r\n\r\n[mono-select] [mono-required-mark] {\r\n  color: var(--_mono-select-danger);\r\n}\r\n\r\n/* =========================================\r\n   The trigger — the bordered box (a <button>, or a <div> holding the combobox input)\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) > button */\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button — h-9 gap-1.5\r\n   rounded-md border border-input bg-transparent py-2 ps-2.5 pe-2 text-sm shadow-xs\r\n   focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50\r\n   aria-invalid:… dark:hover:bg-input/50; mono: `--tw-ring-*` flattened to the\r\n   ring + shadow slots, the height is the control token (no block padding — the\r\n   token owns the height), the side edges read their own slot */\r\n[mono-select] > [mono-trigger] {\r\n  --_mono-select-bc: var(--_mono-select-border-color);\r\n  --_mono-select-side-bc: var(--mono-select-side-border-color, var(--_mono-select-side-border-color-preset, var(--_mono-select-bc)));\r\n  --_mono-select-ring: 0 0 #0000;\r\n\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: var(--_mono-select-gap);\r\n  width: 100%;\r\n  min-width: 0;\r\n  min-height: var(--_mono-select-height);\r\n  margin: 0;\r\n  padding-block: var(--mono-select-padding-y, 0);\r\n  padding-inline: var(--_mono-select-padding-start) var(--_mono-select-padding-end);\r\n  outline-style: none;\r\n  border: var(--mono-border-width) solid var(--_mono-select-bc);\r\n  border-top-color: var(--_mono-select-side-bc);\r\n  border-inline-color: var(--_mono-select-side-bc);\r\n  border-radius: var(--_mono-select-radius);\r\n  background: var(--_mono-select-bg);\r\n  color: var(--_mono-select-text);\r\n  box-shadow: var(--_mono-select-ring), var(--_mono-select-shadow);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-select-font-size);\r\n  line-height: var(--_mono-select-line-height);\r\n  font-weight: var(--mono-font-weight-normal);\r\n  white-space: nowrap;\r\n  text-align: start;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  transition-property: color, box-shadow, border-color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n\r\n  &:focus,\r\n  &:focus-visible,\r\n  &:focus-within {\r\n    outline: none !important;\r\n  }\r\n\r\n  /* focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 —\r\n     the combobox form is a <div> whose <input> takes focus, hence :focus-within */\r\n  &:focus-visible,\r\n  &:focus-within {\r\n    --_mono-select-bc: var(--_mono-select-ring-color);\r\n    --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) color-mix(in oklab, var(--_mono-select-ring-color) var(--_mono-select-ring-alpha), transparent);\r\n  }\r\n\r\n  & svg,\r\n  & [mono-icon] {\r\n    pointer-events: none;\r\n    flex-shrink: 0;\r\n  }\r\n}\r\n\r\n/* dark:hover:bg-input/50 (light: none) — carried by --mono-mode-field-hover-bg */\r\n@media (hover: hover) {\r\n  [mono-select]:not([mono-disabled]):not([mono-readonly]):not([mono-ds-loading]) > [mono-trigger]:hover {\r\n    background: var(--_mono-select-hover-bg);\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button — aria-invalid:border-destructive\r\n   aria-invalid:ring-3 aria-invalid:ring-destructive/20 (dark: /50, /40 via the mode tokens) */\r\n[mono-select][mono-validation-state=\"invalid\"] > [mono-trigger],\r\n[mono-select] > [mono-trigger][aria-invalid=\"true\"] {\r\n  --_mono-select-bc: var(--mono-mode-invalid-border);\r\n  --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* EXTENSION — valid / warning are the invalid pattern in the role's colour */\r\n[mono-select][mono-validation-state=\"valid\"] > [mono-trigger] {\r\n  --_mono-select-bc: color-mix(in oklab, var(--_mono-select-valid) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) color-mix(in oklab, var(--_mono-select-valid) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n[mono-select][mono-validation-state=\"warning\"] > [mono-trigger] {\r\n  --_mono-select-bc: color-mix(in oklab, var(--_mono-select-warning) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) color-mix(in oklab, var(--_mono-select-warning) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n/* EXTENSION — the bound dataSource failed: the invalid outline ONLY. Label,\r\n   message and validation state stay as they are; it is not a validation error. */\r\n[mono-select][mono-ds-error] > [mono-trigger] {\r\n  --_mono-select-bc: var(--mono-select-ds-error-border, var(--mono-mode-invalid-border));\r\n  --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) var(--mono-select-ds-error-ring, var(--mono-mode-invalid-ring));\r\n}\r\n\r\n[mono-select] [mono-value][mono-ds-error-text] {\r\n  color: var(--mono-select-ds-error-text, var(--_mono-select-invalid));\r\n}\r\n\r\n/* EXTENSION — the first load (or a retry) is in flight: read-only, no hover */\r\n[mono-select][mono-ds-loading] > [mono-trigger] {\r\n  cursor: progress;\r\n}\r\n\r\n/* EXTENSION — readonly: focusable, on a muted surface, no gestures */\r\n[mono-select][mono-readonly] > [mono-trigger] {\r\n  background: var(--mono-select-readonly-bg, var(--muted));\r\n  cursor: default;\r\n}\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) > button — disabled:\r\n   pointer-events-none cursor-not-allowed opacity-50 */\r\n[mono-select][mono-disabled] > [mono-trigger],\r\n[mono-select] > [mono-trigger]:disabled,\r\n/* a raw readonly select can only disable its native <select>; the root attribute wins */\r\n[mono-select]:not([mono-readonly]) > [mono-trigger]:has(> [mono-native]:disabled) {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n  background: var(--mono-select-disabled-bg, var(--_mono-select-bg));\r\n}\r\n\r\n/* =========================================\r\n   Value / search field / native <select>\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) > button > span —\r\n   flex flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-start */\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button > span — gap-1.5 */\r\n[mono-select] [mono-value] {\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-select-gap);\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  text-align: start;\r\n  color: var(--_mono-select-text);\r\n}\r\n\r\n[mono-select] [mono-value] > span {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n[mono-select] [mono-value][mono-placeholder] {\r\n  color: var(--_mono-select-placeholder);\r\n}\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox > input[role='combobox'] — the\r\n   search input lives INSIDE our trigger box, so it is borderless like\r\n   .input-group > input and the box around it carries the chrome */\r\n[mono-select] [mono-search-field],\r\n[mono-select] [mono-native] {\r\n  flex: 1 1 auto;\r\n  width: 100%;\r\n  min-width: 0;\r\n  align-self: stretch;\r\n  appearance: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 0;\r\n  outline: none;\r\n  background: transparent;\r\n  box-shadow: none;\r\n  color: var(--_mono-select-text);\r\n  font: inherit;\r\n  line-height: var(--_mono-select-line-height);\r\n\r\n  &:focus,\r\n  &:focus-visible {\r\n    outline: none !important;\r\n  }\r\n\r\n  &::placeholder {\r\n    color: var(--_mono-select-placeholder);\r\n  }\r\n\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n}\r\n\r\n[mono-select] [mono-search-field] {\r\n  cursor: text;\r\n}\r\n\r\n[mono-select] [mono-native] {\r\n  cursor: inherit;\r\n}\r\n\r\n[mono-select] [mono-native] option {\r\n  color: var(--_mono-select-text);\r\n  background: var(--popover);\r\n}\r\n\r\n/* =========================================\r\n   Actions — the chevron and the clear button\r\n   ========================================= */\r\n\r\n[mono-select] [mono-actions] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--mono-spacing);\r\n  flex-shrink: 0;\r\n  line-height: 1;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button > svg — size-4\r\n   text-muted-foreground; mono: the glyph sits in a square action box so the\r\n   chevron and the clear button occupy the same gutter */\r\n/* basecoat@1.0.2 components/combobox.css .combobox [data-clear] — size-6 border-0\r\n   bg-transparent p-0 text-current */\r\n[mono-select] [mono-arrow],\r\n[mono-select] [mono-clear],\r\n[mono-select] [mono-ds-retry],\r\n[mono-select] [mono-ds-spinner] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  width: var(--_mono-select-action);\r\n  height: var(--_mono-select-action);\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--mono-select-clear-radius, calc(var(--radius) - 5px));\r\n  background: transparent;\r\n  color: var(--_mono-select-muted);\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  transition-property: color, background-color, transform;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n[mono-select] :is([mono-arrow], [mono-clear], [mono-ds-retry], [mono-ds-spinner]) > :is(svg, .mono-icon, [mono-icon]) {\r\n  display: block;\r\n  width: var(--_mono-select-icon);\r\n  height: var(--_mono-select-icon);\r\n  pointer-events: none;\r\n}\r\n\r\n/* EXTENSION — the chevron turns while the panel is open */\r\n[mono-select][mono-open] [mono-arrow] > :is(svg, .mono-icon, [mono-icon]) {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted\r\n   hover:text-foreground (dark:hover:bg-muted/50 via --mono-mode-ghost-hover) */\r\n@media (hover: hover) {\r\n  [mono-select] :is([mono-arrow], [mono-clear], [mono-ds-retry]):hover {\r\n    background: var(--mono-mode-ghost-hover);\r\n    color: var(--_mono-select-text);\r\n  }\r\n}\r\n\r\n/* EXTENSION — dataSource state glyphs: the busy arc spins, the ↻ wears the\r\n   error colour so it reads as the way out of the red field */\r\n[mono-select] [mono-ds-spinner] {\r\n  cursor: progress;\r\n}\r\n\r\n[mono-select] [mono-ds-spinner] > svg {\r\n  animation: mono-select-spin 0.7s linear infinite;\r\n}\r\n\r\n[mono-select] [mono-ds-retry] {\r\n  color: var(--mono-select-ds-error-text, var(--_mono-select-invalid));\r\n}\r\n\r\n@keyframes mono-select-spin {\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-select] [mono-ds-spinner] > svg {\r\n    animation-duration: 2.4s;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   The panel\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] — absolute z-50 min-w-full\r\n   overflow-x-hidden; mono: `display: none` while closed (the contents are only\r\n   rendered while open), `--mono-popup-z` from the shared popup stack and\r\n   `--mono-popup-avail-h` from the portal controller cap the whole panel */\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [data-popover] — bg-popover\r\n   text-popover-foreground rounded-md shadow-md ring-1 ring-foreground/10; the\r\n   `p-1` moves to the scrolling body (the combobox layout), so the scrollbar\r\n   never paints over the padding */\r\n[mono-select] > [mono-dropdown] {\r\n  position: absolute;\r\n  /* `top: auto` = the static position: the panel follows the trigger in the DOM,\r\n     so in block flow it lands right under it (the popup controller overrides\r\n     this inline for the element; hand-written markup relies on it). */\r\n  top: auto;\r\n  /* the 6px offset as a transform: the controller writes `transform: none` inline\r\n     with its fixed position, so only the hand-written panel is pushed down */\r\n  transform: translateY(calc(var(--mono-spacing) * 1.5));\r\n  /* Both edges pinned, so the panel matches the field by default. An inline\r\n     `width` from `:dropdown.prop=\"{ width }\"` is then the over-constrained case,\r\n     which CSS resolves by ignoring `right` — the panel keeps this left edge and\r\n     takes the given width. */\r\n  left: 0;\r\n  right: 0;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  display: none;\r\n  /* Basecoat's `min-w-[max(100%,9rem)]` is relative to the .select box; a portaled\r\n     panel is position: fixed, where 100% would be the viewport — the controller\r\n     writes the anchor's width inline instead, so only the floor stays. */\r\n  min-width: var(--mono-select-dropdown-min-width, 9rem);\r\n  max-height: var(--mono-popup-avail-h, none);\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n  border-radius: var(--mono-select-dropdown-radius, var(--mono-radius-md));\r\n  background: var(--mono-select-dropdown-bg, var(--popover));\r\n  color: var(--mono-select-dropdown-color, var(--popover-foreground));\r\n  box-shadow: var(--mono-select-dropdown-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)), var(--mono-select-dropdown-shadow, var(--mono-shadow-md));\r\n  font-size: var(--mono-select-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-option-line-height, var(--mono-text-sm--lh));\r\n}\r\n\r\n[mono-select][mono-open] > [mono-dropdown] {\r\n  /* A flex column (not `block`) so the body can shrink past its own height when\r\n     the panel is clamped above. */\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox [role='listbox'] — max-h-[min(18rem,\r\n   var(--available-height,18rem))] scroll-py-1 overflow-y-auto p-1 */\r\n[mono-select] [mono-dropdown-body] {\r\n  flex: 1 1 auto;\r\n  min-height: 0;\r\n  max-height: 18rem;\r\n  padding: var(--mono-select-dropdown-padding, var(--mono-spacing));\r\n  overflow: auto;\r\n  overscroll-behavior: contain;\r\n  scroll-padding-block: var(--mono-select-dropdown-padding, var(--mono-spacing));\r\n  outline-style: none;\r\n}\r\n\r\n/* =========================================\r\n   Options\r\n   -----------------------------------------\r\n   Each rule also lists the stamped twin of a row rendered through `slot=\"list\"`\r\n   (`[data-mono-type='row']`, `[data-mono-active]`, `[data-mono-selected]`), so\r\n   the two can never drift: what you render in the slot IS an option. `:where()`\r\n   wraps only the CONTAINER, keeping the twin at attribute weight.\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) [role='option'] — relative\r\n   flex w-full cursor-default items-center overflow-hidden text-ellipsis whitespace-\r\n   nowrap outline-none select-none; disabled: pointer-events-none opacity-50 */\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='option'] — gap-2\r\n   rounded-sm py-1.5 ps-2 pe-8 text-sm, svg size-4 */\r\n[mono-select] [mono-item],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row'] {\r\n  position: relative;\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  gap: var(--mono-select-option-gap, calc(var(--mono-spacing) * 2));\r\n  margin: 0;\r\n  padding-block: var(--mono-select-option-padding-y, calc(var(--mono-spacing) * 1.5));\r\n  padding-inline: var(--mono-select-option-padding-x, calc(var(--mono-spacing) * 2)) var(--mono-select-option-padding-end, calc(var(--mono-spacing) * 8));\r\n  min-height: var(--mono-select-option-min-height, 0);\r\n  border: 0;\r\n  border-radius: var(--mono-select-option-radius, var(--mono-radius-sm));\r\n  /* longhands, so the selected row's check (a background-image) survives the\r\n     active / hover background */\r\n  background-color: transparent;\r\n  background-image: none;\r\n  color: var(--_mono-select-text);\r\n  font-family: inherit;\r\n  font-size: var(--mono-select-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-option-line-height, var(--mono-text-sm--lh));\r\n  font-weight: var(--mono-select-option-font-weight, var(--mono-font-weight-normal));\r\n  text-align: start;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  outline-style: none;\r\n  user-select: none;\r\n  cursor: default;\r\n  transition-property: color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration-fast);\r\n}\r\n\r\n/* EXTENSION: a hair of air between rows. Upstream stacks its options flush, so an\r\n   active row directly under the selected one read as ONE tall highlight; a 2px\r\n   seam keeps the two rounded-sm washes apart. `--mono-select-option-spacing`. */\r\n[mono-select] [mono-item] + [mono-item],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row'] + [data-mono-type='row'] {\r\n  margin-top: var(--mono-select-option-spacing, 2px);\r\n}\r\n\r\n[mono-select] [mono-item] svg:not([class*='size-']),\r\n[mono-select] [mono-item] .mono-icon {\r\n  width: var(--_mono-select-icon);\r\n  height: var(--_mono-select-icon);\r\n  flex-shrink: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='option'].active, .select:not(select) [role='option']:focus-visible\r\n   — bg-muted text-foreground. The keyboard cursor and the pointer share one look. */\r\n[mono-select] [mono-item][mono-active]:not([mono-disabled]):not(:disabled),\r\n[mono-select] [mono-item]:focus-visible,\r\n[mono-select] :where([mono-list-slot]) [data-mono-active] {\r\n  background-color: var(--mono-select-option-active-bg, var(--muted));\r\n  color: var(--mono-select-option-active-color, var(--_mono-select-text));\r\n}\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select):not([data-select-initialized]) [role='option']:not([aria-disabled='true']):not(:disabled):hover, .select:not(select) [role='option'].active\r\n   — the pointer highlight is NOT behind (hover: hover) upstream */\r\n[mono-select] [mono-item]:hover:not([mono-disabled]):not(:disabled),\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row']:hover {\r\n  background-color: var(--mono-select-option-active-bg, var(--muted));\r\n  color: var(--mono-select-option-active-color, var(--_mono-select-text));\r\n}\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) [role='option'][aria-selected='true']\r\n   — the --check-icon at the end (bg-size .875rem, center right .5rem) */\r\n[mono-select] [mono-item][mono-selected],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row'][data-mono-selected] {\r\n  background-image: var(--mono-select-check-icon, var(--check-icon));\r\n  background-size: var(--mono-select-check-size, 0.875rem);\r\n  background-position: center right calc(var(--mono-spacing) * 2);\r\n  background-repeat: no-repeat;\r\n  font-weight: var(--mono-select-option-selected-font-weight, var(--mono-select-option-font-weight, var(--mono-font-weight-normal)));\r\n}\r\n\r\n[mono-select] [mono-item][mono-selected]:dir(rtl),\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row'][data-mono-selected]:dir(rtl) {\r\n  background-position: center left calc(var(--mono-spacing) * 2);\r\n}\r\n\r\n[mono-select] [mono-item][mono-disabled],\r\n[mono-select] [mono-item]:disabled {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before\r\n   — py-6 text-center text-sm (the \"No results found\" row) */\r\n[mono-select] [mono-empty-row] {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding-block: calc(var(--mono-spacing) * 6);\r\n  padding-inline: calc(var(--mono-spacing) * 3);\r\n  font-size: var(--mono-select-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-option-line-height, var(--mono-text-sm--lh));\r\n  color: var(--_mono-select-muted);\r\n  text-align: center;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  cursor: default;\r\n  user-select: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='heading'] — px-2 py-1.5\r\n   text-xs text-muted-foreground; EXTENSION: one indent step per nesting level */\r\n[mono-select] [mono-group],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='group'] {\r\n  --_ms-group-level: 0;\r\n  padding-block: var(--mono-select-group-padding-y, calc(var(--mono-spacing) * 1.5));\r\n  padding-inline: var(--mono-select-group-padding-x, calc(var(--mono-spacing) * 2));\r\n  padding-inline-start: calc(var(--mono-select-group-padding-x, calc(var(--mono-spacing) * 2)) + var(--_ms-group-level) * calc(var(--mono-spacing) * 2));\r\n  font-size: var(--mono-select-group-font-size, var(--mono-text-xs));\r\n  line-height: var(--mono-select-group-line-height, var(--mono-text-xs--lh));\r\n  font-weight: var(--mono-select-group-font-weight, var(--mono-font-weight-normal));\r\n  text-transform: var(--mono-select-group-text-transform, none);\r\n  letter-spacing: var(--mono-select-group-letter-spacing, normal);\r\n  color: var(--_mono-select-muted);\r\n  cursor: default;\r\n  user-select: none;\r\n}\r\n\r\n[mono-select] [mono-group][mono-level='1'],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='group'][data-mono-level='1'] { --_ms-group-level: 1; }\r\n[mono-select] [mono-group][mono-level='2'],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='group'][data-mono-level='2'] { --_ms-group-level: 2; }\r\n[mono-select] [mono-group][mono-level='3'],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='group'][data-mono-level='3'] { --_ms-group-level: 3; }\r\n\r\n/* group-sticky: pin headers while their rows scroll; nested levels stack on the\r\n   panel's own surface so options scroll cleanly underneath. */\r\n[mono-select] [mono-group][mono-sticky] {\r\n  position: sticky;\r\n  top: calc(var(--_ms-group-level) * 1.5rem);\r\n  z-index: calc(5 - var(--_ms-group-level));\r\n  background: var(--mono-select-dropdown-bg, var(--popover));\r\n}\r\n\r\n/* EXTENSION — the load-more affordance: an option-shaped ghost button */\r\n[mono-select] [mono-load-more] {\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: var(--mono-select-option-gap, calc(var(--mono-spacing) * 2));\r\n  margin: 0;\r\n  padding-block: var(--mono-select-option-padding-y, calc(var(--mono-spacing) * 1.5));\r\n  padding-inline: var(--mono-select-option-padding-x, calc(var(--mono-spacing) * 2));\r\n  border: 0;\r\n  border-radius: var(--mono-select-option-radius, var(--mono-radius-sm));\r\n  background: transparent;\r\n  color: var(--_mono-select-muted);\r\n  font-family: inherit;\r\n  font-size: var(--mono-select-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-option-line-height, var(--mono-text-sm--lh));\r\n  font-weight: var(--mono-font-weight-medium);\r\n  cursor: pointer;\r\n  transition-property: color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration-fast);\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-select] [mono-load-more]:hover:not([mono-loading]) {\r\n    background-color: var(--mono-select-option-active-bg, var(--muted));\r\n    color: var(--_mono-select-text);\r\n  }\r\n}\r\n\r\n[mono-select] [mono-load-more][mono-loading] {\r\n  cursor: default;\r\n  opacity: 0.7;\r\n}\r\n\r\n/* Consumer-rendered option rows (slot=\"list\"). `display: contents` so mono's own\r\n   placement wrapper generates no box: the rows the consumer writes lay out as if\r\n   they were direct children of the panel. */\r\n[mono-select] [mono-list-slot] {\r\n  display: contents;\r\n}\r\n\r\n/* =========================================\r\n   Message — helper / validation text under the field\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p\r\n   — text-sm text-muted-foreground leading-normal font-normal */\r\n[mono-select] > [mono-message-wrap] {\r\n  display: block;\r\n  margin-top: var(--_mono-select-gap-y);\r\n}\r\n\r\n[mono-select] > [mono-message-wrap]:not(:has([mono-message]:not([mono-empty]))) {\r\n  display: none;\r\n}\r\n\r\n[mono-select] [mono-message] {\r\n  font-size: var(--mono-select-message-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-message-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-font-weight-normal);\r\n  text-align: start;\r\n  color: var(--_mono-select-muted);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field [role=\"alert\"] — text-destructive text-sm */\r\n[mono-select] [mono-message=\"invalid\"] {\r\n  color: var(--_mono-select-invalid);\r\n}\r\n\r\n[mono-select] [mono-message=\"valid\"] {\r\n  color: var(--_mono-select-valid);\r\n}\r\n\r\n[mono-select] [mono-message=\"warning\"] {\r\n  color: var(--_mono-select-warning);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-select] > [mono-trigger],\r\n  [mono-select] [mono-arrow],\r\n  [mono-select] [mono-clear],\r\n  [mono-select] [mono-item] {\r\n    transition: none;\r\n  }\r\n}\r\n";
+
 //#endregion
 //#region src/components/select/mono-select.ts
-var MonoSelect = class MonoSelect extends MonoSelectCore(LitElement) {
+let MonoSelect = class MonoSelect extends MonoSelectCore(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._slotsCaptured = false;
@@ -2041,7 +2045,7 @@ var MonoSelect = class MonoSelect extends MonoSelectCore(LitElement) {
 		this._slotList = null;
 	}
 	static {
-		this.styles = [unsafeCSS(select_default)];
+		this.styles = [unsafeCSS(select_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -2156,6 +2160,7 @@ var MonoSelect = class MonoSelect extends MonoSelectCore(LitElement) {
 	}
 };
 MonoSelect = __decorate([customElement("mono-select")], MonoSelect);
+
 //#endregion
 //#region src/components/select/select-utils.ts
 function validateSelectProps(props) {
@@ -2196,5 +2201,6 @@ function validateSelectProps(props) {
 	if (props.validationState && !validStates.includes(props.validationState)) return false;
 	return true;
 }
+
 //#endregion
-export { MonoSelect, validateSelectProps };
+export { MonoSelect, validateSelectProps };

package/dist/ui/shadow/accordion.js

@@ -1,8 +1,9 @@
-import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-RB5Tz5nl.js";
-import { t as dispatchMonoEvent } from "../../mono-event-Bi1qP9uN.js";
+import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { ref } from "lit/directives/ref.js";
 import { property, query, state } from "lit/decorators.js";
+
 //#region src/components/accordion/accordion-core.ts
 /**
 * `MonoAccordionCore` — all render-mode-agnostic logic for `mono-accordion`:
@@ -15,7 +16,7 @@ import { property, query, state } from "lit/decorators.js";
 * SSR-safe: no `document`/`window` access. `_headEl` (`@query`) is lazy and
 * `focus/blur` only run client-side.
 */
-var MonoAccordionCore = (superClass) => {
+const MonoAccordionCore = (superClass) => {
 	class MonoAccordionCoreClass extends superClass {
 		constructor(...args) {
 			super(...args);
@@ -259,25 +260,27 @@ var MonoAccordionCore = (superClass) => {
 	__decorate([query(".mono-accordion-head")], MonoAccordionCoreClass.prototype, "_headEl", void 0);
 	return MonoAccordionCoreClass;
 };
+
 //#endregion
-//#region src/components/accordion/accordion.css?raw
-var accordion_default = "/* @unocss-include */\r\n\r\n/* =========================================================================\r\n   mono-accordion — a port of Basecoat's `.accordion`\r\n   (basecoat-css@1.0.2, vega style).\r\n\r\n   Styled by ATTRIBUTE, like Basecoat — and the attributes mirror the element's\r\n   props one for one, so hand-written markup reads like the Lit / Vue tag:\r\n\r\n     <mono-accordion size=\"lg\" color=\"success\" model-value>\r\n     <div mono-accordion mono-size=\"lg\" mono-color=\"success\" mono-open>\r\n       <button mono-head type=\"button\" aria-expanded=\"true\">\r\n         <span mono-glyph>…</span>\r\n         <span mono-heading>\r\n           <span mono-title>Question</span>\r\n           <span mono-subtitle>Sub-text</span>\r\n         </span>\r\n         <span mono-actions>…</span>\r\n         <span mono-arrow><svg …></svg></span>\r\n       </button>\r\n       <div mono-body role=\"region\"><div>…</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). The element writes them on its root — the\r\n   host in the light build, an inner root `<div>` in the shadow one — plus the\r\n   states `mono-open` and `mono-disabled`. The old classes\r\n   (`.mono-accordion.md.primary.open`) are still emitted as inert hooks until\r\n   2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-accordion-group]        ≡ .accordion (flex w-full flex-col; maia /\r\n                                     mira / luma / rhea add the frame, which is\r\n                                     the `-group-*` knobs below)\r\n     [mono-accordion]              ≡ .accordion > details (not-last:border-b, and\r\n                                     `open:bg-muted/50` on four flavors)\r\n                                     — EXTENSION when standalone: upstream has no\r\n                                     accordion outside a group, so on its own it\r\n                                     keeps this component's frame (border, radius,\r\n                                     shadow-xs). Inside a group the frame moves to\r\n                                     the group and the item flattens to a divider.\r\n     [mono-head]                   ≡ > summary (relative flex w-full items-start\r\n                                     justify-between border border-transparent\r\n                                     cursor-pointer outline-none, rounded-md py-4\r\n                                     text-left text-sm font-medium hover:underline,\r\n                                     focus-visible:ring-3 ring-ring/50 border-ring)\r\n                                     — DEVIATION: a real <button>, so the row is a\r\n                                     button for a11y rather than a <summary> whose\r\n                                     open state the element would have to fight\r\n     [mono-glyph]                  ≡ EXTENSION (the leading icon chip)\r\n     [mono-heading] > [mono-title] ≡ the summary's own text\r\n     [mono-subtitle]               ≡ EXTENSION (a second line under the title;\r\n                                     `[mono-description]` is its old name, and the\r\n                                     element still renders both)\r\n     [mono-actions]                ≡ EXTENSION (trailing controls in the row)\r\n     [mono-arrow]                  ≡ summary > svg:last-child (text-muted-foreground\r\n                                     ms-auto size-4, rotate-180 while open)\r\n     [mono-body]                   ≡ details > :not(summary) (overflow-hidden,\r\n                                     pt-0 pb-4 text-sm) — plus the animated\r\n                                     collapse, which upstream's <details> gets free\r\n     [mono-size]/[mono-color]      ≡ EXTENSION (upstream ships one size, no colour)\r\n     [mono-disabled]               ≡ details[aria-disabled] > summary\r\n                                     (pointer-events-none opacity-50)\r\n\r\n   PART NAMES ARE PATH-SCOPED. `[mono-title]`, `[mono-body]`, `[mono-actions]`\r\n   and `[mono-icon]` are also card's, dropdown's and button's part names, and an\r\n   accordion BODY is a place consumers put cards and buttons. Every rule here is\r\n   therefore written as an explicit child path from the root — `:where([mono-accordion]\r\n   > [mono-head] > [mono-heading]) > [mono-title]` — so a nested component's parts\r\n   are never reached. The `:where()` keeps that path at (0,1,0), the same weight a\r\n   one-attribute rule would have, so a `cssClass` utility still wins by source order.\r\n\r\n   FLAVORS set `--mono-accordion-{radius,shadow,pad-x-<size>,pad-y-<size>,\r\n   title-font-<size>,body-font-<size>,open-bg,group-radius,group-border-width,\r\n   arrow-size,ring-width}`; every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"accordion\"` prints the matrix).\r\n   ========================================================================= */\r\n\r\nmono-accordion {\r\n  display: block;\r\n}\r\n\r\n/* =========================================\r\n   Root — the item\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .accordion > details — not-last:border-b */\r\n[mono-accordion] {\r\n  /* ── the six roles, each a public knob over a Basecoat token ───────────── */\r\n  --_mono-accordion-primary: var(--mono-accordion-primary, var(--primary));\r\n  --_mono-accordion-secondary: var(--mono-accordion-secondary, var(--secondary-foreground));\r\n  --_mono-accordion-success: var(--mono-accordion-success, var(--success));\r\n  --_mono-accordion-danger: var(--mono-accordion-danger, var(--destructive));\r\n  --_mono-accordion-warning: var(--mono-accordion-warning, var(--warning));\r\n  --_mono-accordion-info: var(--mono-accordion-info, var(--info));\r\n  --_mono-accordion-teal: var(--mono-accordion-teal, var(--teal));\r\n  --_mono-accordion-purple: var(--mono-accordion-purple, var(--purple));\r\n  --_mono-accordion-neutral: var(--mono-accordion-neutral, var(--neutral));\r\n  --_mono-accordion-dark: var(--mono-accordion-dark, var(--dark));\r\n  /* the colour in play — `primary` unless a [mono-color] rule re-points it */\r\n  --_mono-accordion-accent: var(--mono-accordion-accent, var(--_mono-accordion-accent-preset, var(--_mono-accordion-primary)));\r\n\r\n  /* ── surfaces ──────────────────────────────────────────────────────────── */\r\n  --_mono-accordion-bg: var(--mono-accordion-bg, var(--mono-accordion-surface, var(--card)));\r\n  --_mono-accordion-text: var(--mono-accordion-text, var(--card-foreground));\r\n  --_mono-accordion-border: var(--mono-accordion-border, var(--border));\r\n  --_mono-accordion-shadow: var(--mono-accordion-shadow, var(--mono-shadow-xs));\r\n  /* `open:bg-muted/50` — vega does NOT tint an open item; maia, mira, luma and\r\n     rhea do, and set this knob. `--mono-accordion-head-bg` is the pre-port name,\r\n     honoured until 2.0: it tinted the open HEAD, where this tints the open item\r\n     (head and body alike), which is what upstream's `open:` variant does. */\r\n  /* An OPAQUE fill, not an overlay: it replaces the item's own surface while\r\n     open, so a flavor's `bg-muted/50` is written as that mix OVER `--card`.\r\n     Defaulting to the item's surface is what makes vega's \"no tint\" a no-op. */\r\n  --_mono-accordion-open-bg: var(--mono-accordion-open-bg, var(--mono-accordion-head-bg, var(--_mono-accordion-bg)));\r\n  --_mono-accordion-open-border-color: var(--mono-accordion-open-border-color,\r\n    color-mix(in oklab, var(--_mono-accordion-accent) 32%, var(--_mono-accordion-border)));\r\n  --_mono-accordion-open-shadow: var(--mono-accordion-open-shadow,\r\n    0 3px 14px color-mix(in oklab, var(--_mono-accordion-accent) 9%, transparent));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css .accordion > details > summary — py-4 text-sm\r\n     — DEVIATION: the inline padding is ours. Upstream's summary has none because\r\n     its group is edge-to-edge in the page; this item can stand alone inside its\r\n     own frame, where text flush against the border reads as a bug. maia / luma /\r\n     rhea say `p-4`, which is exactly the value used here. */\r\n  --_mono-accordion-pad-x: var(--mono-accordion-pad-x, var(--_mono-accordion-pad-x-preset, var(--mono-accordion-pad-x-md, calc(var(--mono-spacing) * 4))));\r\n  --_mono-accordion-pad-y: var(--mono-accordion-pad-y, var(--_mono-accordion-pad-y-preset, var(--mono-accordion-pad-y-md, calc(var(--mono-spacing) * 4))));\r\n  --_mono-accordion-radius: var(--mono-accordion-radius, var(--_mono-accordion-radius-preset, var(--mono-accordion-radius-md, var(--mono-radius-md))));\r\n  --_mono-accordion-gap: var(--mono-accordion-gap, var(--_mono-accordion-gap-preset, calc(var(--mono-spacing) * 3)));\r\n\r\n  /* ── type ──────────────────────────────────────────────────────────────── */\r\n  --_mono-accordion-title-font: var(--mono-accordion-title-font, var(--_mono-accordion-title-font-preset, var(--mono-accordion-title-font-md, var(--mono-text-sm))));\r\n  --_mono-accordion-title-line-height: var(--mono-accordion-title-line-height, var(--_mono-accordion-title-line-height-preset, var(--mono-text-sm--lh)));\r\n  --_mono-accordion-title-weight: var(--mono-accordion-title-weight, var(--mono-font-weight-medium));\r\n  /* `hover:underline` — the whole row is the control, so the hover cue is on its\r\n     label. A flavor (or a consumer) sets `none` to drop it. */\r\n  --_mono-accordion-title-hover-decoration: var(--mono-accordion-title-hover-decoration, underline);\r\n  --_mono-accordion-description-font: var(--mono-accordion-description-font, var(--_mono-accordion-description-font-preset, var(--mono-text-xs)));\r\n  --_mono-accordion-description-color: var(--mono-accordion-description-color, var(--muted-foreground));\r\n  --_mono-accordion-body-font: var(--mono-accordion-body-font, var(--_mono-accordion-body-font-preset, var(--mono-accordion-body-font-md, var(--mono-text-sm))));\r\n  --_mono-accordion-body-line-height: var(--mono-accordion-body-line-height, var(--_mono-accordion-body-line-height-preset, var(--mono-text-sm--lh)));\r\n  --_mono-accordion-body-color: var(--mono-accordion-body-color, inherit);\r\n\r\n  /* ── the chevron — `text-muted-foreground size-4` ──────────────────────── */\r\n  --_mono-accordion-arrow-size: var(--mono-accordion-arrow-size, var(--_mono-accordion-arrow-size-preset, calc(var(--mono-spacing) * 4)));\r\n  --_mono-accordion-arrow-color: var(--mono-accordion-arrow-color, var(--muted-foreground));\r\n  /* EXTENSION: the role reads the open state at a glance. Set it to\r\n     `--muted-foreground` for upstream's single-colour chevron. */\r\n  --_mono-accordion-arrow-open-color: var(--mono-accordion-arrow-open-color, var(--_mono-accordion-accent));\r\n\r\n  /* ── the leading chip (EXTENSION) ──────────────────────────────────────── */\r\n  --_mono-accordion-glyph-size: var(--mono-accordion-glyph-size, var(--_mono-accordion-glyph-size-preset, calc(var(--mono-spacing) * 7)));\r\n  --_mono-accordion-glyph-radius: var(--mono-accordion-glyph-radius, var(--_mono-accordion-glyph-radius-preset, var(--mono-radius-sm)));\r\n  --_mono-accordion-glyph-bg: var(--mono-accordion-glyph-bg, color-mix(in oklab, var(--_mono-accordion-accent) 14%, transparent));\r\n  --_mono-accordion-glyph-color: var(--mono-accordion-glyph-color, var(--_mono-accordion-accent));\r\n\r\n  /* ── focus — `focus-visible:ring-3 ring-ring/50 border-ring` ───────────── */\r\n  --_mono-accordion-ring-color: var(--mono-accordion-ring-color, var(--_mono-accordion-accent));\r\n\r\n  /* The head's hover fill. Upstream has none — it underlines the label instead —\r\n     so the tint is 0% on vega. A flavor sets the ALPHA (`-head-hover-tint`) and\r\n     the wash is built HERE: a flavor writing the colour itself would have to\r\n     reference `--_mono-accordion-accent`, which is declared on this element, and\r\n     a `:root` declaration that references it is invalid at computed-value time. */\r\n  --_mono-accordion-head-hover-bg: var(--mono-accordion-head-hover-bg,\r\n    color-mix(in oklab, var(--_mono-accordion-accent) var(--mono-accordion-head-hover-tint, 0%), transparent));\r\n  --_mono-accordion-ring-width: var(--mono-accordion-ring-width, var(--mono-ring-width));\r\n  /* A slot, so a state can neutralise the resting shadow without `box-shadow: none`. */\r\n  --_mono-accordion-ring: 0 0 #0000;\r\n\r\n  /* Open/close animation duration, shared by the body collapse and the chevron so\r\n     `--mono-accordion-duration: 0s` means a fully instant toggle.\r\n\r\n     This is THE lever for a slow open/close. `grid-template-rows: 0fr → 1fr` is the\r\n     only animated LAYOUT property in the library, and it re-lays-out the whole slotted\r\n     subtree on every frame of the transition, so its cost scales with what is inside\r\n     the body — and, because the panel's own height changes, with whatever follows it\r\n     in the document too. Measured with ~320-node bodies (Chromium, median of 3), one\r\n     open+close cycle: 24.8ms animated vs 3.6ms at `0s` — the animation is ~85% of the\r\n     toggle's cost. Set this to `0s` on accordions whose bodies (or whose pages) are\r\n     heavy.\r\n\r\n     THREE approaches that look like fixes and are NOT. All were built and measured\r\n     (Chromium, LayoutDuration + RecalcStyleDuration, min of 9 toggles, two scenarios:\r\n     40 panels with ~320-node bodies, and one small panel above a 2000-row sticky\r\n     table). Recorded so nobody spends the afternoon on them again:\r\n\r\n       1. Pin the track to a measured PIXEL height for the transition, so the `fr`\r\n          never has to be resolved against content. Landed inside the noise across\r\n          three runs (+11%, -2%, -17%) and cost two extra forced layouts per toggle to\r\n          measure and release. The per-frame cost is NOT the `fr` resolution — it is\r\n          that the row's block size changes at all, which re-lays-out the grid item\r\n          however the target size was expressed.\r\n       2. Also give the inner region a definite `height`, so its own constraint space\r\n          stops changing and its subtree layout can be cached. No effect either.\r\n       3. Don't animate a layout property at all: snap the box to its final size and\r\n          slide the content in on `transform`/`opacity`. A quick CSS prototype looked\r\n          like a 50% win, but only because it had no `content-visibility` transition\r\n          and so dropped the subtree instantly on close — the close animation was\r\n          simply invisible. Made to actually work, it measured 14.6/18.3ms vs\r\n          collapse's 20.0/18.4ms on heavy bodies (i.e. unreliable), and 17.4/19.6ms vs\r\n          12.6/12.8ms on the heavy-page scenario — reliably WORSE, because the\r\n          transform/opacity pass costs more than the box animation it replaced.\r\n\r\n     So `--mono-accordion-duration: 0s` really is the lever, and there is no cleverer\r\n     one. Measured against it: heavy bodies 7.0/10.8ms vs 20.0/18.4ms (~45-65% off);\r\n     heavy page 11.1/11.7ms vs 12.6/12.8ms (~10% off — on a page like that the\r\n     accordion is nearly irrelevant and the page's own weight is the cost). */\r\n  --_mono-accordion-duration: var(--mono-accordion-duration, var(--mono-duration));\r\n\r\n  display: block;\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-accordion-text);\r\n\r\n  /* EXTENSION — the standalone frame. Inside a group this is flattened below and\r\n     the frame moves to the group, which is upstream's arrangement. */\r\n  border: var(--mono-border-width) solid var(--_mono-accordion-border);\r\n  border-radius: var(--_mono-accordion-radius);\r\n  background: var(--_mono-accordion-bg);\r\n  box-shadow: var(--_mono-accordion-shadow);\r\n  overflow: hidden;\r\n  transition:\r\n    border-color var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease),\r\n    background-color var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n[mono-accordion],\r\n:where([mono-accordion]) *,\r\n:where([mono-accordion]) *::before,\r\n:where([mono-accordion]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* The shadow build renders EVERY region up front (so DSD can project into them\r\n   server-side) and marks the ones with nothing in them; the light build renders\r\n   only what exists. Hiding them here is what keeps the two builds identical.\r\n\r\n   NOT wrapped in `:where()`, unlike the other parts: a region rule is two\r\n   attributes strong, so a zero-weight hide would tie and lose on source order. */\r\n[mono-accordion] :is(\r\n  [mono-glyph],\r\n  [mono-heading],\r\n  [mono-title],\r\n  [mono-subtitle],\r\n  [mono-description],\r\n  [mono-actions]\r\n)[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Group — `.accordion`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/accordion.css .accordion — flex w-full flex-col\r\n   The GROUP is consumer markup — the element renders one item, not the list — so\r\n   unlike every part below, its pre-port CLASS is public API and keeps working\r\n   beside the attribute until 2.0.\r\n   The frame knobs are inert on vega (0 width, no radius) and set by the four\r\n   flavors whose `.accordion` says `overflow-hidden rounded-2xl border`. */\r\n:is([mono-accordion-group], .mono-accordion-group) {\r\n  --_mono-accordion-group-gap: var(--mono-accordion-group-gap, 0px);\r\n  --_mono-accordion-group-radius: var(--mono-accordion-group-radius, 0px);\r\n  --_mono-accordion-group-border-width: var(--mono-accordion-group-border-width, 0px);\r\n  --_mono-accordion-group-border-color: var(--mono-accordion-group-border-color, var(--border));\r\n\r\n  display: flex;\r\n  width: 100%;\r\n  flex-direction: column;\r\n  gap: var(--_mono-accordion-group-gap);\r\n  box-sizing: border-box;\r\n  border: var(--_mono-accordion-group-border-width) solid var(--_mono-accordion-group-border-color);\r\n  border-radius: var(--_mono-accordion-group-radius);\r\n  overflow: hidden;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .accordion > details — not-last:border-b\r\n   In a group the ITEM stops being a card: the frame is the group's, and all an\r\n   item carries is the hairline to the next one.\r\n\r\n   TWO selectors for one rule, because the item is not always a child of the\r\n   group. Hand-written markup nests `[mono-accordion]` directly, so the `>`\r\n   path matches; the ELEMENT puts a custom-element host in between (light) or a\r\n   shadow boundary (shadow), which no selector crosses — so it detects the group\r\n   itself and writes `mono-grouped` / `mono-last` on its root. */\r\n:where([mono-accordion-group], .mono-accordion-group) > [mono-accordion],\r\n[mono-accordion][mono-grouped] {\r\n  border-width: 0;\r\n  border-radius: 0;\r\n  box-shadow: none;\r\n}\r\n\r\n/* The divider rides the group's own CHILD, whatever that is — the item itself in\r\n   hand-written markup, the custom-element host when the element renders it. That\r\n   is what makes `:last-child` reliable: the host is a child of the group in both\r\n   builds, where the ITEM is one only in raw markup, and an item that asked \"am I\r\n   last?\" itself would answer from however many siblings existed when it rendered. */\r\n:where([mono-accordion-group], .mono-accordion-group)\r\n  > :is([mono-accordion], mono-accordion, mono-shadow-accordion) {\r\n  border-bottom: var(--mono-border-width) solid var(--mono-accordion-border, var(--border));\r\n}\r\n\r\n:where([mono-accordion-group], .mono-accordion-group)\r\n  > :is([mono-accordion], mono-accordion, mono-shadow-accordion):last-child {\r\n  border-bottom-width: 0;\r\n}\r\n\r\n/* A group with a GAP has separate boxes again, and a divider would float in the\r\n   space between them — so a gap is a consumer's own arrangement, not upstream's,\r\n   and they set `--mono-accordion-group-gap` knowing the dividers go with it. */\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: Basecoat ships ONE accordion size; md is its `summary`\r\n   ========================================= */\r\n\r\n[mono-accordion][mono-size=\"xs\"] {\r\n  --_mono-accordion-pad-x-preset: var(--mono-accordion-pad-x-xs, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-accordion-pad-y-preset: var(--mono-accordion-pad-y-xs, calc(var(--mono-spacing) * 2));\r\n  --_mono-accordion-radius-preset: var(--mono-accordion-radius-xs, var(--mono-radius-sm));\r\n  --_mono-accordion-gap-preset: calc(var(--mono-spacing) * 1.5);\r\n  --_mono-accordion-title-font-preset: var(--mono-accordion-title-font-xs, var(--mono-text-xs));\r\n  --_mono-accordion-title-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-accordion-description-font-preset: var(--mono-text-xs);\r\n  --_mono-accordion-body-font-preset: var(--mono-accordion-body-font-xs, var(--mono-text-xs));\r\n  --_mono-accordion-body-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-accordion-arrow-size-preset: calc(var(--mono-spacing) * 3);\r\n  --_mono-accordion-glyph-size-preset: calc(var(--mono-spacing) * 4.5);\r\n  --_mono-accordion-glyph-radius-preset: var(--mono-radius-sm);\r\n}\r\n\r\n[mono-accordion][mono-size=\"sm\"] {\r\n  --_mono-accordion-pad-x-preset: var(--mono-accordion-pad-x-sm, calc(var(--mono-spacing) * 3));\r\n  --_mono-accordion-pad-y-preset: var(--mono-accordion-pad-y-sm, calc(var(--mono-spacing) * 3));\r\n  --_mono-accordion-radius-preset: var(--mono-accordion-radius-sm, var(--mono-radius-md));\r\n  --_mono-accordion-gap-preset: calc(var(--mono-spacing) * 2);\r\n  --_mono-accordion-title-font-preset: var(--mono-accordion-title-font-sm, var(--mono-text-xs));\r\n  --_mono-accordion-title-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-accordion-description-font-preset: var(--mono-text-xs);\r\n  --_mono-accordion-body-font-preset: var(--mono-accordion-body-font-sm, var(--mono-text-xs));\r\n  --_mono-accordion-body-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-accordion-arrow-size-preset: calc(var(--mono-spacing) * 3.5);\r\n  --_mono-accordion-glyph-size-preset: calc(var(--mono-spacing) * 6);\r\n}\r\n\r\n[mono-accordion][mono-size=\"lg\"] {\r\n  --_mono-accordion-pad-x-preset: var(--mono-accordion-pad-x-lg, calc(var(--mono-spacing) * 5));\r\n  --_mono-accordion-pad-y-preset: var(--mono-accordion-pad-y-lg, calc(var(--mono-spacing) * 5));\r\n  --_mono-accordion-radius-preset: var(--mono-accordion-radius-lg, var(--mono-radius-lg));\r\n  --_mono-accordion-gap-preset: calc(var(--mono-spacing) * 3.5);\r\n  --_mono-accordion-title-font-preset: var(--mono-accordion-title-font-lg, var(--mono-text-base));\r\n  --_mono-accordion-title-line-height-preset: var(--mono-text-base--lh);\r\n  --_mono-accordion-body-font-preset: var(--mono-accordion-body-font-lg, var(--mono-text-sm));\r\n  --_mono-accordion-arrow-size-preset: calc(var(--mono-spacing) * 5);\r\n  --_mono-accordion-glyph-size-preset: calc(var(--mono-spacing) * 8);\r\n  --_mono-accordion-glyph-radius-preset: var(--mono-radius-md);\r\n}\r\n\r\n[mono-accordion][mono-size=\"xl\"] {\r\n  --_mono-accordion-pad-x-preset: var(--mono-accordion-pad-x-xl, calc(var(--mono-spacing) * 6));\r\n  --_mono-accordion-pad-y-preset: var(--mono-accordion-pad-y-xl, calc(var(--mono-spacing) * 6));\r\n  --_mono-accordion-radius-preset: var(--mono-accordion-radius-xl, var(--mono-radius-xl));\r\n  --_mono-accordion-gap-preset: calc(var(--mono-spacing) * 4);\r\n  --_mono-accordion-title-font-preset: var(--mono-accordion-title-font-xl, var(--mono-text-lg));\r\n  --_mono-accordion-title-line-height-preset: var(--mono-text-lg--lh);\r\n  --_mono-accordion-description-font-preset: var(--mono-text-sm);\r\n  --_mono-accordion-body-font-preset: var(--mono-accordion-body-font-xl, var(--mono-text-base));\r\n  --_mono-accordion-body-line-height-preset: var(--mono-text-base--lh);\r\n  --_mono-accordion-arrow-size-preset: calc(var(--mono-spacing) * 5.5);\r\n  --_mono-accordion-glyph-size-preset: calc(var(--mono-spacing) * 9);\r\n  --_mono-accordion-glyph-radius-preset: var(--mono-radius-lg);\r\n}\r\n\r\n[mono-accordion][mono-size=\"xxl\"] {\r\n  --_mono-accordion-pad-x-preset: var(--mono-accordion-pad-x-xxl, calc(var(--mono-spacing) * 7));\r\n  --_mono-accordion-pad-y-preset: var(--mono-accordion-pad-y-xxl, calc(var(--mono-spacing) * 7));\r\n  --_mono-accordion-radius-preset: var(--mono-accordion-radius-xxl, var(--mono-radius-xl));\r\n  --_mono-accordion-gap-preset: calc(var(--mono-spacing) * 4.5);\r\n  --_mono-accordion-title-font-preset: var(--mono-accordion-title-font-xxl, var(--mono-text-xl));\r\n  --_mono-accordion-title-line-height-preset: var(--mono-text-xl--lh);\r\n  --_mono-accordion-description-font-preset: var(--mono-text-sm);\r\n  --_mono-accordion-body-font-preset: var(--mono-accordion-body-font-xxl, var(--mono-text-lg));\r\n  --_mono-accordion-body-line-height-preset: var(--mono-text-lg--lh);\r\n  --_mono-accordion-arrow-size-preset: calc(var(--mono-spacing) * 6);\r\n  --_mono-accordion-glyph-size-preset: calc(var(--mono-spacing) * 10);\r\n  --_mono-accordion-glyph-radius-preset: var(--mono-radius-lg);\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the role tints the chevron, the ring and the open edge\r\n   ========================================= */\r\n\r\n[mono-accordion][mono-color=\"primary\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-primary); }\r\n[mono-accordion][mono-color=\"secondary\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-secondary); }\r\n[mono-accordion][mono-color=\"success\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-success); }\r\n[mono-accordion][mono-color=\"danger\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-danger); }\r\n[mono-accordion][mono-color=\"warning\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-warning); }\r\n[mono-accordion][mono-color=\"info\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-info); }\r\n[mono-accordion][mono-color=\"teal\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-teal); }\r\n[mono-accordion][mono-color=\"purple\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-purple); }\r\n[mono-accordion][mono-color=\"neutral\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-neutral); }\r\n[mono-accordion][mono-color=\"dark\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-dark); }\r\n\r\n/* =========================================\r\n   States\r\n   ========================================= */\r\n\r\n[mono-accordion][mono-open] {\r\n  border-color: var(--_mono-accordion-open-border-color);\r\n  box-shadow: var(--_mono-accordion-open-shadow);\r\n  background: var(--_mono-accordion-open-bg);\r\n}\r\n\r\n/* In a group the item has no frame to tint — only the open wash survives. */\r\n:where([mono-accordion-group], .mono-accordion-group) > [mono-accordion][mono-open],\r\n[mono-accordion][mono-grouped][mono-open] {\r\n  border-color: var(--_mono-accordion-border);\r\n  box-shadow: none;\r\n}\r\n\r\n/* basecoat@1.0.2 components/accordion.css .accordion > details[aria-disabled='true'] > summary, .accordion > details > summary[aria-disabled='true']\r\n   — pointer-events-none opacity-50. DEVIATION: 0.6, this component's pre-port\r\n   value, and on the whole item rather than the summary alone (the body is\r\n   equally unusable). */\r\n[mono-accordion][mono-disabled] {\r\n  opacity: 0.6;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* =========================================\r\n   Head — `> summary`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/accordion.css .accordion > details > summary —\r\n   relative flex w-full flex-1 cursor-pointer list-none items-start\r\n   justify-between border border-transparent transition-all outline-none */\r\n/* basecoat@1.0.2 styles/vega.css .accordion > details > summary — rounded-md py-4\r\n   text-left text-sm font-medium hover:underline focus-visible:ring-3\r\n   focus-visible:ring-ring/50 focus-visible:border-ring\r\n   — DEVIATIONS: a real <button> (so it needs the UA button reset), and\r\n   `items-center` rather than `items-start`: this row can carry a glyph chip and\r\n   trailing actions, which upstream's text-only summary never does. */\r\n:where([mono-accordion]) > [mono-head] {\r\n  position: relative;\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: var(--_mono-accordion-gap);\r\n  padding: var(--_mono-accordion-pad-y) var(--_mono-accordion-pad-x);\r\n  border: var(--mono-border-width) solid transparent;\r\n  border-radius: var(--_mono-accordion-radius);\r\n  background: none;\r\n  color: inherit;\r\n  font: inherit;\r\n  text-align: left;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  outline: none;\r\n  appearance: none;\r\n  box-shadow: var(--_mono-accordion-ring);\r\n  transition:\r\n    background-color var(--mono-duration) var(--mono-ease),\r\n    border-color var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n[mono-accordion] > [mono-head]:focus-visible {\r\n  border-color: var(--_mono-accordion-ring-color);\r\n  --_mono-accordion-ring: 0 0 0 var(--_mono-accordion-ring-width)\r\n    color-mix(in oklab, var(--_mono-accordion-ring-color) var(--mono-ring-alpha), transparent);\r\n}\r\n\r\n/* `hover:underline` — on the label, which is the only text in upstream's summary. */\r\n@media (hover: hover) {\r\n  [mono-accordion] > [mono-head]:hover:not(:disabled) {\r\n    background: var(--_mono-accordion-head-hover-bg);\r\n  }\r\n\r\n  [mono-accordion] > [mono-head]:hover:not(:disabled) [mono-title] {\r\n    text-decoration-line: var(--_mono-accordion-title-hover-decoration);\r\n  }\r\n}\r\n\r\n[mono-accordion] > [mono-head]:disabled {\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* =========================================\r\n   Leading chip — EXTENSION\r\n   ========================================= */\r\n\r\n:where([mono-accordion] > [mono-head]) > [mono-glyph] {\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-accordion-glyph-size);\r\n  height: var(--_mono-accordion-glyph-size);\r\n  border-radius: var(--_mono-accordion-glyph-radius);\r\n  background: var(--_mono-accordion-glyph-bg);\r\n  color: var(--_mono-accordion-glyph-color);\r\n  line-height: 1;\r\n}\r\n\r\n/* The glyph itself fills the chip at 62% — light: the `[data-mono-slot]`\r\n   placeholder the svg is moved into; shadow: the projected svg. */\r\n[mono-accordion] > [mono-head] > [mono-glyph] > [data-mono-slot=\"icon\"],\r\n[mono-accordion] > [mono-head] > [mono-glyph] > svg,\r\n[mono-accordion] > [mono-head] > [mono-glyph] slot[name=\"icon\"]::slotted(svg) {\r\n  display: block;\r\n  width: 62%;\r\n  height: 62%;\r\n}\r\n\r\n/* …and the light build's svg fills that placeholder. It used to lean on a global\r\n   `[data-mono-slot='icon'] > svg` rule in chip.css; since the Basecoat port that\r\n   rule is scoped to chips, and an unsized inline svg falls back to 300×150. */\r\n[mono-accordion] > [mono-head] > [mono-glyph] > [data-mono-slot=\"icon\"] > svg {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* =========================================\r\n   Title + description\r\n   ========================================= */\r\n\r\n:where([mono-accordion] > [mono-head]) > [mono-heading] {\r\n  flex: 1;\r\n  min-width: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: calc(var(--mono-spacing) * 0.25);\r\n}\r\n\r\n/* `> slot[name=\"header\"]`: in the shadow build the title/subtitle are the\r\n   FALLBACK content of `<slot name=\"header\">`, so they sit one element deeper. */\r\n:where(\r\n  [mono-accordion] > [mono-head] > [mono-heading],\r\n  [mono-accordion] > [mono-head] > [mono-heading] > slot[name=\"header\"]\r\n) > [mono-title] {\r\n  font-size: var(--_mono-accordion-title-font);\r\n  line-height: var(--_mono-accordion-title-line-height);\r\n  font-weight: var(--_mono-accordion-title-weight);\r\n  color: var(--_mono-accordion-text);\r\n}\r\n\r\n:where(\r\n  [mono-accordion] > [mono-head] > [mono-heading],\r\n  [mono-accordion] > [mono-head] > [mono-heading] > slot[name=\"header\"]\r\n) > :is([mono-subtitle], [mono-description]) {\r\n  font-size: var(--_mono-accordion-description-font);\r\n  line-height: var(--mono-leading-normal);\r\n  color: var(--_mono-accordion-description-color);\r\n}\r\n\r\n:where([mono-accordion] > [mono-head]) > [mono-actions] {\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: calc(var(--mono-spacing) * 1.5);\r\n}\r\n\r\n/* =========================================\r\n   Chevron — `summary > svg:last-child`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .accordion > details > summary > svg:last-child\r\n   — text-muted-foreground ms-auto size-4 */\r\n/* basecoat@1.0.2 components/accordion.css .accordion > details > summary > svg:last-child\r\n   — pointer-events-none shrink-0 transition-transform */\r\n:where([mono-accordion] > [mono-head]) > [mono-arrow] {\r\n  flex-shrink: 0;\r\n  margin-inline-start: auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-accordion-arrow-size);\r\n  height: var(--_mono-accordion-arrow-size);\r\n  color: var(--_mono-accordion-arrow-color);\r\n  pointer-events: none;\r\n  transition:\r\n    rotate var(--_mono-accordion-duration) var(--mono-ease),\r\n    color var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n[mono-accordion] > [mono-head] > [mono-arrow] > :is(svg, span) {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* basecoat@1.0.2 components/accordion.css .accordion > details[open] > summary > svg:last-child\r\n   — rotate-180 */\r\n[mono-accordion][mono-open] > [mono-head] > [mono-arrow] {\r\n  rotate: 180deg;\r\n  color: var(--_mono-accordion-arrow-open-color);\r\n}\r\n\r\n/* =========================================\r\n   Body — `details > :not(summary)`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/accordion.css .accordion > details > :not(summary) — overflow-hidden */\r\n/* basecoat@1.0.2 styles/vega.css .accordion > details > :not(summary) — pt-0 pb-4 text-sm\r\n   A <details> collapses for free; a div has to be animated. The\r\n   `grid-template-rows: 0fr → 1fr` trick measures the content's natural height\r\n   through the grid track and interpolates the row size, with the vertical padding\r\n   and the top border collapsing in lockstep so the entrance feels of-a-piece.\r\n   `> * { min-height: 0 }` lets grid items shrink below their intrinsic height when\r\n   the row is 0fr — without it the body would refuse to collapse. */\r\n:where([mono-accordion]) > [mono-body] {\r\n  display: grid;\r\n  grid-template-rows: 0fr;\r\n  overflow: hidden;\r\n  padding: 0 var(--_mono-accordion-pad-x);\r\n  font-size: var(--_mono-accordion-body-font);\r\n  line-height: var(--_mono-accordion-body-line-height);\r\n  color: var(--_mono-accordion-body-color);\r\n  border-top: var(--mono-border-width) solid transparent;\r\n\r\n  /* Scope this body's layout/paint work to its own box. Measured effect: neutral on\r\n     toggle cost, a modest win on the initial layout of a long list of accordions.\r\n     (It is NOT what fixes sibling cost — Chrome already does not re-lay-out sibling\r\n     subtrees when one accordion animates; that was measured, not assumed.)\r\n     `paint` adds no new clipping — `overflow: hidden` above already clips. `layout`\r\n     does make this a containing block + stacking context for absolutely positioned\r\n     descendants, which is safe here because that same `overflow: hidden` already\r\n     confined them, and mono's own popups are moved to a <body> portal. */\r\n  contain: layout paint;\r\n\r\n  transition:\r\n    grid-template-rows var(--_mono-accordion-duration) var(--mono-ease),\r\n    padding-top var(--_mono-accordion-duration) var(--mono-ease),\r\n    padding-bottom var(--_mono-accordion-duration) var(--mono-ease),\r\n    border-top-color var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n[mono-accordion] > [mono-body] > * {\r\n  min-width: 0;\r\n  min-height: 0;\r\n}\r\n\r\n/* Shadow build: the body's native <slot>s (`body` + the default one) default to\r\n   `display: contents` and so have no box — slotted content would become the grid\r\n   items directly (un-targetable by `> * { min-height: 0 }`) and keep the\r\n   `grid-template-rows: 0fr → 1fr` track from ever collapsing. They sit in ONE\r\n   `[mono-body-slots]` block, the single grid item (like the light build's\r\n   <span data-mono-slot=\"body\">), so the open/close collapse works. A bare `slot`\r\n   child is kept for markup that still renders one. */\r\n[mono-accordion] > [mono-body] > :is(slot, [mono-body-slots]) {\r\n  display: block;\r\n  min-width: 0;\r\n  min-height: 0;\r\n}\r\n\r\n/* Standalone, the item IS the frame, so the open body is separated from the head\r\n   by a hairline the way a card's footer is — EXTENSION, and the reason the top\r\n   padding is not upstream's `pt-0` here. */\r\n[mono-accordion][mono-open] > [mono-body] {\r\n  grid-template-rows: 1fr;\r\n  padding-top: var(--_mono-accordion-pad-y);\r\n  padding-bottom: var(--_mono-accordion-pad-y);\r\n  border-top-color: var(--_mono-accordion-border);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .accordion > details > :not(summary) — pt-0.\r\n   In a group the head and its body are one run of text between two dividers,\r\n   exactly as upstream renders it, so the top gap and the hairline both go. */\r\n:where([mono-accordion-group], .mono-accordion-group) > [mono-accordion][mono-open] > [mono-body],\r\n[mono-accordion][mono-grouped][mono-open] > [mono-body] {\r\n  padding-top: 0;\r\n  border-top-color: transparent;\r\n}\r\n\r\n/* A collapsed body is still fully rendered — the `0fr` track only hides it — so\r\n   without this every closed accordion keeps its whole slotted subtree in the style,\r\n   layout and paint trees. `content-visibility: hidden` drops it entirely.\r\n\r\n   What this buys, measured with ~320-node bodies (Chromium, median of 3):\r\n     initial layout, 40 panels: 157ms → 18ms, and flat in the panel count\r\n     (5 panels: 52ms → 23ms). That is the cost of putting a long list of heavy\r\n     accordions on screen at all — e.g. opening a modal that builds N entry forms.\r\n   What it does NOT buy: a cheaper toggle. Skipping the subtree means an opening\r\n   panel is laid out from scratch, so one open+close costs slightly MORE\r\n   (23ms → 31ms at 40 panels). The toggle's real cost is the animation above —\r\n   see `--mono-accordion-duration`.\r\n\r\n   `allow-discrete` is what makes it safe to animate. Opening flips the property to\r\n   `visible` at 0%, so the grid can still measure the content it is expanding to;\r\n   closing holds it `visible` until 100%, so the collapse plays out before the content\r\n   is dropped. Get that backwards and a closing body vanishes instantly instead of\r\n   collapsing.\r\n\r\n   Gated behind @supports deliberately. `content-visibility … allow-discrete` inside\r\n   the `transition` SHORTHAND is a parse error to a browser without the feature, and a\r\n   single bad entry drops the WHOLE declaration — which would take every accordion\r\n   transition with it. Inside the guard the shorthand is known to parse, so the list is\r\n   restated in full rather than patched with the `transition-behavior` longhand.\r\n   Browsers without support keep exactly the previous behaviour.\r\n\r\n   Must stay ABOVE the reduced-motion block: @supports adds no specificity, so source\r\n   order is the only thing keeping `transition: none` the winner down there. */\r\n@supports (transition-behavior: allow-discrete) {\r\n  :where([mono-accordion]) > [mono-body] {\r\n    content-visibility: hidden;\r\n    /* Must stay `0`, NOT `auto 0`. `content-visibility: hidden` skips this element's\r\n       own contents, so its size comes from HERE — and the `auto` keyword's remembered\r\n       size is the panel's last OPEN height, which leaves a closed accordion holding\r\n       full height with nothing in it. Tried, measured, reverted: a closed body read\r\n       656px instead of collapsing. The scrollbar-stability that `auto` normally buys\r\n       does not apply to an element that is itself the skipped one. */\r\n    contain-intrinsic-size: 0;\r\n    transition:\r\n      grid-template-rows var(--_mono-accordion-duration) var(--mono-ease),\r\n      padding-top var(--_mono-accordion-duration) var(--mono-ease),\r\n      padding-bottom var(--_mono-accordion-duration) var(--mono-ease),\r\n      border-top-color var(--mono-duration) var(--mono-ease),\r\n      content-visibility var(--_mono-accordion-duration) allow-discrete;\r\n  }\r\n\r\n  [mono-accordion][mono-open] > [mono-body] {\r\n    content-visibility: visible;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-accordion],\r\n  [mono-accordion] > [mono-head],\r\n  [mono-accordion] > [mono-head] > [mono-arrow],\r\n  [mono-accordion] > [mono-body] {\r\n    transition: none;\r\n  }\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\accordion\accordion.css?raw.js
+var accordion_css_raw_default = "/* @unocss-include */\r\n\r\n/* =========================================================================\r\n   mono-accordion — a port of Basecoat's `.accordion`\r\n   (basecoat-css@1.0.2, vega style).\r\n\r\n   Styled by ATTRIBUTE, like Basecoat — and the attributes mirror the element's\r\n   props one for one, so hand-written markup reads like the Lit / Vue tag:\r\n\r\n     <mono-accordion size=\"lg\" color=\"success\" model-value>\r\n     <div mono-accordion mono-size=\"lg\" mono-color=\"success\" mono-open>\r\n       <button mono-head type=\"button\" aria-expanded=\"true\">\r\n         <span mono-glyph>…</span>\r\n         <span mono-heading>\r\n           <span mono-title>Question</span>\r\n           <span mono-subtitle>Sub-text</span>\r\n         </span>\r\n         <span mono-actions>…</span>\r\n         <span mono-arrow><svg …></svg></span>\r\n       </button>\r\n       <div mono-body role=\"region\"><div>…</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). The element writes them on its root — the\r\n   host in the light build, an inner root `<div>` in the shadow one — plus the\r\n   states `mono-open` and `mono-disabled`. The old classes\r\n   (`.mono-accordion.md.primary.open`) are still emitted as inert hooks until\r\n   2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-accordion-group]        ≡ .accordion (flex w-full flex-col; maia /\r\n                                     mira / luma / rhea add the frame, which is\r\n                                     the `-group-*` knobs below)\r\n     [mono-accordion]              ≡ .accordion > details (not-last:border-b, and\r\n                                     `open:bg-muted/50` on four flavors)\r\n                                     — EXTENSION when standalone: upstream has no\r\n                                     accordion outside a group, so on its own it\r\n                                     keeps this component's frame (border, radius,\r\n                                     shadow-xs). Inside a group the frame moves to\r\n                                     the group and the item flattens to a divider.\r\n     [mono-head]                   ≡ > summary (relative flex w-full items-start\r\n                                     justify-between border border-transparent\r\n                                     cursor-pointer outline-none, rounded-md py-4\r\n                                     text-left text-sm font-medium hover:underline,\r\n                                     focus-visible:ring-3 ring-ring/50 border-ring)\r\n                                     — DEVIATION: a real <button>, so the row is a\r\n                                     button for a11y rather than a <summary> whose\r\n                                     open state the element would have to fight\r\n     [mono-glyph]                  ≡ EXTENSION (the leading icon chip)\r\n     [mono-heading] > [mono-title] ≡ the summary's own text\r\n     [mono-subtitle]               ≡ EXTENSION (a second line under the title;\r\n                                     `[mono-description]` is its old name, and the\r\n                                     element still renders both)\r\n     [mono-actions]                ≡ EXTENSION (trailing controls in the row)\r\n     [mono-arrow]                  ≡ summary > svg:last-child (text-muted-foreground\r\n                                     ms-auto size-4, rotate-180 while open)\r\n     [mono-body]                   ≡ details > :not(summary) (overflow-hidden,\r\n                                     pt-0 pb-4 text-sm) — plus the animated\r\n                                     collapse, which upstream's <details> gets free\r\n     [mono-size]/[mono-color]      ≡ EXTENSION (upstream ships one size, no colour)\r\n     [mono-disabled]               ≡ details[aria-disabled] > summary\r\n                                     (pointer-events-none opacity-50)\r\n\r\n   PART NAMES ARE PATH-SCOPED. `[mono-title]`, `[mono-body]`, `[mono-actions]`\r\n   and `[mono-icon]` are also card's, dropdown's and button's part names, and an\r\n   accordion BODY is a place consumers put cards and buttons. Every rule here is\r\n   therefore written as an explicit child path from the root — `:where([mono-accordion]\r\n   > [mono-head] > [mono-heading]) > [mono-title]` — so a nested component's parts\r\n   are never reached. The `:where()` keeps that path at (0,1,0), the same weight a\r\n   one-attribute rule would have, so a `cssClass` utility still wins by source order.\r\n\r\n   FLAVORS set `--mono-accordion-{radius,shadow,pad-x-<size>,pad-y-<size>,\r\n   title-font-<size>,body-font-<size>,open-bg,group-radius,group-border-width,\r\n   arrow-size,ring-width}`; every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"accordion\"` prints the matrix).\r\n   ========================================================================= */\r\n\r\nmono-accordion {\r\n  display: block;\r\n}\r\n\r\n/* =========================================\r\n   Root — the item\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .accordion > details — not-last:border-b */\r\n[mono-accordion] {\r\n  /* ── the six roles, each a public knob over a Basecoat token ───────────── */\r\n  --_mono-accordion-primary: var(--mono-accordion-primary, var(--primary));\r\n  --_mono-accordion-secondary: var(--mono-accordion-secondary, var(--secondary-foreground));\r\n  --_mono-accordion-success: var(--mono-accordion-success, var(--success));\r\n  --_mono-accordion-danger: var(--mono-accordion-danger, var(--destructive));\r\n  --_mono-accordion-warning: var(--mono-accordion-warning, var(--warning));\r\n  --_mono-accordion-info: var(--mono-accordion-info, var(--info));\r\n  --_mono-accordion-teal: var(--mono-accordion-teal, var(--teal));\r\n  --_mono-accordion-purple: var(--mono-accordion-purple, var(--purple));\r\n  --_mono-accordion-neutral: var(--mono-accordion-neutral, var(--neutral));\r\n  --_mono-accordion-dark: var(--mono-accordion-dark, var(--dark));\r\n  /* the colour in play — `primary` unless a [mono-color] rule re-points it */\r\n  --_mono-accordion-accent: var(--mono-accordion-accent, var(--_mono-accordion-accent-preset, var(--_mono-accordion-primary)));\r\n\r\n  /* ── surfaces ──────────────────────────────────────────────────────────── */\r\n  --_mono-accordion-bg: var(--mono-accordion-bg, var(--mono-accordion-surface, var(--card)));\r\n  --_mono-accordion-text: var(--mono-accordion-text, var(--card-foreground));\r\n  --_mono-accordion-border: var(--mono-accordion-border, var(--border));\r\n  --_mono-accordion-shadow: var(--mono-accordion-shadow, var(--mono-shadow-xs));\r\n  /* `open:bg-muted/50` — vega does NOT tint an open item; maia, mira, luma and\r\n     rhea do, and set this knob. `--mono-accordion-head-bg` is the pre-port name,\r\n     honoured until 2.0: it tinted the open HEAD, where this tints the open item\r\n     (head and body alike), which is what upstream's `open:` variant does. */\r\n  /* An OPAQUE fill, not an overlay: it replaces the item's own surface while\r\n     open, so a flavor's `bg-muted/50` is written as that mix OVER `--card`.\r\n     Defaulting to the item's surface is what makes vega's \"no tint\" a no-op. */\r\n  --_mono-accordion-open-bg: var(--mono-accordion-open-bg, var(--mono-accordion-head-bg, var(--_mono-accordion-bg)));\r\n  --_mono-accordion-open-border-color: var(--mono-accordion-open-border-color,\r\n    color-mix(in oklab, var(--_mono-accordion-accent) 32%, var(--_mono-accordion-border)));\r\n  --_mono-accordion-open-shadow: var(--mono-accordion-open-shadow,\r\n    0 3px 14px color-mix(in oklab, var(--_mono-accordion-accent) 9%, transparent));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css .accordion > details > summary — py-4 text-sm\r\n     — DEVIATION: the inline padding is ours. Upstream's summary has none because\r\n     its group is edge-to-edge in the page; this item can stand alone inside its\r\n     own frame, where text flush against the border reads as a bug. maia / luma /\r\n     rhea say `p-4`, which is exactly the value used here. */\r\n  --_mono-accordion-pad-x: var(--mono-accordion-pad-x, var(--_mono-accordion-pad-x-preset, var(--mono-accordion-pad-x-md, calc(var(--mono-spacing) * 4))));\r\n  --_mono-accordion-pad-y: var(--mono-accordion-pad-y, var(--_mono-accordion-pad-y-preset, var(--mono-accordion-pad-y-md, calc(var(--mono-spacing) * 4))));\r\n  --_mono-accordion-radius: var(--mono-accordion-radius, var(--_mono-accordion-radius-preset, var(--mono-accordion-radius-md, var(--mono-radius-md))));\r\n  --_mono-accordion-gap: var(--mono-accordion-gap, var(--_mono-accordion-gap-preset, calc(var(--mono-spacing) * 3)));\r\n\r\n  /* ── type ──────────────────────────────────────────────────────────────── */\r\n  --_mono-accordion-title-font: var(--mono-accordion-title-font, var(--_mono-accordion-title-font-preset, var(--mono-accordion-title-font-md, var(--mono-text-sm))));\r\n  --_mono-accordion-title-line-height: var(--mono-accordion-title-line-height, var(--_mono-accordion-title-line-height-preset, var(--mono-text-sm--lh)));\r\n  --_mono-accordion-title-weight: var(--mono-accordion-title-weight, var(--mono-font-weight-medium));\r\n  /* `hover:underline` — the whole row is the control, so the hover cue is on its\r\n     label. A flavor (or a consumer) sets `none` to drop it. */\r\n  --_mono-accordion-title-hover-decoration: var(--mono-accordion-title-hover-decoration, underline);\r\n  --_mono-accordion-description-font: var(--mono-accordion-description-font, var(--_mono-accordion-description-font-preset, var(--mono-text-xs)));\r\n  --_mono-accordion-description-color: var(--mono-accordion-description-color, var(--muted-foreground));\r\n  --_mono-accordion-body-font: var(--mono-accordion-body-font, var(--_mono-accordion-body-font-preset, var(--mono-accordion-body-font-md, var(--mono-text-sm))));\r\n  --_mono-accordion-body-line-height: var(--mono-accordion-body-line-height, var(--_mono-accordion-body-line-height-preset, var(--mono-text-sm--lh)));\r\n  --_mono-accordion-body-color: var(--mono-accordion-body-color, inherit);\r\n\r\n  /* ── the chevron — `text-muted-foreground size-4` ──────────────────────── */\r\n  --_mono-accordion-arrow-size: var(--mono-accordion-arrow-size, var(--_mono-accordion-arrow-size-preset, calc(var(--mono-spacing) * 4)));\r\n  --_mono-accordion-arrow-color: var(--mono-accordion-arrow-color, var(--muted-foreground));\r\n  /* EXTENSION: the role reads the open state at a glance. Set it to\r\n     `--muted-foreground` for upstream's single-colour chevron. */\r\n  --_mono-accordion-arrow-open-color: var(--mono-accordion-arrow-open-color, var(--_mono-accordion-accent));\r\n\r\n  /* ── the leading chip (EXTENSION) ──────────────────────────────────────── */\r\n  --_mono-accordion-glyph-size: var(--mono-accordion-glyph-size, var(--_mono-accordion-glyph-size-preset, calc(var(--mono-spacing) * 7)));\r\n  --_mono-accordion-glyph-radius: var(--mono-accordion-glyph-radius, var(--_mono-accordion-glyph-radius-preset, var(--mono-radius-sm)));\r\n  --_mono-accordion-glyph-bg: var(--mono-accordion-glyph-bg, color-mix(in oklab, var(--_mono-accordion-accent) 14%, transparent));\r\n  --_mono-accordion-glyph-color: var(--mono-accordion-glyph-color, var(--_mono-accordion-accent));\r\n\r\n  /* ── focus — `focus-visible:ring-3 ring-ring/50 border-ring` ───────────── */\r\n  --_mono-accordion-ring-color: var(--mono-accordion-ring-color, var(--_mono-accordion-accent));\r\n\r\n  /* The head's hover fill. Upstream has none — it underlines the label instead —\r\n     so the tint is 0% on vega. A flavor sets the ALPHA (`-head-hover-tint`) and\r\n     the wash is built HERE: a flavor writing the colour itself would have to\r\n     reference `--_mono-accordion-accent`, which is declared on this element, and\r\n     a `:root` declaration that references it is invalid at computed-value time. */\r\n  --_mono-accordion-head-hover-bg: var(--mono-accordion-head-hover-bg,\r\n    color-mix(in oklab, var(--_mono-accordion-accent) var(--mono-accordion-head-hover-tint, 0%), transparent));\r\n  --_mono-accordion-ring-width: var(--mono-accordion-ring-width, var(--mono-ring-width));\r\n  /* A slot, so a state can neutralise the resting shadow without `box-shadow: none`. */\r\n  --_mono-accordion-ring: 0 0 #0000;\r\n\r\n  /* Open/close animation duration, shared by the body collapse and the chevron so\r\n     `--mono-accordion-duration: 0s` means a fully instant toggle.\r\n\r\n     This is THE lever for a slow open/close. `grid-template-rows: 0fr → 1fr` is the\r\n     only animated LAYOUT property in the library, and it re-lays-out the whole slotted\r\n     subtree on every frame of the transition, so its cost scales with what is inside\r\n     the body — and, because the panel's own height changes, with whatever follows it\r\n     in the document too. Measured with ~320-node bodies (Chromium, median of 3), one\r\n     open+close cycle: 24.8ms animated vs 3.6ms at `0s` — the animation is ~85% of the\r\n     toggle's cost. Set this to `0s` on accordions whose bodies (or whose pages) are\r\n     heavy.\r\n\r\n     THREE approaches that look like fixes and are NOT. All were built and measured\r\n     (Chromium, LayoutDuration + RecalcStyleDuration, min of 9 toggles, two scenarios:\r\n     40 panels with ~320-node bodies, and one small panel above a 2000-row sticky\r\n     table). Recorded so nobody spends the afternoon on them again:\r\n\r\n       1. Pin the track to a measured PIXEL height for the transition, so the `fr`\r\n          never has to be resolved against content. Landed inside the noise across\r\n          three runs (+11%, -2%, -17%) and cost two extra forced layouts per toggle to\r\n          measure and release. The per-frame cost is NOT the `fr` resolution — it is\r\n          that the row's block size changes at all, which re-lays-out the grid item\r\n          however the target size was expressed.\r\n       2. Also give the inner region a definite `height`, so its own constraint space\r\n          stops changing and its subtree layout can be cached. No effect either.\r\n       3. Don't animate a layout property at all: snap the box to its final size and\r\n          slide the content in on `transform`/`opacity`. A quick CSS prototype looked\r\n          like a 50% win, but only because it had no `content-visibility` transition\r\n          and so dropped the subtree instantly on close — the close animation was\r\n          simply invisible. Made to actually work, it measured 14.6/18.3ms vs\r\n          collapse's 20.0/18.4ms on heavy bodies (i.e. unreliable), and 17.4/19.6ms vs\r\n          12.6/12.8ms on the heavy-page scenario — reliably WORSE, because the\r\n          transform/opacity pass costs more than the box animation it replaced.\r\n\r\n     So `--mono-accordion-duration: 0s` really is the lever, and there is no cleverer\r\n     one. Measured against it: heavy bodies 7.0/10.8ms vs 20.0/18.4ms (~45-65% off);\r\n     heavy page 11.1/11.7ms vs 12.6/12.8ms (~10% off — on a page like that the\r\n     accordion is nearly irrelevant and the page's own weight is the cost). */\r\n  --_mono-accordion-duration: var(--mono-accordion-duration, var(--mono-duration));\r\n\r\n  display: block;\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-accordion-text);\r\n\r\n  /* EXTENSION — the standalone frame. Inside a group this is flattened below and\r\n     the frame moves to the group, which is upstream's arrangement. */\r\n  border: var(--mono-border-width) solid var(--_mono-accordion-border);\r\n  border-radius: var(--_mono-accordion-radius);\r\n  background: var(--_mono-accordion-bg);\r\n  box-shadow: var(--_mono-accordion-shadow);\r\n  overflow: hidden;\r\n  transition:\r\n    border-color var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease),\r\n    background-color var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n[mono-accordion],\r\n:where([mono-accordion]) *,\r\n:where([mono-accordion]) *::before,\r\n:where([mono-accordion]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* The shadow build renders EVERY region up front (so DSD can project into them\r\n   server-side) and marks the ones with nothing in them; the light build renders\r\n   only what exists. Hiding them here is what keeps the two builds identical.\r\n\r\n   NOT wrapped in `:where()`, unlike the other parts: a region rule is two\r\n   attributes strong, so a zero-weight hide would tie and lose on source order. */\r\n[mono-accordion] :is(\r\n  [mono-glyph],\r\n  [mono-heading],\r\n  [mono-title],\r\n  [mono-subtitle],\r\n  [mono-description],\r\n  [mono-actions]\r\n)[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Group — `.accordion`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/accordion.css .accordion — flex w-full flex-col\r\n   The GROUP is consumer markup — the element renders one item, not the list — so\r\n   unlike every part below, its pre-port CLASS is public API and keeps working\r\n   beside the attribute until 2.0.\r\n   The frame knobs are inert on vega (0 width, no radius) and set by the four\r\n   flavors whose `.accordion` says `overflow-hidden rounded-2xl border`. */\r\n:is([mono-accordion-group], .mono-accordion-group) {\r\n  --_mono-accordion-group-gap: var(--mono-accordion-group-gap, 0px);\r\n  --_mono-accordion-group-radius: var(--mono-accordion-group-radius, 0px);\r\n  --_mono-accordion-group-border-width: var(--mono-accordion-group-border-width, 0px);\r\n  --_mono-accordion-group-border-color: var(--mono-accordion-group-border-color, var(--border));\r\n\r\n  display: flex;\r\n  width: 100%;\r\n  flex-direction: column;\r\n  gap: var(--_mono-accordion-group-gap);\r\n  box-sizing: border-box;\r\n  border: var(--_mono-accordion-group-border-width) solid var(--_mono-accordion-group-border-color);\r\n  border-radius: var(--_mono-accordion-group-radius);\r\n  overflow: hidden;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .accordion > details — not-last:border-b\r\n   In a group the ITEM stops being a card: the frame is the group's, and all an\r\n   item carries is the hairline to the next one.\r\n\r\n   TWO selectors for one rule, because the item is not always a child of the\r\n   group. Hand-written markup nests `[mono-accordion]` directly, so the `>`\r\n   path matches; the ELEMENT puts a custom-element host in between (light) or a\r\n   shadow boundary (shadow), which no selector crosses — so it detects the group\r\n   itself and writes `mono-grouped` / `mono-last` on its root. */\r\n:where([mono-accordion-group], .mono-accordion-group) > [mono-accordion],\r\n[mono-accordion][mono-grouped] {\r\n  border-width: 0;\r\n  border-radius: 0;\r\n  box-shadow: none;\r\n}\r\n\r\n/* The divider rides the group's own CHILD, whatever that is — the item itself in\r\n   hand-written markup, the custom-element host when the element renders it. That\r\n   is what makes `:last-child` reliable: the host is a child of the group in both\r\n   builds, where the ITEM is one only in raw markup, and an item that asked \"am I\r\n   last?\" itself would answer from however many siblings existed when it rendered. */\r\n:where([mono-accordion-group], .mono-accordion-group)\r\n  > :is([mono-accordion], mono-accordion, mono-shadow-accordion) {\r\n  border-bottom: var(--mono-border-width) solid var(--mono-accordion-border, var(--border));\r\n}\r\n\r\n:where([mono-accordion-group], .mono-accordion-group)\r\n  > :is([mono-accordion], mono-accordion, mono-shadow-accordion):last-child {\r\n  border-bottom-width: 0;\r\n}\r\n\r\n/* A group with a GAP has separate boxes again, and a divider would float in the\r\n   space between them — so a gap is a consumer's own arrangement, not upstream's,\r\n   and they set `--mono-accordion-group-gap` knowing the dividers go with it. */\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: Basecoat ships ONE accordion size; md is its `summary`\r\n   ========================================= */\r\n\r\n[mono-accordion][mono-size=\"xs\"] {\r\n  --_mono-accordion-pad-x-preset: var(--mono-accordion-pad-x-xs, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-accordion-pad-y-preset: var(--mono-accordion-pad-y-xs, calc(var(--mono-spacing) * 2));\r\n  --_mono-accordion-radius-preset: var(--mono-accordion-radius-xs, var(--mono-radius-sm));\r\n  --_mono-accordion-gap-preset: calc(var(--mono-spacing) * 1.5);\r\n  --_mono-accordion-title-font-preset: var(--mono-accordion-title-font-xs, var(--mono-text-xs));\r\n  --_mono-accordion-title-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-accordion-description-font-preset: var(--mono-text-xs);\r\n  --_mono-accordion-body-font-preset: var(--mono-accordion-body-font-xs, var(--mono-text-xs));\r\n  --_mono-accordion-body-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-accordion-arrow-size-preset: calc(var(--mono-spacing) * 3);\r\n  --_mono-accordion-glyph-size-preset: calc(var(--mono-spacing) * 4.5);\r\n  --_mono-accordion-glyph-radius-preset: var(--mono-radius-sm);\r\n}\r\n\r\n[mono-accordion][mono-size=\"sm\"] {\r\n  --_mono-accordion-pad-x-preset: var(--mono-accordion-pad-x-sm, calc(var(--mono-spacing) * 3));\r\n  --_mono-accordion-pad-y-preset: var(--mono-accordion-pad-y-sm, calc(var(--mono-spacing) * 3));\r\n  --_mono-accordion-radius-preset: var(--mono-accordion-radius-sm, var(--mono-radius-md));\r\n  --_mono-accordion-gap-preset: calc(var(--mono-spacing) * 2);\r\n  --_mono-accordion-title-font-preset: var(--mono-accordion-title-font-sm, var(--mono-text-xs));\r\n  --_mono-accordion-title-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-accordion-description-font-preset: var(--mono-text-xs);\r\n  --_mono-accordion-body-font-preset: var(--mono-accordion-body-font-sm, var(--mono-text-xs));\r\n  --_mono-accordion-body-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-accordion-arrow-size-preset: calc(var(--mono-spacing) * 3.5);\r\n  --_mono-accordion-glyph-size-preset: calc(var(--mono-spacing) * 6);\r\n}\r\n\r\n[mono-accordion][mono-size=\"lg\"] {\r\n  --_mono-accordion-pad-x-preset: var(--mono-accordion-pad-x-lg, calc(var(--mono-spacing) * 5));\r\n  --_mono-accordion-pad-y-preset: var(--mono-accordion-pad-y-lg, calc(var(--mono-spacing) * 5));\r\n  --_mono-accordion-radius-preset: var(--mono-accordion-radius-lg, var(--mono-radius-lg));\r\n  --_mono-accordion-gap-preset: calc(var(--mono-spacing) * 3.5);\r\n  --_mono-accordion-title-font-preset: var(--mono-accordion-title-font-lg, var(--mono-text-base));\r\n  --_mono-accordion-title-line-height-preset: var(--mono-text-base--lh);\r\n  --_mono-accordion-body-font-preset: var(--mono-accordion-body-font-lg, var(--mono-text-sm));\r\n  --_mono-accordion-arrow-size-preset: calc(var(--mono-spacing) * 5);\r\n  --_mono-accordion-glyph-size-preset: calc(var(--mono-spacing) * 8);\r\n  --_mono-accordion-glyph-radius-preset: var(--mono-radius-md);\r\n}\r\n\r\n[mono-accordion][mono-size=\"xl\"] {\r\n  --_mono-accordion-pad-x-preset: var(--mono-accordion-pad-x-xl, calc(var(--mono-spacing) * 6));\r\n  --_mono-accordion-pad-y-preset: var(--mono-accordion-pad-y-xl, calc(var(--mono-spacing) * 6));\r\n  --_mono-accordion-radius-preset: var(--mono-accordion-radius-xl, var(--mono-radius-xl));\r\n  --_mono-accordion-gap-preset: calc(var(--mono-spacing) * 4);\r\n  --_mono-accordion-title-font-preset: var(--mono-accordion-title-font-xl, var(--mono-text-lg));\r\n  --_mono-accordion-title-line-height-preset: var(--mono-text-lg--lh);\r\n  --_mono-accordion-description-font-preset: var(--mono-text-sm);\r\n  --_mono-accordion-body-font-preset: var(--mono-accordion-body-font-xl, var(--mono-text-base));\r\n  --_mono-accordion-body-line-height-preset: var(--mono-text-base--lh);\r\n  --_mono-accordion-arrow-size-preset: calc(var(--mono-spacing) * 5.5);\r\n  --_mono-accordion-glyph-size-preset: calc(var(--mono-spacing) * 9);\r\n  --_mono-accordion-glyph-radius-preset: var(--mono-radius-lg);\r\n}\r\n\r\n[mono-accordion][mono-size=\"xxl\"] {\r\n  --_mono-accordion-pad-x-preset: var(--mono-accordion-pad-x-xxl, calc(var(--mono-spacing) * 7));\r\n  --_mono-accordion-pad-y-preset: var(--mono-accordion-pad-y-xxl, calc(var(--mono-spacing) * 7));\r\n  --_mono-accordion-radius-preset: var(--mono-accordion-radius-xxl, var(--mono-radius-xl));\r\n  --_mono-accordion-gap-preset: calc(var(--mono-spacing) * 4.5);\r\n  --_mono-accordion-title-font-preset: var(--mono-accordion-title-font-xxl, var(--mono-text-xl));\r\n  --_mono-accordion-title-line-height-preset: var(--mono-text-xl--lh);\r\n  --_mono-accordion-description-font-preset: var(--mono-text-sm);\r\n  --_mono-accordion-body-font-preset: var(--mono-accordion-body-font-xxl, var(--mono-text-lg));\r\n  --_mono-accordion-body-line-height-preset: var(--mono-text-lg--lh);\r\n  --_mono-accordion-arrow-size-preset: calc(var(--mono-spacing) * 6);\r\n  --_mono-accordion-glyph-size-preset: calc(var(--mono-spacing) * 10);\r\n  --_mono-accordion-glyph-radius-preset: var(--mono-radius-lg);\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the role tints the chevron, the ring and the open edge\r\n   ========================================= */\r\n\r\n[mono-accordion][mono-color=\"primary\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-primary); }\r\n[mono-accordion][mono-color=\"secondary\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-secondary); }\r\n[mono-accordion][mono-color=\"success\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-success); }\r\n[mono-accordion][mono-color=\"danger\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-danger); }\r\n[mono-accordion][mono-color=\"warning\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-warning); }\r\n[mono-accordion][mono-color=\"info\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-info); }\r\n[mono-accordion][mono-color=\"teal\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-teal); }\r\n[mono-accordion][mono-color=\"purple\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-purple); }\r\n[mono-accordion][mono-color=\"neutral\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-neutral); }\r\n[mono-accordion][mono-color=\"dark\"] { --_mono-accordion-accent-preset: var(--_mono-accordion-dark); }\r\n\r\n/* =========================================\r\n   States\r\n   ========================================= */\r\n\r\n[mono-accordion][mono-open] {\r\n  border-color: var(--_mono-accordion-open-border-color);\r\n  box-shadow: var(--_mono-accordion-open-shadow);\r\n  background: var(--_mono-accordion-open-bg);\r\n}\r\n\r\n/* In a group the item has no frame to tint — only the open wash survives. */\r\n:where([mono-accordion-group], .mono-accordion-group) > [mono-accordion][mono-open],\r\n[mono-accordion][mono-grouped][mono-open] {\r\n  border-color: var(--_mono-accordion-border);\r\n  box-shadow: none;\r\n}\r\n\r\n/* basecoat@1.0.2 components/accordion.css .accordion > details[aria-disabled='true'] > summary, .accordion > details > summary[aria-disabled='true']\r\n   — pointer-events-none opacity-50. DEVIATION: 0.6, this component's pre-port\r\n   value, and on the whole item rather than the summary alone (the body is\r\n   equally unusable). */\r\n[mono-accordion][mono-disabled] {\r\n  opacity: 0.6;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* =========================================\r\n   Head — `> summary`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/accordion.css .accordion > details > summary —\r\n   relative flex w-full flex-1 cursor-pointer list-none items-start\r\n   justify-between border border-transparent transition-all outline-none */\r\n/* basecoat@1.0.2 styles/vega.css .accordion > details > summary — rounded-md py-4\r\n   text-left text-sm font-medium hover:underline focus-visible:ring-3\r\n   focus-visible:ring-ring/50 focus-visible:border-ring\r\n   — DEVIATIONS: a real <button> (so it needs the UA button reset), and\r\n   `items-center` rather than `items-start`: this row can carry a glyph chip and\r\n   trailing actions, which upstream's text-only summary never does. */\r\n:where([mono-accordion]) > [mono-head] {\r\n  position: relative;\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: var(--_mono-accordion-gap);\r\n  padding: var(--_mono-accordion-pad-y) var(--_mono-accordion-pad-x);\r\n  border: var(--mono-border-width) solid transparent;\r\n  border-radius: var(--_mono-accordion-radius);\r\n  background: none;\r\n  color: inherit;\r\n  font: inherit;\r\n  text-align: left;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  outline: none;\r\n  appearance: none;\r\n  box-shadow: var(--_mono-accordion-ring);\r\n  transition:\r\n    background-color var(--mono-duration) var(--mono-ease),\r\n    border-color var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n[mono-accordion] > [mono-head]:focus-visible {\r\n  border-color: var(--_mono-accordion-ring-color);\r\n  --_mono-accordion-ring: 0 0 0 var(--_mono-accordion-ring-width)\r\n    color-mix(in oklab, var(--_mono-accordion-ring-color) var(--mono-ring-alpha), transparent);\r\n}\r\n\r\n/* `hover:underline` — on the label, which is the only text in upstream's summary. */\r\n@media (hover: hover) {\r\n  [mono-accordion] > [mono-head]:hover:not(:disabled) {\r\n    background: var(--_mono-accordion-head-hover-bg);\r\n  }\r\n\r\n  [mono-accordion] > [mono-head]:hover:not(:disabled) [mono-title] {\r\n    text-decoration-line: var(--_mono-accordion-title-hover-decoration);\r\n  }\r\n}\r\n\r\n[mono-accordion] > [mono-head]:disabled {\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* =========================================\r\n   Leading chip — EXTENSION\r\n   ========================================= */\r\n\r\n:where([mono-accordion] > [mono-head]) > [mono-glyph] {\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-accordion-glyph-size);\r\n  height: var(--_mono-accordion-glyph-size);\r\n  border-radius: var(--_mono-accordion-glyph-radius);\r\n  background: var(--_mono-accordion-glyph-bg);\r\n  color: var(--_mono-accordion-glyph-color);\r\n  line-height: 1;\r\n}\r\n\r\n/* The glyph itself fills the chip at 62% — light: the `[data-mono-slot]`\r\n   placeholder the svg is moved into; shadow: the projected svg. */\r\n[mono-accordion] > [mono-head] > [mono-glyph] > [data-mono-slot=\"icon\"],\r\n[mono-accordion] > [mono-head] > [mono-glyph] > svg,\r\n[mono-accordion] > [mono-head] > [mono-glyph] slot[name=\"icon\"]::slotted(svg) {\r\n  display: block;\r\n  width: 62%;\r\n  height: 62%;\r\n}\r\n\r\n/* …and the light build's svg fills that placeholder. It used to lean on a global\r\n   `[data-mono-slot='icon'] > svg` rule in chip.css; since the Basecoat port that\r\n   rule is scoped to chips, and an unsized inline svg falls back to 300×150. */\r\n[mono-accordion] > [mono-head] > [mono-glyph] > [data-mono-slot=\"icon\"] > svg {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* =========================================\r\n   Title + description\r\n   ========================================= */\r\n\r\n:where([mono-accordion] > [mono-head]) > [mono-heading] {\r\n  flex: 1;\r\n  min-width: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: calc(var(--mono-spacing) * 0.25);\r\n}\r\n\r\n/* `> slot[name=\"header\"]`: in the shadow build the title/subtitle are the\r\n   FALLBACK content of `<slot name=\"header\">`, so they sit one element deeper. */\r\n:where(\r\n  [mono-accordion] > [mono-head] > [mono-heading],\r\n  [mono-accordion] > [mono-head] > [mono-heading] > slot[name=\"header\"]\r\n) > [mono-title] {\r\n  font-size: var(--_mono-accordion-title-font);\r\n  line-height: var(--_mono-accordion-title-line-height);\r\n  font-weight: var(--_mono-accordion-title-weight);\r\n  color: var(--_mono-accordion-text);\r\n}\r\n\r\n:where(\r\n  [mono-accordion] > [mono-head] > [mono-heading],\r\n  [mono-accordion] > [mono-head] > [mono-heading] > slot[name=\"header\"]\r\n) > :is([mono-subtitle], [mono-description]) {\r\n  font-size: var(--_mono-accordion-description-font);\r\n  line-height: var(--mono-leading-normal);\r\n  color: var(--_mono-accordion-description-color);\r\n}\r\n\r\n:where([mono-accordion] > [mono-head]) > [mono-actions] {\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: calc(var(--mono-spacing) * 1.5);\r\n}\r\n\r\n/* =========================================\r\n   Chevron — `summary > svg:last-child`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .accordion > details > summary > svg:last-child\r\n   — text-muted-foreground ms-auto size-4 */\r\n/* basecoat@1.0.2 components/accordion.css .accordion > details > summary > svg:last-child\r\n   — pointer-events-none shrink-0 transition-transform */\r\n:where([mono-accordion] > [mono-head]) > [mono-arrow] {\r\n  flex-shrink: 0;\r\n  margin-inline-start: auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-accordion-arrow-size);\r\n  height: var(--_mono-accordion-arrow-size);\r\n  color: var(--_mono-accordion-arrow-color);\r\n  pointer-events: none;\r\n  transition:\r\n    rotate var(--_mono-accordion-duration) var(--mono-ease),\r\n    color var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n[mono-accordion] > [mono-head] > [mono-arrow] > :is(svg, span) {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* basecoat@1.0.2 components/accordion.css .accordion > details[open] > summary > svg:last-child\r\n   — rotate-180 */\r\n[mono-accordion][mono-open] > [mono-head] > [mono-arrow] {\r\n  rotate: 180deg;\r\n  color: var(--_mono-accordion-arrow-open-color);\r\n}\r\n\r\n/* =========================================\r\n   Body — `details > :not(summary)`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/accordion.css .accordion > details > :not(summary) — overflow-hidden */\r\n/* basecoat@1.0.2 styles/vega.css .accordion > details > :not(summary) — pt-0 pb-4 text-sm\r\n   A <details> collapses for free; a div has to be animated. The\r\n   `grid-template-rows: 0fr → 1fr` trick measures the content's natural height\r\n   through the grid track and interpolates the row size, with the vertical padding\r\n   and the top border collapsing in lockstep so the entrance feels of-a-piece.\r\n   `> * { min-height: 0 }` lets grid items shrink below their intrinsic height when\r\n   the row is 0fr — without it the body would refuse to collapse. */\r\n:where([mono-accordion]) > [mono-body] {\r\n  display: grid;\r\n  grid-template-rows: 0fr;\r\n  overflow: hidden;\r\n  padding: 0 var(--_mono-accordion-pad-x);\r\n  font-size: var(--_mono-accordion-body-font);\r\n  line-height: var(--_mono-accordion-body-line-height);\r\n  color: var(--_mono-accordion-body-color);\r\n  border-top: var(--mono-border-width) solid transparent;\r\n\r\n  /* Scope this body's layout/paint work to its own box. Measured effect: neutral on\r\n     toggle cost, a modest win on the initial layout of a long list of accordions.\r\n     (It is NOT what fixes sibling cost — Chrome already does not re-lay-out sibling\r\n     subtrees when one accordion animates; that was measured, not assumed.)\r\n     `paint` adds no new clipping — `overflow: hidden` above already clips. `layout`\r\n     does make this a containing block + stacking context for absolutely positioned\r\n     descendants, which is safe here because that same `overflow: hidden` already\r\n     confined them, and mono's own popups are moved to a <body> portal. */\r\n  contain: layout paint;\r\n\r\n  transition:\r\n    grid-template-rows var(--_mono-accordion-duration) var(--mono-ease),\r\n    padding-top var(--_mono-accordion-duration) var(--mono-ease),\r\n    padding-bottom var(--_mono-accordion-duration) var(--mono-ease),\r\n    border-top-color var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n[mono-accordion] > [mono-body] > * {\r\n  min-width: 0;\r\n  min-height: 0;\r\n}\r\n\r\n/* Shadow build: the body's native <slot>s (`body` + the default one) default to\r\n   `display: contents` and so have no box — slotted content would become the grid\r\n   items directly (un-targetable by `> * { min-height: 0 }`) and keep the\r\n   `grid-template-rows: 0fr → 1fr` track from ever collapsing. They sit in ONE\r\n   `[mono-body-slots]` block, the single grid item (like the light build's\r\n   <span data-mono-slot=\"body\">), so the open/close collapse works. A bare `slot`\r\n   child is kept for markup that still renders one. */\r\n[mono-accordion] > [mono-body] > :is(slot, [mono-body-slots]) {\r\n  display: block;\r\n  min-width: 0;\r\n  min-height: 0;\r\n}\r\n\r\n/* Standalone, the item IS the frame, so the open body is separated from the head\r\n   by a hairline the way a card's footer is — EXTENSION, and the reason the top\r\n   padding is not upstream's `pt-0` here. */\r\n[mono-accordion][mono-open] > [mono-body] {\r\n  grid-template-rows: 1fr;\r\n  padding-top: var(--_mono-accordion-pad-y);\r\n  padding-bottom: var(--_mono-accordion-pad-y);\r\n  border-top-color: var(--_mono-accordion-border);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .accordion > details > :not(summary) — pt-0.\r\n   In a group the head and its body are one run of text between two dividers,\r\n   exactly as upstream renders it, so the top gap and the hairline both go. */\r\n:where([mono-accordion-group], .mono-accordion-group) > [mono-accordion][mono-open] > [mono-body],\r\n[mono-accordion][mono-grouped][mono-open] > [mono-body] {\r\n  padding-top: 0;\r\n  border-top-color: transparent;\r\n}\r\n\r\n/* A collapsed body is still fully rendered — the `0fr` track only hides it — so\r\n   without this every closed accordion keeps its whole slotted subtree in the style,\r\n   layout and paint trees. `content-visibility: hidden` drops it entirely.\r\n\r\n   What this buys, measured with ~320-node bodies (Chromium, median of 3):\r\n     initial layout, 40 panels: 157ms → 18ms, and flat in the panel count\r\n     (5 panels: 52ms → 23ms). That is the cost of putting a long list of heavy\r\n     accordions on screen at all — e.g. opening a modal that builds N entry forms.\r\n   What it does NOT buy: a cheaper toggle. Skipping the subtree means an opening\r\n   panel is laid out from scratch, so one open+close costs slightly MORE\r\n   (23ms → 31ms at 40 panels). The toggle's real cost is the animation above —\r\n   see `--mono-accordion-duration`.\r\n\r\n   `allow-discrete` is what makes it safe to animate. Opening flips the property to\r\n   `visible` at 0%, so the grid can still measure the content it is expanding to;\r\n   closing holds it `visible` until 100%, so the collapse plays out before the content\r\n   is dropped. Get that backwards and a closing body vanishes instantly instead of\r\n   collapsing.\r\n\r\n   Gated behind @supports deliberately. `content-visibility … allow-discrete` inside\r\n   the `transition` SHORTHAND is a parse error to a browser without the feature, and a\r\n   single bad entry drops the WHOLE declaration — which would take every accordion\r\n   transition with it. Inside the guard the shorthand is known to parse, so the list is\r\n   restated in full rather than patched with the `transition-behavior` longhand.\r\n   Browsers without support keep exactly the previous behaviour.\r\n\r\n   Must stay ABOVE the reduced-motion block: @supports adds no specificity, so source\r\n   order is the only thing keeping `transition: none` the winner down there. */\r\n@supports (transition-behavior: allow-discrete) {\r\n  :where([mono-accordion]) > [mono-body] {\r\n    content-visibility: hidden;\r\n    /* Must stay `0`, NOT `auto 0`. `content-visibility: hidden` skips this element's\r\n       own contents, so its size comes from HERE — and the `auto` keyword's remembered\r\n       size is the panel's last OPEN height, which leaves a closed accordion holding\r\n       full height with nothing in it. Tried, measured, reverted: a closed body read\r\n       656px instead of collapsing. The scrollbar-stability that `auto` normally buys\r\n       does not apply to an element that is itself the skipped one. */\r\n    contain-intrinsic-size: 0;\r\n    transition:\r\n      grid-template-rows var(--_mono-accordion-duration) var(--mono-ease),\r\n      padding-top var(--_mono-accordion-duration) var(--mono-ease),\r\n      padding-bottom var(--_mono-accordion-duration) var(--mono-ease),\r\n      border-top-color var(--mono-duration) var(--mono-ease),\r\n      content-visibility var(--_mono-accordion-duration) allow-discrete;\r\n  }\r\n\r\n  [mono-accordion][mono-open] > [mono-body] {\r\n    content-visibility: visible;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-accordion],\r\n  [mono-accordion] > [mono-head],\r\n  [mono-accordion] > [mono-head] > [mono-arrow],\r\n  [mono-accordion] > [mono-body] {\r\n    transition: none;\r\n  }\r\n}\r\n";
+
 //#endregion
 //#region src/components/accordion/mono-accordion.shadow.ts
 /**
 * The old slot name each text region also answers to. The canonical name
 * (`title` / `subtitle`) OUTRANKS the old one when both are supplied.
 */
-var ALIAS_OF = {
+const ALIAS_OF = {
 	title: "label",
 	subtitle: "description"
 };
-var MonoAccordionShadow = class MonoAccordionShadow extends withShadowUtilityStyles(MonoAccordionCore(LitElement)) {
+let MonoAccordionShadow = class MonoAccordionShadow extends withShadowUtilityStyles(MonoAccordionCore(LitElement)) {
 	static {
 		this.disableWarning?.("change-in-update");
 	}
 	static {
-		this.styles = [unsafeCSS(toShadowCss(accordion_default, { host: "mono-accordion" }))];
+		this.styles = [unsafeCSS(toShadowCss(accordion_css_raw_default, { host: "mono-accordion" }))];
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -438,5 +441,6 @@ var MonoAccordionShadow = class MonoAccordionShadow extends withShadowUtilitySty
 	}
 };
 MonoAccordionShadow = __decorate([customElement("mono-shadow-accordion")], MonoAccordionShadow);
+
 //#endregion
-export { MonoAccordionCore, MonoAccordionShadow };
+export { MonoAccordionCore, MonoAccordionShadow };