@mono-lit/helper 0.0.2 → 0.0.3

package/dist/ui/tabs.js

@@ -1,11 +1,12 @@
-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 { a as parkDetachedNodes, s as placeSlotNode } from "../light-slots-DW1WgfgT.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 { a as parkDetachedNodes, s as placeSlotNode } from "../light-slots-DdDdZ6zs.js";
 import { LitElement, html, nothing, unsafeCSS } from "lit";
 import { ref } from "lit/directives/ref.js";
 import { property, state } from "lit/decorators.js";
+
 //#region src/components/tabs/tabs-core.ts
 /**
 * Coerce any `items` input to a `TabItem[]`. Accepts an array (pass-through), a
@@ -38,7 +39,7 @@ function coerceTabItems(value) {
 * SSR-safe: no `document`/`window` access; `focus`/`blur` query `this.renderRoot`
 * (the host in light, the shadow root in shadow) and only matter client-side.
 */
-var MonoTabsCore = (superClass) => {
+const MonoTabsCore = (superClass) => {
 	class MonoTabsCoreClass extends superClass {
 		constructor(...args) {
 			super(...args);
@@ -314,19 +315,21 @@ var MonoTabsCore = (superClass) => {
 	__decorate([property({ attribute: false })], MonoTabsCoreClass.prototype, "cssClassName", void 0);
 	return MonoTabsCoreClass;
 };
+
 //#endregion
-//#region src/components/tabs/tabs.css?raw
-var tabs_default = "/* @unocss-include */\r\n\r\n/* =========================================================================\r\n   mono-tabs — a port of Basecoat's `.tabs` (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-tabs size=\"lg\" color=\"success\" variant=\"pill\" model-value=\"a\">\r\n     <div mono-tabs mono-size=\"lg\" mono-color=\"success\" mono-variant=\"pill\"\r\n          role=\"tablist\" aria-orientation=\"horizontal\">\r\n       <button mono-tab type=\"button\" role=\"tab\" aria-selected=\"true\">\r\n         <span mono-icon>…</span>\r\n         <span mono-label>Overview</span>\r\n         <span mono-badge>3</span>\r\n       </button>\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])` = underline). The\r\n   element writes them on its root — the host in the light build, an inner root\r\n   in the shadow one — plus `mono-disabled`. The old classes\r\n   (`.mono-tabs.md.primary.variant-pill`, `.mono-tabs-tab.on`) are still emitted\r\n   as inert hooks until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-tabs]                     ≡ .tabs > [role='tablist'] (inline-flex w-fit\r\n                                       items-center justify-center rounded-lg\r\n                                       p-[3px] h-9, bg-muted unless line)\r\n                                       — DEVIATION: this element renders the STRIP\r\n                                       only, never the panels, so there is no\r\n                                       `.tabs` wrapper. Its job — the flex\r\n                                       direction and the `gap-2` to the panel —\r\n                                       belongs to the consumer's own layout.\r\n     [mono-variant=\"pill\"]           ≡ the DEFAULT tablist (upstream has no name\r\n                                       for it; ours is `pill`)\r\n     [mono-variant=\"underline\"]      ≡ [data-variant='line'] (gap-1 rounded-none\r\n                                       bg-transparent, selected via the ::after bar)\r\n     [mono-variant=\"ghost\"]          ≡ EXTENSION\r\n     [aria-orientation=\"vertical\"]   ≡ [aria-orientation='vertical'] (h-fit\r\n                                       flex-col; tabs w-full justify-start)\r\n     [mono-tab]                      ≡ > [role='tab'] (relative inline-flex flex-1\r\n                                       items-center justify-center whitespace-nowrap\r\n                                       gap-1.5 rounded-md border border-transparent\r\n                                       px-2 py-1 text-sm font-medium, ink\r\n                                       foreground/60 → foreground on hover)\r\n     [mono-tab][aria-selected=true]  ≡ [role='tab'][aria-selected='true'] — the\r\n                                       pill fill (bg-background shadow-sm, dark\r\n                                       border-input bg-input/30) or the line bar\r\n     [mono-tab]::after               ≡ the `after:` bar the line variant reveals\r\n                                       (inset-x-0 bottom-[-5px] h-0.5 bg-foreground)\r\n     [mono-icon]                     ≡ [&_svg:not([class*='size-'])]:size-4, plus\r\n                                       upstream's ps-1.5 / pe-1.5 when a tab leads\r\n                                       or trails with one\r\n     [mono-label]                    ≡ the tab's own text\r\n     [mono-badge]                    ≡ EXTENSION\r\n     [mono-size]/[mono-color]        ≡ EXTENSION (upstream ships one size, no colour)\r\n\r\n   PART NAMES ARE PATH-SCOPED. `[mono-icon]`, `[mono-label]` and `[mono-badge]`\r\n   are also button's, input's and card's part names, so every rule here is\r\n   written as a child path from the root — `:where([mono-tabs] > [mono-tab]) >\r\n   [mono-label]`. The `:where()` keeps that at (0,1,0), the weight a\r\n   one-attribute rule would have, so a `cssClass` utility still wins by source\r\n   order.\r\n\r\n   STATE IS ARIA, not a class. `aria-selected` and `disabled` are what the\r\n   element already renders and what upstream keys on, so the port needs no\r\n   `mono-selected` of its own — and hand-written markup that is accessible is\r\n   styled correctly by construction.\r\n\r\n   FLAVORS set `--mono-tabs-{radius,padding,height,gap,tab-radius,tab-pad-x,\r\n   tab-pad-y,tab-font,tab-gap,tab-font-weight,tab-text-transform,\r\n   tab-letter-spacing,icon-size}`; every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"tabs\"` prints the matrix).\r\n   ========================================================================= */\r\n\r\nmono-tabs {\r\n  display: block;\r\n}\r\n\r\n/* =========================================\r\n   Root — the tablist\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/tabs.css .tabs >> > [role='tablist'] — text-muted-foreground\r\n   inline-flex w-fit items-center justify-center */\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'] — rounded-lg p-[3px] h-9 */\r\n[mono-tabs] {\r\n  /* ── the six roles, each a public knob over a Basecoat token ───────────── */\r\n  --_mono-tabs-primary: var(--mono-tabs-primary, var(--primary));\r\n  --_mono-tabs-secondary: var(--mono-tabs-secondary, var(--secondary-foreground));\r\n  --_mono-tabs-success: var(--mono-tabs-success, var(--success));\r\n  --_mono-tabs-danger: var(--mono-tabs-danger, var(--destructive));\r\n  --_mono-tabs-warning: var(--mono-tabs-warning, var(--warning));\r\n  --_mono-tabs-info: var(--mono-tabs-info, var(--info));\r\n  --_mono-tabs-teal: var(--mono-tabs-teal, var(--teal));\r\n  --_mono-tabs-purple: var(--mono-tabs-purple, var(--purple));\r\n  --_mono-tabs-neutral: var(--mono-tabs-neutral, var(--neutral));\r\n  --_mono-tabs-dark: var(--mono-tabs-dark, var(--dark));\r\n  /* the colour in play — `primary` unless a [mono-color] rule re-points it */\r\n  --_mono-tabs-accent: var(--mono-tabs-accent, var(--_mono-tabs-accent-preset, var(--_mono-tabs-primary)));\r\n\r\n  /* ── inks. `text-foreground/60 → text-foreground`, and the dark-mode pair\r\n        `text-muted-foreground → text-foreground`, ride one mode token. ────── */\r\n  --_mono-tabs-text: var(--mono-tabs-text, var(--foreground));\r\n  --_mono-tabs-muted: var(--mono-tabs-muted, var(--mono-mode-tab-inactive-fg));\r\n  /* `-background` is the pre-port name for the strip's own fill, honoured\r\n     until 2.0; `-surface` named the SELECTED tab's fill and is read there. */\r\n  --_mono-tabs-bg: var(--mono-tabs-bg, var(--mono-tabs-background, var(--muted)));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────── */\r\n  --_mono-tabs-height: var(--mono-tabs-height, var(--_mono-tabs-height-preset, var(--mono-tabs-height-md, var(--mono-control-height-md))));\r\n  --_mono-tabs-radius: var(--mono-tabs-radius, var(--_mono-tabs-radius-preset, var(--mono-tabs-radius-md, var(--mono-radius-lg))));\r\n  --_mono-tabs-padding: var(--mono-tabs-padding, var(--_mono-tabs-padding-preset, var(--mono-tabs-padding-md, 3px)));\r\n  /* `--mono-tabs-gap` named the gap INSIDE a tab before the port and still\r\n     does; the STRIP's own gap — upstream's `gap-1` on the line variant — is a\r\n     new thing and gets a new name. */\r\n  --_mono-tabs-gap: var(--mono-tabs-strip-gap, var(--_mono-tabs-gap-preset, 0px));\r\n\r\n  --_mono-tabs-tab-radius: var(--mono-tabs-tab-radius, var(--_mono-tabs-tab-radius-preset, var(--mono-tabs-tab-radius-md, var(--mono-radius-md))));\r\n  /* `-pad-x` / `-pad-y` / `-gap` without the `tab-` are the pre-port names for\r\n     these three, honoured until 2.0. */\r\n  --_mono-tabs-tab-pad-x: var(--mono-tabs-tab-pad-x, var(--mono-tabs-pad-x, var(--_mono-tabs-tab-pad-x-preset, var(--mono-tabs-tab-pad-x-md, calc(var(--mono-spacing) * 2)))));\r\n  --_mono-tabs-tab-pad-y: var(--mono-tabs-tab-pad-y, var(--mono-tabs-pad-y, var(--_mono-tabs-tab-pad-y-preset, var(--mono-tabs-tab-pad-y-md, var(--mono-spacing)))));\r\n  --_mono-tabs-tab-gap: var(--mono-tabs-tab-gap, var(--mono-tabs-gap, var(--_mono-tabs-tab-gap-preset, var(--mono-tabs-tab-gap-md, calc(var(--mono-spacing) * 1.5)))));\r\n  --_mono-tabs-font: var(--mono-tabs-font, var(--_mono-tabs-font-preset, var(--mono-tabs-tab-font-md, var(--mono-text-sm))));\r\n  --_mono-tabs-line-height: var(--mono-tabs-line-height, var(--_mono-tabs-line-height-preset, var(--mono-text-sm--lh)));\r\n  --_mono-tabs-font-weight: var(--mono-tabs-font-weight, var(--mono-tabs-tab-font-weight, var(--mono-font-weight-medium)));\r\n  --_mono-tabs-text-transform: var(--mono-tabs-text-transform, var(--mono-tabs-tab-text-transform, none));\r\n  --_mono-tabs-letter-spacing: var(--mono-tabs-letter-spacing, var(--mono-tabs-tab-letter-spacing, normal));\r\n  --_mono-tabs-icon-size: var(--mono-tabs-icon-size, var(--_mono-tabs-icon-size-preset, var(--mono-tabs-icon-size-md, calc(var(--mono-spacing) * 4))));\r\n\r\n  /* ── the selected PILL — `bg-background shadow-sm`, dark `border-input\r\n        bg-input/30`, both carried by mode tokens ─────────────────────────── */\r\n  --_mono-tabs-active-bg: var(--mono-tabs-active-bg, var(--mono-tabs-surface, var(--mono-mode-tab-active-bg)));\r\n  --_mono-tabs-active-border: var(--mono-tabs-active-border, var(--mono-mode-tab-active-border));\r\n  --_mono-tabs-active-shadow: var(--mono-tabs-active-shadow, var(--mono-shadow-sm));\r\n  /* EXTENSION: upstream's selected tab is `text-foreground`; ours takes the role,\r\n     which IS the foreground under the Basecoat palette. */\r\n  --_mono-tabs-active-color: var(--mono-tabs-active-color, var(--_mono-tabs-accent));\r\n\r\n  /* ── the LINE bar — `after:bg-foreground h-0.5 bottom-[-5px]` ──────────── */\r\n  --_mono-tabs-line-color: var(--mono-tabs-line-color, var(--_mono-tabs-accent));\r\n  --_mono-tabs-line-size: var(--mono-tabs-line-size, 2px);\r\n  --_mono-tabs-line-offset: var(--mono-tabs-line-offset, -5px);\r\n  /* EXTENSION, off by default: upstream's line variant has no baseline rule\r\n     under the strip, only the bar under the selected tab. A flavor or consumer\r\n     that wants the old full-width rule sets this. */\r\n  --_mono-tabs-line-track-color: var(--mono-tabs-line-track-color, transparent);\r\n  --_mono-tabs-line-track-size: var(--mono-tabs-line-track-size, var(--_mono-tabs-line-size));\r\n\r\n  /* ── focus — `focus-visible:border-ring ring-ring/50 ring-[3px]` ───────── */\r\n  --_mono-tabs-ring-color: var(--mono-tabs-ring-color, var(--ring));\r\n  --_mono-tabs-ring-width: var(--mono-tabs-ring-width, var(--mono-ring-width));\r\n\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  max-width: 100%;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: var(--_mono-tabs-gap);\r\n  box-sizing: border-box;\r\n  height: var(--_mono-tabs-height);\r\n  padding: var(--_mono-tabs-padding);\r\n  border-radius: var(--_mono-tabs-radius);\r\n  color: var(--muted-foreground);\r\n  font-family: inherit;\r\n}\r\n\r\n[mono-tabs],\r\n:where([mono-tabs]) *,\r\n:where([mono-tabs]) *::before,\r\n:where([mono-tabs]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* basecoat@1.0.2 components/tabs.css .tabs >> > [role='tablist'] >> &[aria-orientation='vertical']\r\n   — h-fit flex-col */\r\n[mono-tabs][aria-orientation=\"vertical\"] {\r\n  height: fit-content;\r\n  flex-direction: column;\r\n}\r\n\r\n/* =========================================\r\n   Variants — upstream's default tablist and its `[data-variant='line']`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist']:not([data-variant='line']) — bg-muted */\r\n[mono-tabs][mono-variant=\"pill\"] {\r\n  background: var(--_mono-tabs-bg);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'][data-variant='line']\r\n   — gap-1 rounded-none bg-transparent */\r\n[mono-tabs]:is(:not([mono-variant]), [mono-variant=\"underline\"]) {\r\n  --_mono-tabs-gap: var(--mono-tabs-strip-gap, var(--mono-spacing));\r\n  border-radius: 0;\r\n  background: transparent;\r\n  /* EXTENSION — the baseline rule, off unless a flavor or consumer turns it on. */\r\n  box-shadow: inset 0 calc(-1 * var(--_mono-tabs-line-track-size)) 0 0 var(--_mono-tabs-line-track-color);\r\n}\r\n\r\n/* EXTENSION — a bare strip whose tabs wash on hover and hold a tint when selected. */\r\n[mono-tabs][mono-variant=\"ghost\"] {\r\n  --_mono-tabs-gap: var(--mono-tabs-strip-gap, var(--mono-spacing));\r\n  background: transparent;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: Basecoat ships ONE tab size; md is its `[role='tablist']`\r\n   ========================================= */\r\n\r\n[mono-tabs][mono-size=\"xs\"] {\r\n  --_mono-tabs-height-preset: var(--mono-control-height-xs);\r\n  --_mono-tabs-radius-preset: var(--mono-tabs-radius-xs, var(--mono-radius-md));\r\n  --_mono-tabs-padding-preset: var(--mono-tabs-padding-xs, 2px);\r\n  --_mono-tabs-tab-radius-preset: var(--mono-tabs-tab-radius-xs, var(--mono-radius-sm));\r\n  --_mono-tabs-tab-pad-x-preset: var(--mono-tabs-tab-pad-x-xs, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-tabs-tab-pad-y-preset: var(--mono-tabs-tab-pad-y-xs, calc(var(--mono-spacing) * 0.25));\r\n  --_mono-tabs-tab-gap-preset: calc(var(--mono-spacing) * 1);\r\n  --_mono-tabs-font-preset: var(--mono-tabs-tab-font-xs, var(--mono-text-xs));\r\n  --_mono-tabs-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-tabs-icon-size-preset: var(--mono-tabs-icon-size-xs, calc(var(--mono-spacing) * 3));\r\n}\r\n\r\n[mono-tabs][mono-size=\"sm\"] {\r\n  --_mono-tabs-height-preset: var(--mono-control-height-sm);\r\n  --_mono-tabs-radius-preset: var(--mono-tabs-radius-sm, var(--mono-radius-md));\r\n  --_mono-tabs-padding-preset: var(--mono-tabs-padding-sm, 2px);\r\n  --_mono-tabs-tab-radius-preset: var(--mono-tabs-tab-radius-sm, var(--mono-radius-sm));\r\n  --_mono-tabs-tab-pad-x-preset: var(--mono-tabs-tab-pad-x-sm, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-tabs-tab-pad-y-preset: var(--mono-tabs-tab-pad-y-sm, calc(var(--mono-spacing) * 0.5));\r\n  --_mono-tabs-tab-gap-preset: calc(var(--mono-spacing) * 1.25);\r\n  --_mono-tabs-font-preset: var(--mono-tabs-tab-font-sm, var(--mono-text-xs));\r\n  --_mono-tabs-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-tabs-icon-size-preset: var(--mono-tabs-icon-size-sm, calc(var(--mono-spacing) * 3.5));\r\n}\r\n\r\n[mono-tabs][mono-size=\"lg\"] {\r\n  --_mono-tabs-height-preset: var(--mono-control-height-lg);\r\n  --_mono-tabs-radius-preset: var(--mono-tabs-radius-lg, var(--mono-radius-lg));\r\n  --_mono-tabs-padding-preset: var(--mono-tabs-padding-lg, 4px);\r\n  --_mono-tabs-tab-radius-preset: var(--mono-tabs-tab-radius-lg, var(--mono-radius-md));\r\n  --_mono-tabs-tab-pad-x-preset: var(--mono-tabs-tab-pad-x-lg, calc(var(--mono-spacing) * 3));\r\n  --_mono-tabs-tab-pad-y-preset: var(--mono-tabs-tab-pad-y-lg, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-tabs-tab-gap-preset: calc(var(--mono-spacing) * 2);\r\n  --_mono-tabs-font-preset: var(--mono-tabs-tab-font-lg, var(--mono-text-sm));\r\n  --_mono-tabs-icon-size-preset: var(--mono-tabs-icon-size-lg, calc(var(--mono-spacing) * 4.5));\r\n}\r\n\r\n[mono-tabs][mono-size=\"xl\"] {\r\n  --_mono-tabs-height-preset: var(--mono-control-height-xl);\r\n  --_mono-tabs-radius-preset: var(--mono-tabs-radius-xl, var(--mono-radius-xl));\r\n  --_mono-tabs-padding-preset: var(--mono-tabs-padding-xl, 5px);\r\n  --_mono-tabs-tab-radius-preset: var(--mono-tabs-tab-radius-xl, var(--mono-radius-lg));\r\n  --_mono-tabs-tab-pad-x-preset: var(--mono-tabs-tab-pad-x-xl, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-tabs-tab-pad-y-preset: var(--mono-tabs-tab-pad-y-xl, calc(var(--mono-spacing) * 2));\r\n  --_mono-tabs-tab-gap-preset: calc(var(--mono-spacing) * 2.25);\r\n  --_mono-tabs-font-preset: var(--mono-tabs-tab-font-xl, var(--mono-text-base));\r\n  --_mono-tabs-line-height-preset: var(--mono-text-base--lh);\r\n  --_mono-tabs-icon-size-preset: var(--mono-tabs-icon-size-xl, calc(var(--mono-spacing) * 5));\r\n}\r\n\r\n[mono-tabs][mono-size=\"xxl\"] {\r\n  --_mono-tabs-height-preset: var(--mono-control-height-xxl);\r\n  --_mono-tabs-radius-preset: var(--mono-tabs-radius-xxl, var(--mono-radius-xl));\r\n  --_mono-tabs-padding-preset: var(--mono-tabs-padding-xxl, 6px);\r\n  --_mono-tabs-tab-radius-preset: var(--mono-tabs-tab-radius-xxl, var(--mono-radius-lg));\r\n  --_mono-tabs-tab-pad-x-preset: var(--mono-tabs-tab-pad-x-xxl, calc(var(--mono-spacing) * 4));\r\n  --_mono-tabs-tab-pad-y-preset: var(--mono-tabs-tab-pad-y-xxl, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-tabs-tab-gap-preset: calc(var(--mono-spacing) * 2.5);\r\n  --_mono-tabs-font-preset: var(--mono-tabs-tab-font-xxl, var(--mono-text-lg));\r\n  --_mono-tabs-line-height-preset: var(--mono-text-lg--lh);\r\n  --_mono-tabs-icon-size-preset: var(--mono-tabs-icon-size-xxl, calc(var(--mono-spacing) * 5.5));\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the role inks the selected tab and the line bar\r\n   ========================================= */\r\n\r\n[mono-tabs][mono-color=\"primary\"] { --_mono-tabs-accent-preset: var(--_mono-tabs-primary); }\r\n[mono-tabs][mono-color=\"secondary\"] { --_mono-tabs-accent-preset: var(--_mono-tabs-secondary); }\r\n[mono-tabs][mono-color=\"success\"] { --_mono-tabs-accent-preset: var(--_mono-tabs-success); }\r\n[mono-tabs][mono-color=\"danger\"] { --_mono-tabs-accent-preset: var(--_mono-tabs-danger); }\r\n[mono-tabs][mono-color=\"warning\"] { --_mono-tabs-accent-preset: var(--_mono-tabs-warning); }\r\n[mono-tabs][mono-color=\"info\"] { --_mono-tabs-accent-preset: var(--_mono-tabs-info); }\r\n[mono-tabs][mono-color=\"teal\"] { --_mono-tabs-accent-preset: var(--_mono-tabs-teal); }\r\n[mono-tabs][mono-color=\"purple\"] { --_mono-tabs-accent-preset: var(--_mono-tabs-purple); }\r\n[mono-tabs][mono-color=\"neutral\"] { --_mono-tabs-accent-preset: var(--_mono-tabs-neutral); }\r\n[mono-tabs][mono-color=\"dark\"] { --_mono-tabs-accent-preset: var(--_mono-tabs-dark); }\r\n\r\n/* =========================================\r\n   Tab — `> [role='tab']`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/tabs.css .tabs >> > [role='tablist'] >> > [role='tab']\r\n   — relative inline-flex flex-1 items-center justify-center whitespace-nowrap\r\n   transition-all outline-none, disabled:pointer-events-none disabled:opacity-50 */\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'] > [role='tab']\r\n   — gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium,\r\n   text-foreground/60 hover:text-foreground (dark: muted-foreground → foreground),\r\n   focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] */\r\n:where([mono-tabs]) > [mono-tab] {\r\n  position: relative;\r\n  display: inline-flex;\r\n  flex: 1 1 auto;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: var(--_mono-tabs-tab-gap);\r\n  padding: var(--_mono-tabs-tab-pad-y) var(--_mono-tabs-tab-pad-x);\r\n  border: var(--mono-border-width) solid transparent;\r\n  border-radius: var(--_mono-tabs-tab-radius);\r\n  background: transparent;\r\n  color: var(--_mono-tabs-muted);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-tabs-font);\r\n  line-height: var(--_mono-tabs-line-height);\r\n  font-weight: var(--_mono-tabs-font-weight);\r\n  text-transform: var(--_mono-tabs-text-transform);\r\n  letter-spacing: var(--_mono-tabs-letter-spacing);\r\n  white-space: nowrap;\r\n  text-decoration: none;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  outline: none;\r\n  appearance: none;\r\n  transition:\r\n    color var(--mono-duration) var(--mono-ease),\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@media (hover: hover) {\r\n  [mono-tabs] > [mono-tab]:hover:not(:disabled):not([aria-disabled=\"true\"]) {\r\n    color: var(--_mono-tabs-text);\r\n  }\r\n}\r\n\r\n[mono-tabs] > [mono-tab]:focus-visible {\r\n  border-color: var(--_mono-tabs-ring-color);\r\n  box-shadow: 0 0 0 var(--_mono-tabs-ring-width)\r\n    color-mix(in oklab, var(--_mono-tabs-ring-color) var(--mono-ring-alpha), transparent);\r\n}\r\n\r\n/* basecoat@1.0.2 components/tabs.css .tabs >> > [role='tablist'] >> > [role='tab']\r\n   — disabled:pointer-events-none disabled:opacity-50. DEVIATION: 0.45, this\r\n   component's pre-port value. */\r\n[mono-tabs] > [mono-tab]:disabled,\r\n[mono-tabs] > [mono-tab][aria-disabled=\"true\"],\r\n[mono-tabs][mono-disabled] > [mono-tab] {\r\n  opacity: 0.45;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'][aria-orientation='vertical'] > [role='tab']\r\n   — w-full justify-start */\r\n[mono-tabs][aria-orientation=\"vertical\"] > [mono-tab] {\r\n  width: 100%;\r\n  justify-content: flex-start;\r\n}\r\n\r\n/* Upstream suppresses the host page's generic anchor decoration the same way a\r\n   button would; tabs render as <button> today, but the rule is kept for a future\r\n   anchor tab (an `href` / RouterLink integration) — and for VitePress, whose\r\n   `.vp-doc a` would otherwise underline one. */\r\n[mono-tabs] a[mono-tab],\r\n[mono-tabs] a[mono-tab]:hover,\r\n[mono-tabs] a[mono-tab]:focus {\r\n  text-decoration: none;\r\n}\r\n\r\n[mono-tabs] a[mono-tab]::after {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Selected — `[aria-selected='true']`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist']:not([data-variant='line']) > [role='tab'][aria-selected='true']\r\n   — bg-background text-foreground shadow-sm, dark border-input bg-input/30 */\r\n[mono-tabs][mono-variant=\"pill\"] > [mono-tab][aria-selected=\"true\"] {\r\n  background: var(--_mono-tabs-active-bg);\r\n  border-color: var(--_mono-tabs-active-border);\r\n  box-shadow: var(--_mono-tabs-active-shadow);\r\n  color: var(--_mono-tabs-active-color);\r\n}\r\n\r\n/* EXTENSION — ghost holds a tint instead of a raised pill. */\r\n[mono-tabs][mono-variant=\"ghost\"] > [mono-tab][aria-selected=\"true\"] {\r\n  background: var(--mono-tabs-ghost-active-bg,\r\n    color-mix(in oklab, var(--_mono-tabs-accent) var(--mono-mode-tint), transparent));\r\n  color: var(--_mono-tabs-active-color);\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-tabs][mono-variant=\"ghost\"] > [mono-tab]:hover:not(:disabled):not([aria-selected=\"true\"]) {\r\n    background: var(--mono-tabs-ghost-hover-bg, var(--mono-mode-ghost-hover));\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'][data-variant='line'] > [role='tab'][aria-selected='true']\r\n   — bg-transparent text-foreground shadow-none after:opacity-100 */\r\n[mono-tabs]:is(:not([mono-variant]), [mono-variant=\"underline\"]) > [mono-tab][aria-selected=\"true\"] {\r\n  background: transparent;\r\n  box-shadow: none;\r\n  color: var(--_mono-tabs-active-color);\r\n}\r\n\r\n/* =========================================\r\n   The line bar — the `::after` upstream reveals\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'] > [role='tab']\r\n   — after:absolute after:bg-foreground after:opacity-0 after:transition-opacity */\r\n:where([mono-tabs]) > [mono-tab]::after {\r\n  content: '';\r\n  position: absolute;\r\n  background: var(--_mono-tabs-line-color);\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  transition: opacity var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'][data-variant='line'][aria-orientation='horizontal'] > [role='tab']\r\n   — after:inset-x-0 after:bottom-[-5px] after:h-0.5 */\r\n[mono-tabs]:is(:not([mono-variant]), [mono-variant=\"underline\"]):not([aria-orientation=\"vertical\"]) > [mono-tab]::after {\r\n  inset-inline: 0;\r\n  bottom: var(--_mono-tabs-line-offset);\r\n  height: var(--_mono-tabs-line-size);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'][data-variant='line'][aria-orientation='vertical'] > [role='tab']\r\n   — after:inset-y-0 after:end-[-4px] after:w-0.5 */\r\n[mono-tabs]:is(:not([mono-variant]), [mono-variant=\"underline\"])[aria-orientation=\"vertical\"] > [mono-tab]::after {\r\n  inset-block: 0;\r\n  inset-inline-end: calc(var(--_mono-tabs-line-offset) + 1px);\r\n  width: var(--_mono-tabs-line-size);\r\n}\r\n\r\n[mono-tabs]:is(:not([mono-variant]), [mono-variant=\"underline\"]) > [mono-tab][aria-selected=\"true\"]::after {\r\n  opacity: 1;\r\n}\r\n\r\n/* =========================================\r\n   Icon — `[&_svg:not([class*='size-'])]:size-4`\r\n   ========================================= */\r\n\r\n:where([mono-tabs] > [mono-tab]) > [mono-icon] {\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-tabs-icon-size);\r\n  height: var(--_mono-tabs-icon-size);\r\n  color: inherit;\r\n  line-height: 1;\r\n  pointer-events: none;\r\n}\r\n\r\n/* Light: the `[data-mono-slot]` placeholder the svg is moved into. Shadow: the\r\n   projected svg. Either way it fills the box upstream sizes. */\r\n[mono-tabs] > [mono-tab] > [mono-icon] > :is(svg, span, [data-mono-slot]),\r\n[mono-tabs] > [mono-tab] > [mono-icon] > [data-mono-slot] > svg,\r\n[mono-tabs] > [mono-tab] > [mono-icon] slot::slotted(svg) {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'] > [role='tab']:has(> svg:first-child)\r\n   — ps-1.5. A tab that LEADS with a glyph tucks in on that side.\r\n\r\n   `:not([mono-empty])` is what keeps the two builds equal: the shadow one\r\n   renders an icon box for every tab (DSD has to have something to project into)\r\n   and marks the empty ones, so a bare `:has()` tucked in EVERY shadow tab. */\r\n[mono-tabs] > [mono-tab]:has(> [mono-icon]:first-child:not([mono-empty])) {\r\n  padding-inline-start: var(--mono-tabs-tab-icon-pad, calc(var(--mono-spacing) * 1.5));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'] > [role='tab']:has(> svg:last-child)\r\n   — pe-1.5 */\r\n[mono-tabs] > [mono-tab]:has(> [mono-icon]:last-child:not([mono-empty])) {\r\n  padding-inline-end: var(--mono-tabs-tab-icon-pad, calc(var(--mono-spacing) * 1.5));\r\n}\r\n\r\n/* The shadow build renders the icon box for every tab (DSD projects into it) and\r\n   marks the empty ones; the light build renders only what it captured. */\r\n[mono-tabs] > [mono-tab] > [mono-icon][mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Label + badge\r\n   ========================================= */\r\n\r\n:where([mono-tabs] > [mono-tab]) > [mono-label] {\r\n  display: inline-block;\r\n  line-height: inherit;\r\n  text-decoration: none;\r\n}\r\n\r\n/* EXTENSION — a count beside the label. Upstream has no badge. */\r\n:where([mono-tabs] > [mono-tab]) > [mono-badge] {\r\n  --_mono-tabs-badge-size: var(--mono-tabs-badge-size, calc(var(--mono-spacing) * 4.5));\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: var(--_mono-tabs-badge-size);\r\n  height: var(--_mono-tabs-badge-size);\r\n  padding-inline: calc(var(--mono-spacing) * 1.25);\r\n  border-radius: var(--mono-radius-full);\r\n  background: var(--mono-tabs-badge-bg, color-mix(in oklab, var(--foreground) 10%, transparent));\r\n  color: var(--mono-tabs-badge-color, var(--_mono-tabs-muted));\r\n  font-size: var(--mono-tabs-badge-font, var(--mono-text-xs));\r\n  font-weight: var(--mono-font-weight-semibold);\r\n  font-variant-numeric: tabular-nums;\r\n  line-height: 1;\r\n}\r\n\r\n[mono-tabs] > [mono-tab][aria-selected=\"true\"] > [mono-badge] {\r\n  background: var(--mono-tabs-badge-active-bg, var(--_mono-tabs-accent));\r\n  color: var(--mono-tabs-badge-active-color, var(--primary-foreground));\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-tabs] > [mono-tab],\r\n  [mono-tabs] > [mono-tab]::after {\r\n    transition: none;\r\n  }\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\tabs\tabs.css?raw.js
+var tabs_css_raw_default = "/* @unocss-include */\r\n\r\n/* =========================================================================\r\n   mono-tabs — a port of Basecoat's `.tabs` (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-tabs size=\"lg\" color=\"success\" variant=\"pill\" model-value=\"a\">\r\n     <div mono-tabs mono-size=\"lg\" mono-color=\"success\" mono-variant=\"pill\"\r\n          role=\"tablist\" aria-orientation=\"horizontal\">\r\n       <button mono-tab type=\"button\" role=\"tab\" aria-selected=\"true\">\r\n         <span mono-icon>…</span>\r\n         <span mono-label>Overview</span>\r\n         <span mono-badge>3</span>\r\n       </button>\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])` = underline). The\r\n   element writes them on its root — the host in the light build, an inner root\r\n   in the shadow one — plus `mono-disabled`. The old classes\r\n   (`.mono-tabs.md.primary.variant-pill`, `.mono-tabs-tab.on`) are still emitted\r\n   as inert hooks until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-tabs]                     ≡ .tabs > [role='tablist'] (inline-flex w-fit\r\n                                       items-center justify-center rounded-lg\r\n                                       p-[3px] h-9, bg-muted unless line)\r\n                                       — DEVIATION: this element renders the STRIP\r\n                                       only, never the panels, so there is no\r\n                                       `.tabs` wrapper. Its job — the flex\r\n                                       direction and the `gap-2` to the panel —\r\n                                       belongs to the consumer's own layout.\r\n     [mono-variant=\"pill\"]           ≡ the DEFAULT tablist (upstream has no name\r\n                                       for it; ours is `pill`)\r\n     [mono-variant=\"underline\"]      ≡ [data-variant='line'] (gap-1 rounded-none\r\n                                       bg-transparent, selected via the ::after bar)\r\n     [mono-variant=\"ghost\"]          ≡ EXTENSION\r\n     [aria-orientation=\"vertical\"]   ≡ [aria-orientation='vertical'] (h-fit\r\n                                       flex-col; tabs w-full justify-start)\r\n     [mono-tab]                      ≡ > [role='tab'] (relative inline-flex flex-1\r\n                                       items-center justify-center whitespace-nowrap\r\n                                       gap-1.5 rounded-md border border-transparent\r\n                                       px-2 py-1 text-sm font-medium, ink\r\n                                       foreground/60 → foreground on hover)\r\n     [mono-tab][aria-selected=true]  ≡ [role='tab'][aria-selected='true'] — the\r\n                                       pill fill (bg-background shadow-sm, dark\r\n                                       border-input bg-input/30) or the line bar\r\n     [mono-tab]::after               ≡ the `after:` bar the line variant reveals\r\n                                       (inset-x-0 bottom-[-5px] h-0.5 bg-foreground)\r\n     [mono-icon]                     ≡ [&_svg:not([class*='size-'])]:size-4, plus\r\n                                       upstream's ps-1.5 / pe-1.5 when a tab leads\r\n                                       or trails with one\r\n     [mono-label]                    ≡ the tab's own text\r\n     [mono-badge]                    ≡ EXTENSION\r\n     [mono-size]/[mono-color]        ≡ EXTENSION (upstream ships one size, no colour)\r\n\r\n   PART NAMES ARE PATH-SCOPED. `[mono-icon]`, `[mono-label]` and `[mono-badge]`\r\n   are also button's, input's and card's part names, so every rule here is\r\n   written as a child path from the root — `:where([mono-tabs] > [mono-tab]) >\r\n   [mono-label]`. The `:where()` keeps that at (0,1,0), the weight a\r\n   one-attribute rule would have, so a `cssClass` utility still wins by source\r\n   order.\r\n\r\n   STATE IS ARIA, not a class. `aria-selected` and `disabled` are what the\r\n   element already renders and what upstream keys on, so the port needs no\r\n   `mono-selected` of its own — and hand-written markup that is accessible is\r\n   styled correctly by construction.\r\n\r\n   FLAVORS set `--mono-tabs-{radius,padding,height,gap,tab-radius,tab-pad-x,\r\n   tab-pad-y,tab-font,tab-gap,tab-font-weight,tab-text-transform,\r\n   tab-letter-spacing,icon-size}`; every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"tabs\"` prints the matrix).\r\n   ========================================================================= */\r\n\r\nmono-tabs {\r\n  display: block;\r\n}\r\n\r\n/* =========================================\r\n   Root — the tablist\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/tabs.css .tabs >> > [role='tablist'] — text-muted-foreground\r\n   inline-flex w-fit items-center justify-center */\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'] — rounded-lg p-[3px] h-9 */\r\n[mono-tabs] {\r\n  /* ── the six roles, each a public knob over a Basecoat token ───────────── */\r\n  --_mono-tabs-primary: var(--mono-tabs-primary, var(--primary));\r\n  --_mono-tabs-secondary: var(--mono-tabs-secondary, var(--secondary-foreground));\r\n  --_mono-tabs-success: var(--mono-tabs-success, var(--success));\r\n  --_mono-tabs-danger: var(--mono-tabs-danger, var(--destructive));\r\n  --_mono-tabs-warning: var(--mono-tabs-warning, var(--warning));\r\n  --_mono-tabs-info: var(--mono-tabs-info, var(--info));\r\n  --_mono-tabs-teal: var(--mono-tabs-teal, var(--teal));\r\n  --_mono-tabs-purple: var(--mono-tabs-purple, var(--purple));\r\n  --_mono-tabs-neutral: var(--mono-tabs-neutral, var(--neutral));\r\n  --_mono-tabs-dark: var(--mono-tabs-dark, var(--dark));\r\n  /* the colour in play — `primary` unless a [mono-color] rule re-points it */\r\n  --_mono-tabs-accent: var(--mono-tabs-accent, var(--_mono-tabs-accent-preset, var(--_mono-tabs-primary)));\r\n\r\n  /* ── inks. `text-foreground/60 → text-foreground`, and the dark-mode pair\r\n        `text-muted-foreground → text-foreground`, ride one mode token. ────── */\r\n  --_mono-tabs-text: var(--mono-tabs-text, var(--foreground));\r\n  --_mono-tabs-muted: var(--mono-tabs-muted, var(--mono-mode-tab-inactive-fg));\r\n  /* `-background` is the pre-port name for the strip's own fill, honoured\r\n     until 2.0; `-surface` named the SELECTED tab's fill and is read there. */\r\n  --_mono-tabs-bg: var(--mono-tabs-bg, var(--mono-tabs-background, var(--muted)));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────── */\r\n  --_mono-tabs-height: var(--mono-tabs-height, var(--_mono-tabs-height-preset, var(--mono-tabs-height-md, var(--mono-control-height-md))));\r\n  --_mono-tabs-radius: var(--mono-tabs-radius, var(--_mono-tabs-radius-preset, var(--mono-tabs-radius-md, var(--mono-radius-lg))));\r\n  --_mono-tabs-padding: var(--mono-tabs-padding, var(--_mono-tabs-padding-preset, var(--mono-tabs-padding-md, 3px)));\r\n  /* `--mono-tabs-gap` named the gap INSIDE a tab before the port and still\r\n     does; the STRIP's own gap — upstream's `gap-1` on the line variant — is a\r\n     new thing and gets a new name. */\r\n  --_mono-tabs-gap: var(--mono-tabs-strip-gap, var(--_mono-tabs-gap-preset, 0px));\r\n\r\n  --_mono-tabs-tab-radius: var(--mono-tabs-tab-radius, var(--_mono-tabs-tab-radius-preset, var(--mono-tabs-tab-radius-md, var(--mono-radius-md))));\r\n  /* `-pad-x` / `-pad-y` / `-gap` without the `tab-` are the pre-port names for\r\n     these three, honoured until 2.0. */\r\n  --_mono-tabs-tab-pad-x: var(--mono-tabs-tab-pad-x, var(--mono-tabs-pad-x, var(--_mono-tabs-tab-pad-x-preset, var(--mono-tabs-tab-pad-x-md, calc(var(--mono-spacing) * 2)))));\r\n  --_mono-tabs-tab-pad-y: var(--mono-tabs-tab-pad-y, var(--mono-tabs-pad-y, var(--_mono-tabs-tab-pad-y-preset, var(--mono-tabs-tab-pad-y-md, var(--mono-spacing)))));\r\n  --_mono-tabs-tab-gap: var(--mono-tabs-tab-gap, var(--mono-tabs-gap, var(--_mono-tabs-tab-gap-preset, var(--mono-tabs-tab-gap-md, calc(var(--mono-spacing) * 1.5)))));\r\n  --_mono-tabs-font: var(--mono-tabs-font, var(--_mono-tabs-font-preset, var(--mono-tabs-tab-font-md, var(--mono-text-sm))));\r\n  --_mono-tabs-line-height: var(--mono-tabs-line-height, var(--_mono-tabs-line-height-preset, var(--mono-text-sm--lh)));\r\n  --_mono-tabs-font-weight: var(--mono-tabs-font-weight, var(--mono-tabs-tab-font-weight, var(--mono-font-weight-medium)));\r\n  --_mono-tabs-text-transform: var(--mono-tabs-text-transform, var(--mono-tabs-tab-text-transform, none));\r\n  --_mono-tabs-letter-spacing: var(--mono-tabs-letter-spacing, var(--mono-tabs-tab-letter-spacing, normal));\r\n  --_mono-tabs-icon-size: var(--mono-tabs-icon-size, var(--_mono-tabs-icon-size-preset, var(--mono-tabs-icon-size-md, calc(var(--mono-spacing) * 4))));\r\n\r\n  /* ── the selected PILL — `bg-background shadow-sm`, dark `border-input\r\n        bg-input/30`, both carried by mode tokens ─────────────────────────── */\r\n  --_mono-tabs-active-bg: var(--mono-tabs-active-bg, var(--mono-tabs-surface, var(--mono-mode-tab-active-bg)));\r\n  --_mono-tabs-active-border: var(--mono-tabs-active-border, var(--mono-mode-tab-active-border));\r\n  --_mono-tabs-active-shadow: var(--mono-tabs-active-shadow, var(--mono-shadow-sm));\r\n  /* EXTENSION: upstream's selected tab is `text-foreground`; ours takes the role,\r\n     which IS the foreground under the Basecoat palette. */\r\n  --_mono-tabs-active-color: var(--mono-tabs-active-color, var(--_mono-tabs-accent));\r\n\r\n  /* ── the LINE bar — `after:bg-foreground h-0.5 bottom-[-5px]` ──────────── */\r\n  --_mono-tabs-line-color: var(--mono-tabs-line-color, var(--_mono-tabs-accent));\r\n  --_mono-tabs-line-size: var(--mono-tabs-line-size, 2px);\r\n  --_mono-tabs-line-offset: var(--mono-tabs-line-offset, -5px);\r\n  /* EXTENSION, off by default: upstream's line variant has no baseline rule\r\n     under the strip, only the bar under the selected tab. A flavor or consumer\r\n     that wants the old full-width rule sets this. */\r\n  --_mono-tabs-line-track-color: var(--mono-tabs-line-track-color, transparent);\r\n  --_mono-tabs-line-track-size: var(--mono-tabs-line-track-size, var(--_mono-tabs-line-size));\r\n\r\n  /* ── focus — `focus-visible:border-ring ring-ring/50 ring-[3px]` ───────── */\r\n  --_mono-tabs-ring-color: var(--mono-tabs-ring-color, var(--ring));\r\n  --_mono-tabs-ring-width: var(--mono-tabs-ring-width, var(--mono-ring-width));\r\n\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  max-width: 100%;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: var(--_mono-tabs-gap);\r\n  box-sizing: border-box;\r\n  height: var(--_mono-tabs-height);\r\n  padding: var(--_mono-tabs-padding);\r\n  border-radius: var(--_mono-tabs-radius);\r\n  color: var(--muted-foreground);\r\n  font-family: inherit;\r\n}\r\n\r\n[mono-tabs],\r\n:where([mono-tabs]) *,\r\n:where([mono-tabs]) *::before,\r\n:where([mono-tabs]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* basecoat@1.0.2 components/tabs.css .tabs >> > [role='tablist'] >> &[aria-orientation='vertical']\r\n   — h-fit flex-col */\r\n[mono-tabs][aria-orientation=\"vertical\"] {\r\n  height: fit-content;\r\n  flex-direction: column;\r\n}\r\n\r\n/* =========================================\r\n   Variants — upstream's default tablist and its `[data-variant='line']`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist']:not([data-variant='line']) — bg-muted */\r\n[mono-tabs][mono-variant=\"pill\"] {\r\n  background: var(--_mono-tabs-bg);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'][data-variant='line']\r\n   — gap-1 rounded-none bg-transparent */\r\n[mono-tabs]:is(:not([mono-variant]), [mono-variant=\"underline\"]) {\r\n  --_mono-tabs-gap: var(--mono-tabs-strip-gap, var(--mono-spacing));\r\n  border-radius: 0;\r\n  background: transparent;\r\n  /* EXTENSION — the baseline rule, off unless a flavor or consumer turns it on. */\r\n  box-shadow: inset 0 calc(-1 * var(--_mono-tabs-line-track-size)) 0 0 var(--_mono-tabs-line-track-color);\r\n}\r\n\r\n/* EXTENSION — a bare strip whose tabs wash on hover and hold a tint when selected. */\r\n[mono-tabs][mono-variant=\"ghost\"] {\r\n  --_mono-tabs-gap: var(--mono-tabs-strip-gap, var(--mono-spacing));\r\n  background: transparent;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: Basecoat ships ONE tab size; md is its `[role='tablist']`\r\n   ========================================= */\r\n\r\n[mono-tabs][mono-size=\"xs\"] {\r\n  --_mono-tabs-height-preset: var(--mono-control-height-xs);\r\n  --_mono-tabs-radius-preset: var(--mono-tabs-radius-xs, var(--mono-radius-md));\r\n  --_mono-tabs-padding-preset: var(--mono-tabs-padding-xs, 2px);\r\n  --_mono-tabs-tab-radius-preset: var(--mono-tabs-tab-radius-xs, var(--mono-radius-sm));\r\n  --_mono-tabs-tab-pad-x-preset: var(--mono-tabs-tab-pad-x-xs, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-tabs-tab-pad-y-preset: var(--mono-tabs-tab-pad-y-xs, calc(var(--mono-spacing) * 0.25));\r\n  --_mono-tabs-tab-gap-preset: calc(var(--mono-spacing) * 1);\r\n  --_mono-tabs-font-preset: var(--mono-tabs-tab-font-xs, var(--mono-text-xs));\r\n  --_mono-tabs-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-tabs-icon-size-preset: var(--mono-tabs-icon-size-xs, calc(var(--mono-spacing) * 3));\r\n}\r\n\r\n[mono-tabs][mono-size=\"sm\"] {\r\n  --_mono-tabs-height-preset: var(--mono-control-height-sm);\r\n  --_mono-tabs-radius-preset: var(--mono-tabs-radius-sm, var(--mono-radius-md));\r\n  --_mono-tabs-padding-preset: var(--mono-tabs-padding-sm, 2px);\r\n  --_mono-tabs-tab-radius-preset: var(--mono-tabs-tab-radius-sm, var(--mono-radius-sm));\r\n  --_mono-tabs-tab-pad-x-preset: var(--mono-tabs-tab-pad-x-sm, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-tabs-tab-pad-y-preset: var(--mono-tabs-tab-pad-y-sm, calc(var(--mono-spacing) * 0.5));\r\n  --_mono-tabs-tab-gap-preset: calc(var(--mono-spacing) * 1.25);\r\n  --_mono-tabs-font-preset: var(--mono-tabs-tab-font-sm, var(--mono-text-xs));\r\n  --_mono-tabs-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-tabs-icon-size-preset: var(--mono-tabs-icon-size-sm, calc(var(--mono-spacing) * 3.5));\r\n}\r\n\r\n[mono-tabs][mono-size=\"lg\"] {\r\n  --_mono-tabs-height-preset: var(--mono-control-height-lg);\r\n  --_mono-tabs-radius-preset: var(--mono-tabs-radius-lg, var(--mono-radius-lg));\r\n  --_mono-tabs-padding-preset: var(--mono-tabs-padding-lg, 4px);\r\n  --_mono-tabs-tab-radius-preset: var(--mono-tabs-tab-radius-lg, var(--mono-radius-md));\r\n  --_mono-tabs-tab-pad-x-preset: var(--mono-tabs-tab-pad-x-lg, calc(var(--mono-spacing) * 3));\r\n  --_mono-tabs-tab-pad-y-preset: var(--mono-tabs-tab-pad-y-lg, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-tabs-tab-gap-preset: calc(var(--mono-spacing) * 2);\r\n  --_mono-tabs-font-preset: var(--mono-tabs-tab-font-lg, var(--mono-text-sm));\r\n  --_mono-tabs-icon-size-preset: var(--mono-tabs-icon-size-lg, calc(var(--mono-spacing) * 4.5));\r\n}\r\n\r\n[mono-tabs][mono-size=\"xl\"] {\r\n  --_mono-tabs-height-preset: var(--mono-control-height-xl);\r\n  --_mono-tabs-radius-preset: var(--mono-tabs-radius-xl, var(--mono-radius-xl));\r\n  --_mono-tabs-padding-preset: var(--mono-tabs-padding-xl, 5px);\r\n  --_mono-tabs-tab-radius-preset: var(--mono-tabs-tab-radius-xl, var(--mono-radius-lg));\r\n  --_mono-tabs-tab-pad-x-preset: var(--mono-tabs-tab-pad-x-xl, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-tabs-tab-pad-y-preset: var(--mono-tabs-tab-pad-y-xl, calc(var(--mono-spacing) * 2));\r\n  --_mono-tabs-tab-gap-preset: calc(var(--mono-spacing) * 2.25);\r\n  --_mono-tabs-font-preset: var(--mono-tabs-tab-font-xl, var(--mono-text-base));\r\n  --_mono-tabs-line-height-preset: var(--mono-text-base--lh);\r\n  --_mono-tabs-icon-size-preset: var(--mono-tabs-icon-size-xl, calc(var(--mono-spacing) * 5));\r\n}\r\n\r\n[mono-tabs][mono-size=\"xxl\"] {\r\n  --_mono-tabs-height-preset: var(--mono-control-height-xxl);\r\n  --_mono-tabs-radius-preset: var(--mono-tabs-radius-xxl, var(--mono-radius-xl));\r\n  --_mono-tabs-padding-preset: var(--mono-tabs-padding-xxl, 6px);\r\n  --_mono-tabs-tab-radius-preset: var(--mono-tabs-tab-radius-xxl, var(--mono-radius-lg));\r\n  --_mono-tabs-tab-pad-x-preset: var(--mono-tabs-tab-pad-x-xxl, calc(var(--mono-spacing) * 4));\r\n  --_mono-tabs-tab-pad-y-preset: var(--mono-tabs-tab-pad-y-xxl, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-tabs-tab-gap-preset: calc(var(--mono-spacing) * 2.5);\r\n  --_mono-tabs-font-preset: var(--mono-tabs-tab-font-xxl, var(--mono-text-lg));\r\n  --_mono-tabs-line-height-preset: var(--mono-text-lg--lh);\r\n  --_mono-tabs-icon-size-preset: var(--mono-tabs-icon-size-xxl, calc(var(--mono-spacing) * 5.5));\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the role inks the selected tab and the line bar\r\n   ========================================= */\r\n\r\n[mono-tabs][mono-color=\"primary\"] { --_mono-tabs-accent-preset: var(--_mono-tabs-primary); }\r\n[mono-tabs][mono-color=\"secondary\"] { --_mono-tabs-accent-preset: var(--_mono-tabs-secondary); }\r\n[mono-tabs][mono-color=\"success\"] { --_mono-tabs-accent-preset: var(--_mono-tabs-success); }\r\n[mono-tabs][mono-color=\"danger\"] { --_mono-tabs-accent-preset: var(--_mono-tabs-danger); }\r\n[mono-tabs][mono-color=\"warning\"] { --_mono-tabs-accent-preset: var(--_mono-tabs-warning); }\r\n[mono-tabs][mono-color=\"info\"] { --_mono-tabs-accent-preset: var(--_mono-tabs-info); }\r\n[mono-tabs][mono-color=\"teal\"] { --_mono-tabs-accent-preset: var(--_mono-tabs-teal); }\r\n[mono-tabs][mono-color=\"purple\"] { --_mono-tabs-accent-preset: var(--_mono-tabs-purple); }\r\n[mono-tabs][mono-color=\"neutral\"] { --_mono-tabs-accent-preset: var(--_mono-tabs-neutral); }\r\n[mono-tabs][mono-color=\"dark\"] { --_mono-tabs-accent-preset: var(--_mono-tabs-dark); }\r\n\r\n/* =========================================\r\n   Tab — `> [role='tab']`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/tabs.css .tabs >> > [role='tablist'] >> > [role='tab']\r\n   — relative inline-flex flex-1 items-center justify-center whitespace-nowrap\r\n   transition-all outline-none, disabled:pointer-events-none disabled:opacity-50 */\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'] > [role='tab']\r\n   — gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium,\r\n   text-foreground/60 hover:text-foreground (dark: muted-foreground → foreground),\r\n   focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] */\r\n:where([mono-tabs]) > [mono-tab] {\r\n  position: relative;\r\n  display: inline-flex;\r\n  flex: 1 1 auto;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: var(--_mono-tabs-tab-gap);\r\n  padding: var(--_mono-tabs-tab-pad-y) var(--_mono-tabs-tab-pad-x);\r\n  border: var(--mono-border-width) solid transparent;\r\n  border-radius: var(--_mono-tabs-tab-radius);\r\n  background: transparent;\r\n  color: var(--_mono-tabs-muted);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-tabs-font);\r\n  line-height: var(--_mono-tabs-line-height);\r\n  font-weight: var(--_mono-tabs-font-weight);\r\n  text-transform: var(--_mono-tabs-text-transform);\r\n  letter-spacing: var(--_mono-tabs-letter-spacing);\r\n  white-space: nowrap;\r\n  text-decoration: none;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  outline: none;\r\n  appearance: none;\r\n  transition:\r\n    color var(--mono-duration) var(--mono-ease),\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@media (hover: hover) {\r\n  [mono-tabs] > [mono-tab]:hover:not(:disabled):not([aria-disabled=\"true\"]) {\r\n    color: var(--_mono-tabs-text);\r\n  }\r\n}\r\n\r\n[mono-tabs] > [mono-tab]:focus-visible {\r\n  border-color: var(--_mono-tabs-ring-color);\r\n  box-shadow: 0 0 0 var(--_mono-tabs-ring-width)\r\n    color-mix(in oklab, var(--_mono-tabs-ring-color) var(--mono-ring-alpha), transparent);\r\n}\r\n\r\n/* basecoat@1.0.2 components/tabs.css .tabs >> > [role='tablist'] >> > [role='tab']\r\n   — disabled:pointer-events-none disabled:opacity-50. DEVIATION: 0.45, this\r\n   component's pre-port value. */\r\n[mono-tabs] > [mono-tab]:disabled,\r\n[mono-tabs] > [mono-tab][aria-disabled=\"true\"],\r\n[mono-tabs][mono-disabled] > [mono-tab] {\r\n  opacity: 0.45;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'][aria-orientation='vertical'] > [role='tab']\r\n   — w-full justify-start */\r\n[mono-tabs][aria-orientation=\"vertical\"] > [mono-tab] {\r\n  width: 100%;\r\n  justify-content: flex-start;\r\n}\r\n\r\n/* Upstream suppresses the host page's generic anchor decoration the same way a\r\n   button would; tabs render as <button> today, but the rule is kept for a future\r\n   anchor tab (an `href` / RouterLink integration) — and for VitePress, whose\r\n   `.vp-doc a` would otherwise underline one. */\r\n[mono-tabs] a[mono-tab],\r\n[mono-tabs] a[mono-tab]:hover,\r\n[mono-tabs] a[mono-tab]:focus {\r\n  text-decoration: none;\r\n}\r\n\r\n[mono-tabs] a[mono-tab]::after {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Selected — `[aria-selected='true']`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist']:not([data-variant='line']) > [role='tab'][aria-selected='true']\r\n   — bg-background text-foreground shadow-sm, dark border-input bg-input/30 */\r\n[mono-tabs][mono-variant=\"pill\"] > [mono-tab][aria-selected=\"true\"] {\r\n  background: var(--_mono-tabs-active-bg);\r\n  border-color: var(--_mono-tabs-active-border);\r\n  box-shadow: var(--_mono-tabs-active-shadow);\r\n  color: var(--_mono-tabs-active-color);\r\n}\r\n\r\n/* EXTENSION — ghost holds a tint instead of a raised pill. */\r\n[mono-tabs][mono-variant=\"ghost\"] > [mono-tab][aria-selected=\"true\"] {\r\n  background: var(--mono-tabs-ghost-active-bg,\r\n    color-mix(in oklab, var(--_mono-tabs-accent) var(--mono-mode-tint), transparent));\r\n  color: var(--_mono-tabs-active-color);\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-tabs][mono-variant=\"ghost\"] > [mono-tab]:hover:not(:disabled):not([aria-selected=\"true\"]) {\r\n    background: var(--mono-tabs-ghost-hover-bg, var(--mono-mode-ghost-hover));\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'][data-variant='line'] > [role='tab'][aria-selected='true']\r\n   — bg-transparent text-foreground shadow-none after:opacity-100 */\r\n[mono-tabs]:is(:not([mono-variant]), [mono-variant=\"underline\"]) > [mono-tab][aria-selected=\"true\"] {\r\n  background: transparent;\r\n  box-shadow: none;\r\n  color: var(--_mono-tabs-active-color);\r\n}\r\n\r\n/* =========================================\r\n   The line bar — the `::after` upstream reveals\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'] > [role='tab']\r\n   — after:absolute after:bg-foreground after:opacity-0 after:transition-opacity */\r\n:where([mono-tabs]) > [mono-tab]::after {\r\n  content: '';\r\n  position: absolute;\r\n  background: var(--_mono-tabs-line-color);\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  transition: opacity var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'][data-variant='line'][aria-orientation='horizontal'] > [role='tab']\r\n   — after:inset-x-0 after:bottom-[-5px] after:h-0.5 */\r\n[mono-tabs]:is(:not([mono-variant]), [mono-variant=\"underline\"]):not([aria-orientation=\"vertical\"]) > [mono-tab]::after {\r\n  inset-inline: 0;\r\n  bottom: var(--_mono-tabs-line-offset);\r\n  height: var(--_mono-tabs-line-size);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'][data-variant='line'][aria-orientation='vertical'] > [role='tab']\r\n   — after:inset-y-0 after:end-[-4px] after:w-0.5 */\r\n[mono-tabs]:is(:not([mono-variant]), [mono-variant=\"underline\"])[aria-orientation=\"vertical\"] > [mono-tab]::after {\r\n  inset-block: 0;\r\n  inset-inline-end: calc(var(--_mono-tabs-line-offset) + 1px);\r\n  width: var(--_mono-tabs-line-size);\r\n}\r\n\r\n[mono-tabs]:is(:not([mono-variant]), [mono-variant=\"underline\"]) > [mono-tab][aria-selected=\"true\"]::after {\r\n  opacity: 1;\r\n}\r\n\r\n/* =========================================\r\n   Icon — `[&_svg:not([class*='size-'])]:size-4`\r\n   ========================================= */\r\n\r\n:where([mono-tabs] > [mono-tab]) > [mono-icon] {\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-tabs-icon-size);\r\n  height: var(--_mono-tabs-icon-size);\r\n  color: inherit;\r\n  line-height: 1;\r\n  pointer-events: none;\r\n}\r\n\r\n/* Light: the `[data-mono-slot]` placeholder the svg is moved into. Shadow: the\r\n   projected svg. Either way it fills the box upstream sizes. */\r\n[mono-tabs] > [mono-tab] > [mono-icon] > :is(svg, span, [data-mono-slot]),\r\n[mono-tabs] > [mono-tab] > [mono-icon] > [data-mono-slot] > svg,\r\n[mono-tabs] > [mono-tab] > [mono-icon] slot::slotted(svg) {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'] > [role='tab']:has(> svg:first-child)\r\n   — ps-1.5. A tab that LEADS with a glyph tucks in on that side.\r\n\r\n   `:not([mono-empty])` is what keeps the two builds equal: the shadow one\r\n   renders an icon box for every tab (DSD has to have something to project into)\r\n   and marks the empty ones, so a bare `:has()` tucked in EVERY shadow tab. */\r\n[mono-tabs] > [mono-tab]:has(> [mono-icon]:first-child:not([mono-empty])) {\r\n  padding-inline-start: var(--mono-tabs-tab-icon-pad, calc(var(--mono-spacing) * 1.5));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'] > [role='tab']:has(> svg:last-child)\r\n   — pe-1.5 */\r\n[mono-tabs] > [mono-tab]:has(> [mono-icon]:last-child:not([mono-empty])) {\r\n  padding-inline-end: var(--mono-tabs-tab-icon-pad, calc(var(--mono-spacing) * 1.5));\r\n}\r\n\r\n/* The shadow build renders the icon box for every tab (DSD projects into it) and\r\n   marks the empty ones; the light build renders only what it captured. */\r\n[mono-tabs] > [mono-tab] > [mono-icon][mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Label + badge\r\n   ========================================= */\r\n\r\n:where([mono-tabs] > [mono-tab]) > [mono-label] {\r\n  display: inline-block;\r\n  line-height: inherit;\r\n  text-decoration: none;\r\n}\r\n\r\n/* EXTENSION — a count beside the label. Upstream has no badge. */\r\n:where([mono-tabs] > [mono-tab]) > [mono-badge] {\r\n  --_mono-tabs-badge-size: var(--mono-tabs-badge-size, calc(var(--mono-spacing) * 4.5));\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: var(--_mono-tabs-badge-size);\r\n  height: var(--_mono-tabs-badge-size);\r\n  padding-inline: calc(var(--mono-spacing) * 1.25);\r\n  border-radius: var(--mono-radius-full);\r\n  background: var(--mono-tabs-badge-bg, color-mix(in oklab, var(--foreground) 10%, transparent));\r\n  color: var(--mono-tabs-badge-color, var(--_mono-tabs-muted));\r\n  font-size: var(--mono-tabs-badge-font, var(--mono-text-xs));\r\n  font-weight: var(--mono-font-weight-semibold);\r\n  font-variant-numeric: tabular-nums;\r\n  line-height: 1;\r\n}\r\n\r\n[mono-tabs] > [mono-tab][aria-selected=\"true\"] > [mono-badge] {\r\n  background: var(--mono-tabs-badge-active-bg, var(--_mono-tabs-accent));\r\n  color: var(--mono-tabs-badge-active-color, var(--primary-foreground));\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-tabs] > [mono-tab],\r\n  [mono-tabs] > [mono-tab]::after {\r\n    transition: none;\r\n  }\r\n}\r\n";
+
 //#endregion
 //#region src/components/tabs/mono-tabs.ts
-var MonoTabs = class MonoTabs extends MonoTabsCore(LitElement) {
+let MonoTabs = class MonoTabs extends MonoTabsCore(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._slotsCaptured = false;
 		this._slotIcons = /* @__PURE__ */ new Map();
 	}
 	static {
-		this.styles = [unsafeCSS(tabs_default)];
+		this.styles = [unsafeCSS(tabs_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -375,5 +378,6 @@ var MonoTabs = class MonoTabs extends MonoTabsCore(LitElement) {
 };
 __decorate([state()], MonoTabs.prototype, "_slotsCaptured", void 0);
 MonoTabs = __decorate([customElement("mono-tabs")], MonoTabs);
+
 //#endregion
-export { MonoTabs };
+export { MonoTabs };

package/dist/ui/tag-input.js

@@ -1,23 +1,24 @@
-import { r as readAllRows } from "../data-source-read-DL88aH8t.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, r as unwrapReactiveDeep } 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 { t as PopupPortalController } from "../popup-portal-BziRX1yG.js";
-import { a as spinnerIcon, i as refreshIcon, n as chevronIcon, t as caretIcon } 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 { n as visibleChipCap, r as ChipStripController, t as resolveChipLimit } from "../chip-limits-BMoO31JM.js";
+import { r as readAllRows } from "../data-source-read-FxqzQkk2.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, r as unwrapReactiveDeep } 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 { t as PopupPortalController } from "../popup-portal-HWhkd7oy.js";
+import { a as spinnerIcon, i as refreshIcon, n as chevronIcon, t as caretIcon } 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 { n as visibleChipCap, r as ChipStripController, t as resolveChipLimit } from "../chip-limits-CFABydIL.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/tag-input/tag-input-core.ts
-var numberStringConverter = {
+const numberStringConverter = {
 	fromAttribute(value) {
 		if (value === null || value === "") return void 0;
 		const parsed = Number(value);
@@ -37,7 +38,7 @@ var numberStringConverter = {
 * captures children into `data-mono-slot` placeholders; shadow uses native
 * `<slot>`), and the `_slotOutlet` / `renderIcon` hooks. Mirrors `select-core`.
 */
-var MonoTagInputCore = (superClass) => {
+const MonoTagInputCore = (superClass) => {
 	class MonoTagInputCoreClass extends MonoFormControlCore(superClass) {
 		constructor(...args) {
 			super(...args);
@@ -2035,17 +2036,18 @@ var MonoTagInputCore = (superClass) => {
 			if (!usable.length) return nothing;
 			const state = this._selectAllState(usable);
 			const pending = this._selectAllPending;
-			return html`
-      <button
-        type="button"
-        role="option"
-        class=${[
+			const cls = [
 				this._cls("mono-tag-input-item", "item"),
 				this._cls("mono-tag-input-select-all", "selectAll"),
 				"has-check",
 				state !== "none" ? "selected" : "",
 				pending ? "is-loading" : ""
-			].filter(Boolean).join(" ")}
+			].filter(Boolean).join(" ");
+			return html`
+      <button
+        type="button"
+        role="option"
+        class=${cls}
         mono-item
         mono-select-all
         mono-check
@@ -2782,12 +2784,14 @@ var MonoTagInputCore = (superClass) => {
 	})], MonoTagInputCoreClass.prototype, "maxHeight", void 0);
 	return MonoTagInputCoreClass;
 };
+
 //#endregion
-//#region src/components/tag-input/tag-input.css?raw
-var tag_input_default = "/* =========================================================================\r\n   mono-tag-input — a port of Basecoat's multi-select combobox: `.combobox-chips`\r\n   (the field), `.combobox-chip` (+ `-remove`) and the `.combobox [data-popover]`\r\n   list (basecoat-css@1.0.2, vega style), on the `.field` / `.label` chrome the\r\n   ported input already carries.\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-tag-input size=\"sm\" color=\"danger\" variant=\"filled\" label=\"Tags\">\r\n     <div mono-tag-input mono-size=\"sm\" mono-color=\"danger\" mono-variant=\"filled\">\r\n       <label mono-label>Tags</label>\r\n       <div mono-field>\r\n         <div mono-chip mono-removable><span mono-chip-main><span mono-chip-content>\r\n           <span mono-chip-label>Vue</span><button mono-chip-close>…</button></span></span></div>\r\n         <input mono-native /> <div mono-actions><span mono-arrow>…</span></div>\r\n       </div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary, `:not([mono-variant])` = outlined). The element\r\n   renders these attributes on its wrapper (both builds) plus the STATES\r\n   `mono-open` / `mono-more-open`; the old classes (`.mono-tag-input.sm.open`) are\r\n   still emitted as inert hooks until 2.0 but no rule here reads them. The tag\r\n   chips are NOT `.mono-chip`s any more: they are Basecoat combobox chips, painted\r\n   here (`[mono-tag-input] [mono-chip]`), and chip.css never sees them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-tag-input]                              ≡ .field (gap-3, as margins — see the root rule) + .combobox (position: relative)\r\n     [mono-tag-input] > [mono-label]               ≡ .field > label / .label\r\n     [mono-tag-input] > [mono-field]               ≡ .combobox-chips (min-h-9 gap-1.5 rounded-md border-input px-1.5 py-1.5 text-sm shadow-xs)\r\n     [mono-field] > [mono-native]                  ≡ .combobox-chips > input[role='combobox'] (min-w-16 flex-1, borderless)\r\n     [mono-field] [mono-chip] > [mono-chip-main]   ≡ .combobox-chip (h-5.5 gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium)\r\n     [mono-chip] [mono-chip-close]                 ≡ .combobox-chip-remove (-ms-1 opacity-50 hover:100, svg size-3.5)\r\n     [mono-chip][mono-more]                        ≡ EXTENSION (the \"+N more\" counter chip, same box)\r\n     [mono-actions] > [mono-arrow] > svg           ≡ .combobox-trigger-icon (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-actions] > [mono-scroll]                ≡ EXTENSION (the inline strip's ‹ › pager, same box)\r\n     [mono-dropdown]                               ≡ .combobox [data-popover] + [role='listbox'] (bg-popover ring-1 rounded-md shadow-md, max-h-72 p-1 scroll)\r\n     [mono-item]                                   ≡ .combobox [role='option'] (gap-2 rounded-sm py-1.5 ps-2 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, unless the row has its own checkbox\r\n     [mono-group]                                  ≡ .combobox [role='heading'] (px-2 py-1.5 text-xs text-muted-foreground)\r\n     [mono-select-all]                             ≡ EXTENSION (a sticky option row over the list)\r\n     [mono-more-panel]                             ≡ [data-popover] holding the overflow chips\r\n     [mono-empty-row]                              ≡ [role='listbox']::before (py-6 text-center text-sm)\r\n     [mono-message-wrap] > [mono-message]          ≡ .field > p / .field [role='alert']\r\n     [mono-validation-state=\"invalid\"]             ≡ .combobox-chips:has([aria-invalid=true]) + .field[data-invalid]\r\n     [mono-validation-state=\"valid|warning\"]       ≡ EXTENSION (the invalid pattern in --success / --warning)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION (the --mono-control-height-* ladder)\r\n     [mono-variant=\"filled\"]                       ≡ EXTENSION (luma's .combobox-chips)\r\n     [mono-variant=\"underlined\"]                   ≡ EXTENSION (sera's .combobox-chips: bottom edge only, no ring)\r\n\r\n   Inner parts: [mono-label] (+ [mono-required-mark]), [mono-field] (+ [mono-inline],\r\n   [mono-typing]), [mono-chip-strip], [mono-chip] (+ [mono-removable], [mono-more],\r\n   [mono-chip-color=\"…\"]) > [mono-chip-main] > [mono-chip-content] > [mono-chip-dot] /\r\n   [mono-chip-label] / [mono-chip-close] > [mono-icon], [mono-native], [mono-actions] >\r\n   [mono-scroll=\"prev|next\"] (+ [mono-idle]) / [mono-clear] > [mono-icon] / [mono-arrow],\r\n   [mono-dropdown], [mono-select-all] (+ [mono-loading]), [mono-item] (+ [mono-active],\r\n   [mono-selected], [mono-disabled], [mono-check], [mono-level=\"n\"]) > [mono-check-box] /\r\n   [mono-item-text] > [mono-item-title] / [mono-item-sub], [mono-group] (+ [mono-level],\r\n   [mono-sticky], [mono-toggle], [mono-selected]) > [mono-group-label], [mono-empty-row],\r\n   [mono-load-more] (+ [mono-loading]), [mono-list-slot], [mono-more-panel],\r\n   [mono-message-wrap] > [mono-message=\"helper|valid|invalid|warning\"]. The shadow build\r\n   marks an unassigned slot wrapper [mono-empty].\r\n\r\n   THE PANELS ARE PORTALED (light build): [mono-dropdown] and [mono-more-panel] move\r\n   into a `<div data-mono-popup-portal>` under <body> while open, and the portal\r\n   mirrors the wrapper's class AND mono-* attributes, so every rule here is scoped\r\n   under `[mono-tag-input]` and never relies on the panel being inside the field.\r\n\r\n   FLAVORS set the same knobs as mono-input, renamed `--mono-tag-input-*`, plus the\r\n   select's panel / option / group set (`--mono-tag-input-dropdown-*`,\r\n   `--mono-tag-input-option-*`, `--mono-tag-input-group-*`) and the chip set\r\n   (`--mono-tag-input-chip-{radius,bg,color,font-size,font-weight}`). Every fallback\r\n   here is vega's value (`node scripts/basecoat-styles.mjs --varying \"^\\.combobox\"`).\r\n   ========================================================================= */\r\n\r\nmono-tag-input {\r\n  display: block;\r\n}\r\n\r\n[mono-tag-input] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-tag-input-text: var(--mono-tag-input-color, var(--mono-tag-input-text, var(--foreground)));\r\n  --_mono-tag-input-placeholder: var(--mono-tag-input-placeholder, var(--muted-foreground));\r\n  --_mono-tag-input-muted: var(--mono-tag-input-muted, var(--muted-foreground));\r\n  --_mono-tag-input-primary: var(--mono-tag-input-primary, var(--ring));\r\n  --_mono-tag-input-secondary: var(--mono-tag-input-secondary, var(--muted-foreground));\r\n  --_mono-tag-input-success: var(--mono-tag-input-success, var(--success));\r\n  --_mono-tag-input-danger: var(--mono-tag-input-danger, var(--destructive));\r\n  --_mono-tag-input-warning: var(--mono-tag-input-warning, var(--warning));\r\n  --_mono-tag-input-info: var(--mono-tag-input-info, var(--info));\r\n  --_mono-tag-input-teal: var(--mono-tag-input-teal, var(--teal));\r\n  --_mono-tag-input-purple: var(--mono-tag-input-purple, var(--purple));\r\n  --_mono-tag-input-neutral: var(--mono-tag-input-neutral, var(--neutral));\r\n  --_mono-tag-input-dark: var(--mono-tag-input-dark, var(--dark));\r\n  --_mono-tag-input-valid: var(--mono-tag-input-valid, var(--success));\r\n  --_mono-tag-input-invalid: var(--mono-tag-input-invalid, var(--destructive));\r\n\r\n  /* ── the painted result — three tiers, base = .combobox-chips (vega) ──── */\r\n  --_mono-tag-input-ring-color: var(--mono-tag-input-ring-color, var(--mono-tag-input-focus-color, var(--_mono-tag-input-ring-color-preset, var(--_mono-tag-input-primary))));\r\n  --_mono-tag-input-ring-width: var(--mono-tag-input-ring-width, var(--_mono-tag-input-ring-width-preset, var(--mono-ring-width)));\r\n  --_mono-tag-input-ring-alpha: var(--mono-tag-input-ring-alpha, var(--mono-ring-alpha));\r\n  --_mono-tag-input-border-color: var(--mono-tag-input-rest-border, var(--mono-tag-input-border-color, var(--mono-tag-input-border, var(--_mono-tag-input-border-color-preset, var(--input)))));\r\n  --_mono-tag-input-bg: var(--mono-tag-input-bg, var(--mono-tag-input-surface, var(--_mono-tag-input-bg-preset, var(--mono-mode-surface))));\r\n  --_mono-tag-input-shadow: var(--mono-tag-input-shadow, var(--_mono-tag-input-shadow-preset, 0 0 #0000));\r\n  --_mono-tag-input-icon: var(--mono-tag-input-icon-size, calc(var(--mono-spacing) * 4));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\r\n        `<div mono-tag-input>` that names no size renders exactly like size=\"md\".\r\n        basecoat@1.0.2 styles/vega.css .combobox-chips — min-h-9 gap-1.5 rounded-md\r\n        px-1.5 py-1.5 text-sm; .combobox-chip h-5.5 ── */\r\n  --_mono-tag-input-height: var(--mono-tag-input-height-md, var(--mono-control-height-md));\r\n  --_mono-tag-input-radius: var(--mono-tag-input-radius-md, var(--_mono-tag-input-radius-preset, var(--mono-tag-input-radius, var(--mono-radius-md))));\r\n  --_mono-tag-input-padding-x: var(--mono-tag-input-padding-x-md, var(--mono-tag-input-padding-x, var(--_mono-tag-input-padding-x-preset, calc(var(--mono-spacing) * 1.5))));\r\n  --_mono-tag-input-padding-y: var(--mono-tag-input-padding-y-md, var(--mono-tag-input-padding-y, calc(var(--mono-spacing) * 1.5)));\r\n  --_mono-tag-input-gap: var(--mono-tag-input-chip-gap, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-tag-input-font-size: var(--mono-tag-input-font-md, var(--mono-text-sm));\r\n  --_mono-tag-input-line-height: var(--mono-tag-input-line-height, var(--mono-tag-input-line-height-md, var(--mono-text-sm--lh)));\r\n  --_mono-tag-input-chip-height: var(--mono-tag-input-chip-height-md, min(calc(var(--mono-spacing) * 5.5), var(--_mono-tag-input-chip-fit)));\r\n  /* The room one row of chips has: the field's height minus its block padding and borders. Each\r\n     size's DEFAULT chip height is capped by it, so the rule \"chip h + 2·py + 2px ≤ token\" holds\r\n     under ANY control ladder — a dense flavor (mira: xs 20px) shrinks the chip instead of growing\r\n     an empty field past the token. An explicit `--mono-tag-input-chip-height-*` is not capped. */\r\n  --_mono-tag-input-chip-fit: calc(var(--_mono-tag-input-height) - 2 * var(--_mono-tag-input-padding-y) - 2 * var(--mono-border-width));\r\n  --_mono-tag-input-chip-font-size: var(--mono-tag-input-chip-font-size, var(--mono-text-xs));\r\n  --_mono-tag-input-chip-line-height: var(--mono-tag-input-chip-line-height, var(--mono-text-xs--lh));\r\n  --_mono-tag-input-action: calc(var(--mono-spacing) * 6);\r\n  --_mono-tag-input-clear-glyph: calc(var(--mono-spacing) * 3.5);\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3; mono: 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 field, above the\r\n     message — instead of a flex container's content-box top (see select.css) */\r\n  --_mono-tag-input-gap-y: var(--mono-tag-input-gap, calc(var(--mono-spacing) * 3));\r\n  position: relative;\r\n  display: block;\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-tag-input-text);\r\n}\r\n\r\n[mono-tag-input],\r\n[mono-tag-input] *,\r\n[mono-tag-input] *::before,\r\n[mono-tag-input] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n[mono-tag-input] :is([mono-label], [mono-message])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — an EMPTY field's painted height IS the token (tests/perf/field-heights);\r\n   a second row of chips grows it. Each step keeps one row of chips + its block\r\n   padding under the token: chip h + 2·py + 2px ≤ token.\r\n   ========================================= */\r\n\r\n[mono-tag-input][mono-size=\"xs\"] {\r\n  --_mono-tag-input-height: var(--mono-tag-input-height-xs, var(--mono-control-height-xs));\r\n  --_mono-tag-input-radius: var(--mono-tag-input-radius-xs, var(--_mono-tag-input-radius-preset, var(--mono-tag-input-radius, var(--mono-radius-md))));\r\n  --_mono-tag-input-padding-x: var(--mono-tag-input-padding-x-xs, var(--mono-tag-input-padding-x, var(--_mono-tag-input-padding-x-preset, var(--mono-spacing))));\r\n  --_mono-tag-input-padding-y: var(--mono-tag-input-padding-y-xs, var(--mono-tag-input-padding-y, calc(var(--mono-spacing) * 0.5)));\r\n  --_mono-tag-input-gap: var(--mono-tag-input-chip-gap, var(--mono-spacing));\r\n  --_mono-tag-input-font-size: var(--mono-tag-input-font-xs, var(--mono-text-xs));\r\n  --_mono-tag-input-line-height: var(--mono-tag-input-line-height, var(--mono-tag-input-line-height-xs, var(--mono-text-xs--lh)));\r\n  --_mono-tag-input-chip-height: var(--mono-tag-input-chip-height-xs, min(calc(var(--mono-spacing) * 4.5), var(--_mono-tag-input-chip-fit)));\r\n  --_mono-tag-input-icon: var(--mono-tag-input-icon-size, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-tag-input-action: calc(var(--mono-spacing) * 4);\r\n  --_mono-tag-input-clear-glyph: calc(var(--mono-spacing) * 3);\r\n}\r\n\r\n[mono-tag-input][mono-size=\"sm\"] {\r\n  --_mono-tag-input-height: var(--mono-tag-input-height-sm, var(--mono-control-height-sm));\r\n  --_mono-tag-input-radius: var(--mono-tag-input-radius-sm, var(--_mono-tag-input-radius-preset, var(--mono-tag-input-radius, var(--mono-radius-md))));\r\n  --_mono-tag-input-padding-x: var(--mono-tag-input-padding-x-sm, var(--mono-tag-input-padding-x, var(--_mono-tag-input-padding-x-preset, var(--mono-spacing))));\r\n  --_mono-tag-input-padding-y: var(--mono-tag-input-padding-y-sm, var(--mono-tag-input-padding-y, var(--mono-spacing)));\r\n  --_mono-tag-input-gap: var(--mono-tag-input-chip-gap, var(--mono-spacing));\r\n  --_mono-tag-input-font-size: var(--mono-tag-input-font-sm, var(--mono-tag-input-font-md, var(--mono-text-sm)));\r\n  --_mono-tag-input-line-height: var(--mono-tag-input-line-height, var(--mono-tag-input-line-height-sm, var(--mono-text-sm--lh)));\r\n  --_mono-tag-input-chip-height: var(--mono-tag-input-chip-height-sm, min(calc(var(--mono-spacing) * 5), var(--_mono-tag-input-chip-fit)));\r\n  --_mono-tag-input-action: calc(var(--mono-spacing) * 5);\r\n}\r\n\r\n[mono-tag-input][mono-size=\"lg\"] {\r\n  --_mono-tag-input-height: var(--mono-tag-input-height-lg, var(--mono-control-height-lg));\r\n  --_mono-tag-input-radius: var(--mono-tag-input-radius-lg, var(--_mono-tag-input-radius-preset, var(--mono-tag-input-radius, var(--mono-radius-md))));\r\n  --_mono-tag-input-padding-x: var(--mono-tag-input-padding-x-lg, var(--mono-tag-input-padding-x, var(--_mono-tag-input-padding-x-preset, calc(var(--mono-spacing) * 1.5))));\r\n  --_mono-tag-input-padding-y: var(--mono-tag-input-padding-y-lg, var(--mono-tag-input-padding-y, calc(var(--mono-spacing) * 1.5)));\r\n  --_mono-tag-input-font-size: var(--mono-tag-input-font-lg, var(--mono-tag-input-font-md, var(--mono-text-sm)));\r\n  --_mono-tag-input-line-height: var(--mono-tag-input-line-height, var(--mono-tag-input-line-height-lg, var(--mono-text-sm--lh)));\r\n  --_mono-tag-input-chip-height: var(--mono-tag-input-chip-height-lg, min(calc(var(--mono-spacing) * 6), var(--_mono-tag-input-chip-fit)));\r\n}\r\n\r\n[mono-tag-input][mono-size=\"xl\"] {\r\n  --_mono-tag-input-height: var(--mono-tag-input-height-xl, var(--mono-control-height-xl));\r\n  --_mono-tag-input-radius: var(--mono-tag-input-radius-xl, var(--_mono-tag-input-radius-preset, var(--mono-tag-input-radius, var(--mono-radius-md))));\r\n  --_mono-tag-input-padding-x: var(--mono-tag-input-padding-x-xl, var(--mono-tag-input-padding-x, var(--_mono-tag-input-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-tag-input-padding-y: var(--mono-tag-input-padding-y-xl, var(--mono-tag-input-padding-y, calc(var(--mono-spacing) * 2)));\r\n  --_mono-tag-input-gap: var(--mono-tag-input-chip-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-tag-input-font-size: var(--mono-tag-input-font-xl, var(--mono-text-base));\r\n  --_mono-tag-input-line-height: var(--mono-tag-input-line-height, var(--mono-tag-input-line-height-xl, var(--mono-text-base--lh)));\r\n  --_mono-tag-input-chip-height: var(--mono-tag-input-chip-height-xl, min(calc(var(--mono-spacing) * 6.5), var(--_mono-tag-input-chip-fit)));\r\n  --_mono-tag-input-chip-font-size: var(--mono-tag-input-chip-font-size, var(--mono-text-sm));\r\n  --_mono-tag-input-chip-line-height: var(--mono-tag-input-chip-line-height, var(--mono-text-sm--lh));\r\n  --_mono-tag-input-icon: var(--mono-tag-input-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-tag-input-action: calc(var(--mono-spacing) * 7);\r\n  --_mono-tag-input-clear-glyph: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n[mono-tag-input][mono-size=\"xxl\"] {\r\n  --_mono-tag-input-height: var(--mono-tag-input-height-xxl, var(--mono-control-height-xxl));\r\n  --_mono-tag-input-radius: var(--mono-tag-input-radius-xxl, var(--_mono-tag-input-radius-preset, var(--mono-tag-input-radius, var(--mono-radius-md))));\r\n  --_mono-tag-input-padding-x: var(--mono-tag-input-padding-x-xxl, var(--mono-tag-input-padding-x, var(--_mono-tag-input-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-tag-input-padding-y: var(--mono-tag-input-padding-y-xxl, var(--mono-tag-input-padding-y, calc(var(--mono-spacing) * 2)));\r\n  --_mono-tag-input-gap: var(--mono-tag-input-chip-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-tag-input-font-size: var(--mono-tag-input-font-xxl, var(--mono-text-lg));\r\n  --_mono-tag-input-line-height: var(--mono-tag-input-line-height, var(--mono-tag-input-line-height-xxl, var(--mono-text-lg--lh)));\r\n  --_mono-tag-input-chip-height: var(--mono-tag-input-chip-height-xxl, min(calc(var(--mono-spacing) * 7), var(--_mono-tag-input-chip-fit)));\r\n  --_mono-tag-input-chip-font-size: var(--mono-tag-input-chip-font-size, var(--mono-text-sm));\r\n  --_mono-tag-input-chip-line-height: var(--mono-tag-input-chip-line-height, var(--mono-text-sm--lh));\r\n  --_mono-tag-input-icon: var(--mono-tag-input-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-tag-input-action: calc(var(--mono-spacing) * 8);\r\n  --_mono-tag-input-clear-glyph: calc(var(--mono-spacing) * 4);\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 .combobox-chips — rounded-md border border-input\r\n   bg-transparent shadow-xs (dark:bg-input/30 via --mono-mode-surface) */\r\n[mono-tag-input]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\r\n  --_mono-tag-input-bg-preset: var(--mono-tag-input-outline-bg);\r\n  --_mono-tag-input-border-color-preset: var(--mono-tag-input-outline-border-color);\r\n  --_mono-tag-input-side-border-color-preset: var(--mono-tag-input-outline-side-border-color);\r\n  --_mono-tag-input-shadow-preset: var(--mono-tag-input-outline-shadow, var(--mono-shadow-xs));\r\n  --_mono-tag-input-ring-width-preset: var(--mono-tag-input-outline-ring-width);\r\n  --_mono-tag-input-radius-preset: var(--mono-tag-input-outline-radius);\r\n  --_mono-tag-input-padding-x-preset: var(--mono-tag-input-outline-padding-x);\r\n}\r\n\r\n/* EXTENSION — filled ≡ basecoat@1.0.2 styles/luma.css .combobox-chips */\r\n[mono-tag-input][mono-variant=\"filled\"] {\r\n  --_mono-tag-input-bg-preset: var(--mono-tag-input-filled-bg, color-mix(in oklab, var(--input) 50%, transparent));\r\n  --_mono-tag-input-border-color-preset: transparent;\r\n  --_mono-tag-input-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* EXTENSION — underlined ≡ basecoat@1.0.2 styles/sera.css .combobox-chips */\r\n[mono-tag-input][mono-variant=\"underlined\"] {\r\n  --_mono-tag-input-bg-preset: transparent;\r\n  --_mono-tag-input-side-border-color-preset: transparent;\r\n  --_mono-tag-input-shadow-preset: 0 0 #0000;\r\n  --_mono-tag-input-ring-width-preset: 0px;\r\n  --_mono-tag-input-radius-preset: 0;\r\n  --_mono-tag-input-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-tag-input]:is(:not([mono-color]), [mono-color=\"primary\"]) {\r\n  --_mono-tag-input-ring-color-preset: var(--_mono-tag-input-primary);\r\n}\r\n[mono-tag-input][mono-color=\"secondary\"] {\r\n  --_mono-tag-input-ring-color-preset: var(--_mono-tag-input-secondary);\r\n}\r\n[mono-tag-input][mono-color=\"success\"] {\r\n  --_mono-tag-input-ring-color-preset: var(--_mono-tag-input-success);\r\n}\r\n[mono-tag-input][mono-color=\"danger\"] {\r\n  --_mono-tag-input-ring-color-preset: var(--_mono-tag-input-danger);\r\n}\r\n[mono-tag-input][mono-color=\"warning\"] {\r\n  --_mono-tag-input-ring-color-preset: var(--_mono-tag-input-warning);\r\n}\r\n[mono-tag-input][mono-color=\"info\"] {\r\n  --_mono-tag-input-ring-color-preset: var(--_mono-tag-input-info);\r\n}\r\n[mono-tag-input][mono-color=\"teal\"] {\r\n  --_mono-tag-input-ring-color-preset: var(--_mono-tag-input-teal);\r\n}\r\n[mono-tag-input][mono-color=\"purple\"] {\r\n  --_mono-tag-input-ring-color-preset: var(--_mono-tag-input-purple);\r\n}\r\n[mono-tag-input][mono-color=\"neutral\"] {\r\n  --_mono-tag-input-ring-color-preset: var(--_mono-tag-input-neutral);\r\n}\r\n[mono-tag-input][mono-color=\"dark\"] {\r\n  --_mono-tag-input-ring-color-preset: var(--_mono-tag-input-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-tag-input] > [mono-label] {\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  margin: 0 0 var(--_mono-tag-input-gap-y);\r\n  gap: var(--mono-tag-input-label-gap, calc(var(--mono-spacing) * 2));\r\n  font-size: var(--mono-tag-input-label-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-tag-input-label-line-height, 1);\r\n  font-weight: var(--mono-tag-input-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  text-transform: var(--mono-tag-input-label-text-transform, none);\r\n  letter-spacing: var(--mono-tag-input-label-letter-spacing, normal);\r\n  color: var(--_mono-tag-input-text);\r\n  user-select: none;\r\n}\r\n\r\n[mono-tag-input][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-tag-input][mono-validation-state=\"invalid\"] > [mono-label] {\r\n  color: var(--_mono-tag-input-invalid);\r\n}\r\n\r\n[mono-tag-input] [mono-required-mark] {\r\n  color: var(--_mono-tag-input-danger);\r\n}\r\n\r\n/* =========================================\r\n   The field — the chip box\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox-chips — flex w-full min-w-0\r\n   flex-wrap items-center */\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chips — min-h-9 gap-1.5 rounded-md\r\n   border border-input bg-transparent bg-clip-padding px-1.5 py-1.5 text-sm\r\n   shadow-xs transition-[color,box-shadow] focus-within:border-ring\r\n   focus-within:ring-3 focus-within:ring-ring/50 has-[[aria-invalid=true]]:…;\r\n   mono: `--tw-ring-*` flattened to the ring + shadow slots, the min-height is\r\n   the control token, the side edges read their own slot */\r\n[mono-tag-input] > [mono-field] {\r\n  --_mono-tag-input-bc: var(--_mono-tag-input-border-color);\r\n  --_mono-tag-input-side-bc: var(--mono-tag-input-side-border-color, var(--_mono-tag-input-side-border-color-preset, var(--_mono-tag-input-bc)));\r\n  --_mono-tag-input-ring: 0 0 #0000;\r\n\r\n  position: relative;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: var(--_mono-tag-input-gap);\r\n  width: 100%;\r\n  min-width: 0;\r\n  min-height: var(--_mono-tag-input-height);\r\n  padding-block: var(--_mono-tag-input-padding-y);\r\n  padding-inline: var(--_mono-tag-input-padding-x);\r\n  outline-style: none;\r\n  border: var(--mono-border-width) solid var(--_mono-tag-input-bc);\r\n  border-top-color: var(--_mono-tag-input-side-bc);\r\n  border-inline-color: var(--_mono-tag-input-side-bc);\r\n  border-radius: var(--_mono-tag-input-radius);\r\n  background: var(--_mono-tag-input-bg);\r\n  background-clip: padding-box;\r\n  color: var(--_mono-tag-input-text);\r\n  box-shadow: var(--_mono-tag-input-ring), var(--_mono-tag-input-shadow);\r\n  font-size: var(--_mono-tag-input-font-size);\r\n  line-height: var(--_mono-tag-input-line-height);\r\n  cursor: text;\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-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 */\r\n  &:focus-within {\r\n    --_mono-tag-input-bc: var(--_mono-tag-input-ring-color);\r\n    --_mono-tag-input-ring: 0 0 0 var(--_mono-tag-input-ring-width) color-mix(in oklab, var(--_mono-tag-input-ring-color) var(--_mono-tag-input-ring-alpha), transparent);\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chips — has-[[aria-invalid=true]]:border-destructive\r\n   has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive/20 */\r\n[mono-tag-input][mono-validation-state=\"invalid\"] > [mono-field],\r\n[mono-tag-input] > [mono-field]:has(> [mono-native][aria-invalid=\"true\"]) {\r\n  --_mono-tag-input-bc: var(--mono-mode-invalid-border);\r\n  --_mono-tag-input-ring: 0 0 0 var(--_mono-tag-input-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-tag-input][mono-validation-state=\"valid\"] > [mono-field] {\r\n  --_mono-tag-input-bc: color-mix(in oklab, var(--_mono-tag-input-valid) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-tag-input-ring: 0 0 0 var(--_mono-tag-input-ring-width) color-mix(in oklab, var(--_mono-tag-input-valid) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n[mono-tag-input][mono-validation-state=\"warning\"] > [mono-field] {\r\n  --_mono-tag-input-bc: color-mix(in oklab, var(--_mono-tag-input-warning) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-tag-input-ring: 0 0 0 var(--_mono-tag-input-ring-width) color-mix(in oklab, var(--_mono-tag-input-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-tag-input][mono-ds-error] > [mono-field] {\r\n  --_mono-tag-input-bc: var(--mono-tag-input-ds-error-border, var(--mono-mode-invalid-border));\r\n  --_mono-tag-input-ring: 0 0 0 var(--_mono-tag-input-ring-width) var(--mono-tag-input-ds-error-ring, var(--mono-mode-invalid-ring));\r\n}\r\n\r\n[mono-tag-input][mono-ds-error] [mono-native]::placeholder {\r\n  color: var(--mono-tag-input-ds-error-text, var(--_mono-tag-input-invalid));\r\n}\r\n\r\n/* EXTENSION — the first load (or a retry) is in flight: read-only */\r\n[mono-tag-input][mono-ds-loading] > [mono-field],\r\n[mono-tag-input][mono-ds-loading] [mono-native] {\r\n  cursor: progress;\r\n}\r\n\r\n/* EXTENSION — readonly: a muted surface */\r\n[mono-tag-input][mono-readonly] > [mono-field] {\r\n  background: var(--mono-tag-input-readonly-bg, var(--muted));\r\n  cursor: default;\r\n}\r\n\r\n/* .combobox-chips > input:disabled — opacity-50 (on the box, so the chips fade\r\n   with it). The strip's ‹ › pager opts back in so the chips can still be read. */\r\n[mono-tag-input][mono-disabled] > [mono-field] {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n  background: var(--mono-tag-input-disabled-bg, var(--_mono-tag-input-bg));\r\n}\r\n\r\n[mono-tag-input][mono-disabled] [mono-scroll]:not([mono-idle]) {\r\n  pointer-events: auto;\r\n  cursor: pointer;\r\n}\r\n\r\n/* ── the actions row stays on the FIRST row ──────────────────────────────\r\n   The field wraps, and the row is its last child, so once the chips wrapped it\r\n   rode down to the bottom-right. Pinned out of that flow instead; `top` centres\r\n   it on the single-row height. Not in inline mode: an inline field never wraps,\r\n   so the row sits in normal flow and the strip flexes against it. */\r\n[mono-tag-input] > [mono-field]:not([mono-inline]) {\r\n  padding-inline-end: calc(var(--_mono-tag-input-padding-x) + var(--_mono-tag-input-action) + var(--mono-spacing));\r\n}\r\n\r\n[mono-tag-input] > [mono-field]:not([mono-inline]) > [mono-actions] {\r\n  position: absolute;\r\n  inset-inline-end: var(--_mono-tag-input-padding-x);\r\n  top: calc((var(--_mono-tag-input-height) - var(--_mono-tag-input-action)) / 2);\r\n}\r\n\r\n/* =========================================\r\n   The text box\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox-chips > input[role='combobox']\r\n   — min-w-16 flex-1 bg-transparent outline-none placeholder:text-muted-foreground */\r\n[mono-tag-input] [mono-native] {\r\n  flex: 1 1 calc(var(--mono-spacing) * 16);\r\n  min-width: calc(var(--mono-spacing) * 16);\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-tag-input-text);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-tag-input-font-size);\r\n  line-height: var(--_mono-tag-input-line-height);\r\n  /* The chip row is the box's height; the text box never exceeds it. `height`, not only\r\n     `min-height`: an input's own line box is its floor, so with a chip shorter than the line (a\r\n     dense flavor's capped chip — mira xs: 14px chip, 16px line) the input set the row and an\r\n     empty field came out 2px over the control token. The 12px glyphs still fit. */\r\n  min-height: var(--_mono-tag-input-chip-height);\r\n  height: var(--_mono-tag-input-chip-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-tag-input-placeholder);\r\n  }\r\n\r\n  &:disabled,\r\n  &:read-only {\r\n    cursor: inherit;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   Chips\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox-chip — inline-flex w-fit\r\n   shrink-0 items-center whitespace-nowrap */\r\n[mono-tag-input] [mono-chip] {\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  max-width: 100%;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  white-space: nowrap;\r\n  vertical-align: middle;\r\n  line-height: 1;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chip — h-5.5 gap-1 rounded-sm bg-muted\r\n   px-1.5 text-xs font-medium text-foreground, has-[>.combobox-chip-remove]:pe-0 */\r\n[mono-tag-input] [mono-chip] > [mono-chip-main] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  height: var(--_mono-tag-input-chip-height);\r\n  max-width: 100%;\r\n  gap: var(--mono-tag-input-chip-content-gap, var(--mono-spacing));\r\n  margin: 0;\r\n  padding-inline: var(--mono-tag-input-chip-padding-x, calc(var(--mono-spacing) * 1.5));\r\n  border: 0;\r\n  border-radius: var(--mono-tag-input-chip-radius, var(--mono-radius-sm));\r\n  background: var(--mono-tag-input-chip-bg, var(--muted));\r\n  color: var(--mono-tag-input-chip-color, var(--_mono-tag-input-text));\r\n  font-family: inherit;\r\n  font-size: var(--_mono-tag-input-chip-font-size);\r\n  line-height: var(--_mono-tag-input-chip-line-height);\r\n  font-weight: var(--mono-tag-input-chip-font-weight, var(--mono-font-weight-medium));\r\n  text-decoration: none;\r\n  cursor: default;\r\n}\r\n\r\n[mono-tag-input] [mono-chip][mono-removable] > [mono-chip-main] {\r\n  padding-inline-end: 0;\r\n}\r\n\r\n[mono-tag-input] [mono-chip] [mono-chip-content] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: inherit;\r\n  min-width: 0;\r\n  max-width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n[mono-tag-input] [mono-chip] [mono-chip-label] {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* EXTENSION — `chip.dot`: a coloured dot before the label (the badge's dot idiom) */\r\n[mono-tag-input] [mono-chip] [mono-chip-dot] {\r\n  flex: 0 0 auto;\r\n  width: calc(var(--mono-spacing) * 1.5);\r\n  height: calc(var(--mono-spacing) * 1.5);\r\n  border-radius: var(--mono-radius-full);\r\n  background: currentColor;\r\n}\r\n\r\n/* EXTENSION — `chip.color` pins a hue: the tonal pattern (bg-x/10 text-x, dark 20) */\r\n[mono-tag-input] [mono-chip][mono-chip-color=\"primary\"] > [mono-chip-main] { background: color-mix(in oklab, var(--primary) var(--mono-mode-tint), transparent); color: var(--primary); }\r\n[mono-tag-input] [mono-chip][mono-chip-color=\"secondary\"] > [mono-chip-main] { background: var(--secondary); color: var(--secondary-foreground); }\r\n[mono-tag-input] [mono-chip][mono-chip-color=\"success\"] > [mono-chip-main] { background: color-mix(in oklab, var(--success) var(--mono-mode-tint), transparent); color: var(--success); }\r\n[mono-tag-input] [mono-chip][mono-chip-color=\"danger\"] > [mono-chip-main] { background: color-mix(in oklab, var(--destructive) var(--mono-mode-tint), transparent); color: var(--destructive); }\r\n[mono-tag-input] [mono-chip][mono-chip-color=\"warning\"] > [mono-chip-main] { background: color-mix(in oklab, var(--warning) var(--mono-mode-tint), transparent); color: var(--warning); }\r\n[mono-tag-input] [mono-chip][mono-chip-color=\"info\"] > [mono-chip-main] { background: color-mix(in oklab, var(--info) var(--mono-mode-tint), transparent); color: var(--info); }\r\n[mono-tag-input] [mono-chip][mono-chip-color=\"teal\"] > [mono-chip-main] { background: color-mix(in oklab, var(--teal) var(--mono-mode-tint), transparent); color: var(--teal); }\r\n[mono-tag-input] [mono-chip][mono-chip-color=\"purple\"] > [mono-chip-main] { background: color-mix(in oklab, var(--purple) var(--mono-mode-tint), transparent); color: var(--purple); }\r\n[mono-tag-input] [mono-chip][mono-chip-color=\"neutral\"] > [mono-chip-main] { background: color-mix(in oklab, var(--neutral) var(--mono-mode-tint), transparent); color: var(--neutral); }\r\n[mono-tag-input] [mono-chip][mono-chip-color=\"dark\"] > [mono-chip-main] { background: var(--dark); color: var(--dark-foreground); }\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox-chip-remove — inline-flex\r\n   shrink-0 items-center justify-center */\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chip-remove — -ms-1 opacity-50\r\n   hover:opacity-100, svg size-3.5 */\r\n[mono-tag-input] [mono-chip] [mono-chip-close] {\r\n  display: inline-flex;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  /* explicit: the element still carries chip.css's `.chip-close` class as a hook,\r\n     which pins a 1rem box — the raw markup has no such class */\r\n  width: auto;\r\n  height: 100%;\r\n  min-width: 0;\r\n  margin: 0;\r\n  transform: none;\r\n  margin-inline-start: calc(var(--mono-spacing) * -1);\r\n  padding: 0 var(--mono-spacing);\r\n  border: 0;\r\n  border-radius: inherit;\r\n  background: transparent;\r\n  color: inherit;\r\n  font: inherit;\r\n  line-height: 1;\r\n  opacity: 0.5;\r\n  cursor: pointer;\r\n  outline-style: none;\r\n  transition-property: opacity;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n\r\n  &:focus-visible {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-tag-input] [mono-chip] [mono-chip-close]:hover {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n[mono-tag-input] [mono-chip] [mono-chip-close] > :is(svg, .mono-icon, [mono-icon]) {\r\n  display: block;\r\n  width: calc(var(--mono-spacing) * 3.5);\r\n  height: calc(var(--mono-spacing) * 3.5);\r\n  pointer-events: none;\r\n}\r\n\r\n/* EXTENSION — the \"+N more\" counter chip is a control */\r\n[mono-tag-input] [mono-chip][mono-more] > [mono-chip-main] {\r\n  cursor: pointer;\r\n  outline-style: none;\r\n}\r\n\r\n[mono-tag-input] [mono-chip][mono-more] > [mono-chip-main]:focus-visible {\r\n  box-shadow: 0 0 0 var(--_mono-tag-input-ring-width) color-mix(in oklab, var(--_mono-tag-input-ring-color) var(--_mono-tag-input-ring-alpha), transparent);\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-tag-input] [mono-chip][mono-more] > [mono-chip-main]:hover {\r\n    background: var(--mono-mode-surface-hover);\r\n  }\r\n}\r\n\r\n/* ── the inline chip strip (`chip.behaviour: 'inline'`) ──────────────────\r\n   One line that never grows: the field stops wrapping, the chips live in their\r\n   own strip, and the strip absorbs the overflow instead of the field.\r\n\r\n   `overflow-x: hidden` — NOT `auto` — is the whole scroll contract. Hidden still\r\n   honours a programmatic `scrollLeft`, so `ChipStripController` can page the\r\n   strip while the browser paints no scrollbar. */\r\n[mono-tag-input] > [mono-field][mono-inline] {\r\n  flex-wrap: nowrap;\r\n  min-width: 0;\r\n}\r\n\r\n[mono-tag-input] [mono-chip-strip] {\r\n  display: flex;\r\n  flex-wrap: nowrap;\r\n  align-items: center;\r\n  gap: var(--_mono-tag-input-gap);\r\n  flex: 0 1 auto;\r\n  min-width: 0;\r\n  overflow-x: hidden;\r\n  overflow-y: hidden;\r\n  /* NO `scroll-behavior: smooth` — see ChipStripController (one scroll event per\r\n     frame would reposition every open popup). */\r\n}\r\n\r\n[mono-tag-input] [mono-chip-strip] > * {\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* The text box takes the SLACK: `flex-basis: 0` contributes nothing to the\r\n   overflow calculation, so when the chips overflow it collapses and the strip\r\n   runs up to the pager; focus earns a caret's room, typing earns a real box. */\r\n[mono-tag-input] > [mono-field][mono-inline] > [mono-native] {\r\n  flex: 1 1 0;\r\n  min-width: 0;\r\n}\r\n\r\n[mono-tag-input] > [mono-field][mono-inline] > [mono-native]:focus,\r\n[mono-tag-input] > [mono-field][mono-inline] > [mono-native]:focus-visible {\r\n  min-width: calc(var(--mono-spacing) * 5);\r\n}\r\n\r\n[mono-tag-input] > [mono-field][mono-inline][mono-typing] > [mono-native] {\r\n  min-width: calc(var(--mono-spacing) * 24);\r\n}\r\n\r\n/* =========================================\r\n   Actions — ‹ › pager, clear, caret\r\n   ========================================= */\r\n\r\n[mono-tag-input] [mono-actions] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--mono-spacing);\r\n  flex: 0 0 auto;\r\n  line-height: 1;\r\n}\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox [data-clear] — size-6 border-0\r\n   bg-transparent p-0 text-current; the caret ≡ .combobox-trigger-icon (size-4\r\n   text-muted-foreground), the pager the same box. Painted as .btn[data-variant='ghost']. */\r\n[mono-tag-input] [mono-clear],\r\n[mono-tag-input] [mono-arrow],\r\n[mono-tag-input] [mono-scroll],\r\n[mono-tag-input] [mono-ds-retry],\r\n[mono-tag-input] [mono-ds-spinner] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: 0 0 auto;\r\n  width: var(--_mono-tag-input-action);\r\n  height: var(--_mono-tag-input-action);\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--mono-tag-input-clear-radius, calc(var(--radius) - 5px));\r\n  background: transparent;\r\n  color: var(--_mono-tag-input-muted);\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  outline-style: none;\r\n  transition-property: color, background-color, transform;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n[mono-tag-input] :is([mono-clear], [mono-arrow], [mono-scroll], [mono-ds-retry], [mono-ds-spinner]) > :is(svg, .mono-icon, [mono-icon]) {\r\n  display: block;\r\n  width: var(--_mono-tag-input-icon);\r\n  height: var(--_mono-tag-input-icon);\r\n  pointer-events: none;\r\n}\r\n\r\n[mono-tag-input] [mono-clear] > :is(svg, .mono-icon, [mono-icon]) {\r\n  width: var(--_mono-tag-input-clear-glyph);\r\n  height: var(--_mono-tag-input-clear-glyph);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted hover:text-foreground */\r\n@media (hover: hover) {\r\n  [mono-tag-input] :is([mono-clear], [mono-arrow], [mono-scroll], [mono-ds-retry]):hover {\r\n    background: var(--mono-mode-ghost-hover);\r\n    color: var(--_mono-tag-input-text);\r\n  }\r\n}\r\n\r\n/* EXTENSION — the caret turns while the panel is open */\r\n[mono-tag-input][mono-open] [mono-arrow] > :is(svg, .mono-icon, [mono-icon]) {\r\n  transform: rotate(180deg);\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-tag-input] [mono-ds-spinner] {\r\n  cursor: progress;\r\n}\r\n\r\n[mono-tag-input] [mono-ds-spinner] > svg {\r\n  animation: mono-tag-input-spin 0.7s linear infinite;\r\n}\r\n\r\n[mono-tag-input] [mono-ds-retry] {\r\n  color: var(--mono-tag-input-ds-error-text, var(--_mono-tag-input-invalid));\r\n}\r\n\r\n@keyframes mono-tag-input-spin {\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n/* At an end of the strip the pager keeps its box but disappears — hiding it with\r\n   `display: none` would shrink the row and shove the strip sideways mid-click. */\r\n[mono-tag-input] [mono-scroll][mono-idle] {\r\n  visibility: hidden;\r\n  pointer-events: none;\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 overflow;\r\n   mono: `display: none` while closed, `--mono-popup-z` from the shared stack,\r\n   `--mono-popup-avail-h` from the portal controller */\r\n/* basecoat@1.0.2 styles/vega.css .combobox [data-popover] — bg-popover\r\n   text-popover-foreground ring-foreground/10 max-h-72 rounded-md p-0 shadow-md ring-1 */\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 (our panel IS\r\n   the listbox: one scrolling box) */\r\n[mono-tag-input] > [mono-dropdown] {\r\n  position: absolute;\r\n  /* `top: auto` = the static position (under the field, before the message); the\r\n     6px offset is a transform the controller's inline `transform: none` cancels */\r\n  top: auto;\r\n  transform: translateY(calc(var(--mono-spacing) * 1.5));\r\n  left: 0;\r\n  right: 0;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  display: none;\r\n  min-width: var(--mono-tag-input-dropdown-min-width, 9rem);\r\n  max-height: min(var(--_mono-tag-input-panel-max-h, 18rem), var(--mono-popup-avail-h, 100vh));\r\n  padding: var(--mono-tag-input-dropdown-padding, var(--mono-spacing));\r\n  overflow: auto;\r\n  overscroll-behavior: contain;\r\n  scroll-padding-block: var(--mono-tag-input-dropdown-padding, var(--mono-spacing));\r\n  isolation: isolate;\r\n  border-radius: var(--mono-tag-input-dropdown-radius, var(--mono-radius-md));\r\n  background: var(--mono-tag-input-dropdown-bg, var(--popover));\r\n  color: var(--mono-tag-input-dropdown-color, var(--popover-foreground));\r\n  box-shadow: var(--mono-tag-input-dropdown-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)), var(--mono-tag-input-dropdown-shadow, var(--mono-shadow-md));\r\n  font-size: var(--mono-tag-input-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-tag-input-option-line-height, var(--mono-text-sm--lh));\r\n  outline-style: none;\r\n}\r\n\r\n[mono-tag-input][mono-open] > [mono-dropdown] {\r\n  display: block;\r\n}\r\n\r\n/* =========================================\r\n   Options\r\n   -----------------------------------------\r\n   Every rule that paints a native line lists its stamped twin (`slot=\"list\"`:\r\n   `[data-mono-type='row']`, `[data-mono-active]`, `[data-mono-selected]`,\r\n   `[data-mono-chrome]`) so the two can never drift. `:where()` wraps only the\r\n   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 outline-none select-none; disabled\r\n   pointer-events-none opacity-50 */\r\n/* basecoat@1.0.2 styles/vega.css .combobox [role='option'] — gap-2 rounded-sm\r\n   py-1.5 ps-2 pe-8 text-sm, svg size-4; EXTENSION: one indent step per level */\r\n[mono-tag-input] [mono-item],\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-type='row'] {\r\n  --_ti-item-level: 0;\r\n  position: relative;\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  gap: var(--mono-tag-input-option-gap, calc(var(--mono-spacing) * 2));\r\n  margin: 0;\r\n  padding-block: var(--mono-tag-input-option-padding-y, calc(var(--mono-spacing) * 1.5));\r\n  padding-inline: var(--mono-tag-input-option-padding-x, calc(var(--mono-spacing) * 2)) var(--mono-tag-input-option-padding-end, calc(var(--mono-spacing) * 8));\r\n  padding-inline-start: calc(var(--mono-tag-input-option-padding-x, calc(var(--mono-spacing) * 2)) + var(--_ti-item-level) * calc(var(--mono-spacing) * 3));\r\n  min-height: var(--mono-tag-input-option-min-height, 0);\r\n  border: 0;\r\n  border-radius: var(--mono-tag-input-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-tag-input-text);\r\n  font-family: inherit;\r\n  font-size: var(--mono-tag-input-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-tag-input-option-line-height, var(--mono-text-sm--lh));\r\n  font-weight: var(--mono-tag-input-option-font-weight, var(--mono-font-weight-normal));\r\n  text-align: start;\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-tag-input-option-spacing`. */\r\n[mono-tag-input] [mono-item] + [mono-item],\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-type='row'] + [data-mono-type='row'] {\r\n  margin-top: var(--mono-tag-input-option-spacing, 2px);\r\n}\r\n\r\n[mono-tag-input] [mono-item][mono-level='1'] { --_ti-item-level: 1; }\r\n[mono-tag-input] [mono-item][mono-level='2'] { --_ti-item-level: 2; }\r\n[mono-tag-input] [mono-item][mono-level='3'] { --_ti-item-level: 3; }\r\n[mono-tag-input] [mono-item][mono-level='4'] { --_ti-item-level: 4; }\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-tag-input] [mono-item][mono-active]:not([mono-disabled]):not(:disabled),\r\n[mono-tag-input] [mono-item]:focus-visible,\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-active] {\r\n  background-color: var(--mono-tag-input-option-active-bg, var(--muted));\r\n  color: var(--mono-tag-input-option-active-color, var(--_mono-tag-input-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[mono-tag-input] [mono-item]:hover:not([mono-disabled]):not(:disabled),\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-type='row']:hover {\r\n  background-color: var(--mono-tag-input-option-active-bg, var(--muted));\r\n  color: var(--mono-tag-input-option-active-color, var(--_mono-tag-input-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. A row with its OWN checkbox says it there instead. */\r\n[mono-tag-input] [mono-item][mono-selected]:not([mono-check]),\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-type='row'][data-mono-selected] {\r\n  background-image: var(--mono-tag-input-check-icon, var(--check-icon));\r\n  background-size: var(--mono-tag-input-check-size, 0.875rem);\r\n  background-position: center right calc(var(--mono-spacing) * 2);\r\n  background-repeat: no-repeat;\r\n}\r\n\r\n[mono-tag-input] [mono-item][mono-selected]:not([mono-check]):dir(rtl),\r\n[mono-tag-input] :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-tag-input] [mono-item][mono-disabled],\r\n[mono-tag-input] [mono-item]:disabled {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* the title IS the consumer's line — a custom row has no title element */\r\n[mono-tag-input] [mono-item-text] {\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n}\r\n\r\n[mono-tag-input] [mono-item-title],\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-type='row'] {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* EXTENSION — `item.description`: a muted second line */\r\n[mono-tag-input] [mono-item-sub] {\r\n  margin-top: 0;\r\n  font-size: var(--mono-text-xs);\r\n  line-height: var(--mono-text-xs--lh);\r\n  color: var(--_mono-tag-input-muted);\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* checkable rows: the box IS a mono-checkbox — the row emits the element's own\r\n   markup ([mono-checkbox] > [mono-box], [mono-size=\"sm\"], the checked /\r\n   indeterminate / loading states) and checkbox.css paints every pixel of it, in\r\n   both builds; this sheet says only how it sits in the row: it must not shrink\r\n   or take clicks (the row's button handles the toggle). A consumer's line lays\r\n   out the same. */\r\n[mono-tag-input] [mono-check-box],\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-chrome] {\r\n  flex: 0 0 auto;\r\n  gap: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-type='group'] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--mono-tag-input-option-gap, calc(var(--mono-spacing) * 2));\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 */\r\n[mono-tag-input] [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-tag-input-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-tag-input-option-line-height, var(--mono-text-sm--lh));\r\n  color: var(--_mono-tag-input-muted);\r\n  text-align: center;\r\n  cursor: default;\r\n  user-select: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox [role='heading'] — px-2 py-1.5 text-xs\r\n   text-muted-foreground; EXTENSION: one indent step per level, a <button> when the\r\n   header selects its group */\r\n[mono-tag-input] [mono-group],\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-type='group'] {\r\n  --_ti-group-level: 0;\r\n  width: 100%;\r\n  margin: 0;\r\n  padding-block: var(--mono-tag-input-group-padding-y, calc(var(--mono-spacing) * 1.5));\r\n  padding-inline: var(--mono-tag-input-group-padding-x, calc(var(--mono-spacing) * 2));\r\n  padding-inline-start: calc(var(--mono-tag-input-group-padding-x, calc(var(--mono-spacing) * 2)) + var(--_ti-group-level) * calc(var(--mono-spacing) * 3));\r\n  border: 0;\r\n  border-radius: var(--mono-tag-input-option-radius, var(--mono-radius-sm));\r\n  background: transparent;\r\n  font-family: inherit;\r\n  font-size: var(--mono-tag-input-group-font-size, var(--mono-text-xs));\r\n  line-height: var(--mono-tag-input-group-line-height, var(--mono-text-xs--lh));\r\n  font-weight: var(--mono-tag-input-group-font-weight, var(--mono-font-weight-normal));\r\n  text-transform: var(--mono-tag-input-group-text-transform, none);\r\n  letter-spacing: var(--mono-tag-input-group-letter-spacing, normal);\r\n  text-align: start;\r\n  color: var(--_mono-tag-input-muted);\r\n  cursor: default;\r\n  user-select: none;\r\n}\r\n\r\n[mono-tag-input] [mono-group][mono-level='1'],\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-level='1'] { --_ti-group-level: 1; --_ti-item-level: 1; }\r\n[mono-tag-input] [mono-group][mono-level='2'],\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-level='2'] { --_ti-group-level: 2; --_ti-item-level: 2; }\r\n[mono-tag-input] [mono-group][mono-level='3'],\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-level='3'] { --_ti-group-level: 3; --_ti-item-level: 3; }\r\n[mono-tag-input] [mono-group][mono-level='4'],\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-level='4'] { --_ti-group-level: 4; --_ti-item-level: 4; }\r\n\r\n/* a header that selects its own group is a <button> laid out like the rows */\r\n[mono-tag-input] [mono-group][mono-toggle],\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-type='group']:has([data-mono-chrome]) {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--mono-tag-input-option-gap, calc(var(--mono-spacing) * 2));\r\n  cursor: pointer;\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-tag-input] [mono-group][mono-toggle]:hover {\r\n    background-color: var(--mono-tag-input-option-active-bg, var(--muted));\r\n    color: var(--_mono-tag-input-text);\r\n  }\r\n}\r\n\r\n/* a group carrying a selection reads at a glance while scrolling */\r\n[mono-tag-input] [mono-group][mono-toggle][mono-selected] {\r\n  color: var(--_mono-tag-input-text);\r\n}\r\n\r\n[mono-tag-input] [mono-group-label] {\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* group-sticky: pin headers while their rows scroll, on the panel's own surface */\r\n[mono-tag-input] [mono-group][mono-sticky] {\r\n  position: sticky;\r\n  top: calc(var(--_ti-group-level) * 1.5rem);\r\n  z-index: calc(5 - var(--_ti-group-level));\r\n  background: var(--mono-tag-input-dropdown-bg, var(--popover));\r\n}\r\n\r\n/* EXTENSION — the \"All\" row: always first, always sticky, on the panel surface\r\n   with a hairline under it; z above the group headers (which stack from 5 down) */\r\n[mono-tag-input] [mono-select-all] {\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 6;\r\n  background-color: var(--mono-tag-input-dropdown-bg, var(--popover));\r\n  box-shadow: 0 1px 0 0 var(--border);\r\n  font-weight: var(--mono-font-weight-medium);\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-tag-input] [mono-select-all]:hover:not(:disabled) {\r\n    background-color: var(--mono-tag-input-option-active-bg, var(--muted));\r\n  }\r\n}\r\n\r\n/* while it drains the server the row is `disabled` so a second click cannot start\r\n   a second drain — but it is busy, not unavailable: undo the disabled look */\r\n[mono-tag-input] [mono-select-all][mono-loading],\r\n[mono-tag-input] [mono-select-all][mono-loading]:hover {\r\n  opacity: 1;\r\n  cursor: progress;\r\n  pointer-events: none;\r\n  background-color: var(--mono-tag-input-option-active-bg, var(--muted));\r\n}\r\n\r\n/* EXTENSION — the load-more affordance: an option-shaped ghost button */\r\n[mono-tag-input] [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-tag-input-option-gap, calc(var(--mono-spacing) * 2));\r\n  margin: 0;\r\n  padding-block: var(--mono-tag-input-option-padding-y, calc(var(--mono-spacing) * 1.5));\r\n  padding-inline: var(--mono-tag-input-option-padding-x, calc(var(--mono-spacing) * 2));\r\n  border: 0;\r\n  border-radius: var(--mono-tag-input-option-radius, var(--mono-radius-sm));\r\n  background: transparent;\r\n  color: var(--_mono-tag-input-muted);\r\n  font-family: inherit;\r\n  font-size: var(--mono-tag-input-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-tag-input-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-tag-input] [mono-load-more]:hover:not([mono-loading]) {\r\n    background: var(--mono-tag-input-option-active-bg, var(--muted));\r\n    color: var(--_mono-tag-input-text);\r\n  }\r\n}\r\n\r\n[mono-tag-input] [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. */\r\n[mono-tag-input] [mono-list-slot] {\r\n  display: contents;\r\n}\r\n\r\n/* =========================================\r\n   The \"+N more\" overflow panel — a popover holding the overflow chips\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox [data-popover] — bg-popover ring-1\r\n   ring-foreground/10 rounded-md shadow-md; EXTENSION: p-1.5 gap-1.5 flex-wrap */\r\n[mono-tag-input] > [mono-more-panel] {\r\n  position: absolute;\r\n  left: 0;\r\n  right: 0;\r\n  top: auto;\r\n  transform: translateY(calc(var(--mono-spacing) * 1.5));\r\n  z-index: var(--mono-popup-z, 1000);\r\n  display: none;\r\n  flex-wrap: wrap;\r\n  align-items: flex-start;\r\n  gap: var(--_mono-tag-input-gap);\r\n  padding: calc(var(--mono-spacing) * 1.5);\r\n  max-height: min(14rem, var(--mono-popup-avail-h, 100vh));\r\n  overflow: auto;\r\n  overscroll-behavior: contain;\r\n  border-radius: var(--mono-tag-input-dropdown-radius, var(--mono-radius-md));\r\n  background: var(--mono-tag-input-dropdown-bg, var(--popover));\r\n  color: var(--mono-tag-input-dropdown-color, var(--popover-foreground));\r\n  box-shadow: var(--mono-tag-input-dropdown-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)), var(--mono-tag-input-dropdown-shadow, var(--mono-shadow-md));\r\n}\r\n\r\n[mono-tag-input][mono-more-open] > [mono-more-panel] {\r\n  display: flex;\r\n}\r\n\r\n/* =========================================\r\n   Message\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p */\r\n[mono-tag-input] > [mono-message-wrap] {\r\n  display: block;\r\n  margin-top: var(--_mono-tag-input-gap-y);\r\n}\r\n\r\n[mono-tag-input] > [mono-message-wrap]:not(:has([mono-message]:not([mono-empty]))) {\r\n  display: none;\r\n}\r\n\r\n[mono-tag-input] [mono-message] {\r\n  font-size: var(--mono-tag-input-message-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-tag-input-message-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-font-weight-normal);\r\n  text-align: start;\r\n  color: var(--_mono-tag-input-muted);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field [role=\"alert\"] — text-destructive text-sm */\r\n[mono-tag-input] [mono-message=\"invalid\"] {\r\n  color: var(--_mono-tag-input-invalid);\r\n}\r\n\r\n[mono-tag-input] [mono-message=\"valid\"] {\r\n  color: var(--_mono-tag-input-valid);\r\n}\r\n\r\n[mono-tag-input] [mono-message=\"warning\"] {\r\n  color: var(--_mono-tag-input-warning);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-tag-input] > [mono-field],\r\n  [mono-tag-input] [mono-clear],\r\n  [mono-tag-input] [mono-arrow],\r\n  [mono-tag-input] [mono-scroll],\r\n  [mono-tag-input] [mono-item],\r\n  [mono-tag-input] [mono-chip-close] {\r\n    transition: none;\r\n  }\r\n\r\n  [mono-tag-input] [mono-ds-spinner] > svg {\r\n    animation-duration: 2.4s;\r\n  }\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\tag-input\tag-input.css?raw.js
+var tag_input_css_raw_default = "/* =========================================================================\r\n   mono-tag-input — a port of Basecoat's multi-select combobox: `.combobox-chips`\r\n   (the field), `.combobox-chip` (+ `-remove`) and the `.combobox [data-popover]`\r\n   list (basecoat-css@1.0.2, vega style), on the `.field` / `.label` chrome the\r\n   ported input already carries.\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-tag-input size=\"sm\" color=\"danger\" variant=\"filled\" label=\"Tags\">\r\n     <div mono-tag-input mono-size=\"sm\" mono-color=\"danger\" mono-variant=\"filled\">\r\n       <label mono-label>Tags</label>\r\n       <div mono-field>\r\n         <div mono-chip mono-removable><span mono-chip-main><span mono-chip-content>\r\n           <span mono-chip-label>Vue</span><button mono-chip-close>…</button></span></span></div>\r\n         <input mono-native /> <div mono-actions><span mono-arrow>…</span></div>\r\n       </div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary, `:not([mono-variant])` = outlined). The element\r\n   renders these attributes on its wrapper (both builds) plus the STATES\r\n   `mono-open` / `mono-more-open`; the old classes (`.mono-tag-input.sm.open`) are\r\n   still emitted as inert hooks until 2.0 but no rule here reads them. The tag\r\n   chips are NOT `.mono-chip`s any more: they are Basecoat combobox chips, painted\r\n   here (`[mono-tag-input] [mono-chip]`), and chip.css never sees them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-tag-input]                              ≡ .field (gap-3, as margins — see the root rule) + .combobox (position: relative)\r\n     [mono-tag-input] > [mono-label]               ≡ .field > label / .label\r\n     [mono-tag-input] > [mono-field]               ≡ .combobox-chips (min-h-9 gap-1.5 rounded-md border-input px-1.5 py-1.5 text-sm shadow-xs)\r\n     [mono-field] > [mono-native]                  ≡ .combobox-chips > input[role='combobox'] (min-w-16 flex-1, borderless)\r\n     [mono-field] [mono-chip] > [mono-chip-main]   ≡ .combobox-chip (h-5.5 gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium)\r\n     [mono-chip] [mono-chip-close]                 ≡ .combobox-chip-remove (-ms-1 opacity-50 hover:100, svg size-3.5)\r\n     [mono-chip][mono-more]                        ≡ EXTENSION (the \"+N more\" counter chip, same box)\r\n     [mono-actions] > [mono-arrow] > svg           ≡ .combobox-trigger-icon (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-actions] > [mono-scroll]                ≡ EXTENSION (the inline strip's ‹ › pager, same box)\r\n     [mono-dropdown]                               ≡ .combobox [data-popover] + [role='listbox'] (bg-popover ring-1 rounded-md shadow-md, max-h-72 p-1 scroll)\r\n     [mono-item]                                   ≡ .combobox [role='option'] (gap-2 rounded-sm py-1.5 ps-2 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, unless the row has its own checkbox\r\n     [mono-group]                                  ≡ .combobox [role='heading'] (px-2 py-1.5 text-xs text-muted-foreground)\r\n     [mono-select-all]                             ≡ EXTENSION (a sticky option row over the list)\r\n     [mono-more-panel]                             ≡ [data-popover] holding the overflow chips\r\n     [mono-empty-row]                              ≡ [role='listbox']::before (py-6 text-center text-sm)\r\n     [mono-message-wrap] > [mono-message]          ≡ .field > p / .field [role='alert']\r\n     [mono-validation-state=\"invalid\"]             ≡ .combobox-chips:has([aria-invalid=true]) + .field[data-invalid]\r\n     [mono-validation-state=\"valid|warning\"]       ≡ EXTENSION (the invalid pattern in --success / --warning)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION (the --mono-control-height-* ladder)\r\n     [mono-variant=\"filled\"]                       ≡ EXTENSION (luma's .combobox-chips)\r\n     [mono-variant=\"underlined\"]                   ≡ EXTENSION (sera's .combobox-chips: bottom edge only, no ring)\r\n\r\n   Inner parts: [mono-label] (+ [mono-required-mark]), [mono-field] (+ [mono-inline],\r\n   [mono-typing]), [mono-chip-strip], [mono-chip] (+ [mono-removable], [mono-more],\r\n   [mono-chip-color=\"…\"]) > [mono-chip-main] > [mono-chip-content] > [mono-chip-dot] /\r\n   [mono-chip-label] / [mono-chip-close] > [mono-icon], [mono-native], [mono-actions] >\r\n   [mono-scroll=\"prev|next\"] (+ [mono-idle]) / [mono-clear] > [mono-icon] / [mono-arrow],\r\n   [mono-dropdown], [mono-select-all] (+ [mono-loading]), [mono-item] (+ [mono-active],\r\n   [mono-selected], [mono-disabled], [mono-check], [mono-level=\"n\"]) > [mono-check-box] /\r\n   [mono-item-text] > [mono-item-title] / [mono-item-sub], [mono-group] (+ [mono-level],\r\n   [mono-sticky], [mono-toggle], [mono-selected]) > [mono-group-label], [mono-empty-row],\r\n   [mono-load-more] (+ [mono-loading]), [mono-list-slot], [mono-more-panel],\r\n   [mono-message-wrap] > [mono-message=\"helper|valid|invalid|warning\"]. The shadow build\r\n   marks an unassigned slot wrapper [mono-empty].\r\n\r\n   THE PANELS ARE PORTALED (light build): [mono-dropdown] and [mono-more-panel] move\r\n   into a `<div data-mono-popup-portal>` under <body> while open, and the portal\r\n   mirrors the wrapper's class AND mono-* attributes, so every rule here is scoped\r\n   under `[mono-tag-input]` and never relies on the panel being inside the field.\r\n\r\n   FLAVORS set the same knobs as mono-input, renamed `--mono-tag-input-*`, plus the\r\n   select's panel / option / group set (`--mono-tag-input-dropdown-*`,\r\n   `--mono-tag-input-option-*`, `--mono-tag-input-group-*`) and the chip set\r\n   (`--mono-tag-input-chip-{radius,bg,color,font-size,font-weight}`). Every fallback\r\n   here is vega's value (`node scripts/basecoat-styles.mjs --varying \"^\\.combobox\"`).\r\n   ========================================================================= */\r\n\r\nmono-tag-input {\r\n  display: block;\r\n}\r\n\r\n[mono-tag-input] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-tag-input-text: var(--mono-tag-input-color, var(--mono-tag-input-text, var(--foreground)));\r\n  --_mono-tag-input-placeholder: var(--mono-tag-input-placeholder, var(--muted-foreground));\r\n  --_mono-tag-input-muted: var(--mono-tag-input-muted, var(--muted-foreground));\r\n  --_mono-tag-input-primary: var(--mono-tag-input-primary, var(--ring));\r\n  --_mono-tag-input-secondary: var(--mono-tag-input-secondary, var(--muted-foreground));\r\n  --_mono-tag-input-success: var(--mono-tag-input-success, var(--success));\r\n  --_mono-tag-input-danger: var(--mono-tag-input-danger, var(--destructive));\r\n  --_mono-tag-input-warning: var(--mono-tag-input-warning, var(--warning));\r\n  --_mono-tag-input-info: var(--mono-tag-input-info, var(--info));\r\n  --_mono-tag-input-teal: var(--mono-tag-input-teal, var(--teal));\r\n  --_mono-tag-input-purple: var(--mono-tag-input-purple, var(--purple));\r\n  --_mono-tag-input-neutral: var(--mono-tag-input-neutral, var(--neutral));\r\n  --_mono-tag-input-dark: var(--mono-tag-input-dark, var(--dark));\r\n  --_mono-tag-input-valid: var(--mono-tag-input-valid, var(--success));\r\n  --_mono-tag-input-invalid: var(--mono-tag-input-invalid, var(--destructive));\r\n\r\n  /* ── the painted result — three tiers, base = .combobox-chips (vega) ──── */\r\n  --_mono-tag-input-ring-color: var(--mono-tag-input-ring-color, var(--mono-tag-input-focus-color, var(--_mono-tag-input-ring-color-preset, var(--_mono-tag-input-primary))));\r\n  --_mono-tag-input-ring-width: var(--mono-tag-input-ring-width, var(--_mono-tag-input-ring-width-preset, var(--mono-ring-width)));\r\n  --_mono-tag-input-ring-alpha: var(--mono-tag-input-ring-alpha, var(--mono-ring-alpha));\r\n  --_mono-tag-input-border-color: var(--mono-tag-input-rest-border, var(--mono-tag-input-border-color, var(--mono-tag-input-border, var(--_mono-tag-input-border-color-preset, var(--input)))));\r\n  --_mono-tag-input-bg: var(--mono-tag-input-bg, var(--mono-tag-input-surface, var(--_mono-tag-input-bg-preset, var(--mono-mode-surface))));\r\n  --_mono-tag-input-shadow: var(--mono-tag-input-shadow, var(--_mono-tag-input-shadow-preset, 0 0 #0000));\r\n  --_mono-tag-input-icon: var(--mono-tag-input-icon-size, calc(var(--mono-spacing) * 4));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\r\n        `<div mono-tag-input>` that names no size renders exactly like size=\"md\".\r\n        basecoat@1.0.2 styles/vega.css .combobox-chips — min-h-9 gap-1.5 rounded-md\r\n        px-1.5 py-1.5 text-sm; .combobox-chip h-5.5 ── */\r\n  --_mono-tag-input-height: var(--mono-tag-input-height-md, var(--mono-control-height-md));\r\n  --_mono-tag-input-radius: var(--mono-tag-input-radius-md, var(--_mono-tag-input-radius-preset, var(--mono-tag-input-radius, var(--mono-radius-md))));\r\n  --_mono-tag-input-padding-x: var(--mono-tag-input-padding-x-md, var(--mono-tag-input-padding-x, var(--_mono-tag-input-padding-x-preset, calc(var(--mono-spacing) * 1.5))));\r\n  --_mono-tag-input-padding-y: var(--mono-tag-input-padding-y-md, var(--mono-tag-input-padding-y, calc(var(--mono-spacing) * 1.5)));\r\n  --_mono-tag-input-gap: var(--mono-tag-input-chip-gap, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-tag-input-font-size: var(--mono-tag-input-font-md, var(--mono-text-sm));\r\n  --_mono-tag-input-line-height: var(--mono-tag-input-line-height, var(--mono-tag-input-line-height-md, var(--mono-text-sm--lh)));\r\n  --_mono-tag-input-chip-height: var(--mono-tag-input-chip-height-md, min(calc(var(--mono-spacing) * 5.5), var(--_mono-tag-input-chip-fit)));\r\n  /* The room one row of chips has: the field's height minus its block padding and borders. Each\r\n     size's DEFAULT chip height is capped by it, so the rule \"chip h + 2·py + 2px ≤ token\" holds\r\n     under ANY control ladder — a dense flavor (mira: xs 20px) shrinks the chip instead of growing\r\n     an empty field past the token. An explicit `--mono-tag-input-chip-height-*` is not capped. */\r\n  --_mono-tag-input-chip-fit: calc(var(--_mono-tag-input-height) - 2 * var(--_mono-tag-input-padding-y) - 2 * var(--mono-border-width));\r\n  --_mono-tag-input-chip-font-size: var(--mono-tag-input-chip-font-size, var(--mono-text-xs));\r\n  --_mono-tag-input-chip-line-height: var(--mono-tag-input-chip-line-height, var(--mono-text-xs--lh));\r\n  --_mono-tag-input-action: calc(var(--mono-spacing) * 6);\r\n  --_mono-tag-input-clear-glyph: calc(var(--mono-spacing) * 3.5);\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3; mono: 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 field, above the\r\n     message — instead of a flex container's content-box top (see select.css) */\r\n  --_mono-tag-input-gap-y: var(--mono-tag-input-gap, calc(var(--mono-spacing) * 3));\r\n  position: relative;\r\n  display: block;\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-tag-input-text);\r\n}\r\n\r\n[mono-tag-input],\r\n[mono-tag-input] *,\r\n[mono-tag-input] *::before,\r\n[mono-tag-input] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n[mono-tag-input] :is([mono-label], [mono-message])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — an EMPTY field's painted height IS the token (tests/perf/field-heights);\r\n   a second row of chips grows it. Each step keeps one row of chips + its block\r\n   padding under the token: chip h + 2·py + 2px ≤ token.\r\n   ========================================= */\r\n\r\n[mono-tag-input][mono-size=\"xs\"] {\r\n  --_mono-tag-input-height: var(--mono-tag-input-height-xs, var(--mono-control-height-xs));\r\n  --_mono-tag-input-radius: var(--mono-tag-input-radius-xs, var(--_mono-tag-input-radius-preset, var(--mono-tag-input-radius, var(--mono-radius-md))));\r\n  --_mono-tag-input-padding-x: var(--mono-tag-input-padding-x-xs, var(--mono-tag-input-padding-x, var(--_mono-tag-input-padding-x-preset, var(--mono-spacing))));\r\n  --_mono-tag-input-padding-y: var(--mono-tag-input-padding-y-xs, var(--mono-tag-input-padding-y, calc(var(--mono-spacing) * 0.5)));\r\n  --_mono-tag-input-gap: var(--mono-tag-input-chip-gap, var(--mono-spacing));\r\n  --_mono-tag-input-font-size: var(--mono-tag-input-font-xs, var(--mono-text-xs));\r\n  --_mono-tag-input-line-height: var(--mono-tag-input-line-height, var(--mono-tag-input-line-height-xs, var(--mono-text-xs--lh)));\r\n  --_mono-tag-input-chip-height: var(--mono-tag-input-chip-height-xs, min(calc(var(--mono-spacing) * 4.5), var(--_mono-tag-input-chip-fit)));\r\n  --_mono-tag-input-icon: var(--mono-tag-input-icon-size, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-tag-input-action: calc(var(--mono-spacing) * 4);\r\n  --_mono-tag-input-clear-glyph: calc(var(--mono-spacing) * 3);\r\n}\r\n\r\n[mono-tag-input][mono-size=\"sm\"] {\r\n  --_mono-tag-input-height: var(--mono-tag-input-height-sm, var(--mono-control-height-sm));\r\n  --_mono-tag-input-radius: var(--mono-tag-input-radius-sm, var(--_mono-tag-input-radius-preset, var(--mono-tag-input-radius, var(--mono-radius-md))));\r\n  --_mono-tag-input-padding-x: var(--mono-tag-input-padding-x-sm, var(--mono-tag-input-padding-x, var(--_mono-tag-input-padding-x-preset, var(--mono-spacing))));\r\n  --_mono-tag-input-padding-y: var(--mono-tag-input-padding-y-sm, var(--mono-tag-input-padding-y, var(--mono-spacing)));\r\n  --_mono-tag-input-gap: var(--mono-tag-input-chip-gap, var(--mono-spacing));\r\n  --_mono-tag-input-font-size: var(--mono-tag-input-font-sm, var(--mono-tag-input-font-md, var(--mono-text-sm)));\r\n  --_mono-tag-input-line-height: var(--mono-tag-input-line-height, var(--mono-tag-input-line-height-sm, var(--mono-text-sm--lh)));\r\n  --_mono-tag-input-chip-height: var(--mono-tag-input-chip-height-sm, min(calc(var(--mono-spacing) * 5), var(--_mono-tag-input-chip-fit)));\r\n  --_mono-tag-input-action: calc(var(--mono-spacing) * 5);\r\n}\r\n\r\n[mono-tag-input][mono-size=\"lg\"] {\r\n  --_mono-tag-input-height: var(--mono-tag-input-height-lg, var(--mono-control-height-lg));\r\n  --_mono-tag-input-radius: var(--mono-tag-input-radius-lg, var(--_mono-tag-input-radius-preset, var(--mono-tag-input-radius, var(--mono-radius-md))));\r\n  --_mono-tag-input-padding-x: var(--mono-tag-input-padding-x-lg, var(--mono-tag-input-padding-x, var(--_mono-tag-input-padding-x-preset, calc(var(--mono-spacing) * 1.5))));\r\n  --_mono-tag-input-padding-y: var(--mono-tag-input-padding-y-lg, var(--mono-tag-input-padding-y, calc(var(--mono-spacing) * 1.5)));\r\n  --_mono-tag-input-font-size: var(--mono-tag-input-font-lg, var(--mono-tag-input-font-md, var(--mono-text-sm)));\r\n  --_mono-tag-input-line-height: var(--mono-tag-input-line-height, var(--mono-tag-input-line-height-lg, var(--mono-text-sm--lh)));\r\n  --_mono-tag-input-chip-height: var(--mono-tag-input-chip-height-lg, min(calc(var(--mono-spacing) * 6), var(--_mono-tag-input-chip-fit)));\r\n}\r\n\r\n[mono-tag-input][mono-size=\"xl\"] {\r\n  --_mono-tag-input-height: var(--mono-tag-input-height-xl, var(--mono-control-height-xl));\r\n  --_mono-tag-input-radius: var(--mono-tag-input-radius-xl, var(--_mono-tag-input-radius-preset, var(--mono-tag-input-radius, var(--mono-radius-md))));\r\n  --_mono-tag-input-padding-x: var(--mono-tag-input-padding-x-xl, var(--mono-tag-input-padding-x, var(--_mono-tag-input-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-tag-input-padding-y: var(--mono-tag-input-padding-y-xl, var(--mono-tag-input-padding-y, calc(var(--mono-spacing) * 2)));\r\n  --_mono-tag-input-gap: var(--mono-tag-input-chip-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-tag-input-font-size: var(--mono-tag-input-font-xl, var(--mono-text-base));\r\n  --_mono-tag-input-line-height: var(--mono-tag-input-line-height, var(--mono-tag-input-line-height-xl, var(--mono-text-base--lh)));\r\n  --_mono-tag-input-chip-height: var(--mono-tag-input-chip-height-xl, min(calc(var(--mono-spacing) * 6.5), var(--_mono-tag-input-chip-fit)));\r\n  --_mono-tag-input-chip-font-size: var(--mono-tag-input-chip-font-size, var(--mono-text-sm));\r\n  --_mono-tag-input-chip-line-height: var(--mono-tag-input-chip-line-height, var(--mono-text-sm--lh));\r\n  --_mono-tag-input-icon: var(--mono-tag-input-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-tag-input-action: calc(var(--mono-spacing) * 7);\r\n  --_mono-tag-input-clear-glyph: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n[mono-tag-input][mono-size=\"xxl\"] {\r\n  --_mono-tag-input-height: var(--mono-tag-input-height-xxl, var(--mono-control-height-xxl));\r\n  --_mono-tag-input-radius: var(--mono-tag-input-radius-xxl, var(--_mono-tag-input-radius-preset, var(--mono-tag-input-radius, var(--mono-radius-md))));\r\n  --_mono-tag-input-padding-x: var(--mono-tag-input-padding-x-xxl, var(--mono-tag-input-padding-x, var(--_mono-tag-input-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-tag-input-padding-y: var(--mono-tag-input-padding-y-xxl, var(--mono-tag-input-padding-y, calc(var(--mono-spacing) * 2)));\r\n  --_mono-tag-input-gap: var(--mono-tag-input-chip-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-tag-input-font-size: var(--mono-tag-input-font-xxl, var(--mono-text-lg));\r\n  --_mono-tag-input-line-height: var(--mono-tag-input-line-height, var(--mono-tag-input-line-height-xxl, var(--mono-text-lg--lh)));\r\n  --_mono-tag-input-chip-height: var(--mono-tag-input-chip-height-xxl, min(calc(var(--mono-spacing) * 7), var(--_mono-tag-input-chip-fit)));\r\n  --_mono-tag-input-chip-font-size: var(--mono-tag-input-chip-font-size, var(--mono-text-sm));\r\n  --_mono-tag-input-chip-line-height: var(--mono-tag-input-chip-line-height, var(--mono-text-sm--lh));\r\n  --_mono-tag-input-icon: var(--mono-tag-input-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-tag-input-action: calc(var(--mono-spacing) * 8);\r\n  --_mono-tag-input-clear-glyph: calc(var(--mono-spacing) * 4);\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 .combobox-chips — rounded-md border border-input\r\n   bg-transparent shadow-xs (dark:bg-input/30 via --mono-mode-surface) */\r\n[mono-tag-input]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\r\n  --_mono-tag-input-bg-preset: var(--mono-tag-input-outline-bg);\r\n  --_mono-tag-input-border-color-preset: var(--mono-tag-input-outline-border-color);\r\n  --_mono-tag-input-side-border-color-preset: var(--mono-tag-input-outline-side-border-color);\r\n  --_mono-tag-input-shadow-preset: var(--mono-tag-input-outline-shadow, var(--mono-shadow-xs));\r\n  --_mono-tag-input-ring-width-preset: var(--mono-tag-input-outline-ring-width);\r\n  --_mono-tag-input-radius-preset: var(--mono-tag-input-outline-radius);\r\n  --_mono-tag-input-padding-x-preset: var(--mono-tag-input-outline-padding-x);\r\n}\r\n\r\n/* EXTENSION — filled ≡ basecoat@1.0.2 styles/luma.css .combobox-chips */\r\n[mono-tag-input][mono-variant=\"filled\"] {\r\n  --_mono-tag-input-bg-preset: var(--mono-tag-input-filled-bg, color-mix(in oklab, var(--input) 50%, transparent));\r\n  --_mono-tag-input-border-color-preset: transparent;\r\n  --_mono-tag-input-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* EXTENSION — underlined ≡ basecoat@1.0.2 styles/sera.css .combobox-chips */\r\n[mono-tag-input][mono-variant=\"underlined\"] {\r\n  --_mono-tag-input-bg-preset: transparent;\r\n  --_mono-tag-input-side-border-color-preset: transparent;\r\n  --_mono-tag-input-shadow-preset: 0 0 #0000;\r\n  --_mono-tag-input-ring-width-preset: 0px;\r\n  --_mono-tag-input-radius-preset: 0;\r\n  --_mono-tag-input-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-tag-input]:is(:not([mono-color]), [mono-color=\"primary\"]) {\r\n  --_mono-tag-input-ring-color-preset: var(--_mono-tag-input-primary);\r\n}\r\n[mono-tag-input][mono-color=\"secondary\"] {\r\n  --_mono-tag-input-ring-color-preset: var(--_mono-tag-input-secondary);\r\n}\r\n[mono-tag-input][mono-color=\"success\"] {\r\n  --_mono-tag-input-ring-color-preset: var(--_mono-tag-input-success);\r\n}\r\n[mono-tag-input][mono-color=\"danger\"] {\r\n  --_mono-tag-input-ring-color-preset: var(--_mono-tag-input-danger);\r\n}\r\n[mono-tag-input][mono-color=\"warning\"] {\r\n  --_mono-tag-input-ring-color-preset: var(--_mono-tag-input-warning);\r\n}\r\n[mono-tag-input][mono-color=\"info\"] {\r\n  --_mono-tag-input-ring-color-preset: var(--_mono-tag-input-info);\r\n}\r\n[mono-tag-input][mono-color=\"teal\"] {\r\n  --_mono-tag-input-ring-color-preset: var(--_mono-tag-input-teal);\r\n}\r\n[mono-tag-input][mono-color=\"purple\"] {\r\n  --_mono-tag-input-ring-color-preset: var(--_mono-tag-input-purple);\r\n}\r\n[mono-tag-input][mono-color=\"neutral\"] {\r\n  --_mono-tag-input-ring-color-preset: var(--_mono-tag-input-neutral);\r\n}\r\n[mono-tag-input][mono-color=\"dark\"] {\r\n  --_mono-tag-input-ring-color-preset: var(--_mono-tag-input-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-tag-input] > [mono-label] {\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  margin: 0 0 var(--_mono-tag-input-gap-y);\r\n  gap: var(--mono-tag-input-label-gap, calc(var(--mono-spacing) * 2));\r\n  font-size: var(--mono-tag-input-label-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-tag-input-label-line-height, 1);\r\n  font-weight: var(--mono-tag-input-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  text-transform: var(--mono-tag-input-label-text-transform, none);\r\n  letter-spacing: var(--mono-tag-input-label-letter-spacing, normal);\r\n  color: var(--_mono-tag-input-text);\r\n  user-select: none;\r\n}\r\n\r\n[mono-tag-input][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-tag-input][mono-validation-state=\"invalid\"] > [mono-label] {\r\n  color: var(--_mono-tag-input-invalid);\r\n}\r\n\r\n[mono-tag-input] [mono-required-mark] {\r\n  color: var(--_mono-tag-input-danger);\r\n}\r\n\r\n/* =========================================\r\n   The field — the chip box\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox-chips — flex w-full min-w-0\r\n   flex-wrap items-center */\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chips — min-h-9 gap-1.5 rounded-md\r\n   border border-input bg-transparent bg-clip-padding px-1.5 py-1.5 text-sm\r\n   shadow-xs transition-[color,box-shadow] focus-within:border-ring\r\n   focus-within:ring-3 focus-within:ring-ring/50 has-[[aria-invalid=true]]:…;\r\n   mono: `--tw-ring-*` flattened to the ring + shadow slots, the min-height is\r\n   the control token, the side edges read their own slot */\r\n[mono-tag-input] > [mono-field] {\r\n  --_mono-tag-input-bc: var(--_mono-tag-input-border-color);\r\n  --_mono-tag-input-side-bc: var(--mono-tag-input-side-border-color, var(--_mono-tag-input-side-border-color-preset, var(--_mono-tag-input-bc)));\r\n  --_mono-tag-input-ring: 0 0 #0000;\r\n\r\n  position: relative;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: var(--_mono-tag-input-gap);\r\n  width: 100%;\r\n  min-width: 0;\r\n  min-height: var(--_mono-tag-input-height);\r\n  padding-block: var(--_mono-tag-input-padding-y);\r\n  padding-inline: var(--_mono-tag-input-padding-x);\r\n  outline-style: none;\r\n  border: var(--mono-border-width) solid var(--_mono-tag-input-bc);\r\n  border-top-color: var(--_mono-tag-input-side-bc);\r\n  border-inline-color: var(--_mono-tag-input-side-bc);\r\n  border-radius: var(--_mono-tag-input-radius);\r\n  background: var(--_mono-tag-input-bg);\r\n  background-clip: padding-box;\r\n  color: var(--_mono-tag-input-text);\r\n  box-shadow: var(--_mono-tag-input-ring), var(--_mono-tag-input-shadow);\r\n  font-size: var(--_mono-tag-input-font-size);\r\n  line-height: var(--_mono-tag-input-line-height);\r\n  cursor: text;\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-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 */\r\n  &:focus-within {\r\n    --_mono-tag-input-bc: var(--_mono-tag-input-ring-color);\r\n    --_mono-tag-input-ring: 0 0 0 var(--_mono-tag-input-ring-width) color-mix(in oklab, var(--_mono-tag-input-ring-color) var(--_mono-tag-input-ring-alpha), transparent);\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chips — has-[[aria-invalid=true]]:border-destructive\r\n   has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive/20 */\r\n[mono-tag-input][mono-validation-state=\"invalid\"] > [mono-field],\r\n[mono-tag-input] > [mono-field]:has(> [mono-native][aria-invalid=\"true\"]) {\r\n  --_mono-tag-input-bc: var(--mono-mode-invalid-border);\r\n  --_mono-tag-input-ring: 0 0 0 var(--_mono-tag-input-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-tag-input][mono-validation-state=\"valid\"] > [mono-field] {\r\n  --_mono-tag-input-bc: color-mix(in oklab, var(--_mono-tag-input-valid) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-tag-input-ring: 0 0 0 var(--_mono-tag-input-ring-width) color-mix(in oklab, var(--_mono-tag-input-valid) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n[mono-tag-input][mono-validation-state=\"warning\"] > [mono-field] {\r\n  --_mono-tag-input-bc: color-mix(in oklab, var(--_mono-tag-input-warning) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-tag-input-ring: 0 0 0 var(--_mono-tag-input-ring-width) color-mix(in oklab, var(--_mono-tag-input-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-tag-input][mono-ds-error] > [mono-field] {\r\n  --_mono-tag-input-bc: var(--mono-tag-input-ds-error-border, var(--mono-mode-invalid-border));\r\n  --_mono-tag-input-ring: 0 0 0 var(--_mono-tag-input-ring-width) var(--mono-tag-input-ds-error-ring, var(--mono-mode-invalid-ring));\r\n}\r\n\r\n[mono-tag-input][mono-ds-error] [mono-native]::placeholder {\r\n  color: var(--mono-tag-input-ds-error-text, var(--_mono-tag-input-invalid));\r\n}\r\n\r\n/* EXTENSION — the first load (or a retry) is in flight: read-only */\r\n[mono-tag-input][mono-ds-loading] > [mono-field],\r\n[mono-tag-input][mono-ds-loading] [mono-native] {\r\n  cursor: progress;\r\n}\r\n\r\n/* EXTENSION — readonly: a muted surface */\r\n[mono-tag-input][mono-readonly] > [mono-field] {\r\n  background: var(--mono-tag-input-readonly-bg, var(--muted));\r\n  cursor: default;\r\n}\r\n\r\n/* .combobox-chips > input:disabled — opacity-50 (on the box, so the chips fade\r\n   with it). The strip's ‹ › pager opts back in so the chips can still be read. */\r\n[mono-tag-input][mono-disabled] > [mono-field] {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n  background: var(--mono-tag-input-disabled-bg, var(--_mono-tag-input-bg));\r\n}\r\n\r\n[mono-tag-input][mono-disabled] [mono-scroll]:not([mono-idle]) {\r\n  pointer-events: auto;\r\n  cursor: pointer;\r\n}\r\n\r\n/* ── the actions row stays on the FIRST row ──────────────────────────────\r\n   The field wraps, and the row is its last child, so once the chips wrapped it\r\n   rode down to the bottom-right. Pinned out of that flow instead; `top` centres\r\n   it on the single-row height. Not in inline mode: an inline field never wraps,\r\n   so the row sits in normal flow and the strip flexes against it. */\r\n[mono-tag-input] > [mono-field]:not([mono-inline]) {\r\n  padding-inline-end: calc(var(--_mono-tag-input-padding-x) + var(--_mono-tag-input-action) + var(--mono-spacing));\r\n}\r\n\r\n[mono-tag-input] > [mono-field]:not([mono-inline]) > [mono-actions] {\r\n  position: absolute;\r\n  inset-inline-end: var(--_mono-tag-input-padding-x);\r\n  top: calc((var(--_mono-tag-input-height) - var(--_mono-tag-input-action)) / 2);\r\n}\r\n\r\n/* =========================================\r\n   The text box\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox-chips > input[role='combobox']\r\n   — min-w-16 flex-1 bg-transparent outline-none placeholder:text-muted-foreground */\r\n[mono-tag-input] [mono-native] {\r\n  flex: 1 1 calc(var(--mono-spacing) * 16);\r\n  min-width: calc(var(--mono-spacing) * 16);\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-tag-input-text);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-tag-input-font-size);\r\n  line-height: var(--_mono-tag-input-line-height);\r\n  /* The chip row is the box's height; the text box never exceeds it. `height`, not only\r\n     `min-height`: an input's own line box is its floor, so with a chip shorter than the line (a\r\n     dense flavor's capped chip — mira xs: 14px chip, 16px line) the input set the row and an\r\n     empty field came out 2px over the control token. The 12px glyphs still fit. */\r\n  min-height: var(--_mono-tag-input-chip-height);\r\n  height: var(--_mono-tag-input-chip-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-tag-input-placeholder);\r\n  }\r\n\r\n  &:disabled,\r\n  &:read-only {\r\n    cursor: inherit;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   Chips\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox-chip — inline-flex w-fit\r\n   shrink-0 items-center whitespace-nowrap */\r\n[mono-tag-input] [mono-chip] {\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  max-width: 100%;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  white-space: nowrap;\r\n  vertical-align: middle;\r\n  line-height: 1;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chip — h-5.5 gap-1 rounded-sm bg-muted\r\n   px-1.5 text-xs font-medium text-foreground, has-[>.combobox-chip-remove]:pe-0 */\r\n[mono-tag-input] [mono-chip] > [mono-chip-main] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  height: var(--_mono-tag-input-chip-height);\r\n  max-width: 100%;\r\n  gap: var(--mono-tag-input-chip-content-gap, var(--mono-spacing));\r\n  margin: 0;\r\n  padding-inline: var(--mono-tag-input-chip-padding-x, calc(var(--mono-spacing) * 1.5));\r\n  border: 0;\r\n  border-radius: var(--mono-tag-input-chip-radius, var(--mono-radius-sm));\r\n  background: var(--mono-tag-input-chip-bg, var(--muted));\r\n  color: var(--mono-tag-input-chip-color, var(--_mono-tag-input-text));\r\n  font-family: inherit;\r\n  font-size: var(--_mono-tag-input-chip-font-size);\r\n  line-height: var(--_mono-tag-input-chip-line-height);\r\n  font-weight: var(--mono-tag-input-chip-font-weight, var(--mono-font-weight-medium));\r\n  text-decoration: none;\r\n  cursor: default;\r\n}\r\n\r\n[mono-tag-input] [mono-chip][mono-removable] > [mono-chip-main] {\r\n  padding-inline-end: 0;\r\n}\r\n\r\n[mono-tag-input] [mono-chip] [mono-chip-content] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: inherit;\r\n  min-width: 0;\r\n  max-width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n[mono-tag-input] [mono-chip] [mono-chip-label] {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* EXTENSION — `chip.dot`: a coloured dot before the label (the badge's dot idiom) */\r\n[mono-tag-input] [mono-chip] [mono-chip-dot] {\r\n  flex: 0 0 auto;\r\n  width: calc(var(--mono-spacing) * 1.5);\r\n  height: calc(var(--mono-spacing) * 1.5);\r\n  border-radius: var(--mono-radius-full);\r\n  background: currentColor;\r\n}\r\n\r\n/* EXTENSION — `chip.color` pins a hue: the tonal pattern (bg-x/10 text-x, dark 20) */\r\n[mono-tag-input] [mono-chip][mono-chip-color=\"primary\"] > [mono-chip-main] { background: color-mix(in oklab, var(--primary) var(--mono-mode-tint), transparent); color: var(--primary); }\r\n[mono-tag-input] [mono-chip][mono-chip-color=\"secondary\"] > [mono-chip-main] { background: var(--secondary); color: var(--secondary-foreground); }\r\n[mono-tag-input] [mono-chip][mono-chip-color=\"success\"] > [mono-chip-main] { background: color-mix(in oklab, var(--success) var(--mono-mode-tint), transparent); color: var(--success); }\r\n[mono-tag-input] [mono-chip][mono-chip-color=\"danger\"] > [mono-chip-main] { background: color-mix(in oklab, var(--destructive) var(--mono-mode-tint), transparent); color: var(--destructive); }\r\n[mono-tag-input] [mono-chip][mono-chip-color=\"warning\"] > [mono-chip-main] { background: color-mix(in oklab, var(--warning) var(--mono-mode-tint), transparent); color: var(--warning); }\r\n[mono-tag-input] [mono-chip][mono-chip-color=\"info\"] > [mono-chip-main] { background: color-mix(in oklab, var(--info) var(--mono-mode-tint), transparent); color: var(--info); }\r\n[mono-tag-input] [mono-chip][mono-chip-color=\"teal\"] > [mono-chip-main] { background: color-mix(in oklab, var(--teal) var(--mono-mode-tint), transparent); color: var(--teal); }\r\n[mono-tag-input] [mono-chip][mono-chip-color=\"purple\"] > [mono-chip-main] { background: color-mix(in oklab, var(--purple) var(--mono-mode-tint), transparent); color: var(--purple); }\r\n[mono-tag-input] [mono-chip][mono-chip-color=\"neutral\"] > [mono-chip-main] { background: color-mix(in oklab, var(--neutral) var(--mono-mode-tint), transparent); color: var(--neutral); }\r\n[mono-tag-input] [mono-chip][mono-chip-color=\"dark\"] > [mono-chip-main] { background: var(--dark); color: var(--dark-foreground); }\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox-chip-remove — inline-flex\r\n   shrink-0 items-center justify-center */\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chip-remove — -ms-1 opacity-50\r\n   hover:opacity-100, svg size-3.5 */\r\n[mono-tag-input] [mono-chip] [mono-chip-close] {\r\n  display: inline-flex;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  /* explicit: the element still carries chip.css's `.chip-close` class as a hook,\r\n     which pins a 1rem box — the raw markup has no such class */\r\n  width: auto;\r\n  height: 100%;\r\n  min-width: 0;\r\n  margin: 0;\r\n  transform: none;\r\n  margin-inline-start: calc(var(--mono-spacing) * -1);\r\n  padding: 0 var(--mono-spacing);\r\n  border: 0;\r\n  border-radius: inherit;\r\n  background: transparent;\r\n  color: inherit;\r\n  font: inherit;\r\n  line-height: 1;\r\n  opacity: 0.5;\r\n  cursor: pointer;\r\n  outline-style: none;\r\n  transition-property: opacity;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n\r\n  &:focus-visible {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-tag-input] [mono-chip] [mono-chip-close]:hover {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n[mono-tag-input] [mono-chip] [mono-chip-close] > :is(svg, .mono-icon, [mono-icon]) {\r\n  display: block;\r\n  width: calc(var(--mono-spacing) * 3.5);\r\n  height: calc(var(--mono-spacing) * 3.5);\r\n  pointer-events: none;\r\n}\r\n\r\n/* EXTENSION — the \"+N more\" counter chip is a control */\r\n[mono-tag-input] [mono-chip][mono-more] > [mono-chip-main] {\r\n  cursor: pointer;\r\n  outline-style: none;\r\n}\r\n\r\n[mono-tag-input] [mono-chip][mono-more] > [mono-chip-main]:focus-visible {\r\n  box-shadow: 0 0 0 var(--_mono-tag-input-ring-width) color-mix(in oklab, var(--_mono-tag-input-ring-color) var(--_mono-tag-input-ring-alpha), transparent);\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-tag-input] [mono-chip][mono-more] > [mono-chip-main]:hover {\r\n    background: var(--mono-mode-surface-hover);\r\n  }\r\n}\r\n\r\n/* ── the inline chip strip (`chip.behaviour: 'inline'`) ──────────────────\r\n   One line that never grows: the field stops wrapping, the chips live in their\r\n   own strip, and the strip absorbs the overflow instead of the field.\r\n\r\n   `overflow-x: hidden` — NOT `auto` — is the whole scroll contract. Hidden still\r\n   honours a programmatic `scrollLeft`, so `ChipStripController` can page the\r\n   strip while the browser paints no scrollbar. */\r\n[mono-tag-input] > [mono-field][mono-inline] {\r\n  flex-wrap: nowrap;\r\n  min-width: 0;\r\n}\r\n\r\n[mono-tag-input] [mono-chip-strip] {\r\n  display: flex;\r\n  flex-wrap: nowrap;\r\n  align-items: center;\r\n  gap: var(--_mono-tag-input-gap);\r\n  flex: 0 1 auto;\r\n  min-width: 0;\r\n  overflow-x: hidden;\r\n  overflow-y: hidden;\r\n  /* NO `scroll-behavior: smooth` — see ChipStripController (one scroll event per\r\n     frame would reposition every open popup). */\r\n}\r\n\r\n[mono-tag-input] [mono-chip-strip] > * {\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* The text box takes the SLACK: `flex-basis: 0` contributes nothing to the\r\n   overflow calculation, so when the chips overflow it collapses and the strip\r\n   runs up to the pager; focus earns a caret's room, typing earns a real box. */\r\n[mono-tag-input] > [mono-field][mono-inline] > [mono-native] {\r\n  flex: 1 1 0;\r\n  min-width: 0;\r\n}\r\n\r\n[mono-tag-input] > [mono-field][mono-inline] > [mono-native]:focus,\r\n[mono-tag-input] > [mono-field][mono-inline] > [mono-native]:focus-visible {\r\n  min-width: calc(var(--mono-spacing) * 5);\r\n}\r\n\r\n[mono-tag-input] > [mono-field][mono-inline][mono-typing] > [mono-native] {\r\n  min-width: calc(var(--mono-spacing) * 24);\r\n}\r\n\r\n/* =========================================\r\n   Actions — ‹ › pager, clear, caret\r\n   ========================================= */\r\n\r\n[mono-tag-input] [mono-actions] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--mono-spacing);\r\n  flex: 0 0 auto;\r\n  line-height: 1;\r\n}\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox [data-clear] — size-6 border-0\r\n   bg-transparent p-0 text-current; the caret ≡ .combobox-trigger-icon (size-4\r\n   text-muted-foreground), the pager the same box. Painted as .btn[data-variant='ghost']. */\r\n[mono-tag-input] [mono-clear],\r\n[mono-tag-input] [mono-arrow],\r\n[mono-tag-input] [mono-scroll],\r\n[mono-tag-input] [mono-ds-retry],\r\n[mono-tag-input] [mono-ds-spinner] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: 0 0 auto;\r\n  width: var(--_mono-tag-input-action);\r\n  height: var(--_mono-tag-input-action);\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--mono-tag-input-clear-radius, calc(var(--radius) - 5px));\r\n  background: transparent;\r\n  color: var(--_mono-tag-input-muted);\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  outline-style: none;\r\n  transition-property: color, background-color, transform;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n[mono-tag-input] :is([mono-clear], [mono-arrow], [mono-scroll], [mono-ds-retry], [mono-ds-spinner]) > :is(svg, .mono-icon, [mono-icon]) {\r\n  display: block;\r\n  width: var(--_mono-tag-input-icon);\r\n  height: var(--_mono-tag-input-icon);\r\n  pointer-events: none;\r\n}\r\n\r\n[mono-tag-input] [mono-clear] > :is(svg, .mono-icon, [mono-icon]) {\r\n  width: var(--_mono-tag-input-clear-glyph);\r\n  height: var(--_mono-tag-input-clear-glyph);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted hover:text-foreground */\r\n@media (hover: hover) {\r\n  [mono-tag-input] :is([mono-clear], [mono-arrow], [mono-scroll], [mono-ds-retry]):hover {\r\n    background: var(--mono-mode-ghost-hover);\r\n    color: var(--_mono-tag-input-text);\r\n  }\r\n}\r\n\r\n/* EXTENSION — the caret turns while the panel is open */\r\n[mono-tag-input][mono-open] [mono-arrow] > :is(svg, .mono-icon, [mono-icon]) {\r\n  transform: rotate(180deg);\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-tag-input] [mono-ds-spinner] {\r\n  cursor: progress;\r\n}\r\n\r\n[mono-tag-input] [mono-ds-spinner] > svg {\r\n  animation: mono-tag-input-spin 0.7s linear infinite;\r\n}\r\n\r\n[mono-tag-input] [mono-ds-retry] {\r\n  color: var(--mono-tag-input-ds-error-text, var(--_mono-tag-input-invalid));\r\n}\r\n\r\n@keyframes mono-tag-input-spin {\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n/* At an end of the strip the pager keeps its box but disappears — hiding it with\r\n   `display: none` would shrink the row and shove the strip sideways mid-click. */\r\n[mono-tag-input] [mono-scroll][mono-idle] {\r\n  visibility: hidden;\r\n  pointer-events: none;\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 overflow;\r\n   mono: `display: none` while closed, `--mono-popup-z` from the shared stack,\r\n   `--mono-popup-avail-h` from the portal controller */\r\n/* basecoat@1.0.2 styles/vega.css .combobox [data-popover] — bg-popover\r\n   text-popover-foreground ring-foreground/10 max-h-72 rounded-md p-0 shadow-md ring-1 */\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 (our panel IS\r\n   the listbox: one scrolling box) */\r\n[mono-tag-input] > [mono-dropdown] {\r\n  position: absolute;\r\n  /* `top: auto` = the static position (under the field, before the message); the\r\n     6px offset is a transform the controller's inline `transform: none` cancels */\r\n  top: auto;\r\n  transform: translateY(calc(var(--mono-spacing) * 1.5));\r\n  left: 0;\r\n  right: 0;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  display: none;\r\n  min-width: var(--mono-tag-input-dropdown-min-width, 9rem);\r\n  max-height: min(var(--_mono-tag-input-panel-max-h, 18rem), var(--mono-popup-avail-h, 100vh));\r\n  padding: var(--mono-tag-input-dropdown-padding, var(--mono-spacing));\r\n  overflow: auto;\r\n  overscroll-behavior: contain;\r\n  scroll-padding-block: var(--mono-tag-input-dropdown-padding, var(--mono-spacing));\r\n  isolation: isolate;\r\n  border-radius: var(--mono-tag-input-dropdown-radius, var(--mono-radius-md));\r\n  background: var(--mono-tag-input-dropdown-bg, var(--popover));\r\n  color: var(--mono-tag-input-dropdown-color, var(--popover-foreground));\r\n  box-shadow: var(--mono-tag-input-dropdown-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)), var(--mono-tag-input-dropdown-shadow, var(--mono-shadow-md));\r\n  font-size: var(--mono-tag-input-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-tag-input-option-line-height, var(--mono-text-sm--lh));\r\n  outline-style: none;\r\n}\r\n\r\n[mono-tag-input][mono-open] > [mono-dropdown] {\r\n  display: block;\r\n}\r\n\r\n/* =========================================\r\n   Options\r\n   -----------------------------------------\r\n   Every rule that paints a native line lists its stamped twin (`slot=\"list\"`:\r\n   `[data-mono-type='row']`, `[data-mono-active]`, `[data-mono-selected]`,\r\n   `[data-mono-chrome]`) so the two can never drift. `:where()` wraps only the\r\n   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 outline-none select-none; disabled\r\n   pointer-events-none opacity-50 */\r\n/* basecoat@1.0.2 styles/vega.css .combobox [role='option'] — gap-2 rounded-sm\r\n   py-1.5 ps-2 pe-8 text-sm, svg size-4; EXTENSION: one indent step per level */\r\n[mono-tag-input] [mono-item],\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-type='row'] {\r\n  --_ti-item-level: 0;\r\n  position: relative;\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  gap: var(--mono-tag-input-option-gap, calc(var(--mono-spacing) * 2));\r\n  margin: 0;\r\n  padding-block: var(--mono-tag-input-option-padding-y, calc(var(--mono-spacing) * 1.5));\r\n  padding-inline: var(--mono-tag-input-option-padding-x, calc(var(--mono-spacing) * 2)) var(--mono-tag-input-option-padding-end, calc(var(--mono-spacing) * 8));\r\n  padding-inline-start: calc(var(--mono-tag-input-option-padding-x, calc(var(--mono-spacing) * 2)) + var(--_ti-item-level) * calc(var(--mono-spacing) * 3));\r\n  min-height: var(--mono-tag-input-option-min-height, 0);\r\n  border: 0;\r\n  border-radius: var(--mono-tag-input-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-tag-input-text);\r\n  font-family: inherit;\r\n  font-size: var(--mono-tag-input-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-tag-input-option-line-height, var(--mono-text-sm--lh));\r\n  font-weight: var(--mono-tag-input-option-font-weight, var(--mono-font-weight-normal));\r\n  text-align: start;\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-tag-input-option-spacing`. */\r\n[mono-tag-input] [mono-item] + [mono-item],\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-type='row'] + [data-mono-type='row'] {\r\n  margin-top: var(--mono-tag-input-option-spacing, 2px);\r\n}\r\n\r\n[mono-tag-input] [mono-item][mono-level='1'] { --_ti-item-level: 1; }\r\n[mono-tag-input] [mono-item][mono-level='2'] { --_ti-item-level: 2; }\r\n[mono-tag-input] [mono-item][mono-level='3'] { --_ti-item-level: 3; }\r\n[mono-tag-input] [mono-item][mono-level='4'] { --_ti-item-level: 4; }\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-tag-input] [mono-item][mono-active]:not([mono-disabled]):not(:disabled),\r\n[mono-tag-input] [mono-item]:focus-visible,\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-active] {\r\n  background-color: var(--mono-tag-input-option-active-bg, var(--muted));\r\n  color: var(--mono-tag-input-option-active-color, var(--_mono-tag-input-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[mono-tag-input] [mono-item]:hover:not([mono-disabled]):not(:disabled),\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-type='row']:hover {\r\n  background-color: var(--mono-tag-input-option-active-bg, var(--muted));\r\n  color: var(--mono-tag-input-option-active-color, var(--_mono-tag-input-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. A row with its OWN checkbox says it there instead. */\r\n[mono-tag-input] [mono-item][mono-selected]:not([mono-check]),\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-type='row'][data-mono-selected] {\r\n  background-image: var(--mono-tag-input-check-icon, var(--check-icon));\r\n  background-size: var(--mono-tag-input-check-size, 0.875rem);\r\n  background-position: center right calc(var(--mono-spacing) * 2);\r\n  background-repeat: no-repeat;\r\n}\r\n\r\n[mono-tag-input] [mono-item][mono-selected]:not([mono-check]):dir(rtl),\r\n[mono-tag-input] :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-tag-input] [mono-item][mono-disabled],\r\n[mono-tag-input] [mono-item]:disabled {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* the title IS the consumer's line — a custom row has no title element */\r\n[mono-tag-input] [mono-item-text] {\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n}\r\n\r\n[mono-tag-input] [mono-item-title],\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-type='row'] {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* EXTENSION — `item.description`: a muted second line */\r\n[mono-tag-input] [mono-item-sub] {\r\n  margin-top: 0;\r\n  font-size: var(--mono-text-xs);\r\n  line-height: var(--mono-text-xs--lh);\r\n  color: var(--_mono-tag-input-muted);\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* checkable rows: the box IS a mono-checkbox — the row emits the element's own\r\n   markup ([mono-checkbox] > [mono-box], [mono-size=\"sm\"], the checked /\r\n   indeterminate / loading states) and checkbox.css paints every pixel of it, in\r\n   both builds; this sheet says only how it sits in the row: it must not shrink\r\n   or take clicks (the row's button handles the toggle). A consumer's line lays\r\n   out the same. */\r\n[mono-tag-input] [mono-check-box],\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-chrome] {\r\n  flex: 0 0 auto;\r\n  gap: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-type='group'] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--mono-tag-input-option-gap, calc(var(--mono-spacing) * 2));\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 */\r\n[mono-tag-input] [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-tag-input-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-tag-input-option-line-height, var(--mono-text-sm--lh));\r\n  color: var(--_mono-tag-input-muted);\r\n  text-align: center;\r\n  cursor: default;\r\n  user-select: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox [role='heading'] — px-2 py-1.5 text-xs\r\n   text-muted-foreground; EXTENSION: one indent step per level, a <button> when the\r\n   header selects its group */\r\n[mono-tag-input] [mono-group],\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-type='group'] {\r\n  --_ti-group-level: 0;\r\n  width: 100%;\r\n  margin: 0;\r\n  padding-block: var(--mono-tag-input-group-padding-y, calc(var(--mono-spacing) * 1.5));\r\n  padding-inline: var(--mono-tag-input-group-padding-x, calc(var(--mono-spacing) * 2));\r\n  padding-inline-start: calc(var(--mono-tag-input-group-padding-x, calc(var(--mono-spacing) * 2)) + var(--_ti-group-level) * calc(var(--mono-spacing) * 3));\r\n  border: 0;\r\n  border-radius: var(--mono-tag-input-option-radius, var(--mono-radius-sm));\r\n  background: transparent;\r\n  font-family: inherit;\r\n  font-size: var(--mono-tag-input-group-font-size, var(--mono-text-xs));\r\n  line-height: var(--mono-tag-input-group-line-height, var(--mono-text-xs--lh));\r\n  font-weight: var(--mono-tag-input-group-font-weight, var(--mono-font-weight-normal));\r\n  text-transform: var(--mono-tag-input-group-text-transform, none);\r\n  letter-spacing: var(--mono-tag-input-group-letter-spacing, normal);\r\n  text-align: start;\r\n  color: var(--_mono-tag-input-muted);\r\n  cursor: default;\r\n  user-select: none;\r\n}\r\n\r\n[mono-tag-input] [mono-group][mono-level='1'],\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-level='1'] { --_ti-group-level: 1; --_ti-item-level: 1; }\r\n[mono-tag-input] [mono-group][mono-level='2'],\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-level='2'] { --_ti-group-level: 2; --_ti-item-level: 2; }\r\n[mono-tag-input] [mono-group][mono-level='3'],\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-level='3'] { --_ti-group-level: 3; --_ti-item-level: 3; }\r\n[mono-tag-input] [mono-group][mono-level='4'],\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-level='4'] { --_ti-group-level: 4; --_ti-item-level: 4; }\r\n\r\n/* a header that selects its own group is a <button> laid out like the rows */\r\n[mono-tag-input] [mono-group][mono-toggle],\r\n[mono-tag-input] :where([mono-list-slot]) [data-mono-type='group']:has([data-mono-chrome]) {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--mono-tag-input-option-gap, calc(var(--mono-spacing) * 2));\r\n  cursor: pointer;\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-tag-input] [mono-group][mono-toggle]:hover {\r\n    background-color: var(--mono-tag-input-option-active-bg, var(--muted));\r\n    color: var(--_mono-tag-input-text);\r\n  }\r\n}\r\n\r\n/* a group carrying a selection reads at a glance while scrolling */\r\n[mono-tag-input] [mono-group][mono-toggle][mono-selected] {\r\n  color: var(--_mono-tag-input-text);\r\n}\r\n\r\n[mono-tag-input] [mono-group-label] {\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* group-sticky: pin headers while their rows scroll, on the panel's own surface */\r\n[mono-tag-input] [mono-group][mono-sticky] {\r\n  position: sticky;\r\n  top: calc(var(--_ti-group-level) * 1.5rem);\r\n  z-index: calc(5 - var(--_ti-group-level));\r\n  background: var(--mono-tag-input-dropdown-bg, var(--popover));\r\n}\r\n\r\n/* EXTENSION — the \"All\" row: always first, always sticky, on the panel surface\r\n   with a hairline under it; z above the group headers (which stack from 5 down) */\r\n[mono-tag-input] [mono-select-all] {\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 6;\r\n  background-color: var(--mono-tag-input-dropdown-bg, var(--popover));\r\n  box-shadow: 0 1px 0 0 var(--border);\r\n  font-weight: var(--mono-font-weight-medium);\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-tag-input] [mono-select-all]:hover:not(:disabled) {\r\n    background-color: var(--mono-tag-input-option-active-bg, var(--muted));\r\n  }\r\n}\r\n\r\n/* while it drains the server the row is `disabled` so a second click cannot start\r\n   a second drain — but it is busy, not unavailable: undo the disabled look */\r\n[mono-tag-input] [mono-select-all][mono-loading],\r\n[mono-tag-input] [mono-select-all][mono-loading]:hover {\r\n  opacity: 1;\r\n  cursor: progress;\r\n  pointer-events: none;\r\n  background-color: var(--mono-tag-input-option-active-bg, var(--muted));\r\n}\r\n\r\n/* EXTENSION — the load-more affordance: an option-shaped ghost button */\r\n[mono-tag-input] [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-tag-input-option-gap, calc(var(--mono-spacing) * 2));\r\n  margin: 0;\r\n  padding-block: var(--mono-tag-input-option-padding-y, calc(var(--mono-spacing) * 1.5));\r\n  padding-inline: var(--mono-tag-input-option-padding-x, calc(var(--mono-spacing) * 2));\r\n  border: 0;\r\n  border-radius: var(--mono-tag-input-option-radius, var(--mono-radius-sm));\r\n  background: transparent;\r\n  color: var(--_mono-tag-input-muted);\r\n  font-family: inherit;\r\n  font-size: var(--mono-tag-input-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-tag-input-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-tag-input] [mono-load-more]:hover:not([mono-loading]) {\r\n    background: var(--mono-tag-input-option-active-bg, var(--muted));\r\n    color: var(--_mono-tag-input-text);\r\n  }\r\n}\r\n\r\n[mono-tag-input] [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. */\r\n[mono-tag-input] [mono-list-slot] {\r\n  display: contents;\r\n}\r\n\r\n/* =========================================\r\n   The \"+N more\" overflow panel — a popover holding the overflow chips\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox [data-popover] — bg-popover ring-1\r\n   ring-foreground/10 rounded-md shadow-md; EXTENSION: p-1.5 gap-1.5 flex-wrap */\r\n[mono-tag-input] > [mono-more-panel] {\r\n  position: absolute;\r\n  left: 0;\r\n  right: 0;\r\n  top: auto;\r\n  transform: translateY(calc(var(--mono-spacing) * 1.5));\r\n  z-index: var(--mono-popup-z, 1000);\r\n  display: none;\r\n  flex-wrap: wrap;\r\n  align-items: flex-start;\r\n  gap: var(--_mono-tag-input-gap);\r\n  padding: calc(var(--mono-spacing) * 1.5);\r\n  max-height: min(14rem, var(--mono-popup-avail-h, 100vh));\r\n  overflow: auto;\r\n  overscroll-behavior: contain;\r\n  border-radius: var(--mono-tag-input-dropdown-radius, var(--mono-radius-md));\r\n  background: var(--mono-tag-input-dropdown-bg, var(--popover));\r\n  color: var(--mono-tag-input-dropdown-color, var(--popover-foreground));\r\n  box-shadow: var(--mono-tag-input-dropdown-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)), var(--mono-tag-input-dropdown-shadow, var(--mono-shadow-md));\r\n}\r\n\r\n[mono-tag-input][mono-more-open] > [mono-more-panel] {\r\n  display: flex;\r\n}\r\n\r\n/* =========================================\r\n   Message\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p */\r\n[mono-tag-input] > [mono-message-wrap] {\r\n  display: block;\r\n  margin-top: var(--_mono-tag-input-gap-y);\r\n}\r\n\r\n[mono-tag-input] > [mono-message-wrap]:not(:has([mono-message]:not([mono-empty]))) {\r\n  display: none;\r\n}\r\n\r\n[mono-tag-input] [mono-message] {\r\n  font-size: var(--mono-tag-input-message-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-tag-input-message-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-font-weight-normal);\r\n  text-align: start;\r\n  color: var(--_mono-tag-input-muted);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field [role=\"alert\"] — text-destructive text-sm */\r\n[mono-tag-input] [mono-message=\"invalid\"] {\r\n  color: var(--_mono-tag-input-invalid);\r\n}\r\n\r\n[mono-tag-input] [mono-message=\"valid\"] {\r\n  color: var(--_mono-tag-input-valid);\r\n}\r\n\r\n[mono-tag-input] [mono-message=\"warning\"] {\r\n  color: var(--_mono-tag-input-warning);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-tag-input] > [mono-field],\r\n  [mono-tag-input] [mono-clear],\r\n  [mono-tag-input] [mono-arrow],\r\n  [mono-tag-input] [mono-scroll],\r\n  [mono-tag-input] [mono-item],\r\n  [mono-tag-input] [mono-chip-close] {\r\n    transition: none;\r\n  }\r\n\r\n  [mono-tag-input] [mono-ds-spinner] > svg {\r\n    animation-duration: 2.4s;\r\n  }\r\n}\r\n";
+
 //#endregion
 //#region src/components/tag-input/mono-tag-input.ts
-var MonoTagInput = class MonoTagInput extends MonoTagInputCore(LitElement) {
+let MonoTagInput = class MonoTagInput extends MonoTagInputCore(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._slotsCaptured = false;
@@ -2796,7 +2800,7 @@ var MonoTagInput = class MonoTagInput extends MonoTagInputCore(LitElement) {
 		this._slotList = null;
 	}
 	static {
-		this.styles = [unsafeCSS(tag_input_default)];
+		this.styles = [unsafeCSS(tag_input_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -2897,6 +2901,7 @@ var MonoTagInput = class MonoTagInput extends MonoTagInputCore(LitElement) {
 	}
 };
 MonoTagInput = __decorate([customElement("mono-tag-input")], MonoTagInput);
+
 //#endregion
 //#region src/components/tag-input/tag-input-utils.ts
 function validateTagInputProps(props) {
@@ -2943,5 +2948,6 @@ function normalizeSuggestions(items) {
 		value: item.value ?? item.label
 	}));
 }
+
 //#endregion
-export { MonoTagInput, normalizeSuggestions, validateTagInputProps };
+export { MonoTagInput, normalizeSuggestions, validateTagInputProps };