@mono-lit/helper 0.0.2 → 0.0.4

package/dist/ui/shadow/dropdown.js

@@ -1,9 +1,10 @@
-import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration, u as numberStringConverter } from "../../hydration-flush-RB5Tz5nl.js";
-import { t as dispatchMonoEvent } from "../../mono-event-Bi1qP9uN.js";
-import { n as cssPart, r as defineCssClassAliases, t as applyCssClass } from "../../css-class-BRKRzHx-.js";
-import { n as applyPopupPlacement, r as computePopupPlacement, t as PopupPortalController } from "../../popup-portal-BziRX1yG.js";
+import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration, u as numberStringConverter } from "../../hydration-flush-DHrl4_KK.js";
+import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
+import { n as cssPart, r as defineCssClassAliases, t as applyCssClass } from "../../css-class-B6Tc_MAx.js";
+import { n as applyPopupPlacement, r as computePopupPlacement, t as PopupPortalController } from "../../popup-portal-HWhkd7oy.js";
 import { LitElement, html, isServer, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
+
 //#region src/components/dropdown/dropdown-core.ts
 /**
 * `MonoDropdownCore` — all render-mode-agnostic logic for `mono-dropdown`:
@@ -27,7 +28,7 @@ import { property, state } from "lit/decorators.js";
 *
 * Kept in step with dropdown.css by tests/dropdown-attributes.test.ts.
 */
-var DROPDOWN_STYLE_VARS = [
+const DROPDOWN_STYLE_VARS = [
 	"--mono-dropdown-accent",
 	"--mono-dropdown-bg",
 	"--mono-dropdown-border",
@@ -105,7 +106,7 @@ var DROPDOWN_STYLE_VARS = [
 	"--mono-dropdown-neutral",
 	"--mono-dropdown-dark"
 ];
-var MonoDropdownCore = (superClass) => {
+const MonoDropdownCore = (superClass) => {
 	class MonoDropdownCoreClass extends superClass {
 		constructor(...args) {
 			super(...args);
@@ -484,12 +485,14 @@ var MonoDropdownCore = (superClass) => {
 	__decorate([state()], MonoDropdownCoreClass.prototype, "_resolvedSide", void 0);
 	return MonoDropdownCoreClass;
 };
+
 //#endregion
-//#region src/components/dropdown/dropdown.css?raw
-var dropdown_default = "/* =========================================================================\r\n   mono-dropdown — a port of Basecoat's `.popover` + `[data-popover]`\r\n   (basecoat-css@1.0.2, vega style).\r\n\r\n   Styled by ATTRIBUTE, like Basecoat — and the attributes mirror the element's\r\n   props one for one, so hand-written markup reads like the Lit / Vue tag:\r\n\r\n     <mono-dropdown size=\"lg\" color=\"success\" placement=\"bottom-start\">\r\n     <div mono-dropdown mono-size=\"lg\" mono-color=\"success\"\r\n          mono-placement=\"bottom-start\" mono-side=\"bottom\" mono-align=\"start\">\r\n       <span mono-activator><button>Click me</button></span>\r\n       <div mono-panel role=\"dialog\" aria-hidden=\"false\">\r\n         <div mono-body>Any HTML goes here.</div>\r\n       </div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary, no `mono-side` = bottom, no `mono-align` =\r\n   start). The element writes these on its ROOT — the host in the light build,\r\n   an inner root `<div>` in the shadow one — plus the states `mono-open`,\r\n   `mono-disabled` and `mono-fixed` (set once the element takes over positioning\r\n   and writes inline top/left). The old classes (`.mono-dropdown.md.primary.open`)\r\n   are still emitted as inert hooks until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-dropdown]                ≡ .popover (relative inline-flex) — DEVIATION:\r\n                                      inline-BLOCK, because the activator wrapper is\r\n                                      `display: contents` and must not become a flex item\r\n     [mono-activator]               ≡ EXTENSION (upstream's trigger is a sibling <button>;\r\n                                      ours wraps a slotted one and stays out of layout)\r\n     [mono-panel]                   ≡ [data-popover] (absolute z-50 min-w-full w-max\r\n                                      overflow-x-hidden overflow-y-auto visible opacity-100\r\n                                      scale-100 transition-all outline-hidden, and\r\n                                      bg-popover text-popover-foreground ring-1\r\n                                      ring-foreground/10 flex flex-col gap-4 rounded-md\r\n                                      p-4 text-sm shadow-md duration-100)\r\n     [mono-panel][aria-hidden=true] ≡ [data-popover][aria-hidden='true'] (invisible\r\n                                      opacity-0 scale-95 + a 2-unit translate away from\r\n                                      the side it opens from)\r\n     [mono-side=\"…\"]                ≡ [data-popover][data-side='…'] (mt-1 top-full,\r\n                                      mb-1 bottom-full, me-1 end-full, ms-1 start-full)\r\n                                      — DEVIATION: the 1-unit margin is\r\n                                      `--mono-dropdown-offset`, a prop (`offset`)\r\n     [mono-align=\"…\"]               ≡ [data-popover][data-align='…'] (start-0 / end-0 /\r\n                                      start-1/2 -translate-x-1/2, and the top/bottom pair\r\n                                      for the two side placements)\r\n     [mono-body]                    ≡ EXTENSION (the panel's width floor, see below)\r\n     [mono-size=\"…\"]                ≡ EXTENSION (upstream ships one popover size)\r\n     [mono-color=\"…\"]               ≡ EXTENSION (the role tints the ring)\r\n     [mono-disabled]                ≡ .btn disabled:opacity-50 — DEVIATION: 0.55, the\r\n                                      pre-port value, because the activator is a\r\n                                      consumer's own control and dimming it twice reads\r\n                                      as broken\r\n\r\n   THE PANEL IS PORTALED. While open, the light build moves [mono-panel] into a\r\n   body portal; `composables/popup-portal` mirrors the root's class AND its\r\n   `mono-*` attributes onto that portal, so `[mono-dropdown] > [mono-panel]`\r\n   keeps matching there. Every panel rule is written as a CHILD of the root for\r\n   exactly that reason — and because `>` also stops these rules reaching a\r\n   `[mono-body]` that belongs to a card slotted inside the panel.\r\n\r\n   `[mono-dropdown]` IS ALSO A PART NAME: select, tag-input, date and\r\n   dropdown-table all call their popup panel `[mono-dropdown]`, scoped\r\n   `[mono-<field>] > [mono-dropdown]` = (0,2,0). This root rule is (0,1,0), so it\r\n   loses everywhere they set a property — and it deliberately sets NO paint (no\r\n   colour, no background), only layout and custom properties, so nothing it does\r\n   set can reach a field's panel visibly. Same contract as chip's root.\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING rule\r\n   is exactly one attribute strong — `:where([mono-dropdown]) > [mono-panel]` =\r\n   (0,1,0) — so a utility class handed in through `cssClass` wins by source\r\n   order, while the prop and state rules stay heavier.\r\n\r\n   FLAVORS set `--mono-dropdown-{radius,ring-color,ring-width,shadow,gap,\r\n   padding-<size>,font-<size>,min-width-<size>,max-width-<size>,offset-<size>}`;\r\n   every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"popover\"`).\r\n   ========================================================================= */\r\n\r\nmono-dropdown {\r\n  display: inline-block;\r\n}\r\n\r\n/* =========================================\r\n   Root — layout and the palette. NOTHING here paints (see the header).\r\n   ========================================= */\r\n\r\n[mono-dropdown] {\r\n  /* ── the six roles, each a public knob over a Basecoat token ───────────── */\r\n  --_mono-dropdown-primary: var(--mono-dropdown-primary, var(--primary));\r\n  --_mono-dropdown-secondary: var(--mono-dropdown-secondary, var(--secondary-foreground));\r\n  --_mono-dropdown-success: var(--mono-dropdown-success, var(--success));\r\n  --_mono-dropdown-danger: var(--mono-dropdown-danger, var(--destructive));\r\n  --_mono-dropdown-warning: var(--mono-dropdown-warning, var(--warning));\r\n  --_mono-dropdown-info: var(--mono-dropdown-info, var(--info));\r\n  --_mono-dropdown-teal: var(--mono-dropdown-teal, var(--teal));\r\n  --_mono-dropdown-purple: var(--mono-dropdown-purple, var(--purple));\r\n  --_mono-dropdown-neutral: var(--mono-dropdown-neutral, var(--neutral));\r\n  --_mono-dropdown-dark: var(--mono-dropdown-dark, var(--dark));\r\n  /* the colour in play — `primary` unless a [mono-color] rule re-points it */\r\n  --_mono-dropdown-accent: var(--mono-dropdown-accent, var(--_mono-dropdown-accent-preset, var(--_mono-dropdown-primary)));\r\n\r\n  --_mono-dropdown-bg: var(--mono-dropdown-bg, var(--mono-dropdown-surface, var(--popover)));\r\n  --_mono-dropdown-text: var(--mono-dropdown-text, var(--popover-foreground));\r\n  /* `ring-1 ring-foreground/10`, with the role mixed in so `color` is visible on\r\n     an otherwise neutral surface (EXTENSION — upstream's popover has no colour) */\r\n  --_mono-dropdown-ring-width: var(--mono-dropdown-ring-width, var(--mono-border-width));\r\n  /* the neutral half of the ring is its own knob: a flavor that wants\r\n     `ring-foreground/5` sets THAT, and the role stays mixed in on top */\r\n  --_mono-dropdown-ring-base: var(--mono-dropdown-ring-base, color-mix(in oklab, var(--foreground) 10%, transparent));\r\n  --_mono-dropdown-ring-color: var(--mono-dropdown-ring-color, var(--mono-dropdown-border,\r\n    color-mix(in oklab, var(--_mono-dropdown-accent) 18%, var(--_mono-dropdown-ring-base))));\r\n  --_mono-dropdown-shadow: var(--mono-dropdown-shadow, var(--mono-shadow-md));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css [data-popover] — gap-4 rounded-md p-4 text-sm */\r\n  --_mono-dropdown-radius: var(--mono-dropdown-radius, var(--_mono-dropdown-radius-preset, var(--mono-dropdown-radius-md, var(--mono-radius-md))));\r\n  --_mono-dropdown-pad-x: var(--mono-dropdown-pad-x, var(--_mono-dropdown-pad-x-preset, var(--mono-dropdown-pad-x-md, calc(var(--mono-spacing) * 4))));\r\n  --_mono-dropdown-pad-y: var(--mono-dropdown-pad-y, var(--_mono-dropdown-pad-y-preset, var(--mono-dropdown-pad-y-md, calc(var(--mono-spacing) * 4))));\r\n  --_mono-dropdown-gap: var(--mono-dropdown-gap, var(--_mono-dropdown-gap-preset, var(--mono-dropdown-gap-md, calc(var(--mono-spacing) * 4))));\r\n  --_mono-dropdown-font: var(--mono-dropdown-font, var(--_mono-dropdown-font-preset, var(--mono-dropdown-font-md, var(--mono-text-sm))));\r\n  --_mono-dropdown-line-height: var(--mono-dropdown-line-height, var(--_mono-dropdown-line-height-preset, var(--mono-text-sm--lh)));\r\n  --_mono-dropdown-min-width: var(--mono-dropdown-min-width, var(--_mono-dropdown-min-width-preset, var(--mono-dropdown-min-width-md, 200px)));\r\n  --_mono-dropdown-max-width: var(--mono-dropdown-max-width, var(--_mono-dropdown-max-width-preset, var(--mono-dropdown-max-width-md, 280px)));\r\n  /* `mt-1` and friends — a prop here (`offset`), so it is one knob per size */\r\n  --_mono-dropdown-offset: var(--mono-dropdown-offset, var(--_mono-dropdown-offset-preset, var(--mono-dropdown-offset-md, var(--mono-spacing))));\r\n\r\n  /* basecoat@1.0.2 components/popover.css .popover — relative inline-flex */\r\n  position: relative;\r\n  display: inline-block;\r\n  box-sizing: border-box;\r\n  font-family: inherit;\r\n}\r\n\r\n[mono-dropdown] *,\r\n[mono-dropdown] *::before,\r\n[mono-dropdown] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: Basecoat ships ONE popover; md is its `[data-popover]`\r\n   ========================================= */\r\n\r\n[mono-dropdown][mono-size=\"xs\"] {\r\n  --_mono-dropdown-radius-preset: var(--mono-dropdown-radius-xs, var(--mono-radius-sm));\r\n  --_mono-dropdown-pad-x-preset: var(--mono-dropdown-pad-x-xs, calc(var(--mono-spacing) * 2));\r\n  --_mono-dropdown-pad-y-preset: var(--mono-dropdown-pad-y-xs, calc(var(--mono-spacing) * 2));\r\n  --_mono-dropdown-gap-preset: var(--mono-dropdown-gap-xs, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-dropdown-font-preset: var(--mono-dropdown-font-xs, var(--mono-text-xs));\r\n  --_mono-dropdown-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-dropdown-min-width-preset: var(--mono-dropdown-min-width-xs, 150px);\r\n  --_mono-dropdown-max-width-preset: var(--mono-dropdown-max-width-xs, 220px);\r\n  --_mono-dropdown-offset-preset: var(--mono-dropdown-offset-xs, calc(var(--mono-spacing) * 0.75));\r\n}\r\n\r\n[mono-dropdown][mono-size=\"sm\"] {\r\n  --_mono-dropdown-radius-preset: var(--mono-dropdown-radius-sm, var(--mono-radius-md));\r\n  --_mono-dropdown-pad-x-preset: var(--mono-dropdown-pad-x-sm, calc(var(--mono-spacing) * 3));\r\n  --_mono-dropdown-pad-y-preset: var(--mono-dropdown-pad-y-sm, calc(var(--mono-spacing) * 3));\r\n  --_mono-dropdown-gap-preset: var(--mono-dropdown-gap-sm, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-dropdown-font-preset: var(--mono-dropdown-font-sm, var(--mono-text-xs));\r\n  --_mono-dropdown-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-dropdown-min-width-preset: var(--mono-dropdown-min-width-sm, 170px);\r\n  --_mono-dropdown-max-width-preset: var(--mono-dropdown-max-width-sm, 240px);\r\n  --_mono-dropdown-offset-preset: var(--mono-dropdown-offset-sm, var(--mono-spacing));\r\n}\r\n\r\n[mono-dropdown][mono-size=\"lg\"] {\r\n  --_mono-dropdown-radius-preset: var(--mono-dropdown-radius-lg, var(--mono-radius-lg));\r\n  --_mono-dropdown-pad-x-preset: var(--mono-dropdown-pad-x-lg, calc(var(--mono-spacing) * 5));\r\n  --_mono-dropdown-pad-y-preset: var(--mono-dropdown-pad-y-lg, calc(var(--mono-spacing) * 5));\r\n  --_mono-dropdown-gap-preset: var(--mono-dropdown-gap-lg, calc(var(--mono-spacing) * 5));\r\n  --_mono-dropdown-font-preset: var(--mono-dropdown-font-lg, var(--mono-text-sm));\r\n  --_mono-dropdown-line-height-preset: var(--mono-text-sm--lh);\r\n  --_mono-dropdown-min-width-preset: var(--mono-dropdown-min-width-lg, 240px);\r\n  --_mono-dropdown-max-width-preset: var(--mono-dropdown-max-width-lg, 340px);\r\n  --_mono-dropdown-offset-preset: var(--mono-dropdown-offset-lg, calc(var(--mono-spacing) * 1.5));\r\n}\r\n\r\n[mono-dropdown][mono-size=\"xl\"] {\r\n  --_mono-dropdown-radius-preset: var(--mono-dropdown-radius-xl, var(--mono-radius-xl));\r\n  --_mono-dropdown-pad-x-preset: var(--mono-dropdown-pad-x-xl, calc(var(--mono-spacing) * 6));\r\n  --_mono-dropdown-pad-y-preset: var(--mono-dropdown-pad-y-xl, calc(var(--mono-spacing) * 6));\r\n  --_mono-dropdown-gap-preset: var(--mono-dropdown-gap-xl, calc(var(--mono-spacing) * 5));\r\n  --_mono-dropdown-font-preset: var(--mono-dropdown-font-xl, var(--mono-text-base));\r\n  --_mono-dropdown-line-height-preset: var(--mono-text-base--lh);\r\n  --_mono-dropdown-min-width-preset: var(--mono-dropdown-min-width-xl, 280px);\r\n  --_mono-dropdown-max-width-preset: var(--mono-dropdown-max-width-xl, 420px);\r\n  --_mono-dropdown-offset-preset: var(--mono-dropdown-offset-xl, calc(var(--mono-spacing) * 2));\r\n}\r\n\r\n[mono-dropdown][mono-size=\"xxl\"] {\r\n  --_mono-dropdown-radius-preset: var(--mono-dropdown-radius-xxl, var(--mono-radius-xl));\r\n  --_mono-dropdown-pad-x-preset: var(--mono-dropdown-pad-x-xxl, calc(var(--mono-spacing) * 7));\r\n  --_mono-dropdown-pad-y-preset: var(--mono-dropdown-pad-y-xxl, calc(var(--mono-spacing) * 7));\r\n  --_mono-dropdown-gap-preset: var(--mono-dropdown-gap-xxl, calc(var(--mono-spacing) * 6));\r\n  --_mono-dropdown-font-preset: var(--mono-dropdown-font-xxl, var(--mono-text-lg));\r\n  --_mono-dropdown-line-height-preset: var(--mono-text-lg--lh);\r\n  --_mono-dropdown-min-width-preset: var(--mono-dropdown-min-width-xxl, 320px);\r\n  --_mono-dropdown-max-width-preset: var(--mono-dropdown-max-width-xxl, 480px);\r\n  --_mono-dropdown-offset-preset: var(--mono-dropdown-offset-xxl, calc(var(--mono-spacing) * 2.5));\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the role tints the panel's ring\r\n   ========================================= */\r\n\r\n[mono-dropdown][mono-color=\"primary\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-primary); }\r\n[mono-dropdown][mono-color=\"secondary\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-secondary); }\r\n[mono-dropdown][mono-color=\"success\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-success); }\r\n[mono-dropdown][mono-color=\"danger\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-danger); }\r\n[mono-dropdown][mono-color=\"warning\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-warning); }\r\n[mono-dropdown][mono-color=\"info\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-info); }\r\n[mono-dropdown][mono-color=\"teal\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-teal); }\r\n[mono-dropdown][mono-color=\"purple\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-purple); }\r\n[mono-dropdown][mono-color=\"neutral\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-neutral); }\r\n[mono-dropdown][mono-color=\"dark\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-dark); }\r\n\r\n/* =========================================\r\n   Activator — EXTENSION: a wrapper that stays out of layout\r\n   ========================================= */\r\n\r\n:where([mono-dropdown]) > [mono-activator] {\r\n  display: contents;\r\n}\r\n\r\n/* The activator is the consumer's own control, so it is dimmed once and gently:\r\n   0.55 is the pre-port value, kept so a disabled dropdown reads the same. */\r\n[mono-dropdown][mono-disabled] > [mono-activator] {\r\n  opacity: 0.55;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* =========================================\r\n   Panel — `[data-popover]`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] — absolute z-50 min-w-full\r\n   w-max overflow-x-hidden overflow-y-auto visible opacity-100 scale-100\r\n   transition-all outline-hidden\r\n   — DEVIATIONS: `min-w-full` is the BODY's floor here (see [mono-body]) so a\r\n   body that cannot shrink sizes the panel instead of spilling out of it, and the\r\n   z-index is the shared popup stack's `--mono-popup-z` rather than a flat z-50. */\r\n:where([mono-dropdown]) > [mono-panel] {\r\n  position: absolute;\r\n  z-index: var(--mono-popup-z, 200);\r\n  width: max-content;\r\n  min-width: min-content;\r\n  max-width: var(--_mono-dropdown-max-width);\r\n  max-height: var(--mono-popup-avail-h, none);\r\n  overflow-x: hidden;\r\n  overflow-y: auto;\r\n  visibility: visible;\r\n  opacity: 1;\r\n  scale: 1;\r\n  outline: none;\r\n  transition:\r\n    opacity var(--mono-duration) var(--mono-ease),\r\n    scale var(--mono-duration) var(--mono-ease),\r\n    translate var(--mono-duration) var(--mono-ease),\r\n    visibility var(--mono-duration) var(--mono-ease);\r\n\r\n  /* basecoat@1.0.2 styles/vega.css [data-popover] — bg-popover\r\n     text-popover-foreground ring-foreground/10 flex flex-col gap-4 rounded-md p-4\r\n     text-sm shadow-md ring-1 duration-100 */\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-dropdown-gap);\r\n  padding: var(--_mono-dropdown-pad-y) var(--_mono-dropdown-pad-x);\r\n  border-radius: var(--_mono-dropdown-radius);\r\n  background: var(--_mono-dropdown-bg);\r\n  color: var(--_mono-dropdown-text);\r\n  font-size: var(--_mono-dropdown-font);\r\n  line-height: var(--_mono-dropdown-line-height);\r\n  box-shadow:\r\n    0 0 0 var(--_mono-dropdown-ring-width) var(--_mono-dropdown-ring-color),\r\n    var(--_mono-dropdown-shadow);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[aria-hidden='true']\r\n   — invisible opacity-0 scale-95, and a 2-unit translate away from the side it\r\n   opens from. The element writes `aria-hidden` on the panel already, so the\r\n   closed state needs no class of its own. */\r\n[mono-dropdown] > [mono-panel][aria-hidden=\"true\"] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  scale: 0.95;\r\n  pointer-events: none;\r\n}\r\n\r\n[mono-dropdown][mono-side=\"top\"] > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: 0 calc(var(--mono-spacing) * 2);\r\n}\r\n\r\n[mono-dropdown]:not([mono-side]) > [mono-panel][aria-hidden=\"true\"],\r\n[mono-dropdown][mono-side=\"bottom\"] > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: 0 calc(var(--mono-spacing) * -2);\r\n}\r\n\r\n[mono-dropdown][mono-side=\"left\"] > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: calc(var(--mono-spacing) * 2) 0;\r\n}\r\n\r\n[mono-dropdown][mono-side=\"right\"] > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: calc(var(--mono-spacing) * -2) 0;\r\n}\r\n\r\n/* Once the element takes over, it positions the panel in the viewport and writes\r\n   inline top/left — so the static placement rules below must not fight it. */\r\n[mono-dropdown][mono-fixed] > [mono-panel] {\r\n  position: fixed;\r\n}\r\n\r\n/* =========================================\r\n   Static placement — `[data-side]` / `[data-align]`, verbatim\r\n   -----------------------------------------------------------------------------\r\n   These are what hand-written markup (and SSR, before the element hydrates)\r\n   positions with. The element overrides them with inline top/left once it has\r\n   measured, which is why every rule here uses only the four edges.\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &:not([data-side]), &[data-side='bottom']\r\n   — mt-1 top-full */\r\n[mono-dropdown]:not([mono-side]):not([mono-fixed]) > [mono-panel],\r\n[mono-dropdown][mono-side=\"bottom\"]:not([mono-fixed]) > [mono-panel] {\r\n  top: 100%;\r\n  margin-top: var(--_mono-dropdown-offset);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[data-side='top'] — mb-1 bottom-full */\r\n[mono-dropdown][mono-side=\"top\"]:not([mono-fixed]) > [mono-panel] {\r\n  bottom: 100%;\r\n  margin-bottom: var(--_mono-dropdown-offset);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[data-side='left'] — me-1 end-full */\r\n[mono-dropdown][mono-side=\"left\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-end: 100%;\r\n  margin-inline-end: var(--_mono-dropdown-offset);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[data-side='right'] — ms-1 start-full */\r\n[mono-dropdown][mono-side=\"right\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-start: 100%;\r\n  margin-inline-start: var(--_mono-dropdown-offset);\r\n}\r\n\r\n/* The top/bottom pair aligns on the inline axis: start-0 / end-0 / start-1/2 -translate-x-1/2 */\r\n[mono-dropdown]:is(:not([mono-side]), [mono-side=\"top\"], [mono-side=\"bottom\"]):is(:not([mono-align]), [mono-align=\"start\"]):not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-start: 0;\r\n}\r\n\r\n[mono-dropdown]:is(:not([mono-side]), [mono-side=\"top\"], [mono-side=\"bottom\"])[mono-align=\"end\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-end: 0;\r\n}\r\n\r\n[mono-dropdown]:is(:not([mono-side]), [mono-side=\"top\"], [mono-side=\"bottom\"])[mono-align=\"center\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-start: 50%;\r\n  translate: -50% 0;\r\n}\r\n\r\n/* …and the left/right pair on the block axis: top-0 / bottom-0 / top-1/2 -translate-y-1/2 */\r\n[mono-dropdown]:is([mono-side=\"left\"], [mono-side=\"right\"]):is(:not([mono-align]), [mono-align=\"start\"]):not([mono-fixed]) > [mono-panel] {\r\n  top: 0;\r\n}\r\n\r\n[mono-dropdown]:is([mono-side=\"left\"], [mono-side=\"right\"])[mono-align=\"end\"]:not([mono-fixed]) > [mono-panel] {\r\n  bottom: 0;\r\n}\r\n\r\n[mono-dropdown]:is([mono-side=\"left\"], [mono-side=\"right\"])[mono-align=\"center\"]:not([mono-fixed]) > [mono-panel] {\r\n  top: 50%;\r\n  translate: 0 -50%;\r\n}\r\n\r\n/* A centred panel keeps its centring translate while closed, and adds the\r\n   directional one — `translate` is a single property, so both go in one value. */\r\n[mono-dropdown]:is(:not([mono-side]), [mono-side=\"bottom\"])[mono-align=\"center\"]:not([mono-fixed]) > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: -50% calc(var(--mono-spacing) * -2);\r\n}\r\n\r\n[mono-dropdown][mono-side=\"top\"][mono-align=\"center\"]:not([mono-fixed]) > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: -50% calc(var(--mono-spacing) * 2);\r\n}\r\n\r\n[mono-dropdown][mono-side=\"left\"][mono-align=\"center\"]:not([mono-fixed]) > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: calc(var(--mono-spacing) * 2) -50%;\r\n}\r\n\r\n[mono-dropdown][mono-side=\"right\"][mono-align=\"center\"]:not([mono-fixed]) > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: calc(var(--mono-spacing) * -2) -50%;\r\n}\r\n\r\n/* =========================================\r\n   Body — EXTENSION: the panel's width floor\r\n   ========================================= */\r\n\r\n/* The floor lives HERE, not on the panel, so it reaches the panel as a\r\n   min-content contribution rather than as a competing `min-width` — which is\r\n   what lets slotted content that cannot shrink (a body with its own width) size\r\n   the panel instead of spilling out of it. Only the padding is subtracted\r\n   so the panel's border box lands on exactly --_mono-dropdown-min-width.\r\n   Only the padding is subtracted: the edge is Basecoat's `ring-1`, a\r\n   box-shadow, which takes no layout space (subtracting it left every panel 2px\r\n   under its preset). */\r\n:where([mono-dropdown]) > [mono-panel] > [mono-body] {\r\n  min-width: calc(var(--_mono-dropdown-min-width) - 2 * var(--_mono-dropdown-pad-x));\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-dropdown]) > [mono-panel] {\r\n    transition: none;\r\n  }\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\dropdown\dropdown.css?raw.js
+var dropdown_css_raw_default = "/* =========================================================================\r\n   mono-dropdown — a port of Basecoat's `.popover` + `[data-popover]`\r\n   (basecoat-css@1.0.2, vega style).\r\n\r\n   Styled by ATTRIBUTE, like Basecoat — and the attributes mirror the element's\r\n   props one for one, so hand-written markup reads like the Lit / Vue tag:\r\n\r\n     <mono-dropdown size=\"lg\" color=\"success\" placement=\"bottom-start\">\r\n     <div mono-dropdown mono-size=\"lg\" mono-color=\"success\"\r\n          mono-placement=\"bottom-start\" mono-side=\"bottom\" mono-align=\"start\">\r\n       <span mono-activator><button>Click me</button></span>\r\n       <div mono-panel role=\"dialog\" aria-hidden=\"false\">\r\n         <div mono-body>Any HTML goes here.</div>\r\n       </div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary, no `mono-side` = bottom, no `mono-align` =\r\n   start). The element writes these on its ROOT — the host in the light build,\r\n   an inner root `<div>` in the shadow one — plus the states `mono-open`,\r\n   `mono-disabled` and `mono-fixed` (set once the element takes over positioning\r\n   and writes inline top/left). The old classes (`.mono-dropdown.md.primary.open`)\r\n   are still emitted as inert hooks until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-dropdown]                ≡ .popover (relative inline-flex) — DEVIATION:\r\n                                      inline-BLOCK, because the activator wrapper is\r\n                                      `display: contents` and must not become a flex item\r\n     [mono-activator]               ≡ EXTENSION (upstream's trigger is a sibling <button>;\r\n                                      ours wraps a slotted one and stays out of layout)\r\n     [mono-panel]                   ≡ [data-popover] (absolute z-50 min-w-full w-max\r\n                                      overflow-x-hidden overflow-y-auto visible opacity-100\r\n                                      scale-100 transition-all outline-hidden, and\r\n                                      bg-popover text-popover-foreground ring-1\r\n                                      ring-foreground/10 flex flex-col gap-4 rounded-md\r\n                                      p-4 text-sm shadow-md duration-100)\r\n     [mono-panel][aria-hidden=true] ≡ [data-popover][aria-hidden='true'] (invisible\r\n                                      opacity-0 scale-95 + a 2-unit translate away from\r\n                                      the side it opens from)\r\n     [mono-side=\"…\"]                ≡ [data-popover][data-side='…'] (mt-1 top-full,\r\n                                      mb-1 bottom-full, me-1 end-full, ms-1 start-full)\r\n                                      — DEVIATION: the 1-unit margin is\r\n                                      `--mono-dropdown-offset`, a prop (`offset`)\r\n     [mono-align=\"…\"]               ≡ [data-popover][data-align='…'] (start-0 / end-0 /\r\n                                      start-1/2 -translate-x-1/2, and the top/bottom pair\r\n                                      for the two side placements)\r\n     [mono-body]                    ≡ EXTENSION (the panel's width floor, see below)\r\n     [mono-size=\"…\"]                ≡ EXTENSION (upstream ships one popover size)\r\n     [mono-color=\"…\"]               ≡ EXTENSION (the role tints the ring)\r\n     [mono-disabled]                ≡ .btn disabled:opacity-50 — DEVIATION: 0.55, the\r\n                                      pre-port value, because the activator is a\r\n                                      consumer's own control and dimming it twice reads\r\n                                      as broken\r\n\r\n   THE PANEL IS PORTALED. While open, the light build moves [mono-panel] into a\r\n   body portal; `composables/popup-portal` mirrors the root's class AND its\r\n   `mono-*` attributes onto that portal, so `[mono-dropdown] > [mono-panel]`\r\n   keeps matching there. Every panel rule is written as a CHILD of the root for\r\n   exactly that reason — and because `>` also stops these rules reaching a\r\n   `[mono-body]` that belongs to a card slotted inside the panel.\r\n\r\n   `[mono-dropdown]` IS ALSO A PART NAME: select, tag-input, date and\r\n   dropdown-table all call their popup panel `[mono-dropdown]`, scoped\r\n   `[mono-<field>] > [mono-dropdown]` = (0,2,0). This root rule is (0,1,0), so it\r\n   loses everywhere they set a property — and it deliberately sets NO paint (no\r\n   colour, no background), only layout and custom properties, so nothing it does\r\n   set can reach a field's panel visibly. Same contract as chip's root.\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING rule\r\n   is exactly one attribute strong — `:where([mono-dropdown]) > [mono-panel]` =\r\n   (0,1,0) — so a utility class handed in through `cssClass` wins by source\r\n   order, while the prop and state rules stay heavier.\r\n\r\n   FLAVORS set `--mono-dropdown-{radius,ring-color,ring-width,shadow,gap,\r\n   padding-<size>,font-<size>,min-width-<size>,max-width-<size>,offset-<size>}`;\r\n   every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"popover\"`).\r\n   ========================================================================= */\r\n\r\nmono-dropdown {\r\n  display: inline-block;\r\n}\r\n\r\n/* =========================================\r\n   Root — layout and the palette. NOTHING here paints (see the header).\r\n   ========================================= */\r\n\r\n[mono-dropdown] {\r\n  /* ── the six roles, each a public knob over a Basecoat token ───────────── */\r\n  --_mono-dropdown-primary: var(--mono-dropdown-primary, var(--primary));\r\n  --_mono-dropdown-secondary: var(--mono-dropdown-secondary, var(--secondary-foreground));\r\n  --_mono-dropdown-success: var(--mono-dropdown-success, var(--success));\r\n  --_mono-dropdown-danger: var(--mono-dropdown-danger, var(--destructive));\r\n  --_mono-dropdown-warning: var(--mono-dropdown-warning, var(--warning));\r\n  --_mono-dropdown-info: var(--mono-dropdown-info, var(--info));\r\n  --_mono-dropdown-teal: var(--mono-dropdown-teal, var(--teal));\r\n  --_mono-dropdown-purple: var(--mono-dropdown-purple, var(--purple));\r\n  --_mono-dropdown-neutral: var(--mono-dropdown-neutral, var(--neutral));\r\n  --_mono-dropdown-dark: var(--mono-dropdown-dark, var(--dark));\r\n  /* the colour in play — `primary` unless a [mono-color] rule re-points it */\r\n  --_mono-dropdown-accent: var(--mono-dropdown-accent, var(--_mono-dropdown-accent-preset, var(--_mono-dropdown-primary)));\r\n\r\n  --_mono-dropdown-bg: var(--mono-dropdown-bg, var(--mono-dropdown-surface, var(--popover)));\r\n  --_mono-dropdown-text: var(--mono-dropdown-text, var(--popover-foreground));\r\n  /* `ring-1 ring-foreground/10`, with the role mixed in so `color` is visible on\r\n     an otherwise neutral surface (EXTENSION — upstream's popover has no colour) */\r\n  --_mono-dropdown-ring-width: var(--mono-dropdown-ring-width, var(--mono-border-width));\r\n  /* the neutral half of the ring is its own knob: a flavor that wants\r\n     `ring-foreground/5` sets THAT, and the role stays mixed in on top */\r\n  --_mono-dropdown-ring-base: var(--mono-dropdown-ring-base, color-mix(in oklab, var(--foreground) 10%, transparent));\r\n  --_mono-dropdown-ring-color: var(--mono-dropdown-ring-color, var(--mono-dropdown-border,\r\n    color-mix(in oklab, var(--_mono-dropdown-accent) 18%, var(--_mono-dropdown-ring-base))));\r\n  --_mono-dropdown-shadow: var(--mono-dropdown-shadow, var(--mono-shadow-md));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css [data-popover] — gap-4 rounded-md p-4 text-sm */\r\n  --_mono-dropdown-radius: var(--mono-dropdown-radius, var(--_mono-dropdown-radius-preset, var(--mono-dropdown-radius-md, var(--mono-radius-md))));\r\n  --_mono-dropdown-pad-x: var(--mono-dropdown-pad-x, var(--_mono-dropdown-pad-x-preset, var(--mono-dropdown-pad-x-md, calc(var(--mono-spacing) * 4))));\r\n  --_mono-dropdown-pad-y: var(--mono-dropdown-pad-y, var(--_mono-dropdown-pad-y-preset, var(--mono-dropdown-pad-y-md, calc(var(--mono-spacing) * 4))));\r\n  --_mono-dropdown-gap: var(--mono-dropdown-gap, var(--_mono-dropdown-gap-preset, var(--mono-dropdown-gap-md, calc(var(--mono-spacing) * 4))));\r\n  --_mono-dropdown-font: var(--mono-dropdown-font, var(--_mono-dropdown-font-preset, var(--mono-dropdown-font-md, var(--mono-text-sm))));\r\n  --_mono-dropdown-line-height: var(--mono-dropdown-line-height, var(--_mono-dropdown-line-height-preset, var(--mono-text-sm--lh)));\r\n  --_mono-dropdown-min-width: var(--mono-dropdown-min-width, var(--_mono-dropdown-min-width-preset, var(--mono-dropdown-min-width-md, 200px)));\r\n  --_mono-dropdown-max-width: var(--mono-dropdown-max-width, var(--_mono-dropdown-max-width-preset, var(--mono-dropdown-max-width-md, 280px)));\r\n  /* `mt-1` and friends — a prop here (`offset`), so it is one knob per size */\r\n  --_mono-dropdown-offset: var(--mono-dropdown-offset, var(--_mono-dropdown-offset-preset, var(--mono-dropdown-offset-md, var(--mono-spacing))));\r\n\r\n  /* basecoat@1.0.2 components/popover.css .popover — relative inline-flex */\r\n  position: relative;\r\n  display: inline-block;\r\n  box-sizing: border-box;\r\n  font-family: inherit;\r\n}\r\n\r\n[mono-dropdown] *,\r\n[mono-dropdown] *::before,\r\n[mono-dropdown] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: Basecoat ships ONE popover; md is its `[data-popover]`\r\n   ========================================= */\r\n\r\n[mono-dropdown][mono-size=\"xs\"] {\r\n  --_mono-dropdown-radius-preset: var(--mono-dropdown-radius-xs, var(--mono-radius-sm));\r\n  --_mono-dropdown-pad-x-preset: var(--mono-dropdown-pad-x-xs, calc(var(--mono-spacing) * 2));\r\n  --_mono-dropdown-pad-y-preset: var(--mono-dropdown-pad-y-xs, calc(var(--mono-spacing) * 2));\r\n  --_mono-dropdown-gap-preset: var(--mono-dropdown-gap-xs, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-dropdown-font-preset: var(--mono-dropdown-font-xs, var(--mono-text-xs));\r\n  --_mono-dropdown-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-dropdown-min-width-preset: var(--mono-dropdown-min-width-xs, 150px);\r\n  --_mono-dropdown-max-width-preset: var(--mono-dropdown-max-width-xs, 220px);\r\n  --_mono-dropdown-offset-preset: var(--mono-dropdown-offset-xs, calc(var(--mono-spacing) * 0.75));\r\n}\r\n\r\n[mono-dropdown][mono-size=\"sm\"] {\r\n  --_mono-dropdown-radius-preset: var(--mono-dropdown-radius-sm, var(--mono-radius-md));\r\n  --_mono-dropdown-pad-x-preset: var(--mono-dropdown-pad-x-sm, calc(var(--mono-spacing) * 3));\r\n  --_mono-dropdown-pad-y-preset: var(--mono-dropdown-pad-y-sm, calc(var(--mono-spacing) * 3));\r\n  --_mono-dropdown-gap-preset: var(--mono-dropdown-gap-sm, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-dropdown-font-preset: var(--mono-dropdown-font-sm, var(--mono-text-xs));\r\n  --_mono-dropdown-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-dropdown-min-width-preset: var(--mono-dropdown-min-width-sm, 170px);\r\n  --_mono-dropdown-max-width-preset: var(--mono-dropdown-max-width-sm, 240px);\r\n  --_mono-dropdown-offset-preset: var(--mono-dropdown-offset-sm, var(--mono-spacing));\r\n}\r\n\r\n[mono-dropdown][mono-size=\"lg\"] {\r\n  --_mono-dropdown-radius-preset: var(--mono-dropdown-radius-lg, var(--mono-radius-lg));\r\n  --_mono-dropdown-pad-x-preset: var(--mono-dropdown-pad-x-lg, calc(var(--mono-spacing) * 5));\r\n  --_mono-dropdown-pad-y-preset: var(--mono-dropdown-pad-y-lg, calc(var(--mono-spacing) * 5));\r\n  --_mono-dropdown-gap-preset: var(--mono-dropdown-gap-lg, calc(var(--mono-spacing) * 5));\r\n  --_mono-dropdown-font-preset: var(--mono-dropdown-font-lg, var(--mono-text-sm));\r\n  --_mono-dropdown-line-height-preset: var(--mono-text-sm--lh);\r\n  --_mono-dropdown-min-width-preset: var(--mono-dropdown-min-width-lg, 240px);\r\n  --_mono-dropdown-max-width-preset: var(--mono-dropdown-max-width-lg, 340px);\r\n  --_mono-dropdown-offset-preset: var(--mono-dropdown-offset-lg, calc(var(--mono-spacing) * 1.5));\r\n}\r\n\r\n[mono-dropdown][mono-size=\"xl\"] {\r\n  --_mono-dropdown-radius-preset: var(--mono-dropdown-radius-xl, var(--mono-radius-xl));\r\n  --_mono-dropdown-pad-x-preset: var(--mono-dropdown-pad-x-xl, calc(var(--mono-spacing) * 6));\r\n  --_mono-dropdown-pad-y-preset: var(--mono-dropdown-pad-y-xl, calc(var(--mono-spacing) * 6));\r\n  --_mono-dropdown-gap-preset: var(--mono-dropdown-gap-xl, calc(var(--mono-spacing) * 5));\r\n  --_mono-dropdown-font-preset: var(--mono-dropdown-font-xl, var(--mono-text-base));\r\n  --_mono-dropdown-line-height-preset: var(--mono-text-base--lh);\r\n  --_mono-dropdown-min-width-preset: var(--mono-dropdown-min-width-xl, 280px);\r\n  --_mono-dropdown-max-width-preset: var(--mono-dropdown-max-width-xl, 420px);\r\n  --_mono-dropdown-offset-preset: var(--mono-dropdown-offset-xl, calc(var(--mono-spacing) * 2));\r\n}\r\n\r\n[mono-dropdown][mono-size=\"xxl\"] {\r\n  --_mono-dropdown-radius-preset: var(--mono-dropdown-radius-xxl, var(--mono-radius-xl));\r\n  --_mono-dropdown-pad-x-preset: var(--mono-dropdown-pad-x-xxl, calc(var(--mono-spacing) * 7));\r\n  --_mono-dropdown-pad-y-preset: var(--mono-dropdown-pad-y-xxl, calc(var(--mono-spacing) * 7));\r\n  --_mono-dropdown-gap-preset: var(--mono-dropdown-gap-xxl, calc(var(--mono-spacing) * 6));\r\n  --_mono-dropdown-font-preset: var(--mono-dropdown-font-xxl, var(--mono-text-lg));\r\n  --_mono-dropdown-line-height-preset: var(--mono-text-lg--lh);\r\n  --_mono-dropdown-min-width-preset: var(--mono-dropdown-min-width-xxl, 320px);\r\n  --_mono-dropdown-max-width-preset: var(--mono-dropdown-max-width-xxl, 480px);\r\n  --_mono-dropdown-offset-preset: var(--mono-dropdown-offset-xxl, calc(var(--mono-spacing) * 2.5));\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the role tints the panel's ring\r\n   ========================================= */\r\n\r\n[mono-dropdown][mono-color=\"primary\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-primary); }\r\n[mono-dropdown][mono-color=\"secondary\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-secondary); }\r\n[mono-dropdown][mono-color=\"success\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-success); }\r\n[mono-dropdown][mono-color=\"danger\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-danger); }\r\n[mono-dropdown][mono-color=\"warning\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-warning); }\r\n[mono-dropdown][mono-color=\"info\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-info); }\r\n[mono-dropdown][mono-color=\"teal\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-teal); }\r\n[mono-dropdown][mono-color=\"purple\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-purple); }\r\n[mono-dropdown][mono-color=\"neutral\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-neutral); }\r\n[mono-dropdown][mono-color=\"dark\"] { --_mono-dropdown-accent-preset: var(--_mono-dropdown-dark); }\r\n\r\n/* =========================================\r\n   Activator — EXTENSION: a wrapper that stays out of layout\r\n   ========================================= */\r\n\r\n:where([mono-dropdown]) > [mono-activator] {\r\n  display: contents;\r\n}\r\n\r\n/* The activator is the consumer's own control, so it is dimmed once and gently:\r\n   0.55 is the pre-port value, kept so a disabled dropdown reads the same. */\r\n[mono-dropdown][mono-disabled] > [mono-activator] {\r\n  opacity: 0.55;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* =========================================\r\n   Panel — `[data-popover]`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] — absolute z-50 min-w-full\r\n   w-max overflow-x-hidden overflow-y-auto visible opacity-100 scale-100\r\n   transition-all outline-hidden\r\n   — DEVIATIONS: `min-w-full` is the BODY's floor here (see [mono-body]) so a\r\n   body that cannot shrink sizes the panel instead of spilling out of it, and the\r\n   z-index is the shared popup stack's `--mono-popup-z` rather than a flat z-50. */\r\n:where([mono-dropdown]) > [mono-panel] {\r\n  position: absolute;\r\n  z-index: var(--mono-popup-z, 200);\r\n  width: max-content;\r\n  min-width: min-content;\r\n  max-width: var(--_mono-dropdown-max-width);\r\n  max-height: var(--mono-popup-avail-h, none);\r\n  overflow-x: hidden;\r\n  overflow-y: auto;\r\n  visibility: visible;\r\n  opacity: 1;\r\n  scale: 1;\r\n  outline: none;\r\n  transition:\r\n    opacity var(--mono-duration) var(--mono-ease),\r\n    scale var(--mono-duration) var(--mono-ease),\r\n    translate var(--mono-duration) var(--mono-ease),\r\n    visibility var(--mono-duration) var(--mono-ease);\r\n\r\n  /* basecoat@1.0.2 styles/vega.css [data-popover] — bg-popover\r\n     text-popover-foreground ring-foreground/10 flex flex-col gap-4 rounded-md p-4\r\n     text-sm shadow-md ring-1 duration-100 */\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-dropdown-gap);\r\n  padding: var(--_mono-dropdown-pad-y) var(--_mono-dropdown-pad-x);\r\n  border-radius: var(--_mono-dropdown-radius);\r\n  background: var(--_mono-dropdown-bg);\r\n  color: var(--_mono-dropdown-text);\r\n  font-size: var(--_mono-dropdown-font);\r\n  line-height: var(--_mono-dropdown-line-height);\r\n  box-shadow:\r\n    0 0 0 var(--_mono-dropdown-ring-width) var(--_mono-dropdown-ring-color),\r\n    var(--_mono-dropdown-shadow);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[aria-hidden='true']\r\n   — invisible opacity-0 scale-95, and a 2-unit translate away from the side it\r\n   opens from. The element writes `aria-hidden` on the panel already, so the\r\n   closed state needs no class of its own. */\r\n[mono-dropdown] > [mono-panel][aria-hidden=\"true\"] {\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  scale: 0.95;\r\n  pointer-events: none;\r\n}\r\n\r\n[mono-dropdown][mono-side=\"top\"] > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: 0 calc(var(--mono-spacing) * 2);\r\n}\r\n\r\n[mono-dropdown]:not([mono-side]) > [mono-panel][aria-hidden=\"true\"],\r\n[mono-dropdown][mono-side=\"bottom\"] > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: 0 calc(var(--mono-spacing) * -2);\r\n}\r\n\r\n[mono-dropdown][mono-side=\"left\"] > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: calc(var(--mono-spacing) * 2) 0;\r\n}\r\n\r\n[mono-dropdown][mono-side=\"right\"] > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: calc(var(--mono-spacing) * -2) 0;\r\n}\r\n\r\n/* Once the element takes over, it positions the panel in the viewport and writes\r\n   inline top/left — so the static placement rules below must not fight it. */\r\n[mono-dropdown][mono-fixed] > [mono-panel] {\r\n  position: fixed;\r\n}\r\n\r\n/* =========================================\r\n   Static placement — `[data-side]` / `[data-align]`, verbatim\r\n   -----------------------------------------------------------------------------\r\n   These are what hand-written markup (and SSR, before the element hydrates)\r\n   positions with. The element overrides them with inline top/left once it has\r\n   measured, which is why every rule here uses only the four edges.\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &:not([data-side]), &[data-side='bottom']\r\n   — mt-1 top-full */\r\n[mono-dropdown]:not([mono-side]):not([mono-fixed]) > [mono-panel],\r\n[mono-dropdown][mono-side=\"bottom\"]:not([mono-fixed]) > [mono-panel] {\r\n  top: 100%;\r\n  margin-top: var(--_mono-dropdown-offset);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[data-side='top'] — mb-1 bottom-full */\r\n[mono-dropdown][mono-side=\"top\"]:not([mono-fixed]) > [mono-panel] {\r\n  bottom: 100%;\r\n  margin-bottom: var(--_mono-dropdown-offset);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[data-side='left'] — me-1 end-full */\r\n[mono-dropdown][mono-side=\"left\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-end: 100%;\r\n  margin-inline-end: var(--_mono-dropdown-offset);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[data-side='right'] — ms-1 start-full */\r\n[mono-dropdown][mono-side=\"right\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-start: 100%;\r\n  margin-inline-start: var(--_mono-dropdown-offset);\r\n}\r\n\r\n/* The top/bottom pair aligns on the inline axis: start-0 / end-0 / start-1/2 -translate-x-1/2 */\r\n[mono-dropdown]:is(:not([mono-side]), [mono-side=\"top\"], [mono-side=\"bottom\"]):is(:not([mono-align]), [mono-align=\"start\"]):not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-start: 0;\r\n}\r\n\r\n[mono-dropdown]:is(:not([mono-side]), [mono-side=\"top\"], [mono-side=\"bottom\"])[mono-align=\"end\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-end: 0;\r\n}\r\n\r\n[mono-dropdown]:is(:not([mono-side]), [mono-side=\"top\"], [mono-side=\"bottom\"])[mono-align=\"center\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-start: 50%;\r\n  translate: -50% 0;\r\n}\r\n\r\n/* …and the left/right pair on the block axis: top-0 / bottom-0 / top-1/2 -translate-y-1/2 */\r\n[mono-dropdown]:is([mono-side=\"left\"], [mono-side=\"right\"]):is(:not([mono-align]), [mono-align=\"start\"]):not([mono-fixed]) > [mono-panel] {\r\n  top: 0;\r\n}\r\n\r\n[mono-dropdown]:is([mono-side=\"left\"], [mono-side=\"right\"])[mono-align=\"end\"]:not([mono-fixed]) > [mono-panel] {\r\n  bottom: 0;\r\n}\r\n\r\n[mono-dropdown]:is([mono-side=\"left\"], [mono-side=\"right\"])[mono-align=\"center\"]:not([mono-fixed]) > [mono-panel] {\r\n  top: 50%;\r\n  translate: 0 -50%;\r\n}\r\n\r\n/* A centred panel keeps its centring translate while closed, and adds the\r\n   directional one — `translate` is a single property, so both go in one value. */\r\n[mono-dropdown]:is(:not([mono-side]), [mono-side=\"bottom\"])[mono-align=\"center\"]:not([mono-fixed]) > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: -50% calc(var(--mono-spacing) * -2);\r\n}\r\n\r\n[mono-dropdown][mono-side=\"top\"][mono-align=\"center\"]:not([mono-fixed]) > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: -50% calc(var(--mono-spacing) * 2);\r\n}\r\n\r\n[mono-dropdown][mono-side=\"left\"][mono-align=\"center\"]:not([mono-fixed]) > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: calc(var(--mono-spacing) * 2) -50%;\r\n}\r\n\r\n[mono-dropdown][mono-side=\"right\"][mono-align=\"center\"]:not([mono-fixed]) > [mono-panel][aria-hidden=\"true\"] {\r\n  translate: calc(var(--mono-spacing) * -2) -50%;\r\n}\r\n\r\n/* =========================================\r\n   Body — EXTENSION: the panel's width floor\r\n   ========================================= */\r\n\r\n/* The floor lives HERE, not on the panel, so it reaches the panel as a\r\n   min-content contribution rather than as a competing `min-width` — which is\r\n   what lets slotted content that cannot shrink (a body with its own width) size\r\n   the panel instead of spilling out of it. Only the padding is subtracted\r\n   so the panel's border box lands on exactly --_mono-dropdown-min-width.\r\n   Only the padding is subtracted: the edge is Basecoat's `ring-1`, a\r\n   box-shadow, which takes no layout space (subtracting it left every panel 2px\r\n   under its preset). */\r\n:where([mono-dropdown]) > [mono-panel] > [mono-body] {\r\n  min-width: calc(var(--_mono-dropdown-min-width) - 2 * var(--_mono-dropdown-pad-x));\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-dropdown]) > [mono-panel] {\r\n    transition: none;\r\n  }\r\n}\r\n";
+
 //#endregion
 //#region src/components/dropdown/mono-dropdown.shadow.ts
-var MonoDropdownShadow = class MonoDropdownShadow extends withShadowUtilityStyles(MonoDropdownCore(LitElement)) {
+let MonoDropdownShadow = class MonoDropdownShadow extends withShadowUtilityStyles(MonoDropdownCore(LitElement)) {
 	constructor(..._args) {
 		super(..._args);
 		this._onMainSlotChange = () => {
@@ -498,7 +501,7 @@ var MonoDropdownShadow = class MonoDropdownShadow extends withShadowUtilityStyle
 		};
 	}
 	static {
-		this.styles = [unsafeCSS(toShadowCss(dropdown_default, { hostDisplay: "inline-block" }))];
+		this.styles = [unsafeCSS(toShadowCss(dropdown_css_raw_default, { hostDisplay: "inline-block" }))];
 	}
 	_activeMainNodes() {
 		const slot = this.renderRoot.querySelector("slot[name=\"main\"]");
@@ -543,5 +546,6 @@ var MonoDropdownShadow = class MonoDropdownShadow extends withShadowUtilityStyle
 	}
 };
 MonoDropdownShadow = __decorate([customElement("mono-shadow-dropdown")], MonoDropdownShadow);
+
 //#endregion
-export { MonoDropdownCore, MonoDropdownShadow };
+export { MonoDropdownCore, MonoDropdownShadow };

package/dist/ui/shadow/file-upload.js

@@ -1,10 +1,11 @@
-import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, o as arrayHasChanged, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-RB5Tz5nl.js";
-import { t as dispatchMonoEvent } from "../../mono-event-Bi1qP9uN.js";
-import { n as mdiGlyph, t as isIconifyClass } from "../../icon-CJkTlmTb.js";
-import { t as MonoFormControlCore } from "../../form-control-core-B8d7k6vk.js";
+import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, o as arrayHasChanged, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
+import { n as mdiGlyph, t as isIconifyClass } from "../../icon-BM9N-jOt.js";
+import { t as MonoFormControlCore } from "../../form-control-core-CIdMLXMo.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";
+
 //#region src/components/file-upload/file-upload-utils.ts
 function validateFileUploadProps(props) {
 	const validVariants = ["default", "compact"];
@@ -20,8 +21,8 @@ function validateFileUploadProps(props) {
 }
 function formatFileSize(size) {
 	if (size < 1024) return `${size} B`;
-	if (size < 1024 * 1024) return `${Math.round(size / 1024)} KB`;
-	return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+	if (size < 1048576) return `${Math.round(size / 1024)} KB`;
+	return `${(size / 1048576).toFixed(1)} MB`;
 }
 /**
 * Pick a default file-type icon. Returns an MDI iconify utility class
@@ -60,9 +61,10 @@ function createUploadItem(file) {
 		previewUrl: isImage ? URL.createObjectURL(file) : void 0
 	};
 }
+
 //#endregion
 //#region src/components/file-upload/file-upload-core.ts
-var numberStringConverter = {
+const numberStringConverter = {
 	fromAttribute(value) {
 		if (value === null || value === "") return 0;
 		const parsed = Number(value);
@@ -87,7 +89,7 @@ var numberStringConverter = {
 * SSR-safe: no `document`/`window` access at module/ctor scope; the file pipeline
 * and `_inputEl` (`@query`) only run client-side from user interaction.
 */
-var MonoFileUploadCore = (superClass) => {
+const MonoFileUploadCore = (superClass) => {
 	class MonoFileUploadCoreClass extends MonoFormControlCore(superClass) {
 		constructor(...args) {
 			super(...args);
@@ -617,24 +619,26 @@ var MonoFileUploadCore = (superClass) => {
 	__decorate([query(".mono-file-upload-input")], MonoFileUploadCoreClass.prototype, "_inputEl", void 0);
 	return MonoFileUploadCoreClass;
 };
+
 //#endregion
-//#region src/components/file-upload/file-upload.css?raw
-var file_upload_default = "/* =========================================================================\r\n   mono-file-upload — a port of Basecoat's `.empty` (the dropzone) and `.item`\r\n   (the file rows) inside a `.field` (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-file-upload variant=\"compact\" label=\"Docs\" title=\"Drop here\" subtitle=\"PDF, DOCX\">\r\n     <div mono-file-upload mono-variant=\"compact\">\r\n       <label mono-label>Docs</label>\r\n       <label mono-dropzone>\r\n         <span mono-icon><span mono-glyph class=\"i-mdi-cloud-upload-outline\"></span></span>\r\n         <span mono-title>Drop here</span>\r\n         <span mono-subtitle>PDF, DOCX</span>\r\n         <input mono-native type=\"file\" />\r\n       </label>\r\n       <div mono-list>\r\n         <div mono-item>\r\n           <span mono-thumb>…</span>\r\n           <span mono-file><span mono-name>a.pdf</span><span mono-meta>12 KB</span></span>\r\n           <button mono-remove type=\"button\">…</button>\r\n         </div>\r\n       </div>\r\n       <div mono-message=\"helper\">…</div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-variant])` = default,\r\n   no `mono-validation-state` = default). The element renders these on its root\r\n   (both builds) plus the states `mono-disabled` / `mono-required` /\r\n   `mono-multiple` / `mono-no-dragdrop` (drag-drop is ON by default, so the\r\n   attribute marks the exception) and the live `mono-dragover`. The old\r\n   classes (`.mono-file-upload.compact.invalid`) are still emitted as inert\r\n   hooks until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-file-upload]              ≡ .field (flex w-full flex-col gap-3)\r\n     [mono-label]                    ≡ .field > label / .label (text-sm leading-snug font-medium)\r\n     [mono-dropzone]                 ≡ .empty (flex flex-col items-center justify-center text-center\r\n                                       text-balance, gap-4 rounded-lg border-dashed p-12) — the border\r\n                                       WIDTH is the `border` utility upstream puts in the markup, and\r\n                                       the gap is `.empty > header`'s gap-2 because our title and\r\n                                       subtext are flat siblings, not a nested <header>\r\n     [mono-icon]                     ≡ .empty figure + .empty figure:has(> svg:only-child)\r\n                                       (mb-2, bg-muted text-foreground size-10 rounded-lg, glyph size-6)\r\n     [mono-title]                    ≡ .empty :is(h2, h3, h4) (text-lg font-medium tracking-tight)\r\n     [mono-subtitle]/[mono-subtext]  ≡ .empty > header > p (text-sm/relaxed text-muted-foreground)\r\n     [mono-native]                   ≡ .field > input[type='file'] — HIDDEN here: the whole dropzone\r\n                                       is the picker, so the native control never shows\r\n     [mono-list]                     ≡ .item-group (flex w-full flex-col, gap-2.5 beside sm items)\r\n     [mono-item]                     ≡ .item[data-variant='outline'][data-size='sm']\r\n                                       (flex flex-wrap items-center border-border rounded-md text-sm,\r\n                                        gap-2.5 px-3 py-2.5, transition-colors)\r\n     [mono-thumb]                    ≡ .item > figure:has(> img) at sm (size-8 rounded-sm overflow-hidden,\r\n                                       img size-full object-cover) + figure:has(> svg:only-child) (glyph size-4)\r\n     [mono-file]                     ≡ .item > section (flex flex-1 flex-col gap-1)\r\n     [mono-name]                     ≡ .item :is(h2, h3, h4) (line-clamp-1 text-sm/snug font-medium)\r\n     [mono-meta]                     ≡ .item p (text-sm/normal text-muted-foreground line-clamp-2)\r\n     [mono-remove]                   ≡ .btn[data-variant='ghost'][data-size='icon-sm']\r\n                                       (size-8 rounded-[min(radius-md,10px)] hover:bg-muted, glyph size-4)\r\n     [mono-message=\"…\"]              ≡ .field > p / .field [role='alert'] (text-sm, destructive when invalid)\r\n     [mono-validation-state=\"invalid\"] ≡ aria-invalid:border-destructive aria-invalid:ring-destructive/20\r\n     [mono-validation-state=\"valid|warning\"] ≡ EXTENSION (the same treatment in --success / --warning)\r\n     [mono-variant=\"compact\"]        ≡ the `.empty` + `.item` metrics the COMPACT styles use\r\n                                       (nova/lyra/mira: .empty p-6, figure size-8 with a size-4 glyph,\r\n                                        title text-sm; rows drop to .item[data-size='xs'])\r\n     [mono-dragover]                 ≡ EXTENSION (the .item focus-visible treatment: border-ring +\r\n                                       ring-[3px] ring-ring/50, plus an accent tint)\r\n     [mono-disabled]                 ≡ .btn disabled:opacity-50\r\n\r\n   Upstream's dropzone is genuinely large — `.empty` is `p-12` — so this port is\r\n   TALLER than the pre-Basecoat uploader (which padded 1.2rem). `compact` is the\r\n   short one, and `--mono-file-upload-dropzone-padding` is one line either way.\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING rule\r\n   is exactly one attribute strong — `:where([mono-file-upload]) [mono-item]` =\r\n   (0,1,0) — so a utility class handed in through `cssClass` wins by source\r\n   order, while the prop and state rules stay heavier and win over it.\r\n\r\n   The two variants own SEPARATE public knobs (`-dropzone-padding` vs\r\n   `-compact-padding`, `-item-padding-x` vs `-compact-item-padding-x`, …): a\r\n   flavor writing one shared knob would repaint both looks at once, which is the\r\n   bug that made every style's `underlined` textarea come out filled.\r\n\r\n   FLAVORS set `--mono-file-upload-{radius,dropzone-padding,dropzone-gap,\r\n   icon-offset,icon-size,icon-glyph-size,icon-radius,title-font-size,\r\n   title-transform,item-radius,item-padding-*,item-gap,list-gap,thumb-size,\r\n   thumb-radius,…}` — the DEFAULT variant's set; `compact` has its own\r\n   `--mono-file-upload-compact-*` twins so one look never repaints the other; every fallback\r\n   here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"^\\.(empty|item)\"`).\r\n   ========================================================================= */\r\n\r\nmono-file-upload {\r\n  display: block;\r\n}\r\n\r\n[mono-file-upload] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-file-upload-text: var(--mono-file-upload-text, var(--foreground));\r\n  --_mono-file-upload-muted: var(--mono-file-upload-muted, var(--muted-foreground));\r\n  /* the accent: the dropzone glyph, and the ring the dragover state paints */\r\n  --_mono-file-upload-primary: var(--mono-file-upload-primary, var(--primary));\r\n  --_mono-file-upload-success: var(--mono-file-upload-success, var(--success));\r\n  --_mono-file-upload-danger: var(--mono-file-upload-danger, var(--destructive));\r\n  --_mono-file-upload-warning: var(--mono-file-upload-warning, var(--warning));\r\n\r\n  /* `-border` is the pre-Basecoat public name for the dropzone edge — kept as\r\n     the fallback so a consumer that set it keeps working */\r\n  --_mono-file-upload-border-color: var(--mono-file-upload-border-color, var(--mono-file-upload-border, var(--border)));\r\n  --_mono-file-upload-border-width: var(--mono-file-upload-border-width, var(--mono-border-width));\r\n  --_mono-file-upload-border-style: var(--mono-file-upload-border-style, dashed);\r\n  /* .empty has no fill of its own; `-background` is the pre-Basecoat name */\r\n  --_mono-file-upload-dropzone-bg: var(--mono-file-upload-dropzone-bg, var(--mono-file-upload-background, transparent));\r\n  /* hover: the ghost treatment (bg-muted, dark:bg-muted/50) */\r\n  --_mono-file-upload-dropzone-hover-bg: var(--mono-file-upload-dropzone-hover-bg, var(--mono-mode-ghost-hover));\r\n  --_mono-file-upload-radius: var(--mono-file-upload-radius, var(--mono-radius-lg));\r\n\r\n  --_mono-file-upload-ring-color: var(--mono-file-upload-ring-color, var(--ring));\r\n  --_mono-file-upload-ring-width: var(--mono-file-upload-ring-width, var(--mono-ring-width));\r\n  --_mono-file-upload-ring-alpha: var(--mono-file-upload-ring-alpha, var(--mono-ring-alpha));\r\n\r\n  /* the icon plate — .empty figure:has(> svg:only-child) is a muted square */\r\n  --_mono-file-upload-icon-bg: var(--mono-file-upload-icon-bg, var(--muted));\r\n  --_mono-file-upload-icon-color: var(--mono-file-upload-icon-color, var(--_mono-file-upload-text));\r\n  --_mono-file-upload-icon-radius: var(--mono-file-upload-icon-radius, var(--mono-radius-lg));\r\n\r\n  /* the file rows — .item[data-variant='outline'] rings, it does not fill.\r\n     `-surface` is the pre-Basecoat name for the row background. */\r\n  --_mono-file-upload-item-bg: var(--mono-file-upload-item-bg, var(--mono-file-upload-surface, transparent));\r\n  --_mono-file-upload-item-border-color: var(--mono-file-upload-item-border-color, var(--border));\r\n  --_mono-file-upload-item-border-width: var(--mono-file-upload-item-border-width, var(--mono-border-width));\r\n  --_mono-file-upload-item-radius: var(--mono-file-upload-item-radius, var(--mono-radius-md));\r\n  --_mono-file-upload-thumb-bg: var(--mono-file-upload-thumb-bg, var(--muted));\r\n  --_mono-file-upload-thumb-radius: var(--mono-file-upload-thumb-radius, var(--mono-radius-sm));\r\n\r\n  /* ── the DEFAULT variant's metrics; `compact` re-points every preset ───────\r\n     basecoat@1.0.2 styles/vega.css .empty — gap-4 rounded-lg border-dashed p-12;\r\n     .empty figure — mb-2; .empty figure:has(> svg:only-child) — size-10 rounded-lg\r\n     with a size-6 glyph; .empty :is(h2,h3,h4) — text-lg; .item[data-size='sm'] —\r\n     gap-2.5 px-3 py-2.5 with a size-8 image figure; .item-group — gap-2.5 */\r\n  --_mono-file-upload-dropzone-padding: var(--_mono-file-upload-dropzone-padding-preset, calc(var(--mono-spacing) * 12));\r\n  --_mono-file-upload-dropzone-gap: var(--_mono-file-upload-dropzone-gap-preset, calc(var(--mono-spacing) * 2));\r\n  --_mono-file-upload-icon-offset: var(--_mono-file-upload-icon-offset-preset, calc(var(--mono-spacing) * 4));\r\n  --_mono-file-upload-icon-size: var(--_mono-file-upload-icon-size-preset, calc(var(--mono-spacing) * 10));\r\n  --_mono-file-upload-icon-glyph-size: var(--_mono-file-upload-icon-glyph-size-preset, calc(var(--mono-spacing) * 6));\r\n  --_mono-file-upload-title-font-size: var(--_mono-file-upload-title-font-size-preset, var(--mono-text-lg));\r\n  --_mono-file-upload-title-line-height: var(--_mono-file-upload-title-line-height-preset, var(--mono-text-lg--lh));\r\n  --_mono-file-upload-list-gap: var(--_mono-file-upload-list-gap-preset, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-file-upload-item-gap: var(--_mono-file-upload-item-gap-preset, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-file-upload-item-padding-x: var(--_mono-file-upload-item-padding-x-preset, calc(var(--mono-spacing) * 3));\r\n  --_mono-file-upload-item-padding-y: var(--_mono-file-upload-item-padding-y-preset, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-file-upload-file-gap: var(--_mono-file-upload-file-gap-preset, var(--mono-spacing));\r\n  --_mono-file-upload-thumb-size: var(--_mono-file-upload-thumb-size-preset, calc(var(--mono-spacing) * 8));\r\n  --_mono-file-upload-meta-font-size: var(--_mono-file-upload-meta-font-size-preset, var(--mono-text-sm));\r\n\r\n  /* basecoat@1.0.2 components/field.css .field — flex w-full flex-col;\r\n     styles/vega.css .field — gap-3 */\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  gap: var(--mono-file-upload-gap, calc(var(--mono-spacing) * 3));\r\n  color: var(--_mono-file-upload-text);\r\n  font-family: inherit;\r\n}\r\n\r\n[mono-file-upload] *,\r\n[mono-file-upload] *::before,\r\n[mono-file-upload] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* The shadow build renders every region and marks the empty ones; this hides\r\n   them. It must out-specify the region rules below, hence the root attribute. */\r\n[mono-file-upload] :is([mono-label], [mono-icon], [mono-title], [mono-subtitle], [mono-subtext], [mono-list], [mono-message])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Variants — the DEFAULT look, and the compact one\r\n   ========================================= */\r\n\r\n/* `default` is vega's `.empty` + `.item[data-size='sm']`. The knobs are scoped\r\n   to the variant so a flavor can restyle one look without touching the other. */\r\n[mono-file-upload]:not([mono-variant=\"compact\"]) {\r\n  --_mono-file-upload-dropzone-padding-preset: var(--mono-file-upload-dropzone-padding);\r\n  --_mono-file-upload-dropzone-gap-preset: var(--mono-file-upload-dropzone-gap);\r\n  --_mono-file-upload-icon-offset-preset: var(--mono-file-upload-icon-offset);\r\n  --_mono-file-upload-icon-size-preset: var(--mono-file-upload-icon-size);\r\n  --_mono-file-upload-icon-glyph-size-preset: var(--mono-file-upload-icon-glyph-size);\r\n  --_mono-file-upload-title-font-size-preset: var(--mono-file-upload-title-font-size);\r\n  --_mono-file-upload-title-line-height-preset: var(--mono-file-upload-title-line-height);\r\n  --_mono-file-upload-list-gap-preset: var(--mono-file-upload-list-gap);\r\n  --_mono-file-upload-item-gap-preset: var(--mono-file-upload-item-gap);\r\n  --_mono-file-upload-item-padding-x-preset: var(--mono-file-upload-item-padding-x);\r\n  --_mono-file-upload-item-padding-y-preset: var(--mono-file-upload-item-padding-y);\r\n  --_mono-file-upload-file-gap-preset: var(--mono-file-upload-file-gap);\r\n  --_mono-file-upload-thumb-size-preset: var(--mono-file-upload-thumb-size);\r\n  --_mono-file-upload-meta-font-size-preset: var(--mono-file-upload-meta-font-size);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/nova.css .empty — rounded-xl p-6;\r\n   styles/nova.css .empty figure:has(> svg:only-child) — size-8 with a size-4 glyph;\r\n   styles/nova.css .empty :is(h2, h3, h4) — text-sm;\r\n   styles/vega.css .item[data-size='xs'] — gap-2 px-2.5 py-2;\r\n   styles/vega.css .item[data-size='xs'] > section — gap-0;\r\n   styles/vega.css .item[data-size='xs'] p — text-xs;\r\n   styles/vega.css .item[data-size='xs'] > figure:has(> img) — size-6;\r\n   styles/vega.css .item-group:has(> .item[data-size='xs']) — gap-2\r\n   — DEVIATION: the radius stays the default variant's (a flavor owns that axis). */\r\n[mono-file-upload][mono-variant=\"compact\"] {\r\n  --_mono-file-upload-dropzone-padding-preset: var(--mono-file-upload-compact-padding, calc(var(--mono-spacing) * 6));\r\n  --_mono-file-upload-dropzone-gap-preset: var(--mono-file-upload-compact-gap, var(--mono-spacing));\r\n  --_mono-file-upload-icon-offset-preset: var(--mono-file-upload-compact-icon-offset, calc(var(--mono-spacing) * 3));\r\n  --_mono-file-upload-icon-size-preset: var(--mono-file-upload-compact-icon-size, calc(var(--mono-spacing) * 8));\r\n  --_mono-file-upload-icon-glyph-size-preset: var(--mono-file-upload-compact-icon-glyph-size, calc(var(--mono-spacing) * 4));\r\n  --_mono-file-upload-title-font-size-preset: var(--mono-file-upload-compact-title-font-size, var(--mono-text-sm));\r\n  --_mono-file-upload-title-line-height-preset: var(--mono-file-upload-compact-title-line-height, var(--mono-leading-snug));\r\n  --_mono-file-upload-list-gap-preset: var(--mono-file-upload-compact-list-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-file-upload-item-gap-preset: var(--mono-file-upload-compact-item-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-file-upload-item-padding-x-preset: var(--mono-file-upload-compact-item-padding-x, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-file-upload-item-padding-y-preset: var(--mono-file-upload-compact-item-padding-y, calc(var(--mono-spacing) * 2));\r\n  --_mono-file-upload-file-gap-preset: var(--mono-file-upload-compact-file-gap, 0px);\r\n  --_mono-file-upload-thumb-size-preset: var(--mono-file-upload-compact-thumb-size, calc(var(--mono-spacing) * 6));\r\n  --_mono-file-upload-meta-font-size-preset: var(--mono-file-upload-compact-meta-font-size, var(--mono-text-xs));\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 — text-sm leading-snug font-medium */\r\n:where([mono-file-upload]) > [mono-label] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  gap: calc(var(--mono-spacing) * 1);\r\n  font-size: var(--mono-file-upload-label-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-file-upload-label-line-height, var(--mono-leading-snug));\r\n  font-weight: var(--mono-file-upload-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  color: var(--mono-file-upload-label-color, var(--_mono-file-upload-text));\r\n}\r\n\r\n[mono-file-upload][mono-validation-state=\"invalid\"] > [mono-label] {\r\n  color: var(--mono-file-upload-label-color, var(--_mono-file-upload-danger));\r\n}\r\n\r\n:where([mono-file-upload]) [mono-required-mark] {\r\n  color: var(--mono-file-upload-required-color, var(--destructive));\r\n}\r\n\r\n/* =========================================\r\n   Dropzone — `.empty`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/empty.css .empty — flex w-full min-w-0 flex-col\r\n   items-center justify-center text-center text-balance;\r\n   styles/vega.css .empty — gap-4 rounded-lg border-dashed p-12\r\n   — the border WIDTH comes from the `border` utility upstream writes in markup,\r\n   so it is a knob here; `transition-[color,box-shadow]` is the field treatment. */\r\n:where([mono-file-upload]) [mono-dropzone] {\r\n  display: flex;\r\n  width: 100%;\r\n  min-width: 0;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  text-align: center;\r\n  text-wrap: balance;\r\n  gap: var(--_mono-file-upload-dropzone-gap);\r\n  padding: var(--_mono-file-upload-dropzone-padding);\r\n  border: var(--_mono-file-upload-border-width) var(--_mono-file-upload-border-style)\r\n    var(--_mono-file-upload-border-color);\r\n  border-radius: var(--_mono-file-upload-radius);\r\n  background-color: var(--_mono-file-upload-dropzone-bg);\r\n  cursor: pointer;\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  /* the two-slot stack the ports share: the ring is written by a state rule */\r\n  box-shadow: var(--_mono-file-upload-ring, 0 0 #0000);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted\r\n   (dark:hover:bg-muted/50), carried by --mono-mode-ghost-hover */\r\n@media (hover: hover) {\r\n  [mono-file-upload]:not([mono-disabled]) [mono-dropzone]:hover {\r\n    border-color: var(--mono-file-upload-hover-border-color, var(--_mono-file-upload-primary));\r\n    background-color: var(--_mono-file-upload-dropzone-hover-bg);\r\n  }\r\n}\r\n\r\n/* EXTENSION — the drag-over state wears the `.item` focus treatment\r\n   (basecoat@1.0.2 components/item.css .item — focus-visible:border-ring\r\n   focus-visible:ring-[3px] focus-visible:ring-ring/50) in the accent colour */\r\n[mono-file-upload][mono-dragover] [mono-dropzone] {\r\n  border-color: var(--_mono-file-upload-primary);\r\n  border-style: solid;\r\n  background-color: color-mix(in oklab, var(--_mono-file-upload-primary) var(--mono-mode-tint), transparent);\r\n  --_mono-file-upload-ring: 0 0 0 var(--_mono-file-upload-ring-width)\r\n    color-mix(in oklab, var(--_mono-file-upload-primary) var(--_mono-file-upload-ring-alpha), transparent);\r\n}\r\n\r\n/* basecoat@1.0.2 components/button.css .btn — disabled:pointer-events-none disabled:opacity-50 */\r\n[mono-file-upload][mono-disabled] [mono-dropzone] {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > textarea, .textarea —\r\n   aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:ring-3\r\n   (dark: destructive/50 and /40, carried by the mode tokens) */\r\n[mono-file-upload][mono-validation-state=\"invalid\"] [mono-dropzone] {\r\n  border-color: var(--mono-file-upload-invalid-border-color, var(--mono-mode-invalid-border));\r\n  --_mono-file-upload-ring: 0 0 0 var(--_mono-file-upload-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* EXTENSION — the same treatment in --success / --warning */\r\n[mono-file-upload][mono-validation-state=\"valid\"] [mono-dropzone] {\r\n  border-color: var(--_mono-file-upload-success);\r\n  --_mono-file-upload-ring: 0 0 0 var(--_mono-file-upload-ring-width)\r\n    color-mix(in oklab, var(--_mono-file-upload-success) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n[mono-file-upload][mono-validation-state=\"warning\"] [mono-dropzone] {\r\n  border-color: var(--_mono-file-upload-warning);\r\n  --_mono-file-upload-ring: 0 0 0 var(--_mono-file-upload-ring-width)\r\n    color-mix(in oklab, var(--_mono-file-upload-warning) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n/* =========================================\r\n   Dropzone contents — figure, title, subtext\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .empty figure — mb-2;\r\n   styles/vega.css .empty figure:has(> svg:only-child) — bg-muted text-foreground\r\n   flex size-10 shrink-0 items-center justify-center rounded-lg\r\n   — DEVIATION: keyed off the part attribute, not `:has(> svg:only-child)`: the\r\n   light build paints the glyph with an `i-*` MASK span and the shadow build with\r\n   an inline <svg>, so a shape test would style one build and not the other. */\r\n:where([mono-file-upload]) [mono-icon] {\r\n  display: flex;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-file-upload-icon-size);\r\n  height: var(--_mono-file-upload-icon-size);\r\n  margin-bottom: var(--_mono-file-upload-icon-offset);\r\n  border-radius: var(--_mono-file-upload-icon-radius);\r\n  background-color: var(--_mono-file-upload-icon-bg);\r\n  color: var(--_mono-file-upload-icon-color);\r\n  font-size: var(--_mono-file-upload-icon-glyph-size);\r\n  line-height: 1;\r\n  overflow: hidden;\r\n}\r\n\r\n/* `[&_svg:not([class*='size-'])]:size-6` — our glyph is a mask span (light) or an\r\n   inline SVG (shadow); both are sized by the same box. Only [mono-glyph] is\r\n   touched: a slotted custom icon is light DOM in BOTH builds, so a bare `svg`\r\n   descendant rule would reach it in light and not in shadow. */\r\n:where([mono-file-upload]) [mono-icon] [mono-glyph] {\r\n  display: block;\r\n  width: var(--_mono-file-upload-icon-glyph-size);\r\n  height: var(--_mono-file-upload-icon-glyph-size);\r\n  flex-shrink: 0;\r\n  color: inherit;\r\n}\r\n\r\n:where([mono-file-upload]) [mono-icon] [mono-glyph] > 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 .empty :is(h2, h3, h4) — text-lg font-medium tracking-tight */\r\n:where([mono-file-upload]) [mono-title] {\r\n  font-size: var(--_mono-file-upload-title-font-size);\r\n  line-height: var(--_mono-file-upload-title-line-height);\r\n  font-weight: var(--mono-file-upload-title-font-weight, var(--mono-font-weight-medium));\r\n  letter-spacing: var(--mono-file-upload-title-tracking, var(--mono-tracking-tight));\r\n  text-transform: var(--mono-file-upload-title-transform, none);\r\n  color: var(--_mono-file-upload-text);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .empty > header > p — text-muted-foreground text-sm/relaxed\r\n   `mono-subtitle` is the current part name; the element still emits the old\r\n   `mono-subtext` beside it, and hand-written markup may use either. The CSS vars\r\n   keep their `-subtext-` names. */\r\n:where([mono-file-upload]) :is([mono-subtitle], [mono-subtext]) {\r\n  font-size: var(--mono-file-upload-subtext-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-file-upload-subtext-line-height, var(--mono-leading-relaxed));\r\n  color: var(--mono-file-upload-subtext-color, var(--_mono-file-upload-muted));\r\n}\r\n\r\n/* The whole dropzone IS the picker — the native control never shows. */\r\n:where([mono-file-upload]) [mono-native] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   File list — `.item-group` and `.item`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/item.css .item-group — flex w-full flex-col;\r\n   styles/vega.css .item-group:has(> .item[data-size='sm']) — gap-2.5 */\r\n:where([mono-file-upload]) [mono-list] {\r\n  display: flex;\r\n  width: 100%;\r\n  flex-direction: column;\r\n  gap: var(--_mono-file-upload-list-gap);\r\n}\r\n\r\n/* basecoat@1.0.2 components/item.css .item — flex w-full flex-wrap items-center\r\n   border transition-colors duration-100 outline-none;\r\n   styles/vega.css .item — rounded-md border text-sm;\r\n   styles/vega.css .item[data-variant='outline'] — border-border;\r\n   styles/vega.css .item[data-size='sm'] — gap-2.5 px-3 py-2.5 */\r\n:where([mono-file-upload]) [mono-item] {\r\n  display: flex;\r\n  width: 100%;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: var(--_mono-file-upload-item-gap);\r\n  padding-inline: var(--_mono-file-upload-item-padding-x);\r\n  padding-block: var(--_mono-file-upload-item-padding-y);\r\n  border: var(--_mono-file-upload-item-border-width) solid var(--_mono-file-upload-item-border-color);\r\n  border-radius: var(--_mono-file-upload-item-radius);\r\n  background-color: var(--_mono-file-upload-item-bg);\r\n  font-size: var(--mono-file-upload-item-font-size, var(--mono-text-sm));\r\n  transition:\r\n    background-color 100ms var(--mono-ease),\r\n    border-color 100ms var(--mono-ease);\r\n  outline: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .item[data-size='sm'] > figure:has(> img) — size-8;\r\n   styles/vega.css .item > figure:has(> img) — overflow-hidden rounded-sm;\r\n   components/item.css .item > figure:has(> img) — [&_img]:size-full [&_img]:object-cover;\r\n   styles/vega.css .item > figure:has(> svg:only-child) — a size-4 glyph */\r\n:where([mono-file-upload]) [mono-thumb] {\r\n  display: inline-flex;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-file-upload-thumb-size);\r\n  height: var(--_mono-file-upload-thumb-size);\r\n  overflow: hidden;\r\n  border-radius: var(--_mono-file-upload-thumb-radius);\r\n  background-color: var(--_mono-file-upload-thumb-bg);\r\n  color: var(--mono-file-upload-thumb-color, var(--_mono-file-upload-muted));\r\n  font-size: calc(var(--mono-spacing) * 4);\r\n  line-height: 1;\r\n}\r\n\r\n:where([mono-file-upload]) [mono-thumb] > img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n}\r\n\r\n:where([mono-file-upload]) [mono-thumb] [mono-glyph] {\r\n  display: block;\r\n  width: calc(var(--mono-spacing) * 4);\r\n  height: calc(var(--mono-spacing) * 4);\r\n  flex-shrink: 0;\r\n}\r\n\r\n:where([mono-file-upload]) [mono-thumb] [mono-glyph] > svg {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* basecoat@1.0.2 components/item.css .item > section — flex flex-1 flex-col;\r\n   styles/vega.css .item > section — gap-1 (gap-0 at data-size='xs') */\r\n:where([mono-file-upload]) [mono-file] {\r\n  display: flex;\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n  flex-direction: column;\r\n  gap: var(--_mono-file-upload-file-gap);\r\n}\r\n\r\n/* basecoat@1.0.2 components/item.css .item :is(h2, h3, h4) — line-clamp-1 flex\r\n   w-fit items-center;\r\n   styles/vega.css .item :is(h2, h3, h4) — text-sm leading-snug font-medium\r\n   — DEVIATION: one line ellipsised with `text-overflow`, not `line-clamp-1`: a\r\n   file name is a single line and must truncate mid-word, which the WebKit box\r\n   clamp does not do. */\r\n:where([mono-file-upload]) [mono-name] {\r\n  max-width: 100%;\r\n  font-size: var(--mono-file-upload-name-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-file-upload-name-line-height, var(--mono-leading-snug));\r\n  font-weight: var(--mono-file-upload-name-font-weight, var(--mono-font-weight-medium));\r\n  color: var(--_mono-file-upload-text);\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n/* basecoat@1.0.2 components/item.css .item p — text-muted-foreground line-clamp-2\r\n   text-start font-normal;\r\n   styles/vega.css .item p — text-sm leading-normal (text-xs at data-size='xs') */\r\n:where([mono-file-upload]) [mono-meta] {\r\n  font-size: var(--_mono-file-upload-meta-font-size);\r\n  line-height: var(--mono-file-upload-meta-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-file-upload-meta-color, var(--_mono-file-upload-muted));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted\r\n   hover:text-foreground (dark:hover:bg-muted/50);\r\n   styles/vega.css .btn[data-size='icon-sm'] — size-8 rounded-[min(var(--radius-md),10px)]\r\n   — DEVIATION: the hover ink is the DANGER role, not `--foreground`: this ghost\r\n   button deletes the row it sits in. */\r\n:where([mono-file-upload]) [mono-remove] {\r\n  display: inline-flex;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--mono-file-upload-remove-size, calc(var(--mono-spacing) * 8));\r\n  height: var(--mono-file-upload-remove-size, calc(var(--mono-spacing) * 8));\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--mono-file-upload-remove-radius, min(var(--mono-radius-md), 10px));\r\n  background: transparent;\r\n  color: var(--_mono-file-upload-muted);\r\n  font: inherit;\r\n  font-size: calc(var(--mono-spacing) * 4);\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  transition:\r\n    color var(--mono-duration) var(--mono-ease),\r\n    background-color var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease);\r\n  box-shadow: var(--_mono-file-upload-remove-ring, 0 0 #0000);\r\n}\r\n\r\n@media (hover: hover) {\r\n  :where([mono-file-upload]) [mono-remove]:hover {\r\n    background-color: var(--mono-mode-ghost-hover);\r\n    color: var(--_mono-file-upload-danger);\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 components/item.css .item — focus-visible:border-ring\r\n   focus-visible:ring-[3px] focus-visible:ring-ring/50 */\r\n:where([mono-file-upload]) [mono-remove]:focus-visible {\r\n  outline: none;\r\n  color: var(--_mono-file-upload-text);\r\n  --_mono-file-upload-remove-ring: 0 0 0 var(--_mono-file-upload-ring-width)\r\n    color-mix(in oklab, var(--_mono-file-upload-ring-color) var(--_mono-file-upload-ring-alpha), transparent);\r\n}\r\n\r\n:where([mono-file-upload]) [mono-remove] [mono-glyph] {\r\n  display: block;\r\n  width: calc(var(--mono-spacing) * 4);\r\n  height: calc(var(--mono-spacing) * 4);\r\n  flex-shrink: 0;\r\n  color: inherit;\r\n}\r\n\r\n:where([mono-file-upload]) [mono-remove] [mono-glyph] > svg {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n[mono-file-upload][mono-disabled] [mono-remove] {\r\n  opacity: 0.5;\r\n  pointer-events: none;\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   — text-sm text-muted-foreground leading-normal font-normal */\r\n:where([mono-file-upload]) [mono-message] {\r\n  font-size: var(--mono-file-upload-message-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-file-upload-message-line-height, var(--mono-leading-normal));\r\n  color: var(--mono-file-upload-message-color, var(--_mono-file-upload-muted));\r\n}\r\n\r\n/* basecoat@1.0.2 components/field.css .field >> [role='alert'] — the invalid message\r\n   is the destructive one (styles/vega.css gives it text-sm) */\r\n:where([mono-file-upload]) [mono-message=\"invalid\"] {\r\n  color: var(--_mono-file-upload-danger);\r\n}\r\n\r\n:where([mono-file-upload]) [mono-message=\"valid\"] {\r\n  color: var(--_mono-file-upload-success);\r\n}\r\n\r\n:where([mono-file-upload]) [mono-message=\"warning\"] {\r\n  color: var(--_mono-file-upload-warning);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-file-upload]) :is([mono-dropzone], [mono-item], [mono-remove]) {\r\n    transition: none;\r\n  }\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\file-upload\file-upload.css?raw.js
+var file_upload_css_raw_default = "/* =========================================================================\r\n   mono-file-upload — a port of Basecoat's `.empty` (the dropzone) and `.item`\r\n   (the file rows) inside a `.field` (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-file-upload variant=\"compact\" label=\"Docs\" title=\"Drop here\" subtitle=\"PDF, DOCX\">\r\n     <div mono-file-upload mono-variant=\"compact\">\r\n       <label mono-label>Docs</label>\r\n       <label mono-dropzone>\r\n         <span mono-icon><span mono-glyph class=\"i-mdi-cloud-upload-outline\"></span></span>\r\n         <span mono-title>Drop here</span>\r\n         <span mono-subtitle>PDF, DOCX</span>\r\n         <input mono-native type=\"file\" />\r\n       </label>\r\n       <div mono-list>\r\n         <div mono-item>\r\n           <span mono-thumb>…</span>\r\n           <span mono-file><span mono-name>a.pdf</span><span mono-meta>12 KB</span></span>\r\n           <button mono-remove type=\"button\">…</button>\r\n         </div>\r\n       </div>\r\n       <div mono-message=\"helper\">…</div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-variant])` = default,\r\n   no `mono-validation-state` = default). The element renders these on its root\r\n   (both builds) plus the states `mono-disabled` / `mono-required` /\r\n   `mono-multiple` / `mono-no-dragdrop` (drag-drop is ON by default, so the\r\n   attribute marks the exception) and the live `mono-dragover`. The old\r\n   classes (`.mono-file-upload.compact.invalid`) are still emitted as inert\r\n   hooks until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-file-upload]              ≡ .field (flex w-full flex-col gap-3)\r\n     [mono-label]                    ≡ .field > label / .label (text-sm leading-snug font-medium)\r\n     [mono-dropzone]                 ≡ .empty (flex flex-col items-center justify-center text-center\r\n                                       text-balance, gap-4 rounded-lg border-dashed p-12) — the border\r\n                                       WIDTH is the `border` utility upstream puts in the markup, and\r\n                                       the gap is `.empty > header`'s gap-2 because our title and\r\n                                       subtext are flat siblings, not a nested <header>\r\n     [mono-icon]                     ≡ .empty figure + .empty figure:has(> svg:only-child)\r\n                                       (mb-2, bg-muted text-foreground size-10 rounded-lg, glyph size-6)\r\n     [mono-title]                    ≡ .empty :is(h2, h3, h4) (text-lg font-medium tracking-tight)\r\n     [mono-subtitle]/[mono-subtext]  ≡ .empty > header > p (text-sm/relaxed text-muted-foreground)\r\n     [mono-native]                   ≡ .field > input[type='file'] — HIDDEN here: the whole dropzone\r\n                                       is the picker, so the native control never shows\r\n     [mono-list]                     ≡ .item-group (flex w-full flex-col, gap-2.5 beside sm items)\r\n     [mono-item]                     ≡ .item[data-variant='outline'][data-size='sm']\r\n                                       (flex flex-wrap items-center border-border rounded-md text-sm,\r\n                                        gap-2.5 px-3 py-2.5, transition-colors)\r\n     [mono-thumb]                    ≡ .item > figure:has(> img) at sm (size-8 rounded-sm overflow-hidden,\r\n                                       img size-full object-cover) + figure:has(> svg:only-child) (glyph size-4)\r\n     [mono-file]                     ≡ .item > section (flex flex-1 flex-col gap-1)\r\n     [mono-name]                     ≡ .item :is(h2, h3, h4) (line-clamp-1 text-sm/snug font-medium)\r\n     [mono-meta]                     ≡ .item p (text-sm/normal text-muted-foreground line-clamp-2)\r\n     [mono-remove]                   ≡ .btn[data-variant='ghost'][data-size='icon-sm']\r\n                                       (size-8 rounded-[min(radius-md,10px)] hover:bg-muted, glyph size-4)\r\n     [mono-message=\"…\"]              ≡ .field > p / .field [role='alert'] (text-sm, destructive when invalid)\r\n     [mono-validation-state=\"invalid\"] ≡ aria-invalid:border-destructive aria-invalid:ring-destructive/20\r\n     [mono-validation-state=\"valid|warning\"] ≡ EXTENSION (the same treatment in --success / --warning)\r\n     [mono-variant=\"compact\"]        ≡ the `.empty` + `.item` metrics the COMPACT styles use\r\n                                       (nova/lyra/mira: .empty p-6, figure size-8 with a size-4 glyph,\r\n                                        title text-sm; rows drop to .item[data-size='xs'])\r\n     [mono-dragover]                 ≡ EXTENSION (the .item focus-visible treatment: border-ring +\r\n                                       ring-[3px] ring-ring/50, plus an accent tint)\r\n     [mono-disabled]                 ≡ .btn disabled:opacity-50\r\n\r\n   Upstream's dropzone is genuinely large — `.empty` is `p-12` — so this port is\r\n   TALLER than the pre-Basecoat uploader (which padded 1.2rem). `compact` is the\r\n   short one, and `--mono-file-upload-dropzone-padding` is one line either way.\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING rule\r\n   is exactly one attribute strong — `:where([mono-file-upload]) [mono-item]` =\r\n   (0,1,0) — so a utility class handed in through `cssClass` wins by source\r\n   order, while the prop and state rules stay heavier and win over it.\r\n\r\n   The two variants own SEPARATE public knobs (`-dropzone-padding` vs\r\n   `-compact-padding`, `-item-padding-x` vs `-compact-item-padding-x`, …): a\r\n   flavor writing one shared knob would repaint both looks at once, which is the\r\n   bug that made every style's `underlined` textarea come out filled.\r\n\r\n   FLAVORS set `--mono-file-upload-{radius,dropzone-padding,dropzone-gap,\r\n   icon-offset,icon-size,icon-glyph-size,icon-radius,title-font-size,\r\n   title-transform,item-radius,item-padding-*,item-gap,list-gap,thumb-size,\r\n   thumb-radius,…}` — the DEFAULT variant's set; `compact` has its own\r\n   `--mono-file-upload-compact-*` twins so one look never repaints the other; every fallback\r\n   here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"^\\.(empty|item)\"`).\r\n   ========================================================================= */\r\n\r\nmono-file-upload {\r\n  display: block;\r\n}\r\n\r\n[mono-file-upload] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-file-upload-text: var(--mono-file-upload-text, var(--foreground));\r\n  --_mono-file-upload-muted: var(--mono-file-upload-muted, var(--muted-foreground));\r\n  /* the accent: the dropzone glyph, and the ring the dragover state paints */\r\n  --_mono-file-upload-primary: var(--mono-file-upload-primary, var(--primary));\r\n  --_mono-file-upload-success: var(--mono-file-upload-success, var(--success));\r\n  --_mono-file-upload-danger: var(--mono-file-upload-danger, var(--destructive));\r\n  --_mono-file-upload-warning: var(--mono-file-upload-warning, var(--warning));\r\n\r\n  /* `-border` is the pre-Basecoat public name for the dropzone edge — kept as\r\n     the fallback so a consumer that set it keeps working */\r\n  --_mono-file-upload-border-color: var(--mono-file-upload-border-color, var(--mono-file-upload-border, var(--border)));\r\n  --_mono-file-upload-border-width: var(--mono-file-upload-border-width, var(--mono-border-width));\r\n  --_mono-file-upload-border-style: var(--mono-file-upload-border-style, dashed);\r\n  /* .empty has no fill of its own; `-background` is the pre-Basecoat name */\r\n  --_mono-file-upload-dropzone-bg: var(--mono-file-upload-dropzone-bg, var(--mono-file-upload-background, transparent));\r\n  /* hover: the ghost treatment (bg-muted, dark:bg-muted/50) */\r\n  --_mono-file-upload-dropzone-hover-bg: var(--mono-file-upload-dropzone-hover-bg, var(--mono-mode-ghost-hover));\r\n  --_mono-file-upload-radius: var(--mono-file-upload-radius, var(--mono-radius-lg));\r\n\r\n  --_mono-file-upload-ring-color: var(--mono-file-upload-ring-color, var(--ring));\r\n  --_mono-file-upload-ring-width: var(--mono-file-upload-ring-width, var(--mono-ring-width));\r\n  --_mono-file-upload-ring-alpha: var(--mono-file-upload-ring-alpha, var(--mono-ring-alpha));\r\n\r\n  /* the icon plate — .empty figure:has(> svg:only-child) is a muted square */\r\n  --_mono-file-upload-icon-bg: var(--mono-file-upload-icon-bg, var(--muted));\r\n  --_mono-file-upload-icon-color: var(--mono-file-upload-icon-color, var(--_mono-file-upload-text));\r\n  --_mono-file-upload-icon-radius: var(--mono-file-upload-icon-radius, var(--mono-radius-lg));\r\n\r\n  /* the file rows — .item[data-variant='outline'] rings, it does not fill.\r\n     `-surface` is the pre-Basecoat name for the row background. */\r\n  --_mono-file-upload-item-bg: var(--mono-file-upload-item-bg, var(--mono-file-upload-surface, transparent));\r\n  --_mono-file-upload-item-border-color: var(--mono-file-upload-item-border-color, var(--border));\r\n  --_mono-file-upload-item-border-width: var(--mono-file-upload-item-border-width, var(--mono-border-width));\r\n  --_mono-file-upload-item-radius: var(--mono-file-upload-item-radius, var(--mono-radius-md));\r\n  --_mono-file-upload-thumb-bg: var(--mono-file-upload-thumb-bg, var(--muted));\r\n  --_mono-file-upload-thumb-radius: var(--mono-file-upload-thumb-radius, var(--mono-radius-sm));\r\n\r\n  /* ── the DEFAULT variant's metrics; `compact` re-points every preset ───────\r\n     basecoat@1.0.2 styles/vega.css .empty — gap-4 rounded-lg border-dashed p-12;\r\n     .empty figure — mb-2; .empty figure:has(> svg:only-child) — size-10 rounded-lg\r\n     with a size-6 glyph; .empty :is(h2,h3,h4) — text-lg; .item[data-size='sm'] —\r\n     gap-2.5 px-3 py-2.5 with a size-8 image figure; .item-group — gap-2.5 */\r\n  --_mono-file-upload-dropzone-padding: var(--_mono-file-upload-dropzone-padding-preset, calc(var(--mono-spacing) * 12));\r\n  --_mono-file-upload-dropzone-gap: var(--_mono-file-upload-dropzone-gap-preset, calc(var(--mono-spacing) * 2));\r\n  --_mono-file-upload-icon-offset: var(--_mono-file-upload-icon-offset-preset, calc(var(--mono-spacing) * 4));\r\n  --_mono-file-upload-icon-size: var(--_mono-file-upload-icon-size-preset, calc(var(--mono-spacing) * 10));\r\n  --_mono-file-upload-icon-glyph-size: var(--_mono-file-upload-icon-glyph-size-preset, calc(var(--mono-spacing) * 6));\r\n  --_mono-file-upload-title-font-size: var(--_mono-file-upload-title-font-size-preset, var(--mono-text-lg));\r\n  --_mono-file-upload-title-line-height: var(--_mono-file-upload-title-line-height-preset, var(--mono-text-lg--lh));\r\n  --_mono-file-upload-list-gap: var(--_mono-file-upload-list-gap-preset, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-file-upload-item-gap: var(--_mono-file-upload-item-gap-preset, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-file-upload-item-padding-x: var(--_mono-file-upload-item-padding-x-preset, calc(var(--mono-spacing) * 3));\r\n  --_mono-file-upload-item-padding-y: var(--_mono-file-upload-item-padding-y-preset, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-file-upload-file-gap: var(--_mono-file-upload-file-gap-preset, var(--mono-spacing));\r\n  --_mono-file-upload-thumb-size: var(--_mono-file-upload-thumb-size-preset, calc(var(--mono-spacing) * 8));\r\n  --_mono-file-upload-meta-font-size: var(--_mono-file-upload-meta-font-size-preset, var(--mono-text-sm));\r\n\r\n  /* basecoat@1.0.2 components/field.css .field — flex w-full flex-col;\r\n     styles/vega.css .field — gap-3 */\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  gap: var(--mono-file-upload-gap, calc(var(--mono-spacing) * 3));\r\n  color: var(--_mono-file-upload-text);\r\n  font-family: inherit;\r\n}\r\n\r\n[mono-file-upload] *,\r\n[mono-file-upload] *::before,\r\n[mono-file-upload] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* The shadow build renders every region and marks the empty ones; this hides\r\n   them. It must out-specify the region rules below, hence the root attribute. */\r\n[mono-file-upload] :is([mono-label], [mono-icon], [mono-title], [mono-subtitle], [mono-subtext], [mono-list], [mono-message])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Variants — the DEFAULT look, and the compact one\r\n   ========================================= */\r\n\r\n/* `default` is vega's `.empty` + `.item[data-size='sm']`. The knobs are scoped\r\n   to the variant so a flavor can restyle one look without touching the other. */\r\n[mono-file-upload]:not([mono-variant=\"compact\"]) {\r\n  --_mono-file-upload-dropzone-padding-preset: var(--mono-file-upload-dropzone-padding);\r\n  --_mono-file-upload-dropzone-gap-preset: var(--mono-file-upload-dropzone-gap);\r\n  --_mono-file-upload-icon-offset-preset: var(--mono-file-upload-icon-offset);\r\n  --_mono-file-upload-icon-size-preset: var(--mono-file-upload-icon-size);\r\n  --_mono-file-upload-icon-glyph-size-preset: var(--mono-file-upload-icon-glyph-size);\r\n  --_mono-file-upload-title-font-size-preset: var(--mono-file-upload-title-font-size);\r\n  --_mono-file-upload-title-line-height-preset: var(--mono-file-upload-title-line-height);\r\n  --_mono-file-upload-list-gap-preset: var(--mono-file-upload-list-gap);\r\n  --_mono-file-upload-item-gap-preset: var(--mono-file-upload-item-gap);\r\n  --_mono-file-upload-item-padding-x-preset: var(--mono-file-upload-item-padding-x);\r\n  --_mono-file-upload-item-padding-y-preset: var(--mono-file-upload-item-padding-y);\r\n  --_mono-file-upload-file-gap-preset: var(--mono-file-upload-file-gap);\r\n  --_mono-file-upload-thumb-size-preset: var(--mono-file-upload-thumb-size);\r\n  --_mono-file-upload-meta-font-size-preset: var(--mono-file-upload-meta-font-size);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/nova.css .empty — rounded-xl p-6;\r\n   styles/nova.css .empty figure:has(> svg:only-child) — size-8 with a size-4 glyph;\r\n   styles/nova.css .empty :is(h2, h3, h4) — text-sm;\r\n   styles/vega.css .item[data-size='xs'] — gap-2 px-2.5 py-2;\r\n   styles/vega.css .item[data-size='xs'] > section — gap-0;\r\n   styles/vega.css .item[data-size='xs'] p — text-xs;\r\n   styles/vega.css .item[data-size='xs'] > figure:has(> img) — size-6;\r\n   styles/vega.css .item-group:has(> .item[data-size='xs']) — gap-2\r\n   — DEVIATION: the radius stays the default variant's (a flavor owns that axis). */\r\n[mono-file-upload][mono-variant=\"compact\"] {\r\n  --_mono-file-upload-dropzone-padding-preset: var(--mono-file-upload-compact-padding, calc(var(--mono-spacing) * 6));\r\n  --_mono-file-upload-dropzone-gap-preset: var(--mono-file-upload-compact-gap, var(--mono-spacing));\r\n  --_mono-file-upload-icon-offset-preset: var(--mono-file-upload-compact-icon-offset, calc(var(--mono-spacing) * 3));\r\n  --_mono-file-upload-icon-size-preset: var(--mono-file-upload-compact-icon-size, calc(var(--mono-spacing) * 8));\r\n  --_mono-file-upload-icon-glyph-size-preset: var(--mono-file-upload-compact-icon-glyph-size, calc(var(--mono-spacing) * 4));\r\n  --_mono-file-upload-title-font-size-preset: var(--mono-file-upload-compact-title-font-size, var(--mono-text-sm));\r\n  --_mono-file-upload-title-line-height-preset: var(--mono-file-upload-compact-title-line-height, var(--mono-leading-snug));\r\n  --_mono-file-upload-list-gap-preset: var(--mono-file-upload-compact-list-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-file-upload-item-gap-preset: var(--mono-file-upload-compact-item-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-file-upload-item-padding-x-preset: var(--mono-file-upload-compact-item-padding-x, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-file-upload-item-padding-y-preset: var(--mono-file-upload-compact-item-padding-y, calc(var(--mono-spacing) * 2));\r\n  --_mono-file-upload-file-gap-preset: var(--mono-file-upload-compact-file-gap, 0px);\r\n  --_mono-file-upload-thumb-size-preset: var(--mono-file-upload-compact-thumb-size, calc(var(--mono-spacing) * 6));\r\n  --_mono-file-upload-meta-font-size-preset: var(--mono-file-upload-compact-meta-font-size, var(--mono-text-xs));\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 — text-sm leading-snug font-medium */\r\n:where([mono-file-upload]) > [mono-label] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  gap: calc(var(--mono-spacing) * 1);\r\n  font-size: var(--mono-file-upload-label-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-file-upload-label-line-height, var(--mono-leading-snug));\r\n  font-weight: var(--mono-file-upload-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  color: var(--mono-file-upload-label-color, var(--_mono-file-upload-text));\r\n}\r\n\r\n[mono-file-upload][mono-validation-state=\"invalid\"] > [mono-label] {\r\n  color: var(--mono-file-upload-label-color, var(--_mono-file-upload-danger));\r\n}\r\n\r\n:where([mono-file-upload]) [mono-required-mark] {\r\n  color: var(--mono-file-upload-required-color, var(--destructive));\r\n}\r\n\r\n/* =========================================\r\n   Dropzone — `.empty`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/empty.css .empty — flex w-full min-w-0 flex-col\r\n   items-center justify-center text-center text-balance;\r\n   styles/vega.css .empty — gap-4 rounded-lg border-dashed p-12\r\n   — the border WIDTH comes from the `border` utility upstream writes in markup,\r\n   so it is a knob here; `transition-[color,box-shadow]` is the field treatment. */\r\n:where([mono-file-upload]) [mono-dropzone] {\r\n  display: flex;\r\n  width: 100%;\r\n  min-width: 0;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  text-align: center;\r\n  text-wrap: balance;\r\n  gap: var(--_mono-file-upload-dropzone-gap);\r\n  padding: var(--_mono-file-upload-dropzone-padding);\r\n  border: var(--_mono-file-upload-border-width) var(--_mono-file-upload-border-style)\r\n    var(--_mono-file-upload-border-color);\r\n  border-radius: var(--_mono-file-upload-radius);\r\n  background-color: var(--_mono-file-upload-dropzone-bg);\r\n  cursor: pointer;\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  /* the two-slot stack the ports share: the ring is written by a state rule */\r\n  box-shadow: var(--_mono-file-upload-ring, 0 0 #0000);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted\r\n   (dark:hover:bg-muted/50), carried by --mono-mode-ghost-hover */\r\n@media (hover: hover) {\r\n  [mono-file-upload]:not([mono-disabled]) [mono-dropzone]:hover {\r\n    border-color: var(--mono-file-upload-hover-border-color, var(--_mono-file-upload-primary));\r\n    background-color: var(--_mono-file-upload-dropzone-hover-bg);\r\n  }\r\n}\r\n\r\n/* EXTENSION — the drag-over state wears the `.item` focus treatment\r\n   (basecoat@1.0.2 components/item.css .item — focus-visible:border-ring\r\n   focus-visible:ring-[3px] focus-visible:ring-ring/50) in the accent colour */\r\n[mono-file-upload][mono-dragover] [mono-dropzone] {\r\n  border-color: var(--_mono-file-upload-primary);\r\n  border-style: solid;\r\n  background-color: color-mix(in oklab, var(--_mono-file-upload-primary) var(--mono-mode-tint), transparent);\r\n  --_mono-file-upload-ring: 0 0 0 var(--_mono-file-upload-ring-width)\r\n    color-mix(in oklab, var(--_mono-file-upload-primary) var(--_mono-file-upload-ring-alpha), transparent);\r\n}\r\n\r\n/* basecoat@1.0.2 components/button.css .btn — disabled:pointer-events-none disabled:opacity-50 */\r\n[mono-file-upload][mono-disabled] [mono-dropzone] {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > textarea, .textarea —\r\n   aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:ring-3\r\n   (dark: destructive/50 and /40, carried by the mode tokens) */\r\n[mono-file-upload][mono-validation-state=\"invalid\"] [mono-dropzone] {\r\n  border-color: var(--mono-file-upload-invalid-border-color, var(--mono-mode-invalid-border));\r\n  --_mono-file-upload-ring: 0 0 0 var(--_mono-file-upload-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* EXTENSION — the same treatment in --success / --warning */\r\n[mono-file-upload][mono-validation-state=\"valid\"] [mono-dropzone] {\r\n  border-color: var(--_mono-file-upload-success);\r\n  --_mono-file-upload-ring: 0 0 0 var(--_mono-file-upload-ring-width)\r\n    color-mix(in oklab, var(--_mono-file-upload-success) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n[mono-file-upload][mono-validation-state=\"warning\"] [mono-dropzone] {\r\n  border-color: var(--_mono-file-upload-warning);\r\n  --_mono-file-upload-ring: 0 0 0 var(--_mono-file-upload-ring-width)\r\n    color-mix(in oklab, var(--_mono-file-upload-warning) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n/* =========================================\r\n   Dropzone contents — figure, title, subtext\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .empty figure — mb-2;\r\n   styles/vega.css .empty figure:has(> svg:only-child) — bg-muted text-foreground\r\n   flex size-10 shrink-0 items-center justify-center rounded-lg\r\n   — DEVIATION: keyed off the part attribute, not `:has(> svg:only-child)`: the\r\n   light build paints the glyph with an `i-*` MASK span and the shadow build with\r\n   an inline <svg>, so a shape test would style one build and not the other. */\r\n:where([mono-file-upload]) [mono-icon] {\r\n  display: flex;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-file-upload-icon-size);\r\n  height: var(--_mono-file-upload-icon-size);\r\n  margin-bottom: var(--_mono-file-upload-icon-offset);\r\n  border-radius: var(--_mono-file-upload-icon-radius);\r\n  background-color: var(--_mono-file-upload-icon-bg);\r\n  color: var(--_mono-file-upload-icon-color);\r\n  font-size: var(--_mono-file-upload-icon-glyph-size);\r\n  line-height: 1;\r\n  overflow: hidden;\r\n}\r\n\r\n/* `[&_svg:not([class*='size-'])]:size-6` — our glyph is a mask span (light) or an\r\n   inline SVG (shadow); both are sized by the same box. Only [mono-glyph] is\r\n   touched: a slotted custom icon is light DOM in BOTH builds, so a bare `svg`\r\n   descendant rule would reach it in light and not in shadow. */\r\n:where([mono-file-upload]) [mono-icon] [mono-glyph] {\r\n  display: block;\r\n  width: var(--_mono-file-upload-icon-glyph-size);\r\n  height: var(--_mono-file-upload-icon-glyph-size);\r\n  flex-shrink: 0;\r\n  color: inherit;\r\n}\r\n\r\n:where([mono-file-upload]) [mono-icon] [mono-glyph] > 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 .empty :is(h2, h3, h4) — text-lg font-medium tracking-tight */\r\n:where([mono-file-upload]) [mono-title] {\r\n  font-size: var(--_mono-file-upload-title-font-size);\r\n  line-height: var(--_mono-file-upload-title-line-height);\r\n  font-weight: var(--mono-file-upload-title-font-weight, var(--mono-font-weight-medium));\r\n  letter-spacing: var(--mono-file-upload-title-tracking, var(--mono-tracking-tight));\r\n  text-transform: var(--mono-file-upload-title-transform, none);\r\n  color: var(--_mono-file-upload-text);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .empty > header > p — text-muted-foreground text-sm/relaxed\r\n   `mono-subtitle` is the current part name; the element still emits the old\r\n   `mono-subtext` beside it, and hand-written markup may use either. The CSS vars\r\n   keep their `-subtext-` names. */\r\n:where([mono-file-upload]) :is([mono-subtitle], [mono-subtext]) {\r\n  font-size: var(--mono-file-upload-subtext-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-file-upload-subtext-line-height, var(--mono-leading-relaxed));\r\n  color: var(--mono-file-upload-subtext-color, var(--_mono-file-upload-muted));\r\n}\r\n\r\n/* The whole dropzone IS the picker — the native control never shows. */\r\n:where([mono-file-upload]) [mono-native] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   File list — `.item-group` and `.item`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/item.css .item-group — flex w-full flex-col;\r\n   styles/vega.css .item-group:has(> .item[data-size='sm']) — gap-2.5 */\r\n:where([mono-file-upload]) [mono-list] {\r\n  display: flex;\r\n  width: 100%;\r\n  flex-direction: column;\r\n  gap: var(--_mono-file-upload-list-gap);\r\n}\r\n\r\n/* basecoat@1.0.2 components/item.css .item — flex w-full flex-wrap items-center\r\n   border transition-colors duration-100 outline-none;\r\n   styles/vega.css .item — rounded-md border text-sm;\r\n   styles/vega.css .item[data-variant='outline'] — border-border;\r\n   styles/vega.css .item[data-size='sm'] — gap-2.5 px-3 py-2.5 */\r\n:where([mono-file-upload]) [mono-item] {\r\n  display: flex;\r\n  width: 100%;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: var(--_mono-file-upload-item-gap);\r\n  padding-inline: var(--_mono-file-upload-item-padding-x);\r\n  padding-block: var(--_mono-file-upload-item-padding-y);\r\n  border: var(--_mono-file-upload-item-border-width) solid var(--_mono-file-upload-item-border-color);\r\n  border-radius: var(--_mono-file-upload-item-radius);\r\n  background-color: var(--_mono-file-upload-item-bg);\r\n  font-size: var(--mono-file-upload-item-font-size, var(--mono-text-sm));\r\n  transition:\r\n    background-color 100ms var(--mono-ease),\r\n    border-color 100ms var(--mono-ease);\r\n  outline: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .item[data-size='sm'] > figure:has(> img) — size-8;\r\n   styles/vega.css .item > figure:has(> img) — overflow-hidden rounded-sm;\r\n   components/item.css .item > figure:has(> img) — [&_img]:size-full [&_img]:object-cover;\r\n   styles/vega.css .item > figure:has(> svg:only-child) — a size-4 glyph */\r\n:where([mono-file-upload]) [mono-thumb] {\r\n  display: inline-flex;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-file-upload-thumb-size);\r\n  height: var(--_mono-file-upload-thumb-size);\r\n  overflow: hidden;\r\n  border-radius: var(--_mono-file-upload-thumb-radius);\r\n  background-color: var(--_mono-file-upload-thumb-bg);\r\n  color: var(--mono-file-upload-thumb-color, var(--_mono-file-upload-muted));\r\n  font-size: calc(var(--mono-spacing) * 4);\r\n  line-height: 1;\r\n}\r\n\r\n:where([mono-file-upload]) [mono-thumb] > img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n}\r\n\r\n:where([mono-file-upload]) [mono-thumb] [mono-glyph] {\r\n  display: block;\r\n  width: calc(var(--mono-spacing) * 4);\r\n  height: calc(var(--mono-spacing) * 4);\r\n  flex-shrink: 0;\r\n}\r\n\r\n:where([mono-file-upload]) [mono-thumb] [mono-glyph] > svg {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* basecoat@1.0.2 components/item.css .item > section — flex flex-1 flex-col;\r\n   styles/vega.css .item > section — gap-1 (gap-0 at data-size='xs') */\r\n:where([mono-file-upload]) [mono-file] {\r\n  display: flex;\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n  flex-direction: column;\r\n  gap: var(--_mono-file-upload-file-gap);\r\n}\r\n\r\n/* basecoat@1.0.2 components/item.css .item :is(h2, h3, h4) — line-clamp-1 flex\r\n   w-fit items-center;\r\n   styles/vega.css .item :is(h2, h3, h4) — text-sm leading-snug font-medium\r\n   — DEVIATION: one line ellipsised with `text-overflow`, not `line-clamp-1`: a\r\n   file name is a single line and must truncate mid-word, which the WebKit box\r\n   clamp does not do. */\r\n:where([mono-file-upload]) [mono-name] {\r\n  max-width: 100%;\r\n  font-size: var(--mono-file-upload-name-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-file-upload-name-line-height, var(--mono-leading-snug));\r\n  font-weight: var(--mono-file-upload-name-font-weight, var(--mono-font-weight-medium));\r\n  color: var(--_mono-file-upload-text);\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n/* basecoat@1.0.2 components/item.css .item p — text-muted-foreground line-clamp-2\r\n   text-start font-normal;\r\n   styles/vega.css .item p — text-sm leading-normal (text-xs at data-size='xs') */\r\n:where([mono-file-upload]) [mono-meta] {\r\n  font-size: var(--_mono-file-upload-meta-font-size);\r\n  line-height: var(--mono-file-upload-meta-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-file-upload-meta-color, var(--_mono-file-upload-muted));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted\r\n   hover:text-foreground (dark:hover:bg-muted/50);\r\n   styles/vega.css .btn[data-size='icon-sm'] — size-8 rounded-[min(var(--radius-md),10px)]\r\n   — DEVIATION: the hover ink is the DANGER role, not `--foreground`: this ghost\r\n   button deletes the row it sits in. */\r\n:where([mono-file-upload]) [mono-remove] {\r\n  display: inline-flex;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--mono-file-upload-remove-size, calc(var(--mono-spacing) * 8));\r\n  height: var(--mono-file-upload-remove-size, calc(var(--mono-spacing) * 8));\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--mono-file-upload-remove-radius, min(var(--mono-radius-md), 10px));\r\n  background: transparent;\r\n  color: var(--_mono-file-upload-muted);\r\n  font: inherit;\r\n  font-size: calc(var(--mono-spacing) * 4);\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  transition:\r\n    color var(--mono-duration) var(--mono-ease),\r\n    background-color var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease);\r\n  box-shadow: var(--_mono-file-upload-remove-ring, 0 0 #0000);\r\n}\r\n\r\n@media (hover: hover) {\r\n  :where([mono-file-upload]) [mono-remove]:hover {\r\n    background-color: var(--mono-mode-ghost-hover);\r\n    color: var(--_mono-file-upload-danger);\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 components/item.css .item — focus-visible:border-ring\r\n   focus-visible:ring-[3px] focus-visible:ring-ring/50 */\r\n:where([mono-file-upload]) [mono-remove]:focus-visible {\r\n  outline: none;\r\n  color: var(--_mono-file-upload-text);\r\n  --_mono-file-upload-remove-ring: 0 0 0 var(--_mono-file-upload-ring-width)\r\n    color-mix(in oklab, var(--_mono-file-upload-ring-color) var(--_mono-file-upload-ring-alpha), transparent);\r\n}\r\n\r\n:where([mono-file-upload]) [mono-remove] [mono-glyph] {\r\n  display: block;\r\n  width: calc(var(--mono-spacing) * 4);\r\n  height: calc(var(--mono-spacing) * 4);\r\n  flex-shrink: 0;\r\n  color: inherit;\r\n}\r\n\r\n:where([mono-file-upload]) [mono-remove] [mono-glyph] > svg {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n[mono-file-upload][mono-disabled] [mono-remove] {\r\n  opacity: 0.5;\r\n  pointer-events: none;\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   — text-sm text-muted-foreground leading-normal font-normal */\r\n:where([mono-file-upload]) [mono-message] {\r\n  font-size: var(--mono-file-upload-message-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-file-upload-message-line-height, var(--mono-leading-normal));\r\n  color: var(--mono-file-upload-message-color, var(--_mono-file-upload-muted));\r\n}\r\n\r\n/* basecoat@1.0.2 components/field.css .field >> [role='alert'] — the invalid message\r\n   is the destructive one (styles/vega.css gives it text-sm) */\r\n:where([mono-file-upload]) [mono-message=\"invalid\"] {\r\n  color: var(--_mono-file-upload-danger);\r\n}\r\n\r\n:where([mono-file-upload]) [mono-message=\"valid\"] {\r\n  color: var(--_mono-file-upload-success);\r\n}\r\n\r\n:where([mono-file-upload]) [mono-message=\"warning\"] {\r\n  color: var(--_mono-file-upload-warning);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-file-upload]) :is([mono-dropzone], [mono-item], [mono-remove]) {\r\n    transition: none;\r\n  }\r\n}\r\n";
+
 //#endregion
 //#region src/components/file-upload/mono-file-upload.shadow.ts
 /** The glyphs this build draws itself — the light build's defaults, verbatim. */
-var DEFAULT_ICON = "i-mdi-cloud-upload-outline";
-var REMOVE_ICON = "i-mdi-close";
-var FALLBACK_FILE_ICON = "i-mdi-file";
-var SHADOW_EXTRA_CSS = `
+const DEFAULT_ICON = "i-mdi-cloud-upload-outline";
+const REMOVE_ICON = "i-mdi-close";
+const FALLBACK_FILE_ICON = "i-mdi-file";
+const SHADOW_EXTRA_CSS = `
 [mono-icon] slot[name="icon"] { display: contents; }
 `;
-var MonoFileUploadShadow = class MonoFileUploadShadow extends withShadowUtilityStyles(MonoFileUploadCore(LitElement)) {
+let MonoFileUploadShadow = class MonoFileUploadShadow extends withShadowUtilityStyles(MonoFileUploadCore(LitElement)) {
 	static {
 		this.disableWarning?.("change-in-update");
 	}
 	static {
-		this.styles = [unsafeCSS(toShadowCss(file_upload_default, {
+		this.styles = [unsafeCSS(toShadowCss(file_upload_css_raw_default, {
 			host: "mono-file-upload",
 			append: SHADOW_EXTRA_CSS
 		}))];
@@ -691,8 +695,10 @@ var MonoFileUploadShadow = class MonoFileUploadShadow extends withShadowUtilityS
     ><slot name="subtitle" @slotchange=${this._scanSlots}>${this.subtitle || nothing}</slot></div>`;
 	}
 	_renderDropzoneIcon() {
-		return html`<div class=${this._cls("mono-file-upload-icon", "icon")} mono-icon aria-hidden="true">
-      <slot name="icon">${this.icon && !isIconifyClass(this.icon) ? html`${this.icon}` : this._renderIconifyGlyph(this.icon) ?? this._renderDefaultGlyph()}</slot>
+		const cls = this._cls("mono-file-upload-icon", "icon");
+		const fallback = this.icon && !isIconifyClass(this.icon) ? html`${this.icon}` : this._renderIconifyGlyph(this.icon) ?? this._renderDefaultGlyph();
+		return html`<div class=${cls} mono-icon aria-hidden="true">
+      <slot name="icon">${fallback}</slot>
     </div>`;
 	}
 	_renderDefaultGlyph() {
@@ -727,5 +733,6 @@ var MonoFileUploadShadow = class MonoFileUploadShadow extends withShadowUtilityS
 	}
 };
 MonoFileUploadShadow = __decorate([customElement("mono-shadow-file-upload")], MonoFileUploadShadow);
+
 //#endregion
-export { MonoFileUploadCore, MonoFileUploadShadow, createUploadItem, formatFileSize, getFileIcon, validateFileUploadProps };
+export { MonoFileUploadCore, MonoFileUploadShadow, createUploadItem, formatFileSize, getFileIcon, validateFileUploadProps };

package/dist/ui/shadow/filter.js

@@ -1,14 +1,15 @@
-import { a as __decorate, c as defineHybridPropAlias, f as customElement, l as defineHybridPropAliases, n as adoptIconStyles, r as toShadowCss, t as flushSsrHydration } from "../../hydration-flush-RB5Tz5nl.js";
-import { t as dispatchMonoEvent } from "../../mono-event-Bi1qP9uN.js";
-import { t as buildSizeStyle } from "../../css-size-DhHSVZJK.js";
-import { n as detachEventHandlers, t as applyProps } from "../../element-props-CLB6yvbm.js";
-import { c as splitMulti, d as OPERATOR_ARITY, l as treeToArray, m as operatorsFor, n as arrayToTree, s as odataStringToArray, t as arrayToODataString, u as DEFAULT_TEXTS } from "../../filter-odata-C1vSGZaY.js";
-import { t as monoFilterBuilder } from "../../filter-builder-CE4zE0V5.js";
+import { a as __decorate, c as defineHybridPropAlias, f as customElement, l as defineHybridPropAliases, n as adoptIconStyles, r as toShadowCss, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
+import { t as buildSizeStyle } from "../../css-size-DWAPgQdT.js";
+import { n as detachEventHandlers, t as applyProps } from "../../element-props-xvw0EB7H.js";
+import { c as splitMulti, d as OPERATOR_ARITY, l as treeToArray, m as operatorsFor, n as arrayToTree, s as odataStringToArray, t as arrayToODataString, u as DEFAULT_TEXTS } from "../../filter-odata-Bi27XUpQ.js";
+import { t as monoFilterBuilder } from "../../filter-builder-B6Y2mmbM.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
+
 //#region src/components/filter/filter-builder-core.ts
-var GROUP_OPS = [
+const GROUP_OPS = [
 	"and",
 	"or",
 	"notAnd",
@@ -29,7 +30,7 @@ var GROUP_OPS = [
 * element (`mono-table-search` set that precedent), so the controls match the rest
 * of the library without a cross-element dependency.
 */
-var MonoFilterBuilderCore = (superClass) => {
+const MonoFilterBuilderCore = (superClass) => {
 	class MonoFilterBuilderCoreClass extends superClass {
 		constructor(...args) {
 			super(...args);
@@ -376,14 +377,16 @@ var MonoFilterBuilderCore = (superClass) => {
 	__decorate([state()], MonoFilterBuilderCoreClass.prototype, "_tick", void 0);
 	return MonoFilterBuilderCoreClass;
 };
+
 //#endregion
-//#region src/components/filter/filter.css?raw
-var filter_default = "/* =========================================================================\r\n   mono-filter-builder — inline OData filter builder, a Basecoat EXTENSION\r\n\r\n   Upstream has no filter builder. Every surface here borrows the shape of the\r\n   Basecoat control it most resembles — the rule's field / operator / value\r\n   controls are `.field > select` and `.input`, Apply is `.btn`, Clear is\r\n   `.btn[data-variant='outline']`, the trash and \"add nested\" toggles are\r\n   `.btn[data-variant='ghost'][data-size='icon']`, and \"Add rule\" / \"Add group\"\r\n   are `.btn[data-variant='link']` — cited where each does.\r\n\r\n   The controls are styled HERE rather than by nesting three `<mono-input>`s per\r\n   row: that would couple this sheet to another component's PRIVATE resolvers.\r\n   They read the input's, select's and button's PUBLIC knobs instead —\r\n   `--mono-input-outline-radius`, `--mono-button-<size>-radius`,\r\n   `--mono-control-height-<size>` — which is exactly what a flavour writes, so\r\n   an `xs` builder matches an `xs` field and maia's pill, sera's square and\r\n   lyra's `text-xs` all arrive here by construction. There are no per-flavour\r\n   deltas for this component on purpose; there is nothing for them to drift from.\r\n\r\n   Styling is by ATTRIBUTE: the root is `[mono-filter-builder]` with `mono-size`\r\n   (`sm` is the default and emits nothing), and every part is family-unique\r\n   (`[mono-filter-row]`, `[mono-filter-control]`, …) so it needs no scoping and\r\n   cannot collide with the table's `[mono-th-filter-*]` / `[mono-search-filter-*]`.\r\n   The old classes are still emitted as inert hooks until 2.0.\r\n\r\n   Specificity: a part's resting rule is one attribute — (0,1,0) — so a\r\n   `cssClass` utility wins by source order; prop and state rules stay heavier.\r\n   ========================================================================= */\r\n\r\nmono-filter-builder,\r\nmono-shadow-filter-builder {\r\n  display: block;\r\n}\r\n\r\n[mono-filter-builder] {\r\n  /* ── ink and surface ────────────────────────────────────────────────────\r\n     Public `--mono-filter-*` → private resolvers (the library-wide pattern):\r\n     set any of them on the element, inline, or a wrapper — they inherit and\r\n     pierce the shadow boundary. */\r\n  --_mono-filter-primary: var(--mono-filter-primary, var(--primary));\r\n  --_mono-filter-on-primary: var(--mono-filter-on-primary, var(--primary-foreground));\r\n  /* the ink of the links and the group operator — upstream's `.btn[data-variant='link']` is `text-primary` */\r\n  --_mono-filter-accent: var(--mono-filter-accent, var(--primary));\r\n  --_mono-filter-text: var(--mono-filter-text, var(--foreground));\r\n  --_mono-filter-muted: var(--mono-filter-muted, var(--muted-foreground));\r\n  /* basecoat@1.0.2 styles/vega.css .field > select, select.select — border-input */\r\n  --_mono-filter-border: var(--mono-filter-border, var(--input));\r\n  /* the guide down a nested group — the page border, not the control edge */\r\n  --_mono-filter-guide: var(--mono-filter-guide, var(--border));\r\n  /* a control is `bg-transparent` upstream (`dark:bg-input/30` on the dark side) */\r\n  --_mono-filter-surface: var(--mono-filter-surface, var(--mono-mode-surface, transparent));\r\n  --_mono-filter-ring: var(--mono-filter-ring, var(--ring));\r\n  --_mono-filter-danger: var(--mono-filter-danger, var(--destructive));\r\n  --_mono-filter-indent: var(--mono-filter-indent, 1.25rem);\r\n\r\n  /* ── the size scale — sm on the unqualified root ON PURPOSE ─────────────\r\n     basecoat@1.0.2 styles/vega.css .btn[data-size='sm'] — h-8 gap-1 px-2.5 rounded-[min(var(--radius-md),10px)]\r\n     The metrics read the SAME public knobs mono-input / mono-select /\r\n     mono-button consume, so a flavour that retunes a field retunes these. */\r\n  --_mono-filter-height: var(--mono-filter-height-sm, var(--mono-input-height-sm, var(--mono-control-height-sm)));\r\n  --_mono-filter-font: var(--mono-filter-font-sm, var(--mono-input-font-sm, var(--mono-input-font-md, var(--mono-text-sm))));\r\n  /* outline → the field's own radius → the scale: lyra squares a field through\r\n     `--mono-input-radius`, sera and maia through `--mono-input-outline-radius` */\r\n  --_mono-filter-radius: var(--mono-filter-radius, var(--mono-input-outline-radius, var(--mono-input-radius, var(--mono-radius-md))));\r\n  --_mono-filter-btn-radius: var(--mono-filter-btn-radius-sm, var(--mono-button-sm-radius, var(--mono-radius-md)));\r\n  --_mono-filter-icon: var(--mono-filter-icon-sm, 0.875rem);\r\n  --_mono-filter-gap: var(--mono-filter-gap, calc(var(--mono-spacing) * 2));\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: calc(var(--_mono-filter-gap) * 1.5);\r\n  width: 100%;\r\n  /* Allow the rules region to shrink/scroll inside a bounded height. */\r\n  min-height: 0;\r\n  font-family: inherit;\r\n  color: var(--_mono-filter-text);\r\n  box-sizing: border-box;\r\n}\r\n\r\n[mono-filter-builder][mono-size=\"xs\"] {\r\n  --_mono-filter-height: var(--mono-filter-height-xs, var(--mono-input-height-xs, var(--mono-control-height-xs)));\r\n  --_mono-filter-font: var(--mono-filter-font-xs, var(--mono-input-font-xs, var(--mono-text-xs)));\r\n  --_mono-filter-btn-radius: var(--mono-filter-btn-radius-xs, var(--mono-button-xs-radius, var(--mono-radius-md)));\r\n  --_mono-filter-icon: var(--mono-filter-icon-xs, 0.7rem);\r\n}\r\n[mono-filter-builder][mono-size=\"md\"] {\r\n  --_mono-filter-height: var(--mono-filter-height-md, var(--mono-input-height-md, var(--mono-control-height-md)));\r\n  --_mono-filter-font: var(--mono-filter-font-md, var(--mono-input-font-md, var(--mono-text-sm)));\r\n  --_mono-filter-btn-radius: var(--mono-filter-btn-radius-md, var(--mono-button-md-radius, var(--mono-radius-md)));\r\n  --_mono-filter-icon: var(--mono-filter-icon-md, 1rem);\r\n}\r\n[mono-filter-builder][mono-size=\"lg\"] {\r\n  --_mono-filter-height: var(--mono-filter-height-lg, var(--mono-input-height-lg, var(--mono-control-height-lg)));\r\n  --_mono-filter-font: var(--mono-filter-font-lg, var(--mono-input-font-lg, var(--mono-input-font-md, var(--mono-text-sm))));\r\n  --_mono-filter-btn-radius: var(--mono-filter-btn-radius-lg, var(--mono-button-lg-radius, var(--mono-radius-md)));\r\n  --_mono-filter-icon: var(--mono-filter-icon-lg, 1.125rem);\r\n}\r\n[mono-filter-builder][mono-size=\"xl\"] {\r\n  --_mono-filter-height: var(--mono-filter-height-xl, var(--mono-input-height-xl, var(--mono-control-height-xl)));\r\n  --_mono-filter-font: var(--mono-filter-font-xl, var(--mono-input-font-xl, var(--mono-input-font-md, var(--mono-text-base))));\r\n  --_mono-filter-btn-radius: var(--mono-filter-btn-radius-xl, var(--mono-button-xl-radius, var(--mono-radius-md)));\r\n  --_mono-filter-icon: var(--mono-filter-icon-xl, 1.25rem);\r\n}\r\n[mono-filter-builder][mono-size=\"xxl\"] {\r\n  --_mono-filter-height: var(--mono-filter-height-xxl, var(--mono-input-height-xxl, var(--mono-control-height-xxl)));\r\n  --_mono-filter-font: var(--mono-filter-font-xxl, var(--mono-input-font-xxl, var(--mono-input-font-md, var(--mono-text-base))));\r\n  --_mono-filter-btn-radius: var(--mono-filter-btn-radius-xxl, var(--mono-button-xxl-radius, var(--mono-radius-md)));\r\n  --_mono-filter-icon: var(--mono-filter-icon-xxl, 1.375rem);\r\n}\r\n\r\n[mono-filter-builder] *,\r\n[mono-filter-builder] *::before,\r\n[mono-filter-builder] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* ── Scroll layout ─────────────────────────────────────────────────────────\r\n   Apply/Clear stay pinned at the top, Add rule/group at the bottom; the ROOT\r\n   group is the only scroll region, so a bounded `height` / `max-height` scrolls\r\n   JUST the rules. (Nested groups are deeper, so the child combinator skips them.) */\r\n[mono-filter-builder] > [mono-filter-actions],\r\n[mono-filter-builder] > [mono-filter-add] {\r\n  flex: 0 0 auto;\r\n}\r\n[mono-filter-builder] > [mono-filter-group] {\r\n  flex: 1 1 auto;\r\n  min-height: 0;\r\n  overflow: auto;\r\n  /* Portaled + anchored: a chained scroll would drag this panel off-screen\r\n     (see `[mono-th-filter-list]`). */\r\n  overscroll-behavior: contain;\r\n  padding-right: calc(var(--mono-spacing) * 1);\r\n}\r\n\r\n/* ── Apply / Clear — ABOVE the rules, not below ─────────────────────────── */\r\n[mono-filter-actions] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-filter-gap);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn — inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-3 disabled:opacity-50 */\r\n[mono-filter-btn] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 0 calc(var(--mono-spacing) * 2.5);\r\n  height: var(--_mono-filter-height);\r\n  border-radius: var(--_mono-filter-btn-radius);\r\n  border: var(--mono-border-width) solid transparent;\r\n  font: inherit;\r\n  font-size: var(--_mono-filter-font);\r\n  font-weight: var(--mono-font-weight-medium);\r\n  white-space: nowrap;\r\n  cursor: pointer;\r\n  transition:\r\n    background-color var(--mono-duration-fast, 150ms) ease,\r\n    color var(--mono-duration-fast, 150ms) ease,\r\n    border-color var(--mono-duration-fast, 150ms) ease;\r\n}\r\n/* basecoat@1.0.2 styles/vega.css .btn:not([data-variant]), .btn[data-variant='primary'] — bg-primary text-primary-foreground hover:bg-primary/90 */\r\n[mono-filter-btn]:not([mono-variant]) {\r\n  background: var(--_mono-filter-primary);\r\n  color: var(--_mono-filter-on-primary);\r\n}\r\n[mono-filter-btn]:not([mono-variant]):hover {\r\n  background: color-mix(in oklab, var(--_mono-filter-primary) 90%, transparent);\r\n}\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='outline'] — border bg-background hover:bg-accent hover:text-accent-foreground */\r\n[mono-filter-btn][mono-variant=\"ghost\"] {\r\n  background: var(--background);\r\n  border-color: var(--_mono-filter-border);\r\n  color: var(--_mono-filter-text);\r\n}\r\n[mono-filter-btn][mono-variant=\"ghost\"]:hover {\r\n  background: var(--accent);\r\n  color: var(--accent-foreground);\r\n}\r\n[mono-filter-btn]:focus-visible {\r\n  outline: none;\r\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--_mono-filter-ring) 50%, transparent);\r\n}\r\n\r\n/* ── Group ──────────────────────────────────────────────────────────────── */\r\n[mono-filter-group] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-filter-gap);\r\n}\r\n/* Nested groups indent; the root sits flush. */\r\n[mono-filter-children] [mono-filter-group] {\r\n  padding-left: var(--_mono-filter-indent);\r\n  border-left: var(--mono-border-width) dashed var(--_mono-filter-guide);\r\n}\r\n[mono-filter-group-head] {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-wrap: wrap;\r\n  gap: calc(var(--_mono-filter-gap) * 0.75);\r\n  font-size: var(--_mono-filter-font);\r\n  color: var(--_mono-filter-muted);\r\n}\r\n[mono-filter-match] {\r\n  white-space: nowrap;\r\n}\r\n[mono-filter-group-actions] {\r\n  display: inline-flex;\r\n  gap: calc(var(--mono-spacing) * 0.5);\r\n  margin-left: auto;\r\n}\r\n\r\n[mono-filter-children] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-filter-gap);\r\n}\r\n\r\n/* ── Rule row ───────────────────────────────────────────────────────────── */\r\n[mono-filter-row] {\r\n  display: grid;\r\n  /* field | operator | value | nested | trash */\r\n  grid-template-columns: minmax(8rem, 1.4fr) minmax(8rem, 1.2fr) minmax(8rem, 2fr) auto auto;\r\n  align-items: center;\r\n  gap: var(--_mono-filter-gap);\r\n}\r\n@media (max-width: 720px) {\r\n  [mono-filter-row] {\r\n    grid-template-columns: 1fr 1fr auto auto;\r\n  }\r\n  [mono-filter-value-cell] {\r\n    grid-column: 1 / -1;\r\n  }\r\n}\r\n\r\n[mono-filter-value-cell],\r\n[mono-filter-range] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: calc(var(--_mono-filter-gap) * 0.75);\r\n  min-width: 0;\r\n}\r\n\r\n/* ── Controls (selects + inputs) ─────────────────────────────────────────── */\r\n/* basecoat@1.0.2 styles/vega.css .field > select, select.select — border-input h-9 rounded-md border bg-transparent py-1 ps-2.5 pe-8 text-sm shadow-xs transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3\r\n   The text input is the same box; the flavour's outline knob decides the corner\r\n   for both, exactly as it does for `<mono-input>` and `<mono-select>`. */\r\n[mono-filter-control] {\r\n  width: 100%;\r\n  min-width: 0;\r\n  height: var(--_mono-filter-height);\r\n  padding: 0 calc(var(--mono-spacing) * 2.5);\r\n  border: var(--mono-border-width) solid var(--_mono-filter-border);\r\n  border-radius: var(--_mono-filter-radius);\r\n  background-color: var(--_mono-filter-surface);\r\n  color: var(--_mono-filter-text);\r\n  font: inherit;\r\n  font-size: var(--_mono-filter-font);\r\n  box-shadow: var(--mono-shadow-xs, none);\r\n  /* stated in both directions: a host page's preflight (Tailwind, UnoCSS) sets\r\n     `appearance: none` on a select and a shadow root escapes it — so without\r\n     this the light build lost its caret and the shadow build kept the native\r\n     one. Upstream draws its own; so does this. */\r\n  appearance: none;\r\n  outline: none;\r\n  transition:\r\n    border-color var(--mono-duration-fast, 150ms) ease,\r\n    box-shadow var(--mono-duration-fast, 150ms) ease;\r\n}\r\n[mono-filter-control]:focus,\r\n[mono-filter-control]:focus-visible {\r\n  border-color: var(--_mono-filter-ring);\r\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--_mono-filter-ring) 50%, transparent);\r\n  outline: none;\r\n}\r\n/* `disabled:opacity-50` */\r\n[mono-filter-control]:disabled {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n}\r\n/* `placeholder:text-muted-foreground` — stated, so a host page's own placeholder\r\n   colour cannot reach a portaled builder */\r\n[mono-filter-control]::placeholder {\r\n  color: var(--_mono-filter-muted);\r\n  opacity: 1;\r\n}\r\n[mono-filter-range] > [mono-filter-control] {\r\n  min-width: 0;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > select, select.select — pe-8 bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.625rem] bg-size-[1rem]\r\n   The caret, drawn the way upstream draws it — the same token the ported\r\n   `<mono-select>` paints with, so it sits at the same place in every flavour. */\r\nselect[mono-filter-control] {\r\n  padding-right: calc(var(--mono-spacing) * 8);\r\n  background-image: var(--chevron-down-icon-50);\r\n  background-repeat: no-repeat;\r\n  background-position: right calc(var(--mono-spacing) * 2.5) center;\r\n  background-size: 1rem;\r\n}\r\n\r\n/* The group operator sits inline in a sentence, so it must NOT grow — otherwise it\r\n   pushes the trailing \"of the following rules:\" to the far edge. Otherwise it\r\n   is a control like every other: bordered, and at the control HEIGHT rather\r\n   than `auto` — a bare select's intrinsic height differs between a page under\r\n   a preflight and a shadow root, which put the shadow build's rows 5px higher. */\r\n[mono-filter-group-op] {\r\n  flex: 0 0 auto;\r\n  width: auto;\r\n  min-width: 6rem;\r\n  color: var(--_mono-filter-accent);\r\n  font-weight: var(--mono-font-weight-semibold);\r\n}\r\n\r\n/* ── Icon buttons ───────────────────────────────────────────────────────── */\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-accent hover:text-accent-foreground */\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-size='icon'] — size-9 */\r\n[mono-filter-icon-btn] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-filter-height);\r\n  height: var(--_mono-filter-height);\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--_mono-filter-btn-radius);\r\n  background: transparent;\r\n  color: var(--_mono-filter-muted);\r\n  line-height: 0;\r\n  cursor: pointer;\r\n  transition:\r\n    color var(--mono-duration-fast, 150ms) ease,\r\n    background-color var(--mono-duration-fast, 150ms) ease;\r\n}\r\n[mono-filter-icon-btn]:hover,\r\n[mono-filter-icon-btn]:focus-visible {\r\n  background: var(--accent);\r\n  color: var(--accent-foreground);\r\n  outline: none;\r\n}\r\n[mono-filter-icon-btn]:focus-visible {\r\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--_mono-filter-ring) 50%, transparent);\r\n}\r\n[mono-filter-icon-btn][mono-danger]:hover,\r\n[mono-filter-icon-btn][mono-danger]:focus-visible {\r\n  color: var(--_mono-filter-danger);\r\n}\r\n[mono-filter-icon-btn] .mono-icon,\r\n[mono-filter-icon-btn] > svg {\r\n  width: var(--_mono-filter-icon);\r\n  height: var(--_mono-filter-icon);\r\n}\r\n\r\n/* ── Add rule / group links ─────────────────────────────────────────────── */\r\n[mono-filter-add] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: calc(var(--_mono-filter-gap) * 2);\r\n}\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='link'] — text-primary underline-offset-4 hover:underline */\r\n[mono-filter-link] {\r\n  padding: 0;\r\n  border: 0;\r\n  background: none;\r\n  font: inherit;\r\n  font-size: var(--_mono-filter-font);\r\n  color: var(--_mono-filter-accent);\r\n  text-underline-offset: 4px;\r\n  cursor: pointer;\r\n}\r\n[mono-filter-link]:hover {\r\n  text-decoration: underline;\r\n}\r\n[mono-filter-link]:focus-visible {\r\n  outline: none;\r\n  border-radius: var(--mono-radius-sm);\r\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--_mono-filter-ring) 50%, transparent);\r\n}\r\n\r\n[mono-filter-empty] {\r\n  padding: calc(var(--mono-spacing) * 1) 0;\r\n  font-size: var(--_mono-filter-font);\r\n  color: var(--_mono-filter-muted);\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\filter\filter.css?raw.js
+var filter_css_raw_default = "/* =========================================================================\r\n   mono-filter-builder — inline OData filter builder, a Basecoat EXTENSION\r\n\r\n   Upstream has no filter builder. Every surface here borrows the shape of the\r\n   Basecoat control it most resembles — the rule's field / operator / value\r\n   controls are `.field > select` and `.input`, Apply is `.btn`, Clear is\r\n   `.btn[data-variant='outline']`, the trash and \"add nested\" toggles are\r\n   `.btn[data-variant='ghost'][data-size='icon']`, and \"Add rule\" / \"Add group\"\r\n   are `.btn[data-variant='link']` — cited where each does.\r\n\r\n   The controls are styled HERE rather than by nesting three `<mono-input>`s per\r\n   row: that would couple this sheet to another component's PRIVATE resolvers.\r\n   They read the input's, select's and button's PUBLIC knobs instead —\r\n   `--mono-input-outline-radius`, `--mono-button-<size>-radius`,\r\n   `--mono-control-height-<size>` — which is exactly what a flavour writes, so\r\n   an `xs` builder matches an `xs` field and maia's pill, sera's square and\r\n   lyra's `text-xs` all arrive here by construction. There are no per-flavour\r\n   deltas for this component on purpose; there is nothing for them to drift from.\r\n\r\n   Styling is by ATTRIBUTE: the root is `[mono-filter-builder]` with `mono-size`\r\n   (`sm` is the default and emits nothing), and every part is family-unique\r\n   (`[mono-filter-row]`, `[mono-filter-control]`, …) so it needs no scoping and\r\n   cannot collide with the table's `[mono-th-filter-*]` / `[mono-search-filter-*]`.\r\n   The old classes are still emitted as inert hooks until 2.0.\r\n\r\n   Specificity: a part's resting rule is one attribute — (0,1,0) — so a\r\n   `cssClass` utility wins by source order; prop and state rules stay heavier.\r\n   ========================================================================= */\r\n\r\nmono-filter-builder,\r\nmono-shadow-filter-builder {\r\n  display: block;\r\n}\r\n\r\n[mono-filter-builder] {\r\n  /* ── ink and surface ────────────────────────────────────────────────────\r\n     Public `--mono-filter-*` → private resolvers (the library-wide pattern):\r\n     set any of them on the element, inline, or a wrapper — they inherit and\r\n     pierce the shadow boundary. */\r\n  --_mono-filter-primary: var(--mono-filter-primary, var(--primary));\r\n  --_mono-filter-on-primary: var(--mono-filter-on-primary, var(--primary-foreground));\r\n  /* the ink of the links and the group operator — upstream's `.btn[data-variant='link']` is `text-primary` */\r\n  --_mono-filter-accent: var(--mono-filter-accent, var(--primary));\r\n  --_mono-filter-text: var(--mono-filter-text, var(--foreground));\r\n  --_mono-filter-muted: var(--mono-filter-muted, var(--muted-foreground));\r\n  /* basecoat@1.0.2 styles/vega.css .field > select, select.select — border-input */\r\n  --_mono-filter-border: var(--mono-filter-border, var(--input));\r\n  /* the guide down a nested group — the page border, not the control edge */\r\n  --_mono-filter-guide: var(--mono-filter-guide, var(--border));\r\n  /* a control is `bg-transparent` upstream (`dark:bg-input/30` on the dark side) */\r\n  --_mono-filter-surface: var(--mono-filter-surface, var(--mono-mode-surface, transparent));\r\n  --_mono-filter-ring: var(--mono-filter-ring, var(--ring));\r\n  --_mono-filter-danger: var(--mono-filter-danger, var(--destructive));\r\n  --_mono-filter-indent: var(--mono-filter-indent, 1.25rem);\r\n\r\n  /* ── the size scale — sm on the unqualified root ON PURPOSE ─────────────\r\n     basecoat@1.0.2 styles/vega.css .btn[data-size='sm'] — h-8 gap-1 px-2.5 rounded-[min(var(--radius-md),10px)]\r\n     The metrics read the SAME public knobs mono-input / mono-select /\r\n     mono-button consume, so a flavour that retunes a field retunes these. */\r\n  --_mono-filter-height: var(--mono-filter-height-sm, var(--mono-input-height-sm, var(--mono-control-height-sm)));\r\n  --_mono-filter-font: var(--mono-filter-font-sm, var(--mono-input-font-sm, var(--mono-input-font-md, var(--mono-text-sm))));\r\n  /* outline → the field's own radius → the scale: lyra squares a field through\r\n     `--mono-input-radius`, sera and maia through `--mono-input-outline-radius` */\r\n  --_mono-filter-radius: var(--mono-filter-radius, var(--mono-input-outline-radius, var(--mono-input-radius, var(--mono-radius-md))));\r\n  --_mono-filter-btn-radius: var(--mono-filter-btn-radius-sm, var(--mono-button-sm-radius, var(--mono-radius-md)));\r\n  --_mono-filter-icon: var(--mono-filter-icon-sm, 0.875rem);\r\n  --_mono-filter-gap: var(--mono-filter-gap, calc(var(--mono-spacing) * 2));\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: calc(var(--_mono-filter-gap) * 1.5);\r\n  width: 100%;\r\n  /* Allow the rules region to shrink/scroll inside a bounded height. */\r\n  min-height: 0;\r\n  font-family: inherit;\r\n  color: var(--_mono-filter-text);\r\n  box-sizing: border-box;\r\n}\r\n\r\n[mono-filter-builder][mono-size=\"xs\"] {\r\n  --_mono-filter-height: var(--mono-filter-height-xs, var(--mono-input-height-xs, var(--mono-control-height-xs)));\r\n  --_mono-filter-font: var(--mono-filter-font-xs, var(--mono-input-font-xs, var(--mono-text-xs)));\r\n  --_mono-filter-btn-radius: var(--mono-filter-btn-radius-xs, var(--mono-button-xs-radius, var(--mono-radius-md)));\r\n  --_mono-filter-icon: var(--mono-filter-icon-xs, 0.7rem);\r\n}\r\n[mono-filter-builder][mono-size=\"md\"] {\r\n  --_mono-filter-height: var(--mono-filter-height-md, var(--mono-input-height-md, var(--mono-control-height-md)));\r\n  --_mono-filter-font: var(--mono-filter-font-md, var(--mono-input-font-md, var(--mono-text-sm)));\r\n  --_mono-filter-btn-radius: var(--mono-filter-btn-radius-md, var(--mono-button-md-radius, var(--mono-radius-md)));\r\n  --_mono-filter-icon: var(--mono-filter-icon-md, 1rem);\r\n}\r\n[mono-filter-builder][mono-size=\"lg\"] {\r\n  --_mono-filter-height: var(--mono-filter-height-lg, var(--mono-input-height-lg, var(--mono-control-height-lg)));\r\n  --_mono-filter-font: var(--mono-filter-font-lg, var(--mono-input-font-lg, var(--mono-input-font-md, var(--mono-text-sm))));\r\n  --_mono-filter-btn-radius: var(--mono-filter-btn-radius-lg, var(--mono-button-lg-radius, var(--mono-radius-md)));\r\n  --_mono-filter-icon: var(--mono-filter-icon-lg, 1.125rem);\r\n}\r\n[mono-filter-builder][mono-size=\"xl\"] {\r\n  --_mono-filter-height: var(--mono-filter-height-xl, var(--mono-input-height-xl, var(--mono-control-height-xl)));\r\n  --_mono-filter-font: var(--mono-filter-font-xl, var(--mono-input-font-xl, var(--mono-input-font-md, var(--mono-text-base))));\r\n  --_mono-filter-btn-radius: var(--mono-filter-btn-radius-xl, var(--mono-button-xl-radius, var(--mono-radius-md)));\r\n  --_mono-filter-icon: var(--mono-filter-icon-xl, 1.25rem);\r\n}\r\n[mono-filter-builder][mono-size=\"xxl\"] {\r\n  --_mono-filter-height: var(--mono-filter-height-xxl, var(--mono-input-height-xxl, var(--mono-control-height-xxl)));\r\n  --_mono-filter-font: var(--mono-filter-font-xxl, var(--mono-input-font-xxl, var(--mono-input-font-md, var(--mono-text-base))));\r\n  --_mono-filter-btn-radius: var(--mono-filter-btn-radius-xxl, var(--mono-button-xxl-radius, var(--mono-radius-md)));\r\n  --_mono-filter-icon: var(--mono-filter-icon-xxl, 1.375rem);\r\n}\r\n\r\n[mono-filter-builder] *,\r\n[mono-filter-builder] *::before,\r\n[mono-filter-builder] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* ── Scroll layout ─────────────────────────────────────────────────────────\r\n   Apply/Clear stay pinned at the top, Add rule/group at the bottom; the ROOT\r\n   group is the only scroll region, so a bounded `height` / `max-height` scrolls\r\n   JUST the rules. (Nested groups are deeper, so the child combinator skips them.) */\r\n[mono-filter-builder] > [mono-filter-actions],\r\n[mono-filter-builder] > [mono-filter-add] {\r\n  flex: 0 0 auto;\r\n}\r\n[mono-filter-builder] > [mono-filter-group] {\r\n  flex: 1 1 auto;\r\n  min-height: 0;\r\n  overflow: auto;\r\n  /* Portaled + anchored: a chained scroll would drag this panel off-screen\r\n     (see `[mono-th-filter-list]`). */\r\n  overscroll-behavior: contain;\r\n  padding-right: calc(var(--mono-spacing) * 1);\r\n}\r\n\r\n/* ── Apply / Clear — ABOVE the rules, not below ─────────────────────────── */\r\n[mono-filter-actions] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-filter-gap);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn — inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-3 disabled:opacity-50 */\r\n[mono-filter-btn] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 0 calc(var(--mono-spacing) * 2.5);\r\n  height: var(--_mono-filter-height);\r\n  border-radius: var(--_mono-filter-btn-radius);\r\n  border: var(--mono-border-width) solid transparent;\r\n  font: inherit;\r\n  font-size: var(--_mono-filter-font);\r\n  font-weight: var(--mono-font-weight-medium);\r\n  white-space: nowrap;\r\n  cursor: pointer;\r\n  transition:\r\n    background-color var(--mono-duration-fast, 150ms) ease,\r\n    color var(--mono-duration-fast, 150ms) ease,\r\n    border-color var(--mono-duration-fast, 150ms) ease;\r\n}\r\n/* basecoat@1.0.2 styles/vega.css .btn:not([data-variant]), .btn[data-variant='primary'] — bg-primary text-primary-foreground hover:bg-primary/90 */\r\n[mono-filter-btn]:not([mono-variant]) {\r\n  background: var(--_mono-filter-primary);\r\n  color: var(--_mono-filter-on-primary);\r\n}\r\n[mono-filter-btn]:not([mono-variant]):hover {\r\n  background: color-mix(in oklab, var(--_mono-filter-primary) 90%, transparent);\r\n}\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='outline'] — border bg-background hover:bg-accent hover:text-accent-foreground */\r\n[mono-filter-btn][mono-variant=\"ghost\"] {\r\n  background: var(--background);\r\n  border-color: var(--_mono-filter-border);\r\n  color: var(--_mono-filter-text);\r\n}\r\n[mono-filter-btn][mono-variant=\"ghost\"]:hover {\r\n  background: var(--accent);\r\n  color: var(--accent-foreground);\r\n}\r\n[mono-filter-btn]:focus-visible {\r\n  outline: none;\r\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--_mono-filter-ring) 50%, transparent);\r\n}\r\n\r\n/* ── Group ──────────────────────────────────────────────────────────────── */\r\n[mono-filter-group] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-filter-gap);\r\n}\r\n/* Nested groups indent; the root sits flush. */\r\n[mono-filter-children] [mono-filter-group] {\r\n  padding-left: var(--_mono-filter-indent);\r\n  border-left: var(--mono-border-width) dashed var(--_mono-filter-guide);\r\n}\r\n[mono-filter-group-head] {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-wrap: wrap;\r\n  gap: calc(var(--_mono-filter-gap) * 0.75);\r\n  font-size: var(--_mono-filter-font);\r\n  color: var(--_mono-filter-muted);\r\n}\r\n[mono-filter-match] {\r\n  white-space: nowrap;\r\n}\r\n[mono-filter-group-actions] {\r\n  display: inline-flex;\r\n  gap: calc(var(--mono-spacing) * 0.5);\r\n  margin-left: auto;\r\n}\r\n\r\n[mono-filter-children] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-filter-gap);\r\n}\r\n\r\n/* ── Rule row ───────────────────────────────────────────────────────────── */\r\n[mono-filter-row] {\r\n  display: grid;\r\n  /* field | operator | value | nested | trash */\r\n  grid-template-columns: minmax(8rem, 1.4fr) minmax(8rem, 1.2fr) minmax(8rem, 2fr) auto auto;\r\n  align-items: center;\r\n  gap: var(--_mono-filter-gap);\r\n}\r\n@media (max-width: 720px) {\r\n  [mono-filter-row] {\r\n    grid-template-columns: 1fr 1fr auto auto;\r\n  }\r\n  [mono-filter-value-cell] {\r\n    grid-column: 1 / -1;\r\n  }\r\n}\r\n\r\n[mono-filter-value-cell],\r\n[mono-filter-range] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: calc(var(--_mono-filter-gap) * 0.75);\r\n  min-width: 0;\r\n}\r\n\r\n/* ── Controls (selects + inputs) ─────────────────────────────────────────── */\r\n/* basecoat@1.0.2 styles/vega.css .field > select, select.select — border-input h-9 rounded-md border bg-transparent py-1 ps-2.5 pe-8 text-sm shadow-xs transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3\r\n   The text input is the same box; the flavour's outline knob decides the corner\r\n   for both, exactly as it does for `<mono-input>` and `<mono-select>`. */\r\n[mono-filter-control] {\r\n  width: 100%;\r\n  min-width: 0;\r\n  height: var(--_mono-filter-height);\r\n  padding: 0 calc(var(--mono-spacing) * 2.5);\r\n  border: var(--mono-border-width) solid var(--_mono-filter-border);\r\n  border-radius: var(--_mono-filter-radius);\r\n  background-color: var(--_mono-filter-surface);\r\n  color: var(--_mono-filter-text);\r\n  font: inherit;\r\n  font-size: var(--_mono-filter-font);\r\n  box-shadow: var(--mono-shadow-xs, none);\r\n  /* stated in both directions: a host page's preflight (Tailwind, UnoCSS) sets\r\n     `appearance: none` on a select and a shadow root escapes it — so without\r\n     this the light build lost its caret and the shadow build kept the native\r\n     one. Upstream draws its own; so does this. */\r\n  appearance: none;\r\n  outline: none;\r\n  transition:\r\n    border-color var(--mono-duration-fast, 150ms) ease,\r\n    box-shadow var(--mono-duration-fast, 150ms) ease;\r\n}\r\n[mono-filter-control]:focus,\r\n[mono-filter-control]:focus-visible {\r\n  border-color: var(--_mono-filter-ring);\r\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--_mono-filter-ring) 50%, transparent);\r\n  outline: none;\r\n}\r\n/* `disabled:opacity-50` */\r\n[mono-filter-control]:disabled {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n}\r\n/* `placeholder:text-muted-foreground` — stated, so a host page's own placeholder\r\n   colour cannot reach a portaled builder */\r\n[mono-filter-control]::placeholder {\r\n  color: var(--_mono-filter-muted);\r\n  opacity: 1;\r\n}\r\n[mono-filter-range] > [mono-filter-control] {\r\n  min-width: 0;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > select, select.select — pe-8 bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.625rem] bg-size-[1rem]\r\n   The caret, drawn the way upstream draws it — the same token the ported\r\n   `<mono-select>` paints with, so it sits at the same place in every flavour. */\r\nselect[mono-filter-control] {\r\n  padding-right: calc(var(--mono-spacing) * 8);\r\n  background-image: var(--chevron-down-icon-50);\r\n  background-repeat: no-repeat;\r\n  background-position: right calc(var(--mono-spacing) * 2.5) center;\r\n  background-size: 1rem;\r\n}\r\n\r\n/* The group operator sits inline in a sentence, so it must NOT grow — otherwise it\r\n   pushes the trailing \"of the following rules:\" to the far edge. Otherwise it\r\n   is a control like every other: bordered, and at the control HEIGHT rather\r\n   than `auto` — a bare select's intrinsic height differs between a page under\r\n   a preflight and a shadow root, which put the shadow build's rows 5px higher. */\r\n[mono-filter-group-op] {\r\n  flex: 0 0 auto;\r\n  width: auto;\r\n  min-width: 6rem;\r\n  color: var(--_mono-filter-accent);\r\n  font-weight: var(--mono-font-weight-semibold);\r\n}\r\n\r\n/* ── Icon buttons ───────────────────────────────────────────────────────── */\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-accent hover:text-accent-foreground */\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-size='icon'] — size-9 */\r\n[mono-filter-icon-btn] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-filter-height);\r\n  height: var(--_mono-filter-height);\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--_mono-filter-btn-radius);\r\n  background: transparent;\r\n  color: var(--_mono-filter-muted);\r\n  line-height: 0;\r\n  cursor: pointer;\r\n  transition:\r\n    color var(--mono-duration-fast, 150ms) ease,\r\n    background-color var(--mono-duration-fast, 150ms) ease;\r\n}\r\n[mono-filter-icon-btn]:hover,\r\n[mono-filter-icon-btn]:focus-visible {\r\n  background: var(--accent);\r\n  color: var(--accent-foreground);\r\n  outline: none;\r\n}\r\n[mono-filter-icon-btn]:focus-visible {\r\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--_mono-filter-ring) 50%, transparent);\r\n}\r\n[mono-filter-icon-btn][mono-danger]:hover,\r\n[mono-filter-icon-btn][mono-danger]:focus-visible {\r\n  color: var(--_mono-filter-danger);\r\n}\r\n[mono-filter-icon-btn] .mono-icon,\r\n[mono-filter-icon-btn] > svg {\r\n  width: var(--_mono-filter-icon);\r\n  height: var(--_mono-filter-icon);\r\n}\r\n\r\n/* ── Add rule / group links ─────────────────────────────────────────────── */\r\n[mono-filter-add] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: calc(var(--_mono-filter-gap) * 2);\r\n}\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='link'] — text-primary underline-offset-4 hover:underline */\r\n[mono-filter-link] {\r\n  padding: 0;\r\n  border: 0;\r\n  background: none;\r\n  font: inherit;\r\n  font-size: var(--_mono-filter-font);\r\n  color: var(--_mono-filter-accent);\r\n  text-underline-offset: 4px;\r\n  cursor: pointer;\r\n}\r\n[mono-filter-link]:hover {\r\n  text-decoration: underline;\r\n}\r\n[mono-filter-link]:focus-visible {\r\n  outline: none;\r\n  border-radius: var(--mono-radius-sm);\r\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--_mono-filter-ring) 50%, transparent);\r\n}\r\n\r\n[mono-filter-empty] {\r\n  padding: calc(var(--mono-spacing) * 1) 0;\r\n  font-size: var(--_mono-filter-font);\r\n  color: var(--_mono-filter-muted);\r\n}\r\n";
+
 //#endregion
 //#region src/components/filter/mono-filter-builder.shadow.ts
-var MonoFilterBuilderShadow = class MonoFilterBuilderShadow extends MonoFilterBuilderCore(LitElement) {
+let MonoFilterBuilderShadow = class MonoFilterBuilderShadow extends MonoFilterBuilderCore(LitElement) {
 	static {
-		this.styles = [unsafeCSS(toShadowCss(filter_default, { hostDisplay: "block" }))];
+		this.styles = [unsafeCSS(toShadowCss(filter_css_raw_default, { hostDisplay: "block" }))];
 	}
 	renderIcon(name) {
 		if (name === "trash") return html`<span class="mono-icon i-mdi-trash-can-outline" aria-hidden="true"></span>`;
@@ -398,5 +401,6 @@ var MonoFilterBuilderShadow = class MonoFilterBuilderShadow extends MonoFilterBu
 	}
 };
 MonoFilterBuilderShadow = __decorate([customElement("mono-shadow-filter-builder")], MonoFilterBuilderShadow);
+
 //#endregion
-export { DEFAULT_TEXTS, MonoFilterBuilderCore, MonoFilterBuilderShadow, OPERATOR_ARITY, arrayToODataString, arrayToTree, monoFilterBuilder, odataStringToArray, operatorsFor, treeToArray };
+export { DEFAULT_TEXTS, MonoFilterBuilderCore, MonoFilterBuilderShadow, OPERATOR_ARITY, arrayToODataString, arrayToTree, monoFilterBuilder, odataStringToArray, operatorsFor, treeToArray };